@strapi/admin 4.6.0-beta.1 → 4.6.0

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;

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

@@ -5,8 +5,8 @@ import {
   useAppInfos,
   SettingsPageTitle,
   useFocusWhenNavigate,
-  CheckPermissions,
   useNotification,
+  useRBAC,
   useTracking,
 } from '@strapi/helper-plugin';
 import { HeaderLayout, Layout, ContentLayout } from '@strapi/design-system/Layout';
@@ -19,13 +19,12 @@ import { Button } from '@strapi/design-system/Button';
 import { Link } from '@strapi/design-system/v2/Link';
 import ExternalLink from '@strapi/icons/ExternalLink';
 import Check from '@strapi/icons/Check';
+import adminPermissions from '../../../../permissions';
 import { useConfigurations } from '../../../../hooks';
-import Form from './components/Form';
+import CustomizationInfos from './components/CustomizationInfos';
 import { fetchProjectSettings, postProjectSettings } from './utils/api';
 import getFormData from './utils/getFormData';
 
-const permissions = [{ action: 'admin::project-settings.update', subject: null }];
-
 const ApplicationInfosPage = () => {
   const inputsRef = useRef();
   const toggleNotification = useNotification();
@@ -37,30 +36,52 @@ const ApplicationInfosPage = () => {
   const { shouldUpdateStrapi, latestStrapiReleaseTag, strapiVersion } = appInfos;
   const { updateProjectSettings } = useConfigurations();
 
-  const { data } = useQuery('project-settings', fetchProjectSettings);
+  const {
+    allowedActions: { canRead, canUpdate },
+  } = useRBAC(adminPermissions.settings['project-settings']);
+  const canSubmit = canRead && canUpdate;
+
+  const { data } = useQuery('project-settings', fetchProjectSettings, { enabled: canRead });
 
   const currentPlan = appInfos.communityEdition
     ? 'app.components.UpgradePlanModal.text-ce'
     : 'app.components.UpgradePlanModal.text-ee';
 
   const submitMutation = useMutation((body) => postProjectSettings(body), {
-    async onSuccess({ menuLogo }) {
+    async onSuccess({ menuLogo, authLogo }) {
       await queryClient.invalidateQueries('project-settings', { refetchActive: true });
-      updateProjectSettings({ menuLogo: menuLogo?.url });
+      updateProjectSettings({ menuLogo: menuLogo?.url, authLogo: authLogo?.url });
     },
   });
 
-  const handleSubmit = () => {
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    if (!canUpdate) return;
+
     const inputValues = inputsRef.current.getValues();
     const formData = getFormData(inputValues);
 
     submitMutation.mutate(formData, {
       onSuccess() {
-        const { menuLogo } = inputValues;
+        const { menuLogo, authLogo } = inputValues;
 
         if (menuLogo.rawFile) {
-          trackUsage('didChangeLogo');
+          trackUsage('didChangeLogo', {
+            logo: 'menu',
+          });
         }
+
+        if (authLogo.rawFile) {
+          trackUsage('didChangeLogo', {
+            logo: 'auth',
+          });
+        }
+
+        toggleNotification({
+          type: 'success',
+          message: formatMessage({ id: 'app', defaultMessage: 'Saved' }),
+        });
       },
       onError() {
         toggleNotification({
@@ -75,30 +96,33 @@ const ApplicationInfosPage = () => {
     <Layout>
       <SettingsPageTitle name="Application" />
       <Main>
-        <HeaderLayout
-          title={formatMessage({ id: 'Settings.application.title', defaultMessage: 'Overview' })}
-          subtitle={formatMessage({
-            id: 'Settings.application.description',
-            defaultMessage: 'Administration panel’s global information',
-          })}
-          primaryAction={
-            <Button onClick={handleSubmit} startIcon={<Check />}>
-              {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
-            </Button>
-          }
-        />
-        <ContentLayout>
-          <Stack spacing={6}>
-            <Box
-              hasRadius
-              background="neutral0"
-              shadow="tableShadow"
-              paddingTop={6}
-              paddingBottom={6}
-              paddingRight={7}
-              paddingLeft={7}
-            >
-              <Stack spacing={5}>
+        <form onSubmit={handleSubmit}>
+          <HeaderLayout
+            title={formatMessage({ id: 'Settings.application.title', defaultMessage: 'Overview' })}
+            subtitle={formatMessage({
+              id: 'Settings.application.description',
+              defaultMessage: 'Administration panel’s global information',
+            })}
+            primaryAction={
+              canSubmit && (
+                <Button type="submit" startIcon={<Check />}>
+                  {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
+                </Button>
+              )
+            }
+          />
+          <ContentLayout>
+            <Stack spacing={6}>
+              <Stack
+                spacing={5}
+                hasRadius
+                background="neutral0"
+                shadow="tableShadow"
+                paddingTop={6}
+                paddingBottom={6}
+                paddingRight={7}
+                paddingLeft={7}
+              >
                 <Typography variant="delta" as="h3">
                   {formatMessage({
                     id: 'global.details',
@@ -187,14 +211,16 @@ const ApplicationInfosPage = () => {
                   <Typography as="p">{appInfos.nodeVersion}</Typography>
                 </Box>
               </Stack>
-            </Box>
-            {data && (
-              <CheckPermissions permissions={permissions}>
-                <Form ref={inputsRef} projectSettingsStored={data} />
-              </CheckPermissions>
-            )}
-          </Stack>
-        </ContentLayout>
+              {canRead && data && (
+                <CustomizationInfos
+                  canUpdate={canUpdate}
+                  ref={inputsRef}
+                  projectSettingsStored={data}
+                />
+              )}
+            </Stack>
+          </ContentLayout>
+        </form>
       </Main>
     </Layout>
   );

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/utils/api.js

@@ -8,7 +8,11 @@ const fetchProjectSettings = async () => {
 };
 
 const postProjectSettings = async (body) => {
-  const { data } = await axiosInstance.post('/admin/project-settings', body);
+  const { data } = await axiosInstance.post('/admin/project-settings', body, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
 
   return prefixAllUrls(data);
 };

package/admin/src/pages/SettingsPage/pages/Webhooks/EditView/components/EventInput/index.js

@@ -118,7 +118,7 @@ const EventInput = ({ isDraftAndPublish }) => {
                     title={formatMessage({
                       id: 'Settings.webhooks.event.publish-tooltip',
                       defaultMessage:
-                        'This event only exists for contents with Draft/Publish system enabled',
+                        'This event only exists for content with draft & publish enabled',
                     })}
                   >
                     <Typography variant="sigma" textColor="neutral600">

package/admin/src/permissions/defaultPermissions.js

@@ -34,6 +34,10 @@ const permissions = {
     uninstall: [{ action: 'admin::marketplace.plugins.uninstall', subject: null }],
   },
   settings: {
+    auditLogs: {
+      main: [{ action: 'admin::audit-logs.read', subject: null }],
+      read: [{ action: 'admin::audit-logs.read', subject: null }],
+    },
     roles: {
       main: [
         { action: 'admin::roles.create', subject: null },
@@ -83,6 +87,10 @@ const permissions = {
       update: [{ action: 'admin::api-tokens.update', subject: null }],
       regenerate: [{ action: 'admin::api-tokens.regenerate', subject: null }],
     },
+    'project-settings': {
+      read: [{ action: 'admin::project-settings.read', subject: null }],
+      update: [{ action: 'admin::project-settings.update', subject: null }],
+    },
   },
 };
 

package/admin/src/translations/ca.json

@@ -125,11 +125,10 @@
   "Settings.permissions.users.tabs.label": "Permisos de pestanyes",
   "Settings.profile.form.notify.data.loaded": "S'han carregat les dades del vostre perfil",
   "Settings.profile.form.section.experience.clear.select": "Esborrar l'idioma d'interfície seleccionat",
-  "Settings.profile.form.section.experience.documentation": "documentació",
-  "Settings.profile.form.section.experience.here": "aquí",
+  "Settings.profile.form.section.experience.here": "documentació",
   "Settings.profile.form.section.experience.interfaceLanguage": "Idioma d'interfície",
   "Settings.profile.form.section.experience.interfaceLanguage.hint": "Això només mostrarà la vostra pròpia interfície en l'idioma escollit.",
-  "Settings.profile.form.section.experience.interfaceLanguageHelp": "La selecció canviarà l'idioma de la interfície només per a vosaltres. Consulteu aquesta {documentation} perquè altres idiomes estiguin disponibles per al vostre ordinador.",
+  "Settings.profile.form.section.experience.interfaceLanguageHelp": "La selecció canviarà l'idioma de la interfície només per a vosaltres. Consulteu aquesta {here} perquè altres idiomes estiguin disponibles per al vostre ordinador.",
   "Settings.profile.form.section.experience.mode.hint": "Mostra la vostra interfície en el mode escollit.",
   "Settings.profile.form.section.experience.mode.label": "Mode d'interfície",
   "Settings.profile.form.section.experience.mode.option-label": "mode {nom}",

package/admin/src/translations/dk.json

@@ -123,10 +123,10 @@
   "Settings.permissions.users.tabs.label": "Tabs Tilladelser",
   "Settings.profile.form.notify.data.loaded": "Dine profildata er blevet hentet",
   "Settings.profile.form.section.experience.clear.select": "Nulstil det valgte interface sprog",
-  "Settings.profile.form.section.experience.documentation": "dokumentation",
+  "Settings.profile.form.section.experience.here": "dokumentation",
   "Settings.profile.form.section.experience.interfaceLanguage": "Interface sprog",
   "Settings.profile.form.section.experience.interfaceLanguage.hint": "Dette vil kun vise dit eget interface i det valgte sprog.",
-  "Settings.profile.form.section.experience.interfaceLanguageHelp": "Valget vil kun ændre sproget for dig. Referér venligst til dette {documentation} for at gøre andre sprog tilgængelige for dit hold.",
+  "Settings.profile.form.section.experience.interfaceLanguageHelp": "Valget vil kun ændre sproget for dig. Referér venligst til dette {here} for at gøre andre sprog tilgængelige for dit hold.",
   "Settings.profile.form.section.experience.title": "Oplevelse",
   "Settings.profile.form.section.helmet.title": "Bruger profil",
   "Settings.profile.form.section.profile.page.title": "Profil side",