@strapi/admin 4.5.0-alpha.0 → 4.5.0

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

@@ -6,21 +6,19 @@ const getRelationModel = (targetModel, models) => models.find((model) => model.u
 const formatLayouts = (initialData, models) => {
   const data = createMetasSchema(initialData, models);
 
-  const formattedCTEditLayout = formatLayoutWithMetas(data.contentType, null, models);
-  const ctUid = data.contentType.uid;
+  const formattedCTEditLayout = formatLayoutWithMetas(data.contentType, models);
   const formattedListLayout = formatListLayoutWithMetas(data.contentType, data.components);
 
   set(data, ['contentType', 'layouts', 'edit'], formattedCTEditLayout);
   set(data, ['contentType', 'layouts', 'list'], formattedListLayout);
 
-  Object.keys(data.components).forEach((compoUID) => {
-    const formattedCompoEditLayout = formatLayoutWithMetas(
-      data.components[compoUID],
-      ctUid,
+  Object.keys(data.components).forEach((componentUid) => {
+    const formattedComponentEditLayout = formatLayoutWithMetas(
+      data.components[componentUid],
       models
     );
 
-    set(data, ['components', compoUID, 'layouts', 'edit'], formattedCompoEditLayout);
+    set(data, ['components', componentUid, 'layouts', 'edit'], formattedComponentEditLayout);
   });
 
   return data;
@@ -73,8 +71,8 @@ const createMetasSchema = (initialData, models) => {
   return data;
 };
 
-const formatLayoutWithMetas = (contentTypeConfiguration, ctUid, models) => {
-  const formatted = contentTypeConfiguration.layouts.edit.reduce((acc, current) => {
+const formatLayoutWithMetas = (contentTypeConfiguration, models) =>
+  contentTypeConfiguration.layouts.edit.reduce((acc, current) => {
     const row = current.map((attribute) => {
       const fieldSchema = get(contentTypeConfiguration, ['attributes', attribute.name], {});
 
@@ -85,20 +83,17 @@ const formatLayoutWithMetas = (contentTypeConfiguration, ctUid, models) => {
       };
 
       if (fieldSchema.type === 'relation') {
-        const targetModelUID = fieldSchema.targetModel;
-        const targetModelSchema = getRelationModel(targetModelUID, models);
+        const targetModelSchema = getRelationModel(fieldSchema.targetModel, models);
         const targetModelPluginOptions = targetModelSchema.pluginOptions || {};
 
-        const queryInfos = ctUid
-          ? generateRelationQueryInfosForComponents(
-              contentTypeConfiguration,
-              attribute.name,
-              models
-            )
-          : generateRelationQueryInfos(contentTypeConfiguration, attribute.name, models);
-
         set(data, 'targetModelPluginOptions', targetModelPluginOptions);
-        set(data, 'queryInfos', queryInfos);
+        set(data, 'queryInfos', {
+          shouldDisplayRelationLink: shouldDisplayRelationLink(
+            contentTypeConfiguration,
+            attribute.name,
+            models
+          ),
+        });
       }
 
       return data;
@@ -109,9 +104,6 @@ const formatLayoutWithMetas = (contentTypeConfiguration, ctUid, models) => {
     return acc;
   }, []);
 
-  return formatted;
-};
-
 const formatListLayoutWithMetas = (contentTypeConfiguration, components) => {
   const formatted = contentTypeConfiguration.layouts.list.reduce((acc, current) => {
     const fieldSchema = get(contentTypeConfiguration, ['attributes', current], {});
@@ -120,11 +112,7 @@ const formatListLayoutWithMetas = (contentTypeConfiguration, components) => {
     const type = fieldSchema.type;
 
     if (type === 'relation') {
-      const queryInfos = {
-        defaultParams: {},
-      };
-
-      acc.push({ key: `__${current}_key__`, name: current, fieldSchema, metadatas, queryInfos });
+      acc.push({ key: `__${current}_key__`, name: current, fieldSchema, metadatas });
 
       return acc;
     }
@@ -158,26 +146,10 @@ const formatListLayoutWithMetas = (contentTypeConfiguration, components) => {
   return formatted;
 };
 
-const generateRelationQueryInfos = (contentTypeConfiguration, fieldName, models) => {
+const shouldDisplayRelationLink = (contentTypeConfiguration, fieldName, models) => {
   const targetModel = get(contentTypeConfiguration, ['attributes', fieldName, 'targetModel'], '');
-  const shouldDisplayRelationLink = getDisplayedModels(models).includes(targetModel);
 
-  return {
-    defaultParams: {},
-    shouldDisplayRelationLink,
-  };
-};
-
-const generateRelationQueryInfosForComponents = (contentTypeConfiguration, fieldName, models) => {
-  const targetModel = get(contentTypeConfiguration, ['attributes', fieldName, 'targetModel'], '');
-  const shouldDisplayRelationLink = getDisplayedModels(models).includes(targetModel);
-
-  return {
-    defaultParams: {
-      component: contentTypeConfiguration.uid,
-    },
-    shouldDisplayRelationLink,
-  };
+  return getDisplayedModels(models).includes(targetModel);
 };
 
 const getDisplayedModels = (models) =>
@@ -187,7 +159,6 @@ export default formatLayouts;
 export {
   formatLayoutWithMetas,
   formatListLayoutWithMetas,
-  generateRelationQueryInfos,
-  generateRelationQueryInfosForComponents,
+  shouldDisplayRelationLink,
   getDisplayedModels,
 };

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

@@ -0,0 +1,14 @@
+import { useEffect, useRef } from 'react';
+
+/**
+ * @type {<T>(value: T) => T | undefined}
+ */
+export const usePrev = (value) => {
+  const ref = useRef();
+
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+
+  return ref.current;
+};

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

@@ -1,11 +1,16 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useInfiniteQuery } from 'react-query';
 
 import { axiosInstance } from '../../../core/utils';
 
-export const useRelation = (cacheKey, { relation, search }) => {
-  const [searchParams, setSearchParams] = useState({});
+import { normalizeRelations } from '../../components/RelationInputDataManager/utils';
 
+export const useRelation = (cacheKey, { name, relation, search }) => {
+  const [searchParams, setSearchParams] = useState({});
+  const [currentPage, setCurrentPage] = useState(0);
+  /**
+   * This runs in `useInfiniteQuery` to actually fetch the data
+   */
   const fetchRelations = async ({ pageParam = 1 }) => {
     try {
       const { data } = await axiosInstance.get(relation?.endpoint, {
@@ -15,6 +20,8 @@ export const useRelation = (cacheKey, { relation, search }) => {
         },
       });
 
+      setCurrentPage(pageParam);
+
       return data;
     } catch (err) {
       return null;
@@ -22,37 +29,131 @@ export const useRelation = (cacheKey, { relation, search }) => {
   };
 
   const fetchSearch = async ({ pageParam = 1 }) => {
-    const { data } = await axiosInstance.get(search.endpoint, {
-      params: {
-        ...(search.pageParams ?? {}),
-        ...searchParams,
-        page: pageParam,
-      },
-    });
+    try {
+      const { data } = await axiosInstance.get(search.endpoint, {
+        params: {
+          ...(search.pageParams ?? {}),
+          ...searchParams,
+          page: pageParam,
+        },
+      });
 
-    return data;
+      return data;
+    } catch (err) {
+      return null;
+    }
   };
 
+  const { onLoad: onLoadRelationsCallback, normalizeArguments = {} } = relation;
+
   const relationsRes = useInfiniteQuery(['relation', cacheKey], fetchRelations, {
+    cacheTime: 0,
     enabled: relation.enabled,
+    /**
+     * @type {(lastPage:
+     * | { data: null }
+     * | { results: any[],
+     *     pagination: {
+     *      page: number,
+     *      pageCount: number,
+     *      pageSize: number,
+     *      total: number
+     *     }
+     *   }
+     * ) => number}
+     */
     getNextPageParam(lastPage) {
-      // the API may send an empty 204 response
-      if (!lastPage || lastPage.pagination.page >= lastPage.pagination.pageCount) {
+      const isXToOneRelation = !lastPage?.pagination;
+
+      if (
+        !lastPage || // the API may send an empty 204 response
+        isXToOneRelation || // xToOne relations do not have a pagination
+        lastPage?.pagination.page >= lastPage?.pagination.pageCount
+      ) {
         return undefined;
       }
 
       // eslint-disable-next-line consistent-return
       return lastPage.pagination.page + 1;
     },
+    select: (data) => ({
+      ...data,
+      pages: data.pages.map((page) => {
+        if (!page) {
+          return page;
+        }
+
+        const { data, results, pagination } = page;
+        const isXToOneRelation = !!data;
+        let normalizedResults = [];
+
+        // xToOne relations return an object, which we normalize so that relations
+        // always have the same shape
+        if (isXToOneRelation) {
+          normalizedResults = [data];
+        } else if (results) {
+          normalizedResults = [...results].reverse();
+        }
+
+        return {
+          pagination,
+          results: normalizedResults,
+        };
+      }),
+    }),
   });
 
+  const { pageGoal } = relation;
+
+  const { status, data, fetchNextPage, hasNextPage } = relationsRes;
+
+  useEffect(() => {
+    /**
+     * This ensures the infiniteQuery hook fetching has caught-up with the modifiedData
+     * state i.e. in circumstances where you add 10 relations, the browserState knows this,
+     * but the hook would think it could fetch more, when in reality, it can't.
+     */
+    if (pageGoal > currentPage && hasNextPage && status === 'success') {
+      fetchNextPage({
+        pageParam: currentPage + 1,
+      });
+    }
+  }, [pageGoal, currentPage, fetchNextPage, hasNextPage, status]);
+
+  useEffect(() => {
+    if (status === 'success' && data && data.pages?.at(-1)?.results && onLoadRelationsCallback) {
+      // everytime we fetch, we normalize prior to adding to redux
+      const normalizedResults = normalizeRelations(data.pages.at(-1).results, normalizeArguments);
+
+      // this is loadRelation from EditViewDataManagerProvider
+      onLoadRelationsCallback({
+        target: { name, value: normalizedResults },
+      });
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [status, onLoadRelationsCallback, name, data]);
+
   const searchRes = useInfiniteQuery(
     ['relation', cacheKey, 'search', JSON.stringify(searchParams)],
     fetchSearch,
     {
       enabled: Object.keys(searchParams).length > 0,
+      /**
+       * @type {(lastPage:
+       * | { data: null }
+       * | { results: any[],
+       *     pagination: {
+       *      page: number,
+       *      pageCount: number,
+       *      pageSize: number,
+       *      total: number
+       *     }
+       *   }
+       * ) => number}
+       */
       getNextPageParam(lastPage) {
-        if (lastPage.pagination.page >= lastPage.pagination.pageCount) {
+        if (!lastPage?.pagination || lastPage.pagination.page >= lastPage.pagination.pageCount) {
           return undefined;
         }
 
@@ -65,7 +166,7 @@ export const useRelation = (cacheKey, { relation, search }) => {
   const searchFor = (term, options = {}) => {
     setSearchParams({
       ...options,
-      _q: encodeURIComponent(term),
+      _q: term,
     });
   };
 

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

@@ -14,6 +14,9 @@ const initialState = {
   singleTypeLinks: [],
 };
 
+/**
+ * Known as content-manager_app in the redux store
+ */
 const mainReducer = (state = initialState, action) =>
   produce(state, (draftState) => {
     switch (action.type) {

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 }) => {
+const FormModal = ({ onToggle, onMetaChange, onSizeChange, onSubmit, type, customFieldUid }) => {
   const { selectedField } = useLayoutDnd();
   const { formatMessage } = useIntl();
 
@@ -47,7 +47,7 @@ const FormModal = ({ onToggle, onMetaChange, onSizeChange, onSubmit, type }) =>
       <form onSubmit={onSubmit}>
         <ModalHeader>
           <HeaderContainer>
-            <FieldTypeIcon type={getAttrType(type)} />
+            <FieldTypeIcon type={getAttrType()} customFieldUid={customFieldUid} />
             <Typography fontWeight="bold" textColor="neutral800" as="h2" id="title">
               {formatMessage(
                 {
@@ -81,7 +81,12 @@ const FormModal = ({ onToggle, onMetaChange, onSizeChange, onSubmit, type }) =>
   );
 };
 
+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

@@ -344,9 +344,10 @@ 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>

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

@@ -17,9 +17,15 @@ import { Typography } from '@strapi/design-system/Typography';
 import { Stack } from '@strapi/design-system/Stack';
 import ExclamationMarkCircle from '@strapi/icons/ExclamationMarkCircle';
 import Check from '@strapi/icons/Check';
+import styled from 'styled-components';
 import { getTrad } from '../../../utils';
 import { connect, select } from './utils';
 
+// TODO: replace with textAlign Typography props when available
+const FlexTextAlign = styled(Flex)`
+  text-align: center;
+`;
+
 const Header = ({
   allowedActions: { canUpdate, canCreate, canPublish },
   initialData,
@@ -31,6 +37,8 @@ const Header = ({
   onPublish,
   onUnpublish,
   status,
+  publishConfirmation: { show: showPublishConfirmation, draftCount },
+  onPublishPromptDismissal,
 }) => {
   const { goBack } = useHistory();
   const [showWarningUnpublish, setWarningUnpublish] = useState(false);
@@ -150,60 +158,115 @@ const Header = ({
           </Link>
         }
       />
-      {showWarningUnpublish && (
-        <Dialog
-          onClose={toggleWarningUnpublish}
-          title="Confirmation"
-          labelledBy="confirmation"
-          describedBy="confirm-description"
-          isOpen={showWarningUnpublish}
-        >
-          <DialogBody icon={<ExclamationMarkCircle />}>
-            <Stack spacing={2}>
-              <Flex justifyContent="center" style={{ textAlign: 'center' }}>
-                <Typography id="confirm-description">
-                  {formatMessage(
-                    {
-                      id: getTrad('popUpWarning.warning.unpublish'),
-                      defaultMessage:
-                        'Unpublish this content will automatically change it to a draft.',
-                    },
-                    {
-                      br: () => <br />,
-                    }
-                  )}
-                </Typography>
-              </Flex>
-              <Flex justifyContent="center" style={{ textAlign: 'center' }}>
-                <Typography id="confirm-description">
-                  {formatMessage({
-                    id: getTrad('popUpWarning.warning.unpublish-question'),
-                    defaultMessage: 'Are you sure you want to unpublish it?',
-                  })}
-                </Typography>
-              </Flex>
-            </Stack>
-          </DialogBody>
-          <DialogFooter
-            startAction={
-              <Button onClick={toggleWarningUnpublish} variant="tertiary">
+      <Dialog
+        onClose={toggleWarningUnpublish}
+        title="Confirmation"
+        labelledBy="confirmation"
+        describedBy="confirm-description"
+        isOpen={showWarningUnpublish}
+      >
+        <DialogBody icon={<ExclamationMarkCircle />}>
+          <Stack spacing={2}>
+            <Flex justifyContent="center" style={{ textAlign: 'center' }}>
+              <Typography id="confirm-description">
+                {formatMessage(
+                  {
+                    id: getTrad('popUpWarning.warning.unpublish'),
+                    defaultMessage:
+                      'Unpublish this content will automatically change it to a draft.',
+                  },
+                  {
+                    br: () => <br />,
+                  }
+                )}
+              </Typography>
+            </Flex>
+            <Flex justifyContent="center" style={{ textAlign: 'center' }}>
+              <Typography id="confirm-description">
                 {formatMessage({
-                  id: 'components.popUpWarning.button.cancel',
-                  defaultMessage: 'No, cancel',
+                  id: getTrad('popUpWarning.warning.unpublish-question'),
+                  defaultMessage: 'Are you sure you want to unpublish it?',
                 })}
-              </Button>
-            }
-            endAction={
-              <Button variant="danger-light" onClick={handleUnpublish}>
+              </Typography>
+            </Flex>
+          </Stack>
+        </DialogBody>
+        <DialogFooter
+          startAction={
+            <Button onClick={toggleWarningUnpublish} variant="tertiary">
+              {formatMessage({
+                id: 'components.popUpWarning.button.cancel',
+                defaultMessage: 'Cancel',
+              })}
+            </Button>
+          }
+          endAction={
+            <Button variant="danger-light" onClick={handleUnpublish}>
+              {formatMessage({
+                id: 'components.popUpWarning.button.confirm',
+                defaultMessage: 'Confirm',
+              })}
+            </Button>
+          }
+        />
+      </Dialog>
+      <Dialog
+        onClose={onPublishPromptDismissal}
+        title={formatMessage({
+          id: getTrad(`popUpWarning.warning.has-draft-relations.title`),
+          defaultMessage: 'Confirmation',
+        })}
+        labelledBy="confirmation"
+        describedBy="confirm-description"
+        isOpen={showPublishConfirmation}
+      >
+        <DialogBody icon={<ExclamationMarkCircle />}>
+          <Stack spacing={2}>
+            <FlexTextAlign justifyContent="center">
+              <Typography id="confirm-description">
+                {draftCount}
+                {formatMessage(
+                  {
+                    id: getTrad(`popUpwarning.warning.has-draft-relations.message`),
+                    defaultMessage:
+                      '<b>{count, plural, one { relation is} other { relations are}}</b> not published yet and might lead to unexpected behavior.',
+                  },
+                  {
+                    b: (chunks) => <Typography fontWeight="bold">{chunks}</Typography>,
+                    count: draftCount,
+                  }
+                )}
+              </Typography>
+            </FlexTextAlign>
+            <FlexTextAlign justifyContent="center">
+              <Typography id="confirm-description">
                 {formatMessage({
-                  id: 'components.popUpWarning.button.confirm',
-                  defaultMessage: 'Yes, confirm',
+                  id: getTrad('popUpWarning.warning.publish-question'),
+                  defaultMessage: 'Do you still want to publish?',
                 })}
-              </Button>
-            }
-          />
-        </Dialog>
-      )}
+              </Typography>
+            </FlexTextAlign>
+          </Stack>
+        </DialogBody>
+        <DialogFooter
+          startAction={
+            <Button onClick={onPublishPromptDismissal} variant="tertiary">
+              {formatMessage({
+                id: 'components.popUpWarning.button.cancel',
+                defaultMessage: 'Cancel',
+              })}
+            </Button>
+          }
+          endAction={
+            <Button variant="success" onClick={onPublish}>
+              {formatMessage({
+                id: getTrad('popUpwarning.warning.has-draft-relations.button-confirm'),
+                defaultMessage: 'Publish',
+              })}
+            </Button>
+          }
+        />
+      </Dialog>
     </>
   );
 };
@@ -223,6 +286,11 @@ Header.propTypes = {
   modifiedData: PropTypes.object.isRequired,
   onPublish: PropTypes.func.isRequired,
   onUnpublish: PropTypes.func.isRequired,
+  publishConfirmation: PropTypes.shape({
+    show: PropTypes.bool.isRequired,
+    draftCount: PropTypes.number.isRequired,
+  }).isRequired,
+  onPublishPromptDismissal: PropTypes.func.isRequired,
 };
 
 const Memoized = memo(Header, isEqualFastCompare);

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

@@ -11,6 +11,8 @@ function useSelect() {
     modifiedData,
     onPublish,
     onUnpublish,
+    publishConfirmation,
+    onPublishPromptDismissal,
   } = useCMEditViewDataManager();
 
   return {
@@ -23,6 +25,8 @@ function useSelect() {
     modifiedData,
     onPublish,
     onUnpublish,
+    publishConfirmation,
+    onPublishPromptDismissal,
   };
 }