@strapi/admin 4.1.7 → 4.1.10-beta.0

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/FromUrlForm.js

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Box } from '@strapi/design-system/Box';
+import { Button } from '@strapi/design-system/Button';
+import { TextInput } from '@strapi/design-system/TextInput';
+import { ModalFooter } from '@strapi/design-system/ModalLayout';
+import urlToFile from '../../utils/urlToFile';
+import { parseFileMetadatas } from '../../utils/parseFileMetadatas';
+import { SIZE, DIMENSION } from '../../utils/constants';
+
+const FromUrlForm = ({ goTo, next, onClose, setLocalImage }) => {
+  const { formatMessage } = useIntl();
+  const [logoUrl, setLogoUrl] = useState('');
+  const [error, setError] = useState(null);
+
+  const handleChange = e => {
+    setLogoUrl(e.target.value);
+  };
+
+  const handleSubmit = async e => {
+    e.preventDefault();
+    try {
+      const file = await urlToFile(logoUrl);
+      const asset = await parseFileMetadatas(file);
+
+      setLocalImage(asset);
+      goTo(next);
+    } catch (err) {
+      if (err.displayMessage) {
+        setError(formatMessage(err.displayMessage, { size: SIZE, dimension: DIMENSION }));
+      } else {
+        throw err;
+      }
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit}>
+      <Box paddingLeft={8} paddingRight={8} paddingTop={6} paddingBottom={6}>
+        <TextInput
+          label={formatMessage({
+            id: 'Settings.application.customization.modal.upload.from-url.input-label',
+            defaultMessage: 'URL',
+          })}
+          error={error}
+          onChange={handleChange}
+          value={logoUrl}
+          name="logo-url"
+        />
+      </Box>
+      <ModalFooter
+        startActions={
+          <Button onClick={onClose} variant="tertiary">
+            {formatMessage({ id: 'app.components.Button.cancel', defaultMessage: 'Cancel' })}
+          </Button>
+        }
+        endActions={
+          <Button type="submit">
+            {formatMessage({
+              id: 'Settings.application.customization.modal.upload.next',
+              defaultMessage: 'Next',
+            })}
+          </Button>
+        }
+      />
+    </form>
+  );
+};
+
+FromUrlForm.defaultProps = {
+  next: null,
+};
+
+FromUrlForm.propTypes = {
+  goTo: PropTypes.func.isRequired,
+  next: PropTypes.string,
+  onClose: PropTypes.func.isRequired,
+  setLocalImage: PropTypes.func.isRequired,
+};
+
+export default FromUrlForm;

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/ImageCardAsset.js

@@ -0,0 +1,51 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import {
+  Card,
+  CardAsset,
+  CardBadge,
+  CardBody,
+  CardContent,
+  CardHeader,
+  CardTitle,
+  CardSubtitle,
+} from '@strapi/design-system/Card';
+
+const ImageCardAsset = ({ asset }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardAsset size="S" src={asset.url} />
+      </CardHeader>
+      <CardBody>
+        <CardContent>
+          <CardTitle>{asset.name}</CardTitle>
+          <CardSubtitle>
+            {`${asset.ext.toUpperCase()} - ${asset.width}✕${asset.height}`}
+          </CardSubtitle>
+        </CardContent>
+        <CardBadge>
+          {formatMessage({
+            id: 'Settings.application.customization.modal.pending.card-badge',
+            defaultMessage: 'image',
+          })}
+        </CardBadge>
+      </CardBody>
+    </Card>
+  );
+};
+
+ImageCardAsset.propTypes = {
+  asset: PropTypes.shape({
+    name: PropTypes.string,
+    url: PropTypes.string,
+    width: PropTypes.number,
+    height: PropTypes.number,
+    ext: PropTypes.string,
+  }).isRequired,
+};
+
+export default ImageCardAsset;

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/PendingLogoDialog.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { pxToRem } from '@strapi/helper-plugin';
+import { Box } from '@strapi/design-system/Box';
+import { Flex } from '@strapi/design-system/Flex';
+import { Button } from '@strapi/design-system/Button';
+import { ModalFooter } from '@strapi/design-system/ModalLayout';
+import { Typography } from '@strapi/design-system/Typography';
+import ImageCardAsset from './ImageCardAsset';
+
+const PendingLogoDialog = ({ onClose, asset, prev, next, goTo, setLocalImage, onChangeLogo }) => {
+  const { formatMessage } = useIntl();
+
+  const handleGoBack = () => {
+    setLocalImage(undefined);
+    goTo(prev);
+  };
+
+  const handleUpload = () => {
+    onChangeLogo(asset);
+    goTo(next);
+  };
+
+  return (
+    <>
+      <Box paddingLeft={8} paddingRight={8} paddingTop={6} paddingBottom={6}>
+        <Flex justifyContent="space-between" paddingBottom={6}>
+          <Flex direction="column" alignItems="flex-start">
+            <Typography variant="pi" fontWeight="bold">
+              {formatMessage({
+                id: 'Settings.application.customization.modal.pending.title',
+                defaultMessage: 'Logo ready to upload',
+              })}
+            </Typography>
+            <Typography variant="pi" textColor="neutral500">
+              {formatMessage({
+                id: 'Settings.application.customization.modal.pending.subtitle',
+                defaultMessage: 'Manage the chosen logo before uploading it',
+              })}
+            </Typography>
+          </Flex>
+          <Button onClick={handleGoBack} variant="secondary">
+            {formatMessage({
+              id: 'Settings.application.customization.modal.pending.choose-another',
+              defaultMessage: 'Choose another logo',
+            })}
+          </Button>
+        </Flex>
+        <Box maxWidth={pxToRem(180)}>
+          <ImageCardAsset asset={asset} />
+        </Box>
+      </Box>
+      <ModalFooter
+        startActions={
+          <Button onClick={onClose} variant="tertiary">
+            {formatMessage({
+              id: 'Settings.application.customization.modal.cancel',
+              defaultMessage: 'Cancel',
+            })}
+          </Button>
+        }
+        endActions={
+          <Button onClick={handleUpload}>
+            {formatMessage({
+              id: 'Settings.application.customization.modal.pending.upload',
+              defaultMessage: 'Upload logo',
+            })}
+          </Button>
+        }
+      />
+    </>
+  );
+};
+
+PendingLogoDialog.defaultProps = {
+  next: null,
+  prev: null,
+};
+
+PendingLogoDialog.propTypes = {
+  goTo: PropTypes.func.isRequired,
+  asset: PropTypes.shape({
+    name: PropTypes.string,
+    url: PropTypes.string,
+    width: PropTypes.number,
+    height: PropTypes.number,
+    ext: PropTypes.string,
+  }).isRequired,
+  next: PropTypes.string,
+  onClose: PropTypes.func.isRequired,
+  onChangeLogo: PropTypes.func.isRequired,
+  prev: PropTypes.string,
+  setLocalImage: PropTypes.func.isRequired,
+};
+
+export default PendingLogoDialog;

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

