@strapi/admin 4.4.0-rc.0 → 4.5.0-alpha.0

package/admin/src/content-manager/hooks/useRelation/useRelation.js

@@ -0,0 +1,73 @@
+import { useState } from 'react';
+import { useInfiniteQuery } from 'react-query';
+
+import { axiosInstance } from '../../../core/utils';
+
+export const useRelation = (cacheKey, { relation, search }) => {
+  const [searchParams, setSearchParams] = useState({});
+
+  const fetchRelations = async ({ pageParam = 1 }) => {
+    try {
+      const { data } = await axiosInstance.get(relation?.endpoint, {
+        params: {
+          ...(relation.pageParams ?? {}),
+          page: pageParam,
+        },
+      });
+
+      return data;
+    } catch (err) {
+      return null;
+    }
+  };
+
+  const fetchSearch = async ({ pageParam = 1 }) => {
+    const { data } = await axiosInstance.get(search.endpoint, {
+      params: {
+        ...(search.pageParams ?? {}),
+        ...searchParams,
+        page: pageParam,
+      },
+    });
+
+    return data;
+  };
+
+  const relationsRes = useInfiniteQuery(['relation', cacheKey], fetchRelations, {
+    enabled: relation.enabled,
+    getNextPageParam(lastPage) {
+      // the API may send an empty 204 response
+      if (!lastPage || lastPage.pagination.page >= lastPage.pagination.pageCount) {
+        return undefined;
+      }
+
+      // eslint-disable-next-line consistent-return
+      return lastPage.pagination.page + 1;
+    },
+  });
+
+  const searchRes = useInfiniteQuery(
+    ['relation', cacheKey, 'search', JSON.stringify(searchParams)],
+    fetchSearch,
+    {
+      enabled: Object.keys(searchParams).length > 0,
+      getNextPageParam(lastPage) {
+        if (lastPage.pagination.page >= lastPage.pagination.pageCount) {
+          return undefined;
+        }
+
+        // eslint-disable-next-line consistent-return
+        return lastPage.pagination.page + 1;
+      },
+    }
+  );
+
+  const searchFor = (term, options = {}) => {
+    setSearchParams({
+      ...options,
+      _q: encodeURIComponent(term),
+    });
+  };
+
+  return { relations: relationsRes, search: searchRes, searchFor };
+};

package/admin/src/content-manager/pages/EditSettingsView/components/DisplayedFields.js

@@ -12,7 +12,7 @@ import { getTrad } from '../../../utils';
 import RowsLayout from './RowsLayout';
 import LinkToCTB from './LinkToCTB';
 
