Fix PR feedback

Signed-off-by: HichamELBSI <elabbassih@gmail.com>

packages/strapi-admin/admin/ee/components/Roles/NameInput.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import SizedInput from '../../../src/components/SizedInput';
+
+const NameInput = inputProps => <SizedInput name="name" type="text" {...inputProps} />;
+
+export default NameInput;

packages/strapi-admin/admin/ee/components/Roles/RoleForm.js

@@ -1,67 +0,0 @@
-import React from 'react';
-import { PropTypes } from 'prop-types';
-import { useIntl } from 'react-intl';
-
-import FormCard from '../../../src/components/FormBloc';
-import SizedInput from '../../../src/components/SizedInput';
-import ButtonWithNumber from '../../../src/components/Roles/ButtonWithNumber';
-
-const RoleForm = ({ values, errors, onChange, onBlur, isLoading }) => {
-  const { formatMessage } = useIntl();
-
-  const actions = [
-    <ButtonWithNumber number={0} onClick={() => console.log('Open user modal')} key="user-button">
-      {formatMessage({
-        id: 'Settings.roles.form.button.users-with-role',
-      })}
-    </ButtonWithNumber>,
-  ];
-
-  return (
-    <FormCard
-      actions={actions}
-      isLoading={isLoading}
-      title={formatMessage({
-        id: 'Settings.roles.form.title',
-      })}
-      subtitle={formatMessage({
-        id: 'Settings.roles.form.description',
-      })}
-    >
-      <SizedInput
-        label="Name"
-        name="name"
-        type="text"
-        error={errors.name ? { id: errors.name } : null}
-        onBlur={onBlur}
-        value={values.name}
-        onChange={onChange}
-      />
-
-      <SizedInput
-        label="Description"
-        name="description"
-        type="textarea"
-        onBlur={onBlur}
-        value={values.description}
-        onChange={onChange}
-        // Override the default height of the textarea
-        style={{ height: 115 }}
-      />
-    </FormCard>
-  );
-};
-
-RoleForm.defaultProps = {
-  isLoading: false,
-  values: { name: '', description: '' },
-};
-RoleForm.propTypes = {
-  values: PropTypes.object,
-  errors: PropTypes.object.isRequired,
-  onChange: PropTypes.func.isRequired,
-  onBlur: PropTypes.func.isRequired,
-  isLoading: PropTypes.bool,
-};
-
-export default RoleForm;

packages/strapi-admin/admin/ee/containers/Roles/CreatePage/index.js

@@ -6,6 +6,7 @@ import { useIntl } from 'react-intl';
 import { request } from 'strapi-helper-plugin';
 import { useHistory } from 'react-router-dom';
 
+import { roleTabsLabel } from '../../../../src/utils';
 import BaselineAlignement from '../../../../src/components/BaselineAlignement';
 import ContainerFluid from '../../../../src/components/ContainerFluid';
 import FormCard from '../../../../src/components/FormBloc';
@@ -125,7 +126,7 @@ const CreatePage = () => {
             </FormCard>
 
             <Padded top size="md">
-              <Tabs tabsLabel={['Collection Types', 'Single Types', 'Plugins', 'Settings']}>
+              <Tabs tabsLabel={roleTabsLabel}>
                 <CollectionTypesPermissions />
                 <SingleTypesPermissions />
                 <PluginsPermissions />

packages/strapi-admin/admin/src/components/Roles/NameInput.js

@@ -0,0 +1,6 @@
+import React from 'react';
+import SizedInput from '../SizedInput';
+
+const NameInput = inputProps => <SizedInput disabled name="name" type="text" {...inputProps} />;
+
+export default NameInput;

packages/strapi-admin/admin/src/components/Roles/RoleForm.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { PropTypes } from 'prop-types';
 import { useIntl } from 'react-intl';
+import NameInput from 'ee_else_ce/components/Roles/NameInput';
 
 import FormCard from '../FormBloc';
 import SizedInput from '../SizedInput';
@@ -28,9 +29,10 @@ const RoleForm = ({ values, errors, onChange, onBlur, isLoading }) => {
         id: 'Settings.roles.form.description',
       })}
     >
-      <SizedInput
+      <NameInput
-        label="Name"
+        label={formatMessage({
-        disabled
+          id: 'Settings.roles.form.input.name',
+        })}
         name="name"
         type="text"
         error={errors.name ? { id: errors.name } : null}
