@strapi/admin 4.11.2 → 4.11.4

package/admin/src/content-manager/pages/ListView/index.js

@@ -1,55 +1,64 @@
-import React, { memo, useCallback, useEffect, useRef } from 'react';
+import * as React from 'react';
 
 import {
-  ActionLayout,
+  IconButton,
+  Main,
   Box,
+  ActionLayout,
   Button,
   ContentLayout,
   HeaderLayout,
-  IconButton,
-  Main,
   useNotifyAT,
+  Flex,
+  Typography,
+  Status,
 } from '@strapi/design-system';
 import {
-  CheckPermissions,
-  getYupInnerErrors,
-  Link,
   NoPermissions,
+  CheckPermissions,
   SearchURLQuery,
-  useAPIErrorHandler,
   useFetchClient,
   useFocusWhenNavigate,
-  useNotification,
   useQueryParams,
+  useNotification,
   useRBACProvider,
   useTracking,
+  Link,
+  useAPIErrorHandler,
+  getYupInnerErrors,
+  useStrapiApp,
+  DynamicTable,
+  PaginationURLQuery,
+  PageSizeURLQuery,
 } from '@strapi/helper-plugin';
 import { ArrowLeft, Cog, Plus } from '@strapi/icons';
 import axios from 'axios';
+import getReviewWorkflowsColumn from 'ee_else_ce/content-manager/components/DynamicTable/CellContent/ReviewWorkflowsStage/getTableColumn';
 import isEqual from 'lodash/isEqual';
 import PropTypes from 'prop-types';
 import { stringify } from 'qs';
 import { useIntl } from 'react-intl';
 import { useMutation } from 'react-query';
-import { connect } from 'react-redux';
-import { Link as ReactRouterLink, useHistory, useLocation } from 'react-router-dom';
+import { connect, useSelector } from 'react-redux';
+import { useHistory, useLocation, Link as ReactRouterLink } from 'react-router-dom';
 import { bindActionCreators, compose } from 'redux';
 import styled from 'styled-components';
 
-import permissions from '../../../permissions';
+import { INJECT_COLUMN_IN_TABLE } from '../../../exposedHooks';
+import { selectAdminPermissions } from '../../../pages/App/selectors';
 import { InjectionZone } from '../../../shared/components';
 import AttributeFilter from '../../components/AttributeFilter';
-import DynamicTable from '../../components/DynamicTable';
+import BulkActionsBar from '../../components/DynamicTable/BulkActionsBar';
 import { createYupSchema, getRequestUrl, getTrad } from '../../utils';
 
 import { getData, getDataSucceeded, onChangeListHeaders, onResetListHeaders } from './actions';
-import FieldPicker from './FieldPicker';
-import PaginationFooter from './PaginationFooter';
-import makeSelectListView from './selectors';
+import { ConfirmDialogDelete } from './components/ConfirmDialogDelete';
+import { ConfirmDialogDeleteAll } from './components/ConfirmDialogDeleteAll';
+import { FieldPicker } from './components/FieldPicker';
+import { TableRows } from './components/TableRows';
+import makeSelectListView, { selectDisplayedHeaders } from './selectors';
 import { buildQueryString } from './utils';
 
