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

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

@@ -1,254 +0,0 @@
-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';
-
-const FormApiTokenContainer = ({
-  errors,
-  onChange,
-  canEditInputs,
-  isCreating,
-  values,
-  apiToken,
-  onDispatch,
-  setHasChangedPermissions,
-}) => {
-  const { formatMessage } = useIntl();
-  const [lang] = usePersistentState('strapi-admin-language', 'en');
-
-  const handleChangeSelectApiTokenType = ({ target: { value } }) => {
-    setHasChangedPermissions(false);
-
-    if (value === 'full-access') {
-      onDispatch({
-        type: 'SELECT_ALL_ACTIONS',
-      });
-    }
-    if (value === 'read-only') {
-      onDispatch({
-        type: 'ON_CHANGE_READ_ONLY',
-      });
-    }
-  };
-
-  return (
-    <Box
-      background="neutral0"
-      hasRadius
-      shadow="filterShadow"
-      paddingTop={6}
-      paddingBottom={6}
-      paddingLeft={7}
-      paddingRight={7}
-    >
-      <Stack spacing={4}>
-        <Typography variant="delta" as="h2">
-          {formatMessage({
-            id: 'global.details',
-            defaultMessage: 'Details',
-          })}
-        </Typography>
-        <Grid gap={5}>
-          <GridItem key="name" col={6} xs={12}>
-            <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}>
-            <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}>
-            <Select
-              name="lifespan"
-              label={formatMessage({
-                id: 'Settings.apiTokens.form.duration',
-                defaultMessage: 'Token duration',
-              })}
-              value={values.lifespan}
-              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={null}>
-                {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}>
-            <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 } });
-              }}
-              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>
-    </Box>
-  );
-};
-
-FormApiTokenContainer.propTypes = {
-  errors: PropTypes.shape({
-    name: PropTypes.string,
-    description: PropTypes.string,
-    lifespan: PropTypes.string,
-    type: PropTypes.string,
-  }),
-  onChange: PropTypes.func.isRequired,
-  canEditInputs: PropTypes.bool.isRequired,
-  values: PropTypes.shape({
-    name: PropTypes.string,
-    description: PropTypes.string,
-    lifespan: PropTypes.string,
-    type: PropTypes.string,
-  }).isRequired,
-  isCreating: PropTypes.bool.isRequired,
-  apiToken: PropTypes.shape({
-    id: PropTypes.string,
-    type: PropTypes.string,
-    lifespan: PropTypes.number,
-    name: PropTypes.string,
-    accessKey: PropTypes.string,
-    permissions: PropTypes.array,
-    description: PropTypes.string,
-    createdAt: PropTypes.string,
-  }).isRequired,
-  onDispatch: PropTypes.func.isRequired,
-  setHasChangedPermissions: PropTypes.func.isRequired,
-};
-
-FormApiTokenContainer.defaultProps = {
-  errors: {},
-};
-
-export default FormApiTokenContainer;

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

@@ -1,77 +0,0 @@
-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.string,
-    type: PropTypes.string,
-    lifespan: PropTypes.number,
-    name: PropTypes.string,
-    accessKey: PropTypes.string,
-    permissions: PropTypes.array,
-    description: PropTypes.string,
-    createdAt: PropTypes.string,
-  }).isRequired,
-  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: {},
-};
-
-export default FormBody;

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

@@ -1,85 +0,0 @@
-import React from 'react';
-import { useIntl } from 'react-intl';
-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';
-import { HeaderLayout } from '@strapi/design-system/Layout';
-import { Stack } from '@strapi/design-system/Stack';
-import Regenerate from '../Regenerate';
-
-const FormHead = ({ apiToken, setApiToken, canEditInputs, canRegenerate, isSubmitting }) => {
-  const { formatMessage } = useIntl();
-  const handleRegenerate = (newKey) => {
-    setApiToken({
-      ...apiToken,
-      accessKey: newKey,
-    });
-  };
-
-  return (
-    <HeaderLayout
-      title={
-        apiToken?.name ||
-        formatMessage({
-          id: 'Settings.apiTokens.createPage.title',
-          defaultMessage: 'Create API Token',
-        })
-      }
-      primaryAction={
-        canEditInputs ? (
-          <Stack horizontal spacing={2}>
-            {canRegenerate && apiToken?.id && (
-              <Regenerate onRegenerate={handleRegenerate} idToRegenerate={apiToken?.id} />
-            )}
-            <Button
-              disabled={isSubmitting}
-              loading={isSubmitting}
-              startIcon={<Check />}
-              type="submit"
-              size="S"
-            >
-              {formatMessage({
-                id: 'global.save',
-                defaultMessage: 'Save',
-              })}
-            </Button>
-          </Stack>
-        ) : (
-          canRegenerate &&
-          apiToken?.id && (
-            <Regenerate onRegenerate={handleRegenerate} idToRegenerate={apiToken?.id} />
-          )
-        )
-      }
-      navigationAction={
-        <Link startIcon={<ArrowLeft />} to="/settings/api-tokens">
-          {formatMessage({
-            id: 'global.back',
-            defaultMessage: 'Back',
-          })}
-        </Link>
-      }
-    />
-  );
-};
-
-FormHead.propTypes = {
-  apiToken: PropTypes.shape({
-    id: PropTypes.string,
-    type: PropTypes.string,
-    lifespan: PropTypes.number,
-    name: PropTypes.string,
-    accessKey: PropTypes.string,
-    permissions: PropTypes.array,
-    description: PropTypes.string,
-    createdAt: PropTypes.string,
-  }).isRequired,
-  canEditInputs: PropTypes.bool.isRequired,
-  canRegenerate: PropTypes.bool.isRequired,
-  setApiToken: PropTypes.func.isRequired,
-  isSubmitting: PropTypes.bool.isRequired,
-};
-
-export default FormHead;

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

