@strapi/admin 4.4.0-beta.1 → 4.4.0-beta.3

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;

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,55 +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_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;

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/DefaultButton/index.js

@@ -1,63 +0,0 @@
-import React from 'react';
-import { useIntl } from 'react-intl';
-import PropTypes from 'prop-types';
-import { Link } from '@strapi/helper-plugin';
-import { useHistory } from 'react-router-dom';
-import styled from 'styled-components';
-
-const MESSAGES_MAP = {
-  edit: {
-    id: 'app.component.table.edit',
-    defaultMessage: 'Edit {target}',
-  },
-  read: {
-    id: 'app.component.table.read',
-    defaultMessage: 'Read {target}',
-  },
-};
-
-const LinkStyled = styled(Link)`
-  svg {
-    path {
-      fill: ${({ theme }) => theme.colors.neutral500};
-    }
-  }
-
-  &:hover,
-  &:focus {
-    svg {
-      path {
-        fill: ${({ theme }) => theme.colors.neutral800};
-      }
-    }
-  }
-`;
-
-const DefaultButton = ({ tokenName, tokenId, buttonType, children }) => {
-  const { formatMessage } = useIntl();
-  const {
-    location: { pathname },
-  } = useHistory();
-
-  return (
-    <LinkStyled
-      to={`${pathname}/${tokenId}`}
-      title={formatMessage(MESSAGES_MAP[buttonType], { target: tokenName })}
-    >
-      {children}
-    </LinkStyled>
-  );
-};
-
-DefaultButton.propTypes = {
-  tokenName: PropTypes.string.isRequired,
-  tokenId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-  buttonType: PropTypes.string,
-  children: PropTypes.node.isRequired,
-};
-
-DefaultButton.defaultProps = {
-  buttonType: 'edit',
-};
-
-export default DefaultButton;

package/admin/src/pages/SettingsPage/pages/ApiTokens/ListView/DynamicTable/ReadButton/index.js

@@ -1,19 +0,0 @@
-import React from 'react';
-import Eye from '@strapi/icons/Eye';
-import PropTypes from 'prop-types';
-import DefaultButton from '../DefaultButton';
-
-const ReadButton = ({ tokenName, tokenId }) => {
-  return (
-    <DefaultButton tokenName={tokenName} tokenId={tokenId} buttonType="read">
-      <Eye />
-    </DefaultButton>
-  );
-};
-
-ReadButton.propTypes = {
-  tokenName: PropTypes.string.isRequired,
-  tokenId: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
-};
-
-export default ReadButton;