-const cmPermissions = permissions.contentManager;
-
 const ConfigureLayoutBox = styled(Box)`
   svg {
     path {
@@ -74,6 +83,8 @@ function ListView({
   const { total } = pagination;
   const { contentType } = layout;
   const {
+    info,
+    options,
     metadatas,
     settings: { bulkable: isBulkable, filterable: isFilterable, searchable: isSearchable },
   } = contentType;
@@ -81,10 +92,11 @@ function ListView({
   const toggleNotification = useNotification();
   const { trackUsage } = useTracking();
   const { refetchPermissions } = useRBACProvider();
-  const trackUsageRef = useRef(trackUsage);
-  const fetchPermissionsRef = useRef(refetchPermissions);
+  const trackUsageRef = React.useRef(trackUsage);
+  const fetchPermissionsRef = React.useRef(refetchPermissions);
   const { notifyStatus } = useNotifyAT();
   const { formatAPIError } = useAPIErrorHandler(getTrad);
+  const permissions = useSelector(selectAdminPermissions);
 
   useFocusWhenNavigate();
 
@@ -95,7 +107,7 @@ function ListView({
   const { pathname } = useLocation();
   const { push } = useHistory();
   const { formatMessage } = useIntl();
-  const hasDraftAndPublish = contentType.options?.draftAndPublish ?? false;
+  const hasDraftAndPublish = options?.draftAndPublish || false;
   const fetchClient = useFetchClient();
   const { post, del } = fetchClient;
 
@@ -146,9 +158,12 @@ function ListView({
   // FIXME
   // Using a ref to avoid requests being fired multiple times on slug on change
   // We need it because the hook as mulitple dependencies so it may run before the permissions have checked
-  const requestUrlRef = useRef('');
+  const requestUrlRef = React.useRef('');
 
-  const fetchData = useCallback(
+  /**
+   * TODO: re-write all of this, it's a mess.
+   */
+  const fetchData = React.useCallback(
     async (endPoint, source) => {
       getData();
 
@@ -200,7 +215,7 @@ function ListView({
     [formatMessage, getData, getDataSucceeded, notifyStatus, push, toggleNotification, fetchClient]
   );
 
-  const handleConfirmDeleteAllData = useCallback(
+  const handleConfirmDeleteAllData = React.useCallback(
     async (ids) => {
       try {
         await post(getRequestUrl(`collection-types/${slug}/actions/bulkDelete`), {
@@ -220,7 +235,7 @@ function ListView({
     [fetchData, params, slug, toggleNotification, formatAPIError, post]
   );
 
-  const handleConfirmDeleteData = useCallback(
+  const handleConfirmDeleteData = React.useCallback(
     async (idToDelete) => {
       try {
         await del(getRequestUrl(`collection-types/${slug}/${idToDelete}`));
@@ -306,7 +321,7 @@ function ListView({
     return bulkUnpublishMutation.mutateAsync({ ids: selectedEntries });
   };
 
-  useEffect(() => {
+  React.useEffect(() => {
     const CancelToken = axios.CancelToken;
     const source = CancelToken.source();
 
@@ -329,10 +344,101 @@ function ListView({
     defaultMessage: 'Content',
   });
   const headerLayoutTitle = formatMessage({
-    id: contentType.info.displayName,
-    defaultMessage: contentType.info.displayName || defaultHeaderLayoutTitle,
+    id: info.displayName,
+    defaultMessage: info.displayName || defaultHeaderLayoutTitle,
   });
 
+  const { runHookWaterfall } = useStrapiApp();
+  const displayedHeaders = useSelector(selectDisplayedHeaders);
+
+  const tableHeaders = React.useMemo(() => {
+    const headers = runHookWaterfall(INJECT_COLUMN_IN_TABLE, {
+      displayedHeaders,
+      layout,
+    });
+
+    const formattedHeaders = headers.displayedHeaders.map((header) => {
+      const { metadatas } = header;
+
+      if (header.fieldSchema.type === 'relation') {
+        const sortFieldValue = `${header.name}.${header.metadatas.mainField.name}`;
+
+        return {
+          ...header,
+          metadatas: {
+            ...metadatas,
+            label: formatMessage({
+              id: getTrad(`containers.ListPage.table-headers.${header.name}`),
+              defaultMessage: metadatas.label,
+            }),
+          },
+          name: sortFieldValue,
+        };
+      }
+
+      return {
+        ...header,
+        metadatas: {
+          ...metadatas,
+          label: formatMessage({
+            id: getTrad(`containers.ListPage.table-headers.${header.name}`),
+            defaultMessage: metadatas.label,
+          }),
+        },
+      };
+    });
+
+    if (!hasDraftAndPublish) {
+      return formattedHeaders;
+    }
+
+    // this should not exist. Ideally we would use registerHook() similar to what has been done
+    // in the i18n plugin. In order to do that review-workflows should have been a plugin. In
+    // a future iteration we need to find a better pattern.
+
+    // In CE this will return null - in EE a column definition including the custom formatting component.
+    const reviewWorkflowColumn = getReviewWorkflowsColumn(layout);
+
+    if (reviewWorkflowColumn) {
+      formattedHeaders.push(reviewWorkflowColumn);
+    }
+
+    return [
+      ...formattedHeaders,
+      {
+        key: '__published_at_temp_key__',
+        name: 'publishedAt',
+        fieldSchema: {
+          type: 'custom',
+        },
+        metadatas: {
+          label: formatMessage({
+            id: getTrad(`containers.ListPage.table-headers.publishedAt`),
+            defaultMessage: 'publishedAt',
+          }),
+          searchable: false,
+          sortable: true,
+        },
+        // eslint-disable-next-line react/no-unstable-nested-components
+        cellFormatter(cellData) {
+          const isPublished = cellData.publishedAt;
+          const variant = isPublished ? 'success' : 'secondary';
+
+          return (
+            <Status width="min-content" showBullet={false} variant={variant} size="S">
+              <Typography fontWeight="bold" textColor={`${variant}700`}>
+                {formatMessage({
+                  id: getTrad(`containers.List.${isPublished ? 'published' : 'draft'}`),
+                  defaultMessage: isPublished ? 'Published' : 'Draft',
+                })}
+              </Typography>
+            </Status>
+          );
+        },
+      },
+    ];
+  }, [runHookWaterfall, displayedHeaders, layout, hasDraftAndPublish, formatMessage]);
+
   const subtitle = canRead
     ? formatMessage(
         {
@@ -391,7 +497,9 @@ function ListView({
             <>
               <InjectionZone area="contentManager.listView.actions" />
               <FieldPicker layout={layout} />
-              <CheckPermissions permissions={cmPermissions.collectionTypesConfigurations}>
+              <CheckPermissions
+                permissions={permissions.contentManager.collectionTypesConfigurations}
+              >
                 <ConfigureLayoutBox paddingTop={1} paddingBottom={1}>
                   <IconButton
                     onClick={() => {
@@ -433,7 +541,7 @@ function ListView({
       )}
       <ContentLayout>
         {canRead ? (
-          <>
+          <Flex gap={4} direction="column" alignItems="stretch">
             <DynamicTable
               canCreate={canCreate}
               canDelete={canDelete}
@@ -448,10 +556,41 @@ function ListView({
               // FIXME: remove the layout props drilling
               layout={layout}
               rows={data}
+              components={{ ConfirmDialogDelete, ConfirmDialogDeleteAll }}
+              contentType={headerLayoutTitle}
               action={getCreateAction({ variant: 'secondary' })}
-            />
-            <PaginationFooter pagination={{ pageCount: pagination?.pageCount || 1 }} />
-          </>
+              headers={tableHeaders}
+              onOpenDeleteAllModalTrackedEvent="willBulkDeleteEntries"
+              withBulkActions
+              withMainAction={canDelete && isBulkable}
+              renderBulkActionsBar={({ selectedEntries, clearSelectedEntries }) => (
+                <BulkActionsBar
+                  showPublish={canPublish && hasDraftAndPublish}
+                  showDelete={canDelete}
+                  onConfirmDeleteAll={handleConfirmDeleteAllData}
+                  onConfirmPublishAll={handleConfirmPublishAllData}
+                  onConfirmUnpublishAll={handleConfirmUnpublishAllData}
+                  selectedEntries={selectedEntries}
+                  clearSelectedEntries={clearSelectedEntries}
+                />
+              )}
+              bulkAction
+            >
+              <TableRows
+                canCreate={canCreate}
+                canDelete={canDelete}
+                contentType={contentType}
+                headers={tableHeaders}
+                rows={data}
+                withBulkActions
+                withMainAction={canDelete && isBulkable}
+              />
+            </DynamicTable>
+            <Flex alignItems="flex-end" justifyContent="space-between">
+              <PageSizeURLQuery trackedEvent="willChangeNumberOfEntriesPerPage" />
+              <PaginationURLQuery pagination={{ pageCount: pagination?.pageCount || 1 }} />
+            </Flex>
+          </Flex>
         ) : (
           <NoPermissions />
         )}
@@ -503,4 +642,4 @@ export function mapDispatchToProps(dispatch) {
 }
 const withConnect = connect(mapStateToProps, mapDispatchToProps);
 
-export default compose(withConnect)(memo(ListView, isEqual));
+export default compose(withConnect)(React.memo(ListView, isEqual));

package/admin/src/content-manager/pages/ListView/utils/index.js

@@ -1,3 +1 @@
-// export { default as getAllAllowedHeaders } from './getAllAllowedHeaders';
-// export { default as getFirstSortableHeader } from './getFirstSortableHeader';
 export { default as buildQueryString } from './buildQueryString';

package/admin/src/content-manager/pages/ListViewLayoutManager/Permissions.js

@@ -34,7 +34,7 @@ export default memo(Permissions, (prev, next) => {
   // When we navigate from the EV to the LV using the menu the state is lost at some point
   // and this causes the component to rerender twice and firing requests twice
   // this hack prevents this
-  // TODO at some point we will need to refacto the LV and migrate to react-query
+  // TODO: at some point we will need to refactor the LV and migrate to react-query
   const propNamesThatHaveChanged = Object.keys(differenceBetweenRerenders).filter(
     (propName) => propName !== 'state'
   );

package/admin/src/content-manager/pages/SingleTypeRecursivePath/index.js

@@ -2,23 +2,23 @@ import React, { memo, useMemo } from 'react';
 
 import { CheckPagePermissions, LoadingIndicatorPage } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
+import { useSelector } from 'react-redux';
 import { Route, Switch } from 'react-router-dom';
 
-import permissions from '../../../permissions';
+import { selectAdminPermissions } from '../../../pages/App/selectors';
 import { ContentTypeLayoutContext } from '../../contexts';
 import { useFetchContentTypeLayout } from '../../hooks';
 import { formatLayoutToApi } from '../../utils';
 import EditSettingsView from '../EditSettingsView';
 import EditViewLayoutManager from '../EditViewLayoutManager';
 
-const cmPermissions = permissions.contentManager;
-
 const SingleTypeRecursivePath = ({
   match: {
     params: { slug },
     url,
   },
 }) => {
+  const permissions = useSelector(selectAdminPermissions);
   const { isLoading, layout, updateLayout } = useFetchContentTypeLayout(slug);
 
   const { rawContentTypeLayout, rawComponentsLayouts } = useMemo(() => {
@@ -48,7 +48,7 @@ const SingleTypeRecursivePath = ({
     <ContentTypeLayoutContext.Provider value={layout}>
       <Switch>
         <Route path={`${url}/configurations/edit`}>
-          <CheckPagePermissions permissions={cmPermissions.singleTypesConfigurations}>
+          <CheckPagePermissions permissions={permissions.contentManager.singleTypesConfigurations}>
             <EditSettingsView
               components={rawComponentsLayouts}
               isContentTypeView

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

@@ -1,53 +1,86 @@
-import { useEffect, useReducer, useRef } from 'react';
+import * as React from 'react';
 
 import { useAppInfo, useRBACProvider, useStrapiApp } from '@strapi/helper-plugin';
+import { Cog, Puzzle, ShoppingCart } from '@strapi/icons';
+import { useSelector } from 'react-redux';
+
+import { selectAdminPermissions } from '../../pages/App/selectors';
 
-import reducer, { initialState } from './reducer';
 import getGeneralLinks from './utils/getGeneralLinks';
 import getPluginSectionLinks from './utils/getPluginSectionLinks';
 
 const useMenu = () => {
-  const [state, dispatch] = useReducer(reducer, initialState);
-  const { allPermissions } = useRBACProvider();
+  const { allPermissions: userPermissions } = useRBACProvider();
   const { shouldUpdateStrapi } = useAppInfo();
   const { menu } = useStrapiApp();
-
-  // We are using a ref because we don't want our effect to have this in its dependencies array
-  const generalSectionLinksRef = useRef(state.generalSectionLinks);
-  const shouldUpdateStrapiRef = useRef(shouldUpdateStrapi);
-  // Once in the app lifecycle the menu should not be added into any dependencies array
-
-  const resolvePermissions = async (permissions = allPermissions) => {
-    const pluginsSectionLinks = menu;
-
-    const authorizedPluginSectionLinks = await getPluginSectionLinks(
-      permissions,
-      pluginsSectionLinks
-    );
-
-    const authorizedGeneralSectionLinks = await getGeneralLinks(
-      permissions,
-      generalSectionLinksRef.current,
-      shouldUpdateStrapiRef.current
-    );
-
-    dispatch({
-      type: 'SET_SECTION_LINKS',
-      data: {
-        authorizedGeneralSectionLinks,
-        authorizedPluginSectionLinks,
+  const permissions = useSelector(selectAdminPermissions);
+  const [menuWithUserPermissions, setMenuWithUserPermissions] = React.useState({
+    generalSectionLinks: [
+      {
+        icon: Puzzle,
+        intlLabel: {
+          id: 'global.plugins',
+          defaultMessage: 'Plugins',
+        },
+        to: '/list-plugins',
+        permissions: permissions.marketplace.main,
+      },
+      {
+        icon: ShoppingCart,
+        intlLabel: {
+          id: 'global.marketplace',
+          defaultMessage: 'Marketplace',
+        },
+        to: '/marketplace',
+        permissions: permissions.marketplace.main,
       },
-    });
-    dispatch({ type: 'UNSET_IS_LOADING' });
-  };
+      {
+        icon: Cog,
+        intlLabel: {
+          id: 'global.settings',
+          defaultMessage: 'Settings',
+        },
+        to: '/settings',
+        // Permissions of this link are retrieved in the init phase
+        // using the settings menu
+        permissions: [],
+        notificationsCount: 0,
+      },
+    ],
+    pluginsSectionLinks: [],
+    isLoading: true,
+  });
+  const generalSectionLinksRef = React.useRef(menuWithUserPermissions.generalSectionLinks);
+
+  React.useEffect(() => {
+    async function applyMenuPermissions() {
+      const authorizedPluginSectionLinks = await getPluginSectionLinks(userPermissions, menu);
+
+      const authorizedGeneralSectionLinks = await getGeneralLinks(
+        userPermissions,
+        generalSectionLinksRef.current,
+        shouldUpdateStrapi
+      );
 
-  const resolvePermissionsRef = useRef(resolvePermissions);
+      setMenuWithUserPermissions((state) => ({
+        ...state,
+        generalSectionLinks: authorizedGeneralSectionLinks,
+        pluginsSectionLinks: authorizedPluginSectionLinks,
+        isLoading: false,
+      }));
+    }
 
-  useEffect(() => {
-    resolvePermissionsRef.current(allPermissions);
-  }, [allPermissions, dispatch]);
+    applyMenuPermissions();
+  }, [
+    setMenuWithUserPermissions,
+    generalSectionLinksRef,
+    userPermissions,
+    menu,
+    permissions,
+    shouldUpdateStrapi,
+  ]);
 
-  return state;
+  return menuWithUserPermissions;
 };
 
 export default useMenu;

package/admin/src/hooks/useMenu/utils/getGeneralLinks.js

@@ -2,8 +2,11 @@ import cloneDeep from 'lodash/cloneDeep';
 
 import checkPermissions from './checkPermissions';
 
-const getGeneralLinks = async (permissions, generalSectionRawLinks, shouldUpdateStrapi) => {
-  const generalSectionPermissionsPromises = checkPermissions(permissions, generalSectionRawLinks);
+const getGeneralLinks = async (userPermissions, generalSectionRawLinks, shouldUpdateStrapi) => {
+  const generalSectionPermissionsPromises = checkPermissions(
+    userPermissions,
+    generalSectionRawLinks
+  );
   const generalSectionLinksPermissions = await Promise.all(generalSectionPermissionsPromises);
 
   const authorizedGeneralSectionLinks = generalSectionRawLinks.filter(

package/admin/src/hooks/useSettingsMenu/constants.js

@@ -1,5 +1,3 @@
-import adminPermissions from '../../permissions';
-
 export const LINKS_CE = {
   global: [
     {
@@ -12,19 +10,16 @@ export const LINKS_CE = {
       intlLabel: { id: 'Settings.webhooks.title', defaultMessage: 'Webhooks' },
       to: '/settings/webhooks',
       id: 'webhooks',
-      permissions: adminPermissions.settings.webhooks.main,
     },
     {
       intlLabel: { id: 'Settings.apiTokens.title', defaultMessage: 'API Tokens' },
       to: '/settings/api-tokens?sort=name:ASC',
       id: 'api-tokens',
-      permissions: adminPermissions.settings['api-tokens'].main,
     },
     {
       intlLabel: { id: 'Settings.transferTokens.title', defaultMessage: 'Transfer Tokens' },
       to: '/settings/transfer-tokens?sort=name:ASC',
       id: 'transfer-tokens',
-      permissions: adminPermissions.settings['transfer-tokens'].main,
     },
   ],
 
@@ -33,14 +28,12 @@ export const LINKS_CE = {
       intlLabel: { id: 'global.roles', defaultMessage: 'Roles' },
       to: '/settings/roles',
       id: 'roles',
-      permissions: adminPermissions.settings.roles.main,
     },
     {
       intlLabel: { id: 'global.users' },
       // Init the search params directly
       to: '/settings/users?pageSize=10&page=1&sort=firstname',
       id: 'users',
-      permissions: adminPermissions.settings.users.main,
     },
   ],
 };

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

@@ -1,7 +1,9 @@
 import { useState, useEffect } from 'react';
 
 import { hasPermissions, useRBACProvider, useStrapiApp, useAppInfo } from '@strapi/helper-plugin';
+import { useSelector } from 'react-redux';
 
+import { selectAdminPermissions } from '../../pages/App/selectors';
 import { useEnterprise } from '../useEnterprise';
 
 import { LINKS_CE } from './constants';
@@ -13,17 +15,29 @@ const useSettingsMenu = () => {
     isLoading: true,
     menu: [],
   });
-  const { allPermissions: permissions } = useRBACProvider();
+  const { allPermissions: userPermissions } = useRBACProvider();
   const { shouldUpdateStrapi } = useAppInfo();
   const { settings } = useStrapiApp();
+  const permissions = useSelector(selectAdminPermissions);
   const { global: globalLinks, admin: adminLinks } = useEnterprise(
     LINKS_CE,
     async () => (await import('../../../../ee/admin/hooks/useSettingsMenu/constants')).LINKS_EE,
     {
       combine(ceLinks, eeLinks) {
+        function addPermissions(link) {
+          if (!link.id) {
+            throw new Error('The settings menu item must have an id attribute.');
+          }
+
+          return {
+            ...link,
+            permissions: permissions.settings?.[link.id]?.main,
+          };
+        }
+
         return {
-          admin: [...eeLinks.admin, ...ceLinks.admin],
-          global: [...ceLinks.global, ...eeLinks.global],
+          admin: [...eeLinks.admin, ...ceLinks.admin].map(addPermissions),
+          global: [...ceLinks.global, ...eeLinks.global].map(addPermissions),
         };
       },
       defaultValue: {
@@ -40,7 +54,7 @@ const useSettingsMenu = () => {
           sections.reduce((acc, section, sectionIndex) => {
             const buildMenuPermissions = (links) =>
               links.map(async (link, linkIndex) => ({
-                hasPermission: await hasPermissions(permissions, link.permissions),
+                hasPermission: await hasPermissions(userPermissions, link.permissions),
                 sectionIndex,
                 linkIndex,
               }));
@@ -89,7 +103,7 @@ const useSettingsMenu = () => {
     ]);
 
     getData();
-  }, [adminLinks, globalLinks, permissions, settings, shouldUpdateStrapi]);
+  }, [adminLinks, globalLinks, userPermissions, settings, shouldUpdateStrapi]);
 
   return { isLoading, menu };
 };

package/admin/src/pages/App/constants.js

@@ -1,3 +1,4 @@
 export const SET_APP_RUNTIME_STATUS = 'StrapiAdmin/APP/SET_APP_RUNTIME_STATUS';
+export const SET_ADMIN_PERMISSIONS = 'StrapiAdmin/App/SET_ADMIN_PERMISSIONS';
 
 export const ROUTES_CE = [];