@strapi/admin 4.4.0-rc.0 → 4.5.0-alpha.0

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef, useReducer } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useIntl } from 'react-intl';
 import {
   SettingsPageTitle,
@@ -8,134 +8,62 @@ import {
   useNotification,
   useTracking,
   useGuidedTour,
-  useRBAC,
+  Link,
 } 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 ArrowLeft from '@strapi/icons/ArrowLeft';
 import { Formik } from 'formik';
-import { get } from 'lodash';
+import { Stack } from '@strapi/design-system/Stack';
+import { Box } from '@strapi/design-system/Box';
+import { Typography } from '@strapi/design-system/Typography';
+import { Grid, GridItem } from '@strapi/design-system/Grid';
+import { TextInput } from '@strapi/design-system/TextInput';
+import { Textarea } from '@strapi/design-system/Textarea';
+import { Select, Option } from '@strapi/design-system/Select';
+import get from 'lodash/get';
 import { useRouteMatch, useHistory } from 'react-router-dom';
 import { useQuery } from 'react-query';
 import { formatAPIErrors } from '../../../../../utils';
 import { axiosInstance } from '../../../../../core/utils';
-import { schema } from './utils';
+import schema from './utils/schema';
 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';
-
-const MSG_ERROR_NAME_TAKEN = 'Name already taken';
+import HeaderContentBox from './components/ContentBox';
 
 const ApiTokenCreateView = () => {
+  let apiToken;
   useFocusWhenNavigate();
   const { formatMessage } = useIntl();
   const { lockApp, unlockApp } = useOverlayBlocker();
   const toggleNotification = useNotification();
   const history = useHistory();
-  const [apiToken, setApiToken] = useState(
-    history.location.state?.apiToken.accessKey
-      ? {
-          ...history.location.state.apiToken,
-        }
-      : null
-  );
   const { trackUsage } = useTracking();
   const trackUsageRef = useRef(trackUsage);
   const { setCurrentStep } = useGuidedTour();
-  const {
-    allowedActions: { canCreate, canUpdate, canRegenerate },
-  } = useRBAC(adminPermissions.settings['api-tokens']);
-  const [state, dispatch] = useReducer(reducer, initialState, (state) => init(state, {}));
+
   const {
     params: { id },
   } = useRouteMatch('/settings/api-tokens/:id');
 
   const isCreating = id === 'create';
 
-  useQuery(
-    'content-api-permissions',
-    async () => {
-      const [permissions, routes] = await Promise.all(
-        ['/admin/content-api/permissions', '/admin/content-api/routes'].map(async (url) => {
-          const { data } = await axiosInstance.get(url);
-
-          return data.data;
-        })
-      );
-
-      dispatch({
-        type: 'UPDATE_PERMISSIONS_LAYOUT',
-        value: permissions,
-      });
-
-      dispatch({
-        type: 'UPDATE_ROUTES',
-        value: routes,
-      });
-
-      if (apiToken) {
-        if (apiToken?.type === 'read-only') {
-          dispatch({
-            type: 'ON_CHANGE_READ_ONLY',
-          });
-        }
-        if (apiToken?.type === 'full-access') {
-          dispatch({
-            type: 'SELECT_ALL_ACTIONS',
-          });
-        }
-        if (apiToken?.type === 'custom') {
-          dispatch({
-            type: 'UPDATE_PERMISSIONS',
-            value: apiToken?.permissions,
-          });
-        }
-      }
-    },
-    {
-      onError() {
-        toggleNotification({
-          type: 'warning',
-          message: { id: 'notification.error', defaultMessage: 'An error occured' },
-        });
-      },
-    }
-  );
-
   useEffect(() => {
     trackUsageRef.current(isCreating ? 'didAddTokenFromList' : 'didEditTokenFromList');
   }, [isCreating]);
 
-  const { status } = useQuery(
+  if (history.location.state?.apiToken.accessKey) {
+    apiToken = history.location.state.apiToken;
+  }
+
+  const { status, data } = useQuery(
     ['api-token', id],
     async () => {
       const {
         data: { data },
       } = await axiosInstance.get(`/admin/api-tokens/${id}`);
 
-      setApiToken({
-        ...data,
-      });
-
-      if (data?.type === 'read-only') {
-        dispatch({
-          type: 'ON_CHANGE_READ_ONLY',
-        });
-      }
-      if (data?.type === 'full-access') {
-        dispatch({
-          type: 'SELECT_ALL_ACTIONS',
-        });
-      }
-      if (data?.type === 'custom') {
-        dispatch({
-          type: 'UPDATE_PERMISSIONS',
-          value: data?.permissions,
-        });
-      }
-
       return data;
     },
     {
@@ -149,6 +77,10 @@ const ApiTokenCreateView = () => {
     }
   );
 
+  if (data) {
+    apiToken = data;
+  }
+
   const handleSubmit = async (body, actions) => {
     trackUsageRef.current(isCreating ? 'willCreateToken' : 'willEditToken');
     lockApp();
@@ -157,98 +89,37 @@ const ApiTokenCreateView = () => {
       const {
         data: { data: response },
       } = isCreating
-        ? await axiosInstance.post(`/admin/api-tokens`, {
-            ...body,
-            lifespan:
-              body.lifespan && parseInt(body.lifespan, 10)
-                ? parseInt(body.lifespan, 10)
-                : body.lifespan,
-            permissions: body.type === 'custom' ? state.selectedActions : null,
-          })
-        : await axiosInstance.put(`/admin/api-tokens/${id}`, {
-            name: body.name,
-            description: body.description,
-            type: body.type,
-            permissions: body.type === 'custom' ? state.selectedActions : null,
-          });
+        ? await axiosInstance.post(`/admin/api-tokens`, body)
+        : await axiosInstance.put(`/admin/api-tokens/${id}`, body);
 
-      if (isCreating) {
-        history.replace(`/settings/api-tokens/${response.id}`, { apiToken: response });
-        setCurrentStep('apiTokens.success');
-      }
-      unlockApp();
-      setApiToken({
-        ...response,
-      });
+      apiToken = response;
 
       toggleNotification({
         type: 'success',
-        message: isCreating
-          ? formatMessage({
-              id: 'notification.success.tokencreated',
-              defaultMessage: 'API Token successfully created',
-            })
-          : formatMessage({
-              id: 'notification.success.tokenedited',
-              defaultMessage: 'API Token successfully edited',
-            }),
+        message: formatMessage({ id: 'notification.success.saved', defaultMessage: 'Saved' }),
       });
 
       trackUsageRef.current(isCreating ? 'didCreateToken' : 'didEditToken', {
         type: apiToken.type,
       });
+
+      if (isCreating) {
+        history.replace(`/settings/api-tokens/${response.id}`, { apiToken: response });
+        setCurrentStep('apiTokens.success');
+      }
     } catch (err) {
       const errors = formatAPIErrors(err.response.data);
       actions.setErrors(errors);
 
-      if (err?.response?.data?.error?.message === MSG_ERROR_NAME_TAKEN) {
-        toggleNotification({
-          type: 'warning',
-          message: get(err, 'response.data.message', 'notification.error.tokennamenotunique'),
-        });
-      } else {
-        toggleNotification({
-          type: 'warning',
-          message: get(err, 'response.data.message', 'notification.error'),
-        });
-      }
-      unlockApp();
+      toggleNotification({
+        type: 'warning',
+        message: get(err, 'response.data.message', 'notification.error'),
+      });
     }
-  };
 
-  const [hasChangedPermissions, setHasChangedPermissions] = useState(false);
-
-  const handleChangeCheckbox = ({ target: { value } }) => {
-    setHasChangedPermissions(true);
-    dispatch({
-      type: 'ON_CHANGE',
-      value,
-    });
-  };
-
-  const handleChangeSelectAllCheckbox = ({ target: { value } }) => {
-    setHasChangedPermissions(true);
-    dispatch({
-      type: 'SELECT_ALL_IN_PERMISSION',
-      value,
-    });
-  };
-
-  const setSelectedAction = ({ target: { value } }) => {
-    dispatch({
-      type: 'SET_SELECTED_ACTION',
-      value,
-    });
-  };
-
-  const providerValue = {
-    ...state,
-    onChange: handleChangeCheckbox,
-    onChangeSelectAll: handleChangeSelectAllCheckbox,
-    setSelectedAction,
+    unlockApp();
   };
 
-  const canEditInputs = (canUpdate && !isCreating) || (canCreate && isCreating);
   const isLoading = !isCreating && !apiToken && status !== 'success';
 
   if (isLoading) {
@@ -256,51 +127,162 @@ const ApiTokenCreateView = () => {
   }
 
   return (
-    <ApiTokenPermissionsContextProvider value={providerValue}>
-      <Main>
-        <SettingsPageTitle name="API Tokens" />
-        <Formik
-          validationSchema={schema}
-          validateOnChange={false}
-          initialValues={{
-            name: apiToken?.name || '',
-            description: apiToken?.description || '',
-            type: apiToken?.type,
-            lifespan: apiToken?.lifespan ? apiToken.lifespan.toString() : apiToken?.lifespan,
-          }}
-          enableReinitialize
-          onSubmit={(body, actions) => handleSubmit(body, actions)}
-        >
-          {({ errors, handleChange, isSubmitting, values, setFieldValue }) => {
-            if (hasChangedPermissions && values?.type !== 'custom') {
-              setFieldValue('type', 'custom');
-            }
-
-            return (
-              <Form>
-                <FormHead
-                  apiToken={apiToken}
-                  setApiToken={setApiToken}
-                  canEditInputs={canEditInputs}
-                  canRegenerate={canRegenerate}
-                  isSubmitting={isSubmitting}
-                />
-                <FormBody
-                  apiToken={apiToken}
-                  errors={errors}
-                  onChange={handleChange}
-                  canEditInputs={canEditInputs}
-                  isCreating={isCreating}
-                  values={values}
-                  onDispatch={dispatch}
-                  setHasChangedPermissions={setHasChangedPermissions}
-                />
-              </Form>
-            );
-          }}
-        </Formik>
-      </Main>
-    </ApiTokenPermissionsContextProvider>
+    <Main>
+      <SettingsPageTitle name="API Tokens" />
+      <Formik
+        validationSchema={schema}
+        validateOnChange={false}
+        initialValues={{
+          name: apiToken?.name || '',
+          description: apiToken?.description || '',
+          type: apiToken?.type || 'read-only',
+        }}
+        onSubmit={handleSubmit}
+      >
+        {({ errors, handleChange, isSubmitting, values }) => {
+          return (
+            <Form>
+              <HeaderLayout
+                title={
+                  apiToken?.name ||
+                  formatMessage({
+                    id: 'Settings.apiTokens.createPage.title',
+                    defaultMessage: 'Create API Token',
+                  })
+                }
+                primaryAction={
+                  <Button
+                    disabled={isSubmitting}
+                    loading={isSubmitting}
+                    startIcon={<Check />}
+                    type="submit"
+                    size="L"
+                  >
+                    {formatMessage({
+                      id: 'global.save',
+                      defaultMessage: 'Save',
+                    })}
+                  </Button>
+                }
+                navigationAction={
+                  <Link startIcon={<ArrowLeft />} to="/settings/api-tokens">
+                    {formatMessage({
+                      id: 'global.back',
+                      defaultMessage: 'Back',
+                    })}
+                  </Link>
+                }
+              />
+              <ContentLayout>
+                <Stack spacing={6}>
+                  {Boolean(apiToken?.name) && <HeaderContentBox apiToken={apiToken.accessKey} />}
+                  <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}>
+                          <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={handleChange}
+                            value={values.name}
+                            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
+                            }
+                            onChange={handleChange}
+                          >
+                            {values.description}
+                          </Textarea>
+                        </GridItem>
+                        <GridItem key="type" col={6} xs={12}>
+                          <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) => {
+                              handleChange({ target: { name: 'type', value } });
+                            }}
+                          >
+                            <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>
+                          </Select>
+                        </GridItem>
+                      </Grid>
+                    </Stack>
+                  </Box>
+                </Stack>
+              </ContentLayout>
+            </Form>
+          );
+        }}
+      </Formik>
+    </Main>
   );
 };
 

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/utils/schema.js

