@strapi/admin 4.15.0-alpha.0 → 4.15.1

package/admin/src/pages/SettingsPage/components/Tokens/FormHead/index.js

@@ -1,110 +0,0 @@
-import React from 'react';
-
-import { Button, Flex, HeaderLayout } from '@strapi/design-system';
-import { Link } from '@strapi/helper-plugin';
-import { ArrowLeft, Check } from '@strapi/icons';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-
-import Regenerate from '../Regenerate';
-
-const FormHead = ({
-  title,
-  token,
-  setToken,
-  canEditInputs,
-  canRegenerate,
-  isSubmitting,
-  backUrl,
-  regenerateUrl,
-  onErrorRegenerate,
-}) => {
-  const { formatMessage } = useIntl();
-  const handleRegenerate = (newKey) => {
-    setToken({
-      ...token,
-      accessKey: newKey,
-    });
-  };
-
-  return (
-    <HeaderLayout
-      title={token?.name || formatMessage(title)}
-      primaryAction={
-        canEditInputs ? (
-          <Flex gap={2}>
-            {canRegenerate && token?.id && (
-              <Regenerate
-                backUrl={regenerateUrl}
-                onRegenerate={handleRegenerate}
-                idToRegenerate={token?.id}
-                onError={onErrorRegenerate}
-              />
-            )}
-            <Button
-              disabled={isSubmitting}
-              loading={isSubmitting}
-              startIcon={<Check />}
-              type="submit"
-              size="S"
-            >
-              {formatMessage({
-                id: 'global.save',
-                defaultMessage: 'Save',
-              })}
-            </Button>
-          </Flex>
-        ) : (
-          canRegenerate &&
-          token?.id && (
-            <Regenerate
-              onRegenerate={handleRegenerate}
-              idToRegenerate={token?.id}
-              backUrl={regenerateUrl}
-            />
-          )
-        )
-      }
-      navigationAction={
-        <Link startIcon={<ArrowLeft />} to={backUrl}>
-          {formatMessage({
-            id: 'global.back',
-            defaultMessage: 'Back',
-          })}
-        </Link>
-      }
-      ellipsis
-    />
-  );
-};
-
-FormHead.propTypes = {
-  token: PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.string,
-    lifespan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    name: PropTypes.string,
-    accessKey: PropTypes.string,
-    permissions: PropTypes.array,
-    description: PropTypes.string,
-    createdAt: PropTypes.string,
-  }),
-  canEditInputs: PropTypes.bool.isRequired,
-  canRegenerate: PropTypes.bool.isRequired,
-  setToken: PropTypes.func.isRequired,
-  isSubmitting: PropTypes.bool.isRequired,
-  backUrl: PropTypes.string.isRequired,
-  title: PropTypes.shape({
-    id: PropTypes.string,
-    label: PropTypes.string,
-  }).isRequired,
-  regenerateUrl: PropTypes.string.isRequired,
-  onErrorRegenerate: PropTypes.func,
-};
-
-FormHead.defaultProps = {
-  token: undefined,
-  onErrorRegenerate: undefined,
-};
-
-export default FormHead;

package/admin/src/pages/SettingsPage/components/Tokens/LifeSpanInput/index.js

