@strapi/admin 4.12.2 → 4.13.0-beta.0

package/admin/src/content-manager/components/DynamicTable/CellContent/ReviewWorkflowsStage/getTableColumns.js

@@ -0,0 +1,2 @@
+// Overwritten in EE
+export default () => [];

package/admin/src/content-manager/components/EditViewDataManagerProvider/reducer.js

@@ -239,7 +239,14 @@ const reducer = (state, action) =>
           (value) => {
             return value.type === 'relation';
           },
-          (_, { path }) => {
+          (value, { path }) => {
+            const relationFieldName = path[path.length - 1];
+
+            // When editing, we don't want to fetch the relations with creator fields because we already have it
+            if (value && (relationFieldName === 'createdBy' || relationFieldName === 'updatedBy')) {
+              return value;
+            }
+
             if (state.modifiedData?.id === data.id && get(state.modifiedData, path)) {
               return get(state.modifiedData, path);
             }

package/admin/src/content-manager/components/Filter/CustomInputs/AdminUsersFilter.js

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { Combobox, ComboboxOption } from '@strapi/design-system';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
+import { useAdminUsers } from '../../../../hooks/useAdminUsers';
+import { getDisplayName } from '../../../utils';
+
+export const AdminUsersFilter = ({ value, onChange }) => {
+  const { formatMessage } = useIntl();
+  const { users, isLoading } = useAdminUsers();
+
+  return (
+    <Combobox
+      value={value}
+      aria-label={formatMessage({
+        id: 'content-manager.components.Filters.usersSelect.label',
+        defaultMessage: 'Search and select an user to filter',
+      })}
+      onChange={onChange}
+      loading={isLoading}
+    >
+      {users.map((user) => {
+        return (
+          <ComboboxOption key={user.id} value={user.id.toString()}>
+            {getDisplayName(user, formatMessage)}
+          </ComboboxOption>
+        );
+      })}
+    </Combobox>
+  );
+};
+
+AdminUsersFilter.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.string,
+};
+
+AdminUsersFilter.defaultProps = {
+  value: '',
+};

package/admin/src/content-manager/components/{AttributeFilter/Filters.js → Filter/Filter.js}

@@ -1,12 +1,12 @@
 import React, { useRef, useState } from 'react';
 
-import { Box, Button } from '@strapi/design-system';
+import { Button, Box } from '@strapi/design-system';
 import { FilterListURLQuery, FilterPopoverURLQuery, useTracking } from '@strapi/helper-plugin';
-import { Filter } from '@strapi/icons';
+import { Filter as FilterIcon } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-const Filters = ({ displayedFilters }) => {
+export const Filter = ({ displayedFilters }) => {
   const [isVisible, setIsVisible] = useState(false);
   const { formatMessage } = useIntl();
   const buttonRef = useRef();
@@ -25,7 +25,7 @@ const Filters = ({ displayedFilters }) => {
         <Button
           variant="tertiary"
           ref={buttonRef}
-          startIcon={<Filter />}
+          startIcon={<FilterIcon />}
           onClick={handleToggle}
           size="S"
         >
@@ -45,7 +45,7 @@ const Filters = ({ displayedFilters }) => {
   );
 };
 
-Filters.propTypes = {
+Filter.propTypes = {
   displayedFilters: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string.isRequired,
@@ -54,5 +54,3 @@ Filters.propTypes = {
     })
   ).isRequired,
 };
-
-export default Filters;

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

@@ -0,0 +1 @@
+export * from './Filter';

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/hooks/useSyncRbac/index.js

@@ -6,9 +6,10 @@ import { resetPermissions, setPermissions } from './actions';
 import { selectCollectionTypePermissions, selectPermissions } from './selectors';
 
 const useSyncRbac = (query, collectionTypeUID, containerName = 'listView') => {
+  const dispatch = useDispatch();
+
   const collectionTypesRelatedPermissions = useSelector(selectCollectionTypePermissions);
   const permissions = useSelector(selectPermissions);
-  const dispatch = useDispatch();
 
   const relatedPermissions = collectionTypesRelatedPermissions[collectionTypeUID];
 
@@ -24,7 +25,14 @@ const useSyncRbac = (query, collectionTypeUID, containerName = 'listView') => {
     return () => {};
   }, [relatedPermissions, dispatch, query, containerName]);
 
-  return permissions;
+  // Check if the permissions are related to the current collectionTypeUID
+  const isPermissionMismatch =
+    permissions?.some((permission) => permission.subject !== collectionTypeUID) ?? true;
+
+  return {
+    isValid: permissions && !isPermissionMismatch,
+    permissions,
+  };
 };
 
 export default useSyncRbac;

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/EditViewLayoutManager/index.js

@@ -16,7 +16,7 @@ const EditViewLayoutManager = ({ layout, ...rest }) => {
   const dispatch = useDispatch();
   const [{ query }] = useQueryParams();
   const { runHookWaterfall } = useStrapiApp();
-  const permissions = useSyncRbac(query, rest.slug, 'editView');
+  const { permissions, isValid: isValidPermissions } = useSyncRbac(query, rest.slug, 'editView');
 
   useEffect(() => {
     // Allow the plugins to extend the edit view layout
@@ -29,7 +29,7 @@ const EditViewLayoutManager = ({ layout, ...rest }) => {
     };
   }, [layout, dispatch, query, runHookWaterfall]);
 
-  if (!currentLayout || !permissions) {
+  if (!currentLayout || !isValidPermissions) {
     return <LoadingIndicatorPage />;
   }
 

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

@@ -55,7 +55,7 @@ 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 = () => {
@@ -179,7 +179,10 @@ 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({
@@ -235,6 +238,7 @@ 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();
-};

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

@@ -0,0 +1,74 @@
+import React from 'react';
+
+import { Flex, IconButton, Popover } from '@strapi/design-system';
+import { CheckPermissions, LinkButton } from '@strapi/helper-plugin';
+import { Cog, Layer } from '@strapi/icons';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { useSelector } from 'react-redux';
+
+import { selectAdminPermissions } from '../../../../../pages/App/selectors';
+import { FieldPicker } from '../FieldPicker';
+
+export const ViewSettingsMenu = ({ slug, layout }) => {
+  const [isVisible, setIsVisible] = React.useState(false);
+  const cogButtonRef = React.useRef();
+  const permissions = useSelector(selectAdminPermissions);
+  const { formatMessage } = useIntl();
+
+  const handleToggle = () => {
+    setIsVisible((prev) => !prev);
+  };
+
+  return (
+    <>
+      <IconButton
+        icon={<Cog />}
+        label={formatMessage({
+          id: 'components.ViewSettings.tooltip',
+          defaultMessage: 'View Settings',
+        })}
+        ref={cogButtonRef}
+        onClick={handleToggle}
+      />
+      {isVisible && (
+        <Popover placement="bottom-end" source={cogButtonRef} onDismiss={handleToggle} padding={2}>
+          <Flex alignItems="stretch" direction="column" gap={3}>
+            <CheckPermissions
+              permissions={permissions.contentManager.collectionTypesConfigurations}
+            >
+              <LinkButton
+                size="S"
+                startIcon={<Layer />}
+                to={`${slug}/configurations/list`}
+                variant="secondary"
+              >
+                {formatMessage({
+                  id: 'app.links.configure-view',
+                  defaultMessage: 'Configure the view',
+                })}
+              </LinkButton>
+            </CheckPermissions>
+
+            <FieldPicker layout={layout} />
+          </Flex>
+        </Popover>
+      )}
+    </>
+  );
+};
+
+ViewSettingsMenu.propTypes = {
+  slug: PropTypes.string.isRequired,
+  layout: PropTypes.shape({
+    contentType: PropTypes.shape({
+      attributes: PropTypes.object.isRequired,
+      metadatas: PropTypes.object.isRequired,
+      layouts: PropTypes.shape({
+        list: PropTypes.array.isRequired,
+      }).isRequired,
+      options: PropTypes.object.isRequired,
+      settings: PropTypes.object.isRequired,
+    }).isRequired,
+  }).isRequired,
+};