@strapi/admin 4.6.1 → 4.7.0-beta.0

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

@@ -0,0 +1,98 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Select, Option } from '@strapi/design-system/Select';
+import { Typography } from '@strapi/design-system/Typography';
+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.apiTokens.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

@@ -0,0 +1,73 @@
+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, backUrl }) => {
+  const { formatMessage } = useIntl();
+  const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const { regenerateData, isLoadingConfirmation } = useRegenerate(
+    backUrl,
+    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.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+  backUrl: PropTypes.string.isRequired,
+};
+
+export default Regenerate;

package/admin/src/pages/SettingsPage/{pages/ApiTokens/ListView/DynamicTable → components/Tokens/Table}/DefaultButton/index.js

@@ -1,9 +1,9 @@
 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';
+import { Link } from '@strapi/helper-plugin';
 
 const MESSAGES_MAP = {
   edit: {

package/admin/src/pages/SettingsPage/{pages/ApiTokens/ListView/DynamicTable → components/Tokens/Table}/DeleteButton/index.js

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 
 const DeleteButton = ({ tokenName, onClickDelete }) => {
   const { formatMessage } = useIntl();
-  const { trackUsage } = useTracking();
+  const { trackUsage } = useTracking(); // TODO: Track different types of tokens
 
   return (
     <Box paddingLeft={1} {...stopPropagation}>

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

@@ -0,0 +1,135 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { Typography } from '@strapi/design-system/Typography';
+import { Tbody, Tr, Td } from '@strapi/design-system/Table';
+import { Flex } from '@strapi/design-system/Flex';
+import {
+  RelativeTime,
+  onRowClick,
+  pxToRem,
+  DynamicTable,
+  useQueryParams,
+  useTracking,
+} from '@strapi/helper-plugin';
+import DeleteButton from './DeleteButton';
+import UpdateButton from './UpdateButton';
+import ReadButton from './ReadButton';
+
+const Table = ({ permissions, headers, contentType, isLoading, tokens, onConfirmDelete }) => {
+  const { canDelete, canUpdate, canRead } = permissions;
+  const withBulkActions = canDelete || canUpdate || canRead;
+  const [{ query }] = useQueryParams();
+  const [, sortOrder] = query ? query.sort.split(':') : 'ASC';
+  const {
+    push,
+    location: { pathname },
+  } = useHistory();
+  const { trackUsage } = useTracking(); // TODO: Track different types of tokens
+
+  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');
+                  push(`${pathname}/${token.id}`);
+                },
+                condition: canUpdate,
+              })}
+            >
+              <Td>
+                <Typography textColor="neutral800" fontWeight="bold">
+                  {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)} />
+                  </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)}
+                      />
+                    )}
+                  </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,
+};
+
+Table.defaultProps = {
+  tokens: [],
+  headers: [],
+  isLoading: false,
+  onConfirmDelete() {},
+};
+
+export default Table;

package/admin/src/pages/SettingsPage/{pages/ApiTokens/EditView/components/ContentBox → components/Tokens/TokenBox}/index.js

@@ -1,32 +1,32 @@
 import React, { useRef } from 'react';
 import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
 import { ContentBox, useNotification, useTracking } from '@strapi/helper-plugin';
 import { IconButton } from '@strapi/design-system/IconButton';
 import Duplicate from '@strapi/icons/Duplicate';
-import PropTypes from 'prop-types';
-import { CopyToClipboard } from 'react-copy-to-clipboard';
 import Key from '@strapi/icons/Key';
 
