@strapi/admin 4.1.9 → 4.1.10-beta.0

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

@@ -1,26 +1,76 @@
-import React from 'react';
+import React, { useRef } from 'react';
+import { useQuery, useMutation, useQueryClient } from 'react-query';
 import { useIntl } from 'react-intl';
-import { useAppInfos, SettingsPageTitle, useFocusWhenNavigate } from '@strapi/helper-plugin';
+import {
+  useAppInfos,
+  SettingsPageTitle,
+  useFocusWhenNavigate,
+  CheckPermissions,
+  useNotification,
+  useTracking,
+} from '@strapi/helper-plugin';
 import { HeaderLayout, Layout, ContentLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
 import { Box } from '@strapi/design-system/Box';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Typography } from '@strapi/design-system/Typography';
-
 import { Stack } from '@strapi/design-system/Stack';
 import { Link } from '@strapi/design-system/Link';
+import { Button } from '@strapi/design-system/Button';
 import ExternalLink from '@strapi/icons/ExternalLink';
+import Check from '@strapi/icons/Check';
+import { useConfigurations } from '../../../../hooks';
+import Form from './components/Form';
+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();
+  const { trackUsage } = useTracking();
   const { formatMessage } = useIntl();
+  const queryClient = useQueryClient();
   useFocusWhenNavigate();
   const appInfos = useAppInfos();
   const { shouldUpdateStrapi, latestStrapiReleaseTag, strapiVersion } = appInfos;
+  const { updateProjectSettings } = useConfigurations();
+
+  const { data } = useQuery('project-settings', fetchProjectSettings);
 
   const currentPlan = appInfos.communityEdition
     ? 'app.components.UpgradePlanModal.text-ce'
     : 'app.components.UpgradePlanModal.text-ee';
 
+  const submitMutation = useMutation(body => postProjectSettings(body), {
+    onSuccess: async ({ menuLogo }) => {
+      await queryClient.invalidateQueries('project-settings', { refetchActive: true });
+      updateProjectSettings({ menuLogo: menuLogo?.url });
+    },
+  });
+
+  const handleSubmit = () => {
+    const inputValues = inputsRef.current.getValues();
+    const formData = getFormData(inputValues);
+
+    submitMutation.mutate(formData, {
+      onSuccess: () => {
+        const { menuLogo } = inputValues;
+
+        if (menuLogo.rawFile) {
+          trackUsage('didChangeLogo');
+        }
+      },
+      onError: () => {
+        toggleNotification({
+          type: 'warning',
+          message: { id: 'notification.error', defaultMessage: 'An error occurred' },
+        });
+      },
+    });
+  };
+
   return (
     <Layout>
       <SettingsPageTitle name="Application" />
@@ -31,101 +81,113 @@ const ApplicationInfosPage = () => {
             id: 'Settings.application.description',
             defaultMessage: 'Administration panel’s global information',
           })}
