@strapi/admin 4.2.0-beta.1 → 4.2.0-beta.4

package/admin/src/pages/AuthPage/components/Login/BaseLogin.js

@@ -1,16 +1,15 @@
 import React, { useState } from 'react';
+import { Form, Link } from '@strapi/helper-plugin';
 import EyeStriked from '@strapi/icons/EyeStriked';
 import Eye from '@strapi/icons/Eye';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Main } from '@strapi/design-system/Main';
 import { Flex } from '@strapi/design-system/Flex';
-import { Link } from '@strapi/design-system/Link';
 import { Button } from '@strapi/design-system/Button';
 import { TextInput } from '@strapi/design-system/TextInput';
 import { Checkbox } from '@strapi/design-system/Checkbox';
 import { Typography } from '@strapi/design-system/Typography';
-import { Form } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import styled from 'styled-components';

package/admin/src/pages/AuthPage/components/Oops/index.js

@@ -1,10 +1,9 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { useQuery } from '@strapi/helper-plugin';
+import { useQuery, Link } from '@strapi/helper-plugin';
 import { Box } from '@strapi/design-system/Box';
 import { Main } from '@strapi/design-system/Main';
 import { Flex } from '@strapi/design-system/Flex';
-import { Link } from '@strapi/design-system/Link';
 import { Typography } from '@strapi/design-system/Typography';
 import UnauthenticatedLayout, {
   Column,

package/admin/src/pages/AuthPage/components/Register/index.js

@@ -3,11 +3,22 @@ import { useIntl } from 'react-intl';
 import styled from 'styled-components';
 import get from 'lodash/get';
 import omit from 'lodash/omit';
+import { useHistory } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { Formik } from 'formik';
+import axios from 'axios';
+import {
+  Form,
+  useQuery,
+  useNotification,
+  useTracking,
+  getYupInnerErrors,
+  Link,
+} from '@strapi/helper-plugin';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Main } from '@strapi/design-system/Main';
 import { Flex } from '@strapi/design-system/Flex';
-import { Link } from '@strapi/design-system/Link';
 import { Button } from '@strapi/design-system/Button';
 import { TextInput } from '@strapi/design-system/TextInput';
 import { Checkbox } from '@strapi/design-system/Checkbox';
@@ -15,17 +26,6 @@ import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Typography } from '@strapi/design-system/Typography';
 import EyeStriked from '@strapi/icons/EyeStriked';
 import Eye from '@strapi/icons/Eye';
-import {
-  Form,
-  useQuery,
-  useNotification,
-  useTracking,
-  getYupInnerErrors,
-} from '@strapi/helper-plugin';
-import { useHistory } from 'react-router-dom';
-import PropTypes from 'prop-types';
-import { Formik } from 'formik';
-import axios from 'axios';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,

package/admin/src/pages/AuthPage/components/ResetPassword/index.js

@@ -1,19 +1,18 @@
 import React, { useState } from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { Form } from '@strapi/helper-plugin';
+import styled from 'styled-components';
+import { Formik } from 'formik';
+import { Form, Link } from '@strapi/helper-plugin';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Main } from '@strapi/design-system/Main';
 import { Flex } from '@strapi/design-system/Flex';
-import { Link } from '@strapi/design-system/Link';
 import { Button } from '@strapi/design-system/Button';
 import { TextInput } from '@strapi/design-system/TextInput';
 import { Typography } from '@strapi/design-system/Typography';
 import EyeStriked from '@strapi/icons/EyeStriked';
 import Eye from '@strapi/icons/Eye';
