diff --git a/packages/strapi-admin/admin/ee/components/Roles/NameInput.js b/packages/strapi-admin/admin/ee/components/Roles/NameInput.js new file mode 100644 index 0000000000..f27bc24da3 --- /dev/null +++ b/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 => ; + +export default NameInput; diff --git a/packages/strapi-admin/admin/ee/components/Roles/RoleForm.js b/packages/strapi-admin/admin/ee/components/Roles/RoleForm.js deleted file mode 100644 index 2598446913..0000000000 --- a/packages/strapi-admin/admin/ee/components/Roles/RoleForm.js +++ /dev/null @@ -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 = [ - console.log('Open user modal')} key="user-button"> - {formatMessage({ - id: 'Settings.roles.form.button.users-with-role', - })} - , - ]; - - return ( - - - - - - ); -}; - -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; diff --git a/packages/strapi-admin/admin/ee/containers/Roles/CreatePage/index.js b/packages/strapi-admin/admin/ee/containers/Roles/CreatePage/index.js index d64da90cb5..6843522196 100644 --- a/packages/strapi-admin/admin/ee/containers/Roles/CreatePage/index.js +++ b/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 = () => { - + diff --git a/packages/strapi-admin/admin/src/components/Roles/NameInput.js b/packages/strapi-admin/admin/src/components/Roles/NameInput.js new file mode 100644 index 0000000000..82e2768cdd --- /dev/null +++ b/packages/strapi-admin/admin/src/components/Roles/NameInput.js @@ -0,0 +1,6 @@ +import React from 'react'; +import SizedInput from '../SizedInput'; + +const NameInput = inputProps => ; + +export default NameInput; diff --git a/packages/strapi-admin/admin/src/components/Roles/RoleForm.js b/packages/strapi-admin/admin/src/components/Roles/RoleForm.js index 20d7f4364b..0454012cb4 100644 --- a/packages/strapi-admin/admin/src/components/Roles/RoleForm.js +++ b/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', })} > - { /> { +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 }) => { {tabsLabel.map((tab, index) => ( handleSelectedTab(index)} isActive={index === selectedTabIndex} + key={tab.id} + onClick={() => handleSelectedTab(index)} > - {tab} + + {formatMessage(tab)} + ))} - {children && children[selectedTabIndex]} + {children[selectedTabIndex]} )} @@ -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; diff --git a/packages/strapi-admin/admin/src/containers/Roles/EditPage/index.js b/packages/strapi-admin/admin/src/containers/Roles/EditPage/index.js index 44311f22f0..b865f5f0c7 100644 --- a/packages/strapi-admin/admin/src/containers/Roles/EditPage/index.js +++ b/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} /> - + diff --git a/packages/strapi-admin/admin/src/hooks/useFetchRole/index.js b/packages/strapi-admin/admin/src/hooks/useFetchRole/index.js index 9c1d9c08ad..426f0e1576 100644 --- a/packages/strapi-admin/admin/src/hooks/useFetchRole/index.js +++ b/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 [isLoading, setLoading] = useState(true); + const [state, dispatch] = useReducer(reducer, initialState); 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); - setLoading(false); + dispatch({ + 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; diff --git a/packages/strapi-admin/admin/src/hooks/useFetchRole/reducer.js b/packages/strapi-admin/admin/src/hooks/useFetchRole/reducer.js new file mode 100644 index 0000000000..31ef6daff2 --- /dev/null +++ b/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; diff --git a/packages/strapi-admin/admin/src/hooks/useFetchRole/tests/reducer.test.js b/packages/strapi-admin/admin/src/hooks/useFetchRole/tests/reducer.test.js new file mode 100644 index 0000000000..8ce99f453a --- /dev/null +++ b/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); + }); + }); +}); diff --git a/packages/strapi-admin/admin/src/translations/en.json b/packages/strapi-admin/admin/src/translations/en.json index 020eff229b..68c9321205 100644 --- a/packages/strapi-admin/admin/src/translations/en.json +++ b/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", diff --git a/packages/strapi-admin/admin/src/utils/index.js b/packages/strapi-admin/admin/src/utils/index.js index 68a40567a2..2210d61186 100644 --- a/packages/strapi-admin/admin/src/utils/index.js +++ b/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'; diff --git a/packages/strapi-admin/admin/src/utils/roleTabsLabel.js b/packages/strapi-admin/admin/src/utils/roleTabsLabel.js new file mode 100644 index 0000000000..a72e002cb5 --- /dev/null +++ b/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;