@strapi/admin 4.5.0-alpha.0 → 4.5.0-beta.0

package/admin/src/StrapiApp.js

@@ -8,7 +8,7 @@ import invariant from 'invariant';
 import { Helmet } from 'react-helmet';
 import { basename, createHook } from './core/utils';
 import configureStore from './core/store/configureStore';
-import { Plugin } from './core/apis';
+import { customFields, Plugin } from './core/apis';
 import App from './pages/App';
 import AuthLogo from './assets/images/logo_strapi_auth_v4.png';
 import MenuLogo from './assets/images/logo_strapi_menu.png';
@@ -48,6 +48,7 @@ class StrapiApp {
     this.admin = {
       injectionZones,
     };
+    this.customFields = customFields;
 
     this.menu = [];
     this.settings = {
@@ -281,17 +282,7 @@ class StrapiApp {
 
   async initialize() {
     Object.keys(this.appPlugins).forEach((plugin) => {
-      this.appPlugins[plugin].register({
-        addComponents: this.addComponents,
-        addCorePluginMenuLink: this.addCorePluginMenuLink,
-        addFields: this.addFields,
-        addMenuLink: this.addMenuLink,
-        addMiddlewares: this.addMiddlewares,
-        addReducers: this.addReducers,
-        createHook: this.createHook,
-        createSettingSection: this.createSettingSection,
-        registerPlugin: this.registerPlugin,
-      });
+      this.appPlugins[plugin].register(this);
     });
   }
 
@@ -431,6 +422,7 @@ class StrapiApp {
         authLogo={this.configurations.authLogo}
         components={components}
         fields={fields}
+        customFields={this.customFields}
         localeNames={localeNames}
         getAdminInjectedComponents={this.getAdminInjectedComponents}
         getPlugin={this.getPlugin}

package/admin/src/components/Providers/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { QueryClientProvider, QueryClient } from 'react-query';
-import { LibraryProvider, StrapiAppProvider } from '@strapi/helper-plugin';
+import { LibraryProvider, CustomFieldsProvider, StrapiAppProvider } from '@strapi/helper-plugin';
 import { Provider } from 'react-redux';
 import { AdminContext } from '../../contexts';
 import ConfigurationsProvider from '../ConfigurationsProvider';
@@ -25,6 +25,7 @@ const Providers = ({
   authLogo,
   children,
   components,
+  customFields,
   fields,
   getAdminInjectedComponents,
   getPlugin,
@@ -64,15 +65,17 @@ const Providers = ({
                   settings={settings}
                 >
                   <LibraryProvider components={components} fields={fields}>
-                    <LanguageProvider messages={messages} localeNames={localeNames}>
-                      <AutoReloadOverlayBlockerProvider>
-                        <OverlayBlocker>
-                          <GuidedTour>
-                            <Notifications>{children}</Notifications>
-                          </GuidedTour>
-                        </OverlayBlocker>
-                      </AutoReloadOverlayBlockerProvider>
-                    </LanguageProvider>
+                    <CustomFieldsProvider customFields={customFields}>
+                      <LanguageProvider messages={messages} localeNames={localeNames}>
+                        <AutoReloadOverlayBlockerProvider>
+                          <OverlayBlocker>
+                            <GuidedTour>
+                              <Notifications>{children}</Notifications>
+                            </GuidedTour>
+                          </OverlayBlocker>
+                        </AutoReloadOverlayBlockerProvider>
+                      </LanguageProvider>
+                    </CustomFieldsProvider>
                   </LibraryProvider>
                 </StrapiAppProvider>
               </ConfigurationsProvider>
@@ -88,6 +91,7 @@ Providers.propTypes = {
   authLogo: PropTypes.oneOfType([PropTypes.string, PropTypes.any]).isRequired,
   children: PropTypes.element.isRequired,
   components: PropTypes.object.isRequired,
+  customFields: PropTypes.object.isRequired,
   fields: PropTypes.object.isRequired,
   getAdminInjectedComponents: PropTypes.func.isRequired,
   getPlugin: PropTypes.func.isRequired,

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

@@ -294,6 +294,29 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
     ]
   );
 
+  const onDraftRelationCheck = useCallback(async () => {
+    try {
+      trackUsageRef.current('willCheckDraftRelations');
+
+      const endPoint = getRequestUrl(
+        `collection-types/${slug}/${id}/actions/numberOfDraftRelations`
+      );
+      dispatch(setStatus('draft-relation-check-pending'));
+
+      const numberOfDraftRelations = await axiosInstance.get(endPoint);
+      trackUsageRef.current('didCheckDraftRelations');
+
+      dispatch(setStatus('resolved'));
+
+      return numberOfDraftRelations.data.data;
+    } catch (err) {
+      displayErrors(err);
+      dispatch(setStatus('resolved'));
+
+      return Promise.reject(err);
+    }
+  }, [displayErrors, id, slug, dispatch]);
+
   const onPublish = useCallback(async () => {
     try {
       trackUsageRef.current('willPublishEntry');
@@ -397,6 +420,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
     onDeleteSucceeded,
     onPost,
     onPublish,
+    onDraftRelationCheck,
     onPut,
     onUnpublish,
     status,

package/admin/src/content-manager/components/DynamicTable/TableRows/index.js

@@ -1,20 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Link, useHistory } from 'react-router-dom';
+import { useIntl } from 'react-intl';
+
 import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox';
 import { Box } from '@strapi/design-system/Box';
 import { IconButton } from '@strapi/design-system/IconButton';
 import { Tbody, Td, Tr } from '@strapi/design-system/Table';
 import { Flex } from '@strapi/design-system/Flex';
+
 import Trash from '@strapi/icons/Trash';
 import Duplicate from '@strapi/icons/Duplicate';
 import Pencil from '@strapi/icons/Pencil';
+
 import { useTracking, stopPropagation, onRowClick } from '@strapi/helper-plugin';
-import { useHistory } from 'react-router-dom';
-import { useIntl } from 'react-intl';
+
 import { usePluginsQueryParams } from '../../../hooks';
-import CellContent from '../CellContent';
+
 import { getFullName } from '../../../../utils';
 
+import CellContent from '../CellContent';
+
 const TableRows = ({
   canCreate,
   canDelete,
@@ -102,13 +108,14 @@ const TableRows = ({
               <Td>
                 <Flex justifyContent="end" {...stopPropagation}>
                   <IconButton
+                    forwardedAs={Link}
                     onClick={() => {
                       trackUsage('willEditEntryFromButton');
-                      push({
-                        pathname: `${pathname}/${data.id}`,
-                        state: { from: pathname },
-                        search: pluginsQueryParams,
-                      });
+                    }}
+                    to={{
+                      pathname: `${pathname}/${data.id}`,
+                      state: { from: pathname },
+                      search: pluginsQueryParams,
                     }}
                     label={formatMessage(
                       { id: 'app.component.table.edit', defaultMessage: 'Edit {target}' },
@@ -121,12 +128,11 @@ const TableRows = ({
                   {canCreate && (
                     <Box paddingLeft={1}>
                       <IconButton
-                        onClick={() => {
-                          push({
-                            pathname: `${pathname}/create/clone/${data.id}`,
-                            state: { from: pathname },
-                            search: pluginsQueryParams,
-                          });
+                        forwardedAs={Link}
+                        to={{
+                          pathname: `${pathname}/create/clone/${data.id}`,
+                          state: { from: pathname },
+                          search: pluginsQueryParams,
                         }}
                         label={formatMessage(
                           {
@@ -146,7 +152,6 @@ const TableRows = ({
                       <IconButton
                         onClick={() => {
                           trackUsage('willDeleteEntryFromList');
-
                           onClickDelete(data.id);
                         }}
                         label={formatMessage(

package/admin/src/content-manager/components/DynamicZone/components/Component/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo, Suspense, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import isEqual from 'react-fast-compare';
@@ -8,7 +8,9 @@ import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-sys
 import { IconButton } from '@strapi/design-system/IconButton';
 import { FocusTrap } from '@strapi/design-system/FocusTrap';
 import { Box } from '@strapi/design-system/Box';
+import { Flex } from '@strapi/design-system/Flex';
 import { Stack } from '@strapi/design-system/Stack';
+import { Loader } from '@strapi/design-system/Loader';
 import Trash from '@strapi/icons/Trash';
 import ArrowDown from '@strapi/icons/ArrowDown';
 import ArrowUp from '@strapi/icons/ArrowUp';
@@ -147,14 +149,22 @@ const Component = ({
           />
           <AccordionContent>
             <AccordionContentRadius background="neutral0">
-              <FocusTrap onEscape={() => onToggle(index)}>
-                <FieldComponent
-                  componentUid={componentUid}
-                  icon={icon}
-                  name={`${name}.${index}`}
-                  isFromDynamicZone
-                />
-              </FocusTrap>
+              <Suspense
+                fallback={
+                  <Flex justifyContent="center" paddingTop={4} paddingBottom={4}>
+                    <Loader>Loading content.</Loader>
+                  </Flex>
+                }
+              >
+                <FocusTrap onEscape={() => onToggle(index)}>
+                  <FieldComponent
+                    componentUid={componentUid}
+                    icon={icon}
+                    name={`${name}.${index}`}
+                    isFromDynamicZone
+                  />
+                </FocusTrap>
+              </Suspense>
             </AccordionContentRadius>
           </AccordionContent>
         </Accordion>

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

@@ -36,6 +36,7 @@ const EditViewDataManagerProvider = ({
   isSingleType,
   onPost,
   onPublish,
+  onDraftRelationCheck,
   onPut,
   onUnpublish,
   readActionAllowedFields,
@@ -46,7 +47,15 @@ const EditViewDataManagerProvider = ({
   updateActionAllowedFields,
 }) => {
   const [reducerState, dispatch] = useReducer(reducer, initialState);
-  const { formErrors, initialData, modifiedData, modifiedDZName, shouldCheckErrors } = reducerState;
+  const {
+    formErrors,
+    initialData,
+    modifiedData,
+    modifiedDZName,
+    shouldCheckErrors,
+    publishConfirmation,
+  } = reducerState;
+
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
 
@@ -301,6 +310,14 @@ const EditViewDataManagerProvider = ({
     return shouldNotRunValidations ? { status: 'draft' } : {};
   }, [hasDraftAndPublish, shouldNotRunValidations]);
 
+  const handlePublishPromptDismissal = useCallback(async (e) => {
+    e.preventDefault();
+
+    return dispatch({
+      type: 'RESET_PUBLISH_CONFIRMATION',
+    });
+  }, []);
+
   const handleSubmit = useCallback(
     async (e) => {
       e.preventDefault();
@@ -346,8 +363,27 @@ const EditViewDataManagerProvider = ({
       },
       { isCreatingEntry, isDraft: false, isFromComponent: false }
     );
-    let errors = {};
 
+    const draftCount = await onDraftRelationCheck();
+
+    if (!publishConfirmation.show && draftCount > 0) {
+      // If the warning hasn't already been shown and draft relations are found,
+      // abort the publish call and ask for confirmation from the user
+      dispatch({
+        type: 'SET_PUBLISH_CONFIRMATION',
+        publishConfirmation: {
+          show: true,
+          draftCount,
+        },
+      });
+
+      return;
+    }
+    dispatch({
+      type: 'RESET_PUBLISH_CONFIRMATION',
+    });
+
+    let errors = {};
     try {
       await schema.validate(modifiedData, { abortEarly: false });
     } catch (err) {
@@ -369,7 +405,15 @@ const EditViewDataManagerProvider = ({
       type: 'SET_FORM_ERRORS',
       errors,
     });
-  }, [allLayoutData, currentContentTypeLayout, isCreatingEntry, modifiedData, onPublish]);
+  }, [
+    allLayoutData,
+    currentContentTypeLayout,
+    isCreatingEntry,
+    modifiedData,
+    publishConfirmation.show,
+    onPublish,
+    onDraftRelationCheck,
+  ]);
 
   const shouldCheckDZErrors = useCallback(
     (dzName) => {
@@ -506,6 +550,8 @@ const EditViewDataManagerProvider = ({
         slug,
         triggerFormValidation,
         updateActionAllowedFields,
+        onPublishPromptDismissal: handlePublishPromptDismissal,
+        publishConfirmation,
       }}
     >
       <>
@@ -549,6 +595,7 @@ EditViewDataManagerProvider.propTypes = {
   isSingleType: PropTypes.bool.isRequired,
   onPost: PropTypes.func.isRequired,
   onPublish: PropTypes.func.isRequired,
+  onDraftRelationCheck: PropTypes.func.isRequired,
   onPut: PropTypes.func.isRequired,
   onUnpublish: PropTypes.func.isRequired,
   readActionAllowedFields: PropTypes.array.isRequired,

package/admin/src/content-manager/components/EditViewDataManagerProvider/reducer.js

@@ -15,6 +15,10 @@ const initialState = {
   modifiedData: null,
   shouldCheckErrors: false,
   modifiedDZName: null,
+  publishConfirmation: {
+    show: false,
+    draftCount: 0,
+  },
 };
 
 const reducer = (state, action) =>
@@ -94,20 +98,50 @@ const reducer = (state, action) =>
         const path = ['modifiedData', ...action.keys];
         const { value, replace = false } = action;
         const connectedRelations = get(state, [...path, 'connect']);
-        const disconnectedRelations = get(state, [...path, 'disconnect']);
+        const disconnectedRelations = get(state, [...path, 'disconnect']) ?? [];
+        const savedRelations = get(state, [...path, 'results']) ?? [];
+        const existInSavedRelation =
+          savedRelations?.findIndex((savedRelations) => savedRelations.id === value.id) !== -1;
 
         if (!connectedRelations) {
           set(draftState, [...path, 'connect'], []);
         }
 
-        if (replace) {
-          set(draftState, [...path, 'connect'], [value]);
-        } else {
-          const nextValue = get(draftState, [...path, 'connect']);
-          nextValue.push(value);
+        // We should add a relation in the connect array only if it is not an already saved relation
+        if (!existInSavedRelation) {
+          if (replace) {
+            set(draftState, [...path, 'connect'], [value]);
+          } else {
+            const nextValue = get(draftState, [...path, 'connect']);
+            nextValue.push(value);
+          }
         }
 
-        if (disconnectedRelations?.length) {
+        // Disconnect array handling
+        if (replace) {
+          // In xToOne relations we should place the saved relation in disconnected array to not display it
+          // only needed if there is a saved relation and it is not already stored in disconnected array
+          if (savedRelations.length && !disconnectedRelations.length) {
+            set(draftState, [...path, 'disconnect'], savedRelations);
+          }
+
+          // If the saved relation is stored in disconnected array
+          // We should remove it when an action requires to reconnect this relation
+          // We then reset the connect/disconnect state
+          if (disconnectedRelations.length) {
+            const existsInDisconnectedRelations =
+              disconnectedRelations.findIndex(
+                (disconnectedRelation) => disconnectedRelation?.id === value.id
+              ) > -1;
+
+            if (existsInDisconnectedRelations) {
+              set(draftState, [...path, 'disconnect'], []);
+              set(draftState, [...path, 'connect'], []);
+            }
+          }
+        } else if (disconnectedRelations.length) {
+          // In xToMany relations, when an action requires to connect a relation
+          // We should remove it from the disconnected array if it existed in it
           const existsInDisconnect = disconnectedRelations.find(
             (disconnectValue) => disconnectValue.id === value.id
           );
@@ -123,8 +157,8 @@ const reducer = (state, action) =>
       case 'DISCONNECT_RELATION': {
         const path = ['modifiedData', ...action.keys];
         const { value } = action;
-        const disconnectedRelations = get(state, [...path, 'disconnect']);
         const connectedRelations = get(state, [...path, 'connect']);
+        const disconnectedRelations = get(state, [...path, 'disconnect']);
 
         if (!disconnectedRelations) {
           set(draftState, [...path, 'disconnect'], []);
@@ -345,7 +379,14 @@ const reducer = (state, action) =>
 
         break;
       }
-
+      case 'SET_PUBLISH_CONFIRMATION': {
+        draftState.publishConfirmation = { ...action.publishConfirmation };
+        break;
+      }
+      case 'RESET_PUBLISH_CONFIRMATION': {
+        draftState.publishConfirmation = { ...state.publishConfirmation, show: false };
+        break;
+      }
       default:
         return draftState;
     }

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

@@ -1,5 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { Box } from '@strapi/design-system/Box';
+import { useCustomFields } from '@strapi/helper-plugin';
 import Date from '@strapi/icons/Date';
 import Boolean from '@strapi/icons/Boolean';
 import Email from '@strapi/icons/Email';
@@ -40,10 +42,38 @@ const iconByTypes = {
   dynamiczone: <DynamicZone />,
 };
 
-const FieldTypeIcon = ({ type }) => iconByTypes[type] || null;
+const FieldTypeIcon = ({ type, customFieldUid }) => {
+  const customFieldsRegistry = useCustomFields();
+
+  let Compo = iconByTypes[type];
+
+  if (customFieldUid) {
+    const customField = customFieldsRegistry.get(customFieldUid);
+    const CustomFieldIcon = customField.icon;
+
+    if (CustomFieldIcon) {
+      Compo = (
+        <Box marginRight={3} width={7} height={6}>
+          <CustomFieldIcon />
+        </Box>
+      );
+    }
+  }
+
+  if (!iconByTypes[type]) {
+    return null;
+  }
+
+  return Compo;
+};
+
+FieldTypeIcon.defaultProps = {
+  customFieldUid: null,
+};
 
 FieldTypeIcon.propTypes = {
   type: PropTypes.string.isRequired,
+  customFieldUid: PropTypes.string,
 };
 
 export default FieldTypeIcon;

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

@@ -5,16 +5,14 @@ import get from 'lodash/get';
 import omit from 'lodash/omit';
 import take from 'lodash/take';
 import isEqual from 'react-fast-compare';
-import { GenericInput, NotAllowedInput, useLibrary } from '@strapi/helper-plugin';
-
+import { GenericInput, NotAllowedInput, useLibrary, useCustomFields } from '@strapi/helper-plugin';
+import { useContentTypeLayout } from '../../hooks';
+import { getFieldName } from '../../utils';
 import Wysiwyg from '../Wysiwyg';
 import InputJSON from '../InputJSON';
 import InputUID from '../InputUID';
 import { RelationInputDataManager } from '../RelationInputDataManager';
 
-import { useContentTypeLayout } from '../../hooks';
-import { getFieldName } from '../../utils';
-
 import {
   connect,
   generateOptions,
@@ -26,6 +24,7 @@ import {
 
 function Inputs({
   allowedFields,
+  componentUid,
   fieldSchema,
   formErrors,
   isCreatingEntry,
@@ -42,9 +41,10 @@ function Inputs({
   const { fields } = useLibrary();
   const { formatMessage } = useIntl();
   const { contentType: currentContentTypeLayout } = useContentTypeLayout();
+  const customFieldsRegistry = useCustomFields();
 
   const disabled = useMemo(() => !get(metadatas, 'editable', true), [metadatas]);
-  const type = fieldSchema.type;
+  const { type, customField: customFieldUid } = fieldSchema;
   const error = get(formErrors, [keys], null);
 
   const fieldName = useMemo(() => {
@@ -194,6 +194,19 @@ function Inputs({
     return minutes % metadatas.step === 0 ? metadatas.step : step;
   }, [inputType, inputValue, metadatas.step, step]);
 
+  // Memoize the component to avoid remounting it and losing state
+  const CustomFieldInput = useMemo(() => {
+    if (customFieldUid) {
+      const customField = customFieldsRegistry.get(customFieldUid);
+      const CustomFieldInput = React.lazy(customField.components.Input);
+
+      return CustomFieldInput;
+    }
+
+    // Not a custom field, component won't be used
+    return null;
+  }, [customFieldUid, customFieldsRegistry]);
+
   if (visible === false) {
     return null;
   }
@@ -216,6 +229,7 @@ function Inputs({
       <RelationInputDataManager
         {...metadatas}
         {...fieldSchema}
+        componentUid={componentUid}
         description={
           metadatas.description
             ? formatMessage({
@@ -248,6 +262,18 @@ function Inputs({
     );
   }
 
+  const customInputs = {
+    json: InputJSON,
+    uid: InputUID,
+    media: fields.media,
+    wysiwyg: Wysiwyg,
+    ...fields,
+  };
+
+  if (customFieldUid) {
+    customInputs[customFieldUid] = CustomFieldInput;
+  }
+
   return (
     <GenericInput
       attribute={fieldSchema}
@@ -260,13 +286,7 @@ function Inputs({
       error={error}
       labelAction={labelAction}
       contentTypeUID={currentContentTypeLayout.uid}
-      customInputs={{
-        json: InputJSON,
-        uid: InputUID,
-        media: fields.media,
-        wysiwyg: Wysiwyg,
-        ...fields,
-      }}
+      customInputs={customInputs}
       multiple={fieldSchema.multiple || false}
       name={keys}
       onChange={onChange}
@@ -274,7 +294,7 @@ function Inputs({
       placeholder={placeholder ? { id: placeholder, defaultMessage: placeholder } : null}
       required={fieldSchema.required || false}
       step={inputStep}
-      type={inputType}
+      type={customFieldUid || inputType}
       // validations={validations}
       value={inputValue}
       withDefaultValue={false}
@@ -283,6 +303,7 @@ function Inputs({
 }
 
 Inputs.defaultProps = {
+  componentUid: undefined,
   formErrors: {},
   labelAction: undefined,
   size: undefined,
@@ -292,6 +313,7 @@ Inputs.defaultProps = {
 
 Inputs.propTypes = {
   allowedFields: PropTypes.array.isRequired,
+  componentUid: PropTypes.string,
   fieldSchema: PropTypes.object.isRequired,
   formErrors: PropTypes.object,
   keys: PropTypes.string.isRequired,

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

@@ -61,10 +61,12 @@ const NonRepeatableComponent = ({ componentUid, isFromDynamicZone, isNested, nam
                 return (
                   <GridItem col={size} key={fieldName} s={12} xs={12}>
                     <Inputs
+                      componentUid={componentUid}
                       keys={keys}
                       fieldSchema={fieldSchema}
                       metadatas={metadatas}
                       queryInfos={queryInfos}
+                      size={size}
                     />
                   </GridItem>
                 );