@strapi/plugin-users-permissions 0.0.0-4fc90398602f

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

@@ -0,0 +1,60 @@
+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';
+
+const Policies = () => {
+  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) => o.handler.endsWith(pathResolved));
+
+  return (
+    <GridItem
+      col={5}
+      background="neutral150"
+      paddingTop={6}
+      paddingBottom={6}
+      paddingLeft={7}
+      paddingRight={7}
+      style={{ minHeight: '100%' }}
+    >
+      {selectedAction ? (
+        <Stack spacing={2}>
+          {displayedRoutes.map((route, key) => (
+            // eslint-disable-next-line react/no-array-index-key
+            <BoundRoute key={key} route={route} />
+          ))}
+        </Stack>
+      ) : (
+        <Stack spacing={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>
+  );
+};
+
+export default Policies;

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

@@ -0,0 +1,94 @@
+import React, { memo, useReducer, forwardRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+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 getTrad from '../../utils/getTrad';
+import Policies from '../Policies';
+import Permissions from '../Permissions';
+import reducer, { initialState } from './reducer';
+import { UsersPermissionsProvider } from '../../contexts/UsersPermissionsContext';
+import init from './init';
+
+const UsersPermissions = forwardRef(({ permissions, routes }, ref) => {
+  const { formatMessage } = useIntl();
+  const [state, dispatch] = useReducer(reducer, initialState, (state) =>
+    init(state, permissions, routes)
+  );
+
+  useImperativeHandle(ref, () => ({
+    getPermissions() {
+      return {
+        permissions: state.modifiedData,
+      };
+    },
+    resetForm() {
+      dispatch({ type: 'ON_RESET' });
+    },
+    setFormAfterSubmit() {
+      dispatch({ type: 'ON_SUBMIT_SUCCEEDED' });
+    },
+  }));
+
+  const handleChange = ({ target: { name, value } }) =>
+    dispatch({
+      type: 'ON_CHANGE',
+      keys: name.split('.'),
+      value: value === 'empty__string_value' ? '' : value,
+    });
+
+  const handleChangeSelectAll = ({ target: { name, value } }) =>
+    dispatch({
+      type: 'ON_CHANGE_SELECT_ALL',
+      keys: name.split('.'),
+      value,
+    });
+
+  const handleSelectedAction = (actionToSelect) =>
+    dispatch({
+      type: 'SELECT_ACTION',
+      actionToSelect,
+    });
+
+  const providerValue = {
+    ...state,
+    onChange: handleChange,
+    onChangeSelectAll: handleChangeSelectAll,
+    onSelectedAction: handleSelectedAction,
+  };
+
+  return (
+    <UsersPermissionsProvider value={providerValue}>
+      <Grid gap={0} shadow="filterShadow" hasRadius background="neutral0">
+        <GridItem col={7} paddingTop={6} paddingBottom={6} paddingLeft={7} paddingRight={7}>
+          <Stack spacing={6}>
+            <Stack spacing={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 />
+          </Stack>
+        </GridItem>
+        <Policies />
+      </Grid>
+    </UsersPermissionsProvider>
+  );
+});
+
+UsersPermissions.propTypes = {
+  permissions: PropTypes.object.isRequired,
+  routes: PropTypes.object.isRequired,
+};
+
+export default memo(UsersPermissions);

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

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

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

@@ -0,0 +1,60 @@
+/* eslint-disable consistent-return */
+import produce from 'immer';
+import { set, get, take } from 'lodash';
+
+export const initialState = {
+  initialData: {},
+  modifiedData: {},
+  routes: {},
+  selectedAction: '',
+  policies: [],
+};
+
+const reducer = (state, action) =>
+  produce(state, (draftState) => {
+    switch (action.type) {
+      case 'ON_CHANGE': {
+        const keysLength = action.keys.length;
+        const isChangingCheckbox = action.keys[keysLength - 1] === 'enabled';
+
+        if (action.value && isChangingCheckbox) {
+          const selectedAction = take(action.keys, keysLength - 1).join('.');
+          draftState.selectedAction = selectedAction;
+        }
+
+        set(draftState, ['modifiedData', ...action.keys], action.value);
+        break;
+      }
+      case 'ON_CHANGE_SELECT_ALL': {
+        const pathToValue = ['modifiedData', ...action.keys];
+        const oldValues = get(state, pathToValue, {});
+        const updatedValues = Object.keys(oldValues).reduce((acc, current) => {
+          acc[current] = { ...oldValues[current], enabled: action.value };
+
+          return acc;
+        }, {});
+
+        set(draftState, pathToValue, updatedValues);
+
+        break;
+      }
+      case 'ON_RESET': {
+        draftState.modifiedData = state.initialData;
+        break;
+      }
+      case 'ON_SUBMIT_SUCCEEDED': {
+        draftState.initialData = state.modifiedData;
+        break;
+      }
+
+      case 'SELECT_ACTION': {
+        const { actionToSelect } = action;
+        draftState.selectedAction = actionToSelect === state.selectedAction ? '' : actionToSelect;
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export default reducer;

package/admin/src/contexts/UsersPermissionsContext/index.js

@@ -0,0 +1,17 @@
+import React, { createContext, useContext } from 'react';
+import PropTypes from 'prop-types';
+
+const UsersPermissions = createContext({});
+
+const UsersPermissionsProvider = ({ children, value }) => {
+  return <UsersPermissions.Provider value={value}>{children}</UsersPermissions.Provider>;
+};
+
+const useUsersPermissions = () => useContext(UsersPermissions);
+
+UsersPermissionsProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  value: PropTypes.object.isRequired,
+};
+
+export { UsersPermissions, UsersPermissionsProvider, useUsersPermissions };

package/admin/src/hooks/index.js

@@ -0,0 +1,5 @@
+// eslint-disable-next-line import/prefer-default-export
+export { default as useForm } from './useForm';
+export { default as useRolesList } from './useRolesList';
+export { default as usePlugins } from './usePlugins';
+export { default as useFetchRole } from './useFetchRole';

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

@@ -0,0 +1,64 @@
+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 {
+      dispatch({
+        type: 'GET_DATA_SUCCEEDED',
+        role: {},
+      });
+    }
+
+    return () => (isMounted.current = false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id]);
+
+  const fetchRole = async (roleId) => {
+    try {
+      const {
+        data: { role },
+      } = await axiosIntance.get(`/${pluginId}/roles/${roleId}`);
+
+      // Prevent updating state on an unmounted component
+      if (isMounted.current) {
+        dispatch({
+          type: 'GET_DATA_SUCCEEDED',
+          role,
+        });
+      }
+    } catch (err) {
+      console.error(err);
+
+      dispatch({
+        type: 'GET_DATA_ERROR',
+      });
+      toggleNotification({
+        type: 'warning',
+        message: { id: 'notification.error' },
+      });
+    }
+  };
+
+  const handleSubmitSucceeded = useCallback((data) => {
+    dispatch({
+      type: 'ON_SUBMIT_SUCCEEDED',
+      ...data,
+    });
+  }, []);
+
+  return { ...state, onSubmitSucceeded: handleSubmitSucceeded };
+};
+
+export default useFetchRole;

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

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

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

@@ -0,0 +1,70 @@
+import { useCallback, useEffect, useReducer, useRef } from 'react';
+import { useRBAC, request, useNotification } from '@strapi/helper-plugin';
+import { getRequestURL } from '../../utils';
+import reducer, { initialState } from './reducer';
+
+const useUserForm = (endPoint, permissions) => {
+  const { isLoading: isLoadingForPermissions, allowedActions } = useRBAC(permissions);
+  const [{ isLoading, modifiedData }, dispatch] = useReducer(reducer, initialState);
+  const toggleNotification = useNotification();
+  const isMounted = useRef(true);
+
+  const abortController = new AbortController();
+  const { signal } = abortController;
+
+  useEffect(() => {
+    const getData = async () => {
+      try {
+        dispatch({
+          type: 'GET_DATA',
+        });
+
+        const data = await request(getRequestURL(endPoint), { method: 'GET', signal });
+
+        dispatch({
+          type: 'GET_DATA_SUCCEEDED',
+          data,
+        });
+      } catch (err) {
+        // The user aborted the request
+        if (isMounted.current) {
+          dispatch({
+            type: 'GET_DATA_ERROR',
+          });
+          console.error(err);
+          toggleNotification({
+            type: 'warning',
+            message: { id: 'notification.error' },
+          });
+        }
+      }
+    };
+
+    if (!isLoadingForPermissions) {
+      getData();
+    }
+
+    return () => {
+      abortController.abort();
+      isMounted.current = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isLoadingForPermissions, endPoint]);
+
+  const dispatchSubmitSucceeded = useCallback((data) => {
+    dispatch({
+      type: 'ON_SUBMIT_SUCCEEDED',
+      data,
+    });
+  }, []);
+
+  return {
+    allowedActions,
+    dispatchSubmitSucceeded,
+    isLoading,
+    isLoadingForPermissions,
+    modifiedData,
+  };
+};
+
+export default useUserForm;

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

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

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

@@ -0,0 +1,65 @@
+import { useCallback, useEffect, useReducer } from 'react';
+import { useNotification } from '@strapi/helper-plugin';
+import { get } from 'lodash';
+import init from './init';
+import pluginId from '../../pluginId';
+import { cleanPermissions } from '../../utils';
+import axiosInstance from '../../utils/axiosInstance';
+import reducer, { initialState } from './reducer';
+
+const usePlugins = (shouldFetchData = true) => {
+  const toggleNotification = useNotification();
+  const [{ permissions, routes, isLoading }, dispatch] = useReducer(reducer, initialState, () =>
+    init(initialState, shouldFetchData)
+  );
+
+  const fetchPlugins = useCallback(async () => {
+    try {
+      dispatch({
+        type: 'GET_DATA',
+      });
+
+      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,
+      });
+    } catch (err) {
+      const message = get(err, ['response', 'payload', 'message'], 'An error occured');
+
+      dispatch({
+        type: 'GET_DATA_ERROR',
+      });
+
+      if (message !== 'Forbidden') {
+        toggleNotification({
+          type: 'warning',
+          message,
+        });
+      }
+    }
+  }, [toggleNotification]);
+
+  useEffect(() => {
+    if (shouldFetchData) {
+      fetchPlugins();
+    }
+  }, [fetchPlugins, shouldFetchData]);
+
+  return {
+    permissions,
+    routes,
+    getData: fetchPlugins,
+    isLoading,
+  };
+};
+
+export default usePlugins;

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

@@ -0,0 +1,5 @@
+const init = (initialState, shouldFetchData) => {
+  return { ...initialState, isLoading: shouldFetchData };
+};
+
+export default init;

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

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

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

@@ -0,0 +1,63 @@
+import { useEffect, useReducer, useRef } from 'react';
+import { request, useNotification } from '@strapi/helper-plugin';
+import { get } from 'lodash';
+import init from './init';
+import pluginId from '../../pluginId';
+import reducer, { initialState } from './reducer';
+
+const useRolesList = (shouldFetchData = true) => {
+  const [{ roles, isLoading }, dispatch] = useReducer(reducer, initialState, () =>
+    init(initialState, shouldFetchData)
+  );
+  const toggleNotification = useNotification();
+
+  const isMounted = useRef(true);
+  const abortController = new AbortController();
+  const { signal } = abortController;
+
+  useEffect(() => {
+    if (shouldFetchData) {
+      fetchRolesList();
+    }
+
+    return () => {
+      abortController.abort();
+      isMounted.current = false;
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [shouldFetchData]);
+
+  const fetchRolesList = async () => {
+    try {
+      dispatch({
+        type: 'GET_DATA',
+      });
+
+      const { roles } = await request(`/${pluginId}/roles`, { method: 'GET', signal });
+
+      dispatch({
+        type: 'GET_DATA_SUCCEEDED',
+        data: roles,
+      });
+    } catch (err) {
+      const message = get(err, ['response', 'payload', 'message'], 'An error occured');
+
+      if (isMounted.current) {
+        dispatch({
+          type: 'GET_DATA_ERROR',
+        });
+
+        if (message !== 'Forbidden') {
+          toggleNotification({
+            type: 'warning',
+            message,
+          });
+        }
+      }
+    }
+  };
+
+  return { roles, isLoading, getData: fetchRolesList };
+};
+
+export default useRolesList;

package/admin/src/hooks/useRolesList/init.js

@@ -0,0 +1,5 @@
+const init = (initialState, shouldFetchData) => {
+  return { ...initialState, isLoading: shouldFetchData };
+};
+
+export default init;

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

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