@@ -1,40 +0,0 @@
-import React, { memo } from 'react';
-import { useIntl } from 'react-intl';
-import { Typography } from '@strapi/design-system/Typography';
-import { Stack } from '@strapi/design-system/Stack';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import ContentTypesSection from '../ContenTypesSection';
-import ActionBoundRoutes from '../ActionBoundRoutes';
-import { useApiTokenPermissionsContext } from '../../../../../../../contexts/ApiTokenPermissions';
-
-const Permissions = ({ ...props }) => {
-  const {
-    value: { data },
-  } = useApiTokenPermissionsContext();
-  const { formatMessage } = useIntl();
-
-  return (
-    <Grid gap={0} shadow="filterShadow" hasRadius background="neutral0">
-      <GridItem col={7} paddingTop={6} paddingBottom={6} paddingLeft={7} paddingRight={7}>
-        <Stack spacing={2}>
-          <Typography variant="delta" as="h2">
-            {formatMessage({
-              id: 'Settings.apiTokens.createPage.permissions.title',
-              defaultMessage: 'Permissions',
-            })}
-          </Typography>
-          <Typography as="p" textColor="neutral600">
-            {formatMessage({
-              id: 'Settings.apiTokens.createPage.permissions.description',
-              defaultMessage: 'Only actions bound by a route are listed below.',
-            })}
-          </Typography>
-        </Stack>
-        {data?.permissions && <ContentTypesSection section={data?.permissions} {...props} />}
-      </GridItem>
-      <ActionBoundRoutes />
-    </Grid>
-  );
-};
-
-export default memo(Permissions);

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

@@ -1,68 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { Button } from '@strapi/design-system/Button';
-import Refresh from '@strapi/icons/Refresh';
-import { ConfirmDialog } from '@strapi/helper-plugin';
-import { useRegenerate } from '../../../../../../../hooks';
-
-export const Regenerate = ({ onRegenerate, idToRegenerate }) => {
-  const { formatMessage } = useIntl();
-  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
-  const { regenerateData, isLoadingConfirmation } = useRegenerate(idToRegenerate, onRegenerate);
-  const handleConfirmRegeneration = async () => {
-    regenerateData();
-    setShowConfirmDialog(false);
-  };
-
-  return (
-    <>
-      <Button
-        startIcon={<Refresh />}
-        type="button"
-        size="S"
-        variant="tertiary"
-        onClick={() => setShowConfirmDialog(true)}
-        name="regenerate"
-      >
-        {formatMessage({
-          id: 'Settings.apiTokens.regenerate',
-          defaultMessage: 'Regenerate',
-        })}
-      </Button>
-
-      <ConfirmDialog
-        bodyText={{
-          id: 'Settings.apiTokens.popUpWarning.message',
-          defaultMessage: 'Are you sure you want to regenerate this token?',
-        }}
-        iconRightButton={<Refresh />}
-        isConfirmButtonLoading={isLoadingConfirmation}
-        isOpen={showConfirmDialog}
-        onToggleDialog={() => setShowConfirmDialog(false)}
-        onConfirm={handleConfirmRegeneration}
-        leftButtonText={{
-          id: 'Settings.apiTokens.Button.cancel',
-          defaultMessage: 'Cancel',
-        }}
-        rightButtonText={{
-          id: 'Settings.apiTokens.Button.regenerate',
-          defaultMessage: 'Regenerate',
-        }}
-        title={{
-          id: 'Settings.apiTokens.RegenerateDialog.title',
-          defaultMessage: 'Regenerate token',
-        }}
-      />
-    </>
-  );
-};
-
-Regenerate.defaultProps = { onRegenerate() {} };
-
-Regenerate.propTypes = {
-  onRegenerate: PropTypes.func,
-  idToRegenerate: PropTypes.string.isRequired,
-};
-
-export default Regenerate;

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

@@ -1,13 +0,0 @@
-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

@@ -1,72 +0,0 @@
-/* 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

@@ -1,16 +0,0 @@
-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

@@ -1,5 +0,0 @@
-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/transformPermissionsData.js

@@ -1,36 +0,0 @@
-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;