+          primaryAction={
+            <Button onClick={handleSubmit} startIcon={<Check />}>
+              {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
+            </Button>
+          }
         />
         <ContentLayout>
-          <Box
-            hasRadius
-            background="neutral0"
-            shadow="tableShadow"
-            paddingTop={7}
-            paddingBottom={7}
-            paddingRight={6}
-            paddingLeft={6}
-          >
-            <Stack spacing={5}>
-              <Typography variant="delta" as="h3">
-                {formatMessage({
-                  id: 'global.details',
-                  defaultMessage: 'Details',
-                })}
-              </Typography>
-
-              <Grid paddingTop={1}>
-                <GridItem col={6} s={12}>
-                  <Typography variant="sigma" textColor="neutral600">
-                    {formatMessage({
-                      id: 'Settings.application.strapiVersion',
-                      defaultMessage: 'strapi version',
-                    })}
-                  </Typography>
-                  <Typography as="p">v{strapiVersion}</Typography>
-                  <Link
-                    href={
-                      appInfos.communityEdition
-                        ? 'https://discord.strapi.io'
-                        : 'https://support.strapi.io/support/home'
-                    }
-                    endIcon={<ExternalLink />}
-                  >
-                    {formatMessage({
-                      id: 'Settings.application.get-help',
-                      defaultMessage: 'Get help',
-                    })}
-                  </Link>
-                </GridItem>
-                <GridItem col={6} s={12}>
-                  <Typography variant="sigma" textColor="neutral600">
-                    {formatMessage({
-                      id: 'Settings.application.edition-title',
-                      defaultMessage: 'current plan',
-                    })}
-                  </Typography>
-                  <Typography as="p">
-                    {formatMessage({
-                      id: currentPlan,
-                      defaultMessage: `${
-                        appInfos.communityEdition ? 'Community Edition' : 'Enterprise Edition'
-                      }`,
-                    })}
-                  </Typography>
-                </GridItem>
-              </Grid>
+          <Stack spacing={6}>
+            <Box
+              hasRadius
+              background="neutral0"
+              shadow="tableShadow"
+              paddingTop={6}
+              paddingBottom={6}
+              paddingRight={7}
+              paddingLeft={7}
+            >
+              <Stack spacing={5}>
+                <Typography variant="delta" as="h3">
+                  {formatMessage({
+                    id: 'global.details',
+                    defaultMessage: 'Details',
+                  })}
+                </Typography>
 
-              <Grid paddingTop={1}>
-                <GridItem col={6} s={12}>
-                  {shouldUpdateStrapi && (
+                <Grid paddingTop={1}>
+                  <GridItem col={6} s={12}>
+                    <Typography variant="sigma" textColor="neutral600">
+                      {formatMessage({
+                        id: 'Settings.application.strapiVersion',
+                        defaultMessage: 'strapi version',
+                      })}
+                    </Typography>
+                    <Typography as="p">v{strapiVersion}</Typography>
                     <Link
-                      href={`https://github.com/strapi/strapi/releases/tag/${latestStrapiReleaseTag}`}
+                      href={
+                        appInfos.communityEdition
+                          ? 'https://discord.strapi.io'
+                          : 'https://support.strapi.io/support/home'
+                      }
                       endIcon={<ExternalLink />}
                     >
                       {formatMessage({
-                        id: 'Settings.application.link-upgrade',
-                        defaultMessage: 'Upgrade your admin panel',
+                        id: 'Settings.application.get-help',
+                        defaultMessage: 'Get help',
+                      })}
+                    </Link>
+                  </GridItem>
+                  <GridItem col={6} s={12}>
+                    <Typography variant="sigma" textColor="neutral600">
+                      {formatMessage({
+                        id: 'Settings.application.edition-title',
+                        defaultMessage: 'current plan',
+                      })}
+                    </Typography>
+                    <Typography as="p">
+                      {formatMessage({
+                        id: currentPlan,
+                        defaultMessage: `${
+                          appInfos.communityEdition ? 'Community Edition' : 'Enterprise Edition'
+                        }`,
+                      })}
+                    </Typography>
+                  </GridItem>
+                </Grid>
+
+                <Grid paddingTop={1}>
+                  <GridItem col={6} s={12}>
+                    {shouldUpdateStrapi && (
+                      <Link
+                        href={`https://github.com/strapi/strapi/releases/tag/${latestStrapiReleaseTag}`}
+                        endIcon={<ExternalLink />}
+                      >
+                        {formatMessage({
+                          id: 'Settings.application.link-upgrade',
+                          defaultMessage: 'Upgrade your admin panel',
+                        })}
+                      </Link>
+                    )}
+                  </GridItem>
+                  <GridItem col={6} s={12}>
+                    <Link href="https://strapi.io/pricing-self-hosted" endIcon={<ExternalLink />}>
+                      {formatMessage({
+                        id: 'Settings.application.link-pricing',
+                        defaultMessage: 'See all pricing plans',
                       })}
                     </Link>
-                  )}
-                </GridItem>
-                <GridItem col={6} s={12}>
-                  <Link href="https://strapi.io/pricing-self-hosted" endIcon={<ExternalLink />}>
+                  </GridItem>
+                </Grid>
+
+                <Box paddingTop={1}>
+                  <Typography variant="sigma" textColor="neutral600">
                     {formatMessage({
-                      id: 'Settings.application.link-pricing',
-                      defaultMessage: 'See all pricing plans',
+                      id: 'Settings.application.node-version',
+                      defaultMessage: 'node version',
                     })}
-                  </Link>
-                </GridItem>
-              </Grid>
-
-              <Box paddingTop={1}>
-                <Typography variant="sigma" textColor="neutral600">
-                  {formatMessage({
-                    id: 'Settings.application.node-version',
-                    defaultMessage: 'node version',
-                  })}
-                </Typography>
-                <Typography as="p">{appInfos.nodeVersion}</Typography>
-              </Box>
-            </Stack>
-          </Box>
+                  </Typography>
+                  <Typography as="p">{appInfos.nodeVersion}</Typography>
+                </Box>
+              </Stack>
+            </Box>
+            {data && (
+              <CheckPermissions permissions={permissions}>
+                <Form ref={inputsRef} projectSettingsStored={data} />
+              </CheckPermissions>
+            )}
+          </Stack>
         </ContentLayout>
       </Main>
     </Layout>

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

@@ -0,0 +1,16 @@
+import { axiosInstance } from '../../../../../core/utils';
+import prefixAllUrls from './prefixAllUrls';
+
+const fetchProjectSettings = async () => {
+  const { data } = await axiosInstance.get('/admin/project-settings');
+
+  return prefixAllUrls(data);
+};
+
+const postProjectSettings = async body => {
+  const { data } = await axiosInstance.post('/admin/project-settings', body);
+
+  return prefixAllUrls(data);
+};
+
+export { fetchProjectSettings, postProjectSettings };

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

@@ -0,0 +1,3 @@
+export const DIMENSION = 750;
+export const SIZE = 100;
+export const ACCEPTED_FORMAT = ['image/jpeg', 'image/png', 'image/svg+xml'];

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

@@ -0,0 +1,17 @@
+const getFormData = data => {
+  const formData = new FormData();
+
+  Object.entries(data).forEach(([key, value]) => {
+    if (value && value.rawFile instanceof File) {
+      formData.append(key, value.rawFile);
+    }
+
+    if (value && value.isReset) {
+      formData.append(key, null);
+    }
+  });
+
+  return formData;
+};
+
+export default getFormData;

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

@@ -0,0 +1,76 @@
+import { DIMENSION, SIZE, ACCEPTED_FORMAT } from './constants';
+
+const FILE_FORMAT_ERROR_MESSAGE = {
+  id: 'Settings.application.customization.modal.upload.error-format',
+  defaultMessage: 'Wrong format uploaded (accepted formats only: jpeg, jpg, png, svg).',
+};
+
+const FILE_SIZING_ERROR_MESSAGE = {
+  id: 'Settings.application.customization.modal.upload.error-size',
+  defaultMessage:
+    'The file uploaded is too large (max dimension: {dimension}x{dimension}, max file size: {size}KB)',
+};
+
+const getFileDimensions = file => {
+  return new Promise(resolve => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      const img = new Image();
+      img.onload = function() {
+        resolve({ width: img.width, height: img.height });
+      };
+      img.src = reader.result;
+    };
+    reader.readAsDataURL(file);
+  });
+};
+
+const rawFileToAsset = (rawFile, fileDimensions) => {
+  return {
+    ext: rawFile.name.split('.').pop(),
+    size: rawFile.size / 1000,
+    name: rawFile.name,
+    url: URL.createObjectURL(rawFile),
+    rawFile,
+    width: fileDimensions.width,
+    height: fileDimensions.height,
+  };
+};
+
+export const parseFileMetadatas = async file => {
+  let error;
+
+  const isFormatAuthorized = ACCEPTED_FORMAT.includes(file.type);
+
+  if (!isFormatAuthorized) {
+    error = new Error('File format');
+    error.displayMessage = FILE_FORMAT_ERROR_MESSAGE;
+
+    throw error;
+  }
+
+  const fileDimensions = await getFileDimensions(file);
+
+  const areDimensionsAuthorized =
+    fileDimensions.width < DIMENSION && fileDimensions.height < DIMENSION;
+
+  if (!areDimensionsAuthorized) {
+    error = new Error('File sizing');
+    error.displayMessage = FILE_SIZING_ERROR_MESSAGE;
+
+    throw error;
+  }
+
+  const asset = rawFileToAsset(file, fileDimensions);
+
+  const isSizeAuthorized = asset.size < SIZE;
+
+  if (!isSizeAuthorized) {
+    error = new Error('File sizing');
+    error.displayMessage = FILE_SIZING_ERROR_MESSAGE;
+
+    throw error;
+  }
+
+  return asset;
+};

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

