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

package/admin/src/pages/SettingsPage/{pages/ApiTokens/EditView/components/ContentBox → 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/IconButton';
-import Duplicate from '@strapi/icons/Duplicate';
+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 Key from '@strapi/icons/Key';
 
-const HeaderContentBox = ({ apiToken }) => {
+const TokenBox = ({ token, tokenType }) => {
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
   const { trackUsage } = useTracking();
@@ -16,17 +15,19 @@ const HeaderContentBox = ({ apiToken }) => {
   return (
     <ContentBox
       endAction={
-        apiToken && (
+        token && (
           <span style={{ alignSelf: 'start' }}>
             <CopyToClipboard
               onCopy={() => {
-                trackUsageRef.current('didCopyTokenKey');
+                trackUsageRef.current('didCopyTokenKey', {
+                  tokenType,
+                });
                 toggleNotification({
                   type: 'success',
-                  message: { id: 'Settings.apiTokens.notification.copied' },
+                  message: { id: 'Settings.tokens.notification.copied' },
                 });
               }}
-              text={apiToken}
+              text={token}
             >
               <IconButton
                 label={formatMessage({
@@ -42,20 +43,20 @@ const HeaderContentBox = ({ apiToken }) => {
         )
       }
       title={
-        apiToken ||
+        token ||
         formatMessage({
-          id: 'Settings.apiTokens.copy.editTitle',
+          id: 'Settings.tokens.copy.editTitle',
           defaultMessage: 'This token isn’t accessible anymore.',
         })
       }
       subtitle={
-        apiToken
+        token
           ? formatMessage({
-              id: 'Settings.apiTokens.copy.lastWarning',
+              id: 'Settings.tokens.copy.lastWarning',
               defaultMessage: 'Make sure to copy this token, you won’t be able to see it again!',
             })
           : formatMessage({
-              id: 'Settings.apiTokens.copy.editMessage',
+              id: 'Settings.tokens.copy.editMessage',
               defaultMessage: 'For security reasons, you can only see your token once.',
             })
       }
@@ -65,12 +66,13 @@ const HeaderContentBox = ({ apiToken }) => {
   );
 };
 
-HeaderContentBox.defaultProps = {
-  apiToken: null,
+TokenBox.defaultProps = {
+  token: null,
 };
 
-HeaderContentBox.propTypes = {
-  apiToken: PropTypes.string,
+TokenBox.propTypes = {
+  token: PropTypes.string,
+  tokenType: PropTypes.string.isRequired,
 };
 
-export default HeaderContentBox;
+export default TokenBox;

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Textarea } from '@strapi/design-system';
+
+const TokenDescription = ({ errors, values, onChange, canEditInputs }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Textarea
+      label={formatMessage({
+        id: 'Settings.tokens.form.description',
+        defaultMessage: 'Description',
+      })}
+      name="description"
+      error={
+        errors.description
+          ? formatMessage(
+              errors.description?.id
+                ? errors.description
+                : {
+                    id: errors.description,
+                    defaultMessage: errors.description,
+                  }
+            )
+          : null
+      }
+      onChange={onChange}
+      disabled={!canEditInputs}
+    >
+      {values.description}
+    </Textarea>
+  );
+};
+
+TokenDescription.propTypes = {
+  errors: PropTypes.shape({
+    description: PropTypes.string,
+  }),
+  onChange: PropTypes.func.isRequired,
+  canEditInputs: PropTypes.bool.isRequired,
+  values: PropTypes.shape({
+    description: PropTypes.string,
+  }).isRequired,
+};
+
+TokenDescription.defaultProps = {
+  errors: {},
+};
+
+export default TokenDescription;

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { TextInput } from '@strapi/design-system';
+
+const TokenName = ({ errors, values, onChange, canEditInputs }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <TextInput
+      name="name"
+      error={
+        errors.name
+          ? formatMessage(
+              errors.name?.id ? errors.name : { id: errors.name, defaultMessage: errors.name }
+            )
+          : null
+      }
+      label={formatMessage({
+        id: 'Settings.tokens.form.name',
+        defaultMessage: 'Name',
+      })}
+      onChange={onChange}
+      value={values.name}
+      disabled={!canEditInputs}
+      required
+    />
+  );
+};
+
+TokenName.propTypes = {
+  errors: PropTypes.shape({
+    name: PropTypes.string,
+  }),
+  onChange: PropTypes.func.isRequired,
+  canEditInputs: PropTypes.bool.isRequired,
+  values: PropTypes.shape({
+    name: PropTypes.string,
+  }).isRequired,
+};
+
+TokenName.defaultProps = {
+  errors: {},
+};
+
+export default TokenName;

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

@@ -0,0 +1,71 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
+import { Select, Option } from '@strapi/design-system';
+
+const TokenTypeSelect = ({ name, errors, values, onChange, canEditInputs, options, label }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Select
+      name={name}
+      label={formatMessage({
+        id: label.id,
+        defaultMessage: label.defaultMessage,
+      })}
+      value={values && values[name]}
+      error={
+        errors[name]
+          ? formatMessage(
+              errors[name]?.id ? errors[name] : { id: errors[name], defaultMessage: errors[name] }
+            )
+          : null
+      }
+      onChange={onChange}
+      placeholder="Select"
+      required
+      disabled={!canEditInputs}
+    >
+      {options &&
+        options.map(({ value, label }) => (
+          <Option key={value} value={value}>
+            {formatMessage(label)}
+          </Option>
+        ))}
+    </Select>
+  );
+};
+
+TokenTypeSelect.propTypes = {
+  name: PropTypes.string,
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.shape({
+        id: PropTypes.string,
+        defaultMessage: PropTypes.string,
+      }),
+      value: PropTypes.string,
+    })
+  ),
+  errors: PropTypes.shape({
+    type: PropTypes.string,
+  }),
+  onChange: PropTypes.func.isRequired,
+  canEditInputs: PropTypes.bool.isRequired,
+  values: PropTypes.shape({
+    type: PropTypes.string,
+  }).isRequired,
+  label: PropTypes.shape({
+    id: PropTypes.string,
+    defaultMessage: PropTypes.string,
+  }).isRequired,
+};
+
+TokenTypeSelect.defaultProps = {
+  name: 'type',
+  errors: {},
+  options: [],
+};
+
+export default TokenTypeSelect;

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, Flex, GridItem } from '@strapi/design-system';
 import BoundRoute from '../BoundRoute';
 import { useApiTokenPermissionsContext } from '../../../../../../../contexts/ApiTokenPermissions';
 
@@ -24,16 +22,16 @@ const ActionBoundRoutes = () => {
       style={{ minHeight: '100%' }}
     >
       {selectedAction ? (
-        <Stack spacing={2}>
+        <Flex direction="column" alignItems="stretch" gap={2}>
           {routes[actionSection]?.map((route) => {
             return route.config.auth?.scope?.includes(selectedAction) ||
               route.handler === selectedAction ? (
               <BoundRoute key={route.handler} route={route} />
             ) : null;
           })}
-        </Stack>
+        </Flex>
       ) : (
-        <Stack spacing={2}>
+        <Flex direction="column" alignItems="stretch" gap={2}>
           <Typography variant="delta" as="h3">
             {formatMessage({
               id: 'Settings.apiTokens.createPage.permissions.header.title',
@@ -47,7 +45,7 @@ const ActionBoundRoutes = () => {
                 "Select the application's actions or the plugin's actions and click on the cog icon to display the bound route",
             })}
           </Typography>
-        </Stack>
+        </Flex>
       )}
     </GridItem>
   );

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 { Flex, Box, Typography } from '@strapi/design-system';
 import map from 'lodash/map';
 import tail from 'lodash/tail';
 import { useIntl } from 'react-intl';
@@ -23,7 +21,7 @@ function BoundRoute({ route }) {
   const colors = getMethodColor(route.method);
 
   return (
-    <Stack spacing={2}>
+    <Flex direction="column" alignItems="stretch" gap={2}>
       <Typography variant="delta" as="h3">
         {formatMessage({
           id: 'Settings.apiTokens.createPage.BoundRoute.title',
@@ -35,7 +33,7 @@ function BoundRoute({ route }) {
           .{action}
         </Typography>
       </Typography>
-      <Stack horizontal hasRadius background="neutral0" borderColor="neutral200" spacing={0}>
+      <Flex hasRadius background="neutral0" borderColor="neutral200" gap={0}>
         <MethodBox background={colors.background} borderColor={colors.border} padding={2}>
           <Typography fontWeight="bold" textColor={colors.text}>
             {method}
@@ -48,8 +46,8 @@ function BoundRoute({ route }) {
             </Typography>
           ))}
         </Box>
-      </Stack>
-    </Stack>
+      </Flex>
+    </Flex>
   );
 }
 

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,12 +1,18 @@
 import React, { useState, useEffect } from 'react';
 import { capitalize } from 'lodash';
-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 { 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 { useApiTokenPermissionsContext } from '../../../../../../../contexts/ApiTokenPermissions';
@@ -30,6 +36,7 @@ const CollapsableContentType = ({
     value: { onChangeSelectAll, onChange, selectedActions, setSelectedAction, selectedAction },
   } = useApiTokenPermissionsContext();
   const [expanded, setExpanded] = useState(false);
+  const { formatMessage } = useIntl();
 
   const handleExpandedAccordion = () => {
     setExpanded((s) => !s);
@@ -83,7 +90,7 @@ const CollapsableContentType = ({
                     }}
                     disabled={disabled}
                   >
-                    Select all
+                    {formatMessage({ id: 'app.utils.select-all', defaultMessage: 'Select all' })}
                   </Checkbox>
                 </Box>
               </Flex>
@@ -115,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,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>
   );
 };