-import styled from 'styled-components';
-import { Formik } from 'formik';
 import UnauthenticatedLayout, {
   Column,
   LayoutContent,

package/admin/src/pages/HomePage/ContentBlocks.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import styled from 'styled-components';
 import { useIntl } from 'react-intl';
+import { ContentBox, useTracking } from '@strapi/helper-plugin';
 import { Stack } from '@strapi/design-system/Stack';
 import InformationSquare from '@strapi/icons/InformationSquare';
 import CodeSquare from '@strapi/icons/CodeSquare';
 import PlaySquare from '@strapi/icons/PlaySquare';
 import FeatherSquare from '@strapi/icons/FeatherSquare';
-import { ContentBox } from '@strapi/helper-plugin';
 
 const BlockLink = styled.a`
   text-decoration: none;
@@ -14,6 +14,11 @@ const BlockLink = styled.a`
 
 const ContentBlocks = () => {
   const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+
+  const handleClick = eventName => {
+    trackUsage(eventName);
+  };
 
   return (
     <Stack spacing={5}>
@@ -21,6 +26,7 @@ const ContentBlocks = () => {
         href="https://strapi.io/resource-center"
         target="_blank"
         rel="noopener noreferrer nofollow"
+        onClick={() => handleClick('didClickonReadTheDocumentationSection')}
       >
         <ContentBox
           title={formatMessage({
@@ -39,6 +45,7 @@ const ContentBlocks = () => {
         href="https://strapi.io/starters"
         target="_blank"
         rel="noopener noreferrer nofollow"
+        onClick={() => handleClick('didClickonCodeExampleSection')}
       >
         <ContentBox
           title={formatMessage({
@@ -57,6 +64,7 @@ const ContentBlocks = () => {
         href="https://strapi.io/blog/categories/tutorials"
         target="_blank"
         rel="noopener noreferrer nofollow"
+        onClick={() => handleClick('didClickonTutorialSection')}
       >
         <ContentBox
           title={formatMessage({
@@ -71,7 +79,12 @@ const ContentBlocks = () => {
           iconBackground="secondary100"
         />
       </BlockLink>
-      <BlockLink href="https://strapi.io/blog" target="_blank" rel="noopener noreferrer nofollow">
+      <BlockLink
+        href="https://strapi.io/blog"
+        target="_blank"
+        rel="noopener noreferrer nofollow"
+        onClick={() => handleClick('didClickonBlogSection')}
+      >
         <ContentBox
           title={formatMessage({
             id: 'app.components.BlockLink.blog',

package/admin/src/pages/HomePage/HomeHeader.js

@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { Typography } from '@strapi/design-system/Typography';
-import { Link } from '@strapi/design-system/Link';
+import { Link } from '@strapi/design-system/v2/Link';
 import { Stack } from '@strapi/design-system/Stack';
 import { Box } from '@strapi/design-system/Box';
 import { Button } from '@strapi/design-system/Button';
@@ -49,7 +49,7 @@ const HomeHeader = ({ hasCreatedContentType, onCreateCT }) => {
                 })}
           </WordWrap>
           {hasCreatedContentType ? (
-            <Link href="https://strapi.io/blog">
+            <Link isExternal href="https://strapi.io/blog">
               {formatMessage({
                 id: 'app.components.HomePage.button.blog',
                 defaultMessage: 'See more on the blog',

package/admin/src/pages/HomePage/SocialLinks.js

@@ -10,8 +10,8 @@ import { Typography } from '@strapi/design-system/Typography';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { LinkButton } from '@strapi/design-system/LinkButton';
-import { Link } from '@strapi/design-system/Link';
+import { LinkButton } from '@strapi/design-system/v2/LinkButton';
+import { Link } from '@strapi/design-system/v2/Link';
 import ExternalLink from '@strapi/icons/ExternalLink';
 import Github from '@strapi/icons/Github';
 import Discord from '@strapi/icons/Discord';
@@ -167,7 +167,7 @@ const SocialLinks = () => {
               })}
             </Typography>
           </Stack>
-          <Link href="https://feedback.strapi.io/" endIcon={<ExternalLink />}>
+          <Link href="https://feedback.strapi.io/" isExternal endIcon={<ExternalLink />}>
             {formatMessage({
               id: 'app.components.HomePage.roadmap',
               defaultMessage: 'See our road map',
@@ -184,6 +184,7 @@ const SocialLinks = () => {
                 startIcon={socialLink.icon}
                 variant="tertiary"
                 href={socialLink.link}
+                isExternal
               >
                 {socialLink.name}
               </LinkCustom>

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

@@ -5,9 +5,8 @@
  *
  */
 import React from 'react';
-import { useFocusWhenNavigate } from '@strapi/helper-plugin';
+import { useFocusWhenNavigate, LinkButton } from '@strapi/helper-plugin';
 import { Main } from '@strapi/design-system/Main';
-import { LinkButton } from '@strapi/design-system/LinkButton';
 import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
 import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout';
 import EmptyPictures from '@strapi/icons/EmptyPictures';

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { HeaderLayout } from '@strapi/design-system/Layout';
-import { LinkButton } from '@strapi/design-system/LinkButton';
+import { LinkButton } from '@strapi/design-system/v2/LinkButton';
 import Upload from '@strapi/icons/Upload';
 import { useTracking } from '@strapi/helper-plugin';
 
@@ -27,6 +27,7 @@ const PageHeader = ({ isOnline }) => {
             variant="tertiary"
             href="https://market.strapi.io/submit-plugin"
             onClick={() => trackUsage('didSubmitPlugin')}
+            isExternal
           >
             {formatMessage({
               id: 'admin.pages.MarketPlacePage.submit.plugin.link',

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

@@ -5,7 +5,7 @@ import styled from 'styled-components';
 import { Box } from '@strapi/design-system/Box';
 import { Stack } from '@strapi/design-system/Stack';
 import { Typography } from '@strapi/design-system/Typography';
-import { LinkButton } from '@strapi/design-system/LinkButton';
+import { LinkButton } from '@strapi/design-system/v2/LinkButton';
 import { Flex } from '@strapi/design-system/Flex';
 import { Icon } from '@strapi/design-system/Icon';
 import { Tooltip } from '@strapi/design-system/Tooltip';
@@ -46,9 +46,9 @@ const PluginCard = ({ plugin, installedPluginNames, useYarn, isInDevelopmentMode
       direction="column"
       justifyContent="space-between"
       paddingTop={4}
-      paddingRight={6}
+      paddingRight={4}
       paddingBottom={4}
-      paddingLeft={6}
+      paddingLeft={4}
       hasRadius
       background="neutral0"
       shadow="tableShadow"
@@ -108,6 +108,7 @@ const PluginCard = ({ plugin, installedPluginNames, useYarn, isInDevelopmentMode
         <LinkButton
           size="S"
           href={`https://market.strapi.io/plugins/${attributes.slug}`}
+          isExternal
           endIcon={<ExternalLink />}
           aria-label={formatMessage(
             {

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

@@ -5,9 +5,8 @@
  *
  */
 import React from 'react';
-import { useFocusWhenNavigate } from '@strapi/helper-plugin';
+import { useFocusWhenNavigate, LinkButton } from '@strapi/helper-plugin';
 import { Main } from '@strapi/design-system/Main';
-import { LinkButton } from '@strapi/design-system/LinkButton';
 import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
 import { EmptyStateLayout } from '@strapi/design-system/EmptyStateLayout';
 import EmptyPictures from '@strapi/icons/EmptyPictures';

package/admin/src/pages/SettingsPage/components/SettingsNav/index.js

@@ -1,13 +1,14 @@
 import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
 import {
   SubNav,
   SubNavHeader,
   SubNavSection,
   SubNavSections,
   SubNavLink,
-} from '@strapi/design-system/SubNav';
-import { useIntl } from 'react-intl';
-import PropTypes from 'prop-types';
+} from '@strapi/design-system/v2/SubNav';
 import { getSectionsToDisplay } from '../../utils';
 
 const SettingsNav = ({ menu }) => {
@@ -41,7 +42,7 @@ const SettingsNav = ({ menu }) => {
         {sections.map(section => (
           <SubNavSection key={section.id} label={formatMessage(section.intlLabel)}>
             {section.links.map(link => (
-              <SubNavLink withBullet={link.hasNotification} to={link.to} key={link.id}>
+              <SubNavLink as={NavLink} withBullet={link.hasNotification} to={link.to} key={link.id}>
                 {formatMessage(link.intlLabel)}
               </SubNavLink>
             ))}

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/index.js

@@ -8,13 +8,13 @@ import {
   useNotification,
   useTracking,
   useGuidedTour,
+  Link,
 } from '@strapi/helper-plugin';
 import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
 import { Button } from '@strapi/design-system/Button';
 import Check from '@strapi/icons/Check';
 import ArrowLeft from '@strapi/icons/ArrowLeft';
-import { Link } from '@strapi/design-system/Link';
 import { Formik } from 'formik';
 import { Stack } from '@strapi/design-system/Stack';
 import { Box } from '@strapi/design-system/Box';

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/UpdateButton/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import Pencil from '@strapi/icons/Pencil';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { Link } from '@strapi/design-system/Link';
+import { Link } from '@strapi/helper-plugin';
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/index.js

@@ -10,11 +10,11 @@ import {
   DynamicTable,
   useTracking,
   useGuidedTour,
+  LinkButton,
 } from '@strapi/helper-plugin';
 import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
 import { Main } from '@strapi/design-system/Main';
 import { Button } from '@strapi/design-system/Button';
-import { LinkButton } from '@strapi/design-system/LinkButton';
 import Plus from '@strapi/icons/Plus';
 import { useQuery, useMutation, useQueryClient } from 'react-query';
 import { useHistory } from 'react-router-dom';

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,118 @@
+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 }
+        )}
+        // Carousel is used here for a single media,
+        // we don't need previous and next labels but these props are required
+        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;