@strapi/admin 4.4.0-alpha.0 → 4.4.0-beta.1

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 { customFields, Plugin } from './core/apis';
+import { 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';
@@ -47,7 +47,6 @@ class StrapiApp {
     this.admin = {
       injectionZones,
     };
-    this.customFields = customFields;
 
     this.menu = [];
     this.settings = {
@@ -281,7 +280,17 @@ class StrapiApp {
 
   async initialize() {
     Object.keys(this.appPlugins).forEach((plugin) => {
-      this.appPlugins[plugin].register(this);
+      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,
+      });
     });
   }
 
@@ -421,7 +430,6 @@ 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, CustomFieldsProvider, StrapiAppProvider } from '@strapi/helper-plugin';
+import { LibraryProvider, StrapiAppProvider } from '@strapi/helper-plugin';
 import { Provider } from 'react-redux';
 import { AdminContext } from '../../contexts';
 import ConfigurationsProvider from '../ConfigurationsProvider';
@@ -25,7 +25,6 @@ const Providers = ({
   authLogo,
   children,
   components,
-  customFields,
   fields,
   getAdminInjectedComponents,
   getPlugin,
@@ -65,17 +64,15 @@ const Providers = ({
                   settings={settings}
                 >
                   <LibraryProvider components={components} fields={fields}>
-                    <CustomFieldsProvider customFields={customFields}>
-                      <LanguageProvider messages={messages} localeNames={localeNames}>
-                        <AutoReloadOverlayBlockerProvider>
-                          <OverlayBlocker>
-                            <GuidedTour>
-                              <Notifications>{children}</Notifications>
-                            </GuidedTour>
-                          </OverlayBlocker>
-                        </AutoReloadOverlayBlockerProvider>
-                      </LanguageProvider>
-                    </CustomFieldsProvider>
+                    <LanguageProvider messages={messages} localeNames={localeNames}>
+                      <AutoReloadOverlayBlockerProvider>
+                        <OverlayBlocker>
+                          <GuidedTour>
+                            <Notifications>{children}</Notifications>
+                          </GuidedTour>
+                        </OverlayBlocker>
+                      </AutoReloadOverlayBlockerProvider>
+                    </LanguageProvider>
                   </LibraryProvider>
                 </StrapiAppProvider>
               </ConfigurationsProvider>
@@ -91,7 +88,6 @@ 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/DynamicTable/CellContent/RelationSingle/index.js

@@ -13,7 +13,7 @@ const RelationSingle = ({ metadatas, value }) => {
     <TypographyMaxWidth textColor="neutral800" ellipsis>
       <CellValue
         type={metadatas.mainField.schema.type}
-        value={value[metadatas.mainField.name] || value.id}
+        value={value[metadatas.mainField.name] ?? value.id}
       />
     </TypographyMaxWidth>
   );

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

@@ -1,7 +1,5 @@
 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';
@@ -42,38 +40,10 @@ const iconByTypes = {
   dynamiczone: <DynamicZone />,
 };
 
-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,
-};
+const FieldTypeIcon = ({ type }) => iconByTypes[type] || null;
 
 FieldTypeIcon.propTypes = {
   type: PropTypes.string.isRequired,
-  customFieldUid: PropTypes.string,
 };
 
 export default FieldTypeIcon;

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

@@ -5,7 +5,7 @@ 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, useCustomFields } from '@strapi/helper-plugin';
+import { GenericInput, NotAllowedInput, useLibrary } from '@strapi/helper-plugin';
 import { useContentTypeLayout } from '../../hooks';
 import { getFieldName } from '../../utils';
 import Wysiwyg from '../Wysiwyg';
@@ -39,10 +39,9 @@ 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, customField: customFieldUid } = fieldSchema;
+  const type = fieldSchema.type;
   const error = get(formErrors, [keys], null);
 
   const fieldName = useMemo(() => {
@@ -192,19 +191,6 @@ 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;
   }
@@ -258,18 +244,6 @@ function Inputs({
     );
   }
 
-  const customInputs = {
-    json: InputJSON,
-    uid: InputUID,
-    media: fields.media,
-    wysiwyg: Wysiwyg,
-    ...fields,
-  };
-
-  if (customFieldUid) {
-    customInputs[customFieldUid] = CustomFieldInput;
-  }
-
   return (
     <GenericInput
       attribute={fieldSchema}
@@ -282,7 +256,13 @@ function Inputs({
       error={error}
       labelAction={labelAction}
       contentTypeUID={currentContentTypeLayout.uid}
-      customInputs={customInputs}
+      customInputs={{
+        json: InputJSON,
+        uid: InputUID,
+        media: fields.media,
+        wysiwyg: Wysiwyg,
+        ...fields,
+      }}
       multiple={fieldSchema.multiple || false}
       name={keys}
       onChange={onChange}
@@ -290,7 +270,7 @@ function Inputs({
       placeholder={placeholder ? { id: placeholder, defaultMessage: placeholder } : null}
       required={fieldSchema.required || false}
       step={inputStep}
-      type={customFieldUid || inputType}
+      type={inputType}
       // validations={validations}
       value={inputValue}
       withDefaultValue={false}

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

@@ -17,6 +17,7 @@ function SelectMany({
   name,
   isDisabled,
   isLoading,
+  loadingMessage,
   onInputChange,
   onMenuClose,
   onMenuOpen,
@@ -61,6 +62,7 @@ function SelectMany({
         }}
         mainField={mainField}
         isLoading={isLoading}
+        loadingMessage={loadingMessage}
         isMulti
         isSearchable
         options={options}
@@ -119,6 +121,7 @@ SelectMany.propTypes = {
   displayNavigationLink: PropTypes.bool.isRequired,
   isDisabled: PropTypes.bool.isRequired,
   isLoading: PropTypes.bool.isRequired,
+  loadingMessage: PropTypes.func.isRequired,
   mainField: PropTypes.shape({
     name: PropTypes.string.isRequired,
     schema: PropTypes.shape({

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

@@ -43,13 +43,13 @@ const SingleValue = (props) => {
       <Component {...props}>
         <Flex>
           <StyledBullet title={title} isDraft={isDraft} />
-          <Typography ellipsis>{props.data.label || '-'}</Typography>
+          <Typography ellipsis>{props.data.label ?? '-'}</Typography>
         </Flex>
       </Component>
     );
   }
 
-  return <Component {...props}>{props.data.label || '-'}</Component>;
+  return <Component {...props}>{props.data.label ?? '-'}</Component>;
 };
 
 SingleValue.propTypes = {

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

@@ -14,6 +14,7 @@ function SelectOne({
   name,
   isDisabled,
   isLoading,
+  loadingMessage,
   onChange,
   onInputChange,
   onMenuClose,
@@ -37,6 +38,7 @@ function SelectOne({
         isClearable
         isDisabled={isDisabled}
         isLoading={isLoading}
+        loadingMessage={loadingMessage}
         mainField={mainField}
         options={options}
         onChange={onChange}
@@ -70,6 +72,7 @@ SelectOne.propTypes = {
   components: PropTypes.object,
   isDisabled: PropTypes.bool.isRequired,
   isLoading: PropTypes.bool.isRequired,
+  loadingMessage: PropTypes.func.isRequired,
   mainField: PropTypes.shape({
     name: PropTypes.string.isRequired,
     schema: PropTypes.shape({

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

@@ -41,13 +41,13 @@ const Option = (props) => {
       <Component {...props}>
         <Flex>
           <StyledBullet title={title} isDraft={isDraft} />
-          <Typography ellipsis>{props.label || '-'}</Typography>
+          <Typography ellipsis>{props.label ?? '-'}</Typography>
         </Flex>
       </Component>
     );
   }
 
-  return <Component {...props}>{props.label || '-'}</Component>;
+  return <Component {...props}>{props.label ?? '-'}</Component>;
 };
 
 Option.defaultProps = {

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

@@ -282,6 +282,12 @@ function SelectWrapper({
         isDisabled={isDisabled}
         isLoading={isLoading}
         isClearable
+        loadingMessage={() =>
+          formatMessage({
+            id: getTrad('DynamicTable.relation-loading'),
+            defaultMessage: 'Relations are loading',
+          })
+        }
         mainField={mainField}
         move={moveRelation}
         name={name}

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

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

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

@@ -1,12 +1,7 @@
-import React, { Suspense, memo, useCallback, useMemo } from 'react';
+import React, { memo, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
-import {
-  CheckPermissions,
-  LoadingIndicatorPage,
-  useTracking,
-  LinkButton,
-} from '@strapi/helper-plugin';
+import { CheckPermissions, useTracking, LinkButton } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import { ContentLayout } from '@strapi/design-system/Layout';
 import { Box } from '@strapi/design-system/Box';
@@ -136,101 +131,99 @@ const EditView = ({
               <ContentLayout>
                 <Grid gap={4}>
                   <GridItem col={9} s={12}>
-                    <Suspense fallback={<LoadingIndicatorPage />}>
-                      <Stack spacing={6}>
-                        {formattedContentTypeLayout.map((row, index) => {
-                          if (isDynamicZone(row)) {
-                            const {
-                              0: {
-                                0: { name, fieldSchema, metadatas, labelAction },
-                              },
-                            } = row;
-
-                            return (
-                              <Box key={index}>
-                                <Grid gap={4}>
-                                  <GridItem col={12} s={12} xs={12}>
-                                    <DynamicZone
-                                      name={name}
-                                      fieldSchema={fieldSchema}
-                                      labelAction={labelAction}
-                                      metadatas={metadatas}
-                                    />
-                                  </GridItem>
-                                </Grid>
-                              </Box>
-                            );
-                          }
+                    <Stack spacing={6}>
+                      {formattedContentTypeLayout.map((row, index) => {
+                        if (isDynamicZone(row)) {
+                          const {
+                            0: {
+                              0: { name, fieldSchema, metadatas, labelAction },
+                            },
+                          } = row;
 
                           return (
-                            <Box
-                              key={index}
-                              hasRadius
-                              background="neutral0"
-                              shadow="tableShadow"
-                              paddingLeft={6}
-                              paddingRight={6}
-                              paddingTop={6}
-                              paddingBottom={6}
-                              borderColor="neutral150"
-                            >
-                              <Stack spacing={6}>
-                                {row.map((grid, gridIndex) => {
-                                  return (
-                                    <Grid gap={4} key={gridIndex}>
-                                      {grid.map(
-                                        ({ fieldSchema, labelAction, metadatas, name, size }) => {
-                                          const isComponent = fieldSchema.type === 'component';
+                            <Box key={index}>
+                              <Grid gap={4}>
+                                <GridItem col={12} s={12} xs={12}>
+                                  <DynamicZone
+                                    name={name}
+                                    fieldSchema={fieldSchema}
+                                    labelAction={labelAction}
+                                    metadatas={metadatas}
+                                  />
+                                </GridItem>
+                              </Grid>
+                            </Box>
+                          );
+                        }
 
-                                          if (isComponent) {
-                                            const {
-                                              component,
-                                              max,
-                                              min,
-                                              repeatable = false,
-                                              required = false,
-                                            } = fieldSchema;
+                        return (
+                          <Box
+                            key={index}
+                            hasRadius
+                            background="neutral0"
+                            shadow="tableShadow"
+                            paddingLeft={6}
+                            paddingRight={6}
+                            paddingTop={6}
+                            paddingBottom={6}
+                            borderColor="neutral150"
+                          >
+                            <Stack spacing={6}>
+                              {row.map((grid, gridIndex) => {
+                                return (
+                                  <Grid gap={4} key={gridIndex}>
+                                    {grid.map(
+                                      ({ fieldSchema, labelAction, metadatas, name, size }) => {
+                                        const isComponent = fieldSchema.type === 'component';
 
-                                            return (
-                                              <GridItem col={size} s={12} xs={12} key={component}>
-                                                <FieldComponent
-                                                  componentUid={component}
-                                                  labelAction={labelAction}
-                                                  isRepeatable={repeatable}
-                                                  intlLabel={{
-                                                    id: metadatas.label,
-                                                    defaultMessage: metadatas.label,
-                                                  }}
-                                                  max={max}
-                                                  min={min}
-                                                  name={name}
-                                                  required={required}
-                                                />
-                                              </GridItem>
-                                            );
-                                          }
+                                        if (isComponent) {
+                                          const {
+                                            component,
+                                            max,
+                                            min,
+                                            repeatable = false,
+                                            required = false,
+                                          } = fieldSchema;
 
                                           return (
-                                            <GridItem col={size} key={name} s={12} xs={12}>
-                                              <Inputs
-                                                fieldSchema={fieldSchema}
-                                                keys={name}
+                                            <GridItem col={size} s={12} xs={12} key={component}>
+                                              <FieldComponent
+                                                componentUid={component}
                                                 labelAction={labelAction}
-                                                metadatas={metadatas}
+                                                isRepeatable={repeatable}
+                                                intlLabel={{
+                                                  id: metadatas.label,
+                                                  defaultMessage: metadatas.label,
+                                                }}
+                                                max={max}
+                                                min={min}
+                                                name={name}
+                                                required={required}
                                               />
                                             </GridItem>
                                           );
                                         }
-                                      )}
-                                    </Grid>
-                                  );
-                                })}
-                              </Stack>
-                            </Box>
-                          );
-                        })}
-                      </Stack>
-                    </Suspense>
+
+                                        return (
+                                          <GridItem col={size} key={name} s={12} xs={12}>
+                                            <Inputs
+                                              fieldSchema={fieldSchema}
+                                              keys={name}
+                                              labelAction={labelAction}
+                                              metadatas={metadatas}
+                                            />
+                                          </GridItem>
+                                        );
+                                      }
+                                    )}
+                                  </Grid>
+                                );
+                              })}
+                            </Stack>
+                          </Box>
+                        );
+                      })}
+                    </Stack>
                   </GridItem>
                   <GridItem col={3} s={12}>
                     <Stack spacing={2}>

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

@@ -195,7 +195,7 @@ const ListSettingsView = ({ layout, slug }) => {
             }
             primaryAction={
               <Button
-                size="L"
+                size="S"
                 startIcon={<Check />}
                 disabled={isEqual(modifiedData, initialData)}
                 type="submit"

package/admin/src/contexts/ApiTokenPermissions/index.js

@@ -0,0 +1,24 @@
+import React, { createContext, useContext } from 'react';
+import PropTypes from 'prop-types';
+
+const ApiTokenPermissionsContext = createContext({});
+
+const ApiTokenPermissionsContextProvider = ({ children, ...rest }) => {
+  return (
+    <ApiTokenPermissionsContext.Provider value={rest}>
+      {children}
+    </ApiTokenPermissionsContext.Provider>
+  );
+};
+
+const useApiTokenPermissionsContext = () => useContext(ApiTokenPermissionsContext);
+
+ApiTokenPermissionsContextProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export {
+  ApiTokenPermissionsContext,
+  ApiTokenPermissionsContextProvider,
+  useApiTokenPermissionsContext,
+};

package/admin/src/core/apis/index.js

@@ -3,4 +3,3 @@ export { default as Components } from './Components';
 export { default as Middlewares } from './Middlewares';
 export { default as Plugin } from './Plugin';
 export { default as Reducers } from './Reducers';
-export { default as customFields } from './CustomFields';

package/admin/src/hooks/index.js

@@ -9,3 +9,4 @@ export { default as useSettingsForm } from './useSettingsForm';
 export { default as usePermissionsDataManager } from './usePermissionsDataManager';
 export { default as useReleaseNotification } from './useReleaseNotification';
 export { default as useThemeToggle } from './useThemeToggle';
+export { default as useRegenerate } from './useRegenerate';

package/admin/src/hooks/useRegenerate/index.js

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import { get } from 'lodash';
+import { useNotification } from '@strapi/helper-plugin';
+import { axiosInstance } from '../../core/utils';
+
+const useRegenerate = (id, onRegenerate) => {
+  const [isLoadingConfirmation, setIsLoadingConfirmation] = useState(false);
+  const toggleNotification = useNotification();
+
+  const regenerateData = async () => {
+    try {
+      const {
+        data: {
+          data: { accessKey },
+        },
+      } = await axiosInstance.post(`/admin/api-tokens/${id}/regenerate`);
+      setIsLoadingConfirmation(false);
+      onRegenerate(accessKey);
+    } catch (error) {
+      setIsLoadingConfirmation(false);
+      toggleNotification({
+        type: 'warning',
+        message: get(error, 'response.data.message', 'notification.error'),
+      });
+    }
+  };
+
+  return {
+    regenerateData,
+    isLoadingConfirmation,
+  };
+};
+
+export default useRegenerate;