-const HeaderContentBox = ({ apiToken }) => {
+const TokenBox = ({ token }) => {
   const { formatMessage } = useIntl();
   const toggleNotification = useNotification();
-  const { trackUsage } = useTracking();
+  const { trackUsage } = useTracking(); // TODO: Track different types of tokens
   const trackUsageRef = useRef(trackUsage);
 
   return (
     <ContentBox
       endAction={
-        apiToken && (
+        token && (
           <span style={{ alignSelf: 'start' }}>
             <CopyToClipboard
               onCopy={() => {
                 trackUsageRef.current('didCopyTokenKey');
                 toggleNotification({
                   type: 'success',
-                  message: { id: 'Settings.apiTokens.notification.copied' },
+                  message: { id: 'Settings.tokens.notification.copied' },
                 });
               }}
-              text={apiToken}
+              text={token}
             >
               <IconButton
                 label={formatMessage({
@@ -42,20 +42,20 @@ const HeaderContentBox = ({ apiToken }) => {
         )
       }
       title={
-        apiToken ||
+        token ||
         formatMessage({
-          id: 'Settings.apiTokens.copy.editTitle',
+          id: 'Settings.tokens.copy.editTitle',
           defaultMessage: 'This token isn’t accessible anymore.',
         })
       }
       subtitle={
-        apiToken
+        token
           ? formatMessage({
-              id: 'Settings.apiTokens.copy.lastWarning',
+              id: 'Settings.tokens.copy.lastWarning',
               defaultMessage: 'Make sure to copy this token, you won’t be able to see it again!',
             })
           : formatMessage({
-              id: 'Settings.apiTokens.copy.editMessage',
+              id: 'Settings.tokens.copy.editMessage',
               defaultMessage: 'For security reasons, you can only see your token once.',
             })
       }
@@ -65,12 +65,12 @@ const HeaderContentBox = ({ apiToken }) => {
   );
 };
 
-HeaderContentBox.defaultProps = {
-  apiToken: null,
+TokenBox.defaultProps = {
+  token: null,
 };
 
-HeaderContentBox.propTypes = {
-  apiToken: PropTypes.string,
+TokenBox.propTypes = {
+  token: PropTypes.string,
 };
 
-export default HeaderContentBox;
+export default TokenBox;

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

@@ -0,0 +1,51 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { Textarea } from '@strapi/design-system/Textarea';
+
+const TokenDescription = ({ errors, values, onChange, canEditInputs }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Textarea
+      label={formatMessage({
+        id: 'Settings.tokens.form.description',
+        defaultMessage: 'Description',
+      })}
+      name="description"
+      error={
+        errors.description
+          ? formatMessage(
+              errors.description?.id
+                ? errors.description
+                : {
+                    id: errors.description,
+                    defaultMessage: errors.description,
+                  }
+            )
+          : null
+      }
+      onChange={onChange}
+      disabled={!canEditInputs}
+    >
+      {values.description}
+    </Textarea>
+  );
+};
+
+TokenDescription.propTypes = {
+  errors: PropTypes.shape({
+    description: PropTypes.string,
+  }),
+  onChange: PropTypes.func.isRequired,
+  canEditInputs: PropTypes.bool.isRequired,
+  values: PropTypes.shape({
+    description: PropTypes.string,
+  }).isRequired,
+};
+
+TokenDescription.defaultProps = {
+  errors: {},
+};
+
+export default TokenDescription;

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+import { TextInput } from '@strapi/design-system/TextInput';
+
+const TokenName = ({ errors, values, onChange, canEditInputs }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <TextInput
+      name="name"
+      error={
+        errors.name
+          ? formatMessage(
+              errors.name?.id ? errors.name : { id: errors.name, defaultMessage: errors.name }
+            )
+          : null
+      }
+      label={formatMessage({
+        id: 'Settings.tokens.form.name',
+        defaultMessage: 'Name',
+      })}
+      onChange={onChange}
+      value={values.name}
+      disabled={!canEditInputs}
+      required
+    />
+  );
+};
+
+TokenName.propTypes = {
+  errors: PropTypes.shape({
+    name: PropTypes.string,
+  }),
+  onChange: PropTypes.func.isRequired,
+  canEditInputs: PropTypes.bool.isRequired,
+  values: PropTypes.shape({
+    name: PropTypes.string,
+  }).isRequired,
+};
+
+TokenName.defaultProps = {
+  errors: {},
+};
+
+export default TokenName;

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

@@ -0,0 +1,69 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useIntl } from 'react-intl';
+
+import { Select, Option } from '@strapi/design-system/Select';
+
+const TokenTypeSelect = ({ errors, values, onChange, canEditInputs, options, label }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <Select
+      name="type"
+      label={formatMessage({
+        id: label.id,
+        defaultMessage: label.defaultMessage,
+      })}
+      value={values?.type}
+      error={
+        errors.type
+          ? formatMessage(
+              errors.type?.id ? errors.type : { id: errors.type, defaultMessage: errors.type }
+            )
+          : null
+      }
+      onChange={onChange}
+      placeholder="Select"
+      required
+      disabled={!canEditInputs}
+    >
+      {options &&
+        options.map(({ value, label }) => (
+          <Option key={value} value={value}>
+            {formatMessage(label)}
+          </Option>
+        ))}
+    </Select>
+  );
+};
+
+TokenTypeSelect.propTypes = {
+  options: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.shape({
+        id: PropTypes.string,
+        defaultMessage: PropTypes.string,
+      }),
+      value: PropTypes.string,
+    })
+  ),
+  errors: PropTypes.shape({
+    type: PropTypes.string,
+  }),
+  onChange: PropTypes.func.isRequired,
+  canEditInputs: PropTypes.bool.isRequired,
+  values: PropTypes.shape({
+    type: PropTypes.string,
+  }).isRequired,
+  label: PropTypes.shape({
+    id: PropTypes.string,
+    defaultMessage: PropTypes.string,
+  }).isRequired,
+};
+
+TokenTypeSelect.defaultProps = {
+  errors: {},
+  options: [],
+};
+
+export default TokenTypeSelect;

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

@@ -1,5 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { capitalize } from 'lodash';
+import { useIntl } from 'react-intl';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
 import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
 import { Checkbox } from '@strapi/design-system/Checkbox';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
@@ -7,8 +10,6 @@ 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';
 
@@ -30,6 +31,7 @@ const CollapsableContentType = ({
     value: { onChangeSelectAll, onChange, selectedActions, setSelectedAction, selectedAction },
   } = useApiTokenPermissionsContext();
   const [expanded, setExpanded] = useState(false);
+  const { formatMessage } = useIntl();
 
   const handleExpandedAccordion = () => {
     setExpanded((s) => !s);
@@ -83,7 +85,7 @@ const CollapsableContentType = ({
                     }}
                     disabled={disabled}
                   >
-                    Select all
+                    {formatMessage({ id: 'app.utils.select-all', defaultMessage: 'Select all' })}
                   </Checkbox>
                 </Box>
               </Flex>