@@ -1,99 +0,0 @@
-import React from 'react';
-
-import { Option, Select, Typography } from '@strapi/design-system';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-
-import { getDateOfExpiration } from '../../../pages/ApiTokens/EditView/utils';
-
-const LifeSpanInput = ({ token, errors, values, onChange, isCreating }) => {
-  const { formatMessage } = useIntl();
-
-  return (
-    <>
-      <Select
-        name="lifespan"
-        label={formatMessage({
-          id: 'Settings.tokens.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.tokens.duration.7-days',
-            defaultMessage: '7 days',
-          })}
-        </Option>
-        <Option value="2592000000">
-          {formatMessage({
-            id: 'Settings.tokens.duration.30-days',
-            defaultMessage: '30 days',
-          })}
-        </Option>
-        <Option value="7776000000">
-          {formatMessage({
-            id: 'Settings.tokens.duration.90-days',
-            defaultMessage: '90 days',
-          })}
-        </Option>
-        <Option value="0">
-          {formatMessage({
-            id: 'Settings.tokens.duration.unlimited',
-            defaultMessage: 'Unlimited',
-          })}
-        </Option>
-      </Select>
-      <Typography variant="pi" textColor="neutral600">
-        {!isCreating &&
-          `${formatMessage({
-            id: 'Settings.tokens.duration.expiration-date',
-            defaultMessage: 'Expiration date',
-          })}: ${getDateOfExpiration(token?.createdAt, parseInt(values.lifespan, 10))}`}
-      </Typography>
-    </>
-  );
-};
-
-LifeSpanInput.propTypes = {
-  errors: PropTypes.shape({
-    lifespan: PropTypes.string,
-  }),
-  onChange: PropTypes.func.isRequired,
-  values: PropTypes.shape({
-    lifespan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  }).isRequired,
-  isCreating: PropTypes.bool.isRequired,
-  token: PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    type: PropTypes.string,
-    lifespan: PropTypes.string,
-    name: PropTypes.string,
-    accessKey: PropTypes.string,
-    permissions: PropTypes.array,
-    description: PropTypes.string,
-    createdAt: PropTypes.string,
-  }),
-};
-
-LifeSpanInput.defaultProps = {
-  errors: {},
-  token: {},
-};
-
-export default LifeSpanInput;

package/admin/src/pages/SettingsPage/components/Tokens/Regenerate/index.js

@@ -1,77 +0,0 @@
-import React, { useState } from 'react';
-
-import { Button } from '@strapi/design-system';
-import { ConfirmDialog } from '@strapi/helper-plugin';
-import { Refresh } from '@strapi/icons';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-
-import { useRegenerate } from '../../../../../hooks';
-
-export const Regenerate = ({ onRegenerate, idToRegenerate, backUrl, onError }) => {
-  const { formatMessage } = useIntl();
-  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
-  const { regenerateData, isLoadingConfirmation } = useRegenerate(
-    backUrl,
-    idToRegenerate,
-    onRegenerate,
-    onError
-  );
-  const handleConfirmRegeneration = async () => {
-    regenerateData();
-    setShowConfirmDialog(false);
-  };
-
-  return (
-    <>
-      <Button
-        startIcon={<Refresh />}
-        type="button"
-        size="S"
-        variant="tertiary"
-        onClick={() => setShowConfirmDialog(true)}
-        name="regenerate"
-      >
-        {formatMessage({
-          id: 'Settings.tokens.regenerate',
-          defaultMessage: 'Regenerate',
-        })}
-      </Button>
-
-      <ConfirmDialog
-        bodyText={{
-          id: 'Settings.tokens.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.tokens.Button.cancel',
-          defaultMessage: 'Cancel',
-        }}
-        rightButtonText={{
-          id: 'Settings.tokens.Button.regenerate',
-          defaultMessage: 'Regenerate',
-        }}
-        title={{
-          id: 'Settings.tokens.RegenerateDialog.title',
-          defaultMessage: 'Regenerate token',
-        }}
-      />
-    </>
-  );
-};
-
-Regenerate.defaultProps = { onRegenerate() {}, onError: undefined };
-
-Regenerate.propTypes = {
-  onRegenerate: PropTypes.func,
-  idToRegenerate: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
-  backUrl: PropTypes.string.isRequired,
-  onError: PropTypes.func,
-};
-
-export default Regenerate;

package/admin/src/pages/SettingsPage/components/Tokens/Table/DefaultButton/index.js

@@ -1,64 +0,0 @@
-import React from 'react';
-
-import { Link } from '@strapi/helper-plugin';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-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/components/Tokens/Table/DeleteButton/index.js

