@strapi/plugin-users-permissions 4.0.0-next.6 → 4.0.0

package/admin/src/components/Permissions/index.js

@@ -1,44 +1,56 @@
-import React, { memo, useCallback, useReducer } from 'react';
-import { Padded } from '@buffetjs/core';
+import React, { useReducer } from 'react';
+import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
+import { useIntl } from 'react-intl';
+import { Box } from '@strapi/design-system/Box';
+import { Stack } from '@strapi/design-system/Stack';
 import { useUsersPermissions } from '../../contexts/UsersPermissionsContext';
-import ListWrapper from './ListWrapper';
+import formatPluginName from '../../utils/formatPluginName';
 import PermissionRow from './PermissionRow';
 import init from './init';
 import { initialState, reducer } from './reducer';
 
 const Permissions = () => {
   const { modifiedData } = useUsersPermissions();
+  const { formatMessage } = useIntl();
   const [{ collapses }, dispatch] = useReducer(reducer, initialState, state =>
     init(state, modifiedData)
   );
 
-  const handleOpenPlugin = useCallback(index => {
+  const handleToggle = index =>
     dispatch({
       type: 'TOGGLE_COLLAPSE',
       index,
     });
-  }, []);
 
   return (
-    <ListWrapper>
-      <Padded left right size="sm">
-        {collapses.map((_, index) => {
-          const { isOpen, name } = collapses[index];
-
-          return (
-            <PermissionRow
-              key={name}
-              isOpen={isOpen}
-              isWhite={index % 2 === 1}
-              name={name}
-              onOpenPlugin={() => handleOpenPlugin(index)}
-              permissions={modifiedData[name]}
-            />
-          );
-        })}
-      </Padded>
-    </ListWrapper>
+    <Stack size={1}>
+      {collapses.map((collapse, index) => (
+        <Accordion
+          expanded={collapse.isOpen}
+          toggle={() => handleToggle(index)}
+          key={collapse.name}
+          variant={index % 2 === 0 ? 'secondary' : undefined}
+        >
+          <AccordionToggle
+            title={formatPluginName(collapse.name)}
+            description={formatMessage(
+              {
+                id: 'users-permissions.Plugin.permissions.plugins.description',
+                defaultMessage: 'Define all allowed actions for the {name} plugin.',
+              },
+              { name: collapse.name }
+            )}
+            variant={index % 2 ? 'primary' : 'secondary'}
+          />
+          <AccordionContent>
+            <Box>
+              <PermissionRow permissions={modifiedData[collapse.name]} name={collapse.name} />
+            </Box>
+          </AccordionContent>
+        </Accordion>
+      ))}
+    </Stack>
   );
 };
 
-export default memo(Permissions);
+export default Permissions;

package/admin/src/components/Permissions/init.js

@@ -1,12 +1,7 @@
 const init = (initialState, permissions) => {
   const collapses = Object.keys(permissions)
     .sort()
-    .reduce((acc, current, index) => {
-      return acc.concat({
-        name: current,
-        isOpen: index === 0,
-      });
-    }, []);
+    .map(name => ({ name, isOpen: false }));
 
   return { ...initialState, collapses };
 };

package/admin/src/components/Policies/index.js

@@ -1,60 +1,59 @@
-import React, { useMemo } from 'react';
-import { FormattedMessage } from 'react-intl';
-import { Col } from 'reactstrap';
-import { get, isEmpty, takeRight, toLower, without } from 'lodash';
-import { getTrad } from '../../utils';
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { Typography } from '@strapi/design-system/Typography';
+import { Stack } from '@strapi/design-system/Stack';
+import { GridItem } from '@strapi/design-system/Grid';
+import { get, isEmpty, without } from 'lodash';
 import { useUsersPermissions } from '../../contexts/UsersPermissionsContext';
 import BoundRoute from '../BoundRoute';