-const DisplayedFields = ({ editLayout, editLayoutRemainingFields, onRemoveField, onAddField }) => {
+const DisplayedFields = ({ editLayout, fields, onRemoveField, onAddField }) => {
   const { formatMessage } = useIntl();
 
   return (
@@ -55,9 +55,9 @@ const DisplayedFields = ({ editLayout, editLayoutRemainingFields, onRemoveField,
             startIcon={<Plus />}
             endIcon={null}
             variant="secondary"
-            disabled={editLayoutRemainingFields.length === 0}
+            disabled={fields.length === 0}
           >
-            {editLayoutRemainingFields.map((field) => (
+            {fields.map((field) => (
               <MenuItem key={field} onClick={() => onAddField(field)}>
                 {field}
               </MenuItem>
@@ -71,7 +71,7 @@ const DisplayedFields = ({ editLayout, editLayoutRemainingFields, onRemoveField,
 
 DisplayedFields.propTypes = {
   editLayout: PropTypes.array.isRequired,
-  editLayoutRemainingFields: PropTypes.array.isRequired,
+  fields: PropTypes.array.isRequired,
   onAddField: PropTypes.func.isRequired,
   onRemoveField: PropTypes.func.isRequired,
 };

package/admin/src/content-manager/pages/EditSettingsView/components/FormModal.js

@@ -26,7 +26,7 @@ const HeaderContainer = styled(Flex)`
   }
 `;
 
-const FormModal = ({ onToggle, onMetaChange, onSizeChange, onSubmit, type, customFieldUid }) => {
+const FormModal = ({ onToggle, onMetaChange, onSizeChange, onSubmit, type }) => {
   const { selectedField } = useLayoutDnd();
   const { formatMessage } = useIntl();
 
@@ -47,7 +47,7 @@ const FormModal = ({ onToggle, onMetaChange, onSizeChange, onSubmit, type, custo
       <form onSubmit={onSubmit}>
         <ModalHeader>
           <HeaderContainer>
-            <FieldTypeIcon type={getAttrType()} customFieldUid={customFieldUid} />
+            <FieldTypeIcon type={getAttrType(type)} />
             <Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">
               {formatMessage(
                 {
@@ -81,12 +81,7 @@ const FormModal = ({ onToggle, onMetaChange, onSizeChange, onSubmit, type, custo
   );
 };
 
-FormModal.defaultProps = {
-  customFieldUid: null,
-};
-
 FormModal.propTypes = {
-  customFieldUid: PropTypes.string,
   onSubmit: PropTypes.func.isRequired,
   onToggle: PropTypes.func.isRequired,
   onMetaChange: PropTypes.func.isRequired,

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

@@ -26,7 +26,6 @@ import { getTrad } from '../../utils';
 import reducer, { initialState } from './reducer';
 import init from './init';
 import DisplayedFields from './components/DisplayedFields';
-import RelationalFields from './components/RelationalFields';
 import ModalForm from './components/FormModal';
 import LayoutDndProvider from '../../components/LayoutDndProvider';
 import { unformatLayout } from './utils/layout';
@@ -67,23 +66,10 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
   });
   const editLayout = get(modifiedData, ['layouts', 'edit'], []);
   const displayedFields = flatMap(editLayout, 'rowContent');
-  const editLayoutRemainingFields = Object.keys(modifiedData.attributes)
-    .filter((attr) => {
-      if (!isContentTypeView) {
-        return true;
-      }
-
-      return get(modifiedData, ['attributes', attr, 'type'], '') !== 'relation';
-    })
+  const editLayoutFields = Object.keys(modifiedData.attributes)
     .filter((attr) => get(modifiedData, ['metadatas', attr, 'edit', 'visible'], false) === true)
-    .filter((attr) => {
-      return displayedFields.findIndex((el) => el.name === attr) === -1;
-    })
+    .filter((attr) => displayedFields.findIndex((el) => el.name === attr) === -1)
     .sort();
-  const relationsLayout = get(modifiedData, ['layouts', 'editRelations'], []);
-  const editRelationsLayoutRemainingFields = Object.keys(attributes)
-    .filter((attr) => attributes[attr].type === 'relation')
-    .filter((attr) => relationsLayout.indexOf(attr) === -1);
 
   const handleChange = ({ target: { name, value } }) => {
     dispatch({
@@ -319,38 +305,25 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
                     defaultMessage: 'View',
                   })}
                 </Typography>
-                <Grid gap={4}>
-                  <GridItem col={isContentTypeView ? 8 : 12} s={12}>
-                    <DisplayedFields
-                      attributes={attributes}
-                      editLayout={editLayout}
-                      editLayoutRemainingFields={editLayoutRemainingFields}
-                      onAddField={(field) => {
-                        dispatch({
-                          type: 'ON_ADD_FIELD',
-                          name: field,
-                        });
-                      }}
-                      onRemoveField={(rowId, index) => {
-                        dispatch({
-                          type: 'REMOVE_FIELD',
-                          rowIndex: rowId,
-                          fieldIndex: index,
-                        });
-                      }}
-                    />
-                  </GridItem>
-                  {isContentTypeView && (
-                    <GridItem col={4} s={12}>
-                      <RelationalFields
-                        editRelationsLayoutRemainingFields={editRelationsLayoutRemainingFields}
-                        relationsLayout={relationsLayout}
-                        onAddField={(name) => dispatch({ type: 'ADD_RELATION', name })}
-                        onRemoveField={(index) => dispatch({ type: 'REMOVE_RELATION', index })}
-                      />
-                    </GridItem>
-                  )}
-                </Grid>
+
+                <DisplayedFields
+                  attributes={attributes}
+                  editLayout={editLayout}
+                  fields={editLayoutFields}
+                  onAddField={(field) => {
+                    dispatch({
+                      type: 'ON_ADD_FIELD',
+                      name: field,
+                    });
+                  }}
+                  onRemoveField={(rowId, index) => {
+                    dispatch({
+                      type: 'REMOVE_FIELD',
+                      rowIndex: rowId,
+                      fieldIndex: index,
+                    });
+                  }}
+                />
               </Stack>
             </Box>
           </ContentLayout>
@@ -371,10 +344,9 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
           <ModalForm
             onSubmit={handleMetaSubmit}
             onToggle={handleToggleModal}
+            type={get(attributes, [metaToEdit, 'type'], '')}
             onMetaChange={handleMetaChange}
             onSizeChange={handleSizeChange}
-            type={get(attributes, [metaToEdit, 'type'], '')}
-            customFieldUid={get(attributes, [metaToEdit, 'customField'], '')}
           />
         )}
       </Main>
@@ -395,7 +367,6 @@ EditSettingsView.propTypes = {
     info: PropTypes.object.isRequired,
     layouts: PropTypes.shape({
       list: PropTypes.array.isRequired,
-      editRelations: PropTypes.array.isRequired,
       edit: PropTypes.array.isRequired,
     }).isRequired,
     metadatas: PropTypes.object.isRequired,

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

@@ -19,24 +19,8 @@ const reducer = (state = initialState, action) =>
   // eslint-disable-next-line consistent-return
   produce(state, (draftState) => {
     const layoutPathEdit = ['modifiedData', 'layouts', 'edit'];
-    const layoutPathRelations = ['modifiedData', 'layouts', 'editRelations'];
 
     switch (action.type) {
-      case 'ADD_RELATION': {
-        const editRelationLayoutValue = get(state, layoutPathRelations, []);
-        set(draftState, layoutPathRelations, [...editRelationLayoutValue, action.name]);
-        break;
-      }
-      case 'MOVE_RELATION': {
-        const editRelationLayoutValue = get(state, layoutPathRelations, []);
-        const { fromIndex, toIndex } = action;
-        set(
-          draftState,
-          layoutPathRelations,
-          arrayMoveItem(editRelationLayoutValue, fromIndex, toIndex)
-        );
-        break;
-      }
       case 'MOVE_ROW': {
         const editFieldLayoutValue = get(state, layoutPathEdit, []);
         const { fromIndex, toIndex } = action;
@@ -109,15 +93,6 @@ const reducer = (state = initialState, action) =>
         set(draftState, layoutPathEdit, updatedList);
         break;
       }
-      case 'REMOVE_RELATION': {
-        const relationList = get(state, layoutPathRelations, []);
-        set(
-          draftState,
-          layoutPathRelations,
-          relationList.filter((_, index) => action.index !== index)
-        );
-        break;
-      }
       case 'REORDER_DIFF_ROW': {
         const actualRowContent = get(
           state,

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

@@ -1,4 +1,4 @@
-import React, { memo, useRef, useState } from 'react';
+import React, { memo, useState } from 'react';
 import { useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
@@ -18,11 +18,10 @@ import { Stack } from '@strapi/design-system/Stack';
 import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
 import Check from '@strapi/icons/Check';
 import { getTrad } from '../../../utils';
-import { connect, getDraftRelations, select } from './utils';
+import { connect, select } from './utils';
 
 const Header = ({
   allowedActions: { canUpdate, canCreate, canPublish },
-  componentLayouts,
   initialData,
   isCreatingEntry,
   isSingleType,
@@ -35,9 +34,7 @@ const Header = ({
 }) => {
   const { goBack } = useHistory();
   const [showWarningUnpublish, setWarningUnpublish] = useState(false);
-  const [showWarningDraftRelation, setShowWarningDraftRelation] = useState(false);
   const { formatMessage } = useIntl();
-  const draftRelationsCountRef = useRef(0);
 
   const currentContentTypeMainField = get(layout, ['settings', 'mainField'], 'id');
   const currentContentTypeName = get(layout, ['info', 'displayName'], 'NOT FOUND');
@@ -59,14 +56,6 @@ const Header = ({
     title = currentContentTypeName;
   }
 
-  const checkIfHasDraftRelations = () => {
-    const count = getDraftRelations(modifiedData, layout, componentLayouts);
-
-    draftRelationsCountRef.current = count;
-
-    return count;
-  };
-
   let primaryAction = null;
 
   if (isCreatingEntry && canCreate) {
@@ -97,17 +86,7 @@ const Header = ({
       ? { id: 'app.utils.unpublish', defaultMessage: 'Unpublish' }
       : { id: 'app.utils.publish', defaultMessage: 'Publish' };
 
-    /* eslint-disable indent */
-    const onClick = isPublished
-      ? () => setWarningUnpublish(true)
-      : () => {
-          if (checkIfHasDraftRelations() === 0) {
-            onPublish();
-          } else {
-            setShowWarningDraftRelation(true);
-          }
-        };
-    /* eslint-enable indent */
+    const onClick = isPublished ? () => setWarningUnpublish(true) : () => onPublish();
 
     primaryAction = (
       <Flex>
@@ -135,13 +114,6 @@ const Header = ({
   }
 
   const toggleWarningUnpublish = () => setWarningUnpublish((prevState) => !prevState);
-  const toggleWarningDraftRelation = () => setShowWarningDraftRelation((prevState) => !prevState);
-
-  const handlePublish = () => {
-    toggleWarningDraftRelation();
-    draftRelationsCountRef.current = 0;
-    onPublish();
-  };
 
   const handleUnpublish = () => {
     toggleWarningUnpublish();
@@ -232,64 +204,6 @@ const Header = ({
           />
         </Dialog>
       )}
-
-      {showWarningDraftRelation && (
-        <Dialog
-          onClose={toggleWarningDraftRelation}
-          title="Confirmation"
-          labelledBy="confirmation"
-          describedBy="confirm-description"
-          isOpen={showWarningDraftRelation}
-        >
-          <DialogBody icon={<ExclamationMarkCircle />}>
-            <Stack spacing={2}>
-              <Flex justifyContent="center" style={{ textAlign: 'center' }}>
-                <Typography id="confirm-description">
-                  {draftRelationsCountRef.current}
-                  {formatMessage(
-                    {
-                      id: getTrad(`popUpwarning.warning.has-draft-relations.message`),
-                      defaultMessage:
-                        '<b>{count, plural, =0 { of your content relations is} one { of your content relations is} other { of your content relations are}}</b> not published yet.<br></br>It might engender broken links and errors on your project.',
-                    },
-                    {
-                      br: () => <br />,
-                      b: (chunks) => <Typography fontWeight="bold">{chunks}</Typography>,
-                      count: draftRelationsCountRef.current,
-                    }
-                  )}
-                </Typography>
-              </Flex>
-              <Flex justifyContent="center" style={{ textAlign: 'center' }}>
-                <Typography id="confirm-description">
-                  {formatMessage({
-                    id: getTrad('popUpWarning.warning.publish-question'),
-                    defaultMessage: 'Do you still want to publish it?',
-                  })}
-                </Typography>
-              </Flex>
-            </Stack>
-          </DialogBody>
-          <DialogFooter
-            startAction={
-              <Button onClick={toggleWarningDraftRelation} variant="tertiary">
-                {formatMessage({
-                  id: 'components.popUpWarning.button.cancel',
-                  defaultMessage: 'No, cancel',
-                })}
-              </Button>
-            }
-            endAction={
-              <Button variant="success" onClick={handlePublish}>
-                {formatMessage({
-                  id: getTrad('popUpwarning.warning.has-draft-relations.button-confirm'),
-                  defaultMessage: 'Yes, publish',
-                })}
-              </Button>
-            }
-          />
-        </Dialog>
-      )}
     </>
   );
 };
@@ -300,7 +214,6 @@ Header.propTypes = {
     canCreate: PropTypes.bool.isRequired,
     canPublish: PropTypes.bool.isRequired,
   }).isRequired,
-  componentLayouts: PropTypes.object.isRequired,
   initialData: PropTypes.object.isRequired,
   isCreatingEntry: PropTypes.bool.isRequired,
   isSingleType: PropTypes.bool.isRequired,

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

@@ -1,3 +1,2 @@
 export { default as connect } from './connect';
-export { default as getDraftRelations } from './getDraftRelations';
 export { default as select } from './select';

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

@@ -2,7 +2,6 @@ import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 
 function useSelect() {
   const {
-    allLayoutData,
     initialData,
     isCreatingEntry,
     isSingleType,
@@ -15,7 +14,6 @@ function useSelect() {
   } = useCMEditViewDataManager();
 
   return {
-    componentLayouts: allLayoutData.components,
     initialData,
     isCreatingEntry,
     isSingleType,