@@ -1,53 +0,0 @@
-import React, { useState } from 'react';
-
-import { Box, IconButton } from '@strapi/design-system';
-import { ConfirmDialog, useTracking } from '@strapi/helper-plugin';
-import { Trash } from '@strapi/icons';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-
-const DeleteButton = ({ tokenName, onClickDelete, tokenType }) => {
-  const { formatMessage } = useIntl();
-  const { trackUsage } = useTracking();
-  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
-  const handleClickDelete = () => {
-    setShowConfirmDialog(false);
-    trackUsage('willDeleteToken', {
-      tokenType,
-    });
-    onClickDelete();
-  };
-
-  return (
-    <Box paddingLeft={1} onClick={(e) => e.stopPropagation()}>
-      <IconButton
-        onClick={() => {
-          setShowConfirmDialog(true);
-        }}
-        label={formatMessage(
-          {
-            id: 'global.delete-target',
-            defaultMessage: 'Delete {target}',
-          },
-          { target: `${tokenName}` }
-        )}
-        name="delete"
-        noBorder
-        icon={<Trash />}
-      />
-      <ConfirmDialog
-        onToggleDialog={() => setShowConfirmDialog(false)}
-        onConfirm={handleClickDelete}
-        isOpen={showConfirmDialog}
-      />
-    </Box>
-  );
-};
-
-DeleteButton.propTypes = {
-  tokenName: PropTypes.string.isRequired,
-  onClickDelete: PropTypes.func.isRequired,
-  tokenType: PropTypes.string.isRequired,
-};
-
-export default DeleteButton;

package/admin/src/pages/SettingsPage/components/Tokens/Table/ReadButton/index.js

@@ -1,21 +0,0 @@
-import React from 'react';
-
-import { Eye } from '@strapi/icons';
-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;

package/admin/src/pages/SettingsPage/components/Tokens/Table/UpdateButton/index.js

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

package/admin/src/pages/SettingsPage/components/Tokens/Table/index.js

@@ -1,161 +0,0 @@
-import React from 'react';
-
-import { Flex, Tbody, Td, Tr, Typography } from '@strapi/design-system';
-import {
-  DynamicTable,
-  onRowClick,
-  pxToRem,
-  RelativeTime,
-  useQueryParams,
-  useTracking,
-} from '@strapi/helper-plugin';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-import { useHistory } from 'react-router-dom';
-
-import DeleteButton from './DeleteButton';
-import ReadButton from './ReadButton';
-import UpdateButton from './UpdateButton';
-
-const Table = ({
-  permissions,
-  headers,
-  contentType,
-  isLoading,
-  tokens,
-  onConfirmDelete,
-  tokenType,
-}) => {
-  const { canDelete, canUpdate, canRead } = permissions;
-  const withBulkActions = canDelete || canUpdate || canRead;
-  const [{ query }] = useQueryParams();
-  const { formatMessage } = useIntl();
-  const [, sortOrder] = query ? query.sort.split(':') : 'ASC';
-  const {
-    push,
-    location: { pathname },
-  } = useHistory();
-  const { trackUsage } = useTracking();
-
-  const sortedTokens = tokens.sort((a, b) => {
-    const comparison = a.name.localeCompare(b.name);
-
-    return sortOrder === 'DESC' ? -comparison : comparison;
-  });
-
-  return (
-    <DynamicTable
-      headers={headers}
-      contentType={contentType}
-      rows={tokens}
-      withBulkActions={withBulkActions}
-      isLoading={isLoading}
-      onConfirmDelete={onConfirmDelete}
-    >
-      <Tbody>
-        {sortedTokens.map((token) => {
-          return (
-            <Tr
-              key={token.id}
-              {...onRowClick({
-                fn() {
-                  trackUsage('willEditTokenFromList', {
-                    tokenType,
-                  });
-                  push(`${pathname}/${token.id}`);
-                },
-                condition: canUpdate,
-              })}
-            >
-              <Td maxWidth={pxToRem(250)}>
-                <Typography textColor="neutral800" fontWeight="bold" ellipsis>
-                  {token.name}
-                </Typography>
-              </Td>
-              <Td maxWidth={pxToRem(250)}>
-                <Typography textColor="neutral800" ellipsis>
-                  {token.description}
-                </Typography>
-              </Td>
-              <Td>
-                <Typography textColor="neutral800">
-                  <RelativeTime timestamp={new Date(token.createdAt)} />
-                </Typography>
-              </Td>
-              <Td>
-                {token.lastUsedAt && (
-                  <Typography textColor="neutral800">
-                    <RelativeTime
-                      timestamp={new Date(token.lastUsedAt)}
-                      customIntervals={[
-                        {
-                          unit: 'hours',
-                          threshold: 1,
-                          text: formatMessage({
-                            id: 'Settings.apiTokens.lastHour',
-                            defaultMessage: 'last hour',
-                          }),
-                        },
-                      ]}
-                    />
-                  </Typography>
-                )}
-              </Td>
-
-              {withBulkActions && (
-                <Td>
-                  <Flex justifyContent="end">
-                    {canUpdate && <UpdateButton tokenName={token.name} tokenId={token.id} />}
-                    {!canUpdate && canRead && (
-                      <ReadButton tokenName={token.name} tokenId={token.id} />
-                    )}
-                    {canDelete && (
-                      <DeleteButton
-                        tokenName={token.name}
-                        onClickDelete={() => onConfirmDelete(token.id)}
-                        tokenType={tokenType}
-                      />
-                    )}
-                  </Flex>
-                </Td>
-              )}
-            </Tr>
-          );
-        })}
-      </Tbody>
-    </DynamicTable>
-  );
-};
-
-Table.propTypes = {
-  tokens: PropTypes.array,
-  permissions: PropTypes.shape({
-    canRead: PropTypes.bool,
-    canDelete: PropTypes.bool,
-    canUpdate: PropTypes.bool,
-  }).isRequired,
-  headers: PropTypes.arrayOf(
-    PropTypes.shape({
-      cellFormatter: PropTypes.func,
-      key: PropTypes.string.isRequired,
-      metadatas: PropTypes.shape({
-        label: PropTypes.string.isRequired,
-        sortable: PropTypes.bool,
-      }).isRequired,
-      name: PropTypes.string.isRequired,
-    })
-  ),
-  contentType: PropTypes.string.isRequired,
-  isLoading: PropTypes.bool,
-  onConfirmDelete: PropTypes.func,
-  tokenType: PropTypes.string.isRequired,
-};
-
-Table.defaultProps = {
-  tokens: [],
-  headers: [],
-  isLoading: false,
-  onConfirmDelete() {},
-};
-
-export default Table;

