@strapi/admin 4.1.10-beta.0 → 4.1.12

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

@@ -1,67 +0,0 @@
-import React from 'react';
-import { useIntl } from 'react-intl';
-import PropTypes from 'prop-types';
-import { Tabs, Tab, TabGroup, TabPanels, TabPanel } from '@strapi/design-system/Tabs';
-import { Box } from '@strapi/design-system/Box';
-import { Divider } from '@strapi/design-system/Divider';
-import FromComputerForm from './FromComputerForm';
-import FromUrlForm from './FromUrlForm';
-
-const AddLogoDialog = ({ setLocalImage, goTo, next, onClose }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <TabGroup
-      label={formatMessage({
-        id: 'Settings.application.customization.modal.tab.label',
-        defaultMessage: 'How do you want to upload your assets?',
-      })}
-      variant="simple"
-    >
-      <Box paddingLeft={8} paddingRight={8}>
-        <Tabs>
-          <Tab>
-            {formatMessage({
-              id: 'Settings.application.customization.modal.upload.from-computer',
-              defaultMessage: 'From computer',
-            })}
-          </Tab>
-          <Tab>
-            {formatMessage({
-              id: 'Settings.application.customization.modal.upload.from-url',
-              defaultMessage: 'From url',
-            })}
-          </Tab>
-        </Tabs>
-
-        <Divider />
-      </Box>
-      <TabPanels>
-        <TabPanel>
-          <FromComputerForm
-            onClose={onClose}
-            setLocalImage={setLocalImage}
-            goTo={goTo}
-            next={next}
-          />
-        </TabPanel>
-        <TabPanel>
-          <FromUrlForm onClose={onClose} setLocalImage={setLocalImage} goTo={goTo} next={next} />
-        </TabPanel>
-      </TabPanels>
-    </TabGroup>
-  );
-};
-
-AddLogoDialog.defaultProps = {
-  next: null,
-};
-
-AddLogoDialog.propTypes = {
-  goTo: PropTypes.func.isRequired,
-  next: PropTypes.string,
-  onClose: PropTypes.func.isRequired,
-  setLocalImage: PropTypes.func.isRequired,
-};
-
-export default AddLogoDialog;

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

@@ -1,176 +0,0 @@
-import React, { useState, useRef } from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import styled from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
-import { Stack } from '@strapi/design-system/Stack';
-import { Flex } from '@strapi/design-system/Flex';
-import { Icon } from '@strapi/design-system/Icon';
-import { Typography } from '@strapi/design-system/Typography';
-import { ModalFooter } from '@strapi/design-system/ModalLayout';
-import { Button } from '@strapi/design-system/Button';
-import { Field, FieldError, FieldInput } from '@strapi/design-system/Field';
-import PicturePlus from '@strapi/icons/PicturePlus';
-import { parseFileMetadatas } from '../../utils/parseFileMetadatas';
-import { ACCEPTED_FORMAT, SIZE, DIMENSION } from '../../utils/constants';
-
-const FileInput = styled(FieldInput)`
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  z-index: 1;
-`;
-
-const FromComputerForm = ({ setLocalImage, goTo, next, onClose }) => {
-  const { formatMessage } = useIntl();
-  const [dragOver, setDragOver] = useState(false);
-  const [fileError, setFileError] = useState(undefined);
-  const inputRef = useRef(null);
-
-  const handleDragEnter = () => setDragOver(true);
-  const handleDragLeave = () => setDragOver(false);
-
-  const handleClick = e => {
-    e.preventDefault();
-    inputRef.current.click();
-  };
-
-  const handleChange = async () => {
-    handleDragLeave();
-    const file = inputRef.current.files[0];
-
-    if (!file) {
-      return;
-    }
-
-    try {
-      const asset = await parseFileMetadatas(file);
-      setLocalImage(asset);
-      goTo(next);
-    } catch (err) {
-      if (err.displayMessage) {
-        setFileError(formatMessage(err.displayMessage, { size: SIZE, dimension: DIMENSION }));
-        inputRef.current.focus();
-      } else {
-        throw err;
-      }
-    }
-  };
-
-  const getBorderColor = () => {
-    if (dragOver) {
-      return 'primary500';
-    }
-    if (fileError) {
-      return 'danger600';
-    }
-
-    return 'neutral300';
-  };
-
-  return (
-    <>
-      <form>
-        <Box paddingLeft={8} paddingRight={8} paddingTop={6} paddingBottom={6}>
-          <Field name="logo-upload" error={fileError}>
-            <label htmlFor="logo-upload">
-              <Stack spacing={2}>
-                <Flex
-                  paddingTop={9}
-                  paddingBottom={7}
-                  hasRadius
-                  justifyContent="center"
-                  direction="column"
-                  background={dragOver ? 'primary100' : 'neutral100'}
-                  borderColor={getBorderColor()}
-                  borderStyle="dashed"
-                  borderWidth="1px"
-                  position="relative"
-                  onDragEnter={handleDragEnter}
-                  onDragLeave={handleDragLeave}
-                >
-                  <Icon
-                    color="primary600"
-                    width={`${60 / 16}rem`}
-                    height={`${60 / 16}rem`}
-                    as={PicturePlus}
-                    aria-hidden
-                  />
-
-                  <Box paddingTop={3} paddingBottom={5}>
-                    <Typography variant="delta" as="span">
-                      {formatMessage({
-                        id: 'Settings.application.customization.modal.upload.drag-drop',
-                        defaultMessage: 'Drag and Drop here or',
-                      })}
-                    </Typography>
-                  </Box>
-
-                  <FileInput
-                    accept={ACCEPTED_FORMAT}
-                    cursor="pointer"
-                    as="input"
-                    type="file"
-                    name="files"
-                    tabIndex={-1}
-                    zIndex={1}
-                    onChange={handleChange}
-                    ref={inputRef}
-                    id="logo-upload"
-                  />
-
-                  <Button type="button" onClick={handleClick}>
-                    {formatMessage({
-                      id: 'Settings.application.customization.modal.upload.cta.browse',
-                      defaultMessage: 'Browse files',
-                    })}
-                  </Button>
-
-                  <Box paddingTop={6}>
-                    <Typography variant="pi" textColor="neutral600">
-                      {formatMessage(
-                        {
-                          id: 'Settings.application.customization.modal.upload.file-validation',
-                          defaultMessage:
-                            'Max dimension: {dimension}x{dimension}, Max size: {size}KB',
-                        },
-                        { size: SIZE, dimension: DIMENSION }
-                      )}
-                    </Typography>
-                  </Box>
-                </Flex>
-                <FieldError />
-              </Stack>
-            </label>
-          </Field>
-        </Box>
-      </form>
-      <ModalFooter
-        startActions={
-          <Button onClick={onClose} variant="tertiary">
-            {formatMessage({
-              id: 'Settings.application.customization.modal.cancel',
-              defaultMessage: 'Cancel',
-            })}
-          </Button>
-        }
-      />
-    </>
-  );
-};
-
-FromComputerForm.defaultProps = {
-  next: null,
-};
-
-FromComputerForm.propTypes = {
-  goTo: PropTypes.func.isRequired,
-  next: PropTypes.string,
-  onClose: PropTypes.func.isRequired,
-  setLocalImage: PropTypes.func.isRequired,
-};
-
-export default FromComputerForm;

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

@@ -1,82 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,97 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,28 +0,0 @@
-/* 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/utils/api.js

@@ -1,16 +0,0 @@
-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

@@ -1,3 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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;