-import SizedInput from '../SizedInput';
-import { Header, Wrapper, Sticky } from './Components';
 
 const Policies = () => {
-  const { modifiedData, selectedAction, routes, policies, onChange } = useUsersPermissions();
-  const baseTitle = 'users-permissions.Policies.header';
-  const title = !selectedAction ? 'hint' : 'title';
+  const { formatMessage } = useIntl();
+  const { selectedAction, routes } = useUsersPermissions();
+
   const path = without(selectedAction.split('.'), 'controllers');
   const controllerRoutes = get(routes, path[0]);
+  const pathResolved = path.slice(1).join('.');
+
   const displayedRoutes = isEmpty(controllerRoutes)
     ? []
-    : controllerRoutes.filter(o => toLower(o.handler) === toLower(takeRight(path, 2).join('.')));
-
-  const inputName = `${selectedAction}.policy`;
-
-  const value = useMemo(() => {
-    return get(modifiedData, inputName, '');
-  }, [inputName, modifiedData]);
+    : controllerRoutes.filter(o => o.handler.endsWith(pathResolved));
 
   return (
-    <Wrapper className="col-md-5">
-      <Sticky className="container-fluid">
-        <div className="row">
-          <Header className="col-md-12">
-            <FormattedMessage id={`${baseTitle}.${title}`} />
-          </Header>
-          {selectedAction && (
-            <>
-              <SizedInput
-                type="select"
-                name={inputName}
-                onChange={onChange}
-                label={getTrad('Policies.InputSelect.label')}
-                options={policies}
-                value={value}
-              />
-
-              <div className="row">
-                <Col size={{ xs: 12 }}>
-                  {displayedRoutes.map((route, key) => (
-                    // eslint-disable-next-line react/no-array-index-key
-                    <BoundRoute key={key} route={route} />
-                  ))}
-                </Col>
-              </div>
-            </>
-          )}
-        </div>
-      </Sticky>
-    </Wrapper>
+    <GridItem
+      col={5}
+      background="neutral150"
+      paddingTop={6}
+      paddingBottom={6}
+      paddingLeft={7}
+      paddingRight={7}
+      style={{ minHeight: '100%' }}
+    >
+      {selectedAction ? (
+        <Stack size={2}>
+          {displayedRoutes.map((route, key) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <BoundRoute key={key} route={route} />
+          ))}
+        </Stack>
+      ) : (
+        <Stack size={2}>
+          <Typography variant="delta" as="h3">
+            {formatMessage({
+              id: 'users-permissions.Policies.header.title',
+              defaultMessage: 'Advanced settings',
+            })}
+          </Typography>
+          <Typography as="p" textColor="neutral600">
+            {formatMessage({
+              id: 'users-permissions.Policies.header.hint',
+              defaultMessage:
+                "Select the application's actions or the plugin's actions and click on the cog icon to display the bound route",
+            })}
+          </Typography>
+        </Stack>
+      )}
+    </GridItem>
   );
 };
 

package/admin/src/components/UsersPermissions/index.js

