@strapi/admin 4.12.7 → 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/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';
-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/FieldPicker/index.js

@@ -1,81 +1,93 @@
 import React from 'react';
 
-import { Select, Option, Box } from '@strapi/design-system';
-import { useTracking } from '@strapi/helper-plugin';
+import { Flex, BaseCheckbox, TextButton, Typography } from '@strapi/design-system';
+import { useCollator, useTracking } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
+import styled from 'styled-components';
 
-import { getTrad, checkIfAttributeIsDisplayable } from '../../../../utils';
-import { onChangeListHeaders } from '../../actions';
+import { checkIfAttributeIsDisplayable } from '../../../../utils';
+import { onChangeListHeaders, onResetListHeaders } from '../../actions';
 import { selectDisplayedHeaders } from '../../selectors';
 
+const ChackboxWrapper = styled(Flex)`
+  :hover {
+    background-color: ${(props) => props.theme.colors.primary100};
+  }
+`;
+
 export const FieldPicker = ({ layout }) => {
   const dispatch = useDispatch();
   const displayedHeaders = useSelector(selectDisplayedHeaders);
   const { trackUsage } = useTracking();
-  const { formatMessage } = useIntl();
-
-  const allAllowedHeaders = getAllAllowedHeaders(layout.contentType.attributes).map((attrName) => {
-    const metadatas = layout.contentType.metadatas[attrName].list;
-
-    return {
-      name: attrName,
-      intlLabel: { id: metadatas.label, defaultMessage: metadatas.label },
-    };
+  const { formatMessage, locale } = useIntl();
+  const formatter = useCollator(locale, {
+    sensitivity: 'base',
   });
 
-  const values = displayedHeaders.map(({ name }) => name);
+  const columns = Object.keys(layout.contentType.attributes)
+    .filter((name) => checkIfAttributeIsDisplayable(layout.contentType.attributes[name]))
+    .map((name) => ({
+      name,
+      label: layout.contentType.metadatas[name].list.label,
+    }))
+    .sort((a, b) => formatter.compare(a.label, b.label));
 
-  const handleChange = (updatedValues) => {
-    trackUsage('didChangeDisplayedFields');
+  const displayedHeaderKeys = displayedHeaders.map(({ name }) => name);
 
-    // removing a header
-    if (updatedValues.length < values.length) {
-      const removedHeader = values.filter((value) => {
-        return updatedValues.indexOf(value) === -1;
-      });
-
-      dispatch(onChangeListHeaders({ name: removedHeader[0], value: true }));
-    } else {
-      const addedHeader = updatedValues.filter((value) => {
-        return values.indexOf(value) === -1;
-      });
+  const handleChange = (name) => {
+    trackUsage('didChangeDisplayedFields');
+    dispatch(onChangeListHeaders({ name, value: displayedHeaderKeys.includes(name) }));
+  };
 
-      dispatch(onChangeListHeaders({ name: addedHeader[0], value: false }));
-    }
+  const handleReset = () => {
+    dispatch(onResetListHeaders());
   };
 
   return (
-    <Box paddingTop={1} paddingBottom={1}>
-      <Select
-        aria-label="change displayed fields"
-        value={values}
-        onChange={handleChange}
-        customizeContent={(values) =>
-          formatMessage(
-            {
-              id: getTrad('select.currently.selected'),
-              defaultMessage: '{count} currently selected',
-            },
-            { count: values.length }
-          )
-        }
-        multi
-        size="S"
-      >
-        {allAllowedHeaders.map((header) => {
+    <Flex as="fieldset" direction="column" alignItems="stretch" gap={3}>
+      <Flex justifyContent="space-between">
+        <Typography as="legend" variant="pi" fontWeight="bold">
+          {formatMessage({
+            id: 'containers.ListPage.displayedFields',
+            defaultMessage: 'Displayed fields',
+          })}
+        </Typography>
+
+        <TextButton onClick={handleReset}>
+          {formatMessage({
+            id: 'app.components.Button.reset',
+            defaultMessage: 'Reset',
+          })}
+        </TextButton>
+      </Flex>
+
+      <Flex direction="column" alignItems="stretch">
+        {columns.map((header) => {
+          const isActive = displayedHeaderKeys.includes(header.name);
+
           return (
-            <Option key={header.name} value={header.name}>
-              {formatMessage({
-                id: header.intlLabel.id || header.name,
-                defaultMessage: header.intlLabel.defaultMessage || header.name,
-              })}
-            </Option>
+            <ChackboxWrapper
+              wrap="wrap"
+              gap={2}
+              as="label"
+              background={isActive ? 'primary100' : 'transparent'}
+              hasRadius
+              padding={2}
+              key={header.name}
+            >
+              <BaseCheckbox
+                onChange={() => handleChange(header.name)}
+                value={isActive}
+                name={header.name}
+              />
+              <Typography fontSize={1}>{header.label}</Typography>
+            </ChackboxWrapper>
           );
         })}
-      </Select>
-    </Box>
+      </Flex>
+    </Flex>
   );
 };
 
@@ -92,17 +104,3 @@ FieldPicker.propTypes = {
     }).isRequired,
   }).isRequired,
 };
-
-const getAllAllowedHeaders = (attributes) => {
-  const allowedAttributes = Object.keys(attributes).reduce((acc, current) => {
-    const attribute = attributes[current];
-
-    if (checkIfAttributeIsDisplayable(attribute)) {
-      acc.push(current);
-    }
-
-    return acc;
-  }, []);
-
-  return allowedAttributes.sort();
-};