@strapi/admin 4.6.1 → 4.7.0-beta.0

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

@@ -1,15 +1,14 @@
 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 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 +21,6 @@ const FormApiTokenContainer = ({
   setHasChangedPermissions,
 }) => {
   const { formatMessage } = useIntl();
-  const [lang] = usePersistentState('strapi-admin-language', 'en');
 
   const handleChangeSelectApiTokenType = ({ target: { value } }) => {
     setHasChangedPermissions(false);
@@ -39,6 +37,30 @@ const FormApiTokenContainer = ({
     }
   };
 
+  const typeOptions = [
+    {
+      value: 'read-only',
+      label: {
+        id: 'Settings.apiTokens.types.read-only',
+        defaultMessage: 'Read-only',
+      },
+    },
+    {
+      value: 'full-access',
+      label: {
+        id: 'Settings.apiTokens.types.full-access',
+        defaultMessage: 'Full access',
+      },
+    },
+    {
+      value: 'custom',
+      label: {
+        id: 'Settings.apiTokens.types.custom',
+        defaultMessage: 'Custom',
+      },
+    },
+  ];
+
   return (
     <Box
       background="neutral0"
@@ -58,158 +80,46 @@ 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({
+            <TokenTypeSelect
+              values={values}
+              errors={errors}
+              label={{
                 id: 'Settings.apiTokens.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>

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

@@ -9,7 +9,11 @@ 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);

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

@@ -15,15 +15,19 @@ import { Main } from '@strapi/design-system/Main';
 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';
-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';
 
 const MSG_ERROR_NAME_TAKEN = 'Name already taken';
 
@@ -280,22 +284,41 @@ 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>
+                  <Stack spacing={6}>
+                    {Boolean(apiToken?.name) && <TokenBox token={apiToken?.accessKey} />}
+                    <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'
+                      }
+                    />
+                  </Stack>
+                </ContentLayout>
               </Form>
             );
           }}

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

@@ -11,7 +11,6 @@ import {
   NoPermissions,
   useRBAC,
   NoContent,
-  DynamicTable,
   useTracking,
   useGuidedTour,
   useFetchClient,
@@ -24,7 +23,7 @@ import Plus from '@strapi/icons/Plus';
 
 import adminPermissions from '../../../../../permissions';
 import tableHeaders from './utils/tableHeaders';
-import TableRows from './DynamicTable';
+import Table from '../../../components/Tokens/Table';
 
 const ApiTokenListView = () => {
   useFocusWhenNavigate();
@@ -144,22 +143,15 @@ 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}
+          />
         )}
         {shouldDisplayNoContentWithCreationButton && (
           <NoContent

package/admin/src/pages/SettingsPage/pages/TransferTokens/EditView/components/FormTransferTokenContainer/index.js

@@ -0,0 +1,105 @@
+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 LifeSpanInput from '../../../../../components/Tokens/LifeSpanInput';
+import TokenName from '../../../../../components/Tokens/TokenName';
+import TokenDescription from '../../../../../components/Tokens/TokenDescription';
+
+const FormTransferTokenContainer = ({
+  errors,
+  onChange,
+  canEditInputs,
+  isCreating,
+  values,
+  transferToken,
+}) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Box
+      background="neutral0"
+      hasRadius
+      shadow="filterShadow"
+      paddingTop={6}
+      paddingBottom={6}
+      paddingLeft={7}
+      paddingRight={7}
+    >
+      <Stack spacing={4}>
+        <Typography variant="delta" as="h2">
+          {formatMessage({
+            id: 'global.details',
+            defaultMessage: 'Details',
+          })}
+        </Typography>
+        <Grid gap={5}>
+          <GridItem key="name" col={6} xs={12}>
+            <TokenName
+              errors={errors}
+              values={values}
+              canEditInputs={canEditInputs}
+              onChange={onChange}
+            />
+          </GridItem>
+          <GridItem key="description" col={6} xs={12}>
+            <TokenDescription
+              errors={errors}
+              values={values}
+              canEditInputs={canEditInputs}
+              onChange={onChange}
+            />
+          </GridItem>
+          <GridItem key="lifespan" col={6} xs={12}>
+            <LifeSpanInput
+              isCreating={isCreating}
+              errors={errors}
+              values={values}
+              onChange={onChange}
+              token={transferToken}
+            />
+          </GridItem>
+        </Grid>
+      </Stack>
+    </Box>
+  );
+};
+
+FormTransferTokenContainer.propTypes = {
+  errors: PropTypes.shape({
+    name: PropTypes.string,
+    description: PropTypes.string,
+    lifespan: PropTypes.string,
+    type: PropTypes.string,
+  }),
+  onChange: PropTypes.func.isRequired,
+  canEditInputs: PropTypes.bool.isRequired,
+  values: PropTypes.shape({
+    name: PropTypes.string,
+    description: PropTypes.string,
+    lifespan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.string,
+  }).isRequired,
+  isCreating: PropTypes.bool.isRequired,
+  transferToken: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.string,
+    lifespan: PropTypes.string,
+    name: PropTypes.string,
+    accessKey: PropTypes.string,
+    permissions: PropTypes.array,
+    description: PropTypes.string,
+    createdAt: PropTypes.string,
+  }),
+};
+
+FormTransferTokenContainer.defaultProps = {
+  errors: {},
+  transferToken: {},
+};
+
+export default FormTransferTokenContainer;

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import {
+  SettingsPageTitle,
+  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 { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+
+const LoadingView = ({ transferTokenName }) => {
+  const { formatMessage } = useIntl();
+  useFocusWhenNavigate();
+
+  return (
+    <Main aria-busy="true">
+      <SettingsPageTitle name="Transfer Tokens" />
+      <HeaderLayout
+        primaryAction={
+          <Button disabled startIcon={<Check />} type="button" size="L">
+            {formatMessage({ id: 'global.save', defaultMessage: 'Save' })}
+          </Button>
+        }
+        title={
+          transferTokenName ||
+          formatMessage({
+            id: 'Settings.transferTokens.createPage.title',
+            defaultMessage: 'Create Transfer Token',
+          })
+        }
+      />
+      <ContentLayout>
+        <LoadingIndicatorPage />
+      </ContentLayout>
+    </Main>
+  );
+};
+
+LoadingView.defaultProps = {
+  transferTokenName: null,
+};
+
+LoadingView.propTypes = {
+  transferTokenName: PropTypes.string,
+};
+
+export default LoadingView;