@@ -5,10 +5,9 @@ const schema = yup.object().shape({
   name: yup.string(translatedErrors.string).required(translatedErrors.required),
   type: yup
     .string(translatedErrors.string)
-    .oneOf(['read-only', 'full-access', 'custom'])
+    .oneOf(['read-only', 'full-access'])
     .required(translatedErrors.required),
   description: yup.string().nullable(),
-  lifespan: yup.number().integer().min(1).nullable().defined(translatedErrors.required),
 });
 
 export default schema;

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

@@ -24,7 +24,6 @@ const DeleteButton = ({ tokenName, onClickDelete }) => {
           },
           { target: `${tokenName}` }
         )}
-        name="delete"
         noBorder
         icon={<Trash />}
       />

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

@@ -1,13 +1,46 @@
 import React from 'react';
 import Pencil from '@strapi/icons/Pencil';
+import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
-import DefaultButton from '../DefaultButton';
+import { Link } from '@strapi/helper-plugin';
+import { useHistory } from 'react-router-dom';
+import styled from 'styled-components';
+
+const LinkUpdate = styled(Link)`
+  svg {
+    path {
+      fill: ${({ theme }) => theme.colors.neutral500};
+    }
+  }
+
+  &:hover {
+    svg {
+      path {
+        fill: ${({ theme }) => theme.colors.neutral800};
+      }
+    }
+  }
+`;
 
 const UpdateButton = ({ tokenName, tokenId }) => {
+  const { formatMessage } = useIntl();
+  const {
+    location: { pathname },
+  } = useHistory();
+
   return (
-    <DefaultButton tokenName={tokenName} tokenId={tokenId}>
+    <LinkUpdate
+      to={`${pathname}/${tokenId}`}
+      title={formatMessage(
+        {
+          id: 'app.component.table.edit',
+          defaultMessage: 'Edit {target}',
+        },
+        { target: `${tokenName}` }
+      )}
+    >
       <Pencil />
-    </DefaultButton>
+    </LinkUpdate>
   );
 };
 

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { useHistory } from 'react-router-dom';
 