@@ -0,0 +1,17 @@
+import transform from 'lodash/transform';
+import { prefixFileUrlWithBackendUrl } from '@strapi/helper-plugin';
+
+const prefixAllUrls = data =>
+  transform(
+    data,
+    (result, value, key) => {
+      if (value && value.url) {
+        result[key] = { ...value, url: prefixFileUrlWithBackendUrl(value.url) };
+      } else {
+        result[key] = value;
+      }
+    },
+    {}
+  );
+
+export default prefixAllUrls;

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

@@ -0,0 +1,21 @@
+import axios from 'axios';
+
+const urlToFile = async url => {
+  try {
+    const res = await axios.get(url, { responseType: 'blob', timeout: 8000 });
+    const loadedFile = new File([res.data], res.config.url, {
+      type: res.headers['content-type'],
+    });
+
+    return loadedFile;
+  } catch (err) {
+    err.displayMessage = {
+      id: 'Settings.application.customization.modal.upload.error-network',
+      defaultMessage: 'Network error',
+    };
+
+    throw err;
+  }
+};
+
+export default urlToFile;

package/admin/src/translations/en.json

@@ -99,6 +99,31 @@
   "Settings.application.strapi-version": "strapi version",
   "Settings.application.strapiVersion": "strapi version",
   "Settings.application.title": "Overview",
