@strapi/admin 4.5.0-alpha.0 → 4.5.0

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

@@ -1,7 +1,12 @@
-import React, { memo, useCallback, useMemo } from 'react';
+import React, { Suspense, memo, useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import get from 'lodash/get';
-import { CheckPermissions, useTracking, LinkButton } from '@strapi/helper-plugin';
+import {
+  CheckPermissions,
+  LoadingIndicatorPage,
+  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';
@@ -93,6 +98,7 @@ const EditView = ({
         onDeleteSucceeded,
         onPost,
         onPublish,
+        onDraftRelationCheck,
         onPut,
         onUnpublish,
         redirectionLink,
@@ -112,6 +118,7 @@ const EditView = ({
             isSingleType={isSingleType}
             onPost={onPost}
             onPublish={onPublish}
+            onDraftRelationCheck={onDraftRelationCheck}
             onPut={onPut}
             onUnpublish={onUnpublish}
             readActionAllowedFields={readActionAllowedFields}
@@ -125,108 +132,110 @@ const EditView = ({
               <ContentLayout>
                 <Grid gap={4}>
                   <GridItem col={9} s={12}>
-                    <Stack spacing={6}>
-                      {formattedContentTypeLayout.map((row, index) => {
-                        if (isDynamicZone(row)) {
-                          const {
-                            0: {
-                              0: { name, fieldSchema, metadatas, labelAction },
-                            },
-                          } = row;
+                    <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>
+                            );
+                          }
 
                           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>
-                          );
-                        }
+                            <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,
+                                          queryInfos,
+                                        }) => {
+                                          const isComponent = fieldSchema.type === 'component';
 
-                        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,
-                                        queryInfos,
-                                      }) => {
-                                        const isComponent = fieldSchema.type === 'component';
+                                          if (isComponent) {
+                                            const {
+                                              component,
+                                              max,
+                                              min,
+                                              repeatable = false,
+                                              required = false,
+                                            } = fieldSchema;
 
-                                        if (isComponent) {
-                                          const {
-                                            component,
-                                            max,
-                                            min,
-                                            repeatable = false,
-                                            required = false,
-                                          } = fieldSchema;
+                                            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>
+                                            );
+                                          }
 
                                           return (
-                                            <GridItem col={size} s={12} xs={12} key={component}>
-                                              <FieldComponent
-                                                componentUid={component}
+                                            <GridItem col={size} key={name} s={12} xs={12}>
+                                              <Inputs
+                                                size={size}
+                                                fieldSchema={fieldSchema}
+                                                keys={name}
                                                 labelAction={labelAction}
-                                                isRepeatable={repeatable}
-                                                intlLabel={{
-                                                  id: metadatas.label,
-                                                  defaultMessage: metadatas.label,
-                                                }}
-                                                max={max}
-                                                min={min}
-                                                name={name}
-                                                required={required}
+                                                metadatas={metadatas}
+                                                queryInfos={queryInfos}
                                               />
                                             </GridItem>
                                           );
                                         }
-
-                                        return (
-                                          <GridItem col={size} key={name} s={12} xs={12}>
-                                            <Inputs
-                                              size={size}
-                                              fieldSchema={fieldSchema}
-                                              keys={name}
-                                              labelAction={labelAction}
-                                              metadatas={metadatas}
-                                              queryInfos={queryInfos}
-                                            />
-                                          </GridItem>
-                                        );
-                                      }
-                                    )}
-                                  </Grid>
-                                );
-                              })}
-                            </Stack>
-                          </Box>
-                        );
-                      })}
-                    </Stack>
+                                      )}
+                                    </Grid>
+                                  );
+                                })}
+                              </Stack>
+                            </Box>
+                          );
+                        })}
+                      </Stack>
+                    </Suspense>
                   </GridItem>
                   <GridItem col={3} s={12}>
                     <Stack spacing={2}>

package/admin/src/content-manager/pages/ListSettingsView/components/DraggableCard.js

@@ -201,7 +201,7 @@ const DraggableCard = ({
                   id: getTrad('components.DraggableCard.move.field'),
                   defaultMessage: 'Move {item}',
                 },
-                { item: name }
+                { item: labelField }
               )}
               onClick={(e) => e.stopPropagation()}
               ref={refs.dragRef}
