@strapi/admin 4.6.0-beta.2 → 4.6.0

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/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/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,30 +23,7 @@ const init = (initialState, { settings, shouldUpdateStrapi }) => {
     {
       id: 'permissions',
       intlLabel: { id: 'Settings.permissions', defaultMessage: 'Administration Panel' },
-      links: [
-        {
-          intlLabel: { id: 'global.auditLogs', defaultMessage: 'Audit Logs' },
-          to: '/settings/audit-logs?pageSize=50&page=1&sort=date:DESC',
-          id: 'auditLogs',
-          isDisplayed: false,
-          permissions: adminPermissions.settings.auditLogs.main,
-        },
-        {
-          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

@@ -80,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/SettingsPage/pages/ApplicationInfosPage/components/CustomizationInfos/index.js

@@ -0,0 +1,142 @@
+import React, { useReducer, forwardRef, useImperativeHandle } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { useTracking } from '@strapi/helper-plugin';
+import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { Box } from '@strapi/design-system/Box';
+import { Typography } from '@strapi/design-system/Typography';
+import { useConfigurations } from '../../../../../../hooks';
+import { DIMENSION, SIZE } from '../../utils/constants';
+import LogoInput from '../LogoInput';
+import reducer, { initialState } from './reducer';
+import init from './init';
+
+const CustomizationInfos = forwardRef(({ canUpdate, projectSettingsStored }, ref) => {
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+  const {
+    logos: { menu, auth },
+  } = useConfigurations();
+  const [{ menuLogo, authLogo }, dispatch] = useReducer(reducer, initialState, () =>
+    init(initialState, projectSettingsStored)
+  );
+
+  const handleChangeMenuLogo = (asset) => {
+    dispatch({
+      type: 'SET_CUSTOM_MENU_LOGO',
+      value: asset,
+    });
+  };
+
+  const handleResetMenuLogo = () => {
+    trackUsage('didClickResetLogo', {
+      logo: 'menu',
+    });
+
+    dispatch({
+      type: 'RESET_CUSTOM_MENU_LOGO',
+    });
+  };
+
+  const handleChangeAuthLogo = (asset) => {
+    dispatch({
+      type: 'SET_CUSTOM_AUTH_LOGO',
+      value: asset,
+    });
+  };
+
+  const handleResetAuthLogo = () => {
+    trackUsage('didClickResetLogo', {
+      logo: 'auth',
+    });
+
+    dispatch({
+      type: 'RESET_CUSTOM_AUTH_LOGO',
+    });
+  };
+
+  useImperativeHandle(ref, () => ({
+    getValues: () => ({ menuLogo: menuLogo.submit, authLogo: authLogo.submit }),
+  }));
+
+  return (
+    <Box
+      hasRadius
+      background="neutral0"
+      shadow="tableShadow"
+      paddingTop={6}
+      paddingBottom={6}
+      paddingRight={7}
+      paddingLeft={7}
+    >
+      <Typography variant="delta" as="h3">
+        {formatMessage({
+          id: 'Settings.application.customization',
+          defaultMessage: 'Customization',
+        })}
+      </Typography>
+      <Typography variant="pi" textColor="neutral600">
+        {formatMessage(
+          {
+            id: 'Settings.application.customization.size-details',
+            defaultMessage: 'Max dimension: {dimension}×{dimension}, Max file size: {size}KB',
+          },
+          { dimension: DIMENSION, size: SIZE }
+        )}
+      </Typography>
+      <Grid paddingTop={4} gap={4}>
+        <GridItem col={6} s={12}>
+          <LogoInput
+            canUpdate={canUpdate}
+            customLogo={menuLogo.display}
+            defaultLogo={menu.default}
+            hint={formatMessage({
+              id: 'Settings.application.customization.menu-logo.carousel-hint',
+              defaultMessage: 'Replace the logo in the main navigation',
+            })}
+            label={formatMessage({
+              id: 'Settings.application.customization.carousel.menu-logo.title',
+              defaultMessage: 'Menu logo',
+            })}
+            onChangeLogo={handleChangeMenuLogo}
+            onResetLogo={handleResetMenuLogo}
+          />
+        </GridItem>
+        <GridItem col={6} s={12}>
+          <LogoInput
+            canUpdate={canUpdate}
+            customLogo={authLogo.display}
+            defaultLogo={auth.default}
+            hint={formatMessage({
+              id: 'Settings.application.customization.auth-logo.carousel-hint',
+              defaultMessage: 'Replace the logo in the authentication pages',
+            })}
+            label={formatMessage({
+              id: 'Settings.application.customization.carousel.auth-logo.title',
+              defaultMessage: 'Auth logo',
+            })}
+            onChangeLogo={handleChangeAuthLogo}
+            onResetLogo={handleResetAuthLogo}
+          />
+        </GridItem>
+      </Grid>
+    </Box>
+  );
+});
+
+CustomizationInfos.defaultProps = {
+  canUpdate: false,
+  projectSettingsStored: null,
+};
+
+CustomizationInfos.propTypes = {
+  canUpdate: PropTypes.bool,
+  projectSettingsStored: PropTypes.shape({
+    menuLogo: PropTypes.shape({
+      url: PropTypes.string,
+      name: PropTypes.string,
+    }),
+  }),
+};
+
+export default CustomizationInfos;

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/{Form → CustomizationInfos}/init.js

@@ -5,6 +5,9 @@ const init = (initialState, projectSettingsStored) => {
     menuLogo: {
       display: projectSettingsStored.menuLogo,
     },
+    authLogo: {
+      display: projectSettingsStored.authLogo,
+    },
   });
 
   return copyInitialState;

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/{Form → CustomizationInfos}/reducer.js

@@ -15,6 +15,13 @@ const initialState = {
       isReset: false,
     },
   },
+  authLogo: {
+    display: null,
+    submit: {
+      rawFile: null,
+      isReset: false,
+    },
+  },
 };
 
 const reducer = (state = initialState, action) =>
@@ -25,6 +32,11 @@ const reducer = (state = initialState, action) =>
         draftState.menuLogo.submit.rawFile = action.value.rawFile;
         break;
       }