@@ -40,7 +42,9 @@ const RoleForm = ({ values, errors, onChange, onBlur, isLoading }) => {
       />
 
       <SizedInput
-        label="Description"
+        label={formatMessage({
+          id: 'Settings.roles.form.input.description',
+        })}
         name="description"
         type="textarea"
         onBlur={onBlur}

packages/strapi-admin/admin/src/components/Roles/Tabs/index.js

@@ -2,11 +2,13 @@ import React, { useState } from 'react';
 import { Flex, Text, Padded } from '@buffetjs/core';
 import PropTypes from 'prop-types';
 import { LoadingIndicator } from 'strapi-helper-plugin';
+import { useIntl } from 'react-intl';
 
 import TabsWrapper from './TabsWrapper';
 import Tab from './Tab';
 
-const Tabs = ({ children, tabsLabel, isLoading }) => {
+const Tabs = ({ children, isLoading, tabsLabel }) => {
+  const { formatMessage } = useIntl();
   const [selectedTabIndex, setSelectedTabIndex] = useState(0);
 
   const handleSelectedTab = index => {
@@ -26,16 +28,17 @@ const Tabs = ({ children, tabsLabel, isLoading }) => {
           <Flex alignItems="stretch">
             {tabsLabel.map((tab, index) => (
               <Tab
-                // eslint-disable-next-line react/no-array-index-key
-                key={`${tab}-${index}`}
-                onClick={() => handleSelectedTab(index)}
                 isActive={index === selectedTabIndex}
+                key={tab.id}
+                onClick={() => handleSelectedTab(index)}
               >
-                <Text fontWeight={index === selectedTabIndex ? 'bold' : 'semiBold'}>{tab}</Text>
+                <Text fontWeight={index === selectedTabIndex ? 'bold' : 'semiBold'}>
+                  {formatMessage(tab)}
+                </Text>
               </Tab>
             ))}
           </Flex>
-          {children && children[selectedTabIndex]}
+          {children[selectedTabIndex]}
         </>
       )}
     </TabsWrapper>
@@ -48,8 +51,14 @@ Tabs.defaultProps = {
 
 Tabs.propTypes = {
   children: PropTypes.node.isRequired,
-  tabsLabel: PropTypes.array.isRequired,
   isLoading: PropTypes.bool,
+  tabsLabel: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      defaultMessage: PropTypes.string.isRequired,
+      labelId: PropTypes.string.isRequired,
+    })
+  ).isRequired,
 };
 
 export default Tabs;

packages/strapi-admin/admin/src/containers/Roles/EditPage/index.js

@@ -5,16 +5,17 @@ import { Header } from '@buffetjs/custom';
 import { Padded } from '@buffetjs/core';
 import { Formik } from 'formik';
 import { useIntl } from 'react-intl';
-import RoleForm from 'ee_else_ce/components/Roles/RoleForm';
 
+import { roleTabsLabel } from '../../../utils';
+import RoleForm from '../../../components/Roles/RoleForm';
 import BaselineAlignement from '../../../components/BaselineAlignement';
 import ContainerFluid from '../../../components/ContainerFluid';
 import {
   CollectionTypesPermissions,
-  Tabs,
-  SingleTypesPermissions,
   PluginsPermissions,
   SettingsPermissions,
+  SingleTypesPermissions,
+  Tabs,
 } from '../../../components/Roles';
 import { useFetchRole, useFetchPermissionsLayout } from '../../../hooks';
 
@@ -66,7 +67,7 @@ const EditPage = () => {
       // });
 
       // if (res.data.id) {
-      strapi.notification.success('Settings.roles.edited');
+      strapi.notification.success('notification.success.saved');
       goBack();
       // }
     } catch (err) {
@@ -112,10 +113,7 @@ const EditPage = () => {
               onBlur={handleBlur}
             />
             <Padded top size="md">
-              <Tabs
+              <Tabs isLoading={isLayoutLoading} tabsLabel={roleTabsLabel}>
-                isLoading={isLayoutLoading}
-                tabsLabel={['Collection Types', 'Single Types', 'Plugins', 'Settings']}
-              >
                 <CollectionTypesPermissions />
                 <SingleTypesPermissions />
                 <PluginsPermissions />

packages/strapi-admin/admin/src/hooks/useFetchRole/index.js

@@ -1,29 +1,34 @@
-import { useState, useEffect } from 'react';
+import { useReducer, useEffect } from 'react';
 import { request } from 'strapi-helper-plugin';
 
+import reducer, { initialState } from './reducer';
+
 const useFetchRole = id => {
-  const [data, setData] = useState({});
+  const [state, dispatch] = useReducer(reducer, initialState);
-  const [isLoading, setLoading] = useState(true);
 
   useEffect(() => {
-    fetchRole();
+    fetchRole(id);
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [id]);
 
-  const fetchRole = async () => {
+  const fetchRole = async roleId => {
     try {
-      const { data } = await request(`/admin/roles/${id}`, { method: 'GET' });
+      const { data } = await request(`/admin/roles/${roleId}`, { method: 'GET' });
 
-      setData(data);
+      dispatch({
-      setLoading(false);
+        type: 'GET_DATA_SUCCEEDED',
+        data,
+      });
     } catch (err) {
-      setLoading(false);
+      dispatch({
+        type: 'GET_DATA_ERROR',
+      });
       strapi.notification.error('notification.error');
     }
   };
 
-  return { data, isLoading };
+  return state;
 };
 
 export default useFetchRole;

packages/strapi-admin/admin/src/hooks/useFetchRole/reducer.js

@@ -0,0 +1,26 @@
+/* eslint-disable consistent-return */
+import produce from 'immer';
+
+export const initialState = {
+  data: {},
+  isLoading: true,
+};
+
+const reducer = (state, action) =>
+  produce(state, draftState => {
+    switch (action.type) {
+      case 'GET_DATA_SUCCEEDED': {
+        draftState.data = action.data;
+        draftState.isLoading = false;
+        break;
+      }
+      case 'GET_DATA_ERROR': {
+        draftState.isLoading = false;
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export default reducer;

packages/strapi-admin/admin/src/hooks/useFetchRole/tests/reducer.test.js

@@ -0,0 +1,58 @@
+import reducer from '../reducer';
+
+describe('ADMIN | HOOKS | USEFETCHROLE | reducer', () => {
+  describe('DEFAULT_ACTION', () => {
+    it('should return the initialState', () => {
+      const state = {
+        test: true,
+      };
+
+      expect(reducer(state, {})).toEqual(state);
+    });
+  });
+
+  describe('GET_DATA_ERROR', () => {
+    it('should set isLoading to false is an error occured', () => {
+      const action = {
+        type: 'GET_DATA_ERROR',
+      };
+      const initialState = {
+        data: {},
+        isLoading: true,
+      };
+      const expected = {
+        data: {},
+        isLoading: false,
+      };
+
+      expect(reducer(initialState, action)).toEqual(expected);
+    });
+  });
+
+  describe('GET_DATA_SUCCEEDED', () => {
+    it('should return the state with the data', () => {
+      const action = {
+        type: 'GET_DATA_SUCCEEDED',
+        data: {
+          id: 1,
+          name: 'Super admin',
+          description: 'This is the super admin role',
+        },
+      };
+      const initialState = {
+        data: {},
+        isLoading: true,
+      };
+      const expected = {
+        data: {
+          id: 1,
+          name: 'Super admin',
+          description: 'This is the super admin role',
+        },
+        isLoading: false,
+      };
+
+      expect(reducer(initialState, action)).toEqual(expected);
+    });
+  });
+});

packages/strapi-admin/admin/src/translations/en.json

@@ -268,10 +268,11 @@
   "Settings.permissions.users.listview.header.description.plural": "{number} users found",
   "Settings.roles.title": "Roles",
   "Settings.roles.created": "Role created",
-  "Settings.roles.edited": "Role edited",
   "Settings.roles.create.title": "Create a role",
   "Settings.roles.create.description": "Define the rights given to the role",
   "Settings.roles.edit.title": "Edit a role",
+  "Settings.roles.form.input.description": "Description",
+  "Settings.roles.form.input.name": "Name",
   "Settings.roles.form.title": "Details",
   "Settings.roles.form.description": "Select the granted permissions for the token.",
   "Settings.roles.form.button.users-with-role": "Users with this role",

packages/strapi-admin/admin/src/utils/index.js

@@ -1,2 +1,3 @@
 export { default as checkFormValidity } from './checkFormValidity';
 export { default as formatAPIErrors } from './formatAPIErrors';
+export { default as roleTabsLabel } from './roleTabsLabel';

packages/strapi-admin/admin/src/utils/roleTabsLabel.js

@@ -0,0 +1,24 @@
+const roleTabsLabel = [
+  {
+    labelId: 'app.components.LeftMenuLinkContainer.collectionTypes',
+    defaultMessage: 'Collection Types',
+    id: 'collectionTypes',
+  },
+  {
+    labelId: 'app.components.LeftMenuLinkContainer.singleTypes',
+    defaultMessage: 'Single Types',
+    id: 'singleTypes',
+  },
+  {
+    labelId: 'app.components.LeftMenuLinkContainer.plugins',
+    defaultMessage: 'Plugins',
+    id: 'plugins',
+  },
+  {
+    labelId: 'app.components.LeftMenuLinkContainer.settings',
+    defaultMessage: 'Settings',
+    id: 'settings',
+  },
+];
+
+export default roleTabsLabel;