@@ -223,7 +223,7 @@ const DraggableCard = ({
                   id: getTrad('components.DraggableCard.edit.field'),
                   defaultMessage: 'Edit {item}',
                 },
-                { item: name }
+                { item: labelField }
               )}
               type="button"
             >
@@ -237,7 +237,7 @@ const DraggableCard = ({
                   id: getTrad('components.DraggableCard.delete.field'),
                   defaultMessage: 'Delete {item}',
                 },
-                { item: name }
+                { item: labelField }
               )}
               type="button"
             >

package/admin/src/content-manager/pages/ListSettingsView/components/Settings.js

@@ -16,7 +16,7 @@ const FlexGap = styled(Flex)`
 
 const Settings = ({ modifiedData, onChange, sortOptions }) => {
   const { formatMessage } = useIntl();
-  const { settings } = modifiedData;
+  const { settings, metadatas } = modifiedData;
 
   return (
     <>
@@ -122,7 +122,7 @@ const Settings = ({ modifiedData, onChange, sortOptions }) => {
           >
             {sortOptions.map((sortBy) => (
               <Option key={sortBy} value={sortBy}>
-                {sortBy}
+                {metadatas[sortBy].list.label || sortBy}
               </Option>
             ))}
           </Select>

package/admin/src/content-manager/pages/ListSettingsView/components/SortDisplayedFields.js

@@ -104,7 +104,7 @@ const SortDisplayedFields = ({
           >
             {listRemainingFields.map((field) => (
               <MenuItem key={field} onClick={() => handleAddField(field)}>
-                {field}
+                {metadatas[field].list.label || field}
               </MenuItem>
             ))}
           </SimpleMenu>

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

@@ -5,9 +5,11 @@ import { connect } from 'react-redux';
 import isEqual from 'react-fast-compare';
 import { bindActionCreators, compose } from 'redux';
 import { useIntl } from 'react-intl';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useHistory, useLocation, Link as ReactRouterLink } from 'react-router-dom';
 import get from 'lodash/get';
 import { stringify } from 'qs';
+import axios from 'axios';
+
 import {
   NoPermissions,
   CheckPermissions,
@@ -19,31 +21,37 @@ import {
   useTracking,
   Link,
 } from '@strapi/helper-plugin';
+
 import { IconButton } from '@strapi/design-system/IconButton';
 import { Main } from '@strapi/design-system/Main';
 import { Box } from '@strapi/design-system/Box';
 import { ActionLayout, ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
 import { useNotifyAT } from '@strapi/design-system/LiveRegions';
 import { Button } from '@strapi/design-system/Button';
+
 import ArrowLeft from '@strapi/icons/ArrowLeft';
 import Plus from '@strapi/icons/Plus';
 import Cog from '@strapi/icons/Cog';
-import axios from 'axios';
+
 import { axiosInstance } from '../../../core/utils';
-import { InjectionZone } from '../../../shared/components';
+
 import DynamicTable from '../../components/DynamicTable';
+import AttributeFilter from '../../components/AttributeFilter';
+import { InjectionZone } from '../../../shared/components';
+
 import permissions from '../../../permissions';
+
 import { getRequestUrl, getTrad } from '../../utils';
+
 import FieldPicker from './FieldPicker';
 import PaginationFooter from './PaginationFooter';
 import { getData, getDataSucceeded, onChangeListHeaders, onResetListHeaders } from './actions';
 import makeSelectListView from './selectors';
 import { buildQueryString } from './utils';
-import AttributeFilter from '../../components/AttributeFilter';
 
 const cmPermissions = permissions.contentManager;
 
-const IconButtonCustom = styled(IconButton)`
+const ConfigureLayoutBox = styled(Box)`
   svg {
     path {
       fill: ${({ theme }) => theme.colors.neutral900};
@@ -51,7 +59,6 @@ const IconButtonCustom = styled(IconButton)`
   }
 `;
 
-/* eslint-disable react/no-array-index-key */
 function ListView({
   canCreate,
   canDelete,
@@ -240,16 +247,18 @@ function ListView({
     canCreate ? (
       <Button
         {...props}
+        forwardedAs={ReactRouterLink}
         onClick={() => {
           const trackerProperty = hasDraftAndPublish ? { status: 'draft' } : {};
 
           trackUsageRef.current('willCreateEntry', trackerProperty);
-          push({
-            pathname: `${pathname}/create`,
-            search: query.plugins ? pluginsQueryParams : '',
-          });
+        }}
+        to={{
+          pathname: `${pathname}/create`,
+          search: query.plugins ? pluginsQueryParams : '',
         }}
         startIcon={<Plus />}
+        style={{ textDecoration: 'none' }}
       >
         {formatMessage({
           id: getTrad('HeaderLayout.button.label-add-entry'),
@@ -283,20 +292,20 @@ function ListView({
               <InjectionZone area="contentManager.listView.actions" />
               <FieldPicker layout={layout} />
               <CheckPermissions permissions={cmPermissions.collectionTypesConfigurations}>
-                <Box paddingTop={1} paddingBottom={1}>
-                  <IconButtonCustom
+                <ConfigureLayoutBox paddingTop={1} paddingBottom={1}>
+                  <IconButton
                     onClick={() => {
                       trackUsage('willEditListLayout');
-
-                      push({ pathname: `${slug}/configurations/list`, search: pluginsQueryParams });
                     }}
+                    forwardedAs={ReactRouterLink}
+                    to={{ pathname: `${slug}/configurations/list`, search: pluginsQueryParams }}
                     icon={<Cog />}
                     label={formatMessage({
                       id: 'app.links.configure-view',
                       defaultMessage: 'Configure the view',
                     })}
                   />
-                </Box>
+                </ConfigureLayoutBox>
               </CheckPermissions>
             </>
           }

package/admin/src/content-manager/pages/ListView/utils/buildQueryString.js

@@ -1,4 +1,5 @@
 import { stringify } from 'qs';
+import set from 'lodash/set';
 import createPluginsFilter from './createPluginsFilter';
 
 /**
@@ -12,12 +13,23 @@ const buildQueryString = (queryParams = {}) => {
    * Extracting pluginOptions from the query since we don't want them to be part
    * of the url
    */
-  const { plugins: _, ...otherQueryParams } = {
+  const {
+    plugins: _,
+    _q: query,
+    ...otherQueryParams
+  } = {
     ...queryParams,
     ...createPluginsFilter(queryParams.plugins),
   };
 
-  return `?${stringify(otherQueryParams, { encode: false })}`;
+  if (query) {
+    set(otherQueryParams, `_q`, encodeURIComponent(query));
+  }
+
+  return `${stringify(otherQueryParams, {
+    encode: false,
+    addQueryPrefix: true,
+  })}`;
 };
 
 export default buildQueryString;

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/CustomFields.js

@@ -0,0 +1,79 @@
+import invariant from 'invariant';
+
+const ALLOWED_TYPES = [
+  'biginteger',
+  'boolean',
+  'date',
+  'datetime',
+  'decimal',
+  'email',
+  'enumeration',
+  'float',
+  'integer',
+  'json',
+  'password',
+  'richtext',
+  'string',
+  'text',
+  'time',
+  'uid',
+];
+
+class CustomFields {
+  constructor() {
+    this.customFields = {};
+  }
+
+  register(customFields) {
+    if (Array.isArray(customFields)) {
+      // If several custom fields are passed, register them one by one
+      customFields.forEach((customField) => {
+        this.register(customField);
+      });
+    } else {
+      // Handle individual custom field
+      const { name, pluginId, type, intlLabel, intlDescription, components } = customFields;
+
+      // Ensure required attributes are provided
+      invariant(name, 'A name must be provided');
+      invariant(type, 'A type must be provided');
+      invariant(intlLabel, 'An intlLabel must be provided');
+      invariant(intlDescription, 'An intlDescription must be provided');
+      invariant(components, 'A components object must be provided');
+      invariant(components.Input, 'An Input component must be provided');
+
+      // Ensure the type is valid
+      invariant(
+        ALLOWED_TYPES.includes(type),
+        `Custom field type: '${type}' is not a valid Strapi type or it can't be used with a Custom Field`
+      );
+
+      // Ensure name has no special characters
+      const isValidObjectKey = /^(?![0-9])[a-zA-Z0-9$_-]+$/g;
+      invariant(
+        isValidObjectKey.test(name),
+        `Custom field name: '${name}' is not a valid object key`
+      );
+
+      // When no plugin is specified, default to the global namespace
+      const uid = pluginId ? `plugin::${pluginId}.${name}` : `global::${name}`;
+
+      // Ensure the uid is unique
+      const uidAlreadyUsed = Object.prototype.hasOwnProperty.call(this.customFields, uid);
+      invariant(!uidAlreadyUsed, `Custom field: '${uid}' has already been registered`);
+
+      this.customFields[uid] = customFields;
+    }
+  }
+
+  getAll() {
+    return this.customFields;
+  }
+
+  get(uid) {
+    return this.customFields[uid];
+  }
+}
+
+// Export an instance since it's a singleton
+export default new CustomFields();

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

