@strapi/admin 4.1.10-beta.0 → 4.1.10

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

@@ -1,116 +0,0 @@
-import React, { useReducer } from 'react';
-import { useIntl } from 'react-intl';
-import PropTypes from 'prop-types';
-import { CarouselInput, CarouselSlide, CarouselActions } from '@strapi/design-system/CarouselInput';
-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 stepper from './stepper';
-
-const LogoInput = ({ customLogo, defaultLogo, onChangeLogo, onResetMenuLogo }) => {
-  const [{ currentStep }, dispatch] = useReducer(reducer, initialState);
-  const { Component, next, prev, modalTitle } = stepper[currentStep] || {};
-  const { formatMessage } = useIntl();
-
-  const goTo = to => {
-    dispatch({
-      type: 'GO_TO',
-      to,
-    });
-  };
-
-  return (
-    <>
-      <CarouselInput
-        label={formatMessage({
-          id: 'Settings.application.customization.carousel.title',
-          defaultMessage: 'Logo',
-        })}
-        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 }
-        )}
-        previousLabel=""
-        nextLabel=""
-        onNext={() => {}}
-        onPrevious={() => {}}
-        secondaryLabel={customLogo?.name || 'logo.png'}
-        actions={
-          <CarouselActions>
-            <IconButton
-              onClick={() => goTo(customLogo ? 'pending' : 'upload')}
-              label={formatMessage({
-                id: 'Settings.application.customization.carousel.change-action',
-                defaultMessage: 'Change logo',
-              })}
-              icon={<Plus />}
-            />
-            {customLogo && (
-              <IconButton
-                onClick={onResetMenuLogo}
-                label={formatMessage({
-                  id: 'Settings.application.customization.carousel.reset-action',
-                  defaultMessage: 'Reset logo',
-                })}
-                icon={<Refresh />}
-              />
-            )}
-          </CarouselActions>
-        }
-      >
-        <CarouselSlide
-          label={formatMessage({
-            id: 'Settings.application.customization.carousel-slide.label',
-            defaultMessage: 'Logo slide',
-          })}
-        >
-          <Box
-            maxHeight="40%"
-            maxWidth="40%"
-            as="img"
-            src={customLogo?.url || defaultLogo}
-            alt={formatMessage({
-              id: 'Settings.application.customization.carousel.title',
-              defaultMessage: 'Logo',
-            })}
-          />
-        </CarouselSlide>
-      </CarouselInput>
-      <LogoModalStepper
-        Component={Component}
-        currentStep={currentStep}
-        onChangeLogo={onChangeLogo}
-        customLogo={customLogo}
-        goTo={goTo}
-        next={next}
-        prev={prev}
-        modalTitle={modalTitle}
-      />
-    </>
-  );
-};
-
-LogoInput.defaultProps = {
-  customLogo: null,
-};
-
-LogoInput.propTypes = {
-  customLogo: PropTypes.shape({
-    url: PropTypes.string,
-    name: PropTypes.string,
-  }),
-  defaultLogo: PropTypes.string.isRequired,
-  onChangeLogo: PropTypes.func.isRequired,
-  onResetMenuLogo: PropTypes.func.isRequired,
-};
-
-export default LogoInput;

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

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

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/LogoInput/stepper.js

@@ -1,25 +0,0 @@
-import AddLogoDialog from '../LogoModalStepper/AddLogoDialog';
-import PendingLogoDialog from '../LogoModalStepper/PendingLogoDialog';
-
-const stepper = {
-  upload: {
-    Component: AddLogoDialog,
-    modalTitle: {
-      id: 'Settings.application.customization.modal.upload',
-      defaultMessage: 'Upload logo',
-    },
-    next: 'pending',
-    prev: null,
-  },
-  pending: {
-    Component: PendingLogoDialog,
-    modalTitle: {
-      id: 'Settings.application.customization.modal.pending',
-      defaultMessage: 'Pending logo',
-    },
-    next: null,
-    prev: 'upload',
-  },
-};
-
-export default stepper;

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;