+  "Settings.application.customization": "Customization",
+  "Settings.application.customization.carousel.title": "Logo",
+  "Settings.application.customization.carousel.change-action": "Change logo",
+  "Settings.application.customization.carousel.reset-action": "Reset logo",
+  "Settings.application.customization.carousel-slide.label": "Logo slide",
+  "Settings.application.customization.carousel-hint": "Change the admin panel logo (Max dimension: {dimension}x{dimension}, Max file size: {size}KB)",
+  "Settings.application.customization.modal.cancel": "Cancel",
+  "Settings.application.customization.modal.upload": "Upload logo",
+  "Settings.application.customization.modal.tab.label": "How do you want to upload your assets?",
+  "Settings.application.customization.modal.upload.from-computer": "From computer",
+  "Settings.application.customization.modal.upload.file-validation": "Max dimension: {dimension}x{dimension}, Max size: {size}KB",
+  "Settings.application.customization.modal.upload.error-format": "Wrong format uploaded (accepted formats only: jpeg, jpg, png, svg).",
+  "Settings.application.customization.modal.upload.error-size": "The file uploaded is too large (max dimension: {dimension}x{dimension}, max file size: {size}KB)",
+  "Settings.application.customization.modal.upload.error-network": "Network error",
+  "Settings.application.customization.modal.upload.cta.browse": "Browse files",
+  "Settings.application.customization.modal.upload.drag-drop": "Drag and Drop here or",
+  "Settings.application.customization.modal.upload.from-url": "From url",
+  "Settings.application.customization.modal.upload.from-url.input-label": "URL",
+  "Settings.application.customization.modal.upload.next": "Next",
+  "Settings.application.customization.modal.pending": "Pending logo",
+  "Settings.application.customization.modal.pending.choose-another": "Choose another logo",
+  "Settings.application.customization.modal.pending.title": "Logo ready to upload",
+  "Settings.application.customization.modal.pending.subtitle": "Manage the chosen logo before uploading it",
+  "Settings.application.customization.modal.pending.upload": "Upload logo",
+  "Settings.application.customization.modal.pending.card-badge": "image",
   "Settings.error": "Error",
   "Settings.global": "Global Settings",
   "Settings.permissions": "Administration panel",