@strapi/admin 4.11.3 → 4.12.0-beta.0

package/admin/src/content-manager/components/RelationInput/components/Option.js

@@ -1,10 +1,9 @@
 import React from 'react';
 
-import { Flex, Typography } from '@strapi/design-system';
+import { Flex, Typography, ComboboxOption } from '@strapi/design-system';
 import { pxToRem } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { components } from 'react-select';
 import styled from 'styled-components';
 
 import { getTrad } from '../../../utils';
@@ -19,10 +18,8 @@ const StyledBullet = styled.div`
   border-radius: 50%;
 `;
 
-export const Option = (props) => {
+export const Option = ({ publicationState, mainField, id }) => {
   const { formatMessage } = useIntl();
-  const Component = components.Option;
-  const { publicationState, mainField, id } = props.data;
 
   if (publicationState) {
     const isDraft = publicationState === 'draft';
@@ -37,24 +34,29 @@ export const Option = (props) => {
     const title = isDraft ? formatMessage(draftMessage) : formatMessage(publishedMessage);
 
     return (
-      <Component {...props}>
+      <ComboboxOption value={id} textValue={mainField ?? id}>
         <Flex>
           <StyledBullet title={title} isDraft={isDraft} />
           <Typography ellipsis>{mainField ?? id}</Typography>
         </Flex>
-      </Component>
+      </ComboboxOption>
     );
   }
 
-  return <Component {...props}>{mainField ?? id}</Component>;
+  return (
+    <ComboboxOption value={id} textValue={mainField ?? id}>
+      {mainField ?? id}
+    </ComboboxOption>
+  );
+};
+
+Option.defaultProps = {
+  mainField: undefined,
+  publicationState: undefined,
 };
 
 Option.propTypes = {
-  isFocused: PropTypes.bool.isRequired,
-  data: PropTypes.shape({
-    id: PropTypes.number.isRequired,
-    isDraft: PropTypes.bool,
-    mainField: PropTypes.string,
-    publicationState: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  }).isRequired,
+  id: PropTypes.number.isRequired,
+  mainField: PropTypes.string,
+  publicationState: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
 };

package/admin/src/content-manager/components/RelationInput/components/RelationList.js

@@ -6,8 +6,8 @@ import styled from 'styled-components';
 
 const ShadowBox = styled(Box)`
   position: relative;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden;
+  flex: 1;
 
   &:before,
   &:after {

package/admin/src/content-manager/components/SingleTypeFormWrapper/index.js

@@ -1,4 +1,4 @@
-import { memo, useCallback, useEffect, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useRef, useState, useMemo } from 'react';
 
 import {
   formatContentTypeData,
@@ -16,7 +16,7 @@ import { useQueryClient } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
-import buildQueryString from '../../pages/ListView/utils/buildQueryString';
+import { buildValidGetParams } from '../../pages/ListView/utils';
 import {
   getData,
   getDataSucceeded,
@@ -40,7 +40,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
   const trackUsageRef = useRef(trackUsage);
   const [isCreatingEntry, setIsCreatingEntry] = useState(true);
   const [{ query, rawQuery }] = useQueryParams();
-  const searchToSend = buildQueryString(query);
+  const params = useMemo(() => buildValidGetParams(query), [query]);
   const toggleNotification = useNotification();
   const dispatch = useDispatch();
   const { formatAPIError } = useAPIErrorHandler(getTrad);
@@ -110,8 +110,9 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       setIsCreatingEntry(true);
 
       try {
-        const { data } = await fetchClient.get(getRequestUrl(`${slug}${searchToSend}`), {
+        const { data } = await fetchClient.get(getRequestUrl(slug), {
           cancelToken: source.token,
+          params,
         });
 
         dispatch(getDataSucceeded(cleanReceivedData(data)));
@@ -143,16 +144,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
     fetchData(source);
 
     return () => source.cancel('Operation canceled by the user.');
-  }, [
-    fetchClient,
-    cleanReceivedData,
-    push,
-    slug,
-    dispatch,
-    searchToSend,
-    rawQuery,
-    toggleNotification,
-  ]);
+  }, [fetchClient, cleanReceivedData, push, slug, dispatch, params, rawQuery, toggleNotification]);
 
   const displayErrors = useCallback(
     (err) => {
@@ -166,7 +158,9 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       try {
         trackUsageRef.current('willDeleteEntry', trackerProperty);
 
-        const { data } = await del(getRequestUrl(`${slug}${searchToSend}`));
+        const { data } = await del(getRequestUrl(slug), {
+          params: query,
+        });
 
         toggleNotification({
           type: 'success',
@@ -187,17 +181,17 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         return Promise.reject(err);
       }
     },
-    [del, slug, displayErrors, toggleNotification, searchToSend, dispatch, rawQuery]
+    [del, slug, displayErrors, toggleNotification, query, dispatch, rawQuery]
   );
 
   const onPost = useCallback(
     async (body, trackerProperty) => {
-      const endPoint = getRequestUrl(`${slug}${rawQuery}`);
+      const endPoint = getRequestUrl(slug);
 
       try {
         dispatch(setStatus('submit-pending'));
 
-        const { data } = await put(endPoint, body);
+        const { data } = await put(endPoint, body, { params: query });
 
         trackUsageRef.current('didCreateEntry', trackerProperty);
         toggleNotification({
@@ -232,7 +226,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       displayErrors,
       slug,
       dispatch,
-      rawQuery,
+      query,
       toggleNotification,
       setCurrentStep,
       queryClient,
@@ -263,11 +257,17 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
   const onPublish = useCallback(async () => {
     try {
       trackUsageRef.current('willPublishEntry');
-      const endPoint = getRequestUrl(`${slug}/actions/publish${searchToSend}`);
+      const endPoint = getRequestUrl(`${slug}/actions/publish`);
 
       dispatch(setStatus('publish-pending'));
 
-      const { data } = await post(endPoint);
+      const { data } = await post(
+        endPoint,
+        {},
+        {
+          params: query,
+        }
+      );
 
       trackUsageRef.current('didPublishEntry');
       toggleNotification({
@@ -287,18 +287,18 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
 
       return Promise.reject(err);
     }
-  }, [post, cleanReceivedData, displayErrors, slug, searchToSend, dispatch, toggleNotification]);
+  }, [post, cleanReceivedData, displayErrors, slug, query, dispatch, toggleNotification]);
 
   const onPut = useCallback(
     async (body, trackerProperty) => {
-      const endPoint = getRequestUrl(`${slug}${rawQuery}`);
+      const endPoint = getRequestUrl(slug);
 
       try {
         trackUsageRef.current('willEditEntry', trackerProperty);
 
         dispatch(setStatus('submit-pending'));
 
-        const { data } = await put(endPoint, body);
+        const { data } = await put(endPoint, body, { params: query });
 
         toggleNotification({
           type: 'success',
@@ -325,28 +325,25 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
         return Promise.reject(err);
       }
     },
-    [
-      put,
-      cleanReceivedData,
-      displayErrors,
-      slug,
-      dispatch,
-      rawQuery,
-      toggleNotification,
-      queryClient,
-    ]
+    [put, cleanReceivedData, displayErrors, slug, dispatch, query, toggleNotification, queryClient]
   );
 
   // The publish and unpublish method could be refactored but let's leave the duplication for now
   const onUnpublish = useCallback(async () => {
-    const endPoint = getRequestUrl(`${slug}/actions/unpublish${searchToSend}`);
+    const endPoint = getRequestUrl(`${slug}/actions/unpublish`);
 
     dispatch(setStatus('unpublish-pending'));
 
     try {
       trackUsageRef.current('willUnpublishEntry');
 
-      const { data } = await post(endPoint);
+      const { data } = await post(
+        endPoint,
+        {},
+        {
+          params: query,
+        }
+      );
 
       trackUsageRef.current('didUnpublishEntry');
       toggleNotification({
@@ -361,7 +358,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       dispatch(setStatus('resolved'));
       displayErrors(err);
     }
-  }, [post, cleanReceivedData, toggleNotification, displayErrors, slug, dispatch, searchToSend]);
+  }, [post, cleanReceivedData, toggleNotification, displayErrors, slug, dispatch, query]);
 
   return children({
     componentsDataStructure,

package/admin/src/content-manager/pages/EditSettingsView/components/ModalForm.js

@@ -20,10 +20,6 @@ const FIELD_SIZES = [
   [12, '100%'],
 ];
 
-const TIME_FIELD_OPTIONS = [1, 5, 10, 15, 30, 60];
-
-const TIME_FIELD_TYPES = ['datetime', 'time'];
-
 const ModalForm = ({ onMetaChange, onSizeChange }) => {
   const { formatMessage } = useIntl();
   const { modifiedData, selectedField, attributes, fieldForm } = useLayoutDnd();
@@ -131,33 +127,10 @@ const ModalForm = ({ onMetaChange, onSizeChange }) => {
     </GridItem>
   );
 
-  const hasTimePicker = TIME_FIELD_TYPES.includes(attributes[selectedField].type);
-
-  const timeStepField = (
-    <GridItem col={6} key="step">
-      <Select
-        value={get(fieldForm, ['metadata', 'step'], 1)}
-        name="step"
-        onChange={(value) => onMetaChange({ target: { name: 'step', value } })}
-        label={formatMessage({
-          id: getTrad('containers.SettingPage.editSettings.step.label'),
-          defaultMessage: 'Time interval (minutes)',
-        })}
-      >
-        {TIME_FIELD_OPTIONS.map((value) => (
-          <Option key={value} value={value}>
-            {value}
-          </Option>
-        ))}
-      </Select>
-    </GridItem>
-  );
-
   return (
     <>
       {metaFields}
       {isResizable && sizeField}
-      {hasTimePicker && timeStepField}
     </>
   );
 };

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,57 @@ 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_stage ? (
+                      <ReviewWorkflowsStage
+                        color={data.strapi_stage.color}
+                        name={data.strapi_stage.name}
+                      />
+                    ) : (
+                      <Typography textColor="neutral800">-</Typography>
+                    )}
+                  </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 +287,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,