@strapi/admin 4.6.0 → 4.7.0-beta.0

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/Textarea';
+
+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/TextInput';
+
+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,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
+import { Select, Option } from '@strapi/design-system/Select';
+
+const TokenTypeSelect = ({ errors, values, onChange, canEditInputs, options, label }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Select
+      name="type"
+      label={formatMessage({
+        id: label.id,
+        defaultMessage: label.defaultMessage,
+      })}
+      value={values?.type}
+      error={
+        errors.type
+          ? formatMessage(
+              errors.type?.id ? errors.type : { id: errors.type, defaultMessage: errors.type }
+            )
+          : null
+      }
+      onChange={onChange}
+      placeholder="Select"
+      required
+      disabled={!canEditInputs}
+    >
+      {options &&
+        options.map(({ value, label }) => (
+          <Option key={value} value={value}>
+            {formatMessage(label)}
+          </Option>
+        ))}
+    </Select>
+  );
+};
+
+TokenTypeSelect.propTypes = {
+  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 = {
+  errors: {},
+  options: [],
+};
+
+export default TokenTypeSelect;

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

@@ -1,5 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { capitalize } from 'lodash';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
 import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
 import { Checkbox } from '@strapi/design-system/Checkbox';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
@@ -7,8 +10,6 @@ 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 styled from 'styled-components';
-import PropTypes from 'prop-types';
 import { useApiTokenPermissionsContext } from '../../../../../../../contexts/ApiTokenPermissions';
 import CheckboxWrapper from './CheckBoxWrapper';
 
@@ -30,6 +31,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 +85,7 @@ const CollapsableContentType = ({
                     }}
                     disabled={disabled}
                   >
-                    Select all
+                    {formatMessage({ id: 'app.utils.select-all', defaultMessage: 'Select all' })}
                   </Checkbox>
                 </Box>
               </Flex>

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

@@ -9,21 +9,25 @@ import {
   useTracking,
   useGuidedTour,
   useRBAC,
+  useFetchClient,
 } from '@strapi/helper-plugin';
 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 { axiosInstance } from '../../../../../core/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';
 
@@ -50,6 +54,7 @@ const ApiTokenCreateView = () => {
   const {
     params: { id },
   } = useRouteMatch('/settings/api-tokens/:id');
+  const { get, post, put } = useFetchClient();
 
   const isCreating = id === 'create';
 
@@ -58,7 +63,7 @@ const ApiTokenCreateView = () => {
     async () => {
       const [permissions, routes] = await Promise.all(
         ['/admin/content-api/permissions', '/admin/content-api/routes'].map(async (url) => {
-          const { data } = await axiosInstance.get(url);
+          const { data } = await get(url);
 
           return data.data;
         })
@@ -112,7 +117,7 @@ const ApiTokenCreateView = () => {
     async () => {
       const {
         data: { data },
-      } = await axiosInstance.get(`/admin/api-tokens/${id}`);
+      } = await get(`/admin/api-tokens/${id}`);
 
       setApiToken({
         ...data,
@@ -160,12 +165,12 @@ const ApiTokenCreateView = () => {
       const {
         data: { data: response },
       } = isCreating
-        ? await axiosInstance.post(`/admin/api-tokens`, {
+        ? await post(`/admin/api-tokens`, {
             ...body,
             lifespan: lifespanVal,
             permissions: body.type === 'custom' ? state.selectedActions : null,
           })
-        : await axiosInstance.put(`/admin/api-tokens/${id}`, {
+        : await put(`/admin/api-tokens/${id}`, {
             name: body.name,
             description: body.description,
             type: body.type,
@@ -279,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,9 +11,9 @@ import {
   NoPermissions,
   useRBAC,
   NoContent,
-  DynamicTable,
   useTracking,
   useGuidedTour,
+  useFetchClient,
   LinkButton,
 } from '@strapi/helper-plugin';
 import { HeaderLayout, ContentLayout } from '@strapi/design-system/Layout';
@@ -21,10 +21,9 @@ import { Main } from '@strapi/design-system/Main';
 import { Button } from '@strapi/design-system/Button';
 import Plus from '@strapi/icons/Plus';
 
-import { axiosInstance } from '../../../../../core/utils';
 import adminPermissions from '../../../../../permissions';
 import tableHeaders from './utils/tableHeaders';
-import TableRows from './DynamicTable';
+import Table from '../../../components/Tokens/Table';
 
 const ApiTokenListView = () => {
   useFocusWhenNavigate();
@@ -38,6 +37,7 @@ const ApiTokenListView = () => {
   const { trackUsage } = useTracking();
   const { startSection } = useGuidedTour();
   const startSectionRef = useRef(startSection);
+  const { get, del } = useFetchClient();
 
   useEffect(() => {
     if (startSectionRef.current) {
@@ -67,7 +67,7 @@ const ApiTokenListView = () => {
       trackUsage('willAccessTokenList');
       const {
         data: { data },
-      } = await axiosInstance.get(`/admin/api-tokens`);
+      } = await get(`/admin/api-tokens`);
 
       trackUsage('didAccessTokenList', { number: data.length });
 
@@ -90,7 +90,7 @@ const ApiTokenListView = () => {
 
   const deleteMutation = useMutation(
     async (id) => {
-      await axiosInstance.delete(`/admin/api-tokens/${id}`);
+      await del(`/admin/api-tokens/${id}`);
     },
     {
       async onSuccess() {
@@ -143,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/ApplicationInfosPage/utils/api.js

@@ -1,14 +1,16 @@
-import { axiosInstance } from '../../../../../core/utils';
+import { getFetchClient } from '@strapi/helper-plugin';
 import prefixAllUrls from './prefixAllUrls';
 
 const fetchProjectSettings = async () => {
-  const { data } = await axiosInstance.get('/admin/project-settings');
+  const { get } = getFetchClient();
+  const { data } = await get('/admin/project-settings');
 
   return prefixAllUrls(data);
 };
 
 const postProjectSettings = async (body) => {
-  const { data } = await axiosInstance.post('/admin/project-settings', body, {
+  const { post } = getFetchClient();
+  const { data } = await post('/admin/project-settings', body, {
     headers: {
       'Content-Type': 'multipart/form-data',
     },