package/admin/src/pages/SettingsPage/components/Tokens/TokenBox/index.js

@@ -1,81 +0,0 @@
-import React from 'react';
-
-import { IconButton } from '@strapi/design-system';
-import { ContentBox, useClipboard, useNotification, useTracking } from '@strapi/helper-plugin';
-import { Duplicate, Key } from '@strapi/icons';
-import PropTypes from 'prop-types';
-import { useIntl } from 'react-intl';
-
-const TokenBox = ({ token, tokenType }) => {
-  const { formatMessage } = useIntl();
-  const toggleNotification = useNotification();
-  const { trackUsage } = useTracking();
-
-  const { copy } = useClipboard();
-
-  const handleClick = (token) => async () => {
-    const didCopy = await copy(token);
-
-    if (didCopy) {
-      trackUsage('didCopyTokenKey', {
-        tokenType,
-      });
-      toggleNotification({
-        type: 'success',
-        message: { id: 'Settings.tokens.notification.copied' },
-      });
-    }
-  };
-
-  return (
-    <ContentBox
-      endAction={
-        token && (
-          <span style={{ alignSelf: 'start' }}>
-            <IconButton
-              label={formatMessage({
-                id: 'app.component.CopyToClipboard.label',
-                defaultMessage: 'Copy to clipboard',
-              })}
-              onClick={handleClick(token)}
-              noBorder
-              icon={<Duplicate />}
-              style={{ padding: 0, height: '1rem' }}
-            />
-          </span>
-        )
-      }
-      title={
-        token ||
-        formatMessage({
-          id: 'Settings.tokens.copy.editTitle',
-          defaultMessage: 'This token isn’t accessible anymore.',
-        })
-      }
-      subtitle={
-        token
-          ? formatMessage({
-              id: 'Settings.tokens.copy.lastWarning',
-              defaultMessage: 'Make sure to copy this token, you won’t be able to see it again!',
-            })
-          : formatMessage({
-              id: 'Settings.tokens.copy.editMessage',
-              defaultMessage: 'For security reasons, you can only see your token once.',
-            })
-      }
-      icon={<Key />}
-      iconBackground="neutral100"
-    />
-  );
-};
-
-TokenBox.defaultProps = {
-  token: null,
-};
-
-TokenBox.propTypes = {
-  token: PropTypes.string,
-  tokenType: PropTypes.string.isRequired,
-};
-
-export default TokenBox;