@@ -1,9 +1,9 @@
-import React, { memo, useReducer, useCallback, forwardRef, useImperativeHandle } from 'react';
+import React, { memo, useReducer, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
-import { Padded, Flex } from '@buffetjs/core';
+import { Typography } from '@strapi/design-system/Typography';
+import { Stack } from '@strapi/design-system/Stack';
+import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { useIntl } from 'react-intl';
-
-import FormCard from '../FormBloc';
 import getTrad from '../../utils/getTrad';
 import Policies from '../Policies';
 import Permissions from '../Permissions';
@@ -11,10 +11,10 @@ import reducer, { initialState } from './reducer';
 import { UsersPermissionsProvider } from '../../contexts/UsersPermissionsContext';
 import init from './init';
 
-const UsersPermissions = forwardRef(({ permissions, routes, policies }, ref) => {
+const UsersPermissions = forwardRef(({ permissions, routes }, ref) => {
   const { formatMessage } = useIntl();
   const [state, dispatch] = useReducer(reducer, initialState, state =>
-    init(state, permissions, routes, policies)
+    init(state, permissions, routes)
   );
 
   useImperativeHandle(ref, () => ({
@@ -31,28 +31,25 @@ const UsersPermissions = forwardRef(({ permissions, routes, policies }, ref) =>
     },
   }));
 
-  const handleChange = useCallback(({ target: { name, value } }) => {
+  const handleChange = ({ target: { name, value } }) =>
     dispatch({
       type: 'ON_CHANGE',
       keys: name.split('.'),
       value: value === 'empty__string_value' ? '' : value,
     });
-  }, []);
 
-  const handleChangeSelectAll = useCallback(({ target: { name, value } }) => {
+  const handleChangeSelectAll = ({ target: { name, value } }) =>
     dispatch({
       type: 'ON_CHANGE_SELECT_ALL',
       keys: name.split('.'),
       value,
     });
-  }, []);
 
-  const handleSelectedAction = useCallback(actionToSelect => {
+  const handleSelectedAction = actionToSelect =>
     dispatch({
       type: 'SELECT_ACTION',
       actionToSelect,
     });
-  }, []);
 
   const providerValue = {
     ...state,
@@ -63,21 +60,28 @@ const UsersPermissions = forwardRef(({ permissions, routes, policies }, ref) =>
 
   return (
     <UsersPermissionsProvider value={providerValue}>
-      <Flex>
-        <FormCard
-          title={formatMessage({
-            id: getTrad('Plugins.header.title'),
-          })}
-          subtitle={formatMessage({
-            id: getTrad('Plugins.header.description'),
-          })}
-        >
-          <Padded left right size="xs">
+      <Grid gap={0} shadow="filterShadow" hasRadius background="neutral0">
+        <GridItem col={7} paddingTop={6} paddingBottom={6} paddingLeft={7} paddingRight={7}>
+          <Stack size={6}>
+            <Stack size={2}>
+              <Typography variant="delta" as="h2">
+                {formatMessage({
+                  id: getTrad('Plugins.header.title'),
+                  defaultMessage: 'Permissions',
+                })}
+              </Typography>
+              <Typography as="p" textColor="neutral600">
+                {formatMessage({
+                  id: getTrad('Plugins.header.description'),
+                  defaultMessage: 'Only actions bound by a route are listed below.',
+                })}
+              </Typography>
+            </Stack>
             <Permissions />
-          </Padded>
-        </FormCard>
+          </Stack>
+        </GridItem>
         <Policies />
-      </Flex>
+      </Grid>
     </UsersPermissionsProvider>
   );
 });
@@ -85,7 +89,6 @@ const UsersPermissions = forwardRef(({ permissions, routes, policies }, ref) =>
 UsersPermissions.propTypes = {
   permissions: PropTypes.object.isRequired,
   routes: PropTypes.object.isRequired,
-  policies: PropTypes.array.isRequired,
 };
 
 export default memo(UsersPermissions);

package/admin/src/components/UsersPermissions/init.js

@@ -1,10 +1,9 @@
-const init = (state, permissions, routes, policies) => {
+const init = (state, permissions, routes) => {
   return {
     ...state,
     initialData: permissions,
     modifiedData: permissions,
     routes,
-    policies,
   };
 };
 

package/admin/src/hooks/useFetchRole/index.js

@@ -1,13 +1,17 @@
-import { useCallback, useReducer, useEffect } from 'react';
-import { request, useNotification } from '@strapi/helper-plugin';
+import { useCallback, useReducer, useEffect, useRef } from 'react';
+import { useNotification } from '@strapi/helper-plugin';
 import reducer, { initialState } from './reducer';
+import axiosIntance from '../../utils/axiosInstance';
 import pluginId from '../../pluginId';
 
 const useFetchRole = id => {
   const [state, dispatch] = useReducer(reducer, initialState);
   const toggleNotification = useNotification();
+  const isMounted = useRef(null);
 
   useEffect(() => {
+    isMounted.current = true;
+
     if (id) {
       fetchRole(id);
     } else {
@@ -17,17 +21,23 @@ const useFetchRole = id => {
       });
     }
 
+    return () => (isMounted.current = false);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id]);
 
   const fetchRole = async roleId => {
     try {
-      const { role } = await request(`/${pluginId}/roles/${roleId}`, { method: 'GET' });
+      const {
+        data: { role },
+      } = await axiosIntance.get(`/${pluginId}/roles/${roleId}`);
 
-      dispatch({
-        type: 'GET_DATA_SUCCEEDED',
-        role,
-      });
+      // Prevent updating state on an unmounted component
+      if (isMounted.current) {
+        dispatch({
+          type: 'GET_DATA_SUCCEEDED',
+          role,
+        });
+      }
     } catch (err) {
       console.error(err);
 

package/admin/src/hooks/useForm/index.js

@@ -5,10 +5,7 @@ import reducer, { initialState } from './reducer';
 
 const useUserForm = (endPoint, permissions) => {
   const { isLoading: isLoadingForPermissions, allowedActions } = useRBAC(permissions);
-  const [{ formErrors, initialData, isLoading, modifiedData }, dispatch] = useReducer(
-    reducer,
-    initialState
-  );
+  const [{ isLoading, modifiedData }, dispatch] = useReducer(reducer, initialState);
   const toggleNotification = useNotification();
   const isMounted = useRef(true);
 
@@ -54,39 +51,16 @@ const useUserForm = (endPoint, permissions) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isLoadingForPermissions, endPoint]);
 
-  const handleChange = useCallback(({ target: { name, value } }) => {
-    dispatch({
-      type: 'ON_CHANGE',
-      keys: name,
-      value,
-    });
-  }, []);
-
-  const dispatchResetForm = useCallback(() => {
-    dispatch({
-      type: 'RESET_FORM',
-    });
-  }, []);
-
-  const dispatchSetFormErrors = useCallback(errors => {
-    dispatch({ type: 'SET_ERRORS', errors });
-  }, []);
-
-  const dispatchSubmitSucceeded = useCallback(() => {
+  const dispatchSubmitSucceeded = useCallback(data => {
     dispatch({
       type: 'ON_SUBMIT_SUCCEEDED',
+      data,
     });
   }, []);
 
   return {
     allowedActions,
-    dispatch,
-    dispatchResetForm,
-    dispatchSetFormErrors,
     dispatchSubmitSucceeded,
-    formErrors,
-    handleChange,
-    initialData,
     isLoading,
     isLoadingForPermissions,
     modifiedData,

package/admin/src/hooks/useForm/reducer.js

@@ -1,10 +1,7 @@
 import produce from 'immer';
-import { set } from 'lodash';
 
 const initialState = {
-  formErrors: {},
   isLoading: true,
-  initialData: {},
   modifiedData: {},
 };
 
@@ -14,15 +11,12 @@ const reducer = (state, action) =>
     switch (action.type) {
       case 'GET_DATA': {
         draftState.isLoading = true;
-        draftState.initialData = {};
         draftState.modifiedData = {};
 
         break;
       }
-
       case 'GET_DATA_SUCCEEDED': {
         draftState.isLoading = false;
-        draftState.initialData = action.data;
         draftState.modifiedData = action.data;
 
         break;
@@ -31,22 +25,9 @@ const reducer = (state, action) =>
         draftState.isLoading = true;
         break;
       }
-      case 'ON_CHANGE': {
-        set(draftState, ['modifiedData', ...action.keys.split('.')], action.value);
-        break;
-      }
       case 'ON_SUBMIT_SUCCEEDED': {
-        draftState.initialData = state.modifiedData;
-        draftState.formErrors = {};
-        break;
-      }
-      case 'RESET_FORM': {
-        draftState.modifiedData = state.initialData;
-        draftState.formErrors = {};
-        break;
-      }
-      case 'SET_ERRORS': {
-        draftState.formErrors = action.errors;
+        draftState.modifiedData = action.data;
+
         break;
       }
       default: {

package/admin/src/hooks/usePlugins/index.js

@@ -1,19 +1,16 @@
 import { useCallback, useEffect, useReducer } from 'react';
-import { request, useNotification } from '@strapi/helper-plugin';
-import { useIntl } from 'react-intl';
+import { useNotification } from '@strapi/helper-plugin';
 import { get } from 'lodash';
 import init from './init';
 import pluginId from '../../pluginId';
-import { cleanPermissions, formatPolicies, getTrad } from '../../utils';
+import { cleanPermissions } from '../../utils';
+import axiosInstance from '../../utils/axiosInstance';
 import reducer, { initialState } from './reducer';
 
 const usePlugins = (shouldFetchData = true) => {
-  const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
-  const [{ permissions, routes, policies, isLoading }, dispatch] = useReducer(
-    reducer,
-    initialState,
-    () => init(initialState, shouldFetchData)
+  const [{ permissions, routes, isLoading }, dispatch] = useReducer(reducer, initialState, () =>
+    init(initialState, shouldFetchData)
   );
 
   const fetchPlugins = useCallback(async () => {
@@ -22,23 +19,18 @@ const usePlugins = (shouldFetchData = true) => {
         type: 'GET_DATA',
       });
 
-      const [{ permissions }, { routes }, { policies }] = await Promise.all(
-        [`/${pluginId}/permissions`, `/${pluginId}/routes`, `/${pluginId}/policies`].map(endpoint =>
-          request(endpoint, { method: 'GET' })
-        )
+      const [{ permissions }, { routes }] = await Promise.all(
+        [`/${pluginId}/permissions`, `/${pluginId}/routes`].map(async endpoint => {
+          const res = await axiosInstance.get(endpoint);
+
+          return res.data;
+        })
       );
 
       dispatch({
         type: 'GET_DATA_SUCCEEDED',
         permissions: cleanPermissions(permissions),
         routes,
-        policies: [
-          {
-            label: formatMessage({ id: getTrad('Policies.InputSelect.empty') }),
-            value: 'empty__string_value',
-          },
-          ...formatPolicies(policies),
-        ],
       });
     } catch (err) {
       const message = get(err, ['response', 'payload', 'message'], 'An error occured');
@@ -54,7 +46,7 @@ const usePlugins = (shouldFetchData = true) => {
         });
       }
     }
-  }, [formatMessage, toggleNotification]);
+  }, [toggleNotification]);
 
   useEffect(() => {
     if (shouldFetchData) {
@@ -65,7 +57,6 @@ const usePlugins = (shouldFetchData = true) => {
   return {
     permissions,
     routes,
-    policies,
     getData: fetchPlugins,
     isLoading,
   };

package/admin/src/hooks/usePlugins/reducer.js

@@ -4,7 +4,6 @@ import produce from 'immer';
 export const initialState = {
   permissions: {},
   routes: {},
-  policies: [],
   isLoading: true,
 };
 
@@ -15,13 +14,11 @@ const reducer = (state, action) =>
         draftState.isLoading = true;
         draftState.permissions = {};
         draftState.routes = {};
-        draftState.policies = [];
         break;
       }
       case 'GET_DATA_SUCCEEDED': {
         draftState.permissions = action.permissions;
         draftState.routes = action.routes;
-        draftState.policies = action.policies;
         draftState.isLoading = false;
         break;
       }