+      case 'SET_CUSTOM_AUTH_LOGO': {
+        draftState.authLogo.display = action.value;
+        draftState.authLogo.submit.rawFile = action.value.rawFile;
+        break;
+      }
       case 'RESET_CUSTOM_MENU_LOGO': {
         draftState.menuLogo.display = null;
         draftState.menuLogo.submit = {
@@ -33,6 +45,14 @@ const reducer = (state = initialState, action) =>
         };
         break;
       }
+      case 'RESET_CUSTOM_AUTH_LOGO': {
+        draftState.authLogo.display = null;
+        draftState.authLogo.submit = {
+          rawFile: null,
+          isReset: true,
+        };
+        break;
+      }
       default: {
         return draftState;
       }

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/index.js

@@ -6,12 +6,19 @@ import { IconButton } from '@strapi/design-system/IconButton';
 import { Box } from '@strapi/design-system/Box';
 import Plus from '@strapi/icons/Plus';
 import Refresh from '@strapi/icons/Refresh';
-import reducer, { initialState } from './reducer';
 import LogoModalStepper from '../LogoModalStepper';
-import { SIZE, DIMENSION } from '../../utils/constants';
+import reducer, { initialState } from './reducer';
 import stepper from './stepper';
 
-const LogoInput = ({ customLogo, defaultLogo, onChangeLogo, onResetMenuLogo }) => {
+const LogoInput = ({
+  canUpdate,
+  customLogo,
+  defaultLogo,
+  hint,
+  label,
+  onChangeLogo,
+  onResetLogo,
+}) => {
   const [{ currentStep }, dispatch] = useReducer(reducer, initialState);
   const { Component, next, prev, modalTitle } = stepper[currentStep] || {};
   const { formatMessage } = useIntl();
@@ -26,19 +33,9 @@ const LogoInput = ({ customLogo, defaultLogo, onChangeLogo, onResetMenuLogo }) =
   return (
     <>
       <CarouselInput
-        label={formatMessage({
-          id: 'Settings.application.customization.carousel.title',
-          defaultMessage: 'Logo',
-        })}
+        label={label}
         selectedSlide={0}
-        hint={formatMessage(
-          {
-            id: 'Settings.application.customization.carousel-hint',
-            defaultMessage:
-              'Change the admin panel logo (Max dimension: {dimension}x{dimension}, Max file size: {size}KB)',
-          },
-          { size: SIZE, dimension: DIMENSION }
-        )}
+        hint={hint}
         // Carousel is used here for a single media,
         // we don't need previous and next labels but these props are required
         previousLabel=""
@@ -49,6 +46,7 @@ const LogoInput = ({ customLogo, defaultLogo, onChangeLogo, onResetMenuLogo }) =
         actions={
           <CarouselActions>
             <IconButton
+              disabled={!canUpdate}
               onClick={() => goTo(customLogo ? 'pending' : 'upload')}
               label={formatMessage({
                 id: 'Settings.application.customization.carousel.change-action',
@@ -58,7 +56,8 @@ const LogoInput = ({ customLogo, defaultLogo, onChangeLogo, onResetMenuLogo }) =
             />
             {customLogo && (
               <IconButton
-                onClick={onResetMenuLogo}
+                disabled={!canUpdate}
+                onClick={onResetLogo}
                 label={formatMessage({
                   id: 'Settings.application.customization.carousel.reset-action',
                   defaultMessage: 'Reset logo',
@@ -102,17 +101,22 @@ const LogoInput = ({ customLogo, defaultLogo, onChangeLogo, onResetMenuLogo }) =
 };
 
 LogoInput.defaultProps = {
+  canUpdate: false,
   customLogo: null,
+  hint: null,
 };
 
 LogoInput.propTypes = {
+  canUpdate: PropTypes.bool,
   customLogo: PropTypes.shape({
     url: PropTypes.string,
     name: PropTypes.string,
   }),
+  label: PropTypes.string.isRequired,
+  hint: PropTypes.string,
   defaultLogo: PropTypes.string.isRequired,
   onChangeLogo: PropTypes.func.isRequired,
-  onResetMenuLogo: PropTypes.func.isRequired,
+  onResetLogo: PropTypes.func.isRequired,
 };
 
 export default LogoInput;