@strapi/admin 4.3.4 → 4.4.0-alpha.0

package/admin/src/content-manager/pages/EditSettingsView/utils/layout.js

@@ -1,7 +1,7 @@
 /* eslint-disable indent */
-const getRowSize = arr => arr.reduce((sum, value) => sum + value.size, 0);
+const getRowSize = (arr) => arr.reduce((sum, value) => sum + value.size, 0);
 
-const createLayout = arr => {
+const createLayout = (arr) => {
   return arr.reduce((acc, current, index) => {
     const row = { rowId: index, rowContent: current };
 
@@ -9,7 +9,7 @@ const createLayout = arr => {
   }, []);
 };
 
-const formatLayout = arr => {
+const formatLayout = (arr) => {
   return arr
     .reduce((acc, current) => {
       let toPush = [];
@@ -33,7 +33,7 @@ const formatLayout = arr => {
           ? 0
           : Math.max.apply(
               Math,
-              acc.map(o => o.rowId)
+              acc.map((o) => o.rowId)
             ) + 1;
 
       const currentRowSize = getRowSize(currentRow);
@@ -57,8 +57,8 @@ const formatLayout = arr => {
 
       return acc;
     }, [])
-    .filter(row => row.rowContent.length > 0)
-    .filter(row => {
+    .filter((row) => row.rowContent.length > 0)
+    .filter((row) => {
       if (row.rowContent.length === 1) {
         return row.rowContent[0].name !== '_TEMP_';
       }
@@ -67,15 +67,15 @@ const formatLayout = arr => {
     });
 };
 
-const unformatLayout = arr => {
+const unformatLayout = (arr) => {
   return arr.reduce((acc, current) => {
-    const currentRow = current.rowContent.filter(content => content.name !== '_TEMP_');
+    const currentRow = current.rowContent.filter((content) => content.name !== '_TEMP_');
 
     return acc.concat([currentRow]);
   }, []);
 };
 
-const getDefaultInputSize = type => {
+const getDefaultInputSize = (type) => {
   switch (type) {
     case 'boolean':
     case 'date':
@@ -97,7 +97,7 @@ const getDefaultInputSize = type => {
 
 const getFieldSize = (name, layouts = []) => {
   return layouts.reduce((acc, { rowContent }) => {
-    const size = rowContent.find(row => row.name === name)?.size ?? null;
+    const size = rowContent.find((row) => row.name === name)?.size ?? null;
 
     if (size) {
       acc = size;
@@ -108,8 +108,8 @@ const getFieldSize = (name, layouts = []) => {
 };
 
 const setFieldSize = (name, size, layouts = []) => {
-  return layouts.map(row => {
-    row.rowContent = row.rowContent.map(column => {
+  return layouts.map((row) => {
+    row.rowContent = row.rowContent.map((column) => {
       if (column.name === name) {
         return {
           ...column,

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

@@ -15,7 +15,7 @@ const DeleteLink = ({ isCreatingEntry, onDelete, onDeleteSucceeded, trackerPrope
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
 
-  const toggleWarningDelete = () => setWarningDelete(prevState => !prevState);
+  const toggleWarningDelete = () => setWarningDelete((prevState) => !prevState);
 
   const handleConfirmDelete = async () => {
     try {

package/admin/src/content-manager/pages/EditView/DeleteLink/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();
 

package/admin/src/content-manager/pages/EditView/DraftAndPublishBadge/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();
 

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

@@ -134,8 +134,8 @@ const Header = ({
     );
   }
 
-  const toggleWarningUnpublish = () => setWarningUnpublish(prevState => !prevState);
-  const toggleWarningDraftRelation = () => setShowWarningDraftRelation(prevState => !prevState);
+  const toggleWarningUnpublish = () => setWarningUnpublish((prevState) => !prevState);
+  const toggleWarningDraftRelation = () => setShowWarningDraftRelation((prevState) => !prevState);
 
   const handlePublish = () => {
     toggleWarningDraftRelation();
@@ -165,7 +165,7 @@ const Header = ({
             // Needed in order to redirect the user with the correct search params
             // Since parts is using a link from react-router-dom the best way to do it is to disable the
             // event
-            onClick={e => {
+            onClick={(e) => {
               e.preventDefault();
               goBack();
             }}
@@ -254,7 +254,7 @@ const Header = ({
                     },
                     {
                       br: () => <br />,
-                      b: chunks => <Typography fontWeight="bold">{chunks}</Typography>,
+                      b: (chunks) => <Typography fontWeight="bold">{chunks}</Typography>,
                       count: draftRelationsCountRef.current,
                     }
                   )}

package/admin/src/content-manager/pages/EditView/Header/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();
 

package/admin/src/content-manager/pages/EditView/Header/utils/getDraftRelations.js

@@ -14,7 +14,7 @@ const getDraftRelations = (data, ctSchema, components) => {
       }
 
       if (type === 'dynamiczone') {
-        currentData.forEach(curr => {
+        currentData.forEach((curr) => {
           const compoSchema = get(components, curr.__component, {});
 
           acc += getDraftRelationsCount(curr, compoSchema);
@@ -27,7 +27,7 @@ const getDraftRelations = (data, ctSchema, components) => {
         const compoSchema = get(components, compoUID, {});
 
         if (isRepeatable) {
-          currentData.forEach(curr => {
+          currentData.forEach((curr) => {
             acc += getDraftRelationsCount(curr, compoSchema);
           });
         } else {
@@ -43,7 +43,7 @@ const getDraftRelations = (data, ctSchema, components) => {
             acc += 1;
           }
         } else {
-          currentData.forEach(value => {
+          currentData.forEach((value) => {
             if (has(value, 'publishedAt') && isEmpty(value.publishedAt)) {
               acc += 1;
             }

package/admin/src/content-manager/pages/EditView/Informations/utils/getUnits.js

@@ -4,7 +4,7 @@ const msPerDay = msPerHour * 24;
 const msPerMonth = msPerDay * 30;
 const msPerYear = msPerDay * 365;
 
-const getUnits = value => {
+const getUnits = (value) => {
   if (value < msPerMinute) {
     return { unit: 'second', value: -Math.round(value / 1000) };
   }

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

@@ -1,7 +1,12 @@
-import React, { memo, useCallback, useMemo } from 'react';
+import React, { Suspense, memo, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
-import { CheckPermissions, useTracking, LinkButton } from '@strapi/helper-plugin';
+import {
+  CheckPermissions,
+  LoadingIndicatorPage,
+  useTracking,
+  LinkButton,
+} from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import { ContentLayout } from '@strapi/design-system/Layout';
 import { Box } from '@strapi/design-system/Box';
@@ -44,13 +49,10 @@ const EditView = ({
 }) => {
   const { trackUsage } = useTracking();
   const { formatMessage } = useIntl();
-  const {
-    createActionAllowedFields,
-    readActionAllowedFields,
-    updateActionAllowedFields,
-  } = useMemo(() => {
-    return getFieldsActionMatchingPermissions(userPermissions, slug);
-  }, [userPermissions, slug]);
+  const { createActionAllowedFields, readActionAllowedFields, updateActionAllowedFields } =
+    useMemo(() => {
+      return getFieldsActionMatchingPermissions(userPermissions, slug);
+    }, [userPermissions, slug]);
 
   const configurationPermissions = useMemo(() => {
     return isSingleType
@@ -70,9 +72,9 @@ const EditView = ({
   );
 
   // Check if a block is a dynamic zone
-  const isDynamicZone = useCallback(block => {
-    return block.every(subBlock => {
-      return subBlock.every(obj => obj.fieldSchema.type === 'dynamiczone');
+  const isDynamicZone = useCallback((block) => {
+    return block.every((subBlock) => {
+      return subBlock.every((obj) => obj.fieldSchema.type === 'dynamiczone');
     });
   }, []);
 
@@ -134,99 +136,101 @@ const EditView = ({
               <ContentLayout>
                 <Grid gap={4}>
                   <GridItem col={9} s={12}>
-                    <Stack spacing={6}>
-                      {formattedContentTypeLayout.map((row, index) => {
-                        if (isDynamicZone(row)) {
-                          const {
-                            0: {
-                              0: { name, fieldSchema, metadatas, labelAction },
-                            },
-                          } = row;
+                    <Suspense fallback={<LoadingIndicatorPage />}>
+                      <Stack spacing={6}>
+                        {formattedContentTypeLayout.map((row, index) => {
+                          if (isDynamicZone(row)) {
+                            const {
+                              0: {
+                                0: { name, fieldSchema, metadatas, labelAction },
+                              },
+                            } = row;
+
+                            return (
+                              <Box key={index}>
+                                <Grid gap={4}>
+                                  <GridItem col={12} s={12} xs={12}>
+                                    <DynamicZone
+                                      name={name}
+                                      fieldSchema={fieldSchema}
+                                      labelAction={labelAction}
+                                      metadatas={metadatas}
+                                    />
+                                  </GridItem>
+                                </Grid>
+                              </Box>
+                            );
+                          }
 
                           return (
-                            <Box key={index}>
-                              <Grid gap={4}>
-                                <GridItem col={12} s={12} xs={12}>
-                                  <DynamicZone
-                                    name={name}
-                                    fieldSchema={fieldSchema}
-                                    labelAction={labelAction}
-                                    metadatas={metadatas}
-                                  />
-                                </GridItem>
-                              </Grid>
-                            </Box>
-                          );
-                        }
+                            <Box
+                              key={index}
+                              hasRadius
+                              background="neutral0"
+                              shadow="tableShadow"
+                              paddingLeft={6}
+                              paddingRight={6}
+                              paddingTop={6}
+                              paddingBottom={6}
+                              borderColor="neutral150"
+                            >
+                              <Stack spacing={6}>
+                                {row.map((grid, gridIndex) => {
+                                  return (
+                                    <Grid gap={4} key={gridIndex}>
+                                      {grid.map(
+                                        ({ fieldSchema, labelAction, metadatas, name, size }) => {
+                                          const isComponent = fieldSchema.type === 'component';
 
-                        return (
-                          <Box
-                            key={index}
-                            hasRadius
-                            background="neutral0"
-                            shadow="tableShadow"
-                            paddingLeft={6}
-                            paddingRight={6}
-                            paddingTop={6}
-                            paddingBottom={6}
-                            borderColor="neutral150"
-                          >
-                            <Stack spacing={6}>
-                              {row.map((grid, gridIndex) => {
-                                return (
-                                  <Grid gap={4} key={gridIndex}>
-                                    {grid.map(
-                                      ({ fieldSchema, labelAction, metadatas, name, size }) => {
-                                        const isComponent = fieldSchema.type === 'component';
+                                          if (isComponent) {
+                                            const {
+                                              component,
+                                              max,
+                                              min,
+                                              repeatable = false,
+                                              required = false,
+                                            } = fieldSchema;
 
-                                        if (isComponent) {
-                                          const {
-                                            component,
-                                            max,
-                                            min,
-                                            repeatable = false,
-                                            required = false,
-                                          } = fieldSchema;
+                                            return (
+                                              <GridItem col={size} s={12} xs={12} key={component}>
+                                                <FieldComponent
+                                                  componentUid={component}
+                                                  labelAction={labelAction}
+                                                  isRepeatable={repeatable}
+                                                  intlLabel={{
+                                                    id: metadatas.label,
+                                                    defaultMessage: metadatas.label,
+                                                  }}
+                                                  max={max}
+                                                  min={min}
+                                                  name={name}
+                                                  required={required}
+                                                />
+                                              </GridItem>
+                                            );
+                                          }
 
                                           return (
-                                            <GridItem col={size} s={12} xs={12} key={component}>
-                                              <FieldComponent
-                                                componentUid={component}
+                                            <GridItem col={size} key={name} s={12} xs={12}>
+                                              <Inputs
+                                                fieldSchema={fieldSchema}
+                                                keys={name}
                                                 labelAction={labelAction}
-                                                isRepeatable={repeatable}
-                                                intlLabel={{
-                                                  id: metadatas.label,
-                                                  defaultMessage: metadatas.label,
-                                                }}
-                                                max={max}
-                                                min={min}
-                                                name={name}
-                                                required={required}
+                                                metadatas={metadatas}
                                               />
                                             </GridItem>
                                           );
                                         }
-
-                                        return (
-                                          <GridItem col={size} key={name} s={12} xs={12}>
-                                            <Inputs
-                                              fieldSchema={fieldSchema}
-                                              keys={name}
-                                              labelAction={labelAction}
-                                              metadatas={metadatas}
-                                            />
-                                          </GridItem>
-                                        );
-                                      }
-                                    )}
-                                  </Grid>
-                                );
-                              })}
-                            </Stack>
-                          </Box>
-                        );
-                      })}
-                    </Stack>
+                                      )}
+                                    </Grid>
+                                  );
+                                })}
+                              </Stack>
+                            </Box>
+                          );
+                        })}
+                      </Stack>
+                    </Suspense>
                   </GridItem>
                   <GridItem col={3} s={12}>
                     <Stack spacing={2}>

package/admin/src/content-manager/pages/EditView/utils/createAttributesLayout.js

@@ -4,7 +4,7 @@ import { get, isEmpty } from 'lodash';
 /* eslint-disable no-unused-vars */
 
 const createAttributesLayout = (currentLayout, attributes) => {
-  const getType = name => get(attributes, [name, 'type'], '');
+  const getType = (name) => get(attributes, [name, 'type'], '');
   let currentRowIndex = 0;
   const newLayout = [];
 
@@ -29,7 +29,7 @@ const createAttributesLayout = (currentLayout, attributes) => {
     }
   }
 
-  return newLayout.filter(arr => arr.length > 0);
+  return newLayout.filter((arr) => arr.length > 0);
 };
 
 export default createAttributesLayout;

package/admin/src/content-manager/pages/EditView/utils/getFieldsActionMatchingPermissions.js

@@ -2,7 +2,7 @@ import { uniq, flatMap } from 'lodash';
 import { findMatchingPermissions } from '@strapi/helper-plugin';
 
 const getFieldsActionMatchingPermissions = (userPermissions, slug) => {
-  const getMatchingPermissions = action => {
+  const getMatchingPermissions = (action) => {
     const matched = findMatchingPermissions(userPermissions, [
       {
         action: `plugin::content-manager.explorer.${action}`,

package/admin/src/content-manager/pages/EditViewLayoutManager/Permissions.js

@@ -5,7 +5,7 @@ import isEqual from 'react-fast-compare';
 import EditView from '../EditView';
 import { generatePermissionsObject } from '../../utils';
 
-const Permissions = props => {
+const Permissions = (props) => {
   const viewPermissions = useMemo(() => generatePermissionsObject(props.slug), [props.slug]);
   const { isLoading, allowedActions } = useRBAC(viewPermissions, props.userPermissions);
 

package/admin/src/content-manager/pages/EditViewLayoutManager/reducer.js

@@ -12,7 +12,7 @@ export const initialState = {
 
 const editViewManagerReducer = (state = initialState, action) =>
   // eslint-disable-next-line consistent-return
-  produce(state, drafState => {
+  produce(state, (drafState) => {
     switch (action.type) {
       case RESET_PROPS: {
         drafState.currentLayout = null;

package/admin/src/content-manager/pages/EditViewLayoutManager/selectors.js

@@ -1,3 +1,3 @@
-const selectLayout = state => state['content-manager_editViewLayoutManager'].currentLayout;
+const selectLayout = (state) => state['content-manager_editViewLayoutManager'].currentLayout;
 
 export default selectLayout;

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

@@ -141,13 +141,13 @@ const DraggableCard = ({
 
   const [{ isDragging }, drag, preview] = useDrag({
     type: ItemTypes.FIELD,
-    item: () => {
+    item() {
       return { index, labelField, name };
     },
-    collect: monitor => ({
+    collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
-    end: () => {
+    end() {
       setIsDraggingSibling(false);
     },
   });
@@ -167,7 +167,7 @@ const DraggableCard = ({
   // anymore, this hack forces a rerender in order to apply the dragRef
   useEffect(() => {
     if (!isDraggingSibling) {
-      forceRerenderAfterDnd(prev => !prev);
+      forceRerenderAfterDnd((prev) => !prev);
     }
   }, [isDraggingSibling]);
 
@@ -203,7 +203,7 @@ const DraggableCard = ({
                 },
                 { item: name }
               )}
-              onClick={e => e.stopPropagation()}
+              onClick={(e) => e.stopPropagation()}
               ref={refs.dragRef}
               type="button"
             >
@@ -214,7 +214,7 @@ const DraggableCard = ({
           <Flex paddingLeft={3}>
             <ActionButton
               ref={editButtonRef}
-              onClick={e => {
+              onClick={(e) => {
                 e.stopPropagation();
                 onClickEditField(name);
               }}

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

@@ -72,7 +72,7 @@ const EditFieldForm = ({
                   defaultMessage: 'Label',
                 })}
                 name="label"
-                onChange={e => onChangeEditLabel(e)}
+                onChange={(e) => onChangeEditLabel(e)}
                 value={fieldForm.label}
                 hint={formatMessage({
                   id: getTrad('form.Input.label.inputDescription'),
@@ -90,8 +90,9 @@ const EditFieldForm = ({
                     defaultMessage: 'Enable sort on this field',
                   })}
                   name="sortable"
-                  onChange={e =>
-                    onChangeEditLabel({ target: { name: 'sortable', value: e.target.checked } })}
+                  onChange={(e) =>
+                    onChangeEditLabel({ target: { name: 'sortable', value: e.target.checked } })
+                  }
                   onLabel={formatMessage({
                     id: 'app.components.ToggleCheckbox.on-label',
                     defaultMessage: 'on',

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

@@ -34,7 +34,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
             id: getTrad('form.Input.search'),
             defaultMessage: 'Enable search',
           })}
-          onChange={e => {
+          onChange={(e) => {
             onChange({ target: { name: 'settings.searchable', value: e.target.checked } });
           }}
           onLabel={formatMessage({
@@ -53,7 +53,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
             id: getTrad('form.Input.filters'),
             defaultMessage: 'Enable filters',
           })}
-          onChange={e => {
+          onChange={(e) => {
             onChange({ target: { name: 'settings.filterable', value: e.target.checked } });
           }}
           onLabel={formatMessage({
@@ -72,7 +72,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
             id: getTrad('form.Input.bulkActions'),
             defaultMessage: 'Enable bulk actions',
           })}
-          onChange={e => {
+          onChange={(e) => {
             onChange({ target: { name: 'settings.bulkable', value: e.target.checked } });
           }}
           onLabel={formatMessage({
@@ -99,11 +99,11 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
               defaultMessage:
                 'Note: You can override this value in the Collection Type settings page.',
             })}
-            onChange={value => onChange({ target: { name: 'settings.pageSize', value } })}
+            onChange={(value) => onChange({ target: { name: 'settings.pageSize', value } })}
             name="settings.pageSize"
             value={modifiedData.settings.pageSize || ''}
           >
-            {[10, 20, 50, 100].map(pageSize => (
+            {[10, 20, 50, 100].map((pageSize) => (
               <Option key={pageSize} value={pageSize}>
                 {pageSize}
               </Option>
@@ -116,11 +116,11 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
               id: getTrad('form.Input.defaultSort'),
               defaultMessage: 'Default sort attribute',
             })}
-            onChange={value => onChange({ target: { name: 'settings.defaultSortBy', value } })}
+            onChange={(value) => onChange({ target: { name: 'settings.defaultSortBy', value } })}
             name="settings.defaultSortBy"
             value={modifiedData.settings.defaultSortBy || ''}
           >
-            {sortOptions.map(sortBy => (
+            {sortOptions.map((sortBy) => (
               <Option key={sortBy} value={sortBy}>
                 {sortBy}
               </Option>
@@ -133,11 +133,11 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
               id: getTrad('form.Input.sort.order'),
               defaultMessage: 'Default sort order',
             })}
-            onChange={value => onChange({ target: { name: 'settings.defaultSortOrder', value } })}
+            onChange={(value) => onChange({ target: { name: 'settings.defaultSortOrder', value } })}
             name="settings.defaultSortOrder"
             value={modifiedData.settings.defaultSortOrder || ''}
           >
-            {['ASC', 'DESC'].map(order => (
+            {['ASC', 'DESC'].map((order) => (
               <Option key={order} value={order}>
                 {order}
               </Option>

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

@@ -83,7 +83,7 @@ const SortDisplayedFields = ({
                 isDraggingSibling={isDraggingSibling}
                 onMoveField={onMoveField}
                 onClickEditField={onClickEditField}
-                onRemoveField={e => handleRemoveField(e, index)}
+                onRemoveField={(e) => handleRemoveField(e, index)}
                 name={field}
                 labelField={metadatas[field].list.label || field}
                 setIsDraggingSibling={setIsDraggingSibling}
@@ -102,7 +102,7 @@ const SortDisplayedFields = ({
             disabled={listRemainingFields.length <= 0}
             data-testid="add-field"
           >
-            {listRemainingFields.map(field => (
+            {listRemainingFields.map((field) => (
               <MenuItem key={field} onClick={() => handleAddField(field)}>
                 {field}
               </MenuItem>