@strapi/admin 4.5.0-alpha.0 → 4.5.0

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

@@ -0,0 +1,150 @@
+import React, { useState, useEffect } from 'react';
+import { capitalize } from 'lodash';
+import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
+import { Checkbox } from '@strapi/design-system/Checkbox';
+import { Grid, GridItem } from '@strapi/design-system/Grid';
+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';
+
+const Border = styled.div`
+  flex: 1;
+  align-self: center;
+  border-top: 1px solid ${({ theme }) => theme.colors.neutral150};
+`;
+
+const CollapsableContentType = ({
+  controllers,
+  label,
+  orderNumber,
+  disabled,
+  onExpanded,
+  indexExpandendCollapsedContent,
+}) => {
+  const {
+    value: { onChangeSelectAll, onChange, selectedActions, setSelectedAction, selectedAction },
+  } = useApiTokenPermissionsContext();
+  const [expanded, setExpanded] = useState(false);
+
+  const handleExpandedAccordion = () => {
+    setExpanded((s) => !s);
+    onExpanded(orderNumber);
+  };
+
+  useEffect(() => {
+    if (
+      indexExpandendCollapsedContent !== null &&
+      indexExpandendCollapsedContent !== orderNumber &&
+      expanded
+    ) {
+      setExpanded(false);
+    }
+  }, [indexExpandendCollapsedContent, orderNumber, expanded]);
+
+  const isActionSelected = (actionId) => actionId === selectedAction;
+
+  return (
+    <Accordion
+      expanded={expanded}
+      onToggle={handleExpandedAccordion}
+      variant={orderNumber % 2 ? 'primary' : 'secondary'}
+    >
+      <AccordionToggle title={capitalize(label)} />
+      <AccordionContent>
+        {controllers?.map((controller) => {
+          const allActionsSelected = controller.actions.every((action) =>
+            selectedActions.includes(action.actionId)
+          );
+
+          const someActionsSelected = controller.actions.some((action) =>
+            selectedActions.includes(action.actionId)
+          );
+
+          return (
+            <Box key={`${label}.${controller?.controller}`}>
+              <Flex justifyContent="space-between" alignItems="center" padding={4}>
+                <Box paddingRight={4}>
+                  <Typography variant="sigma" textColor="neutral600">
+                    {controller?.controller}
+                  </Typography>
+                </Box>
+                <Border />
+                <Box paddingLeft={4}>
+                  <Checkbox
+                    value={allActionsSelected}
+                    indeterminate={!allActionsSelected && someActionsSelected}
+                    onValueChange={() => {
+                      onChangeSelectAll({ target: { value: [...controller.actions] } });
+                    }}
+                    disabled={disabled}
+                  >
+                    Select all
+                  </Checkbox>
+                </Box>
+              </Flex>
+              <Grid gap={4} padding={4}>
+                {controller?.actions &&
+                  controller?.actions.map((action) => {
+                    return (
+                      <GridItem col={6} key={action.actionId}>
+                        <CheckboxWrapper
+                          isActive={isActionSelected(action.actionId)}
+                          padding={2}
+                          hasRadius
+                        >
+                          <Checkbox
+                            value={selectedActions.includes(action.actionId)}
+                            name={action.actionId}
+                            onValueChange={() => {
+                              onChange({ target: { value: action.actionId } });
+                            }}
+                            disabled={disabled}
+                          >
+                            {action.action}
+                          </Checkbox>
+                          <button
+                            type="button"
+                            data-testid="action-cog"
+                            onClick={() =>
+                              setSelectedAction({ target: { value: action.actionId } })
+                            }
+                            style={{ display: 'inline-flex', alignItems: 'center' }}
+                          >
+                            <CogIcon />
+                          </button>
+                        </CheckboxWrapper>
+                      </GridItem>
+                    );
+                  })}
+              </Grid>
+            </Box>
+          );
+        })}
+      </AccordionContent>
+    </Accordion>
+  );
+};
+
+CollapsableContentType.defaultProps = {
+  controllers: [],
+  orderNumber: 0,
+  disabled: false,
+  onExpanded: () => null,
+  indexExpandendCollapsedContent: null,
+};
+
+CollapsableContentType.propTypes = {
+  controllers: PropTypes.array,
+  orderNumber: PropTypes.number,
+  label: PropTypes.string.isRequired,
+  disabled: PropTypes.bool,
+  onExpanded: PropTypes.func,
+  indexExpandendCollapsedContent: PropTypes.number,
+};
+
+export default CollapsableContentType;

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

@@ -0,0 +1,37 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import { Box } from '@strapi/design-system/Box';
+import CollapsableContentType from '../CollapsableContentType';
+
+const ContentTypesSection = ({ section, ...props }) => {
+  const [indexExpandedCollpsedContent, setIndexExpandedCollpsedContent] = useState(null);
+  const handleExpandedCollpsedContentIndex = (index) => setIndexExpandedCollpsedContent(index);
+
+  return (
+    <Box padding={4} background="neutral0">
+      {section &&
+        section.map((api, index) => (
+          <CollapsableContentType
+            key={api.apiId}
+            label={api.label}
+            controllers={api.controllers}
+            orderNumber={index}
+            indexExpandendCollapsedContent={indexExpandedCollpsedContent}
+            onExpanded={handleExpandedCollpsedContentIndex}
+            name={api.apiId}
+            {...props}
+          />
+        ))}
+    </Box>
+  );
+};
+
+ContentTypesSection.defaultProps = {
+  section: null,
+};
+
+ContentTypesSection.propTypes = {
+  section: PropTypes.arrayOf(PropTypes.object),
+};
+
+export default ContentTypesSection;

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

@@ -0,0 +1,255 @@
+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 !== 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}>
+            <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.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.string,
+    lifespan: PropTypes.number,
+    name: PropTypes.string,
+    accessKey: PropTypes.string,
+    permissions: PropTypes.array,
+    description: PropTypes.string,
+    createdAt: PropTypes.string,
+  }),
+  onDispatch: PropTypes.func.isRequired,
+  setHasChangedPermissions: PropTypes.func.isRequired,
+};
+
+FormApiTokenContainer.defaultProps = {
+  errors: {},
+  apiToken: {},
+};
+
+export default FormApiTokenContainer;

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.number,
+    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/pages/ApiTokens/EditView/components/FormHead/index.js

@@ -0,0 +1,89 @@
+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.oneOfType([PropTypes.number, PropTypes.string]),
+    type: PropTypes.string,
+    lifespan: PropTypes.number,
+    name: PropTypes.string,
+    accessKey: PropTypes.string,
+    permissions: PropTypes.array,
+    description: PropTypes.string,
+    createdAt: PropTypes.string,
+  }),
+  canEditInputs: PropTypes.bool.isRequired,
+  canRegenerate: PropTypes.bool.isRequired,
+  setApiToken: PropTypes.func.isRequired,
+  isSubmitting: PropTypes.bool.isRequired,
+};
+
+FormHead.defaultProps = {
+  apiToken: undefined,
+};
+
+export default FormHead;

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

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