@@ -12,11 +13,12 @@ import {
   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 TableRows = ({ canDelete, canUpdate, onClickDelete, withBulkActions, rows }) => {
+  const { formatMessage } = useIntl();
   const [{ query }] = useQueryParams();
   const [, sortOrder] = query.sort.split(':');
   const {
@@ -57,24 +59,22 @@ const TableRows = ({ canDelete, canUpdate, canRead, onClickDelete, withBulkActio
             </Td>
             <Td>
               <Typography textColor="neutral800">
-                <RelativeTime timestamp={new Date(apiToken.createdAt)} />
+                {formatMessage({
+                  id: `Settings.apiTokens.types.${apiToken.type}`,
+                  defaultMessage: 'Type unknown',
+                })}
               </Typography>
             </Td>
             <Td>
-              {apiToken.lastUsedAt && (
-                <Typography textColor="neutral800">
-                  <RelativeTime timestamp={new Date(apiToken.lastUsedAt)} />
-                </Typography>
-              )}
+              <Typography textColor="neutral800">
+                <RelativeTime timestamp={new Date(apiToken.createdAt)} />
+              </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}
@@ -94,7 +94,6 @@ const TableRows = ({ canDelete, canUpdate, canRead, onClickDelete, withBulkActio
 TableRows.defaultProps = {
   canDelete: false,
   canUpdate: false,
-  canRead: false,
   onClickDelete() {},
   rows: [],
   withBulkActions: false,
@@ -103,7 +102,6 @@ TableRows.defaultProps = {
 TableRows.propTypes = {
   canDelete: PropTypes.bool,
   canUpdate: PropTypes.bool,
-  canRead: PropTypes.bool,
   onClickDelete: PropTypes.func,
   rows: PropTypes.array,
   withBulkActions: PropTypes.bool,

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

@@ -147,16 +147,15 @@ const ApiTokenListView = () => {
             headers={headers}
             contentType="api-tokens"
             rows={apiTokens}
-            withBulkActions={canDelete || canUpdate || canRead}
+            withBulkActions={canDelete || canUpdate}
             isLoading={isLoading}
             onConfirmDelete={(id) => deleteMutation.mutateAsync(id)}
           >
             <TableRows
-              canRead={canRead}
               canDelete={canDelete}
               canUpdate={canUpdate}
               rows={apiTokens}
-              withBulkActions={canDelete || canUpdate || canRead}
+              withBulkActions={canDelete || canUpdate}
             />
           </DynamicTable>
         )}

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/utils/tableHeaders.js

@@ -22,23 +22,23 @@ const tableHeaders = [
     },
   },
   {
-    name: 'createdAt',
-    key: 'createdAt',
+    name: 'type',
+    key: 'type',
     metadatas: {
       label: {
-        id: 'Settings.apiTokens.ListView.headers.createdAt',
-        defaultMessage: 'Created at',
+        id: 'Settings.apiTokens.ListView.headers.type',
+        defaultMessage: 'Token type',
       },
       sortable: false,
     },
   },
   {
-    name: 'lastUsedAt',
-    key: 'lastUsedAt',
+    name: 'createdAt',
+    key: 'createdAt',
     metadatas: {
       label: {
-        id: 'Settings.apiTokens.ListView.headers.lastUsedAt',
-        defaultMessage: 'Last used',
+        id: 'Settings.apiTokens.ListView.headers.createdAt',
+        defaultMessage: 'Created at',
       },
       sortable: false,
     },