Fix conflicts

Signed-off-by: soupette <cyril.lpz@gmail.com>

packages/strapi-helper-plugin/lib/src/hooks/useUserPermissions/index.js

@@ -20,9 +20,9 @@ const useUserPermissions = (pluginPermissions, permissions) => {
   const checkPermissionsRef = useRef();
   const generateArrayOfPromisesRef = useRef();
 
-  checkPermissionsRef.current = async permissionName => {
+  checkPermissionsRef.current = async (permissionName, permissions) => {
     const hasPermission = await hasPermissions(
-      currentUserPermissions,
+      permissions,
       pluginPermissions[permissionName],
       signal
     );
@@ -30,8 +30,8 @@ const useUserPermissions = (pluginPermissions, permissions) => {
     return { permissionName, hasPermission };
   };
 
-  generateArrayOfPromisesRef.current = array =>
-    array.map(permissionName => checkPermissionsRef.current(permissionName));
+  generateArrayOfPromisesRef.current = (array, permissions) =>
+    array.map(permissionName => checkPermissionsRef.current(permissionName, permissions));
 
   useEffect(() => {
     isMounted.current = true;
@@ -48,7 +48,11 @@ const useUserPermissions = (pluginPermissions, permissions) => {
           type: 'GET_DATA',
           permissionNames,
         });
-        const arrayOfPromises = generateArrayOfPromisesRef.current(permissionNames);
+
+        const arrayOfPromises = generateArrayOfPromisesRef.current(
+          permissionNames,
+          currentUserPermissions
+        );
         const results = await Promise.all(arrayOfPromises);
         const data = generateResultsObject(results);
 

packages/strapi-plugin-content-manager/admin/src/containers/CollectionTypeFormWrapper/index.js

@@ -39,6 +39,10 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, from, slug, id, or
 
   const emitEventRef = useRef(emitEvent);
 
+  const allLayoutDataRef = useRef(allLayoutData);
+  // We need to keep the first location from which the user is coming from
+  const fromRef = useRef(from);
+
   const isCreatingEntry = id === 'create';
 
   const requestURL = useMemo(() => {
@@ -57,27 +61,28 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, from, slug, id, or
 
       const cleaned = removeFieldsFromClonedData(
         data,
-        allLayoutData.contentType,
-        allLayoutData.components
+        allLayoutDataRef.current.contentType,
+        allLayoutDataRef.current.components
       );
 
       return cleaned;
     },
-    [allLayoutData, origin]
+    [origin]
   );
 
-  const cleanReceivedData = useCallback(
-    data => {
-      const cleaned = removePasswordFieldsFromData(
-        data,
-        allLayoutData.contentType,
-        allLayoutData.components
-      );
+  const cleanReceivedData = useCallback(data => {
+    const cleaned = removePasswordFieldsFromData(
+      data,
+      allLayoutDataRef.current.contentType,
+      allLayoutDataRef.current.components
+    );
 
-      return formatComponentData(cleaned, allLayoutData.contentType, allLayoutData.components);
-    },
-    [allLayoutData]
-  );
+    return formatComponentData(
+      cleaned,
+      allLayoutDataRef.current.contentType,
+      allLayoutDataRef.current.components
+    );
+  }, []);
 
   // SET THE DEFAULT LAYOUT the effect is applied when the slug changes
   useEffect(() => {
@@ -137,7 +142,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, from, slug, id, or
         const resStatus = get(err, 'response.status', null);
 
         if (resStatus === 404) {
-          push(from);
+          push(fromRef.current);
 
           return;
         }
@@ -146,7 +151,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, from, slug, id, or
         if (resStatus === 403) {
           strapi.notification.info(getTrad('permissions.not-allowed.update'));
 
-          push(from);
+          push(fromRef.current);
         }
       }
     };
@@ -160,7 +165,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, from, slug, id, or
     return () => {
       abortController.abort();
     };
-  }, [requestURL, push, from, cleanReceivedData, cleanClonedData, dispatch]);
+  }, [cleanClonedData, cleanReceivedData, push, requestURL, dispatch]);
 
   const displayErrors = useCallback(err => {
     const errorPayload = err.response.payload;

packages/strapi-plugin-content-manager/admin/src/containers/CollectionTypeRecursivePath/index.js

@@ -9,7 +9,7 @@ import { useFetchContentTypeLayout } from '../../hooks';
 import { formatLayoutToApi } from '../../utils';
 import EditViewLayoutManager from '../EditViewLayoutManager';
 import EditSettingsView from '../EditSettingsView';
-import ListViewLayout from '../ListView/ListViewLayout';
+import ListViewLayout from '../ListViewLayoutManager';
 import ListSettingsView from '../ListSettingsView';
 
 const CollectionTypeRecursivePath = ({

packages/strapi-plugin-content-manager/admin/src/containers/EditView/index.js

@@ -5,9 +5,7 @@ import {
   BackHeader,
   BaselineAlignment,
   LiLink,
-  LoadingIndicatorPage,
   CheckPermissions,
-  useUserPermissions,
   useGlobalContext,
 } from 'strapi-helper-plugin';
 import { Padded } from '@buffetjs/core';
@@ -19,7 +17,7 @@ import FormWrapper from '../../components/FormWrapper';
 import FieldComponent from '../../components/FieldComponent';
 import Inputs from '../../components/Inputs';
 import SelectWrapper from '../../components/SelectWrapper';
-import { generatePermissionsObject, getInjectedComponents } from '../../utils';
+import { getInjectedComponents } from '../../utils';
 import CollectionTypeFormWrapper from '../CollectionTypeFormWrapper';
 import EditViewDataManagerProvider from '../EditViewDataManagerProvider';
 import SingleTypeFormWrapper from '../SingleTypeFormWrapper';
@@ -30,14 +28,18 @@ import DeleteLink from './DeleteLink';
 import InformationCard from './InformationCard';
 
 /* eslint-disable  react/no-array-index-key */
-const EditView = ({ isSingleType, goBack, layout, slug, state, id, origin, userPermissions }) => {
+const EditView = ({
+  allowedActions,
+  isSingleType,
+  goBack,
+  layout,
+  slug,
+  state,
+  id,
+  origin,
+  userPermissions,
+}) => {
   const { currentEnvironment, plugins } = useGlobalContext();
-  // Permissions
-  const viewPermissions = useMemo(() => generatePermissionsObject(slug), [slug]);
-  const { allowedActions, isLoading: isLoadingForPermissions } = useUserPermissions(
-    viewPermissions,
-    userPermissions
-  );
 
   // Here in case of a 403 response when fetching data we will either redirect to the previous page
   // Or to the homepage if there's no state in the history stack
@@ -84,11 +86,6 @@ const EditView = ({ isSingleType, goBack, layout, slug, state, id, origin, userP
     );
   }, [currentContentTypeLayoutData]);
 
-  if (isLoadingForPermissions) {
-    return <LoadingIndicatorPage />;
-  }
-
-  // TODO: create a hook to handle/provide the permissions this should be done for the i18n feature
   return (
     <DataManagementWrapper allLayoutData={layout} from={from} slug={slug} id={id} origin={origin}>
       {({
@@ -277,6 +274,12 @@ EditView.defaultProps = {
 };
 
 EditView.propTypes = {
+  allowedActions: PropTypes.shape({
+    canRead: PropTypes.bool.isRequired,
+    canUpdate: PropTypes.bool.isRequired,
+    canCreate: PropTypes.bool.isRequired,
+    canDelete: PropTypes.bool.isRequired,
+  }).isRequired,
   layout: PropTypes.shape({
     components: PropTypes.object.isRequired,
     contentType: PropTypes.shape({

packages/strapi-plugin-content-manager/admin/src/containers/EditViewLayoutManager/Permissions.js

@@ -0,0 +1,30 @@
+import React, { memo, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useUserPermissions, LoadingIndicatorPage } from 'strapi-helper-plugin';
+import isEqual from 'react-fast-compare';
+import EditView from '../EditView';
+import { generatePermissionsObject } from '../../utils';
+
+const Permissions = props => {
+  const viewPermissions = useMemo(() => generatePermissionsObject(props.slug), [props.slug]);
+  const { isLoading, allowedActions } = useUserPermissions(viewPermissions, props.userPermissions);
+
+  if (isLoading) {
+    return <LoadingIndicatorPage />;
+  }
+
+  return <EditView {...props} allowedActions={allowedActions} />;
+};
+
+Permissions.defaultProps = {
+  permissions: [],
+};
+
+Permissions.propTypes = {
+  permissions: PropTypes.array,
+  slug: PropTypes.string.isRequired,
+  userPermissions: PropTypes.array.isRequired,
+};
+
+// This avoids the components to rerender on params change causing multiple requests to be fired
+export default memo(Permissions, isEqual);

packages/strapi-plugin-content-manager/admin/src/containers/EditViewLayoutManager/index.js

@@ -2,10 +2,10 @@ import React, { useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
 import { LoadingIndicatorPage, useQueryParams } from 'strapi-helper-plugin';
-import EditView from '../EditView';
 import useSyncRbac from '../RBACManager/useSyncRbac';
 import { resetProps, setLayout } from './actions';
 import selectLayout from './selectors';
+import Permissions from './Permissions';
 
 const EditViewLayoutManager = ({ layout, ...rest }) => {
   const currentLayout = useSelector(selectLayout);
@@ -26,7 +26,7 @@ const EditViewLayoutManager = ({ layout, ...rest }) => {
     return <LoadingIndicatorPage />;
   }
 
-  return <EditView {...rest} layout={currentLayout} userPermissions={permissions} />;
+  return <Permissions {...rest} layout={currentLayout} userPermissions={permissions} />;
 };
 
 EditViewLayoutManager.propTypes = {

packages/strapi-plugin-content-manager/admin/src/containers/ListView/index.js

@@ -14,18 +14,12 @@ import {
   request,
   CheckPermissions,
   useGlobalContext,
-  useUserPermissions,
   InjectionZone,
   useQueryParams,
 } from 'strapi-helper-plugin';
 import pluginId from '../../pluginId';
 import pluginPermissions from '../../permissions';
-import {
-  formatFiltersFromQuery,
-  generatePermissionsObject,
-  getRequestUrl,
-  getTrad,
-} from '../../utils';
+import { formatFiltersFromQuery, getRequestUrl, getTrad } from '../../utils';
 import Container from '../../components/Container';
 import CustomTable from '../../components/CustomTable';
 import FilterPicker from '../../components/FilterPicker';
@@ -55,6 +49,10 @@ import { getAllAllowedHeaders, getFirstSortableHeader, buildQueryString } from '
 
 /* eslint-disable react/no-array-index-key */
 function ListView({
+  canCreate,
+  canDelete,
+  canRead,
+  canUpdate,
   didDeleteData,
   entriesToDelete,
   onChangeBulk,
@@ -79,7 +77,6 @@ function ListView({
   pagination: { total },
   slug,
   initialParams,
-  permissions,
 }) {
   const {
     contentType: {
@@ -91,11 +88,6 @@ function ListView({
 
   const { emitEvent } = useGlobalContext();
   const emitEventRef = useRef(emitEvent);
-  const viewPermissions = useMemo(() => generatePermissionsObject(slug), [slug]);
-  const {
-    isLoading: isLoadingForPermissions,
-    allowedActions: { canCreate, canRead, canUpdate, canDelete },
-  } = useUserPermissions(viewPermissions, permissions);
 
   const [{ query }, setQuery] = useQueryParams(initialParams);
   const params = buildQueryString(query);
@@ -240,7 +232,7 @@ function ListView({
     const abortController = new AbortController();
     const { signal } = abortController;
 
-    const shouldSendRequest = !isLoadingForPermissions && canRead;
+    const shouldSendRequest = canRead;
     const requestUrl = `/${pluginId}/collection-types/${slug}${params}`;
 
     if (shouldSendRequest && requestUrl.includes(requestUrlRef.current)) {
@@ -251,7 +243,7 @@ function ListView({
       requestUrlRef.current = slug;
       abortController.abort();
     };
-  }, [isLoadingForPermissions, canRead, getData, slug, params, getDataSucceeded, fetchData]);
+  }, [canRead, getData, slug, params, getDataSucceeded, fetchData]);
 
   const handleClickDelete = id => {
     setIdToDelete(id);
@@ -474,6 +466,10 @@ ListView.defaultProps = {
 };
 
 ListView.propTypes = {
+  canCreate: PropTypes.bool.isRequired,
+  canDelete: PropTypes.bool.isRequired,
+  canRead: PropTypes.bool.isRequired,
+  canUpdate: PropTypes.bool.isRequired,
   displayedHeaders: PropTypes.array.isRequired,
   data: PropTypes.array.isRequired,
   didDeleteData: PropTypes.bool.isRequired,

packages/strapi-plugin-content-manager/admin/src/containers/ListViewLayoutManager/Permissions.js

@@ -0,0 +1,29 @@
+import React, { memo, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { useUserPermissions, LoadingIndicatorPage } from 'strapi-helper-plugin';
+import isEqual from 'react-fast-compare';
+import ListView from '../ListView';
+import { generatePermissionsObject } from '../../utils';
+
+const Permissions = props => {
+  const viewPermissions = useMemo(() => generatePermissionsObject(props.slug), [props.slug]);
+  const { isLoading, allowedActions } = useUserPermissions(viewPermissions, props.permissions);
+
+  if (isLoading) {
+    return <LoadingIndicatorPage />;
+  }
+
+  return <ListView {...props} {...allowedActions} />;
+};
+
+Permissions.defaultProps = {
+  permissions: [],
+};
+
+Permissions.propTypes = {
+  permissions: PropTypes.array,
+  slug: PropTypes.string.isRequired,
+};
+
+// This avoids the components to rerender on params change causing multiple requests to be fired
+export default memo(Permissions, isEqual);

packages/strapi-plugin-content-manager/admin/src/containers/ListViewLayoutManager/index.js

@@ -2,9 +2,9 @@ import React, { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { useQueryParams } from 'strapi-helper-plugin';
-import { resetProps, setLayout } from './actions';
-import ListView from './index';
+import { resetProps, setLayout } from '../ListView/actions';
 import useSyncRbac from '../RBACManager/useSyncRbac';
+import Permissions from './Permissions';
 
 const ListViewLayout = ({ layout, ...props }) => {
   const dispatch = useDispatch();
@@ -34,7 +34,7 @@ const ListViewLayout = ({ layout, ...props }) => {
     return null;
   }
 
-  return <ListView {...props} layout={layout} permissions={permissions} />;
+  return <Permissions {...props} layout={layout} permissions={permissions} />;
 };
 
 ListViewLayout.propTypes = {