@strapi/admin 4.7.0-beta.0 → 4.7.0-exp.3d6a31eb083e9d44afcf98f68c107fb7567e5720

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

@@ -1,18 +1,21 @@
 import React from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
+import { useTracking } from '@strapi/helper-plugin';
 import {
   SubNav,
   SubNavHeader,
   SubNavSection,
   SubNavSections,
   SubNavLink,
-} from '@strapi/design-system/v2/SubNav';
+} from '@strapi/design-system/v2';
 import { getSectionsToDisplay } from '../../utils';
 
 const SettingsNav = ({ menu }) => {
   const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+  const { pathname } = useLocation();
 
   const filteredMenu = getSectionsToDisplay(menu);
 
@@ -35,6 +38,10 @@ const SettingsNav = ({ menu }) => {
     defaultMessage: 'Settings',
   });
 
+  const handleClickOnLink = (destination = null) => {
+    trackUsage('willNavigate', { from: pathname, to: destination });
+  };
+
   return (
     <SubNav ariaLabel={label}>
       <SubNavHeader label={label} />
@@ -42,7 +49,13 @@ const SettingsNav = ({ menu }) => {
         {sections.map((section) => (
           <SubNavSection key={section.id} label={formatMessage(section.intlLabel)}>
             {section.links.map((link) => (
-              <SubNavLink as={NavLink} withBullet={link.hasNotification} to={link.to} key={link.id}>
+              <SubNavLink
+                as={NavLink}
+                withBullet={link.hasNotification}
+                to={link.to}
+                onClick={() => handleClickOnLink(link.to)}
+                key={link.id}
+              >
                 {formatMessage(link.intlLabel)}
               </SubNavLink>
             ))}

package/admin/src/pages/SettingsPage/components/Tokens/FormHead/index.js

@@ -2,11 +2,8 @@ import React from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { Link } from '@strapi/helper-plugin';
-import ArrowLeft from '@strapi/icons/ArrowLeft';
-import Check from '@strapi/icons/Check';
-import { Button } from '@strapi/design-system/Button';
-import { HeaderLayout } from '@strapi/design-system/Layout';
-import { Stack } from '@strapi/design-system/Stack';
+import { ArrowLeft, Check } from '@strapi/icons';
+import { Button, HeaderLayout, Stack } from '@strapi/design-system';
 import Regenerate from '../Regenerate';
 
 const FormHead = ({

package/admin/src/pages/SettingsPage/components/Tokens/FormiTokenContainer/LifeSpanInput.js

@@ -2,8 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import { usePersistentState } from '@strapi/helper-plugin';
-import { Select, Option } from '@strapi/design-system/Select';
-import { Typography } from '@strapi/design-system/Typography';
+import { Select, Option, Typography } from '@strapi/design-system';
 import { getDateOfExpiration } from '../../../pages/ApiTokens/EditView/utils';
 
 const LifeSpanInput = ({ token, errors, values, onChange, disabled }) => {

package/admin/src/pages/SettingsPage/components/Tokens/LifeSpanInput/index.js

@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Select, Option } from '@strapi/design-system/Select';
-import { Typography } from '@strapi/design-system/Typography';
+import { Select, Option, Typography } from '@strapi/design-system';
 import { getDateOfExpiration } from '../../../pages/ApiTokens/EditView/utils';
 
 const LifeSpanInput = ({ token, errors, values, onChange, isCreating }) => {

package/admin/src/pages/SettingsPage/components/Tokens/Regenerate/index.js

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Button } from '@strapi/design-system/Button';
-import Refresh from '@strapi/icons/Refresh';
+import { Button } from '@strapi/design-system';
+import { Refresh } from '@strapi/icons';
 import { ConfirmDialog } from '@strapi/helper-plugin';
 import { useRegenerate } from '../../../../../hooks';
 

package/admin/src/pages/SettingsPage/components/Tokens/Table/DeleteButton/index.js

@@ -1,21 +1,27 @@
-import React from 'react';
-import Trash from '@strapi/icons/Trash';
-import { IconButton } from '@strapi/design-system/IconButton';
-import { Box } from '@strapi/design-system/Box';
-import { stopPropagation, useTracking } from '@strapi/helper-plugin';
+import React, { useState } from 'react';
+import { Trash } from '@strapi/icons';
+import { IconButton, Box } from '@strapi/design-system';
+import { useTracking, ConfirmDialog } from '@strapi/helper-plugin';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 
-const DeleteButton = ({ tokenName, onClickDelete }) => {
+const DeleteButton = ({ tokenName, onClickDelete, tokenType }) => {
   const { formatMessage } = useIntl();
-  const { trackUsage } = useTracking(); // TODO: Track different types of tokens
+  const { trackUsage } = useTracking();
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const handleClickDelete = () => {
+    setShowConfirmDialog(false);
+    trackUsage('willDeleteToken', {
+      tokenType,
+    });
+    onClickDelete();
+  };
 
   return (
-    <Box paddingLeft={1} {...stopPropagation}>
+    <Box paddingLeft={1} onClick={(e) => e.stopPropagation()}>
       <IconButton
         onClick={() => {
-          trackUsage('willDeleteToken');
-          onClickDelete();
+          setShowConfirmDialog(true);
         }}
         label={formatMessage(
           {
@@ -28,6 +34,11 @@ const DeleteButton = ({ tokenName, onClickDelete }) => {
         noBorder
         icon={<Trash />}
       />
+      <ConfirmDialog
+        onToggleDialog={() => setShowConfirmDialog(false)}
+        onConfirm={handleClickDelete}
+        isOpen={showConfirmDialog}
+      />
     </Box>
   );
 };
@@ -35,6 +46,7 @@ const DeleteButton = ({ tokenName, onClickDelete }) => {
 DeleteButton.propTypes = {
   tokenName: PropTypes.string.isRequired,
   onClickDelete: PropTypes.func.isRequired,
+  tokenType: PropTypes.string.isRequired,
 };
 
 export default DeleteButton;

package/admin/src/pages/SettingsPage/components/Tokens/Table/ReadButton/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Eye from '@strapi/icons/Eye';
+import { Eye } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import DefaultButton from '../DefaultButton';
 

package/admin/src/pages/SettingsPage/components/Tokens/Table/UpdateButton/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Pencil from '@strapi/icons/Pencil';
+import { Pencil } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import DefaultButton from '../DefaultButton';
 

package/admin/src/pages/SettingsPage/components/Tokens/Table/index.js

@@ -1,9 +1,7 @@
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 import PropTypes from 'prop-types';
-import { Typography } from '@strapi/design-system/Typography';
-import { Tbody, Tr, Td } from '@strapi/design-system/Table';
-import { Flex } from '@strapi/design-system/Flex';
+import { Typography, Flex, Tbody, Tr, Td } from '@strapi/design-system';
 import {
   RelativeTime,
   onRowClick,
@@ -16,7 +14,15 @@ import DeleteButton from './DeleteButton';
 import UpdateButton from './UpdateButton';
 import ReadButton from './ReadButton';
 
-const Table = ({ permissions, headers, contentType, isLoading, tokens, onConfirmDelete }) => {
+const Table = ({
+  permissions,
+  headers,
+  contentType,
+  isLoading,
+  tokens,
+  onConfirmDelete,
+  tokenType,
+}) => {
   const { canDelete, canUpdate, canRead } = permissions;
   const withBulkActions = canDelete || canUpdate || canRead;
   const [{ query }] = useQueryParams();
@@ -49,7 +55,9 @@ const Table = ({ permissions, headers, contentType, isLoading, tokens, onConfirm
               key={token.id}
               {...onRowClick({
                 fn() {
-                  trackUsage('willEditTokenFromList');
+                  trackUsage('willEditTokenFromList', {
+                    tokenType,
+                  });
                   push(`${pathname}/${token.id}`);
                 },
                 condition: canUpdate,
@@ -89,6 +97,7 @@ const Table = ({ permissions, headers, contentType, isLoading, tokens, onConfirm
                       <DeleteButton
                         tokenName={token.name}
                         onClickDelete={() => onConfirmDelete(token.id)}
+                        tokenType={tokenType}
                       />
                     )}
                   </Flex>
@@ -123,6 +132,7 @@ Table.propTypes = {
   contentType: PropTypes.string.isRequired,
   isLoading: PropTypes.bool,
   onConfirmDelete: PropTypes.func,
+  tokenType: PropTypes.string.isRequired,
 };
 
 Table.defaultProps = {

package/admin/src/pages/SettingsPage/components/Tokens/TokenBox/index.js

@@ -1,13 +1,12 @@
 import React, { useRef } from 'react';
 import { useIntl } from 'react-intl';
+import { ContentBox, useNotification, useTracking } from '@strapi/helper-plugin';
+import { IconButton } from '@strapi/design-system';
+import { Duplicate, Key } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import { CopyToClipboard } from 'react-copy-to-clipboard';
-import { ContentBox, useNotification, useTracking } from '@strapi/helper-plugin';
-import { IconButton } from '@strapi/design-system/IconButton';
-import Duplicate from '@strapi/icons/Duplicate';
-import Key from '@strapi/icons/Key';
 
-const TokenBox = ({ token }) => {
+const TokenBox = ({ token, tokenType }) => {
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
   const { trackUsage } = useTracking(); // TODO: Track different types of tokens
@@ -20,7 +19,9 @@ const TokenBox = ({ token }) => {
           <span style={{ alignSelf: 'start' }}>
             <CopyToClipboard
               onCopy={() => {
-                trackUsageRef.current('didCopyTokenKey');
+                trackUsageRef.current('didCopyTokenKey', {
+                  tokenType,
+                });
                 toggleNotification({
                   type: 'success',
                   message: { id: 'Settings.tokens.notification.copied' },
@@ -71,6 +72,7 @@ TokenBox.defaultProps = {
 
 TokenBox.propTypes = {
   token: PropTypes.string,
+  tokenType: PropTypes.string.isRequired,
 };
 
 export default TokenBox;

package/admin/src/pages/SettingsPage/components/Tokens/TokenDescription/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Textarea } from '@strapi/design-system/Textarea';
+import { Textarea } from '@strapi/design-system';
 
 const TokenDescription = ({ errors, values, onChange, canEditInputs }) => {
   const { formatMessage } = useIntl();

package/admin/src/pages/SettingsPage/components/Tokens/TokenName/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { TextInput } from '@strapi/design-system/TextInput';
+import { TextInput } from '@strapi/design-system';
 
 const TokenName = ({ errors, values, onChange, canEditInputs }) => {
   const { formatMessage } = useIntl();

package/admin/src/pages/SettingsPage/components/Tokens/TokenTypeSelect/index.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 
-import { Select, Option } from '@strapi/design-system/Select';
+import { Select, Option } from '@strapi/design-system';
 
 const TokenTypeSelect = ({ errors, values, onChange, canEditInputs, options, label }) => {
   const { formatMessage } = useIntl();

package/admin/src/pages/SettingsPage/components/Tokens/constants.js

@@ -0,0 +1,2 @@
+export const API_TOKEN_TYPE = 'api-token';
+export const TRANSFER_TOKEN_TYPE = 'transfer-token';

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

@@ -12,7 +12,7 @@
 import React, { memo, useMemo } from 'react';
 import { LoadingIndicatorPage, useStrapiApp } from '@strapi/helper-plugin';
 import { Switch, Redirect, Route, useParams } from 'react-router-dom';
-import { Layout } from '@strapi/design-system/Layout';
+import { Layout } from '@strapi/design-system';
 import { useIntl } from 'react-intl';
 import { Helmet } from 'react-helmet';
 import { useSettingsMenu } from '../../hooks';

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

@@ -1,8 +1,6 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import { GridItem } from '@strapi/design-system/Grid';
+import { Typography, Stack, GridItem } from '@strapi/design-system';
 import BoundRoute from '../BoundRoute';
 import { useApiTokenPermissionsContext } from '../../../../../../../contexts/ApiTokenPermissions';
 

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

@@ -1,8 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Stack } from '@strapi/design-system/Stack';
-import { Box } from '@strapi/design-system/Box';
-import { Typography } from '@strapi/design-system/Typography';
+import { Stack, Box, Typography } from '@strapi/design-system';
 import map from 'lodash/map';
 import tail from 'lodash/tail';
 import { useIntl } from 'react-intl';

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/CollapsableContentType/CheckBoxWrapper.js

@@ -1,5 +1,5 @@
 import styled, { css } from 'styled-components';
-import { Box } from '@strapi/design-system/Box';
+import { Box } from '@strapi/design-system';
 
 const activeCheckboxWrapperStyles = css`
   background: ${(props) => props.theme.colors.primary100};

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

@@ -1,15 +1,20 @@
 import React, { useState, useEffect } from 'react';
 import { capitalize } from 'lodash';
 import { useIntl } from 'react-intl';
+import {
+  Accordion,
+  AccordionToggle,
+  AccordionContent,
+  Checkbox,
+  Grid,
+  GridItem,
+  Typography,
+  Box,
+  Flex,
+} from '@strapi/design-system';
+import { Cog } from '@strapi/icons';
 import styled from 'styled-components';
 import PropTypes from 'prop-types';
-import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
-import { Checkbox } from '@strapi/design-system/Checkbox';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Typography } from '@strapi/design-system/Typography';
-import { Box } from '@strapi/design-system/Box';
-import { Flex } from '@strapi/design-system/Flex';
-import CogIcon from '@strapi/icons/Cog';
 import { useApiTokenPermissionsContext } from '../../../../../../../contexts/ApiTokenPermissions';
 import CheckboxWrapper from './CheckBoxWrapper';
 
@@ -117,7 +122,7 @@ const CollapsableContentType = ({
                             }
                             style={{ display: 'inline-flex', alignItems: 'center' }}
                           >
-                            <CogIcon />
+                            <Cog />
                           </button>
                         </CheckboxWrapper>
                       </GridItem>

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

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
+import { Box } from '@strapi/design-system';
 import CollapsableContentType from '../CollapsableContentType';
 
 const ContentTypesSection = ({ section, ...props }) => {

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

@@ -1,10 +1,7 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Stack } from '@strapi/design-system/Stack';
-import { Typography } from '@strapi/design-system/Typography';
+import { Box, Grid, GridItem, Stack, Typography } from '@strapi/design-system';
 import LifeSpanInput from '../../../../../components/Tokens/LifeSpanInput';
 import TokenName from '../../../../../components/Tokens/TokenName';
 import TokenDescription from '../../../../../components/Tokens/TokenDescription';

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

@@ -4,10 +4,8 @@ import {
   LoadingIndicatorPage,
   useFocusWhenNavigate,
 } 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 { HeaderLayout, ContentLayout, Main, Button } from '@strapi/design-system';
+import { Check } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 

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

@@ -1,8 +1,6 @@
 import React, { memo } from 'react';
 import { useIntl } from 'react-intl';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { Typography, Stack, Grid, GridItem } from '@strapi/design-system';
 import ContentTypesSection from '../ContenTypesSection';
 import ActionBoundRoutes from '../ActionBoundRoutes';
 import { useApiTokenPermissionsContext } from '../../../../../../../contexts/ApiTokenPermissions';

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

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Button } from '@strapi/design-system/Button';
-import Refresh from '@strapi/icons/Refresh';
+import { Button } from '@strapi/design-system';
+import { Refresh } from '@strapi/icons';
 import { ConfirmDialog } from '@strapi/helper-plugin';
 import { useRegenerate } from '../../../../../../../hooks';
 

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

@@ -11,12 +11,10 @@ import {
   useRBAC,
   useFetchClient,
 } from '@strapi/helper-plugin';
-import { Main } from '@strapi/design-system/Main';
+import { Main, ContentLayout, Stack } from '@strapi/design-system';
 import { Formik } from 'formik';
 import { useRouteMatch, useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';
-import { ContentLayout } from '@strapi/design-system/Layout';
-import { Stack } from '@strapi/design-system/Stack';
 import { formatAPIErrors } from '../../../../../utils';
 import { schema } from './utils';
 import LoadingView from './components/LoadingView';
@@ -28,6 +26,7 @@ import Permissions from './components/Permissions';
 import FormApiTokenContainer from './components/FormApiTokenContainer';
 import TokenBox from '../../../components/Tokens/TokenBox';
 import FormHead from '../../../components/Tokens/FormHead';
+import { API_TOKEN_TYPE } from '../../../components/Tokens/constants';
 
 const MSG_ERROR_NAME_TAKEN = 'Name already taken';
 
@@ -109,7 +108,9 @@ const ApiTokenCreateView = () => {
   );
 
   useEffect(() => {
-    trackUsageRef.current(isCreating ? 'didAddTokenFromList' : 'didEditTokenFromList');
+    trackUsageRef.current(isCreating ? 'didAddTokenFromList' : 'didEditTokenFromList', {
+      tokenType: API_TOKEN_TYPE,
+    });
   }, [isCreating]);
 
   const { status } = useQuery(
@@ -154,7 +155,9 @@ const ApiTokenCreateView = () => {
   );
 
   const handleSubmit = async (body, actions) => {
-    trackUsageRef.current(isCreating ? 'willCreateToken' : 'willEditToken');
+    trackUsageRef.current(isCreating ? 'willCreateToken' : 'willEditToken', {
+      tokenType: API_TOKEN_TYPE,
+    });
     lockApp();
     const lifespanVal =
       body.lifespan && parseInt(body.lifespan, 10) && body.lifespan !== '0'
@@ -201,6 +204,7 @@ const ApiTokenCreateView = () => {
 
       trackUsageRef.current(isCreating ? 'didCreateToken' : 'didEditToken', {
         type: apiToken.type,
+        tokenType: API_TOKEN_TYPE,
       });
     } catch (err) {
       const errors = formatAPIErrors(err.response.data);
@@ -299,7 +303,9 @@ const ApiTokenCreateView = () => {
 
                 <ContentLayout>
                   <Stack spacing={6}>
-                    {Boolean(apiToken?.name) && <TokenBox token={apiToken?.accessKey} />}
+                    {Boolean(apiToken?.name) && (
+                      <TokenBox token={apiToken?.accessKey} tokenType={API_TOKEN_TYPE} />
+                    )}
                     <FormApiTokenContainer
                       errors={errors}
                       onChange={handleChange}

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

@@ -16,14 +16,13 @@ import {
   useFetchClient,
   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 Plus from '@strapi/icons/Plus';
+import { HeaderLayout, ContentLayout, Main, Button } from '@strapi/design-system';
+import { Plus } from '@strapi/icons';
 
 import adminPermissions from '../../../../../permissions';
 import tableHeaders from './utils/tableHeaders';
 import Table from '../../../components/Tokens/Table';
+import { API_TOKEN_TYPE } from '../../../components/Tokens/constants';
 
 const ApiTokenListView = () => {
   useFocusWhenNavigate();
@@ -64,12 +63,14 @@ const ApiTokenListView = () => {
   } = useQuery(
     ['api-tokens'],
     async () => {
-      trackUsage('willAccessTokenList');
+      trackUsage('willAccessTokenList', {
+        tokenType: API_TOKEN_TYPE,
+      });
       const {
         data: { data },
       } = await get(`/admin/api-tokens`);
 
-      trackUsage('didAccessTokenList', { number: data.length });
+      trackUsage('didAccessTokenList', { number: data.length, tokenType: API_TOKEN_TYPE });
 
       return data;
     },
@@ -129,7 +130,11 @@ const ApiTokenListView = () => {
               data-testid="create-api-token-button"
               startIcon={<Plus />}
               size="S"
-              onClick={() => trackUsage('willAddTokenFromList')}
+              onClick={() =>
+                trackUsage('willAddTokenFromList', {
+                  tokenType: API_TOKEN_TYPE,
+                })
+              }
               to="/settings/api-tokens/create"
             >
               {formatMessage({
@@ -151,6 +156,7 @@ const ApiTokenListView = () => {
             isLoading={isLoading}
             onConfirmDelete={(id) => deleteMutation.mutateAsync(id)}
             tokens={apiTokens}
+            tokenType={API_TOKEN_TYPE}
           />
         )}
         {shouldDisplayNoContentWithCreationButton && (

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

@@ -2,9 +2,7 @@ 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 { Grid, GridItem, Box, Typography } from '@strapi/design-system';
 import { useConfigurations } from '../../../../../../hooks';
 import { DIMENSION, SIZE } from '../../utils/constants';
 import LogoInput from '../LogoInput';

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

@@ -1,11 +1,14 @@
 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 {
+  CarouselInput,
+  CarouselSlide,
+  CarouselActions,
+  IconButton,
+  Box,
+} from '@strapi/design-system';
+import { Plus, Refresh } from '@strapi/icons';
 import LogoModalStepper from '../LogoModalStepper';
 import reducer, { initialState } from './reducer';
 import stepper from './stepper';

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

@@ -1,9 +1,7 @@
 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 { Tabs, Tab, TabGroup, TabPanels, TabPanel, Box, Divider } from '@strapi/design-system';
 import FromComputerForm from './FromComputerForm';
 import FromUrlForm from './FromUrlForm';
 

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

@@ -2,15 +2,19 @@ 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 {
+  Box,
+  Stack,
+  Flex,
+  Icon,
+  Typography,
+  ModalFooter,
+  Button,
+  Field,
+  FieldError,
+  FieldInput,
+} from '@strapi/design-system';
+import { PicturePlus } from '@strapi/icons';
 import { parseFileMetadatas } from '../../utils/parseFileMetadatas';
 import { ACCEPTED_FORMAT, SIZE, DIMENSION } from '../../utils/constants';
 

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

@@ -1,10 +1,7 @@
 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 { Box, Button, TextInput, ModalFooter } from '@strapi/design-system';
 import urlToFile from '../../utils/urlToFile';
 import { parseFileMetadatas } from '../../utils/parseFileMetadatas';
 import { SIZE, DIMENSION } from '../../utils/constants';