@strapi/admin 4.12.6 → 4.13.0-alpha.0

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

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react';
+import React, { forwardRef, useRef, useState } from 'react';
 
 import { Box, Flex, Typography } from '@strapi/design-system';
 import { prefixFileUrlWithBackendUrl, useLibrary } from '@strapi/helper-plugin';
@@ -30,160 +30,155 @@ const TypographyAsterisk = styled(Typography)`
   line-height: 0;
 `;
 
-const Wysiwyg = ({
-  hint,
-  disabled,
-  error,
-  intlLabel,
-  labelAction,
-  name,
-  onChange,
-  placeholder,
-  value,
-  required,
-}) => {
-  const { formatMessage } = useIntl();
-  const textareaRef = useRef(null);
-  const editorRef = useRef(null);
-  const [isPreviewMode, setIsPreviewMode] = useState(false);
-  const [mediaLibVisible, setMediaLibVisible] = useState(false);
-  const [isExpandMode, setIsExpandMode] = useState(false);
-  const { components } = useLibrary();
-
-  const MediaLibraryDialog = components['media-library'];
-
-  const handleToggleMediaLib = () => setMediaLibVisible((prev) => !prev);
-  const handleTogglePreviewMode = () => setIsPreviewMode((prev) => !prev);
-  const handleToggleExpand = () => {
-    setIsPreviewMode(false);
-    setIsExpandMode((prev) => !prev);
-  };
-
-  const handleActionClick = (value, currentEditorRef, togglePopover) => {
-    switch (value) {
-      case 'Link':
-      case 'Strikethrough': {
-        markdownHandler(currentEditorRef, value);
-        togglePopover();
-        break;
+const Wysiwyg = forwardRef(
+  (
+    { hint, disabled, error, intlLabel, labelAction, name, onChange, placeholder, value, required },
+    forwardedRef
+  ) => {
+    const { formatMessage } = useIntl();
+    const textareaRef = useRef(null);
+    const editorRef = useRef(null);
+    const [isPreviewMode, setIsPreviewMode] = useState(false);
+    const [mediaLibVisible, setMediaLibVisible] = useState(false);
+    const [isExpandMode, setIsExpandMode] = useState(false);
+    const { components } = useLibrary();
+
+    const MediaLibraryDialog = components['media-library'];
+
+    const handleToggleMediaLib = () => setMediaLibVisible((prev) => !prev);
+    const handleTogglePreviewMode = () => setIsPreviewMode((prev) => !prev);
+    const handleToggleExpand = () => {
+      setIsPreviewMode(false);
+      setIsExpandMode((prev) => !prev);
+    };
+
+    const handleActionClick = (value, currentEditorRef, togglePopover) => {
+      switch (value) {
+        case 'Link':
+        case 'Strikethrough': {
+          markdownHandler(currentEditorRef, value);
+          togglePopover();
+          break;
+        }
+        case 'Code':
+        case 'Quote': {
+          quoteAndCodeHandler(currentEditorRef, value);
+          togglePopover();
+          break;
+        }
+        case 'Bold':
+        case 'Italic':
+        case 'Underline': {
+          markdownHandler(currentEditorRef, value);
+          break;
+        }
+        case 'BulletList':
+        case 'NumberList': {
+          listHandler(currentEditorRef, value);
+          togglePopover();
+          break;
+        }
+        case 'h1':
+        case 'h2':
+        case 'h3':
+        case 'h4':
+        case 'h5':
+        case 'h6': {
+          titleHandler(currentEditorRef, value);
+          break;
+        }
+        default: {
+          // Nothing
+        }
       }
-      case 'Code':
-      case 'Quote': {
-        quoteAndCodeHandler(currentEditorRef, value);
-        togglePopover();
-        break;
-      }
-      case 'Bold':
-      case 'Italic':
-      case 'Underline': {
-        markdownHandler(currentEditorRef, value);
-        break;
-      }
-      case 'BulletList':
-      case 'NumberList': {
-        listHandler(currentEditorRef, value);
-        togglePopover();
-        break;
-      }
-      case 'h1':
-      case 'h2':
-      case 'h3':
-      case 'h4':
-      case 'h5':
-      case 'h6': {
-        titleHandler(currentEditorRef, value);
-        break;
-      }
-      default: {
-        // Nothing
-      }
-    }
-  };
-
-  const handleSelectAssets = (files) => {
-    const formattedFiles = files.map((f) => ({
-      alt: f.alternativeText || f.name,
-      url: prefixFileUrlWithBackendUrl(f.url),
-      mime: f.mime,
-    }));
-
-    insertFile(editorRef, formattedFiles);
-    setMediaLibVisible(false);
-  };
-
-  const formattedPlaceholder = placeholder
-    ? formatMessage(
-        { id: placeholder.id, defaultMessage: placeholder.defaultMessage },
-        { ...placeholder.values }
-      )
-    : '';
-
-  const label = intlLabel.id
-    ? formatMessage(
-        { id: intlLabel.id, defaultMessage: intlLabel.defaultMessage },
-        { ...intlLabel.values }
-      )
-    : name;
-
-  return (
-    <>
-      <Flex direction="column" alignItems="stretch" gap={1}>
-        <Flex gap={1}>
-          <Typography variant="pi" fontWeight="bold" textColor="neutral800">
-            {label}
-            {required && <TypographyAsterisk textColor="danger600">*</TypographyAsterisk>}
-          </Typography>
-          {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
-        </Flex>
-
-        <EditorLayout
-          isExpandMode={isExpandMode}
-          error={error}
-          previewContent={value}
-          onCollapse={handleToggleExpand}
-        >
-          <WysiwygNav
-            isExpandMode={isExpandMode}
-            editorRef={editorRef}
-            isPreviewMode={isPreviewMode}
-            onActionClick={handleActionClick}
-            onToggleMediaLib={handleToggleMediaLib}
-            onTogglePreviewMode={isExpandMode ? undefined : handleTogglePreviewMode}
-            disabled={disabled}
-          />
-
-          <Editor
-            disabled={disabled}
+    };
+
+    const handleSelectAssets = (files) => {
+      const formattedFiles = files.map((f) => ({
+        alt: f.alternativeText || f.name,
+        url: prefixFileUrlWithBackendUrl(f.url),
+        mime: f.mime,
+      }));
+
+      insertFile(editorRef, formattedFiles);
+      setMediaLibVisible(false);
+    };
+
+    const formattedPlaceholder = placeholder
+      ? formatMessage(
+          { id: placeholder.id, defaultMessage: placeholder.defaultMessage },
+          { ...placeholder.values }
+        )
+      : '';
+
+    const label = intlLabel.id
+      ? formatMessage(
+          { id: intlLabel.id, defaultMessage: intlLabel.defaultMessage },
+          { ...intlLabel.values }
+        )
+      : name;
+
+    return (
+      <>
+        <Flex direction="column" alignItems="stretch" gap={1}>
+          <Flex gap={1}>
+            <Typography variant="pi" fontWeight="bold" textColor="neutral800">
+              {label}
+              {required && <TypographyAsterisk textColor="danger600">*</TypographyAsterisk>}
+            </Typography>
+            {labelAction && <LabelAction paddingLeft={1}>{labelAction}</LabelAction>}
+          </Flex>
+
+          <EditorLayout
             isExpandMode={isExpandMode}
-            editorRef={editorRef}
             error={error}
-            isPreviewMode={isPreviewMode}
-            name={name}
-            onChange={onChange}
-            placeholder={formattedPlaceholder}
-            textareaRef={textareaRef}
-            value={value}
-          />
-
-          {!isExpandMode && <WysiwygFooter onToggleExpand={handleToggleExpand} />}
-        </EditorLayout>
-        <Hint hint={hint} name={name} error={error} />
-      </Flex>
-
-      {error && (
-        <Box paddingTop={1}>
-          <Typography variant="pi" textColor="danger600" data-strapi-field-error>
-            {error}
-          </Typography>
-        </Box>
-      )}
-
-      {mediaLibVisible && (
-        <MediaLibraryDialog onClose={handleToggleMediaLib} onSelectAssets={handleSelectAssets} />
-      )}
-    </>
-  );
-};
+            previewContent={value}
+            onCollapse={handleToggleExpand}
+          >
+            <WysiwygNav
+              isExpandMode={isExpandMode}
+              editorRef={editorRef}
+              isPreviewMode={isPreviewMode}
+              onActionClick={handleActionClick}
+              onToggleMediaLib={handleToggleMediaLib}
+              onTogglePreviewMode={isExpandMode ? undefined : handleTogglePreviewMode}
+              disabled={disabled}
+            />
+
+            <Editor
+              disabled={disabled}
+              isExpandMode={isExpandMode}
+              editorRef={editorRef}
+              error={error}
+              isPreviewMode={isPreviewMode}
+              name={name}
+              onChange={onChange}
+              placeholder={formattedPlaceholder}
+              textareaRef={textareaRef}
+              value={value}
+              ref={forwardedRef}
+            />
+
+            {!isExpandMode && <WysiwygFooter onToggleExpand={handleToggleExpand} />}
+          </EditorLayout>
+          <Hint hint={hint} name={name} error={error} />
+        </Flex>
+
+        {error && (
+          <Box paddingTop={1}>
+            <Typography variant="pi" textColor="danger600" data-strapi-field-error>
+              {error}
+            </Typography>
+          </Box>
+        )}
+
+        {mediaLibVisible && (
+          <MediaLibraryDialog onClose={handleToggleMediaLib} onSelectAssets={handleSelectAssets} />
+        )}
+      </>
+    );
+  }
+);
 
 Wysiwyg.defaultProps = {
   disabled: false,

package/admin/src/content-manager/hooks/useAllowedAttributes.js

@@ -0,0 +1,47 @@
+import { useRBACProvider, findMatchingPermissions } from '@strapi/helper-plugin';
+
+const NOT_ALLOWED_FILTERS = ['json', 'component', 'media', 'richtext', 'dynamiczone', 'password'];
+const TIMESTAMPS = ['createdAt', 'updatedAt'];
+const CREATOR_ATTRIBUTES = ['createdBy', 'updatedBy'];
+
+export const useAllowedAttributes = (contentType, slug) => {
+  const { allPermissions } = useRBACProvider();
+
+  const readPermissionsForSlug = findMatchingPermissions(allPermissions, [
+    {
+      action: 'plugin::content-manager.explorer.read',
+      subject: slug,
+    },
+  ]);
+
+  const canReadAdminUsers =
+    findMatchingPermissions(allPermissions, [
+      {
+        action: 'admin::users.read',
+        subject: null,
+      },
+    ]).length > 0;
+
+  const attributesWithReadPermissions = readPermissionsForSlug?.[0]?.properties?.fields ?? [];
+
+  const allowedAttributes = attributesWithReadPermissions.filter((attr) => {
+    const current = contentType?.attributes?.[attr] ?? {};
+
+    if (!current.type) {
+      return false;
+    }
+
+    if (NOT_ALLOWED_FILTERS.includes(current.type)) {
+      return false;
+    }
+
+    return true;
+  });
+
+  return [
+    'id',
+    ...allowedAttributes,
+    ...TIMESTAMPS,
+    ...(canReadAdminUsers ? CREATOR_ATTRIBUTES : []),
+  ];
+};

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

@@ -61,7 +61,7 @@ function renderDraglayerItem({ type, item }) {
   }
 }
 
-export const ContentManger = () => {
+const App = () => {
   const contentTypeMatch = useRouteMatch(`/content-manager/:kind/:uid`);
   const { status, collectionTypeLinks, singleTypeLinks, models, refetchData } =
     useContentManagerInitData();
@@ -123,10 +123,6 @@ export const ContentManger = () => {
 
   return (
     <Layout sideNav={<LeftMenu />}>
-      <Helmet
-        title={formatMessage({ id: getTrad('plugin.name'), defaultMessage: 'Content Manager' })}
-      />
-
       <DragLayer renderItem={renderDraglayerItem} />
       <ModelsContext.Provider value={{ refetchData }}>
         <Switch>
@@ -153,3 +149,18 @@ export const ContentManger = () => {
     </Layout>
   );
 };
+
+export { App };
+
+export default function () {
+  const { formatMessage } = useIntl();
+
+  return (
+    <>
+      <Helmet
+        title={formatMessage({ id: getTrad('plugin.name'), defaultMessage: 'Content Manager' })}
+      />
+      <App />
+    </>
+  );
+}

package/admin/src/content-manager/pages/EditView/Information/index.js

@@ -5,8 +5,7 @@ import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import { getFullName } from '../../../../utils/getFullName';
-import { getTrad } from '../../../utils';
+import { getTrad, getDisplayName } from '../../../utils';
 
 import getUnits from './utils/getUnits';
 
@@ -42,9 +41,13 @@ const KeyValuePair = ({ label, value }) => {
   );
 };
 
+KeyValuePair.defaultProps = {
+  value: '-',
+};
+
 KeyValuePair.propTypes = {
   label: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
+  value: PropTypes.string,
 };
 
 const Body = () => {
@@ -53,18 +56,16 @@ const Body = () => {
   const currentTime = useRef(Date.now());
 
   const getFieldInfo = (atField, byField) => {
-    const { firstname, lastname, username } = initialData[byField] ?? {};
+    const user = initialData[byField] ?? {};
 
-    const userFirstname = firstname ?? '';
-    const userLastname = lastname ?? '';
-    const user = username ?? getFullName(userFirstname, userLastname);
+    const displayName = getDisplayName(user, formatMessage);
     const timestamp = initialData[atField] ? new Date(initialData[atField]).getTime() : Date.now();
     const elapsed = timestamp - currentTime.current;
     const { unit, value } = getUnits(-elapsed);
 
     return {
       at: formatRelativeTime(value, unit, { numeric: 'auto' }),
-      by: isCreatingEntry ? '-' : user,
+      by: isCreatingEntry ? '-' : displayName,
     };
   };
 

package/admin/src/content-manager/pages/ListSettingsView/components/Settings.js

@@ -10,14 +10,41 @@ import {
   ToggleInput,
   Typography,
 } from '@strapi/design-system';
+import { useCollator } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
+import { useEnterprise } from '../../../../hooks/useEnterprise';
 import { getTrad } from '../../../utils';
 
-export const Settings = ({ modifiedData, onChange, sortOptions }) => {
-  const { formatMessage } = useIntl();
-  const { settings, metadatas } = modifiedData;
+export const Settings = ({
+  contentTypeOptions,
+  modifiedData,
+  onChange,
+  sortOptions: sortOptionsCE,
+}) => {
+  const { formatMessage, locale } = useIntl();
+  const formatter = useCollator(locale, {
+    sensitivity: 'base',
+  });
+  const sortOptions = useEnterprise(
+    sortOptionsCE,
+    async () =>
+      (await import('../../../../../../ee/admin/content-manager/pages/ListSettingsView/constants'))
+        .REVIEW_WORKFLOW_STAGE_SORT_OPTION_NAME,
+    {
+      combine(ceOptions, eeOption) {
+        return [...ceOptions, { ...eeOption, label: formatMessage(eeOption.label) }];
+      },
+
+      defaultValue: sortOptionsCE,
+
+      enabled: !!contentTypeOptions?.reviewWorkflows,
+    }
+  );
+
+  const sortOptionsSorted = sortOptions.sort((a, b) => formatter.compare(a.label, b.label));
+  const { settings } = modifiedData;
 
   return (
     <Flex direction="column" alignItems="stretch" gap={4}>
@@ -129,9 +156,9 @@ export const Settings = ({ modifiedData, onChange, sortOptions }) => {
             name="settings.defaultSortBy"
             value={modifiedData.settings.defaultSortBy || ''}
           >
-            {sortOptions.map((sortBy) => (
-              <Option key={sortBy} value={sortBy}>
-                {metadatas[sortBy].list.label || sortBy}
+            {sortOptionsSorted.map(({ value, label }) => (
+              <Option key={value} value={value}>
+                {label}
               </Option>
             ))}
           </Select>
@@ -164,7 +191,13 @@ Settings.defaultProps = {
 };
 
 Settings.propTypes = {
+  contentTypeOptions: PropTypes.object.isRequired,
   modifiedData: PropTypes.object,
   onChange: PropTypes.func.isRequired,
-  sortOptions: PropTypes.array,
+  sortOptions: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string,
+      label: PropTypes.string,
+    }).isRequired
+  ),
 };

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

@@ -47,7 +47,7 @@ export const ListSettingsView = ({ layout, slug }) => {
 
   const isModalFormOpen = Object.keys(fieldForm).length !== 0;
 
-  const { attributes } = layout;
+  const { attributes, options } = layout;
   const displayedFields = modifiedData.layouts.list;
 
   const goBackUrl = () => {
@@ -169,7 +169,10 @@ export const ListSettingsView = ({ layout, slug }) => {
 
   const sortOptions = Object.entries(attributes)
     .filter(([, attribute]) => !EXCLUDED_SORT_ATTRIBUTE_TYPES.includes(attribute.type))
-    .map(([name]) => name);
+    .map(([name]) => ({
+      value: name,
+      label: layout.metadatas[name].list.label,
+    }));
 
   const move = (originalIndex, atIndex) => {
     dispatch({
@@ -225,6 +228,7 @@ export const ListSettingsView = ({ layout, slug }) => {
               paddingRight={7}
             >
               <Settings
+                contentTypeOptions={options}
                 modifiedData={modifiedData}
                 onChange={handleChange}
                 sortOptions={sortOptions}

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

@@ -32,7 +32,7 @@ import { useSelector } from 'react-redux';
 import { Link, useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 
-import { formatAPIErrors } from '../../../../../../utils/formatAPIErrors';
+import formatAPIError from '../../../../../../utils/formatAPIErrors';
 import { getTrad, createYupSchema } from '../../../../../utils';
 import { listViewDomain } from '../../../selectors';
 import { Body } from '../../Body';
@@ -301,7 +301,7 @@ const SelectedEntriesModalContent = ({
       onError(error) {
         toggleNotification({
           type: 'warning',
-          message: formatAPIErrors(error),
+          message: formatAPIError(error),
         });
       },
     }