@strapi/admin 4.4.3 → 4.5.0-beta.0

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

@@ -1,49 +1,16 @@
 import { cloneDeep, get, set } from 'lodash';
-import { getRequestUrl, mergeMetasWithSchema } from '../../../utils';
+import { mergeMetasWithSchema } from '../../../utils';
 
 const getRelationModel = (targetModel, models) => models.find((model) => model.uid === targetModel);
 
-// editRelations is an array of strings...
-const formatEditRelationsLayoutWithMetas = (contentTypeConfiguration, models) => {
-  const formatted = contentTypeConfiguration.layouts.editRelations.reduce((acc, current) => {
-    const fieldSchema = get(contentTypeConfiguration, ['attributes', current], {});
-    const targetModelUID = get(
-      contentTypeConfiguration,
-      ['attributes', current, 'targetModel'],
-      null
-    );
-    const targetModelSchema = getRelationModel(targetModelUID, models);
-    const targetModelPluginOptions = targetModelSchema.pluginOptions || {};
-    const metadatas = get(contentTypeConfiguration, ['metadatas', current, 'edit'], {});
-    const size = 6;
-
-    const queryInfos = generateRelationQueryInfos(contentTypeConfiguration, current, models);
-
-    acc.push({
-      name: current,
-      size,
-      fieldSchema,
-      metadatas,
-      queryInfos,
-      targetModelPluginOptions,
-    });
-
-    return acc;
-  }, []);
-
-  return formatted;
-};
-
 const formatLayouts = (initialData, models) => {
   const data = createMetasSchema(initialData, models);
 
   const formattedCTEditLayout = formatLayoutWithMetas(data.contentType, null, models);
   const ctUid = data.contentType.uid;
-  const formattedEditRelationsLayout = formatEditRelationsLayoutWithMetas(data.contentType, models);
   const formattedListLayout = formatListLayoutWithMetas(data.contentType, data.components);
 
   set(data, ['contentType', 'layouts', 'edit'], formattedCTEditLayout);
-  set(data, ['contentType', 'layouts', 'editRelations'], formattedEditRelationsLayout);
   set(data, ['contentType', 'layouts', 'list'], formattedListLayout);
 
   Object.keys(data.components).forEach((compoUID) => {
@@ -126,7 +93,6 @@ const formatLayoutWithMetas = (contentTypeConfiguration, ctUid, models) => {
           ? generateRelationQueryInfosForComponents(
               contentTypeConfiguration,
               attribute.name,
-              ctUid,
               models
             )
           : generateRelationQueryInfos(contentTypeConfiguration, attribute.name, models);
@@ -155,7 +121,6 @@ const formatListLayoutWithMetas = (contentTypeConfiguration, components) => {
 
     if (type === 'relation') {
       const queryInfos = {
-        endPoint: `collection-types/${contentTypeConfiguration.uid}`,
         defaultParams: {},
       };
 
@@ -194,51 +159,25 @@ const formatListLayoutWithMetas = (contentTypeConfiguration, components) => {
 };
 
 const generateRelationQueryInfos = (contentTypeConfiguration, fieldName, models) => {
-  const uid = contentTypeConfiguration.uid;
-  const endPoint = getRequestUrl(`relations/${uid}/${fieldName}`);
-  const mainField = get(
-    contentTypeConfiguration,
-    ['metadatas', fieldName, 'edit', 'mainField', 'name'],
-    ''
-  );
   const targetModel = get(contentTypeConfiguration, ['attributes', fieldName, 'targetModel'], '');
-  const shouldDisplayRelationLink = getDisplayedModels(models).indexOf(targetModel) !== -1;
+  const shouldDisplayRelationLink = getDisplayedModels(models).includes(targetModel);
 
-  const queryInfos = {
-    endPoint,
-    containsKey: `${mainField}`,
+  return {
     defaultParams: {},
     shouldDisplayRelationLink,
   };
-
-  return queryInfos;
 };
 
-const generateRelationQueryInfosForComponents = (
-  contentTypeConfiguration,
-  fieldName,
-  ctUid,
-  models
-) => {
-  const endPoint = getRequestUrl(`relations/${ctUid}/${fieldName}`);
-  const mainField = get(
-    contentTypeConfiguration,
-    ['metadatas', fieldName, 'edit', 'mainField', 'name'],
-    ''
-  );
+const generateRelationQueryInfosForComponents = (contentTypeConfiguration, fieldName, models) => {
   const targetModel = get(contentTypeConfiguration, ['attributes', fieldName, 'targetModel'], '');
-  const shouldDisplayRelationLink = getDisplayedModels(models).indexOf(targetModel) !== -1;
+  const shouldDisplayRelationLink = getDisplayedModels(models).includes(targetModel);
 
-  const queryInfos = {
-    endPoint,
-    containsKey: `${mainField}`,
+  return {
     defaultParams: {
-      _component: contentTypeConfiguration.uid,
+      component: contentTypeConfiguration.uid,
     },
     shouldDisplayRelationLink,
   };
-
-  return queryInfos;
 };
 
 const getDisplayedModels = (models) =>
@@ -246,7 +185,6 @@ const getDisplayedModels = (models) =>
 
 export default formatLayouts;
 export {
-  formatEditRelationsLayoutWithMetas,
   formatLayoutWithMetas,
   formatListLayoutWithMetas,
   generateRelationQueryInfos,

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

@@ -0,0 +1 @@
+export { useRelation } from './useRelation';

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

@@ -0,0 +1,81 @@
+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 }) => {
+    try {
+      const { data } = await axiosInstance.get(search.endpoint, {
+        params: {
+          ...(search.pageParams ?? {}),
+          ...searchParams,
+          page: pageParam,
+        },
+      });
+
+      return data;
+    } catch (err) {
+      return null;
+    }
+  };
+
+  const relationsRes = useInfiniteQuery(['relation', cacheKey], fetchRelations, {
+    cacheTime: 0,
+    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;
+    },
+    select: (data) => ({
+      pages: data.pages.map((page) => ({ ...page, results: [...(page.results ?? [])].reverse() })),
+    }),
+  });
+
+  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: 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/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>
@@ -395,7 +368,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,