@strapi/admin 4.9.0-alpha.0 → 4.9.0-exp.90df253ba90fd6879eb56a720a1f80d04ff745b8

package/admin/src/pages/ProfilePage/index.js

@@ -17,20 +17,23 @@ import upperFirst from 'lodash/upperFirst';
 import { useQuery, useMutation, useQueryClient } from 'react-query';
 import pick from 'lodash/pick';
 import { Helmet } from 'react-helmet';
-import { Main } from '@strapi/design-system/Main';
-import { Typography } from '@strapi/design-system/Typography';
-import { Box } from '@strapi/design-system/Box';
-import { ContentLayout, HeaderLayout } from '@strapi/design-system/Layout';
-import { Button } from '@strapi/design-system/Button';
-import { Grid, GridItem } from '@strapi/design-system/Grid';
-import { Stack } from '@strapi/design-system/Stack';
-import { useNotifyAT } from '@strapi/design-system/LiveRegions';
-import { Select, Option } from '@strapi/design-system/Select';
-import { FieldAction } from '@strapi/design-system/Field';
-import { TextInput } from '@strapi/design-system/TextInput';
-import Eye from '@strapi/icons/Eye';
-import EyeStriked from '@strapi/icons/EyeStriked';
-import Check from '@strapi/icons/Check';
+import {
+  Main,
+  Typography,
+  Box,
+  ContentLayout,
+  HeaderLayout,
+  Button,
+  Grid,
+  GridItem,
+  Flex,
+  useNotifyAT,
+  Select,
+  Option,
+  FieldAction,
+  TextInput,
+} from '@strapi/design-system';
+import { Eye, EyeStriked, Check } from '@strapi/icons';
 import useLocalesProvider from '../../components/LocalesProvider/useLocalesProvider';
 import { useThemeToggle } from '../../hooks';
 import { fetchUser, putUser } from './utils/api';