@@ -3,3 +3,4 @@ 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/core/store/configureStore.js

@@ -1,14 +1,29 @@
-import { createStore, applyMiddleware } from 'redux';
+import { createStore, applyMiddleware, compose } from 'redux';
 import createReducer from './createReducer';
 
 const configureStore = (appMiddlewares, appReducers) => {
+  let composeEnhancers = compose;
+
   const middlewares = [];
 
   appMiddlewares.forEach((middleware) => {
     middlewares.push(middleware());
   });
 
-  return createStore(createReducer(appReducers), {}, applyMiddleware(...middlewares));
+  // If Redux Dev Tools  are installed, enable them
+  if (
+    process.env.NODE_ENV !== 'production' &&
+    typeof window === 'object' &&
+    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
+  ) {
+    composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({});
+  }
+
+  return createStore(
+    createReducer(appReducers),
+    {},
+    composeEnhancers(applyMiddleware(...middlewares))
+  );
 };
 
 export default configureStore;

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/useFetchMarketplacePlugins/index.js

@@ -2,10 +2,10 @@ import { useQuery } from 'react-query';
 import { useNotification } from '@strapi/helper-plugin';
 import { fetchMarketplacePlugins } from './utils/api';
 
-const useFetchMarketplacePlugins = (notifyLoad) => {
+const useFetchMarketplacePlugins = (notifyLoad, params) => {
   const toggleNotification = useNotification();
 
-  return useQuery('list-marketplace-plugins', () => fetchMarketplacePlugins(), {
+  return useQuery(['list-marketplace-plugins', params], () => fetchMarketplacePlugins(params), {
     onSuccess() {
       if (notifyLoad) {
         notifyLoad();

package/admin/src/hooks/useFetchMarketplacePlugins/utils/api.js

@@ -2,8 +2,10 @@ import axios from 'axios';
 
 const MARKETPLACE_API_URL = 'https://market-api.strapi.io';
 
-const fetchMarketplacePlugins = async () => {
-  const { data: response } = await axios.get(`${MARKETPLACE_API_URL}/plugins`);
+const fetchMarketplacePlugins = async (params = {}) => {
+  const { data: response } = await axios.get(`${MARKETPLACE_API_URL}/plugins`, {
+    params,
+  });
 
   // Only keep v4 plugins
   const filteredResponse = {

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

@@ -1,11 +1,11 @@
 import { useQuery } from 'react-query';
 import { useNotification } from '@strapi/helper-plugin';
-import { fetchMarketplacePlugins } from './utils/api';
+import { fetchMarketplaceProviders } from './utils/api';
 
-const useFetchMarketplaceProviders = (notifyLoad) => {
+const useFetchMarketplaceProviders = (notifyLoad, params) => {
   const toggleNotification = useNotification();
 
-  return useQuery('list-marketplace-providers', () => fetchMarketplacePlugins(), {
+  return useQuery(['list-marketplace-providers', params], () => fetchMarketplaceProviders(params), {
     onSuccess() {
       if (notifyLoad) {
         notifyLoad();

package/admin/src/hooks/useFetchMarketplaceProviders/utils/api.js

@@ -2,10 +2,12 @@ import axios from 'axios';
 
 const MARKETPLACE_API_URL = 'https://market-api.strapi.io';
 
-const fetchMarketplacePlugins = async () => {
-  const { data } = await axios.get(`${MARKETPLACE_API_URL}/providers`);
+const fetchMarketplaceProviders = async (params = {}) => {
+  const { data } = await axios.get(`${MARKETPLACE_API_URL}/providers`, {
+    params,
+  });
 
   return data;
 };
 
-export { fetchMarketplacePlugins };
+export { fetchMarketplaceProviders };