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

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

@@ -1,14 +1,15 @@
 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 LifeSpanInput from '../../../../../components/Tokens/LifeSpanInput';
-import TokenName from '../../../../../components/Tokens/TokenName';
-import TokenDescription from '../../../../../components/Tokens/TokenDescription';
-import TokenTypeSelect from '../../../../../components/Tokens/TokenTypeSelect';
+import { getDateOfExpiration } from '../../utils';
 
 const FormApiTokenContainer = ({
   errors,
@@ -21,6 +22,7 @@ const FormApiTokenContainer = ({
   setHasChangedPermissions,
 }) => {
   const { formatMessage } = useIntl();
+  const [lang] = usePersistentState('strapi-admin-language', 'en');
 
   const handleChangeSelectApiTokenType = ({ target: { value } }) => {
     setHasChangedPermissions(false);
@@ -37,30 +39,6 @@ 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"
@@ -80,46 +58,158 @@ const FormApiTokenContainer = ({
         </Typography>
         <Grid gap={5}>
           <GridItem key="name" col={6} xs={12}>
-            <TokenName
-              errors={errors}
-              values={values}
-              canEditInputs={canEditInputs}
+            <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',
+              })}
               onChange={onChange}
+              value={values.name}
+              disabled={!canEditInputs}
+              required
             />
           </GridItem>
           <GridItem key="description" col={6} xs={12}>
-            <TokenDescription
-              errors={errors}
-              values={values}
-              canEditInputs={canEditInputs}
+            <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
+              }
               onChange={onChange}
-            />
+              disabled={!canEditInputs}
+            >
+              {values.description}
+            </Textarea>
           </GridItem>
           <GridItem key="lifespan" col={6} xs={12}>
-            <LifeSpanInput
-              isCreating={isCreating}
-              errors={errors}
-              values={values}
-              onChange={onChange}
-              token={apiToken}
-            />
+            <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>
           </GridItem>
 
           <GridItem key="type" col={6} xs={12}>
-            <TokenTypeSelect
-              values={values}
-              errors={errors}
-              label={{
+            <Select
+              name="type"
+              label={formatMessage({
                 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 } });
               }}
-              options={typeOptions}
-              canEditInputs={canEditInputs}
-            />
+              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>
           </GridItem>
         </Grid>
       </Stack>

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

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { ContentLayout } from '@strapi/design-system/Layout';
+import { Stack } from '@strapi/design-system/Stack';
+import HeaderContentBox from '../ContentBox';
+import FormApiTokenContainer from '../FormApiTokenContainer';
+import Permissions from '../Permissions';
+
+const FormBody = ({
+  apiToken,
+  errors,
+  onChange,
+  canEditInputs,
+  isCreating,
+  values,
+  onDispatch,
+  setHasChangedPermissions,
+}) => {
+  return (
+    <ContentLayout>
+      <Stack spacing={6}>
+        {Boolean(apiToken?.name) && <HeaderContentBox apiToken={apiToken?.accessKey} />}
+        <FormApiTokenContainer
+          errors={errors}
+          onChange={onChange}
+          canEditInputs={canEditInputs}
+          isCreating={isCreating}
+          values={values}
+          apiToken={apiToken}
+          onDispatch={onDispatch}
+          setHasChangedPermissions={setHasChangedPermissions}
+        />
+        <Permissions
+          disabled={
+            !canEditInputs || values?.type === 'read-only' || values?.type === 'full-access'
+          }
+        />
+      </Stack>
+    </ContentLayout>
+  );
+};
+
+FormBody.propTypes = {
+  errors: PropTypes.shape({
+    name: PropTypes.string,
+    description: PropTypes.string,
+    lifespan: PropTypes.string,
+    type: PropTypes.string,
+  }),
+  apiToken: PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.string,
+    lifespan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    name: PropTypes.string,
+    accessKey: PropTypes.string,
+    permissions: PropTypes.array,
+    description: PropTypes.string,
+    createdAt: PropTypes.string,
+  }),
+  onChange: PropTypes.func.isRequired,
+  canEditInputs: PropTypes.bool.isRequired,
+  isCreating: PropTypes.bool.isRequired,
+  values: PropTypes.shape({
+    name: PropTypes.string,
+    description: PropTypes.string,
+    lifespan: PropTypes.string,
+    type: PropTypes.string,
+  }).isRequired,
+  onDispatch: PropTypes.func.isRequired,
+  setHasChangedPermissions: PropTypes.func.isRequired,
+};
+
+FormBody.defaultProps = {
+  errors: {},
+  apiToken: {},
+};
+
+export default FormBody;

package/admin/src/pages/SettingsPage/{components/Tokens → pages/ApiTokens/EditView/components}/FormHead/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import PropTypes from 'prop-types';
 import { Link } from '@strapi/helper-plugin';
