@strapi/admin 4.6.0-beta.1 → 4.6.0

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

@@ -5,9 +5,12 @@ import { axiosInstance } from '../../../core/utils';
 
 import { normalizeRelations } from '../../components/RelationInputDataManager/utils';
 
-export const useRelation = (cacheKey, { name, relation, search }) => {
+import { useCallbackRef } from '../useCallbackRef';
+
+export const useRelation = (cacheKey, { relation, search }) => {
   const [searchParams, setSearchParams] = useState({});
   const [currentPage, setCurrentPage] = useState(0);
+
   /**
    * This runs in `useInfiniteQuery` to actually fetch the data
    */
@@ -44,7 +47,7 @@ export const useRelation = (cacheKey, { name, relation, search }) => {
     }
   };
 
-  const { onLoad: onLoadRelationsCallback, normalizeArguments = {} } = relation;
+  const { onLoad: onLoadRelations, normalizeArguments = {} } = relation;
 
   const relationsRes = useInfiniteQuery(['relation', cacheKey], fetchRelations, {
     cacheTime: 0,
@@ -120,19 +123,19 @@ export const useRelation = (cacheKey, { name, relation, search }) => {
     }
   }, [pageGoal, currentPage, fetchNextPage, hasNextPage, status]);
 
+  const onLoadRelationsCallback = useCallbackRef(onLoadRelations);
+
   useEffect(() => {
     if (status === 'success' && data && data.pages?.at(-1)?.results && onLoadRelationsCallback) {
       // everytime we fetch, we normalize prior to adding to redux
       const normalizedResults = normalizeRelations(data.pages.at(-1).results, normalizeArguments);
 
       // this is loadRelation from EditViewDataManagerProvider
-      onLoadRelationsCallback({
-        target: { name, value: normalizedResults },
-      });
+      onLoadRelationsCallback(normalizedResults);
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [status, onLoadRelationsCallback, name, data]);
+  }, [status, onLoadRelationsCallback, data]);
 
   const searchRes = useInfiniteQuery(
     ['relation', cacheKey, 'search', JSON.stringify(searchParams)],

package/admin/src/content-manager/pages/App/LeftMenu/index.js

@@ -7,10 +7,8 @@
 import React, { useMemo, useState } from 'react';
 import { useSelector, shallowEqual } from 'react-redux';
 import { useIntl } from 'react-intl';
-import matchSorter from 'match-sorter';
-import sortBy from 'lodash/sortBy';
-import toLower from 'lodash/toLower';
 import { NavLink } from 'react-router-dom';
+
 import {
   SubNav,
   SubNavHeader,
@@ -18,12 +16,11 @@ import {
   SubNavSections,
   SubNavLink,
 } from '@strapi/design-system/v2/SubNav';
+
+import { matchByTitle } from './utils';
 import getTrad from '../../../utils/getTrad';
 import { makeSelectModelLinks } from '../selectors';
 
-const matchByTitle = (links, search) =>
-  matchSorter(links, toLower(search), { keys: [(item) => toLower(item.title)] });
-
 const LeftMenu = () => {
   const [search, setSearch] = useState('');
   const { formatMessage } = useIntl();
@@ -52,9 +49,7 @@ const LeftMenu = () => {
         defaultMessage: 'Collection Types',
       },
       searchable: true,
-      links: sortBy(matchByTitle(intlCollectionTypeLinks, search), (object) =>
-        object.title.toLowerCase()
-      ),
+      links: matchByTitle(intlCollectionTypeLinks, search),
     },
     {
       id: 'singleTypes',
@@ -63,9 +58,7 @@ const LeftMenu = () => {
         defaultMessage: 'Single Types',
       },
       searchable: true,
-      links: sortBy(matchByTitle(intlSingleTypeLinks, search), (object) =>
-        object.title.toLowerCase()
-      ),
+      links: matchByTitle(intlSingleTypeLinks, search),
     },
   ];
 

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

@@ -0,0 +1 @@
+export { default as matchByTitle } from './matchByTitle';

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

@@ -0,0 +1,24 @@
+import matchSorter from 'match-sorter';
+import camelCase from 'lodash/camelCase';
+
+/**
+ * @type {(links: array, search? : string) => array }
+ */
+const matchByTitle = (links, search) =>
+  search
+    ? matchSorter(links, search.toLowerCase(), { keys: [(item) => item.title.toLowerCase()] })
+    : links.sort((link, nextLink) => {
+        const title = camelCase(link.title);
+        const nextTitle = camelCase(nextLink.title);
+
+        if (title < nextTitle) {
+          return -1;
+        }
+        if (title > nextTitle) {
+          return 1;
+        }
+
+        return 0;
+      });
+
+export default matchByTitle;

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

@@ -74,7 +74,7 @@ const Header = ({
             {formatMessage({ id: 'app.utils.publish', defaultMessage: 'Publish' })}
           </Button>
         )}
-        <Button disabled={!didChangeData} isLoading={status === 'submit-pending'} type="submit">
+        <Button disabled={!didChangeData} loading={status === 'submit-pending'} type="submit">
           {formatMessage({
             id: getTrad('containers.Edit.submit'),
             defaultMessage: 'Save',

package/admin/src/content-manager/pages/EditView/{Informations → Information}/index.js

@@ -1,25 +1,40 @@
 import React, { useRef } from 'react';
+import propTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { useCMEditViewDataManager } from '@strapi/helper-plugin';
-import { Box } from '@strapi/design-system/Box';
-import { Divider } from '@strapi/design-system/Divider';
-import { Typography } from '@strapi/design-system/Typography';
-import { Flex } from '@strapi/design-system/Flex';
-import { Stack } from '@strapi/design-system/Stack';
+import { Box, Divider, Flex, Stack, Typography } from '@strapi/design-system';
+
 import { getTrad } from '../../../utils';
 import getUnits from './utils/getUnits';
 import { getFullName } from '../../../../utils';
 
-const Informations = () => {
+const KeyValuePair = ({ label, value }) => {
+  return (
+    <Flex justifyContent="space-between">
+      <Typography as="dt" fontWeight="bold" textColor="neutral600">
+        {label}
+      </Typography>
+      <Typography as="dd">{value}</Typography>
+    </Flex>
+  );
+};
+
+KeyValuePair.propTypes = {
+  label: propTypes.string.isRequired,
+  value: propTypes.string.isRequired,
+};
+
+const Information = () => {
   const { formatMessage, formatRelativeTime } = useIntl();
   const { initialData, isCreatingEntry } = useCMEditViewDataManager();
   const currentTime = useRef(Date.now());
 
   const getFieldInfo = (atField, byField) => {
-    const userFirstname = initialData[byField]?.firstname || '';
-    const userLastname = initialData[byField]?.lastname || '';
-    const userUsername = initialData[byField]?.username;
-    const user = userUsername || getFullName(userFirstname, userLastname);
+    const { firstname, lastname, username } = initialData[byField] ?? {};
+
+    const userFirstname = firstname ?? '';
+    const userLastname = lastname ?? '';
+    const user = username ?? getFullName(userFirstname, userLastname);
     const timestamp = initialData[atField] ? new Date(initialData[atField]).getTime() : Date.now();
     const elapsed = timestamp - currentTime.current;
     const { unit, value } = getUnits(-elapsed);
@@ -34,56 +49,57 @@ const Informations = () => {
   const created = getFieldInfo('createdAt', 'createdBy');
 
   return (
-    <Box>
-      <Typography variant="sigma" textColor="neutral600" id="additional-informations">
+    <Stack spacing={2}>
+      <Typography variant="sigma" textColor="neutral600" id="additional-information">
         {formatMessage({
           id: getTrad('containers.Edit.information'),
           defaultMessage: 'Information',
         })}
       </Typography>
-      <Box paddingTop={2} paddingBottom={6}>
+
+      <Box paddingBottom={4}>
         <Divider />
       </Box>
+
       <Stack spacing={4}>
-        <Flex justifyContent="space-between">
-          <Typography fontWeight="bold">
-            {formatMessage({
+        <Stack spacing={2} as="dl">
+          <KeyValuePair
+            label={formatMessage({
               id: getTrad('containers.Edit.information.created'),
               defaultMessage: 'Created',
             })}
-          </Typography>
-          <Typography>{created.at}</Typography>
-        </Flex>
-        <Flex justifyContent="space-between">
-          <Typography fontWeight="bold">
-            {formatMessage({
+            value={created.at}
+          />
+
+          <KeyValuePair
+            label={formatMessage({
               id: getTrad('containers.Edit.information.by'),
               defaultMessage: 'By',
             })}
-          </Typography>
-          <Typography>{created.by}</Typography>
-        </Flex>
-        <Flex justifyContent="space-between">
-          <Typography fontWeight="bold">
-            {formatMessage({
+            value={created.by}
+          />
+        </Stack>
+
+        <Stack spacing={2} as="dl">
+          <KeyValuePair
+            label={formatMessage({
               id: getTrad('containers.Edit.information.lastUpdate'),
               defaultMessage: 'Last update',
             })}
-          </Typography>
-          <Typography>{updated.at}</Typography>
-        </Flex>
-        <Flex justifyContent="space-between">
-          <Typography fontWeight="bold">
-            {formatMessage({
+            value={updated.at}
+          />
+
+          <KeyValuePair
+            label={formatMessage({
               id: getTrad('containers.Edit.information.by'),
               defaultMessage: 'By',
             })}
-          </Typography>
-          <Typography>{updated.by}</Typography>
-        </Flex>
+            value={updated.by}
+          />
+        </Stack>
       </Stack>
-    </Box>
+    </Stack>
   );
 };
 
-export default Informations;
+export default Information;

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

@@ -25,7 +25,7 @@ import SingleTypeFormWrapper from '../../components/SingleTypeFormWrapper';
 import { getTrad } from '../../utils';
 import useLazyComponents from '../../hooks/useLazyComponents';
 import DraftAndPublishBadge from './DraftAndPublishBadge';
-import Informations from './Informations';
+import Information from './Information';
 import Header from './Header';
 import { getFieldsActionMatchingPermissions } from './utils';
 import DeleteLink from './DeleteLink';
@@ -175,7 +175,7 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
                       <DraftAndPublishBadge />
                       <Box
                         as="aside"
-                        aria-labelledby="additional-informations"
+                        aria-labelledby="additional-information"
                         background="neutral0"
                         borderColor="neutral150"
                         hasRadius
@@ -185,7 +185,7 @@ const EditView = ({ allowedActions, isSingleType, goBack, slug, id, origin, user
                         paddingTop={6}
                         shadow="tableShadow"
                       >
-                        <Informations />
+                        <Information />
                         <InjectionZone area="contentManager.editView.informations" />
                       </Box>
                       <Box as="aside" aria-labelledby="links">

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

@@ -5,6 +5,7 @@ import isEqual from 'lodash/isEqual';
 import upperFirst from 'lodash/upperFirst';
 import pick from 'lodash/pick';
 import get from 'lodash/get';
+import isEmpty from 'lodash/isEmpty';
 import { stringify } from 'qs';
 import { useNotification, useTracking, ConfirmDialog, Link } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
@@ -35,12 +36,12 @@ const ListSettingsView = ({ layout, slug }) => {
 
   const [showWarningSubmit, setWarningSubmit] = useState(false);
   const toggleWarningSubmit = () => setWarningSubmit((prevState) => !prevState);
-  const [isModalFormOpen, setIsModalFormOpen] = useState(false);
-  const toggleModalForm = () => setIsModalFormOpen((prevState) => !prevState);
   const [reducerState, dispatch] = useReducer(reducer, initialState, () =>
     init(initialState, layout)
   );
   const { fieldToEdit, fieldForm, initialData, modifiedData } = reducerState;
+  const isModalFormOpen = !isEmpty(fieldForm);
+
   const { attributes } = layout;
   const displayedFields = modifiedData.layouts.list;
 
@@ -110,19 +111,16 @@ const ListSettingsView = ({ layout, slug }) => {
       type: 'SET_FIELD_TO_EDIT',
       fieldToEdit,
     });
-    toggleModalForm();
   };
 
   const handleCloseModal = () => {
     dispatch({
       type: 'UNSET_FIELD_TO_EDIT',
     });
-    toggleModalForm();
   };
 
   const handleSubmitFieldEdit = (e) => {
     e.preventDefault();
-    toggleModalForm();
     dispatch({
       type: 'SUBMIT_FIELD_FORM',
     });

package/admin/src/content-manager/utils/getMaxTempKey.js

@@ -3,10 +3,12 @@ const getMaxTempKey = (arr) => {
     return -1;
   }
 
-  return Math.max.apply(
+  const maxTempKey = Math.max.apply(
     Math,
-    arr.map((o) => o.__temp_key__ ?? o.id)
+    arr.map((o) => o.__temp_key__ ?? 0)
   );
+
+  return Number.isNaN(maxTempKey) ? -1 : maxTempKey;
 };
 
 export default getMaxTempKey;

package/admin/src/content-manager/utils/paths.js

@@ -0,0 +1,37 @@
+/**
+ * This file is for all helpers related to `paths` in the CM.
+ */
+import { get } from 'lodash';
+
+/**
+ * This is typically used in circumstances where there are re-orderable pieces e.g. Dynamic Zones
+ * or Repeatable fields. It finds the _original_ location of the initial data using `__temp_key__` values
+ * which are added to the fields in the `INIT_FORM` reducer to give array data a stable (when you add
+ * a new item they wont have a server ID).
+ */
+export const getInitialDataPathUsingTempKeys = (initialData, modifiedData) => (currentPath) => {
+  const splitPath = currentPath.split('.');
+
+  return splitPath.reduce((acc, currentValue, index) => {
+    const initialDataParent = get(initialData, acc);
+    const modifiedDataTempKey = get(modifiedData, [
+      ...splitPath.slice(0, index),
+      currentValue,
+      '__temp_key__',
+    ]);
+
+    if (Array.isArray(initialDataParent) && typeof modifiedDataTempKey === 'number') {
+      const initialDataIndex = initialDataParent.findIndex(
+        (entry) => entry.__temp_key__ === modifiedDataTempKey
+      );
+
+      acc.push(initialDataIndex.toString());
+
+      return acc;
+    }
+
+    acc.push(currentValue);
+
+    return acc;
+  }, []);
+};

package/admin/src/core/store/configureStore.js

@@ -1,5 +1,4 @@
-import { createStore, applyMiddleware, compose } from 'redux';
-import createReducer from './createReducer';
+import { createStore, applyMiddleware, compose, combineReducers } from 'redux';
 
 const configureStore = (appMiddlewares, appReducers) => {
   let composeEnhancers = compose;
@@ -19,11 +18,30 @@ const configureStore = (appMiddlewares, appReducers) => {
     composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({});
   }
 
-  return createStore(
-    createReducer(appReducers),
+  const store = createStore(
+    createReducer(appReducers, {}),
     {},
     composeEnhancers(applyMiddleware(...middlewares))
   );
+
+  // Add a dictionary to keep track of the registered async reducers
+  store.asyncReducers = {};
+
+  // Create an inject reducer function
+  // This function adds the async reducer, and creates a new combined reducer
+  store.injectReducer = (key, asyncReducer) => {
+    store.asyncReducers[key] = asyncReducer;
+    store.replaceReducer(createReducer(appReducers, store.asyncReducers));
+  };
+
+  return store;
+};
+
+const createReducer = (appReducers, asyncReducers) => {
+  return combineReducers({
+    ...appReducers,
+    ...asyncReducers,
+  });
 };
 
 export default configureStore;

package/admin/src/core/utils/axiosInstance.js

@@ -3,14 +3,16 @@ import { auth, wrapAxiosInstance } from '@strapi/helper-plugin';
 
 const instance = axios.create({
   baseURL: process.env.STRAPI_ADMIN_BACKEND_URL,
+  headers: {
+    Accept: 'application/json',
+    'Content-Type': 'application/json',
+  },
 });
 
 instance.interceptors.request.use(
   async (config) => {
     config.headers = {
       Authorization: `Bearer ${auth.getToken()}`,
-      Accept: 'application/json',
-      'Content-Type': 'application/json',
     };
 
     return config;

package/admin/src/hooks/index.js

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

package/admin/src/hooks/useSettingsMenu/init.js

@@ -1,7 +1,7 @@
 import omit from 'lodash/omit';
 import sortLinks from './utils/sortLinks';
-import adminPermissions from '../../permissions';
 import formatLinks from './utils/formatLinks';
+import adminLinks from './utils/adminLinks';
 import globalLinks from './utils/globalLinks';
 
 const init = (initialState, { settings, shouldUpdateStrapi }) => {
@@ -23,23 +23,7 @@ const init = (initialState, { settings, shouldUpdateStrapi }) => {
     {
       id: 'permissions',
       intlLabel: { id: 'Settings.permissions', defaultMessage: 'Administration Panel' },
-      links: [
-        {
-          intlLabel: { id: 'global.roles', defaultMessage: 'Roles' },
-          to: '/settings/roles',
-          id: 'roles',
-          isDisplayed: false,
-          permissions: adminPermissions.settings.roles.main,
-        },
-        {
-          intlLabel: { id: 'global.users' },
-          // Init the search params directly
-          to: '/settings/users?pageSize=10&page=1&sort=firstname',
-          id: 'users',
-          isDisplayed: false,
-          permissions: adminPermissions.settings.users.main,
-        },
-      ],
+      links: adminLinks,
     },
     ...otherSections,
   ];

package/admin/src/hooks/useSettingsMenu/utils/adminLinks.js

@@ -0,0 +1,4 @@
+import customAdminLinks from 'ee_else_ce/hooks/useSettingsMenu/utils/customAdminLinks';
+import defaultAdminLinks from './defaultAdminLinks';
+
+export default [...customAdminLinks, ...defaultAdminLinks];

package/admin/src/hooks/useSettingsMenu/utils/customAdminLinks.js

@@ -0,0 +1 @@
+export default [];

package/admin/src/hooks/useSettingsMenu/utils/defaultAdminLinks.js

@@ -0,0 +1,21 @@
+import adminPermissions from '../../../permissions';
+
+const defaultAdminLinks = [
+  {
+    intlLabel: { id: 'global.roles', defaultMessage: 'Roles' },
+    to: '/settings/roles',
+    id: 'roles',
+    isDisplayed: false,
+    permissions: adminPermissions.settings.roles.main,
+  },
+  {
+    intlLabel: { id: 'global.users' },
+    // Init the search params directly
+    to: '/settings/users?pageSize=10&page=1&sort=firstname',
+    id: 'users',
+    isDisplayed: false,
+    permissions: adminPermissions.settings.users.main,
+  },
+];
+
+export default defaultAdminLinks;

package/admin/src/index.js

@@ -1,7 +1,7 @@
 import ReactDOM from 'react-dom';
+import appCustomisations from './app';
 import { Components, Fields, Middlewares, Reducers } from './core/apis';
 import { axiosInstance } from './core/utils';
-import appCustomisations from './app';
 // eslint-disable-next-line import/extensions
 import plugins from './plugins';
 import appReducers from './reducers';
@@ -12,6 +12,7 @@ window.strapi = {
   telemetryDisabled: process.env.STRAPI_TELEMETRY_DISABLED ?? false,
   features: {
     SSO: 'sso',
+    AUDIT_LOGS: 'audit-logs',
   },
   projectType: 'Community',
 };
@@ -38,8 +39,7 @@ const run = async () => {
     window.strapi.isEE = isEE;
     window.strapi.features = {
       ...window.strapi.features,
-      allFeatures: features,
-      isEnabled: (f) => features.includes(f),
+      isEnabled: (featureName) => features.some((feature) => feature.name === featureName),
     };
 
     window.strapi.projectType = isEE ? 'Enterprise' : 'Community';

package/admin/src/pages/App/index.js

@@ -14,6 +14,7 @@ import {
   TrackingProvider,
   prefixFileUrlWithBackendUrl,
   useAppInfos,
+  useFetchClient,
 } from '@strapi/helper-plugin';
 import axios from 'axios';
 import { SkipToContent } from '@strapi/design-system/Main';
@@ -25,7 +26,7 @@ import NotFoundPage from '../NotFoundPage';
 import UseCasePage from '../UseCasePage';
 import { getUID } from './utils';
 import routes from './utils/routes';
-import { useConfigurations, useFetchClient } from '../../hooks';
+import { useConfigurations } from '../../hooks';
 
 const AuthenticatedApp = lazy(() =>
   import(/* webpackChunkName: "Admin-authenticatedApp" */ '../../components/AuthenticatedApp')
@@ -79,11 +80,15 @@ function App() {
       try {
         const {
           data: {
-            data: { hasAdmin, uuid, menuLogo },
+            data: { hasAdmin, uuid, menuLogo, authLogo },
           },
         } = await axios.get(`${strapi.backendURL}/admin/init`);
 
-        updateProjectSettings({ menuLogo: prefixFileUrlWithBackendUrl(menuLogo) });
+        updateProjectSettings({
+          menuLogo: prefixFileUrlWithBackendUrl(menuLogo),
+          authLogo: prefixFileUrlWithBackendUrl(authLogo),
+        });
+
         const deviceId = await getUID();
 
         if (uuid) {

package/admin/src/pages/ProfilePage/index.js

@@ -458,7 +458,7 @@ const ProfilePage = () => {
                                     href="https://docs.strapi.io/developer-docs/latest/development/admin-customization.html#locales"
                                   >
                                     {formatMessage({
-                                      id: 'Settings.profile.form.section.experience.documentation',
+                                      id: 'Settings.profile.form.section.experience.here',
                                       defaultMessage: 'here',
                                     })}
                                   </DocumentationLink>