fix(ui) - roles and permissions

frontend/app/api_client.js

@@ -25,7 +25,6 @@ const siteIdRequiredPaths = [
   '/custom_metrics',
   '/dashboards',
   '/metrics',
-  '/trails',
   // '/custom_metrics/sessions',
 ];
 

frontend/app/components/Client/Roles/Roles.tsx

@@ -110,9 +110,9 @@ function Roles(props: Props) {
           >
             <div className={''}>
               <div className={cn(stl.wrapper, 'flex items-start py-3 border-b px-3 pr-20')}>
-                <div className="flex" style={{ width: '20%'}}>Title</div>
-                <div className="flex" style={{ width: '30%'}}>Project Access</div>
-                <div className="flex" style={{ width: '50%'}}>Feature Access</div>
+                <div className="" style={{ width: '20%'}}>Title</div>
+                <div className="" style={{ width: '30%'}}>Project Access</div>
+                <div className="" style={{ width: '50%'}}>Feature Access</div>
               </div>
               {roles.map(role => (
                 <RoleItem

frontend/app/components/Client/Roles/components/RoleForm/RoleForm.tsx

@@ -107,7 +107,7 @@ const RoleForm = (props: Props) => {
                 isSearchable
                 name="projects"
                 options={ projectOptions }
-                onChange={ ({ value }: any) => writeOption({ name: 'projects', value }) }
+                onChange={ ({ value }: any) => writeOption({ name: 'projects', value: value.value }) }
                 value={null}
               />
               { role.projects.size > 0 && (
@@ -181,10 +181,10 @@ export default connect((state: any) => {
       key: p.get('id'),
       value: p.get('id'),
       label: p.get('name'),
-      isDisabled: role.projects.includes(p.get('id')),
-    })).toJS(),
-    permissions: state.getIn(['roles', 'permissions'])
-      .map(({ text, value }: any) => ({ label: text, value, isDisabled: role.permissions.includes(value) })).toJS(),
+      // isDisabled: role.projects.includes(p.get('id')),
+    })).filter(({ value }: any) => !role.projects.includes(value)).toJS(),
+    permissions: state.getIn(['roles', 'permissions']).filter(({ value }: any) => !role.permissions.includes(value))
+      .map(({ text, value }: any) => ({ label: text, value })).toJS(),
     saving: state.getIn([ 'roles', 'saveRequest', 'loading' ]),
     projectsMap: projects.reduce((acc: any, p: any) => {
       acc[ p.get('id') ] = p.get('name')

frontend/app/components/Client/Roles/components/RoleItem/RoleItem.tsx

@@ -45,17 +45,16 @@ function RoleItem({ role, deleteHandler, editHandler, isAdmin, permissions, proj
         {role.permissions.map((permission: any) => (
           <PermisionLabel label={permissions[permission]} key={permission.id} />
         ))}
-      </div>
 
-      { isAdmin && (
         <div className={ cn(stl.actions, 'absolute right-0 top-0 bottom-0 mr-8') }>
-          { !!editHandler && 
+          {isAdmin && !!editHandler && 
             <div className={ cn(stl.button, {[stl.disabled] : role.protected }) } onClick={ () => editHandler(role) }>
               <Icon name="edit" size="16" color="teal"/>
             </div>
           }
         </div>
-      )}
+      </div>
+      
     </div>
   );
 }

frontend/app/components/Client/Users/components/AddUserButton/AddUserButton.tsx

@@ -9,6 +9,7 @@ const LIMIT_WARNING = 'You have reached users limit.';
 function AddUserButton({ isAdmin = false, onClick }: any ) {
     const { userStore } = useStore();
     const limtis = useObserver(() => userStore.limits);
+    console.log('limtis', limtis)
     const cannAddUser = useObserver(() => isAdmin && (limtis.teamMember === -1 || limtis.teamMember > 0));
     return (
         <Popup

frontend/app/mstore/userStore.ts

@@ -113,6 +113,7 @@ export default class UserStore {
                     resolve(response);
                 }).catch(error => {
                     this.saving = false;
+                    toast.error('Error saving user');
                     reject(error);
                 }).finally(() => {
                     this.saving = false;
@@ -130,6 +131,7 @@ export default class UserStore {
                     resolve(response);
                 }).catch(error => {
                     this.saving = false;
+                    toast.error('Error deleting user');
                     reject(error);
                 }).finally(() => {
                     this.saving = false;

frontend/app/services/UserService.ts

@@ -1,5 +1,6 @@
 import APIClient from 'App/api_client';
 import { IUser } from 'App/mstore/types/user'
+import { fetchErrorCheck } from 'App/utils'
 
 export default class UserService {
     private client: APIClient;
@@ -28,11 +29,11 @@ export default class UserService {
         const data = user.toSave();
         if (user.userId) {
             return this.client.put('/client/members/' + user.userId, data)
-                .then((response: { json: () => any; }) => response.json())
+                .then(fetchErrorCheck)
                 .then((response: { data: any; }) => response.data || {})
         } else {
             return this.client.post('/client/members', data)
-                .then((response: { json: () => any; }) => response.json())
+                .then(fetchErrorCheck)
                 .then((response: { data: any; }) => response.data || {});
         }
     }
@@ -45,7 +46,7 @@ export default class UserService {
 
     delete(userId: string) {
         return this.client.delete('/client/members/' + userId)
-            .then((response: { json: () => any; }) => response.json())
+            .then(fetchErrorCheck)
             .then((response: { data: any; }) => response.data || {});
     }
 

frontend/app/types/account/account.js

@@ -18,6 +18,7 @@ export default Member.extend({
   apiKey: undefined,
   tenantKey: undefined,
   tenantName: undefined,
+  edition: undefined,
 }, {
   fromJS: ({ ...account})=> ({
     ...account,