@strapi/admin 4.4.0-alpha.0 → 4.4.0-beta.1

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { useIntl } from 'react-intl';
+import { Typography } from '@strapi/design-system/Typography';
+import { Stack } from '@strapi/design-system/Stack';
+import { GridItem } from '@strapi/design-system/Grid';
+import BoundRoute from '../BoundRoute';
+import { useApiTokenPermissionsContext } from '../../../../../../../contexts/ApiTokenPermissions';
+
+const ActionBoundRoutes = () => {
+  const {
+    value: { selectedAction, routes },
+  } = useApiTokenPermissionsContext();
+  const { formatMessage } = useIntl();
+  const actionSection = selectedAction?.split('.')[0];
+
+  return (
+    <GridItem
+      col={5}
+      background="neutral150"
+      paddingTop={6}
+      paddingBottom={6}
+      paddingLeft={7}
+      paddingRight={7}
+      style={{ minHeight: '100%' }}
+    >
+      {selectedAction ? (
+        <Stack spacing={2}>
+          {routes[actionSection]?.map((route) => {
+            return route.config.auth?.scope?.includes(selectedAction) ||
+              route.handler === selectedAction ? (
+              <BoundRoute key={route.handler} route={route} />
+            ) : null;
+          })}
+        </Stack>
+      ) : (
+        <Stack spacing={2}>
+          <Typography variant="delta" as="h3">
+            {formatMessage({
+              id: 'Settings.apiTokens.createPage.permissions.header.title',
+              defaultMessage: 'Advanced settings',
+            })}
+          </Typography>
+          <Typography as="p" textColor="neutral600">
+            {formatMessage({
+              id: 'Settings.apiTokens.createPage.permissions.header.hint',
+              defaultMessage:
+                "Select the application's actions or the plugin's actions and click on the cog icon to display the bound route",
+            })}
+          </Typography>
+        </Stack>
+      )}
+    </GridItem>
+  );
+};
+
+export default ActionBoundRoutes;

package/admin/src/pages/SettingsPage/pages/ApiTokens/EditView/components/BoundRoute/getMethodColor.js

@@ -0,0 +1,41 @@
+const getMethodColor = (verb) => {
+  switch (verb) {
+    case 'POST': {
+      return {
+        text: 'success600',
+        border: 'success200',
+        background: 'success100',
+      };
+    }
+    case 'GET': {
+      return {
+        text: 'secondary600',
+        border: 'secondary200',
+        background: 'secondary100',
+      };
+    }
+    case 'PUT': {
+      return {
+        text: 'warning600',
+        border: 'warning200',
+        background: 'warning100',
+      };
+    }
+    case 'DELETE': {
+      return {
+        text: 'danger600',
+        border: 'danger200',
+        background: 'danger100',
+      };
+    }
+    default: {
+      return {
+        text: 'neutral600',
+        border: 'neutral200',
+        background: 'neutral100',
+      };
+    }
+  }
+};
+
+export default getMethodColor;

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

@@ -0,0 +1,72 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Stack } from '@strapi/design-system/Stack';
+import { Box } from '@strapi/design-system/Box';
+import { Typography } from '@strapi/design-system/Typography';
+import map from 'lodash/map';
+import tail from 'lodash/tail';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import getMethodColor from './getMethodColor';
+
+const MethodBox = styled(Box)`
+  margin: -1px;
+  border-radius: ${({ theme }) => theme.spaces[1]} 0 0 ${({ theme }) => theme.spaces[1]};
+`;
+
+function BoundRoute({ route }) {
+  const { formatMessage } = useIntl();
+
+  const { method, handler: title, path } = route;
+  const formattedRoute = path ? tail(path.split('/')) : [];
+  const [controller = '', action = ''] = title ? title.split('.') : [];
+  const colors = getMethodColor(route.method);
+
+  return (
+    <Stack spacing={2}>
+      <Typography variant="delta" as="h3">
+        {formatMessage({
+          id: 'Settings.apiTokens.createPage.BoundRoute.title',
+          defaultMessage: 'Bound route to',
+        })}
+        &nbsp;
+        <span>{controller}</span>
+        <Typography variant="delta" textColor="primary600">
+          .{action}
+        </Typography>
+      </Typography>
+      <Stack horizontal hasRadius background="neutral0" borderColor="neutral200" spacing={0}>
+        <MethodBox background={colors.background} borderColor={colors.border} padding={2}>
+          <Typography fontWeight="bold" textColor={colors.text}>
+            {method}
+          </Typography>
+        </MethodBox>
+        <Box paddingLeft={2} paddingRight={2}>
+          {map(formattedRoute, (value) => (
+            <Typography key={value} textColor={value.includes(':') ? 'neutral600' : 'neutral900'}>
+              /{value}
+            </Typography>
+          ))}
+        </Box>
+      </Stack>
+    </Stack>
+  );
+}
+
+BoundRoute.defaultProps = {
+  route: {
+    handler: 'Nocontroller.error',
+    method: 'GET',
+    path: '/there-is-no-path',
+  },
+};
+
+BoundRoute.propTypes = {
+  route: PropTypes.shape({
+    handler: PropTypes.string,
+    method: PropTypes.string,
+    path: PropTypes.string,
+  }),
+};
+
+export default BoundRoute;

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

@@ -0,0 +1,30 @@
+import styled, { css } from 'styled-components';
+import { Box } from '@strapi/design-system/Box';
+
+const activeCheckboxWrapperStyles = css`
+  background: ${(props) => props.theme.colors.primary100};
+  svg {
+    opacity: 1;
+  }
+`;
+
+const CheckboxWrapper = styled(Box)`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  svg {
+    opacity: 0;
+    path {
+      fill: ${(props) => props.theme.colors.primary600};
+    }
+  }
+
+  /* Show active style both on hover and when the action is selected */
+  ${(props) => props.isActive && activeCheckboxWrapperStyles}
+  &:hover {
+    ${activeCheckboxWrapperStyles}
+  }
+`;
+
+export default CheckboxWrapper;

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/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);

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

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