@strapi/admin 4.5.0-alpha.0 → 4.5.0-beta.0

package/admin/src/core/apis/CustomFields.js

@@ -0,0 +1,80 @@
+import invariant from 'invariant';
+
+const ALLOWED_TYPES = [
+  'biginteger',
+  'boolean',
+  'date',
+  'datetime',
+  'decimal',
+  'email',
+  'enumeration',
+  'float',
+  'integer',
+  'json',
+  'password',
+  'richtext',
+  'string',
+  'text',
+  'time',
+  'timestamp',
+  'uid',
+];
+
+class CustomFields {
+  constructor() {
+    this.customFields = {};
+  }
+
+  register(customFields) {
+    if (Array.isArray(customFields)) {
+      // If several custom fields are passed, register them one by one
+      customFields.forEach((customField) => {
+        this.register(customField);
+      });
+    } else {
+      // Handle individual custom field
+      const { name, pluginId, type, intlLabel, intlDescription, components } = customFields;
+
+      // Ensure required attributes are provided
+      invariant(name, 'A name must be provided');
+      invariant(type, 'A type must be provided');
+      invariant(intlLabel, 'An intlLabel must be provided');
+      invariant(intlDescription, 'An intlDescription must be provided');
+      invariant(components, 'A components object must be provided');
+      invariant(components.Input, 'An Input component must be provided');
+
+      // Ensure the type is valid
+      invariant(
+        ALLOWED_TYPES.includes(type),
+        `Custom field type: '${type}' is not a valid Strapi type or it can't be used with a Custom Field`
+      );
+
+      // Ensure name has no special characters
+      const isValidObjectKey = /^(?![0-9])[a-zA-Z0-9$_-]+$/g;
+      invariant(
+        isValidObjectKey.test(name),
+        `Custom field name: '${name}' is not a valid object key`
+      );
+
+      // When no plugin is specified, default to the global namespace
+      const uid = pluginId ? `plugin::${pluginId}.${name}` : `global::${name}`;
+
+      // Ensure the uid is unique
+      const uidAlreadyUsed = Object.prototype.hasOwnProperty.call(this.customFields, uid);
+      invariant(!uidAlreadyUsed, `Custom field: '${uid}' has already been registered`);
+
+      this.customFields[uid] = customFields;
+    }
+  }
+
+  getAll() {
+    return this.customFields;
+  }
+
+  get(uid) {
+    return this.customFields[uid];
+  }
+}
+
+// Export an instance since it's a singleton
+export default new CustomFields();

package/admin/src/core/apis/index.js

@@ -3,3 +3,4 @@ export { default as Components } from './Components';
 export { default as Middlewares } from './Middlewares';
 export { default as Plugin } from './Plugin';
 export { default as Reducers } from './Reducers';
+export { default as customFields } from './CustomFields';

package/admin/src/hooks/index.js

@@ -9,3 +9,4 @@ export { default as useSettingsForm } from './useSettingsForm';
 export { default as usePermissionsDataManager } from './usePermissionsDataManager';
 export { default as useReleaseNotification } from './useReleaseNotification';
 export { default as useThemeToggle } from './useThemeToggle';
+export { default as useRegenerate } from './useRegenerate';

package/admin/src/hooks/useRegenerate/index.js

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import { get } from 'lodash';
+import { useNotification } from '@strapi/helper-plugin';
+import { axiosInstance } from '../../core/utils';
+
+const useRegenerate = (id, onRegenerate) => {
+  const [isLoadingConfirmation, setIsLoadingConfirmation] = useState(false);
+  const toggleNotification = useNotification();
+
+  const regenerateData = async () => {
+    try {
+      const {
+        data: {
+          data: { accessKey },
+        },
+      } = await axiosInstance.post(`/admin/api-tokens/${id}/regenerate`);
+      setIsLoadingConfirmation(false);
+      onRegenerate(accessKey);
+    } catch (error) {
+      setIsLoadingConfirmation(false);
+      toggleNotification({
+        type: 'warning',
+        message: get(error, 'response.data.message', 'notification.error'),
+      });
+    }
+  };
+
+  return {
+    regenerateData,
+    isLoadingConfirmation,
+  };
+};
+
+export default useRegenerate;

package/admin/src/pages/HomePage/SocialLinks.js

@@ -79,7 +79,7 @@ const socialLinks = [
   },
   {
     name: 'Discord',
-    link: 'https://slack.strapi.io/',
+    link: 'https://discord.strapi.io/',
     icon: <StyledDiscord />,
     alt: 'discord',
   },

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;