@@ -0,0 +1,85 @@
+import React, { useReducer } from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { ModalLayout, ModalHeader } from '@strapi/design-system/ModalLayout';
+import { Typography } from '@strapi/design-system/Typography';
+import reducer, { initialState } from './reducer';
+
+const LogoModalStepper = ({
+  onChangeLogo,
+  customLogo,
+  goTo,
+  Component,
+  modalTitle,
+  next,
+  prev,
+  currentStep,
+}) => {
+  const [{ localImage }, dispatch] = useReducer(reducer, initialState);
+  const { formatMessage } = useIntl();
+
+  const setLocalImage = asset => {
+    dispatch({
+      type: 'SET_LOCAL_IMAGE',
+      value: asset,
+    });
+  };
+
+  const handleCloseModal = () => {
+    goTo(null);
+  };
+
+  if (!currentStep) {
+    return null;
+  }
+
+  return (
+    <ModalLayout labelledBy="modal" onClose={handleCloseModal}>
+      <ModalHeader>
+        <Typography fontWeight="bold" as="h2" id="modal">
+          {formatMessage(modalTitle)}
+        </Typography>
+      </ModalHeader>
+      <Component
+        setLocalImage={setLocalImage}
+        goTo={goTo}
+        next={next}
+        prev={prev}
+        onClose={handleCloseModal}
+        asset={localImage || customLogo}
+        onChangeLogo={onChangeLogo}
+      />
+    </ModalLayout>
+  );
+};
+
+LogoModalStepper.defaultProps = {
+  Component: undefined,
+  currentStep: undefined,
+  customLogo: undefined,
+  modalTitle: undefined,
+  next: null,
+  prev: null,
+};
+
+LogoModalStepper.propTypes = {
+  Component: PropTypes.elementType,
+  currentStep: PropTypes.string,
+  customLogo: PropTypes.shape({
+    name: PropTypes.string,
+    url: PropTypes.string,
+    width: PropTypes.number,
+    height: PropTypes.number,
+    ext: PropTypes.string,
+  }),
+  goTo: PropTypes.func.isRequired,
+  modalTitle: PropTypes.shape({
+    id: PropTypes.string,
+    defaultMessage: PropTypes.string,
+  }),
+  next: PropTypes.string,
+  onChangeLogo: PropTypes.func.isRequired,
+  prev: PropTypes.string,
+};
+
+export default LogoModalStepper;

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoModalStepper/reducer.js

@@ -0,0 +1,28 @@
+/* eslint-disable consistent-return */
+/*
+ *
+ * LogoModalStepper reducer
+ *
+ */
+
+import produce from 'immer';
+
+const initialState = {
+  localImage: undefined,
+};
+
+const reducer = (state = initialState, action) =>
+  produce(state, draftState => {
+    switch (action.type) {
+      case 'SET_LOCAL_IMAGE': {
+        draftState.localImage = action.value;
+        break;
+      }
+      default: {
+        return draftState;
+      }
+    }
+  });
+
+export default reducer;
+export { initialState };

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;