@@ -205,7 +208,7 @@ const ProfilePage = () => {
               />
               <Box paddingBottom={10}>
                 <ContentLayout>
-                  <Stack spacing={6}>
+                  <Flex direction="column" alignItems="stretch" gap={6}>
                     <Box
                       background="neutral0"
                       hasRadius
@@ -215,7 +218,7 @@ const ProfilePage = () => {
                       paddingLeft={7}
                       paddingRight={7}
                     >
-                      <Stack spacing={4}>
+                      <Flex direction="column" alignItems="stretch" gap={4}>
                         <Typography variant="delta" as="h2">
                           {formatMessage({
                             id: 'global.profile',
@@ -275,7 +278,7 @@ const ProfilePage = () => {
                             />
                           </GridItem>
                         </Grid>
-                      </Stack>
+                      </Flex>
                     </Box>
                     <Box
                       background="neutral0"
@@ -286,7 +289,7 @@ const ProfilePage = () => {
                       paddingLeft={7}
                       paddingRight={7}
                     >
-                      <Stack spacing={4}>
+                      <Flex direction="column" alignItems="stretch" gap={4}>
                         <Typography variant="delta" as="h2">
                           {formatMessage({
                             id: 'global.change-password',
@@ -424,7 +427,7 @@ const ProfilePage = () => {
                             />
                           </GridItem>
                         </Grid>
-                      </Stack>
+                      </Flex>
                     </Box>
                     <Box
                       background="neutral0"
@@ -435,8 +438,8 @@ const ProfilePage = () => {
                       paddingLeft={7}
                       paddingRight={7}
                     >
-                      <Stack spacing={4}>
-                        <Stack spacing={1}>
+                      <Flex direction="column" alignItems="stretch" gap={4}>
+                        <Flex direction="column" alignItems="stretch" gap={1}>
                           <Typography variant="delta" as="h2">
                             {formatMessage({
                               id: 'Settings.profile.form.section.experience.title',
@@ -466,7 +469,7 @@ const ProfilePage = () => {
                               }
                             )}
                           </Typography>
-                        </Stack>
+                        </Flex>
                         <Grid gap={5}>
                           <GridItem s={12} col={6}>
                             <Select
@@ -550,9 +553,9 @@ const ProfilePage = () => {
                             </Select>
                           </GridItem>
                         </Grid>
-                      </Stack>
+                      </Flex>
                     </Box>
-                  </Stack>
+                  </Flex>
                 </ContentLayout>
               </Box>
             </Form>

package/admin/src/pages/SettingsPage/components/Filters/index.js

@@ -1,9 +1,8 @@
 import React, { useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
-import { Button } from '@strapi/design-system/Button';
-import { Box } from '@strapi/design-system/Box';
-import Filter from '@strapi/icons/Filter';
+import { Button, Box } from '@strapi/design-system';
+import { Filter } from '@strapi/icons';
 import { FilterListURLQuery, FilterPopoverURLQuery } from '@strapi/helper-plugin';
 
 const Filters = ({ displayedFilters }) => {

package/admin/src/pages/SettingsPage/components/SettingsNav/index.js

@@ -9,7 +9,7 @@ import {
   SubNavSection,
   SubNavSections,
   SubNavLink,
-} from '@strapi/design-system/v2/SubNav';
+} from '@strapi/design-system/v2';
 import { getSectionsToDisplay } from '../../utils';
 
 const SettingsNav = ({ menu }) => {

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

@@ -1,37 +1,41 @@
 import React from 'react';
 import { useIntl } from 'react-intl';
-import { Link } from '@strapi/helper-plugin';
 import PropTypes from 'prop-types';
-import ArrowLeft from '@strapi/icons/ArrowLeft';
-import Check from '@strapi/icons/Check';
-import { Button } from '@strapi/design-system/Button';
-import { HeaderLayout } from '@strapi/design-system/Layout';
-import { Stack } from '@strapi/design-system/Stack';
+import { Link } from '@strapi/helper-plugin';
+import { ArrowLeft, Check } from '@strapi/icons';
+import { Button, HeaderLayout, Flex } from '@strapi/design-system';
 import Regenerate from '../Regenerate';
 
-const FormHead = ({ apiToken, setApiToken, canEditInputs, canRegenerate, isSubmitting }) => {
+const FormHead = ({
+  title,
+  token,
+  setToken,
+  canEditInputs,
+  canRegenerate,
+  isSubmitting,
+  backUrl,
+  regenerateUrl,
+}) => {
   const { formatMessage } = useIntl();
   const handleRegenerate = (newKey) => {
-    setApiToken({
-      ...apiToken,
+    setToken({
+      ...token,
       accessKey: newKey,
     });
   };
 
   return (
     <HeaderLayout
-      title={
-        apiToken?.name ||
-        formatMessage({
-          id: 'Settings.apiTokens.createPage.title',
-          defaultMessage: 'Create API Token',
-        })
-      }
+      title={token?.name || formatMessage(title)}
       primaryAction={
         canEditInputs ? (
-          <Stack horizontal spacing={2}>
-            {canRegenerate && apiToken?.id && (
-              <Regenerate onRegenerate={handleRegenerate} idToRegenerate={apiToken?.id} />
+          <Flex gap={2}>
+            {canRegenerate && token?.id && (
+              <Regenerate
+                backUrl={regenerateUrl}
+                onRegenerate={handleRegenerate}
+                idToRegenerate={token?.id}
+              />
             )}
             <Button
               disabled={isSubmitting}
@@ -45,28 +49,33 @@ const FormHead = ({ apiToken, setApiToken, canEditInputs, canRegenerate, isSubmi
                 defaultMessage: 'Save',
               })}
             </Button>
-          </Stack>
+          </Flex>
         ) : (
           canRegenerate &&
-          apiToken?.id && (
-            <Regenerate onRegenerate={handleRegenerate} idToRegenerate={apiToken?.id} />
+          token?.id && (
+            <Regenerate
+              onRegenerate={handleRegenerate}
+              idToRegenerate={token?.id}
+              backUrl={regenerateUrl}
+            />
           )
         )
       }
       navigationAction={
-        <Link startIcon={<ArrowLeft />} to="/settings/api-tokens">
+        <Link startIcon={<ArrowLeft />} to={backUrl}>
           {formatMessage({
             id: 'global.back',
             defaultMessage: 'Back',
           })}
         </Link>
       }
+      ellipsis
     />
   );
 };
 
 FormHead.propTypes = {
-  apiToken: PropTypes.shape({
+  token: PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
     type: PropTypes.string,
     lifespan: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
@@ -78,12 +87,18 @@ FormHead.propTypes = {
   }),
   canEditInputs: PropTypes.bool.isRequired,
   canRegenerate: PropTypes.bool.isRequired,
-  setApiToken: PropTypes.func.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,
 };
 
 FormHead.defaultProps = {
-  apiToken: undefined,
+  token: undefined,
 };
 
 export default FormHead;

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

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

@@ -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';
+import { Refresh } from '@strapi/icons';
+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.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() {} };
+
+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/components/Tokens/Table/DeleteButton/index.js

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { Trash } from '@strapi/icons';
+import { IconButton, Box } from '@strapi/design-system';
+import { useTracking, ConfirmDialog } from '@strapi/helper-plugin';
+import { useIntl } from 'react-intl';
+import PropTypes from 'prop-types';
+
+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/{pages/ApiTokens/ListView/DynamicTable → components/Tokens/Table}/ReadButton/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Eye from '@strapi/icons/Eye';
+import { Eye } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import DefaultButton from '../DefaultButton';
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import Pencil from '@strapi/icons/Pencil';
+import { Pencil } from '@strapi/icons';
 import PropTypes from 'prop-types';
 import DefaultButton from '../DefaultButton';
 

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

@@ -0,0 +1,145 @@
+import React from 'react';
+import { useHistory } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { Typography, Flex, Tbody, Tr, Td } from '@strapi/design-system';
+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,
+  tokenType,
+}) => {
+  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();
+
+  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)} />
+                  </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;