@strapi/admin 4.4.0-beta.3 → 4.4.0-rc.0

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useState, useRef, useReducer } from 'react';
 import { useIntl } from 'react-intl';
 import {
   SettingsPageTitle,
@@ -8,62 +8,134 @@ import {
   useNotification,
   useTracking,
   useGuidedTour,
-  Link,
+  useRBAC,
 } 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 { 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 { get } from 'lodash';
 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/schema';
+import { schema } from './utils';
 import LoadingView from './components/LoadingView';
-import HeaderContentBox from './components/ContentBox';
+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';
 
 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]);
 
-  if (history.location.state?.apiToken.accessKey) {
-    apiToken = history.location.state.apiToken;
-  }
-
-  const { status, data } = useQuery(
+  const { status } = 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;
     },
     {
@@ -77,10 +149,6 @@ const ApiTokenCreateView = () => {
     }
   );
 
-  if (data) {
-    apiToken = data;
-  }
-
   const handleSubmit = async (body, actions) => {
     trackUsageRef.current(isCreating ? 'willCreateToken' : 'willEditToken');
     lockApp();
@@ -89,37 +157,98 @@ const ApiTokenCreateView = () => {
       const {
         data: { data: response },
       } = isCreating
-        ? await axiosInstance.post(`/admin/api-tokens`, body)
-        : await axiosInstance.put(`/admin/api-tokens/${id}`, body);
+        ? 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,
+          });
 
-      apiToken = response;
+      if (isCreating) {
+        history.replace(`/settings/api-tokens/${response.id}`, { apiToken: response });
+        setCurrentStep('apiTokens.success');
+      }
+      unlockApp();
+      setApiToken({
+        ...response,
+      });
 
       toggleNotification({
         type: 'success',
-        message: formatMessage({ id: 'notification.success.saved', defaultMessage: 'Saved' }),
+        message: isCreating
+          ? formatMessage({
+              id: 'notification.success.tokencreated',
+              defaultMessage: 'API Token successfully created',
+            })
+          : formatMessage({
+              id: 'notification.success.tokenedited',
+              defaultMessage: 'API Token successfully edited',
+            }),
       });
 
       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);
 
-      toggleNotification({
-        type: 'warning',
-        message: get(err, 'response.data.message', 'notification.error'),
-      });
+      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();
     }
+  };
 
-    unlockApp();
+  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,
   };
 
+  const canEditInputs = (canUpdate && !isCreating) || (canCreate && isCreating);
   const isLoading = !isCreating && !apiToken && status !== 'success';
 
   if (isLoading) {
@@ -127,162 +256,51 @@ const ApiTokenCreateView = () => {
   }
 
   return (
-    <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>
+    <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>
   );
 };
 

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

@@ -0,0 +1,13 @@
+import { transformPermissionsData } from './utils';
+
+const init = (state, permissions = []) => {
+  return {
+    ...state,
+    selectedAction: null,
+    routes: [],
+    selectedActions: [],
+    data: transformPermissionsData(permissions),
+  };
+};
+
+export default init;

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

@@ -0,0 +1,72 @@
+/* eslint-disable consistent-return */
+import produce from 'immer';
+import { pull } from 'lodash';
+import { transformPermissionsData } from './utils';
+
+export const initialState = {
+  data: {},
+  selectedActions: [],
+};
+
+const reducer = (state, action) =>
+  produce(state, (draftState) => {
+    switch (action.type) {
+      case 'ON_CHANGE': {
+        if (draftState.selectedActions.includes(action.value)) {
+          pull(draftState.selectedActions, action.value);
+        } else {
+          draftState.selectedActions.push(action.value);
+        }
+        break;
+      }
+      case 'SELECT_ALL_IN_PERMISSION': {
+        const areAllSelected = action.value.every((item) =>
+          draftState.selectedActions.includes(item.actionId)
+        );
+
+        if (areAllSelected) {
+          action.value.forEach((item) => {
+            pull(draftState.selectedActions, item.actionId);
+          });
+        } else {
+          action.value.forEach((item) => {
+            draftState.selectedActions.push(item.actionId);
+          });
+        }
+        break;
+      }
+
+      case 'SELECT_ALL_ACTIONS': {
+        draftState.selectedActions = [...draftState.data.allActionsIds];
+
+        break;
+      }
+      case 'ON_CHANGE_READ_ONLY': {
+        const onlyReadOnlyActions = draftState.data.allActionsIds.filter(
+          (actionId) => actionId.includes('find') || actionId.includes('findOne')
+        );
+        draftState.selectedActions = [...onlyReadOnlyActions];
+        break;
+      }
+      case 'UPDATE_PERMISSIONS_LAYOUT': {
+        draftState.data = transformPermissionsData(action.value);
+        break;
+      }
+      case 'UPDATE_ROUTES': {
+        draftState.routes = { ...action.value };
+        break;
+      }
+      case 'UPDATE_PERMISSIONS': {
+        draftState.selectedActions = [...action.value];
+        break;
+      }
+      case 'SET_SELECTED_ACTION': {
+        draftState.selectedAction = action.value;
+        break;
+      }
+      default:
+        return draftState;
+    }
+  });
+
+export default reducer;

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

@@ -0,0 +1,16 @@
+import { addDays, format } from 'date-fns';
+import * as locales from 'date-fns/locale';
+
+const getDateOfExpiration = (createdAt, duration, language = 'en') => {
+  if (duration && typeof duration === 'number') {
+    const durationInDays = duration / 24 / 60 / 60 / 1000;
+
+    return format(addDays(new Date(createdAt), durationInDays), 'PPP', {
+      locale: locales[language],
+    });
+  }
+
+  return 'Unlimited';
+};
+
+export default getDateOfExpiration;

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

@@ -0,0 +1,5 @@
+import getDateOfExpiration from './getDateOfExpiration';
+import schema from './schema';
+import transformPermissionsData from './transformPermissionsData';
+
+export { getDateOfExpiration, schema, transformPermissionsData };

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

@@ -5,9 +5,10 @@ const schema = yup.object().shape({
   name: yup.string(translatedErrors.string).required(translatedErrors.required),
   type: yup
     .string(translatedErrors.string)
-    .oneOf(['read-only', 'full-access'])
+    .oneOf(['read-only', 'full-access', 'custom'])
     .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/EditView/utils/transformPermissionsData.js

@@ -0,0 +1,36 @@
+import { flatten } from 'lodash';
+
+const transformPermissionsData = (data) => {
+  const layout = {
+    allActionsIds: [],
+    permissions: [],
+  };
+
+  layout.permissions = Object.keys(data).map((apiId) => ({
+    apiId,
+    label: apiId.split('::')[1],
+    controllers: flatten(
+      Object.keys(data[apiId].controllers).map((controller) => ({
+        controller,
+        actions: flatten(
+          data[apiId].controllers[controller].map((action) => {
+            const actionId = `${apiId}.${controller}.${action}`;
+
+            if (apiId.includes('api::')) {
+              layout.allActionsIds.push(actionId);
+            }
+
+            return {
+              action,
+              actionId,
+            };
+          })
+        ),
+      }))
+    ),
+  }));
+
+  return layout;
+};
+
+export default transformPermissionsData;