@strapi/admin 4.12.0-beta.5 → 4.12.1

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

@@ -214,7 +214,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
                     })}
                   </Typography>
                 </LinkUser>
-                <LinkUser tabIndex={0} onClick={handleLogout} logout="logout" to="/auth/login">
+                <LinkUser tabIndex={0} onClick={handleLogout} to="/auth/login">
                   <Typography textColor="danger600">
                     {formatMessage({
                       id: 'app.components.LeftMenu.logout',

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

@@ -18,6 +18,29 @@ const PluginsInitializer = () => {
     (plugin) => plugins[plugin].isReady === false
   );
 
+  /**
+   *
+   * I have spent some time trying to understand what is happening here, and wanted to
+   * leave that knowledge for my future me:
+   *
+   * `initializer` is an undocumented property of the `registerPlugin` API. At the time
+   * of writing it seems only to be used by the i18n plugin.
+   *
+   * How does it work?
+   *
+   * Every plugin that has an `initializer` component defined, receives the
+   * `setPlugin` function as a component prop. In the case of i18n the plugin fetches locales
+   * first and calls `setPlugin` with `pluginId` once they are loaded, which then triggers the
+   * reducer of the admin app defined above.
+   *
+   * Once all plugins are set to `isReady: true` the app renders.
+   *
+   * This API is used to block rendering of the admin app. We should remove that in v5 completely
+   * and make sure plugins can inject data into the global store before they are initialized, to avoid
+   * having a new prop-callback based communication channel between plugins and the core admin app.
+   *
+   */
+
   if (hasApluginNotReady) {
     const initializers = Object.keys(plugins).reduce((acc, current) => {
       const InitializerComponent = plugins[current].initializer;

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

@@ -28,12 +28,7 @@ import {
   submitSucceeded,
 } from '../../sharedReducers/crudReducer/actions';
 import selectCrudReducer from '../../sharedReducers/crudReducer/selectors';
-import {
-  createDefaultForm,
-  getRequestUrl,
-  getTrad,
-  removePasswordFieldsFromData,
-} from '../../utils';
+import { createDefaultForm, getTrad, removePasswordFieldsFromData } from '../../utils';
 
 // This container is used to handle the CRUD
 const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }) => {
@@ -60,7 +55,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
   const isCreatingEntry = id === null;
 
   const requestURL =
-    isCreatingEntry && !origin ? null : getRequestUrl(`collection-types/${slug}/${origin || id}`);
+    isCreatingEntry && !origin ? null : `/content-manager/collection-types/${slug}/${origin || id}`;
 
   const cleanReceivedData = useCallback((data) => {
     const cleaned = removePasswordFieldsFromData(
@@ -190,7 +185,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
       try {
         trackUsageRef.current('willDeleteEntry', trackerProperty);
 
-        const { data } = await del(getRequestUrl(`collection-types/${slug}/${id}`));
+        const { data } = await del(`/content-manager/collection-types/${slug}/${id}`);
 
         toggleNotification({
           type: 'success',
@@ -220,8 +215,8 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
        * are correctly attached to the entry.
        */
       const endPoint = isCloning
-        ? getRequestUrl(`collection-types/${slug}/clone/${origin}`)
-        : getRequestUrl(`collection-types/${slug}`);
+        ? `/content-manager/collection-types/${slug}/clone/${origin}`
+        : `/content-manager/collection-types/${slug}`;
       try {
         // Show a loading button in the EditView/Header.js && lock the app => no navigation
         dispatch(setStatus('submit-pending'));
@@ -279,7 +274,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
     try {
       trackUsageRef.current('willCheckDraftRelations');
 
-      const endPoint = getRequestUrl(`collection-types/${slug}/${id}/actions/countDraftRelations`);
+      const endPoint = `/content-manager/collection-types/${slug}/${id}/actions/countDraftRelations`;
       dispatch(setStatus('draft-relation-check-pending'));
 
       const numberOfDraftRelations = await fetchClient.get(endPoint);
@@ -299,7 +294,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
   const onPublish = useCallback(async () => {
     try {
       trackUsageRef.current('willPublishEntry');
-      const endPoint = getRequestUrl(`collection-types/${slug}/${id}/actions/publish`);
+      const endPoint = `/content-manager/collection-types/${slug}/${id}/actions/publish`;
 
       dispatch(setStatus('publish-pending'));
 
@@ -326,7 +321,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
   const onPut = useCallback(
     async (body, trackerProperty) => {
-      const endPoint = getRequestUrl(`collection-types/${slug}/${id}`);
+      const endPoint = `/content-manager/collection-types/${slug}/${id}`;
 
       try {
         trackUsageRef.current('willEditEntry', trackerProperty);
@@ -362,7 +357,7 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
   );
 
   const onUnpublish = useCallback(async () => {
-    const endPoint = getRequestUrl(`collection-types/${slug}/${id}/actions/unpublish`);
+    const endPoint = `/content-manager/collection-types/${slug}/${id}/actions/unpublish`;
 
     dispatch(setStatus('unpublish-pending'));
 

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/cleanData.js

@@ -91,7 +91,7 @@ const cleanData = ({ browserState, serverState }, currentSchema, componentsSchem
           /**
            * Because of how repeatable components work when you dig into them the server
            * will have no object to compare too therefore no relation array will be setup
-           * because the component has not been initialised, therefore we can safely assume
+           * because the component has not been initialized, therefore we can safely assume
            * it needs to be added and provide a default empty array.
            */
           let actualOldValue = get(rootServerState, trueInitialDataPath, []);

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

@@ -12,7 +12,6 @@ import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
 import useDebounce from '../../../hooks/useDebounce';
-import { getRequestUrl } from '../../utils';
 
 import { FieldActionWrapper, LoadingWrapper, TextValidation } from './endActionStyle';
 import UID_REGEX from './regex';
@@ -67,7 +66,7 @@ const InputUID = ({
     try {
       const {
         data: { data },
-      } = await post(getRequestUrl('uid/generate'), {
+      } = await post('/content-manager/uid/generate', {
         contentTypeUID,
         field: name,
         data: modifiedData,
@@ -92,7 +91,7 @@ const InputUID = ({
     setIsLoading(true);
 
     try {
-      const { data } = await post(getRequestUrl('uid/check-availability'), {
+      const { data } = await post('/content-manager/uid/check-availability', {
         contentTypeUID,
         field: name,
         value: value ? value.trim() : '',

package/admin/src/content-manager/components/RelationInput/RelationInput.js

@@ -373,7 +373,7 @@ RelationInput.propTypes = {
 };
 
 /**
- * This is in a seperate component to enforce passing all the props the component requires to react-window
+ * This is in a separate component to enforce passing all the props the component requires to react-window
  * to ensure drag & drop correctly works.
  */
 const ListItem = ({ data, index, style }) => {

package/admin/src/content-manager/components/RelationInputDataManager/utils/getRelationLink.js

@@ -1,5 +1,3 @@
-import { getRequestUrl } from '../../../utils';
-
 export function getRelationLink(targetModel, id) {
-  return `${getRequestUrl(`collectionType/${targetModel}/${id ?? ''}`)}`;
+  return `/content-manager/collectionType/${targetModel}/${id ?? ''}`;
 }

package/admin/src/content-manager/components/RelationInputDataManager/utils/select.js

@@ -4,8 +4,6 @@ import { useCMEditViewDataManager } from '@strapi/helper-plugin';
 import get from 'lodash/get';
 import { useRouteMatch } from 'react-router-dom';
 
-import { getRequestUrl } from '../../../utils';
-
 function useSelect({
   componentUid,
   isUserAllowedToEditField,
@@ -78,20 +76,20 @@ function useSelect({
       // if no componentId exists in modifiedData it means that the user just created it
       // there then are no relations to request
       return componentId
-        ? getRequestUrl(`relations/${componentUid}/${componentId}/${fieldNameKeys.at(-1)}`)
+        ? `/content-manager/relations/${componentUid}/${componentId}/${fieldNameKeys.at(-1)}`
         : null;
     }
 
-    return getRequestUrl(`relations/${slug}/${entityId}/${name.split('.').at(-1)}`);
+    return `/content-manager/relations/${slug}/${entityId}/${name.split('.').at(-1)}`;
   }, [isCreatingEntry, origin, componentUid, slug, entityId, name, componentId, fieldNameKeys]);
 
   // /content-manager/relations/[model]/[field-name]
   const relationSearchEndpoint = useMemo(() => {
     if (componentUid) {
-      return getRequestUrl(`relations/${componentUid}/${name.split('.').at(-1)}`);
+      return `/content-manager/relations/${componentUid}/${name.split('.').at(-1)}`;
     }
 
-    return getRequestUrl(`relations/${slug}/${name.split('.').at(-1)}`);
+    return `/content-manager/relations/${slug}/${name.split('.').at(-1)}`;
   }, [componentUid, slug, name]);
 
   return {

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

@@ -29,8 +29,6 @@ import {
 import selectCrudReducer from '../../sharedReducers/crudReducer/selectors';
 import { createDefaultForm, getTrad, removePasswordFieldsFromData } from '../../utils';
 
-import { getRequestUrl } from './utils';
-
 // This container is used to handle the CRUD
 const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
   const queryClient = useQueryClient();
@@ -110,7 +108,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       setIsCreatingEntry(true);
 
       try {
-        const { data } = await fetchClient.get(getRequestUrl(slug), {
+        const { data } = await fetchClient.get(`/content-manager/single-types/${slug}`, {
           cancelToken: source.token,
           params,
         });
@@ -158,7 +156,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
       try {
         trackUsageRef.current('willDeleteEntry', trackerProperty);
 
-        const { data } = await del(getRequestUrl(slug), {
+        const { data } = await del(`/content-manager/single-types/${slug}`, {
           params,
         });
 
@@ -186,7 +184,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
 
   const onPost = useCallback(
     async (body, trackerProperty) => {
-      const endPoint = getRequestUrl(slug);
+      const endPoint = `/content-manager/single-types/${slug}`;
 
       try {
         dispatch(setStatus('submit-pending'));
@@ -237,7 +235,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
     try {
       trackUsageRef.current('willCheckDraftRelations');
 
-      const endPoint = getRequestUrl(`${slug}/actions/countDraftRelations`);
+      const endPoint = `/content-manager/single-types/${slug}/actions/countDraftRelations`;
       dispatch(setStatus('draft-relation-check-pending'));
 
       const numberOfDraftRelations = await fetchClient.get(endPoint);
@@ -257,7 +255,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
   const onPublish = useCallback(async () => {
     try {
       trackUsageRef.current('willPublishEntry');
-      const endPoint = getRequestUrl(`${slug}/actions/publish`);
+      const endPoint = `/content-manager/single-types/${slug}/actions/publish`;
 
       dispatch(setStatus('publish-pending'));
 
@@ -291,7 +289,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
 
   const onPut = useCallback(
     async (body, trackerProperty) => {
-      const endPoint = getRequestUrl(slug);
+      const endPoint = `/content-manager/single-types/${slug}`;
 
       try {
         trackUsageRef.current('willEditEntry', trackerProperty);
@@ -330,7 +328,7 @@ const SingleTypeFormWrapper = ({ allLayoutData, children, slug }) => {
 
   // The publish and unpublish method could be refactored but let's leave the duplication for now
   const onUnpublish = useCallback(async () => {
-    const endPoint = getRequestUrl(`${slug}/actions/unpublish`);
+    const endPoint = `/content-manager/single-types/${slug}/actions/unpublish`;
 
     dispatch(setStatus('unpublish-pending'));
 

package/admin/src/content-manager/pages/App/utils/getContentTypeLinks.js

@@ -1,7 +1,5 @@
 import { getFetchClient } from '@strapi/helper-plugin';
 
-import { getRequestUrl } from '../../../utils';
-
 import checkPermissions from './checkPermissions';
 import generateModelsLinks from './generateModelsLinks';
 
@@ -10,7 +8,7 @@ const getContentTypeLinks = async ({ models, userPermissions, toggleNotification
   try {
     const {
       data: { data: contentTypeConfigurations },
-    } = await get(getRequestUrl('content-types-settings'));
+    } = await get('/content-manager/content-types-settings');
 
     const { collectionTypeSectionLinks, singleTypeSectionLinks } = generateModelsLinks(
       models,

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

@@ -14,14 +14,16 @@ import {
   Select,
   Typography,
 } from '@strapi/design-system';
-import { ConfirmDialog, Link, useNotification, useTracking } from '@strapi/helper-plugin';
+import {
+  ConfirmDialog,
+  Link,
+  useFetchClient,
+  useNotification,
+  useTracking,
+} from '@strapi/helper-plugin';
 import { ArrowLeft, Check } from '@strapi/icons';
 import cloneDeep from 'lodash/cloneDeep';
-import flatMap from 'lodash/flatMap';
-import get from 'lodash/get';
 import isEqual from 'lodash/isEqual';
-import pick from 'lodash/pick';
-import set from 'lodash/set';
 import upperFirst from 'lodash/upperFirst';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
@@ -37,7 +39,6 @@ import ModalForm from './components/FormModal';
 import { LayoutDndProvider } from './components/LayoutDndProvider';
 import init from './init';
 import reducer, { initialState } from './reducer';
-import putCMSettingsEV from './utils/api';
 import { unformatLayout } from './utils/layout';
 
 const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, updateLayout }) => {
@@ -52,12 +53,13 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
   const [isConfirmDialogOpen, setIsConfirmDialogOpen] = useState(false);
   const { componentLayouts, initialData, modifiedData, metaToEdit, metaForm } = reducerState;
   const { formatMessage } = useIntl();
-  const modelName = get(mainLayout, ['info', 'displayName'], '');
-  const attributes = get(modifiedData, ['attributes'], {});
+  const modelName = mainLayout.info.displayName;
+  const attributes = modifiedData?.attributes ?? {};
   const fieldSizes = useSelector(selectFieldSizes);
+  const { put } = useFetchClient();
 
   const entryTitleOptions = Object.keys(attributes).filter((attr) => {
-    const type = get(attributes, [attr, 'type'], '');
+    const type = attributes?.[attr]?.type ?? '';
 
     return (
       ![
@@ -74,10 +76,10 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
       ].includes(type) && !!type
     );
   });
-  const editLayout = get(modifiedData, ['layouts', 'edit'], []);
-  const displayedFields = flatMap(editLayout, 'rowContent');
+  const editLayout = modifiedData.layouts.edit;
+  const displayedFields = editLayout.flatMap((layout) => layout.rowContent);
   const editLayoutFields = Object.keys(modifiedData.attributes)
-    .filter((attr) => get(modifiedData, ['metadatas', attr, 'edit', 'visible'], false) === true)
+    .filter((attr) => (modifiedData?.metadatas?.[attr]?.edit?.visible ?? false) === true)
     .filter((attr) => displayedFields.findIndex((el) => el.name === attr) === -1)
     .sort();
 
@@ -128,7 +130,12 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
 
   const submitMutation = useMutation(
     (body) => {
-      return putCMSettingsEV(body, slug, isContentTypeView);
+      return put(
+        isContentTypeView
+          ? `/content-manager/content-types/${slug}/configuration`
+          : `components/${slug}/configuration`,
+        body
+      );
     },
     {
       onSuccess({ data }) {
@@ -149,9 +156,15 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
   const { isLoading: isSubmittingForm } = submitMutation;
 
   const handleConfirm = () => {
-    const body = pick(cloneDeep(modifiedData), ['layouts', 'metadatas', 'settings']);
-    set(body, 'layouts.edit', unformatLayout(body.layouts.edit));
-    submitMutation.mutate(body);
+    const { layouts, metadatas, settings } = cloneDeep(modifiedData);
+    submitMutation.mutate({
+      layouts: {
+        ...layouts,
+        edit: unformatLayout(layouts.edit),
+      },
+      metadatas,
+      settings,
+    });
   };
 
   const handleMoveRelation = (fromIndex, toIndex) => {
@@ -357,8 +370,8 @@ const EditSettingsView = ({ mainLayout, components, isContentTypeView, slug, upd
             onToggle={handleToggleModal}
             onMetaChange={handleMetaChange}
             onSizeChange={handleSizeChange}
-            type={get(attributes, [metaToEdit, 'type'], '')}
-            customFieldUid={get(attributes, [metaToEdit, 'customField'], '')}
+            type={attributes?.[metaToEdit]?.type ?? ''}
+            customFieldUid={attributes?.[metaToEdit]?.customField ?? ''}
           />
         )}
       </Main>

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

@@ -29,7 +29,7 @@ const HeaderContainer = styled(Flex)`
   }
 `;
 
-const EditFieldForm = ({
+export const EditFieldForm = ({
   attributes,
   fieldForm,
   fieldToEdit,
@@ -142,5 +142,3 @@ EditFieldForm.propTypes = {
   onSubmit: PropTypes.func.isRequired,
   type: PropTypes.string.isRequired,
 };
-
-export default EditFieldForm;

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

@@ -15,7 +15,7 @@ import { useIntl } from 'react-intl';
 
 import { getTrad } from '../../../utils';
 
-const Settings = ({ modifiedData, onChange, sortOptions }) => {
+export const Settings = ({ modifiedData, onChange, sortOptions }) => {
   const { formatMessage } = useIntl();
   const { settings, metadatas } = modifiedData;
 
@@ -168,5 +168,3 @@ Settings.propTypes = {
   onChange: PropTypes.func.isRequired,
   sortOptions: PropTypes.array,
 };
-
-export default Settings;

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

@@ -5,19 +5,12 @@ import { Menu } from '@strapi/design-system/v2';
 import { Plus } from '@strapi/icons';
 import { PropTypes } from 'prop-types';
 import { useIntl } from 'react-intl';
-import styled from 'styled-components';
 
 import { getTrad } from '../../../utils';
 
 import DraggableCard from './DraggableCard';
 
-const ScrollableContainer = styled(Box)`
-  flex: ${({ size }) => size};
-  overflow-x: scroll;
-  overflow-y: hidden;
-`;
-
-const SortDisplayedFields = ({
+export const SortDisplayedFields = ({
   displayedFields,
   listRemainingFields,
   metadatas,
@@ -48,25 +41,16 @@ const SortDisplayedFields = ({
   }, [displayedFields, lastAction]);
 
   return (
-    <>
-      <Box paddingBottom={4}>
-        <Typography variant="delta" as="h2">
-          {formatMessage({
-            id: getTrad('containers.SettingPage.view'),
-            defaultMessage: 'View',
-          })}
-        </Typography>
-      </Box>
-      <Flex
-        paddingTop={4}
-        paddingLeft={4}
-        paddingRight={4}
-        borderColor="neutral300"
-        borderStyle="dashed"
-        borderWidth="1px"
-        hasRadius
-      >
-        <ScrollableContainer size="1" paddingBottom={4} ref={scrollableContainerRef}>
+    <Flex alignItems="stretch" direction="column" gap={4}>
+      <Typography variant="delta" as="h2">
+        {formatMessage({
+          id: getTrad('containers.SettingPage.view'),
+          defaultMessage: 'View',
+        })}
+      </Typography>
+
+      <Flex padding={4} borderColor="neutral300" borderStyle="dashed" borderWidth="1px" hasRadius>
+        <Box flex="1" overflow="scroll hidden" ref={scrollableContainerRef}>
           <Flex gap={3}>
             {displayedFields.map((field, index) => (
               <DraggableCard
@@ -82,7 +66,8 @@ const SortDisplayedFields = ({
               />
             ))}
           </Flex>
-        </ScrollableContainer>
+        </Box>
+
         <Menu.Root>
           <Menu.Trigger
             paddingLeft={2}
@@ -90,7 +75,6 @@ const SortDisplayedFields = ({
             justifyContent="center"
             endIcon={null}
             disabled={listRemainingFields.length <= 0}
-            marginBottom={4}
             variant="tertiary"
           >
             <VisuallyHidden as="span">
@@ -110,7 +94,7 @@ const SortDisplayedFields = ({
           </Menu.Content>
         </Menu.Root>
       </Flex>
-    </>
+    </Flex>
   );
 };
 
@@ -129,5 +113,3 @@ SortDisplayedFields.propTypes = {
   onMoveField: PropTypes.func.isRequired,
   onRemoveField: PropTypes.func.isRequired,
 };
-
-export default SortDisplayedFields;