@strapi/admin 4.9.0-alpha.0 → 4.9.0-beta.2

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

@@ -1,15 +1,11 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { usePersistentState } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
-import { Box } from '@strapi/design-system/Box';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Select, Option } from '@strapi/design-system/Select';
-import { Stack } from '@strapi/design-system/Stack';
-import { Textarea } from '@strapi/design-system/Textarea';
-import { TextInput } from '@strapi/design-system/TextInput';
-import { Typography } from '@strapi/design-system/Typography';
-import { getDateOfExpiration } from '../../utils';
+import { Box, Grid, GridItem, Flex, Typography } from '@strapi/design-system';
+import LifeSpanInput from '../../../../../components/Tokens/LifeSpanInput';
+import TokenName from '../../../../../components/Tokens/TokenName';
+import TokenDescription from '../../../../../components/Tokens/TokenDescription';
+import TokenTypeSelect from '../../../../../components/Tokens/TokenTypeSelect';
 
 const FormApiTokenContainer = ({
   errors,
@@ -22,7 +18,6 @@ const FormApiTokenContainer = ({
   setHasChangedPermissions,
 }) => {
   const { formatMessage } = useIntl();
-  const [lang] = usePersistentState('strapi-admin-language', 'en');
 
   const handleChangeSelectApiTokenType = ({ target: { value } }) => {
     setHasChangedPermissions(false);
@@ -39,6 +34,30 @@ const FormApiTokenContainer = ({
     }
   };
 
+  const typeOptions = [
+    {
+      value: 'read-only',
+      label: {
+        id: 'Settings.tokens.types.read-only',
+        defaultMessage: 'Read-only',
+      },
+    },
+    {
+      value: 'full-access',
+      label: {
+        id: 'Settings.tokens.types.full-access',
+        defaultMessage: 'Full access',
+      },
+    },
+    {
+      value: 'custom',
+      label: {
+        id: 'Settings.tokens.types.custom',
+        defaultMessage: 'Custom',
+      },
+    },
+  ];
+
   return (
     <Box
       background="neutral0"
@@ -49,7 +68,7 @@ const FormApiTokenContainer = ({
       paddingLeft={7}
       paddingRight={7}
     >
-      <Stack spacing={4}>
+      <Flex direction="column" alignItems="stretch" gap={4}>
         <Typography variant="delta" as="h2">
           {formatMessage({
             id: 'global.details',
@@ -58,161 +77,49 @@ const FormApiTokenContainer = ({
         </Typography>
         <Grid gap={5}>
           <GridItem key="name" col={6} xs={12}>
-            <TextInput
-              name="name"
-              error={
-                errors.name
-                  ? formatMessage(
-                      errors.name?.id
-                        ? errors.name
-                        : { id: errors.name, defaultMessage: errors.name }
-                    )
-                  : null
-              }
-              label={formatMessage({
-                id: 'Settings.apiTokens.form.name',
-                defaultMessage: 'Name',
-              })}
+            <TokenName
+              errors={errors}
+              values={values}
+              canEditInputs={canEditInputs}
               onChange={onChange}
-              value={values.name}
-              disabled={!canEditInputs}
-              required
             />
           </GridItem>
           <GridItem key="description" col={6} xs={12}>
-            <Textarea
-              label={formatMessage({
-                id: 'Settings.apiTokens.form.description',
-                defaultMessage: 'Description',
-              })}
-              name="description"
-              error={
-                errors.description
-                  ? formatMessage(
-                      errors.description?.id
-                        ? errors.description
-                        : {
-                            id: errors.description,
-                            defaultMessage: errors.description,
-                          }
-                    )
-                  : null
-              }
+            <TokenDescription
+              errors={errors}
+              values={values}
+              canEditInputs={canEditInputs}
               onChange={onChange}
-              disabled={!canEditInputs}
-            >
-              {values.description}
-            </Textarea>
+            />
           </GridItem>
           <GridItem key="lifespan" col={6} xs={12}>
-            <Select
-              name="lifespan"
-              label={formatMessage({
-                id: 'Settings.apiTokens.form.duration',
-                defaultMessage: 'Token duration',
-              })}
-              value={values.lifespan !== null ? values.lifespan : '0'}
-              error={
-                errors.lifespan
-                  ? formatMessage(
-                      errors.lifespan?.id
-                        ? errors.lifespan
-                        : { id: errors.lifespan, defaultMessage: errors.lifespan }
-                    )
-                  : null
-              }
-              onChange={(value) => {
-                onChange({ target: { name: 'lifespan', value } });
-              }}
-              required
-              disabled={!isCreating}
-              placeholder="Select"
-            >
-              <Option value="604800000">
-                {formatMessage({
-                  id: 'Settings.apiTokens.duration.7-days',
-                  defaultMessage: '7 days',
-                })}
-              </Option>
-              <Option value="2592000000">
-                {formatMessage({
-                  id: 'Settings.apiTokens.duration.30-days',
-                  defaultMessage: '30 days',
-                })}
-              </Option>
-              <Option value="7776000000">
-                {formatMessage({
-                  id: 'Settings.apiTokens.duration.90-days',
-                  defaultMessage: '90 days',
-                })}
-              </Option>
-              <Option value="0">
-                {formatMessage({
-                  id: 'Settings.apiTokens.duration.unlimited',
-                  defaultMessage: 'Unlimited',
-                })}
-              </Option>
-            </Select>
-            <Typography variant="pi" textColor="neutral600">
-              {!isCreating &&
-                `${formatMessage({
-                  id: 'Settings.apiTokens.duration.expiration-date',
-                  defaultMessage: 'Expiration date',
-                })}: ${getDateOfExpiration(
-                  apiToken?.createdAt,
-                  parseInt(values.lifespan, 10),
-                  lang
-                )}`}
-            </Typography>
+            <LifeSpanInput
+              isCreating={isCreating}
+              errors={errors}
+              values={values}
+              onChange={onChange}
+              token={apiToken}
+            />
           </GridItem>
 
           <GridItem key="type" col={6} xs={12}>
-            <Select
-              name="type"
-              label={formatMessage({
-                id: 'Settings.apiTokens.form.type',
+            <TokenTypeSelect
+              values={values}
+              errors={errors}
+              label={{
+                id: 'Settings.tokens.form.type',
                 defaultMessage: 'Token type',
-              })}
-              value={values?.type}
-              error={
-                errors.type
-                  ? formatMessage(
-                      errors.type?.id
-                        ? errors.type
-                        : { id: errors.type, defaultMessage: errors.type }
-                    )
-                  : null
-              }
+              }}
               onChange={(value) => {
                 handleChangeSelectApiTokenType({ target: { value } });
                 onChange({ target: { name: 'type', value } });
               }}
-              placeholder="Select"
-              required
-              disabled={!canEditInputs}
-            >
-              <Option value="read-only">
-                {formatMessage({
-                  id: 'Settings.apiTokens.types.read-only',
-                  defaultMessage: 'Read-only',
-                })}
-              </Option>
-              <Option value="full-access">
-                {formatMessage({
-                  id: 'Settings.apiTokens.types.full-access',
-                  defaultMessage: 'Full access',
-                })}
-              </Option>
-              <Option value="custom">
-                {formatMessage({
-                  id: 'Settings.apiTokens.types.custom',
-                  defaultMessage: 'Custom',
-                })}
-              </Option>
-            </Select>
+              options={typeOptions}
+              canEditInputs={canEditInputs}
+            />
           </GridItem>
         </Grid>
-      </Stack>
+      </Flex>
     </Box>
   );
 };

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/reducer.js

@@ -1,6 +1,6 @@
 /* eslint-disable consistent-return */
 import produce from 'immer';
-import { pull } from 'lodash';
+import pull from 'lodash/pull';
 import { transformPermissionsData } from './utils';
 
 export const initialState = {

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/EditView/utils/transformPermissionsData.js

@@ -1,5 +1,3 @@
-import { flatten } from 'lodash';
-
 const transformPermissionsData = (data) => {
   const layout = {
     allActionsIds: [],
@@ -9,11 +7,11 @@ const transformPermissionsData = (data) => {
   layout.permissions = Object.keys(data).map((apiId) => ({
     apiId,
     label: apiId.split('::')[1],
-    controllers: flatten(
-      Object.keys(data[apiId].controllers).map((controller) => ({
+    controllers: Object.keys(data[apiId].controllers)
+      .map((controller) => ({
         controller,
-        actions: flatten(
-          data[apiId].controllers[controller].map((action) => {
+        actions: data[apiId].controllers[controller]
+          .map((action) => {
             const actionId = `${apiId}.${controller}.${action}`;
 
             if (apiId.includes('api::')) {
@@ -25,9 +23,9 @@ const transformPermissionsData = (data) => {
               actionId,
             };
           })
-        ),
+          .flat(),
       }))
-    ),
+      .flat(),
   }));
 
   return layout;

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