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

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

@@ -1,80 +0,0 @@
-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/hooks/useRegenerate/index.js

@@ -1,34 +0,0 @@
-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/SettingsPage/pages/ApiTokens/EditView/components/ActionBoundRoutes/index.js

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

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

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

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

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

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