@strapi/admin 4.11.4 → 4.11.6

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

@@ -1,16 +1,8 @@
-import React, { useMemo, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
-import {
-  Badge,
-  Box,
-  Flex,
-  Loader,
-  MenuItem,
-  SimpleMenu,
-  Typography,
-  useNotifyAT,
-} from '@strapi/design-system';
-import { stopPropagation, useFetchClient } from '@strapi/helper-plugin';
+import { Badge, Flex, Loader, Typography, useNotifyAT } from '@strapi/design-system';
+import { Menu } from '@strapi/design-system/v2';
+import { useFetchClient } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useQuery } from 'react-query';
@@ -19,54 +11,24 @@ import styled from 'styled-components';
 import { getRequestUrl, getTrad } from '../../../../../utils';
 import CellValue from '../CellValue';
 
-const TypographyMaxWidth = styled(Typography)`
-  max-width: 500px;
-`;
-
-const fetchRelation = async (endPoint, notifyStatus, get) => {
-  const {
-    data: { results, pagination },
-  } = await get(endPoint);
-
-  notifyStatus();
-
-  return { results, pagination };
-};
-
 const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, contentType }) => {
   const { formatMessage } = useIntl();
   const { notifyStatus } = useNotifyAT();
-  const relationFetchEndpoint = useMemo(
-    () => getRequestUrl(`relations/${contentType.uid}/${entityId}/${name.split('.')[0]}`),
-    [entityId, name, contentType]
-  );
   const [isOpen, setIsOpen] = useState(false);
-  const { get } = useFetchClient();
-
-  const Label = (
-    <Flex gap={1} wrap="nowrap">
-      <Badge>{value.count}</Badge>
-      {formatMessage(
-        {
-          id: 'content-manager.containers.ListPage.items',
-          defaultMessage: '{number, plural, =0 {items} one {item} other {items}}',
-        },
-        { number: value.count }
-      )}
-    </Flex>
-  );
 
-  const notify = () => {
-    const message = formatMessage({
-      id: getTrad('DynamicTable.relation-loaded'),
-      defaultMessage: 'Relations have been loaded',
-    });
-    notifyStatus(message);
-  };
+  const { get } = useFetchClient();
 
   const { data, status } = useQuery(
     [fieldSchema.targetModel, entityId],
-    () => fetchRelation(relationFetchEndpoint, notify, get),
+    async () => {
+      const {
+        data: { results, pagination },
+      } = await get(
+        getRequestUrl(`relations/${contentType.uid}/${entityId}/${name.split('.')[0]}`)
+      );
+
+      return { results, pagination };
+    },
     {
       enabled: isOpen,
       staleTime: 0,
@@ -77,40 +39,58 @@ const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, conte
     }
   );
 
+  useEffect(() => {
+    if (data) {
+      notifyStatus(
+        formatMessage({
+          id: getTrad('DynamicTable.relation-loaded'),
+          defaultMessage: 'Relations have been loaded',
+        })
+      );
+    }
+  }, [data, formatMessage, notifyStatus]);
+
   return (
-    <Box {...stopPropagation}>
-      <SimpleMenu
-        label={Label}
-        size="S"
-        onOpen={() => setIsOpen(true)}
-        onClose={() => setIsOpen(false)}
-      >
+    <Menu.Root onOpenChange={(isOpen) => setIsOpen(isOpen)}>
+      <MenuTrigger onClick={(e) => e.stopPropagation()}>
+        <Flex gap={1} wrap="nowrap">
+          <Badge>{value.count}</Badge>
+          {formatMessage(
+            {
+              id: 'content-manager.containers.ListPage.items',
+              defaultMessage: '{number, plural, =0 {items} one {item} other {items}}',
+            },
+            { number: value.count }
+          )}
+        </Flex>
+      </MenuTrigger>
+      <Menu.Content>
         {status !== 'success' && (
-          <MenuItem aria-disabled>
+          <Menu.Item disabled>
             <Loader small>
               {formatMessage({
                 id: getTrad('DynamicTable.relation-loading'),
                 defaultMessage: 'Relations are loading',
               })}
             </Loader>
-          </MenuItem>
+          </Menu.Item>
         )}
 
         {status === 'success' && (
           <>
             {data?.results.map((entry) => (
-              <MenuItem key={entry.id} aria-disabled>
+              <Menu.Item key={entry.id} disabled>
                 <TypographyMaxWidth ellipsis>
                   <CellValue
                     type={metadatas.mainField.schema.type}
                     value={entry[metadatas.mainField.name] || entry.id}
                   />
                 </TypographyMaxWidth>
-              </MenuItem>
+              </Menu.Item>
             ))}
 
             {data?.pagination.total > 10 && (
-              <MenuItem
+              <Menu.Item
                 aria-disabled
                 aria-label={formatMessage({
                   id: getTrad('DynamicTable.relation-more'),
@@ -118,12 +98,12 @@ const RelationMultiple = ({ fieldSchema, metadatas, name, entityId, value, conte
                 })}
               >
                 <Typography>…</Typography>
-              </MenuItem>
+              </Menu.Item>
             )}
           </>
         )}
-      </SimpleMenu>
-    </Box>
+      </Menu.Content>
+    </Menu.Root>
   );
 };
 
@@ -147,4 +127,18 @@ RelationMultiple.propTypes = {
   value: PropTypes.object.isRequired,
 };
 
+const TypographyMaxWidth = styled(Typography)`
+  max-width: 500px;
+`;
+
+/**
+ * TODO: this needs to be solved in the Design-System
+ */
+const MenuTrigger = styled(Menu.Trigger)`
+  svg {
+    width: ${6 / 16}rem;
+    height: ${4 / 16}rem;
+  }
+`;
+
 export default RelationMultiple;

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
-import { Badge, Box, MenuItem, SimpleMenu, Typography } from '@strapi/design-system';
-import { stopPropagation } from '@strapi/helper-plugin';
+import { Badge, Typography } from '@strapi/design-system';
+import { Menu } from '@strapi/design-system/v2';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';
@@ -18,31 +18,28 @@ const RepeatableComponentCell = ({ value, metadatas }) => {
     mainField: { type: mainFieldType, name: mainFieldName },
   } = metadatas;
 
-  const Label = (
-    <>
-      <Badge>{value.length}</Badge>{' '}
-      {formatMessage(
-        {
-          id: 'content-manager.containers.ListPage.items',
-          defaultMessage: '{number, plural, =0 {items} one {item} other {items}}',
-        },
-        { number: value.length }
-      )}
-    </>
-  );
-
   return (
-    <Box {...stopPropagation}>
-      <SimpleMenu label={Label} size="S">
+    <Menu.Root>
+      <MenuTrigger onClick={(e) => e.stopPropagation()}>
+        <Badge>{value.length}</Badge>{' '}
+        {formatMessage(
+          {
+            id: 'content-manager.containers.ListPage.items',
+            defaultMessage: '{number, plural, =0 {items} one {item} other {items}}',
+          },
+          { number: value.length }
+        )}
+      </MenuTrigger>
+      <Menu.Content>
         {value.map((item) => (
-          <MenuItem key={item.id} aria-disabled>
+          <Menu.Item key={item.id} disabled>
             <TypographyMaxWidth ellipsis>
               <CellValue type={mainFieldType} value={item[mainFieldName] || item.id} />
             </TypographyMaxWidth>
-          </MenuItem>
+          </Menu.Item>
         ))}
-      </SimpleMenu>
-    </Box>
+      </Menu.Content>
+    </Menu.Root>
   );
 };
 
@@ -57,4 +54,14 @@ RepeatableComponentCell.propTypes = {
   value: PropTypes.array.isRequired,
 };
 
+/**
+ * TODO: this needs to be solved in the Design-System
+ */
+const MenuTrigger = styled(Menu.Trigger)`
+  svg {
+    width: ${6 / 16}rem;
+    height: ${4 / 16}rem;
+  }
+`;
+
 export default RepeatableComponentCell;

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

@@ -1,22 +1,40 @@
 import React from 'react';
 
-import { BaseCheckbox, IconButton, Tbody, Td, Tr, Flex } from '@strapi/design-system';
-import { useTracking, useFetchClient, useAPIErrorHandler } from '@strapi/helper-plugin';
+import {
+  BaseCheckbox,
+  IconButton,
+  Tbody,
+  Td,
+  Tr,
+  Flex,
+  Status,
+  Typography,
+} from '@strapi/design-system';
+import {
+  useTracking,
+  useFetchClient,
+  useAPIErrorHandler,
+  useQueryParams,
+} from '@strapi/helper-plugin';
 import { Trash, Duplicate, Pencil } from '@strapi/icons';
 import { AxiosError } from 'axios';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
 
+import { useEnterprise } from '../../../../../hooks/useEnterprise';
 import { getFullName } from '../../../../../utils';
 import { usePluginsQueryParams } from '../../../../hooks';
 import { getTrad } from '../../../../utils';
 import CellContent from '../CellContent';
 
+const REVIEW_WORKFLOW_COLUMNS_CE = () => null;
+
 export const TableRows = ({
   canCreate,
   canDelete,
   contentType,
+  features: { hasDraftAndPublish, hasReviewWorkflows },
   headers,
   entriesToDelete,
   onClickDelete,
@@ -32,7 +50,20 @@ export const TableRows = ({
 
   const { trackUsage } = useTracking();
   const pluginsQueryParams = usePluginsQueryParams();
+  const [{ query }] = useQueryParams();
   const { formatAPIError } = useAPIErrorHandler(getTrad);
+  const ReviewWorkflowsStage = useEnterprise(
+    REVIEW_WORKFLOW_COLUMNS_CE,
+    async () =>
+      (
+        await import(
+          '../../../../../../../ee/admin/content-manager/pages/ListView/ReviewWorkflowsColumn'
+        )
+      ).ReviewWorkflowsStageEE,
+    {
+      enabled: hasReviewWorkflows,
+    }
+  );
 
   /**
    *
@@ -53,7 +84,9 @@ export const TableRows = ({
   const handleCloneClick = (id) => async () => {
     try {
       const { data } = await post(
-        `/content-manager/collection-types/${contentType.uid}/auto-clone/${id}?${pluginsQueryParams}`
+        `/content-manager/collection-types/${contentType.uid}/auto-clone/${id}`,
+        {},
+        { params: { plugins: query?.plugins } }
       );
 
       if ('id' in data) {
@@ -74,6 +107,11 @@ export const TableRows = ({
     }
   };
 
+  // block rendering until the review stage component is fully loaded in EE
+  if (!ReviewWorkflowsStage) {
+    return null;
+  }
+
   /**
    * Table Cells with actions e.g edit, delete, duplicate have `stopPropagation`
    * to prevent the row from being selected.
@@ -113,20 +151,61 @@ export const TableRows = ({
                 />
               </Td>
             )}
+
             {headers.map(({ key, cellFormatter, name, ...rest }) => {
+              if (hasDraftAndPublish && name === 'publishedAt') {
+                return (
+                  <Td key={key}>
+                    <Status
+                      width="min-content"
+                      showBullet={false}
+                      variant={data.publishedAt ? 'success' : 'secondary'}
+                      size="S"
+                    >
+                      <Typography
+                        fontWeight="bold"
+                        textColor={`${data.publishedAt ? 'success' : 'secondary'}700`}
+                      >
+                        {formatMessage({
+                          id: getTrad(
+                            `containers.List.${data.publishedAt ? 'published' : 'draft'}`
+                          ),
+                          defaultMessage: data.publishedAt ? 'Published' : 'Draft',
+                        })}
+                      </Typography>
+                    </Status>
+                  </Td>
+                );
+              }
+
+              if (hasReviewWorkflows && name === 'strapi_reviewWorkflows_stage') {
+                return (
+                  <Td key={key}>
+                    {data.strapi_reviewWorkflows_stage ? (
+                      <ReviewWorkflowsStage
+                        color={data.strapi_reviewWorkflows_stage.color}
+                        name={data.strapi_reviewWorkflows_stage.name}
+                      />
+                    ) : (
+                      <Typography textColor="neutral800">-</Typography>
+                    )}
+                  </Td>
+                );
+              }
+
+              if (typeof cellFormatter === 'function') {
+                return <Td key={key}>{cellFormatter(data, { key, name, ...rest })}</Td>;
+              }
+
               return (
                 <Td key={key}>
-                  {typeof cellFormatter === 'function' ? (
-                    cellFormatter(data, { key, name, ...rest })
-                  ) : (
-                    <CellContent
-                      content={data[name.split('.')[0]]}
-                      name={name}
-                      contentType={contentType}
-                      {...rest}
-                      rowId={data.id}
-                    />
-                  )}
+                  <CellContent
+                    content={data[name.split('.')[0]]}
+                    name={name}
+                    contentType={contentType}
+                    {...rest}
+                    rowId={data.id}
+                  />
                 </Td>
               );
             })}
@@ -212,6 +291,10 @@ TableRows.propTypes = {
     uid: PropTypes.string.isRequired,
   }).isRequired,
   entriesToDelete: PropTypes.array,
+  features: PropTypes.shape({
+    hasDraftAndPublish: PropTypes.bool.isRequired,
+    hasReviewWorkflows: PropTypes.bool.isRequired,
+  }).isRequired,
   headers: PropTypes.array.isRequired,
   onClickDelete: PropTypes.func,
   onSelectRow: PropTypes.func,

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

@@ -10,8 +10,6 @@ import {
   HeaderLayout,
   useNotifyAT,
   Flex,
-  Typography,
-  Status,
 } from '@strapi/design-system';
 import {
   NoPermissions,
@@ -33,7 +31,6 @@ import {
 } 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';
@@ -45,6 +42,7 @@ import { bindActionCreators, compose } from 'redux';
 import styled from 'styled-components';
 
 import { INJECT_COLUMN_IN_TABLE } from '../../../exposedHooks';
+import { useEnterprise } from '../../../hooks/useEnterprise';
 import { selectAdminPermissions } from '../../../pages/App/selectors';
 import { InjectionZone } from '../../../shared/components';
 import AttributeFilter from '../../components/AttributeFilter';
@@ -57,7 +55,7 @@ import { ConfirmDialogDeleteAll } from './components/ConfirmDialogDeleteAll';
 import { FieldPicker } from './components/FieldPicker';
 import { TableRows } from './components/TableRows';
 import makeSelectListView, { selectDisplayedHeaders } from './selectors';
-import { buildQueryString } from './utils';
+import { buildValidGetParams } from './utils';
 
 const ConfigureLayoutBox = styled(Box)`
   svg {
@@ -67,6 +65,8 @@ const ConfigureLayoutBox = styled(Box)`
   }
 `;
 
+const REVIEW_WORKFLOW_COLUMNS_CE = null;
+
 function ListView({
   canCreate,
   canDelete,
@@ -101,14 +101,30 @@ function ListView({
   useFocusWhenNavigate();
 
   const [{ query }] = useQueryParams();
-  const params = buildQueryString(query);
+  const params = React.useMemo(() => buildValidGetParams(query), [query]);
   const pluginsQueryParams = stringify({ plugins: query.plugins }, { encode: false });
 
   const { pathname } = useLocation();
   const { push } = useHistory();
   const { formatMessage } = useIntl();
-  const hasDraftAndPublish = options?.draftAndPublish || false;
   const fetchClient = useFetchClient();
+
+  const hasDraftAndPublish = options?.draftAndPublish ?? false;
+  const hasReviewWorkflows = options?.reviewWorkflows ?? false;
+
+  const reviewWorkflowColumns = useEnterprise(
+    REVIEW_WORKFLOW_COLUMNS_CE,
+    async () =>
+      (
+        await import(
+          '../../../../../ee/admin/content-manager/pages/ListView/ReviewWorkflowsColumn/constants'
+        )
+      ).REVIEW_WORKFLOW_COLUMNS_EE,
+    {
+      enabled: !!options?.reviewWorkflows,
+    }
+  );
+
   const { post, del } = fetchClient;
 
   const bulkPublishMutation = useMutation(
@@ -121,7 +137,7 @@ function ListView({
           message: { id: 'content-manager.success.record.publish', defaultMessage: 'Published' },
         });
 
-        fetchData(`/content-manager/collection-types/${slug}${params}`);
+        fetchData(`/content-manager/collection-types/${slug}`, { params });
       },
       onError(error) {
         toggleNotification({
@@ -144,7 +160,7 @@ function ListView({
           },
         });
 
-        fetchData(`/content-manager/collection-types/${slug}${params}`);
+        fetchData(`/content-manager/collection-types/${slug}`, { params });
       },
       onError(error) {
         toggleNotification({
@@ -159,19 +175,17 @@ function ListView({
   // 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 = React.useRef('');
-
   /**
    * TODO: re-write all of this, it's a mess.
    */
   const fetchData = React.useCallback(
-    async (endPoint, source) => {
+    async (endPoint, options) => {
       getData();
 
       try {
-        const opts = source ? { cancelToken: source.token } : null;
         const {
           data: { results, pagination: paginationResult },
-        } = await fetchClient.get(endPoint, opts);
+        } = await fetchClient.get(endPoint, options);
 
         notifyStatus(
           formatMessage(
@@ -218,12 +232,12 @@ function ListView({
   const handleConfirmDeleteAllData = React.useCallback(
     async (ids) => {
       try {
-        await post(getRequestUrl(`collection-types/${slug}/actions/bulkDelete`), {
+        await post(`/content-manager/collection-types/${slug}/actions/bulkDelete`, {
           ids,
         });
 
-        const requestUrl = getRequestUrl(`collection-types/${slug}${params}`);
-        fetchData(requestUrl);
+        fetchData(`/content-manager/collection-types/${slug}`, { params });
+
         trackUsageRef.current('didBulkDeleteEntries');
       } catch (err) {
         toggleNotification({
@@ -232,16 +246,16 @@ function ListView({
         });
       }
     },
-    [fetchData, params, slug, toggleNotification, formatAPIError, post]
+    [slug, toggleNotification, formatAPIError, post, fetchData, params]
   );
 
   const handleConfirmDeleteData = React.useCallback(
     async (idToDelete) => {
       try {
-        await del(getRequestUrl(`collection-types/${slug}/${idToDelete}`));
+        await del(`/content-manager/collection-types/${slug}/${idToDelete}`);
 
-        const requestUrl = getRequestUrl(`collection-types/${slug}${params}`);
-        fetchData(requestUrl);
+        const requestUrl = getRequestUrl(`collection-types/${slug}`);
+        fetchData(requestUrl, { params });
 
         toggleNotification({
           type: 'success',
@@ -254,7 +268,7 @@ function ListView({
         });
       }
     },
-    [slug, params, fetchData, toggleNotification, formatAPIError, del]
+    [slug, toggleNotification, formatAPIError, del, fetchData, params]
   );
 
   /**
@@ -326,10 +340,10 @@ function ListView({
     const source = CancelToken.source();
 
     const shouldSendRequest = canRead;
-    const requestUrl = getRequestUrl(`collection-types/${slug}${params}`);
+    const requestUrl = getRequestUrl(`collection-types/${slug}`);
 
     if (shouldSendRequest && requestUrl.includes(requestUrlRef.current)) {
-      fetchData(requestUrl, source);
+      fetchData(requestUrl, { cancelToken: source.token, params });
     }
 
     return () => {
@@ -388,24 +402,8 @@ function ListView({
       };
     });
 
-    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,
-      {
+    if (hasDraftAndPublish) {
+      formattedHeaders.push({
         key: '__published_at_temp_key__',
         name: 'publishedAt',
         fieldSchema: {
@@ -419,25 +417,29 @@ function ListView({
           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]);
+      });
+    }
+
+    if (reviewWorkflowColumns) {
+      // Make sure the column header label is translated
+      if (typeof reviewWorkflowColumns.metadatas.label !== 'string') {
+        reviewWorkflowColumns.metadatas.label = formatMessage(
+          reviewWorkflowColumns.metadatas.label
+        );
+      }
+
+      formattedHeaders.push(reviewWorkflowColumns);
+    }
+
+    return formattedHeaders;
+  }, [
+    runHookWaterfall,
+    displayedHeaders,
+    layout,
+    reviewWorkflowColumns,
+    hasDraftAndPublish,
+    formatMessage,
+  ]);
 
   const subtitle = canRead
     ? formatMessage(
@@ -580,6 +582,10 @@ function ListView({
                 canCreate={canCreate}
                 canDelete={canDelete}
                 contentType={contentType}
+                features={{
+                  hasDraftAndPublish,
+                  hasReviewWorkflows,
+                }}
                 headers={tableHeaders}
                 rows={data}
                 withBulkActions