@strapi/admin 4.1.7 → 4.1.10-beta.0

package/admin/src/pages/MarketplacePage/index.js

@@ -13,20 +13,24 @@ import {
   useAppInfos,
 } from '@strapi/helper-plugin';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Layout, HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
+import { Layout, ContentLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
 import { Searchbar } from '@strapi/design-system/Searchbar';
 import { Box } from '@strapi/design-system/Box';
-import { LinkButton } from '@strapi/design-system/LinkButton';
 import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import Upload from '@strapi/icons/Upload';
+import { Typography } from '@strapi/design-system/Typography';
+import { Flex } from '@strapi/design-system/Flex';
 
 import PluginCard from './components/PluginCard';
 import { EmptyPluginSearch } from './components/EmptyPluginSearch';
+import PageHeader from './components/PageHeader';
 import { fetchAppInformation } from './utils/api';
 import useFetchInstalledPlugins from '../../hooks/useFetchInstalledPlugins';
 import useFetchMarketplacePlugins from '../../hooks/useFetchMarketplacePlugins';
 import adminPermissions from '../../permissions';
+import offlineCloud from '../../assets/images/icon_offline-cloud.svg';
+import useNavigatorOnLine from '../../hooks/useNavigatorOnLine';
+import MissingPluginBanner from './components/MissingPluginBanner';
 
 const matchSearch = (plugins, search) => {
   return matchSorter(plugins, search, {
@@ -48,6 +52,7 @@ const MarketPlacePage = () => {
   const toggleNotification = useNotification();
   const [searchQuery, setSearchQuery] = useState('');
   const { autoReload: isInDevelopmentMode } = useAppInfos();
+  const isOnline = useNavigatorOnLine();
 
   useFocusWhenNavigate();
 
@@ -116,6 +121,42 @@ const MarketPlacePage = () => {
     }
   }, [toggleNotification, isInDevelopmentMode]);
 
+  if (!isOnline) {
+    return (
+      <Layout>
+        <Main>
+          <PageHeader isOnline={isOnline} />
+          <Flex
+            width="100%"
+            direction="column"
+            alignItems="center"
+            justifyContent="center"
+            style={{ paddingTop: '120px' }}
+          >
+            <Box paddingBottom={2}>
+              <Typography textColor="neutral700" variant="alpha">
+                {formatMessage({
+                  id: 'admin.pages.MarketPlacePage.offline.title',
+                  defaultMessage: 'You are offline',
+                })}
+              </Typography>
+            </Box>
+            <Box paddingBottom={6}>
+              <Typography textColor="neutral700" variant="epsilon">
+                {formatMessage({
+                  id: 'admin.pages.MarketPlacePage.offline.subtitle',
+                  defaultMessage:
+                    'You need to be connected to the Internet to access Strapi Market.',
+                })}
+              </Typography>
+            </Box>
+            <img src={offlineCloud} alt="offline" style={{ width: '88px', height: '88px' }} />
+          </Flex>
+        </Main>
+      </Layout>
+    );
+  }
+
   if (hasFailed) {
     return (
       <Layout>
@@ -150,29 +191,7 @@ const MarketPlacePage = () => {
             defaultMessage: 'Marketplace - Plugins',
           })}
         />
-        <HeaderLayout
-          title={formatMessage({
-            id: 'global.marketplace',
-            defaultMessage: 'Marketplace',
-          })}
-          subtitle={formatMessage({
-            id: 'admin.pages.MarketPlacePage.subtitle',
-            defaultMessage: 'Get more out of Strapi',
-          })}
-          primaryAction={
-            <LinkButton
-              startIcon={<Upload />}
-              variant="tertiary"
-              href="https://market.strapi.io/submit-plugin"
-              onClick={() => trackUsage('didSubmitPlugin')}
-            >
-              {formatMessage({
-                id: 'admin.pages.MarketPlacePage.submit.plugin.link',
-                defaultMessage: 'Submit your plugin',
-              })}
-            </LinkButton>
-          }
-        />
+        <PageHeader isOnline={isOnline} />
         <ContentLayout>
           <Box width="25%" paddingBottom={4}>
             <Searchbar
@@ -219,6 +238,9 @@ const MarketPlacePage = () => {
               ))}
             </Grid>
           )}
+          <Box paddingTop={7}>
+            <MissingPluginBanner />
+          </Box>
         </ContentLayout>
       </Main>
     </Layout>

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

@@ -0,0 +1,85 @@
+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 LogoInput from '../LogoInput';
+import { useConfigurations } from '../../../../../../hooks';
+import reducer, { initialState } from './reducer';
+import init from './init';
+
+const Form = forwardRef(({ projectSettingsStored }, ref) => {
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+  const {
+    logos: { menu },
+  } = useConfigurations();
+  const [{ menuLogo }, dispatch] = useReducer(reducer, initialState, () =>
+    init(initialState, projectSettingsStored)
+  );
+
+  const handleChangeMenuLogo = asset => {
+    dispatch({
+      type: 'SET_CUSTOM_MENU_LOGO',
+      value: asset,
+    });
+  };
+
+  const handleResetMenuLogo = () => {
+    trackUsage('didClickResetLogo');
+
+    dispatch({
+      type: 'RESET_CUSTOM_MENU_LOGO',
+    });
+  };
+
+  useImperativeHandle(ref, () => ({
+    getValues: () => ({ menuLogo: menuLogo.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>
+      <Grid paddingTop={4}>
+        <GridItem col={6} s={12}>
+          <LogoInput
+            onChangeLogo={handleChangeMenuLogo}
+            customLogo={menuLogo.display}
+            defaultLogo={menu.default}
+            onResetMenuLogo={handleResetMenuLogo}
+          />
+        </GridItem>
+      </Grid>
+    </Box>
+  );
+});
+
+Form.defaultProps = {
+  projectSettingsStored: null,
+};
+
+Form.propTypes = {
+  projectSettingsStored: PropTypes.shape({
+    menuLogo: PropTypes.shape({
+      url: PropTypes.string,
+      name: PropTypes.string,
+    }),
+  }),
+};
+
+export default Form;

package/admin/src/pages/SettingsPage/pages/ApplicationInfosPage/components/Form/init.js

@@ -0,0 +1,13 @@
+import merge from 'lodash/merge';
+
+const init = (initialState, projectSettingsStored) => {
+  const copyInitialState = merge(initialState, {
+    menuLogo: {
+      display: projectSettingsStored.menuLogo,
+    },
+  });
+
+  return copyInitialState;
+};
+
+export default init;

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

@@ -0,0 +1,43 @@
+/* eslint-disable consistent-return */
+/*
+ *
+ * ApplicationInfosPage Form reducer
+ *
+ */
+
+import produce from 'immer';
+
+const initialState = {
+  menuLogo: {
+    display: null,
+    submit: {
+      rawFile: null,
+      isReset: false,
+    },
+  },
+};
+
+const reducer = (state = initialState, action) =>
+  produce(state, draftState => {
+    switch (action.type) {
+      case 'SET_CUSTOM_MENU_LOGO': {
+        draftState.menuLogo.display = action.value;
+        draftState.menuLogo.submit.rawFile = action.value.rawFile;
+        break;
+      }
+      case 'RESET_CUSTOM_MENU_LOGO': {
+        draftState.menuLogo.display = null;
+        draftState.menuLogo.submit = {
+          rawFile: null,
+          isReset: true,
+        };
+        break;
+      }
+      default: {
+        return draftState;
+      }
+    }
+  });
+
+export default reducer;
+export { initialState };

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

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

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

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

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

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