@strapi/admin 4.3.2 → 4.3.5

package/admin/src/components/PrivateRoute/index.js

@@ -20,7 +20,7 @@ const PrivateRoute = ({ component: Component, path, ...rest }) => {
   return (
     <Route
       path={path}
-      render={props =>
+      render={(props) =>
         auth.getToken() !== null ? (
           <Component {...rest} {...props} />
         ) : (

package/admin/src/components/RBACProvider/actions.js

@@ -2,7 +2,7 @@ import { RESET_STORE, SET_PERMISSIONS } from './constants';
 
 const resetStore = () => ({ type: RESET_STORE });
 
-const setPermissions = permissions => ({
+const setPermissions = (permissions) => ({
   type: SET_PERMISSIONS,
   permissions,
 });

package/admin/src/components/RBACProvider/index.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { resetStore, setPermissions } from './actions';
 
 const RBACProvider = ({ children, permissions, refetchPermissions }) => {
-  const { allPermissions } = useSelector(state => state.rbacProvider);
+  const { allPermissions } = useSelector((state) => state.rbacProvider);
 
   const dispatch = useDispatch();
 

package/admin/src/components/RBACProvider/reducer.js

@@ -18,12 +18,12 @@ const initialState = {
 
 const reducer = (state = initialState, action) =>
   // eslint-disable-next-line consistent-return
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case SET_PERMISSIONS: {
         draftState.allPermissions = action.permissions;
         draftState.collectionTypesRelatedPermissions = action.permissions
-          .filter(perm => perm.subject)
+          .filter((perm) => perm.subject)
           .reduce((acc, current) => {
             const { subject, action } = current;
 

package/admin/src/components/ThemeToggleProvider/index.js

@@ -20,7 +20,7 @@ const getDefaultTheme = () => {
 const ThemeToggleProvider = ({ children, themes }) => {
   const [currentTheme, setCurrentTheme] = useState(getDefaultTheme());
 
-  const handleChangeTheme = nextTheme => {
+  const handleChangeTheme = (nextTheme) => {
     setCurrentTheme(nextTheme);
     localStorage.setItem(THEME_KEY, nextTheme);
   };

package/admin/src/components/UpgradePlanModal/index.js

@@ -73,7 +73,7 @@ const UpgradePlanModal = ({ onClose, isOpen }) => {
       <UpgradeWrapper onClick={onClose}>
         <FocusTrap onEscape={onClose}>
           <UpgradeContainer
-            onClick={e => e.stopPropagation()}
+            onClick={(e) => e.stopPropagation()}
             aria-labelledby="upgrade-plan"
             background="neutral0"
             hasRadius

package/admin/src/content-manager/components/AttributeFilter/Filters.js

@@ -16,7 +16,7 @@ const Filters = ({ displayedFilters }) => {
     if (!isVisible) {
       trackUsage('willFilterEntries');
     }
-    setIsVisible(prev => !prev);
+    setIsVisible((prev) => !prev);
   };
 
   return (

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

@@ -17,7 +17,7 @@ const useAllowedAttributes = (contentType, slug) => {
   const readPermissionForAttr = get(readPermissionsForSlug, ['0', 'properties', 'fields'], []);
   const attributesArray = Object.keys(get(contentType, ['attributes']), {});
   const allowedAttributes = attributesArray
-    .filter(attr => {
+    .filter((attr) => {
       const current = get(contentType, ['attributes', attr], {});
 
       if (!current.type) {

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

@@ -1,11 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
 import useAllowedAttributes from './hooks/useAllowedAttributes';
 import Filters from './Filters';
 
 const AttributeFilter = ({ contentType, slug, metadatas }) => {
+  const { formatMessage } = useIntl();
   const allowedAttributes = useAllowedAttributes(contentType, slug);
-  const displayedFilters = allowedAttributes.map(name => {
+  const displayedFilters = allowedAttributes.map((name) => {
     const attribute = contentType.attributes[name];
     const { type, enum: options } = attribute;
 
@@ -18,7 +20,7 @@ const AttributeFilter = ({ contentType, slug, metadatas }) => {
 
     return {
       name,
-      metadatas: { label },
+      metadatas: { label: formatMessage({ id: label, defaultMessage: label }) },
       fieldSchema: { type, options, mainField },
       trackedEvent,
     };

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

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
 import { Wrapper, Sub } from './components';
 
-const renderMsg = msg => <p>{msg}</p>;
+const renderMsg = (msg) => <p>{msg}</p>;
 
 const Block = ({ children, description, style, title }) => (
   <div className="col-md-12">

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

@@ -40,13 +40,8 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
   const { push, replace } = useHistory();
   const [{ rawQuery }] = useQueryParams();
   const dispatch = useDispatch();
-  const {
-    componentsDataStructure,
-    contentTypeDataStructure,
-    data,
-    isLoading,
-    status,
-  } = useSelector(selectCrudReducer);
+  const { componentsDataStructure, contentTypeDataStructure, data, isLoading, status } =
+    useSelector(selectCrudReducer);
   const redirectionLink = useFindRedirectionLink(slug);
 
   const isMounted = useRef(true);
@@ -65,7 +60,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
   }, [slug, id, isCreatingEntry, origin]);
 
   const cleanClonedData = useCallback(
-    data => {
+    (data) => {
       if (!origin) {
         return data;
       }
@@ -81,7 +76,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
     [origin]
   );
 
-  const cleanReceivedData = useCallback(data => {
+  const cleanReceivedData = useCallback((data) => {
     const cleaned = removePasswordFieldsFromData(
       data,
       allLayoutDataRef.current.contentType,
@@ -136,7 +131,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
     const CancelToken = axios.CancelToken;
     const source = CancelToken.source();
 
-    const fetchData = async source => {
+    const fetchData = async (source) => {
       dispatch(getData());
 
       try {
@@ -201,7 +196,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
   ]);
 
   const displayErrors = useCallback(
-    err => {
+    (err) => {
       const errorPayload = err.response.data;
       let errorMessage = get(errorPayload, ['error', 'message'], 'Bad Request');
 
@@ -218,7 +213,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
   );
 
   const onDelete = useCallback(
-    async trackerProperty => {
+    async (trackerProperty) => {
       try {
         trackUsageRef.current('willDeleteEntry', trackerProperty);
 

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

@@ -36,7 +36,7 @@ function getItemStyles(initialOffset, currentOffset, mouseOffset) {
 
 const CustomDragLayer = () => {
   const { itemType, isDragging, item, initialOffset, currentOffset, mouseOffset } = useDragLayer(
-    monitor => ({
+    (monitor) => ({
       item: monitor.getItem(),
       itemType: monitor.getItemType(),
       initialOffset: monitor.getInitialSourceClientOffset(),

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

@@ -2,7 +2,6 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import toString from 'lodash/toString';
 import parseISO from 'date-fns/parseISO';
-import { getNumberOfDecimals } from './utils/getNumberOfDecimals';
 
 const CellValue = ({ type, value }) => {
   const { formatDate, formatTime, formatNumber } = useIntl();
@@ -30,11 +29,10 @@ const CellValue = ({ type, value }) => {
   }
 
   if (['float', 'decimal'].includes(type)) {
-    const numberOfDecimals = getNumberOfDecimals(value);
-
     formattedValue = formatNumber(value, {
-      minimumFractionDigits: numberOfDecimals,
-      maximumFractionDigits: numberOfDecimals,
+      // Should be kept in sync with the corresponding value
+      // in the design-system/NumberInput: https://github.com/strapi/design-system/blob/main/packages/strapi-design-system/src/NumberInput/NumberInput.js#L53
+      maximumFractionDigits: 21,
     });
   }
 

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

@@ -85,7 +85,7 @@ const RelationMultiple = ({ fieldSchema, metadatas, queryInfos, name, rowId, val
 
         {status === 'success' && (
           <>
-            {data?.results.map(entry => (
+            {data?.results.map((entry) => (
               <MenuItem key={entry.id} aria-disabled>
                 <TypographyMaxWidth ellipsis>
                   <CellValue

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

@@ -36,7 +36,7 @@ const RepeatableComponentCell = ({ value, metadatas }) => {
   return (
     <Box {...stopPropagation}>
       <SimpleMenu label={Label} size="S">
-        {value.map(item => (
+        {value.map((item) => (
           <MenuItem key={item.id} aria-disabled>
             <TypographyMaxWidth ellipsis>
               <CellValue type={mainFieldType} value={item[mainFieldName] || item.id} />

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

@@ -38,7 +38,7 @@ const TableRows = ({
   return (
     <Tbody>
       {rows.map((data, index) => {
-        const isChecked = entriesToDelete.findIndex(id => id === data.id) !== -1;
+        const isChecked = entriesToDelete.findIndex((id) => id === data.id) !== -1;
         const itemLineText = formatMessage(
           {
             id: 'content-manager.components.DynamicTable.row-line',
@@ -51,7 +51,7 @@ const TableRows = ({
           <Tr
             key={data.id}
             {...onRowClick({
-              fn: () => {
+              fn() {
                 trackUsage('willEditEntryFromList');
                 push({
                   pathname: `${pathname}/${data.id}`,
@@ -170,8 +170,8 @@ TableRows.defaultProps = {
   canCreate: false,
   canDelete: false,
   entriesToDelete: [],
-  onClickDelete: () => {},
-  onSelectRow: () => {},
+  onClickDelete() {},
+  onSelectRow() {},
   rows: [],
   withBulkActions: false,
   withMainAction: false,

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

@@ -35,17 +35,35 @@ const DynamicTable = ({
       layout,
     });
 
-    const formattedHeaders = headers.displayedHeaders.map(header => {
+    const formattedHeaders = headers.displayedHeaders.map((header) => {
+      const { metadatas } = header;
+
       if (header.fieldSchema.type === 'relation') {
         const sortFieldValue = `${header.name}.${header.metadatas.mainField.name}`;
 
         return {
           ...header,
+          metadatas: {
+            ...metadatas,
+            label: formatMessage({
+              id: getTrad(`containers.ListPage.table-headers.${header.name}`),
+              defaultMessage: header.name,
+            }),
+          },
           name: sortFieldValue,
         };
       }
 
-      return header;
+      return {
+        ...header,
+        metadatas: {
+          ...metadatas,
+          label: formatMessage({
+            id: getTrad(`containers.ListPage.table-headers.${header.name}`),
+            defaultMessage: header.name,
+          }),
+        },
+      };
     });
 
     if (!hasDraftAndPublish) {
@@ -61,11 +79,14 @@ const DynamicTable = ({
           type: 'custom',
         },
         metadatas: {
-          label: formatMessage({ id: getTrad('containers.ListPage.table-headers.published_at') }),
+          label: formatMessage({
+            id: getTrad(`containers.ListPage.table-headers.publishedAt`),
+            defaultMessage: 'publishedAt',
+          }),
           searchable: false,
           sortable: true,
         },
-        cellFormatter: cellData => {
+        cellFormatter(cellData) {
           const isPublished = !isEmpty(cellData.publishedAt);
 
           return <State isPublished={isPublished} />;

package/admin/src/content-manager/components/DynamicZone/components/AddComponentButton/index.js

@@ -120,26 +120,24 @@ const AddComponentButton = ({
   }
 
   return (
-    <>
-      <Flex justifyContent="center">
-        <Box style={{ cursor: isDisabled ? 'not-allowed' : 'pointer' }}>
-          <StyledButton type="button" onClick={onClick} disabled={isDisabled} hasError={hasError}>
-            <Flex>
-              <BoxFullHeight aria-hidden paddingRight={2}>
-                <StyledAddIcon $isOpen={isOpen} $hasError={hasError && !isOpen} />
-              </BoxFullHeight>
-              <Typography
-                variant="pi"
-                fontWeight="bold"
-                textColor={hasError && !isOpen ? 'danger600' : 'neutral500'}
-              >
-                {buttonLabel}
-              </Typography>
-            </Flex>
-          </StyledButton>
-        </Box>
-      </Flex>
-    </>
+    <Flex justifyContent="center">
+      <Box style={{ cursor: isDisabled ? 'not-allowed' : 'pointer' }}>
+        <StyledButton type="button" onClick={onClick} disabled={isDisabled} hasError={hasError}>
+          <Flex>
+            <BoxFullHeight aria-hidden paddingRight={2}>
+              <StyledAddIcon $isOpen={isOpen} $hasError={hasError && !isOpen} />
+            </BoxFullHeight>
+            <Typography
+              variant="pi"
+              fontWeight="bold"
+              textColor={hasError && !isOpen ? 'danger600' : 'neutral500'}
+            >
+              {buttonLabel}
+            </Typography>
+          </Flex>
+        </StyledButton>
+      </Box>
+    </Flex>
   );
 };
 

package/admin/src/content-manager/components/DynamicZone/components/Component/index.js

@@ -88,7 +88,7 @@ const Component = ({
 
   const formErrorsKeys = Object.keys(formErrors);
 
-  const fieldsErrors = formErrorsKeys.filter(errorKey => {
+  const fieldsErrors = formErrorsKeys.filter((errorKey) => {
     const errorKeysArray = errorKey.split('.');
 
     if (`${errorKeysArray[0]}.${errorKeysArray[1]}` === `${name}.${index}`) {

package/admin/src/content-manager/components/DynamicZone/components/ComponentPicker/Category/ComponentCard/index.js

@@ -75,7 +75,7 @@ function ComponentCard({ componentUid, intlLabel, icon, onClick }) {
 
 ComponentCard.defaultProps = {
   icon: 'dice-d6',
-  onClick: () => {},
+  onClick() {},
 };
 
 ComponentCard.propTypes = {

package/admin/src/content-manager/components/DynamicZone/components/ComponentPicker/index.js

@@ -16,7 +16,7 @@ const ComponentPicker = ({ components, isOpen, onClickAddComponent }) => {
   const [categoryToOpen, setCategoryToOpen] = useState('');
 
   const dynamicComponentCategories = useMemo(() => {
-    const componentsWithInfo = components.map(componentUid => {
+    const componentsWithInfo = components.map((componentUid) => {
       const { category, info } = getComponentLayout(componentUid);
 
       return { componentUid, category, info };
@@ -38,7 +38,7 @@ const ComponentPicker = ({ components, isOpen, onClickAddComponent }) => {
   }, [isOpen, dynamicComponentCategories]);
 
   const handleAddComponentToDz = useCallback(
-    componentUid => {
+    (componentUid) => {
       onClickAddComponent(componentUid);
       setCategoryToOpen('');
     },
@@ -46,7 +46,7 @@ const ComponentPicker = ({ components, isOpen, onClickAddComponent }) => {
   );
 
   const handleClickToggle = useCallback(
-    categoryName => {
+    (categoryName) => {
       const nextCategoryToOpen = categoryToOpen === categoryName ? '' : categoryName;
 
       setCategoryToOpen(nextCategoryToOpen);

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

@@ -16,7 +16,7 @@ import ComponentPicker from './components/ComponentPicker';
 
 /* eslint-disable react/no-array-index-key */
 
-const createCollapses = arrayLength =>
+const createCollapses = (arrayLength) =>
   Array.from({ length: arrayLength }).map(() => ({ isOpen: false }));
 
 const DynamicZone = ({
@@ -53,7 +53,7 @@ const DynamicZone = ({
 
   useEffect(() => {
     if (shouldOpenAddedComponent) {
-      setComponentsCollapses(prev =>
+      setComponentsCollapses((prev) =>
         prev.map((collapse, index) => {
           if (index === prev.length - 1) {
             return { ...collapse, isOpen: true };
@@ -71,10 +71,10 @@ const DynamicZone = ({
   const { max = Infinity, min = -Infinity } = fieldSchema;
   const dynamicZoneErrors = useMemo(() => {
     return Object.keys(formErrors)
-      .filter(key => {
+      .filter((key) => {
         return key === name;
       })
-      .map(key => formErrors[key]);
+      .map((key) => formErrors[key]);
   }, [formErrors, name]);
 
   const dynamicZoneAvailableComponents = useMemo(() => fieldSchema.components || [], [fieldSchema]);
@@ -89,7 +89,7 @@ const DynamicZone = ({
     hasError && get(dynamicZoneErrors, [0, 'id'], '') === 'components.Input.error.validation.max';
 
   const handleAddComponent = useCallback(
-    componentUid => {
+    (componentUid) => {
       setIsOpen(false);
 
       addComponentToDynamicZone(name, componentUid, hasError);
@@ -100,7 +100,7 @@ const DynamicZone = ({
 
   const handleClickOpenPicker = () => {
     if (dynamicDisplayedComponentsLength < max) {
-      setIsOpen(prev => !prev);
+      setIsOpen((prev) => !prev);
     } else {
       toggleNotification({
         type: 'info',
@@ -109,8 +109,8 @@ const DynamicZone = ({
     }
   };
 
-  const handleToggleComponent = indexToToggle => {
-    setComponentsCollapses(prev =>
+  const handleToggleComponent = (indexToToggle) => {
+    setComponentsCollapses((prev) =>
       prev.map(({ isOpen }, index) => {
         if (index === indexToToggle) {
           return { isOpen: !isOpen };
@@ -123,7 +123,7 @@ const DynamicZone = ({
 
   const handleMoveComponentDown = (name, currentIndex) => {
     moveComponentDown(name, currentIndex);
-    setComponentsCollapses(prev => {
+    setComponentsCollapses((prev) => {
       return prev.map(({ isOpen }, index, refArray) => {
         if (index === currentIndex + 1) {
           return { isOpen: refArray[currentIndex].isOpen };
@@ -140,7 +140,7 @@ const DynamicZone = ({
 
   const handleMoveComponentUp = (name, currentIndex) => {
     moveComponentUp(name, currentIndex);
-    setComponentsCollapses(prev => {
+    setComponentsCollapses((prev) => {
       return prev.map(({ isOpen }, index, refArray) => {
         if (index === currentIndex - 1) {
           return { isOpen: refArray[currentIndex].isOpen };

package/admin/src/content-manager/components/DynamicZone/utils/connect.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 function connect(WrappedComponent, select) {
-  return function(props) {
+  return (props) => {
     // eslint-disable-next-line react/prop-types
     const selectors = select(props.name);
 

package/admin/src/content-manager/components/DynamicZone/utils/select.js

@@ -17,7 +17,7 @@ function useSelect(name) {
   } = useCMEditViewDataManager();
 
   const dynamicDisplayedComponents = useMemo(
-    () => get(modifiedData, [name], []).map(data => data.__component),
+    () => get(modifiedData, [name], []).map((data) => data.__component),
     [modifiedData, name]
   );
 

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

@@ -264,7 +264,7 @@ const EditViewDataManagerProvider = ({
   );
 
   const createFormData = useCallback(
-    data => {
+    (data) => {
       // First we need to remove the added keys needed for the dnd
       const preparedData = removeKeyInObject(cloneDeep(data), '__temp_key__');
       // Then we need to apply our helper
@@ -288,7 +288,7 @@ const EditViewDataManagerProvider = ({
   }, [hasDraftAndPublish, shouldNotRunValidations]);
 
   const handleSubmit = useCallback(
-    async e => {
+    async (e) => {
       e.preventDefault();
       let errors = {};
 
@@ -358,8 +358,8 @@ const EditViewDataManagerProvider = ({
   }, [allLayoutData, currentContentTypeLayout, isCreatingEntry, modifiedData, onPublish]);
 
   const shouldCheckDZErrors = useCallback(
-    dzName => {
-      const doesDZHaveError = Object.keys(formErrors).some(key => key.split('.')[0] === dzName);
+    (dzName) => {
+      const doesDZHaveError = Object.keys(formErrors).some((key) => key.split('.')[0] === dzName);
       const shouldCheckErrors = !isEmpty(formErrors) && doesDZHaveError;
 
       return shouldCheckErrors;
@@ -413,7 +413,7 @@ const EditViewDataManagerProvider = ({
     });
   }, []);
 
-  const onRemoveRelation = useCallback(keys => {
+  const onRemoveRelation = useCallback((keys) => {
     dispatch({
       type: 'REMOVE_RELATION',
       keys,
@@ -526,7 +526,7 @@ const EditViewDataManagerProvider = ({
 EditViewDataManagerProvider.defaultProps = {
   from: '/',
   initialValues: null,
-  redirectToPreviousPage: () => {},
+  redirectToPreviousPage() {},
 };
 
 EditViewDataManagerProvider.propTypes = {

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

@@ -18,7 +18,7 @@ const initialState = {
 
 const reducer = (state, action) =>
   // eslint-disable-next-line consistent-return
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case 'ADD_NON_REPEATABLE_COMPONENT_TO_FIELD': {
         set(

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/cleanData.js

@@ -32,7 +32,7 @@ const cleanData = (retrievedData, currentSchema, componentsSchema) => {
         }
         case 'media':
           if (getOtherInfos(schema, [current, 'multiple']) === true) {
-            cleanedData = value ? value.filter(file => !(file instanceof File)) : null;
+            cleanedData = value ? value.filter((file) => !(file instanceof File)) : null;
           } else {
             cleanedData = get(value, 0) instanceof File ? null : get(value, 'id', null);
           }
@@ -40,7 +40,7 @@ const cleanData = (retrievedData, currentSchema, componentsSchema) => {
         case 'component':
           if (isRepeatable) {
             cleanedData = value
-              ? value.map(data => {
+              ? value.map((data) => {
                   const subCleanedData = recursiveCleanData(data, componentsSchema[component]);
 
                   return subCleanedData;
@@ -52,7 +52,7 @@ const cleanData = (retrievedData, currentSchema, componentsSchema) => {
 
           break;
         case 'dynamiczone':
-          cleanedData = value.map(componentData => {
+          cleanedData = value.map((componentData) => {
             const subCleanedData = recursiveCleanData(
               componentData,
               componentsSchema[componentData.__component]
@@ -77,7 +77,7 @@ const cleanData = (retrievedData, currentSchema, componentsSchema) => {
 
 export const helperCleanData = (value, key) => {
   if (isArray(value)) {
-    return value.map(obj => (obj[key] ? obj[key] : obj));
+    return value.map((obj) => (obj[key] ? obj[key] : obj));
   }
   if (isObject(value)) {
     return value[key];