feat: delete & edit role.

src/containers/Preferences/Users/Roles/RolesAlerts.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+import RoleDeleteAlert from '../../../Alerts/Roles/RoleDeleteAlert';
+
+export default [{ name: 'role-delete', component: RoleDeleteAlert }];

src/containers/Preferences/Users/Roles/RolesForm/RolesForm.js

@@ -17,7 +17,7 @@ import { mapperPermissionSchema } from './utils';
 import RolesFormContent from './RolesFormContent';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
 
-import { compose } from 'utils';
+import { compose, transformToForm } from 'utils';
 
 const defaultValues = {
   role_name: '',
@@ -32,12 +32,18 @@ function RolesForm({
   // #withDashboardActions
   changePreferencesPageTitle,
 }) {
-  const { createRolePermissionMutate, editRolePermissionMutate, permissions } =
-    useRolesFormContext();
+  const {
+    isNewMode,
+    createRolePermissionMutate,
+    editRolePermissionMutate,
+    permissionSchema,
+    roleId,
+  } = useRolesFormContext();
 
   // Initial values.
   const initialValues = {
     ...defaultValues,
+    // ...transformToForm(permissionSchema, defaultValues),
   };
 
   React.useEffect(() => {
@@ -53,7 +59,11 @@ function RolesForm({
     setSubmitting(true);
     const onSuccess = () => {
       AppToaster.show({
-        message: intl.get('roles.permisssion_schema.success_message'),
+        message: intl.get(
+          isNewMode
+            ? 'roles.permission_schema.success_message'
+            : 'roles.permission_schema.upload_message',
+        ),
         intent: Intent.SUCCESS,
       });
       setSubmitting(false);
@@ -62,13 +72,17 @@ function RolesForm({
     const onError = (errors) => {
       setSubmitting(false);
     };
-    createRolePermissionMutate(form).then(onSuccess).catch(onError);
+    if (isNewMode) {
+      createRolePermissionMutate(form).then(onSuccess).catch(onError);
+    } else {
+      editRolePermissionMutate([roleId, form]).then(onSuccess).catch(onError);
+    }
   };
 
   return (
     <Formik
       initialValues={initialValues}
-      validationSchema={CreateRolesFormSchema}
+      validationSchema={isNewMode ? CreateRolesFormSchema : EditRolesFormSchema}
       onSubmit={handleFormSubmit}
     >
       <RolesFormContent />

src/containers/Preferences/Users/Roles/RolesForm/RolesFormContent.js

@@ -25,7 +25,7 @@ export default function RolesFormContent() {
   const handleCloseClick = () => {
     history.go(-1);
   };
-  console.log(values, 'XX');
+  console.log(values, 'EE');
   return (
     <Form>
       {/* ----------  name ----------  */}

src/containers/Preferences/Users/Roles/RolesForm/RolesFormProvider.js

@@ -1,15 +1,16 @@
 import React from 'react';
-import { flatMap, map } from 'lodash';
 import classNames from 'classnames';
 import { CLASSES } from 'common/classes';
+import _ from 'lodash';
 
 import {
   useCreateRolePermissionSchema,
   useEditRolePermissionSchema,
   usePermissionsSchema,
-  useSaveSettings
+  useRolePermission,
 } from 'hooks/query';
 import PreferencesPageLoader from '../../../PreferencesPageLoader';
+import { mapperPermissionSchema } from './utils';
 
 const RolesFormContext = React.createContext();
 
@@ -20,6 +21,7 @@ function RolesFormProvider({ ...props }) {
   // Create and edit roles mutations.
   const { mutateAsync: createRolePermissionMutate } =
     useCreateRolePermissionSchema();
+
   const { mutateAsync: editRolePermissionMutate } =
     useEditRolePermissionSchema();
 
@@ -29,17 +31,25 @@ function RolesFormProvider({ ...props }) {
     isFetching: isPermissionsSchemaFetching,
   } = usePermissionsSchema();
 
-  // Save Organization Settings.
-  const { mutateAsync: saveSettingMutate } = useSaveSettings();
+  const roleId = 6;
+
+  const { data: permissionSchema, isLoading: isPermissionLoading } =
+    useRolePermission(roleId, {
+      enabled: !!roleId,
+    });
+
+  const isNewMode = !roleId;
 
   // Provider state.
   const provider = {
+    isNewMode,
+    roleId,
     permissionsSchema,
+    permissionSchema,
     isPermissionsSchemaLoading,
     isPermissionsSchemaFetching,
     createRolePermissionMutate,
     editRolePermissionMutate,
-    saveSettingMutate
   };
 
   return (
@@ -50,7 +60,7 @@ function RolesFormProvider({ ...props }) {
       )}
     >
       <div className={classNames(CLASSES.CARD)}>
-        {isPermissionsSchemaLoading ? (
+        {isPermissionsSchemaLoading || isPermissionLoading ? (
           <PreferencesPageLoader />
         ) : (
           <RolesFormContext.Provider value={provider} {...props} />

src/containers/Preferences/Users/Roles/RolesForm/components.js

@@ -33,7 +33,7 @@ const AbilitiesList = ({ subject, abilities }) => {
       {abilities?.map(({ key, label }) => (
         <FastField name={`permissions.${subject}/${key}`} type="checkbox">
           {({ form: { setFieldValue, values }, field }) => (
-            <Checkbox inline={true} label={label} name={subject} {...field} />
+            <Checkbox inline={true} label={label} {...field} />
           )}
         </FastField>
       ))}
@@ -46,7 +46,7 @@ const ExtraAbilitiesList = ({ subject, extraAbilities }) => {
     <AbilitieList>
       <FastField name={`permissions.${subject}/${key}`} type="checkbox">
         {({ form: { setFieldValue, values }, field }) => (
-          <Checkbox inline={true} label={label} name={subject} {...field} />
+          <Checkbox inline={true} label={label} {...field} />
         )}
       </FastField>
     </AbilitieList>