@strapi/admin 4.9.0-alpha.0 → 4.9.0-exp.90df253ba90fd6879eb56a720a1f80d04ff745b8

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, Flex, Grid, GridItem } from '@strapi/design-system';
 import ContentTypesSection from '../ContenTypesSection';
 import ActionBoundRoutes from '../ActionBoundRoutes';
 import { useApiTokenPermissionsContext } from '../../../../../../../contexts/ApiTokenPermissions';
@@ -16,7 +14,7 @@ const Permissions = ({ ...props }) => {
   return (
     <Grid gap={0} shadow="filterShadow" hasRadius background="neutral0">
       <GridItem col={7} paddingTop={6} paddingBottom={6} paddingLeft={7} paddingRight={7}>
-        <Stack spacing={2}>
+        <Flex direction="column" alignItems="stretch" gap={2}>
           <Typography variant="delta" as="h2">
             {formatMessage({
               id: 'Settings.apiTokens.createPage.permissions.title',
@@ -29,7 +27,7 @@ const Permissions = ({ ...props }) => {
               defaultMessage: 'Only actions bound by a route are listed below.',
             })}
           </Typography>
-        </Stack>
+        </Flex>
         {data?.permissions && <ContentTypesSection section={data?.permissions} {...props} />}
       </GridItem>
       <ActionBoundRoutes />

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

@@ -1,15 +1,19 @@
 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';
 
 export const Regenerate = ({ onRegenerate, idToRegenerate }) => {
   const { formatMessage } = useIntl();
   const [showConfirmDialog, setShowConfirmDialog] = useState(false);
-  const { regenerateData, isLoadingConfirmation } = useRegenerate(idToRegenerate, onRegenerate);
+  const { regenerateData, isLoadingConfirmation } = useRegenerate(
+    '/admin/api-tokens/',
+    idToRegenerate,
+    onRegenerate
+  );
   const handleConfirmRegeneration = async () => {
     regenerateData();
     setShowConfirmDialog(false);
@@ -26,14 +30,14 @@ export const Regenerate = ({ onRegenerate, idToRegenerate }) => {
         name="regenerate"
       >
         {formatMessage({
-          id: 'Settings.apiTokens.regenerate',
+          id: 'Settings.tokens.regenerate',
           defaultMessage: 'Regenerate',
         })}
       </Button>
 
       <ConfirmDialog
         bodyText={{
-          id: 'Settings.apiTokens.popUpWarning.message',
+          id: 'Settings.tokens.popUpWarning.message',
           defaultMessage: 'Are you sure you want to regenerate this token?',
         }}
         iconRightButton={<Refresh />}
@@ -42,15 +46,15 @@ export const Regenerate = ({ onRegenerate, idToRegenerate }) => {
         onToggleDialog={() => setShowConfirmDialog(false)}
         onConfirm={handleConfirmRegeneration}
         leftButtonText={{
-          id: 'Settings.apiTokens.Button.cancel',
+          id: 'Settings.tokens.Button.cancel',
           defaultMessage: 'Cancel',
         }}
         rightButtonText={{
-          id: 'Settings.apiTokens.Button.regenerate',
+          id: 'Settings.tokens.Button.regenerate',
           defaultMessage: 'Regenerate',
         }}
         title={{
-          id: 'Settings.apiTokens.RegenerateDialog.title',
+          id: 'Settings.tokens.RegenerateDialog.title',
           defaultMessage: 'Regenerate token',
         }}
       />

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

@@ -11,19 +11,22 @@ import {
   useRBAC,
   useFetchClient,
 } from '@strapi/helper-plugin';
-import { Main } from '@strapi/design-system/Main';
+import { Main, ContentLayout, Flex } from '@strapi/design-system';
 import { Formik } from 'formik';
 import { useRouteMatch, useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';
 import { formatAPIErrors } from '../../../../../utils';
 import { schema } from './utils';
 import LoadingView from './components/LoadingView';
-import FormHead from './components/FormHead';
-import FormBody from './components/FormBody';
 import adminPermissions from '../../../../../permissions';
 import { ApiTokenPermissionsContextProvider } from '../../../../../contexts/ApiTokenPermissions';
 import init from './init';
 import reducer, { initialState } from './reducer';
+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';
 
@@ -105,7 +108,9 @@ const ApiTokenCreateView = () => {
   );
 
   useEffect(() => {
-    trackUsageRef.current(isCreating ? 'didAddTokenFromList' : 'didEditTokenFromList');
+    trackUsageRef.current(isCreating ? 'didAddTokenFromList' : 'didEditTokenFromList', {
+      tokenType: API_TOKEN_TYPE,
+    });
   }, [isCreating]);
 
   const { status } = useQuery(
@@ -150,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'
@@ -186,17 +193,18 @@ const ApiTokenCreateView = () => {
         type: 'success',
         message: isCreating
           ? formatMessage({
-              id: 'notification.success.tokencreated',
+              id: 'notification.success.apitokencreated',
               defaultMessage: 'API Token successfully created',
             })
           : formatMessage({
-              id: 'notification.success.tokenedited',
+              id: 'notification.success.apitokenedited',
               defaultMessage: 'API Token successfully edited',
             }),
       });
 
       trackUsageRef.current(isCreating ? 'didCreateToken' : 'didEditToken', {
         type: apiToken.type,
+        tokenType: API_TOKEN_TYPE,
       });
     } catch (err) {
       const errors = formatAPIErrors(err.response.data);
@@ -280,22 +288,43 @@ const ApiTokenCreateView = () => {
             return (
               <Form>
                 <FormHead
-                  apiToken={apiToken}
-                  setApiToken={setApiToken}
+                  backUrl="/settings/api-tokens"
+                  title={{
+                    id: 'Settings.apiTokens.createPage.title',
+                    defaultMessage: 'Create API Token',
+                  }}
+                  token={apiToken}
+                  setToken={setApiToken}
                   canEditInputs={canEditInputs}
                   canRegenerate={canRegenerate}
                   isSubmitting={isSubmitting}
+                  regenerateUrl="/admin/api-tokens/"
                 />
-                <FormBody
-                  apiToken={apiToken}
-                  errors={errors}
-                  onChange={handleChange}
-                  canEditInputs={canEditInputs}
-                  isCreating={isCreating}
-                  values={values}
-                  onDispatch={dispatch}
-                  setHasChangedPermissions={setHasChangedPermissions}
-                />
+
+                <ContentLayout>
+                  <Flex direction="column" alignItems="stretch" gap={6}>
+                    {Boolean(apiToken?.name) && (
+                      <TokenBox token={apiToken?.accessKey} tokenType={API_TOKEN_TYPE} />
+                    )}
+                    <FormApiTokenContainer
+                      errors={errors}
+                      onChange={handleChange}
+                      canEditInputs={canEditInputs}
+                      isCreating={isCreating}
+                      values={values}
+                      apiToken={apiToken}
+                      onDispatch={dispatch}
+                      setHasChangedPermissions={setHasChangedPermissions}
+                    />
+                    <Permissions
+                      disabled={
+                        !canEditInputs ||
+                        values?.type === 'read-only' ||
+                        values?.type === 'full-access'
+                      }
+                    />
+                  </Flex>
+                </ContentLayout>
               </Form>
             );
           }}

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/utils/schema.js

@@ -2,7 +2,7 @@ import * as yup from 'yup';
 import { translatedErrors } from '@strapi/helper-plugin';
 
 const schema = yup.object().shape({
-  name: yup.string(translatedErrors.string).required(translatedErrors.required),
+  name: yup.string(translatedErrors.string).max(100).required(translatedErrors.required),
   type: yup
     .string(translatedErrors.string)
     .oneOf(['read-only', 'full-access', 'custom'])

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

@@ -11,20 +11,18 @@ import {
   NoPermissions,
   useRBAC,
   NoContent,
-  DynamicTable,
   useTracking,
   useGuidedTour,
   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 TableRows from './DynamicTable';
+import Table from '../../../components/Tokens/Table';
+import { API_TOKEN_TYPE } from '../../../components/Tokens/constants';
 
 const ApiTokenListView = () => {
   useFocusWhenNavigate();
@@ -65,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;
     },
@@ -130,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({
@@ -144,22 +148,16 @@ const ApiTokenListView = () => {
       <ContentLayout>
         {!canRead && <NoPermissions />}
         {shouldDisplayDynamicTable && (
-          <DynamicTable
+          <Table
+            permissions={{ canRead, canDelete, canUpdate }}
             headers={headers}
             contentType="api-tokens"
             rows={apiTokens}
-            withBulkActions={canDelete || canUpdate || canRead}
             isLoading={isLoading}
             onConfirmDelete={(id) => deleteMutation.mutateAsync(id)}
-          >
-            <TableRows
-              canRead={canRead}
-              canDelete={canDelete}
-              canUpdate={canUpdate}
-              rows={apiTokens}
-              withBulkActions={canDelete || canUpdate || canRead}
-            />
-          </DynamicTable>
+            tokens={apiTokens}
+            tokenType={API_TOKEN_TYPE}
+          />
         )}
         {shouldDisplayNoContentWithCreationButton && (
           <NoContent

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

@@ -0,0 +1,5 @@
+const AdminSeatInfo = () => {
+  return null;
+};
+
+export default AdminSeatInfo;

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,18 @@ 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,
+  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';
 
@@ -77,7 +80,7 @@ const FromComputerForm = ({ setLocalImage, goTo, next, onClose }) => {
         <Box paddingLeft={8} paddingRight={8} paddingTop={6} paddingBottom={6}>
           <Field name="logo-upload" error={fileError}>
             <label htmlFor="logo-upload">
-              <Stack spacing={2}>
+              <Flex direction="column" alignItems="stretch" gap={2}>
                 <Flex
                   paddingTop={9}
                   paddingBottom={7}
@@ -143,7 +146,7 @@ const FromComputerForm = ({ setLocalImage, goTo, next, onClose }) => {
                   </Box>
                 </Flex>
                 <FieldError />
-              </Stack>
+              </Flex>
             </label>
           </Field>
         </Box>

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';

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

@@ -10,7 +10,7 @@ import {
   CardHeader,
   CardTitle,
   CardSubtitle,
-} from '@strapi/design-system/Card';
+} from '@strapi/design-system';
 
 const ImageCardAsset = ({ asset }) => {
   const { formatMessage } = useIntl();

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

@@ -2,11 +2,7 @@ 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 { Box, Flex, Button, ModalFooter, Typography } from '@strapi/design-system';
 import ImageCardAsset from './ImageCardAsset';
 
 const PendingLogoDialog = ({ onClose, asset, prev, next, goTo, setLocalImage, onChangeLogo }) => {

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

@@ -1,8 +1,7 @@
 import React, { useReducer } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { ModalLayout, ModalHeader } from '@strapi/design-system/ModalLayout';
-import { Typography } from '@strapi/design-system/Typography';
+import { ModalLayout, ModalHeader, Typography } from '@strapi/design-system';
 import reducer, { initialState } from './reducer';
 
 const LogoModalStepper = ({