+import PropTypes from 'prop-types';
 import ArrowLeft from '@strapi/icons/ArrowLeft';
 import Check from '@strapi/icons/Check';
 import { Button } from '@strapi/design-system/Button';
@@ -9,36 +9,29 @@ import { HeaderLayout } from '@strapi/design-system/Layout';
 import { Stack } from '@strapi/design-system/Stack';
 import Regenerate from '../Regenerate';
 
-const FormHead = ({
-  title,
-  token,
-  setToken,
-  canEditInputs,
-  canRegenerate,
-  isSubmitting,
-  backUrl,
-  regenerateUrl,
-}) => {
+const FormHead = ({ apiToken, setApiToken, canEditInputs, canRegenerate, isSubmitting }) => {
   const { formatMessage } = useIntl();
   const handleRegenerate = (newKey) => {
-    setToken({
-      ...token,
+    setApiToken({
+      ...apiToken,
       accessKey: newKey,
     });
   };
 
   return (
     <HeaderLayout
-      title={token?.name || formatMessage(title)}
+      title={
+        apiToken?.name ||
+        formatMessage({
+          id: 'Settings.apiTokens.createPage.title',
+          defaultMessage: 'Create API Token',
+        })
+      }
       primaryAction={
         canEditInputs ? (
           <Stack horizontal spacing={2}>
-            {canRegenerate && token?.id && (
-              <Regenerate
-                backUrl={regenerateUrl}
-                onRegenerate={handleRegenerate}
-                idToRegenerate={token?.id}
-              />
+            {canRegenerate && apiToken?.id && (
+              <Regenerate onRegenerate={handleRegenerate} idToRegenerate={apiToken?.id} />
             )}
             <Button
               disabled={isSubmitting}
@@ -55,17 +48,13 @@ const FormHead = ({
           </Stack>
         ) : (
           canRegenerate &&
-          token?.id && (
-            <Regenerate
-              onRegenerate={handleRegenerate}
-              idToRegenerate={token?.id}
-              backUrl={regenerateUrl}
-            />
+          apiToken?.id && (
+            <Regenerate onRegenerate={handleRegenerate} idToRegenerate={apiToken?.id} />
           )
         )
       }
       navigationAction={
-        <Link startIcon={<ArrowLeft />} to={backUrl}>
+        <Link startIcon={<ArrowLeft />} to="/settings/api-tokens">
           {formatMessage({
             id: 'global.back',
             defaultMessage: 'Back',
@@ -77,7 +66,7 @@ const FormHead = ({
 };
 
 FormHead.propTypes = {
-  token: PropTypes.shape({
+  apiToken: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     type: PropTypes.string,
     lifespan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -89,18 +78,12 @@ FormHead.propTypes = {
   }),
   canEditInputs: PropTypes.bool.isRequired,
   canRegenerate: PropTypes.bool.isRequired,
-  setToken: PropTypes.func.isRequired,
+  setApiToken: PropTypes.func.isRequired,
   isSubmitting: PropTypes.bool.isRequired,
-  backUrl: PropTypes.string.isRequired,
-  title: PropTypes.shape({
-    id: PropTypes.string,
-    label: PropTypes.string,
-  }).isRequired,
-  regenerateUrl: PropTypes.string.isRequired,
 };
 
 FormHead.defaultProps = {
-  token: undefined,
+  apiToken: undefined,
 };
 
 export default FormHead;

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

@@ -9,11 +9,7 @@ import { useRegenerate } from '../../../../../../../hooks';
 export const Regenerate = ({ onRegenerate, idToRegenerate }) => {
   const { formatMessage } = useIntl();
   const [showConfirmDialog, setShowConfirmDialog] = useState(false);
-  const { regenerateData, isLoadingConfirmation } = useRegenerate(
-    '/admin/api-tokens/',
-    idToRegenerate,
-    onRegenerate
-  );
+  const { regenerateData, isLoadingConfirmation } = useRegenerate(idToRegenerate, onRegenerate);
   const handleConfirmRegeneration = async () => {
     regenerateData();
     setShowConfirmDialog(false);

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

@@ -15,19 +15,15 @@ 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';
 
@@ -284,41 +280,22 @@ const ApiTokenCreateView = () => {
             return (
               <Form>
                 <FormHead
-                  backUrl="/settings/api-tokens"
-                  title={{
-                    id: 'Settings.apiTokens.createPage.title',
-                    defaultMessage: 'Create API Token',
-                  }}
-                  token={apiToken}
-                  setToken={setApiToken}
+                  apiToken={apiToken}
+                  setApiToken={setApiToken}
                   canEditInputs={canEditInputs}
                   canRegenerate={canRegenerate}
                   isSubmitting={isSubmitting}
-                  regenerateUrl="/admin/api-tokens/"
                 />
-
-                <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>
+                <FormBody
+                  apiToken={apiToken}
+                  errors={errors}
+                  onChange={handleChange}
+                  canEditInputs={canEditInputs}
+                  isCreating={isCreating}
+                  values={values}
+                  onDispatch={dispatch}
+                  setHasChangedPermissions={setHasChangedPermissions}
+                />
               </Form>
             );
           }}

package/admin/src/pages/SettingsPage/{components/Tokens/Table → pages/ApiTokens/ListView/DynamicTable}/DefaultButton/index.js

@@ -1,9 +1,9 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
+import { Link } from '@strapi/helper-plugin';
 import { useHistory } from 'react-router-dom';
 import styled from 'styled-components';
-import { Link } from '@strapi/helper-plugin';
 
 const MESSAGES_MAP = {
   edit: {

package/admin/src/pages/SettingsPage/{components/Tokens/Table → pages/ApiTokens/ListView/DynamicTable}/DeleteButton/index.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 
 const DeleteButton = ({ tokenName, onClickDelete }) => {
   const { formatMessage } = useIntl();
-  const { trackUsage } = useTracking(); // TODO: Track different types of tokens
+  const { trackUsage } = useTracking();
 
   return (
     <Box paddingLeft={1} {...stopPropagation}>

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

@@ -0,0 +1,112 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useHistory } from 'react-router-dom';
+
+import { Typography } from '@strapi/design-system/Typography';
+import { Tbody, Tr, Td } from '@strapi/design-system/Table';
+import { Flex } from '@strapi/design-system/Flex';
+import {
+  RelativeTime,
+  useQueryParams,
+  onRowClick,
+  pxToRem,
+  useTracking,
+} from '@strapi/helper-plugin';
+import DeleteButton from './DeleteButton';
+import UpdateButton from './UpdateButton';
+import ReadButton from './ReadButton';
+
+const TableRows = ({ canDelete, canUpdate, canRead, onClickDelete, withBulkActions, rows }) => {
+  const [{ query }] = useQueryParams();
+  const [, sortOrder] = query.sort.split(':');
+  const {
+    push,
+    location: { pathname },
+  } = useHistory();
+  const { trackUsage } = useTracking();
+
+  const apiTokens = rows.sort((a, b) => {
+    const comparaison = a.name.localeCompare(b.name);
+
+    return sortOrder === 'DESC' ? -comparaison : comparaison;
+  });
+
+  return (
+    <Tbody>
+      {apiTokens.map((apiToken) => {
+        return (
+          <Tr
+            key={apiToken.id}
+            {...onRowClick({
+              fn() {
+                trackUsage('willEditTokenFromList');
+                push(`${pathname}/${apiToken.id}`);
+              },
+              condition: canUpdate,
+            })}
+          >
+            <Td>
+              <Typography textColor="neutral800" fontWeight="bold">
+                {apiToken.name}
+              </Typography>
+            </Td>
+            <Td maxWidth={pxToRem(250)}>
+              <Typography textColor="neutral800" ellipsis>
+                {apiToken.description}
+              </Typography>
+            </Td>
+            <Td>
+              <Typography textColor="neutral800">
+                <RelativeTime timestamp={new Date(apiToken.createdAt)} />
+              </Typography>
+            </Td>
+            <Td>
+              {apiToken.lastUsedAt && (
+                <Typography textColor="neutral800">
+                  <RelativeTime timestamp={new Date(apiToken.lastUsedAt)} />
+                </Typography>
+              )}
+            </Td>
+
+            {withBulkActions && (
+              <Td>
+                <Flex justifyContent="end">
+                  {canUpdate && <UpdateButton tokenName={apiToken.name} tokenId={apiToken.id} />}
+                  {!canUpdate && canRead && (
+                    <ReadButton tokenName={apiToken.name} tokenId={apiToken.id} />
+                  )}
+                  {canDelete && (
+                    <DeleteButton
+                      tokenName={apiToken.name}
+                      onClickDelete={() => onClickDelete(apiToken.id)}
+                    />
+                  )}
+                </Flex>
+              </Td>
+            )}
+          </Tr>
+        );
+      })}
+    </Tbody>
+  );
+};
+
+TableRows.defaultProps = {
+  canDelete: false,
+  canUpdate: false,
+  canRead: false,
+  onClickDelete() {},
+  rows: [],
+  withBulkActions: false,
+};
+
+TableRows.propTypes = {
+  canDelete: PropTypes.bool,
+  canUpdate: PropTypes.bool,
+  canRead: PropTypes.bool,
+  onClickDelete: PropTypes.func,
+  rows: PropTypes.array,
+  withBulkActions: PropTypes.bool,
+};
+
+export default TableRows;