@strapi/admin 4.6.0-beta.2 → 4.6.1

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

@@ -1,14 +1,20 @@
-import { axiosInstance } from '../../../../../core/utils';
+import { getFetchClient } from '@strapi/helper-plugin';
 import prefixAllUrls from './prefixAllUrls';
 
 const fetchProjectSettings = async () => {
-  const { data } = await axiosInstance.get('/admin/project-settings');
+  const { get } = getFetchClient();
+  const { data } = await get('/admin/project-settings');
 
   return prefixAllUrls(data);
 };
 
 const postProjectSettings = async (body) => {
-  const { data } = await axiosInstance.post('/admin/project-settings', body);
+  const { post } = getFetchClient();
+  const { data } = await post('/admin/project-settings', body, {
+    headers: {
+      'Content-Type': 'multipart/form-data',
+    },
+  });
 
   return prefixAllUrls(data);
 };

package/admin/src/pages/SettingsPage/pages/Users/EditPage/utils/api.js

@@ -1,13 +1,16 @@
-import { axiosInstance } from '../../../../../../core/utils';
+import { getFetchClient } from '@strapi/helper-plugin';
 
 const fetchUser = async (id) => {
-  const { data } = await axiosInstance.get(`/admin/users/${id}`);
+  const { get } = getFetchClient();
+  const { data } = await get(`/admin/users/${id}`);
 
   return data.data;
 };
 
 const putUser = async (id, body) => {
-  const { data } = await axiosInstance.put(`/admin/users/${id}`, body);
+  const { put } = getFetchClient();
+
+  const { data } = await put(`/admin/users/${id}`, body);
 
   return data.data;
 };

package/admin/src/pages/SettingsPage/pages/Users/ListPage/ModalForm/index.js

@@ -15,12 +15,17 @@ import { Stack } from '@strapi/design-system/Stack';
 import { Typography } from '@strapi/design-system/Typography';
 
 import { Formik } from 'formik';
-import { Form, GenericInput, useNotification, useOverlayBlocker } from '@strapi/helper-plugin';
+import {
+  Form,
+  GenericInput,
+  useNotification,
+  useOverlayBlocker,
+  useFetchClient,
+} from '@strapi/helper-plugin';
 import { useQueryClient, useMutation } from 'react-query';
 import formDataModel from 'ee_else_ce/pages/SettingsPage/pages/Users/ListPage/ModalForm/utils/formDataModel';
 import roleSettingsForm from 'ee_else_ce/pages/SettingsPage/pages/Users/ListPage/ModalForm/utils/roleSettingsForm';
 import MagicLink from 'ee_else_ce/pages/SettingsPage/pages/Users/components/MagicLink';
-import { axiosInstance } from '../../../../../../core/utils';
 import SelectRoles from '../../components/SelectRoles';
 import layout from './utils/layout';
 import schema from './utils/schema';
@@ -34,9 +39,10 @@ const ModalForm = ({ queryName, onToggle }) => {
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
   const { lockApp, unlockApp } = useOverlayBlocker();
+  const { post } = useFetchClient();
   const postMutation = useMutation(
     (body) => {
-      return axiosInstance.post('/admin/users', body);
+      return post('/admin/users', body);
     },
     {
       async onSuccess({ data }) {

package/admin/src/pages/SettingsPage/pages/Users/ListPage/index.js

@@ -18,7 +18,7 @@ import { useIntl } from 'react-intl';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import adminPermissions from '../../../../../permissions';
 import TableRows from './DynamicTable/TableRows';
-import Filters from './Filters';
+import Filters from '../../../components/Filters';
 import ModalForm from './ModalForm';
 import PaginationFooter from './PaginationFooter';
 import { deleteData, fetchData } from './utils/api';

package/admin/src/pages/SettingsPage/pages/Users/ListPage/utils/api.js

@@ -1,9 +1,10 @@
-import { axiosInstance } from '../../../../../../core/utils';
+import { getFetchClient } from '@strapi/helper-plugin';
 
 const fetchData = async (search, notify) => {
+  const { get } = getFetchClient();
   const {
     data: { data },
-  } = await axiosInstance.get(`/admin/users${search}`);
+  } = await get(`/admin/users${search}`);
 
   notify();
 
@@ -11,7 +12,9 @@ const fetchData = async (search, notify) => {
 };
 
 const deleteData = async (ids) => {
-  await axiosInstance.post('/admin/users/batch-delete', { ids });
+  const { post } = getFetchClient();
+
+  await post('/admin/users/batch-delete', { ids });
 };
 
 export { deleteData, fetchData };

package/admin/src/pages/SettingsPage/pages/Users/components/SelectRoles/index.js

@@ -5,7 +5,7 @@ import { Select, Option } from '@strapi/design-system/Select';
 import { useQuery } from 'react-query';
 import styled, { keyframes } from 'styled-components';
 import LoadingIcon from '@strapi/icons/Loader';
-import { axiosInstance } from '../../../../../../core/utils';
+import { getFetchClient } from '@strapi/helper-plugin';
 
 const rotation = keyframes`
   from {
@@ -27,7 +27,8 @@ const Loader = () => (
 );
 
 const fetchData = async () => {
-  const { data } = await axiosInstance.get('/admin/roles');
+  const { get } = getFetchClient();
+  const { data } = await get('/admin/roles');
 
   return data.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/pages/SettingsPage/pages/Webhooks/EditView/index.js

@@ -11,12 +11,12 @@ import {
   to,
   useNotification,
   useOverlayBlocker,
+  useFetchClient,
 } from '@strapi/helper-plugin';
 import { Main } from '@strapi/design-system/Main';
 import { useMutation, useQuery, useQueryClient } from 'react-query';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 import { useModels } from '../../../../../hooks';
-import { axiosInstance } from '../../../../../core/utils';
 import WebhookForm from './components/WebhookForm';
 import cleanData from './utils/formatData';
 
@@ -30,6 +30,7 @@ const EditView = () => {
   const toggleNotification = useNotification();
   const queryClient = useQueryClient();
   const { isLoading: isLoadingForModels, collectionTypes } = useModels();
+  const { post } = useFetchClient();
 
   const isCreating = id === 'create';
 
@@ -64,7 +65,7 @@ const EditView = () => {
     data: triggerResponse,
     isIdle: isTriggerIdle,
     mutate,
-  } = useMutation(() => axiosInstance.post(`/admin/webhooks/${id}/trigger`));
+  } = useMutation(() => post(`/admin/webhooks/${id}/trigger`));
 
   const triggerWebhook = () =>
     mutate(null, {

package/admin/src/pages/SettingsPage/utils/defaultRoutes.js

@@ -57,17 +57,6 @@ const defaultRoutes = [
     to: '/settings/users/:id',
     exact: true,
   },
-  {
-    async Component() {
-      const component = await import(
-        /* webpackChunkName: "admin-audit-logs" */ '../pages/AuditLogs/ProtectedListPage'
-      );
-
-      return component;
-    },
-    to: '/settings/audit-logs',
-    exact: true,
-  },
   {
     async Component() {
       const component = await import(

package/admin/src/permissions/defaultPermissions.js

@@ -87,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 }],
+    },
   },
 };