@strapi/admin 4.3.4 → 4.4.0-alpha.0

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

@@ -81,14 +81,8 @@ const DraggedItem = ({
       const dragPath = item.originalPath;
       const hoverPath = componentFieldName;
       const fullPathToComponentArray = dragPath.split('.');
-      const dragIndexString = fullPathToComponentArray
-        .slice()
-        .splice(-1)
-        .join('');
-      const hoverIndexString = hoverPath
-        .split('.')
-        .splice(-1)
-        .join('');
+      const dragIndexString = fullPathToComponentArray.slice().splice(-1).join('');
+      const hoverIndexString = hoverPath.split('.').splice(-1).join('');
       const pathToComponentArray = fullPathToComponentArray.slice(
         0,
         fullPathToComponentArray.length - 1
@@ -133,7 +127,7 @@ const DraggedItem = ({
   });
   const [{ isDragging }, drag, preview] = useDrag({
     type: ItemTypes.COMPONENT,
-    item: () => {
+    item() {
       // Close all collapses
       toggleCollapses(-1);
 
@@ -142,12 +136,12 @@ const DraggedItem = ({
         originalPath: componentFieldName,
       };
     },
-    end: () => {
+    end() {
       // Update the errors
       triggerFormValidation();
       setIsDraggingSibling(false);
     },
-    collect: monitor => ({
+    collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),
   });
@@ -167,7 +161,7 @@ const DraggedItem = ({
   // anymore, this hack forces a rerender in order to apply the dragRef
   useEffect(() => {
     if (!isDraggingSibling) {
-      forceRerenderAfterDnd(prev => !prev);
+      forceRerenderAfterDnd((prev) => !prev);
     }
   }, [isDraggingSibling]);
 
@@ -226,7 +220,7 @@ const DraggedItem = ({
                       role="button"
                       tabIndex={-1}
                       ref={refs.dragRef}
-                      onClick={e => e.stopPropagation()}
+                      onClick={(e) => e.stopPropagation()}
                     >
                       <Drag />
                     </DragButton>
@@ -294,8 +288,8 @@ const DraggedItem = ({
 DraggedItem.defaultProps = {
   isDraggingSibling: false,
   isOpen: false,
-  setIsDraggingSibling: () => {},
-  toggleCollapses: () => {},
+  setIsDraggingSibling() {},
+  toggleCollapses() {},
 };
 
 DraggedItem.propTypes = {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 function connect(WrappedComponent, select) {
-  return function(props) {
+  return (props) => {
     const selectors = select(props);
 
     return <WrappedComponent {...props} {...selectors} />;

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

@@ -49,10 +49,10 @@ const RepeatableComponent = ({
   const [isDraggingSibling, setIsDraggingSibling] = useState(false);
   const [, drop] = useDrop({ accept: ItemTypes.COMPONENT });
   const { getComponentLayout } = useContentTypeLayout();
-  const componentLayoutData = useMemo(() => getComponentLayout(componentUid), [
-    componentUid,
-    getComponentLayout,
-  ]);
+  const componentLayoutData = useMemo(
+    () => getComponentLayout(componentUid),
+    [componentUid, getComponentLayout]
+  );
 
   const nextTempKey = useMemo(() => {
     return getMaxTempKey(componentValue || []) + 1;
@@ -113,7 +113,7 @@ const RepeatableComponent = ({
   }
 
   const doesRepComponentHasChildError = componentErrorKeys.some(
-    error => error.split('.').length > 1
+    (error) => error.split('.').length > 1
   );
 
   if (doesRepComponentHasChildError && !hasMinError) {

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

@@ -1,7 +1,7 @@
 import React from 'react';
 
 function connect(WrappedComponent, select) {
-  return function(props) {
+  return (props) => {
     const selectors = select(props);
 
     return <WrappedComponent {...props} {...selectors} />;

package/admin/src/content-manager/components/RepeatableComponent/utils/getComponentErrorKeys.js

@@ -1,7 +1,7 @@
 export default function getComponentErrorKeys(name, formErrors) {
   return Object.keys(formErrors)
-    .filter(errorKey => errorKey.startsWith(name))
-    .map(errorKey =>
+    .filter((errorKey) => errorKey.startsWith(name))
+    .map((errorKey) =>
       errorKey
         .split('.')
         .slice(0, name.split('.').length + 1)

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

@@ -10,7 +10,7 @@ const SectionTitle = ({ isSettings }) => {
 
   return (
     <div style={{ marginBottom: '18px' }}>
-      <FormattedMessage id={msgId}>{msg => <Title>{msg}</Title>}</FormattedMessage>
+      <FormattedMessage id={msgId}>{(msg) => <Title>{msg}</Title>}</FormattedMessage>
     </div>
   );
 };

package/admin/src/content-manager/components/SelectMany/ListItem.js

@@ -79,7 +79,7 @@ function ListItem({
 }
 
 ListItem.defaultProps = {
-  onRemove: () => {},
+  onRemove() {},
   searchToPersist: null,
   targetModel: '',
 };

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

@@ -46,7 +46,7 @@ function SelectMany({
         id={name}
         filterOption={(candidate, input) => {
           if (!isEmpty(value)) {
-            const isSelected = value.findIndex(item => item.id === candidate.value.id) !== -1;
+            const isSelected = value.findIndex((item) => item.id === candidate.value.id) !== -1;
 
             if (isSelected) {
               return false;

package/admin/src/content-manager/components/SelectOne/SingleValue.js

@@ -22,7 +22,7 @@ const StyledBullet = styled.div`
   cursor: pointer;
 `;
 
-const SingleValue = props => {
+const SingleValue = (props) => {
   const { formatMessage } = useIntl();
   const Component = components.SingleValue;
   const hasDraftAndPublish = has(get(props, 'data.value'), 'publishedAt');

package/admin/src/content-manager/components/SelectWrapper/Option.js

@@ -20,7 +20,7 @@ const StyledBullet = styled.div`
   cursor: pointer;
 `;
 
-const Option = props => {
+const Option = (props) => {
   const { formatMessage } = useIntl();
   const Component = components.Option;
   const hasDraftAndPublish = has(get(props, 'data.value'), 'publishedAt');

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

@@ -64,13 +64,8 @@ function SelectWrapper({
   const [{ query }] = useQueryParams();
   // Disable the input in case of a polymorphic relation
   const isMorph = useMemo(() => relationType.toLowerCase().includes('morph'), [relationType]);
-  const {
-    addRelation,
-    modifiedData,
-    moveRelation,
-    onChange,
-    onRemoveRelation,
-  } = useCMEditViewDataManager();
+  const { addRelation, modifiedData, moveRelation, onChange, onRemoveRelation } =
+    useCMEditViewDataManager();
   const { pathname } = useLocation();
 
   const value = get(modifiedData, name, null);
@@ -80,11 +75,11 @@ function SelectWrapper({
   const [isOpen, setIsOpen] = useState(false);
 
   const filteredOptions = useMemo(() => {
-    return options.filter(option => {
+    return options.filter((option) => {
       if (!isEmpty(value)) {
         // SelectMany
         if (Array.isArray(value)) {
-          return findIndex(value, o => o.id === option.value.id) === -1;
+          return findIndex(value, (o) => o.id === option.value.id) === -1;
         }
 
         // SelectOne
@@ -95,13 +90,8 @@ function SelectWrapper({
     });
   }, [options, value]);
 
-  const {
-    endPoint,
-    containsKey,
-    defaultParams,
-    shouldDisplayRelationLink,
-    paramsToKeep,
-  } = queryInfos;
+  const { endPoint, containsKey, defaultParams, shouldDisplayRelationLink, paramsToKeep } =
+    queryInfos;
 
   const isSingle = ['oneWay', 'oneToOne', 'manyToOne', 'oneToManyMorph', 'oneToOneMorph'].includes(
     relationType
@@ -116,11 +106,11 @@ function SelectWrapper({
       return [value.id];
     }
 
-    return value.map(val => val.id);
+    return value.map((val) => val.id);
   }, [isSingle, value]);
 
   const getData = useCallback(
-    async source => {
+    async (source) => {
       // Currently polymorphic relations are not handled
       if (isMorph) {
         setIsLoading(false);
@@ -149,19 +139,19 @@ function SelectWrapper({
           { params, cancelToken: source.token }
         );
 
-        const formattedData = data.map(obj => {
+        const formattedData = data.map((obj) => {
           return { value: obj, label: obj[mainField.name] };
         });
 
-        setOptions(prevState =>
+        setOptions((prevState) =>
           prevState.concat(formattedData).filter((obj, index) => {
-            const objIndex = prevState.findIndex(el => el.value.id === obj.value.id);
+            const objIndex = prevState.findIndex((el) => el.value.id === obj.value.id);
 
             if (objIndex === -1) {
               return true;
             }
 
-            return prevState.findIndex(el => el.value.id === obj.value.id) === index;
+            return prevState.findIndex((el) => el.value.id === obj.value.id) === index;
           })
         );
         setIsLoading(false);
@@ -197,7 +187,7 @@ function SelectWrapper({
 
   const handleInputChange = (inputValue, { action }) => {
     if (action === 'input-change') {
-      setState(prevState => {
+      setState((prevState) => {
         if (prevState.contains === inputValue) {
           return prevState;
         }
@@ -210,7 +200,7 @@ function SelectWrapper({
   };
 
   const handleMenuScrollToBottom = () => {
-    setState(prevState => ({
+    setState((prevState) => ({
       ...prevState,
       start: prevState.start + 20,
     }));
@@ -221,11 +211,11 @@ function SelectWrapper({
     setIsOpen(false);
   };
 
-  const handleChange = value => {
+  const handleChange = (value) => {
     onChange({ target: { name, value: value ? value.value : value } });
   };
 
-  const handleAddRelation = value => {
+  const handleAddRelation = (value) => {
     if (!isEmpty(value)) {
       addRelation({ target: { name, value } });
     }

package/admin/src/content-manager/components/SelectWrapper/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);
 

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

@@ -38,16 +38,11 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
   const toggleNotification = useNotification();
   const dispatch = useDispatch();
 
-  const {
-    componentsDataStructure,
-    contentTypeDataStructure,
-    data,
-    isLoading,
-    status,
-  } = useSelector(selectCrudReducer);
+  const { componentsDataStructure, contentTypeDataStructure, data, isLoading, status } =
+    useSelector(selectCrudReducer);
 
   const cleanReceivedData = useCallback(
-    data => {
+    (data) => {
       const cleaned = removePasswordFieldsFromData(
         data,
         allLayoutData.contentType,
@@ -100,7 +95,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
     const CancelToken = axios.CancelToken;
     const source = CancelToken.source();
 
-    const fetchData = async source => {
+    const fetchData = async (source) => {
       dispatch(getData());
 
       setIsCreatingEntry(true);
@@ -142,7 +137,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
   }, [cleanReceivedData, push, slug, dispatch, searchToSend, rawQuery, toggleNotification]);
 
   const displayErrors = useCallback(
-    err => {
+    (err) => {
       const errorPayload = err.response.data;
       let errorMessage = get(errorPayload, ['error', 'message'], 'Bad Request');
 
@@ -159,7 +154,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
   );
 
   const onDelete = useCallback(
-    async trackerProperty => {
+    async (trackerProperty) => {
       try {
         trackUsageRef.current('willDeleteEntry', trackerProperty);
 

package/admin/src/content-manager/components/SingleTypeFormWrapper/utils/getRequestUrl.js

@@ -1,5 +1,5 @@
 import { getRequestUrl } from '../../../utils';
 
-const requestURL = path => getRequestUrl(`single-types/${path}`);
+const requestURL = (path) => getRequestUrl(`single-types/${path}`);
 
 export default requestURL;

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

@@ -37,7 +37,7 @@ const Editor = ({
     });
 
     CodeMirror.commands.newlineAndIndentContinueMarkdownList = newlineAndIndentContinueMarkdownList;
-    editorRef.current.on('change', doc => {
+    editorRef.current.on('change', (doc) => {
       onChangeRef.current({ target: { name, value: doc.getValue(), type: 'wysiwyg' } });
     });
   }, [editorRef, textareaRef, name, placeholder]);

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

@@ -78,7 +78,7 @@ export const EditorLayout = ({ children, isExpandMode, error, previewContent, on
               overflow="hidden"
               width="70%"
               height="70%"
-              onClick={e => e.stopPropagation()}
+              onClick={(e) => e.stopPropagation()}
             >
               <Flex height="100%" alignItems="flex-start">
                 <BoxWithBorder flex="1" height="100%">

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

@@ -28,7 +28,7 @@ const WysiwygFooter = ({ onToggleExpand }) => {
 };
 
 WysiwygFooter.defaultProps = {
-  onToggleExpand: () => {},
+  onToggleExpand() {},
 };
 
 WysiwygFooter.propTypes = {

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

@@ -45,7 +45,7 @@ const WysiwygNav = ({
   const buttonMoreRef = useRef();
 
   const handleTogglePopover = () => {
-    setVisiblePopover(prev => !prev);
+    setVisiblePopover((prev) => !prev);
   };
 
   if (disabled || isPreviewMode) {
@@ -110,7 +110,7 @@ const WysiwygNav = ({
             id="selectTitle"
             placeholder={selectPlaceholder}
             size="S"
-            onChange={value => onActionClick(value, editorRef)}
+            onChange={(value) => onActionClick(value, editorRef)}
           >
             <Option value="h1">h1</Option>
             <Option value="h2">h2</Option>
@@ -233,8 +233,8 @@ const WysiwygNav = ({
 
 WysiwygNav.defaultProps = {
   isPreviewMode: false,
-  onActionClick: () => {},
-  onToggleMediaLib: () => {},
+  onActionClick() {},
+  onToggleMediaLib() {},
   onTogglePreviewMode: undefined,
 };
 

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

@@ -52,11 +52,11 @@ const Wysiwyg = ({
 
   const MediaLibraryDialog = components['media-library'];
 
-  const handleToggleMediaLib = () => setMediaLibVisible(prev => !prev);
-  const handleTogglePreviewMode = () => setIsPreviewMode(prev => !prev);
+  const handleToggleMediaLib = () => setMediaLibVisible((prev) => !prev);
+  const handleTogglePreviewMode = () => setIsPreviewMode((prev) => !prev);
   const handleToggleExpand = () => {
     setIsPreviewMode(false);
-    setIsExpandMode(prev => !prev);
+    setIsExpandMode((prev) => !prev);
   };
 
   const handleActionClick = (value, currentEditorRef, togglePopover) => {
@@ -100,8 +100,8 @@ const Wysiwyg = ({
     }
   };
 
-  const handleSelectAssets = files => {
-    const formattedFiles = files.map(f => ({
+  const handleSelectAssets = (files) => {
+    const formattedFiles = files.map((f) => ({
       alt: f.alternativeText || f.name,
       url: prefixFileUrlWithBackendUrl(f.url),
       mime: f.mime,

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

@@ -30,7 +30,7 @@ export const replaceText = (markdownName, textToChange) => {
   return editedText;
 };
 
-export const insertText = markdownName => {
+export const insertText = (markdownName) => {
   let editedText;
   // object to calculate text that will be selected after insert of markdown
   let selection = { start: markdownName.length, end: 0 };
@@ -75,7 +75,7 @@ export const insertText = markdownName => {
   return { editedText, selection };
 };
 
-export const insertListOrTitle = markdown => {
+export const insertListOrTitle = (markdown) => {
   let textToInsert;
 
   switch (markdown) {
@@ -140,8 +140,8 @@ export const listHandler = (editor, listType) => {
     const selections = doc.listSelections();
     let remove = null;
 
-    editor.current.operation(function() {
-      selections.forEach(function(selection) {
+    editor.current.operation(function () {
+      selections.forEach(function (selection) {
         const pos = [selection.head.line, selection.anchor.line].sort();
 
         // Remove if the first text starts with it

package/admin/src/content-manager/hooks/useContentTypeLayout/index.js

@@ -7,7 +7,7 @@ const useContentTypeLayout = () => {
   const currentLayout = useSelector(selectLayout);
 
   const getComponentLayout = useCallback(
-    componentUid => {
+    (componentUid) => {
       return get(currentLayout, ['components', componentUid], {});
     },
     [currentLayout]

package/admin/src/content-manager/hooks/useFetchContentTypeLayout/index.js

@@ -7,10 +7,10 @@ import reducer, { initialState } from './reducer';
 import { makeSelectModelAndComponentSchemas } from '../../pages/App/selectors';
 import { getRequestUrl } from '../../utils';
 
-const useFetchContentTypeLayout = contentTypeUID => {
+const useFetchContentTypeLayout = (contentTypeUID) => {
   const [{ error, isLoading, layout, layouts }, dispatch] = useReducer(reducer, initialState);
   const schemasSelector = useMemo(makeSelectModelAndComponentSchemas, []);
-  const { schemas } = useSelector(state => schemasSelector(state), shallowEqual);
+  const { schemas } = useSelector((state) => schemasSelector(state), shallowEqual);
   const isMounted = useRef(true);
 
   const getData = useCallback(
@@ -68,7 +68,7 @@ const useFetchContentTypeLayout = contentTypeUID => {
   }, [contentTypeUID, getData]);
 
   const updateLayout = useCallback(
-    data => {
+    (data) => {
       dispatch({
         type: 'UPDATE_LAYOUT',
         newLayout: formatLayouts(data, schemas),

package/admin/src/content-manager/hooks/useFetchContentTypeLayout/reducer.js

@@ -9,7 +9,7 @@ export const initialState = {
 };
 
 const reducer = (state, action) =>
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case 'GET_DATA': {
         draftState.isLoading = true;

package/admin/src/content-manager/hooks/useFetchContentTypeLayout/utils/formatLayouts.js

@@ -1,7 +1,7 @@
 import { cloneDeep, get, set } from 'lodash';
 import { getRequestUrl, mergeMetasWithSchema } from '../../../utils';
 
-const getRelationModel = (targetModel, models) => models.find(model => model.uid === targetModel);
+const getRelationModel = (targetModel, models) => models.find((model) => model.uid === targetModel);
 
 // editRelations is an array of strings...
 const formatEditRelationsLayoutWithMetas = (contentTypeConfiguration, models) => {
@@ -46,7 +46,7 @@ const formatLayouts = (initialData, models) => {
   set(data, ['contentType', 'layouts', 'editRelations'], formattedEditRelationsLayout);
   set(data, ['contentType', 'layouts', 'list'], formattedListLayout);
 
-  Object.keys(data.components).forEach(compoUID => {
+  Object.keys(data.components).forEach((compoUID) => {
     const formattedCompoEditLayout = formatLayoutWithMetas(
       data.components[compoUID],
       ctUid,
@@ -63,7 +63,7 @@ const createMetasSchema = (initialData, models) => {
   const data = mergeMetasWithSchema(cloneDeep(initialData), models, 'contentType');
   const { components, contentType } = data;
 
-  const formatMetadatas = targetSchema => {
+  const formatMetadatas = (targetSchema) => {
     return Object.keys(targetSchema.metadatas).reduce((acc, current) => {
       const schema = get(targetSchema, ['attributes', current], {});
       let metadatas = targetSchema.metadatas[current];
@@ -96,7 +96,7 @@ const createMetasSchema = (initialData, models) => {
 
   set(data, ['contentType', 'metadatas'], formatMetadatas(contentType));
 
-  Object.keys(components).forEach(compoUID => {
+  Object.keys(components).forEach((compoUID) => {
     const currentCompo = components[compoUID];
     const updatedMetas = formatMetadatas(currentCompo);
 
@@ -108,7 +108,7 @@ const createMetasSchema = (initialData, models) => {
 
 const formatLayoutWithMetas = (contentTypeConfiguration, ctUid, models) => {
   const formatted = contentTypeConfiguration.layouts.edit.reduce((acc, current) => {
-    const row = current.map(attribute => {
+    const row = current.map((attribute) => {
       const fieldSchema = get(contentTypeConfiguration, ['attributes', attribute.name], {});
 
       const data = {
@@ -241,8 +241,8 @@ const generateRelationQueryInfosForComponents = (
   return queryInfos;
 };
 
-const getDisplayedModels = models =>
-  models.filter(model => model.isDisplayed).map(({ uid }) => uid);
+const getDisplayedModels = (models) =>
+  models.filter((model) => model.isDisplayed).map(({ uid }) => uid);
 
 export default formatLayouts;
 export {

package/admin/src/content-manager/hooks/useFindRedirectionLink/index.js

@@ -3,7 +3,7 @@ import { useQueryParams } from '@strapi/helper-plugin';
 import selectMenuLinks from './selectors';
 import getRedirectionLink from './utils/getRedirectionLink';
 
-const useFindRedirectionLink = slug => {
+const useFindRedirectionLink = (slug) => {
   const [{ rawQuery }] = useQueryParams();
   const collectionTypesMenuLinks = useSelector(selectMenuLinks);
   const redirectionLink = getRedirectionLink(collectionTypesMenuLinks, slug, rawQuery);

package/admin/src/content-manager/hooks/useFindRedirectionLink/selectors.js

@@ -1,4 +1,4 @@
-const selectMenuLinks = state => {
+const selectMenuLinks = (state) => {
   const cmState = state['content-manager_app'];
 
   return cmState.collectionTypeLinks;

package/admin/src/content-manager/hooks/useSyncRbac/reducer.js

@@ -12,7 +12,7 @@ export const initialState = {
 
 const rbacManagerReducer = (state = initialState, action) =>
   // eslint-disable-next-line consistent-return
-  produce(state, draftState => {
+  produce(state, (draftState) => {
     switch (action.type) {
       case SET_PERMISSIONS: {
         draftState.permissions = Object.entries(action.permissions).reduce((acc, current) => {

package/admin/src/content-manager/hooks/useSyncRbac/selectors.js

@@ -1,4 +1,4 @@
-export const selectPermissions = state => state['content-manager_rbacManager'].permissions;
+export const selectPermissions = (state) => state['content-manager_rbacManager'].permissions;
 
-export const selectCollectionTypePermissions = state =>
+export const selectCollectionTypePermissions = (state) =>
   state.rbacProvider.collectionTypesRelatedPermissions;