feat: add default role permissions in new mode.

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { useHistory } from 'react-router-dom';
 import intl from 'react-intl-universal';
 import { Formik } from 'formik';
+import { isEmpty } from 'lodash';
 
 import 'style/pages/Preferences/Roles/Form.scss';
 
@@ -12,7 +13,11 @@ import { AppToaster, FormattedMessage as T } from 'components';
 import { CreateRolesFormSchema, EditRolesFormSchema } from './RolesForm.schema';
 
 import { useRolesFormContext } from './RolesFormProvider';
-import { transformToArray } from './utils';
+import {
+  getNewRoleInitialValues,
+  transformToArray,
+  transformToObject,
+} from './utils';
 
 import RolesFormContent from './RolesFormContent';
 import withDashboardActions from 'containers/Dashboard/withDashboardActions';
@@ -35,24 +40,28 @@ function RolesForm({
   // History context.
   const history = useHistory();
 
+  // Role form context.
   const {
     isNewMode,
     createRolePermissionMutate,
     editRolePermissionMutate,
-    permissionSchema,
+    permissionsSchema,
+    role,
     roleId,
   } = useRolesFormContext();
 
   // Initial values.
   const initialValues = {
     ...defaultValues,
-    ...transformToForm(permissionSchema, defaultValues),
+    ...(!isEmpty(role)
+      ? transformToForm(transformToObject(role), defaultValues)
+      : getNewRoleInitialValues(permissionsSchema)),
   };
-
   React.useEffect(() => {
     changePreferencesPageTitle(<T id={'roles.label'} />);
   }, [changePreferencesPageTitle]);
 
+  // Handle the form submit.
   const handleFormSubmit = (values, { setSubmitting }) => {
     const permission = transformToArray(values);
     const form = {

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

@@ -25,27 +25,27 @@ function RolesFormProvider({ roleId, ...props }) {
   const { mutateAsync: editRolePermissionMutate } =
     useEditRolePermissionSchema();
 
+  // Retrieve permissions schema.
   const {
     data: permissionsSchema,
     isLoading: isPermissionsSchemaLoading,
     isFetching: isPermissionsSchemaFetching,
   } = usePermissionsSchema();
 
-  const { data: permission, isLoading: isPermissionLoading } =
+  const { data: role, isLoading: isPermissionLoading } =
     useRolePermission(roleId, {
       enabled: !!roleId,
     });
 
+  // Detarmines whether the new or edit mode.
   const isNewMode = !roleId;
 
-  const permissionSchema = transformToObject(permission);
-
   // Provider state.
   const provider = {
     isNewMode,
     roleId,
+    role,
     permissionsSchema,
-    permissionSchema,
     isPermissionsSchemaLoading,
     isPermissionsSchemaFetching,
     createRolePermissionMutate,

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

@@ -1,5 +1,3 @@
-import { isEmpty } from 'lodash';
-
 export const transformToArray = ({ permissions }) => {
   return Object.keys(permissions).map((index) => {
     const [value, key] = index.split('/');
@@ -12,16 +10,44 @@ export const transformToArray = ({ permissions }) => {
   });
 };
 
-export const transformToObject = ({ name, description, permissions }) => {
+export const transformPermissionsToObject = (permissions) => {
-  if (!isEmpty(permissions)) {
+  const output = {};
-    const output = {};
+  permissions.forEach((item) => {
-    permissions.forEach((item) => {
+    output[`${item.subject}/${item.ability}`] = !!item.value;
-      output[`${item.subject}/${item.ability}`] = !!item.value;
+  });
-    });
+  return output;
-    return {
+};
-      role_name: name,
+
-      role_description: description,
+export const transformToObject = (role) => {
-      permissions: { ...output },
+  return {
-    };
+    role_name: role.name,
-  }
+    role_description: role.description,
+    permissions: transformPermissionsToObject(role.permissions),
+  };
+};
+
+export const getDefaultValuesFromSchema = (schema) => {
+  return schema
+    .map((item) => {
+      const abilities = [
+        ...(item.abilities || []),
+        ...(item.extra_abilities || []),
+      ];
+      return abilities
+        .filter((ability) => ability.default)
+        .map((ability) => ({
+          subject: item.subject,
+          ability: ability.key,
+          value: ability.default,
+        }));
+    })
+    .flat();
+};
+
+export const getNewRoleInitialValues = (schema) => {
+  return {
+    permissions: transformPermissionsToObject(
+      getDefaultValuesFromSchema(schema),
+    ),
+  };
 };

src/containers/Preferences/Users/Roles/RolesLanding/RolesDataTable.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import { Intent, Tag } from '@blueprintjs/core';
+import { Intent } from '@blueprintjs/core';
 import { useHistory } from 'react-router-dom';
-
 import intl from 'react-intl-universal';
+import styled from 'styled-components';
 
-import { DataTable, Choose, AppToaster } from 'components';
+import { DataTable, AppToaster } from 'components';
 import TableSkeletonRows from 'components/Datatable/TableSkeletonRows';
 
 import { useRolesTableColumns, ActionsMenu } from './components';
@@ -23,10 +23,13 @@ function RolesDataTable({
   // History context.
   const history = useHistory();
 
+  // Retrieve roles table columns
   const columns = useRolesTableColumns();
 
+  // Roles table context.
   const { roles, isRolesFetching, isRolesLoading } = useRolesContext();
 
+  // handles delete the given role.
   const handleDeleteRole = ({ id, predefined }) => {
     if (predefined) {
       AppToaster.show({
@@ -37,24 +40,20 @@ function RolesDataTable({
       openAlert('role-delete', { roleId: id });
     }
   };
-
+  // Handles the edit of the given role.
   const handleEditRole = ({ id, predefined }) => {
     if (predefined) {
-      {
+      AppToaster.show({
-        AppToaster.show({
+        message: intl.get('roles.error.you_cannot_edit_predefined_roles'),
-          message: intl.get('roles.error.you_cannot_edit_predefined_roles'),
+        intent: Intent.DANGER,
-          intent: Intent.DANGER,
+      });
-        });
-      }
     } else {
-      {
+      history.push(`/preferences/roles/${id}`);
-        history.push(`/preferences/roles/${id}`);
-      }
     }
   };
 
   return (
-    <DataTable
+    <RolesTable
       columns={columns}
       data={roles}
       loading={isRolesLoading}
@@ -70,4 +69,10 @@ function RolesDataTable({
   );
 }
 
+const RolesTable = styled(DataTable)`
+  .table .tr {
+    min-height: 42px;
+  }
+`;
+
 export default compose(withAlertsActions)(RolesDataTable);

src/containers/Preferences/Users/Roles/RolesLanding/RolesList.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import intl from 'react-intl-universal';
 
 import { RolesListProvider } from './RolesListProvider';
 import RolesDataTable from './RolesDataTable';

src/containers/Preferences/Users/Roles/RolesLanding/RolesListProvider.js

@@ -9,8 +9,7 @@ const RolesListContext = React.createContext();
  * Roles list provider.
  */
 function RolesListProvider({ ...props }) {
-
+  // Fetch roles list.
-   // fetch roles list.
   const {
     data: roles,
     isFetching: isRolesFetching,

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import intl from 'react-intl-universal';
 
-import { Intent, Button, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
+import { Intent, Menu, MenuItem, MenuDivider } from '@blueprintjs/core';
 import { safeCallback } from 'utils';
-import { Icon, If } from 'components';
+import { Icon } from 'components';
 
 /**
  * Context menu of roles.

src/hooks/query/roles.js

@@ -87,9 +87,7 @@ export function useRolePermission(role_id, props, requestProps) {
     { method: 'get', url: `roles/${role_id}`, ...requestProps },
     {
       select: (res) => res.data.role,
-      defaultData: {
+      defaultData: {},
-        permission: [],
-      },
       ...props,
     },
   );