@strapi/admin 4.20.5 → 5.0.0-alpha.0

package/dist/_chunks/SingleSignOnPage-vOeDxBfa.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SingleSignOnPage-vOeDxBfa.mjs","sources":["../../ee/admin/src/pages/SettingsPage/pages/SingleSignOnPage.tsx"],"sourcesContent":["import {\n  Button,\n  ContentLayout,\n  Flex,\n  Grid,\n  GridItem,\n  HeaderLayout,\n  Layout,\n  Main,\n  MultiSelect,\n  MultiSelectOption,\n  Option,\n  Select,\n  ToggleInput,\n  Typography,\n} from '@strapi/design-system';\nimport { useFocusWhenNavigate, useRBAC } from '@strapi/helper-plugin';\nimport { Check } from '@strapi/icons';\nimport { Formik, Form, FormikHelpers } from 'formik';\nimport { Helmet } from 'react-helmet';\nimport { useIntl } from 'react-intl';\nimport * as yup from 'yup';\n\nimport { Page } from '../../../../../../admin/src/components/PageHelpers';\nimport { useTypedSelector } from '../../../../../../admin/src/core/store/hooks';\nimport { useNotification } from '../../../../../../admin/src/features/Notifications';\nimport { useAdminRoles } from '../../../../../../admin/src/hooks/useAdminRoles';\nimport { useAPIErrorHandler } from '../../../../../../admin/src/hooks/useAPIErrorHandler';\nimport {\n  useGetProviderOptionsQuery,\n  useUpdateProviderOptionsMutation,\n} from '../../../../../../admin/src/services/auth';\nimport { isBaseQueryError } from '../../../../../../admin/src/utils/baseQuery';\nimport { translatedErrors } from '../../../../../../admin/src/utils/translatedErrors';\nimport { ProvidersOptions } from '../../../../../../shared/contracts/admin';\n\nconst schema = yup.object().shape({\n  autoRegister: yup.bool().required(translatedErrors.required.id),\n  defaultRole: yup.mixed().when('autoRegister', (value, initSchema) => {\n    return value ? initSchema.required(translatedErrors.required.id) : initSchema.nullable();\n  }),\n  ssoLockedRoles: yup\n    .array()\n    .nullable()\n    .of(\n      yup.mixed().when('ssoLockedRoles', (value, initSchema) => {\n        return value ? initSchema.required(translatedErrors.required.id) : initSchema.nullable();\n      })\n    ),\n});\n\nexport const SingleSignOnPage = () => {\n  useFocusWhenNavigate();\n\n  const { formatMessage } = useIntl();\n  const permissions = useTypedSelector((state) => state.admin_app.permissions);\n  const { toggleNotification } = useNotification();\n  const {\n    _unstableFormatAPIError: formatAPIError,\n    _unstableFormatValidationErrors: formatValidationErrors,\n  } = useAPIErrorHandler();\n\n  const { isLoading: isLoadingProviderOptions, data } = useGetProviderOptionsQuery();\n\n  const [updateProviderOptions, { isLoading: isSubmittingForm }] =\n    useUpdateProviderOptionsMutation();\n\n  const {\n    isLoading: isLoadingPermissions,\n    allowedActions: { canUpdate, canReadRoles },\n  } = useRBAC({\n    ...permissions.settings?.sso,\n    readRoles: permissions.settings?.roles.read ?? [],\n  });\n\n  const { roles, isLoading: isLoadingRoles } = useAdminRoles(undefined, {\n    skip: !canReadRoles,\n  });\n\n  const handleSubmit = async (\n    body: ProvidersOptions.Request['body'],\n    formik: FormikHelpers<ProvidersOptions.Request['body']>\n  ) => {\n    try {\n      const res = await updateProviderOptions(body);\n\n      if ('error' in res) {\n        if (isBaseQueryError(res.error) && res.error.name === 'ValidationError') {\n          formik.setErrors(formatValidationErrors(res.error));\n        } else {\n          toggleNotification({\n            type: 'danger',\n            message: formatAPIError(res.error),\n          });\n        }\n\n        return;\n      }\n\n      toggleNotification({\n        type: 'success',\n        message: formatMessage({ id: 'notification.success.saved' }),\n      });\n    } catch (err) {\n      toggleNotification({\n        type: 'danger',\n        message: formatMessage({\n          id: 'notification.error',\n          defaultMessage: 'An error occurred, please try again.',\n        }),\n      });\n    }\n  };\n\n  const isLoadingData = isLoadingRoles || isLoadingPermissions || isLoadingProviderOptions;\n\n  return (\n    <Layout>\n      <Helmet\n        title={formatMessage(\n          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },\n          {\n            name: 'SSO',\n          }\n        )}\n      />\n      <Main aria-busy={isSubmittingForm || isLoadingData} tabIndex={-1}>\n        <Formik\n          onSubmit={handleSubmit}\n          initialValues={\n            data || {\n              autoRegister: false,\n              defaultRole: null,\n              ssoLockedRoles: null,\n            }\n          }\n          validationSchema={schema}\n          validateOnChange={false}\n          enableReinitialize\n        >\n          {({ handleChange, isSubmitting, values, setFieldValue, dirty, errors }) => (\n            <Form>\n              <HeaderLayout\n                primaryAction={\n                  <Button\n                    disabled={!dirty}\n                    loading={isSubmitting}\n                    startIcon={<Check />}\n                    type=\"submit\"\n                    size=\"L\"\n                  >\n                    {formatMessage({\n                      id: 'global.save',\n                      defaultMessage: 'Save',\n                    })}\n                  </Button>\n                }\n                title={formatMessage({\n                  id: 'Settings.sso.title',\n                  defaultMessage: 'Single Sign-On',\n                })}\n                subtitle={formatMessage({\n                  id: 'Settings.sso.description',\n                  defaultMessage: 'Configure the settings for the Single Sign-On feature.',\n                })}\n              />\n              <ContentLayout>\n                {isSubmitting || isLoadingData ? (\n                  <Page.Loading />\n                ) : (\n                  <Flex\n                    direction=\"column\"\n                    alignItems=\"stretch\"\n                    gap={4}\n                    background=\"neutral0\"\n                    padding={6}\n                    shadow=\"filterShadow\"\n                    hasRadius\n                  >\n                    <Typography variant=\"delta\" as=\"h2\">\n                      {formatMessage({\n                        id: 'global.settings',\n                        defaultMessage: 'Settings',\n                      })}\n                    </Typography>\n                    <Grid gap={4}>\n                      <GridItem col={6} s={12}>\n                        <ToggleInput\n                          disabled={!canUpdate}\n                          checked={values.autoRegister}\n                          hint={formatMessage({\n                            id: 'Settings.sso.form.registration.description',\n                            defaultMessage: 'Create new user on SSO login if no account exists',\n                          })}\n                          label={formatMessage({\n                            id: 'Settings.sso.form.registration.label',\n                            defaultMessage: 'Auto-registration',\n                          })}\n                          name=\"autoRegister\"\n                          offLabel={formatMessage({\n                            id: 'app.components.ToggleCheckbox.off-label',\n                            defaultMessage: 'Off',\n                          })}\n                          onLabel={formatMessage({\n                            id: 'app.components.ToggleCheckbox.on-label',\n                            defaultMessage: 'On',\n                          })}\n                          onChange={handleChange}\n                        />\n                      </GridItem>\n                      <GridItem col={6} s={12}>\n                        <Select\n                          disabled={!canUpdate}\n                          hint={formatMessage({\n                            id: 'Settings.sso.form.defaultRole.description',\n                            defaultMessage:\n                              'It will attach the new authenticated user to the selected role',\n                          })}\n                          error={\n                            errors.defaultRole\n                              ? formatMessage({\n                                  id: errors.defaultRole,\n                                  defaultMessage: errors.defaultRole,\n                                })\n                              : ''\n                          }\n                          label={formatMessage({\n                            id: 'Settings.sso.form.defaultRole.label',\n                            defaultMessage: 'Default role',\n                          })}\n                          name=\"defaultRole\"\n                          onChange={(value) =>\n                            handleChange({ target: { name: 'defaultRole', value } })\n                          }\n                          placeholder={formatMessage({\n                            id: 'components.InputSelect.option.placeholder',\n                            defaultMessage: 'Choose here',\n                          })}\n                          value={values.defaultRole}\n                        >\n                          {roles.map(({ id, name }) => (\n                            <Option key={id} value={id.toString()}>\n                              {name}\n                            </Option>\n                          ))}\n                        </Select>\n                      </GridItem>\n                      <GridItem col={6} s={12}>\n                        <MultiSelect\n                          disabled={!canUpdate}\n                          hint={formatMessage({\n                            id: 'Settings.sso.form.localAuthenticationLock.description',\n                            defaultMessage:\n                              'Select the roles for which you want to disable the local authentication',\n                          })}\n                          error={\n                            errors.ssoLockedRoles\n                              ? formatMessage({\n                                  id: errors.ssoLockedRoles,\n                                  defaultMessage: errors.ssoLockedRoles,\n                                })\n                              : ''\n                          }\n                          label={formatMessage({\n                            id: 'Settings.sso.form.localAuthenticationLock.label',\n                            defaultMessage: 'Local authentication lock-out',\n                          })}\n                          name=\"ssoLockedRoles\"\n                          onChange={(value) =>\n                            handleChange({\n                              target: {\n                                value,\n                                name: 'ssoLockedRoles',\n                              },\n                            })\n                          }\n                          placeholder={formatMessage({\n                            id: 'components.InputSelect.option.placeholder',\n                            defaultMessage: 'Choose here',\n                          })}\n                          onClear={() => setFieldValue('ssoLockedRoles', [])}\n                          value={values.ssoLockedRoles || []}\n                          withTags\n                        >\n                          {roles.map(({ id, name }) => (\n                            <MultiSelectOption key={id} value={id.toString()}>\n                              {name}\n                            </MultiSelectOption>\n                          ))}\n                        </MultiSelect>\n                      </GridItem>\n                    </Grid>\n                  </Flex>\n                )}\n              </ContentLayout>\n            </Form>\n          )}\n        </Formik>\n      </Main>\n    </Layout>\n  );\n};\n\nexport const ProtectedSSO = () => {\n  const permissions = useTypedSelector((state) => state.admin_app.permissions.settings?.sso?.main);\n\n  return (\n    <Page.Protect permissions={permissions}>\n      <SingleSignOnPage />\n    </Page.Protect>\n  );\n};\n"],"names":["translatedErrors"],"mappings":"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"}

package/dist/_chunks/Table-VsNr4Mha.js

@@ -0,0 +1,184 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const designSystem = require("@strapi/design-system");
+const v2 = require("@strapi/design-system/v2");
+const helperPlugin = require("@strapi/helper-plugin");
+const Icons = require("@strapi/icons");
+const reactIntl = require("react-intl");
+const reactRouterDom = require("react-router-dom");
+const styled = require("styled-components");
+const index = require("./index-ibtz273H.js");
+const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
+function _interopNamespace(e) {
+  if (e && e.__esModule)
+    return e;
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespace(React);
+const styled__default = /* @__PURE__ */ _interopDefault(styled);
+const Table = ({
+  permissions,
+  headers = [],
+  isLoading = false,
+  tokens = [],
+  onConfirmDelete,
+  tokenType
+}) => {
+  const [{ query }] = helperPlugin.useQueryParams();
+  const { formatMessage, locale } = reactIntl.useIntl();
+  const [, sortOrder] = query && query.sort ? query.sort.split(":") : [void 0, "ASC"];
+  const navigate = reactRouterDom.useNavigate();
+  const { trackUsage } = index.useTracking();
+  const formatter = designSystem.useCollator(locale);
+  const sortedTokens = [...tokens].sort((a, b) => {
+    return sortOrder === "DESC" ? formatter.compare(b.name, a.name) : formatter.compare(a.name, b.name);
+  });
+  const { canDelete, canUpdate, canRead } = permissions;
+  const handleRowClick = (id) => () => {
+    if (canRead) {
+      trackUsage("willEditTokenFromList", {
+        tokenType
+      });
+      navigate(id.toString());
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Table.Root, { headers, rows: sortedTokens, isLoading, children: /* @__PURE__ */ jsxRuntime.jsxs(index.Table.Content, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(index.Table.Head, { children: headers.map((header) => /* @__PURE__ */ jsxRuntime.jsx(index.Table.HeaderCell, { ...header }, header.name)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(index.Table.Empty, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(index.Table.Loading, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(index.Table.Body, { children: sortedTokens.map((token) => /* @__PURE__ */ jsxRuntime.jsxs(index.Table.Row, { onClick: handleRowClick(token.id), children: [
+      /* @__PURE__ */ jsxRuntime.jsx(index.Table.Cell, { maxWidth: `${250 / 16}rem`, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", fontWeight: "bold", ellipsis: true, children: token.name }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(index.Table.Cell, { maxWidth: `${250 / 16}rem`, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", ellipsis: true, children: token.description }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(index.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", children: /* @__PURE__ */ jsxRuntime.jsx(index.RelativeTime, { timestamp: new Date(token.createdAt) }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(index.Table.Cell, { children: token.lastUsedAt && /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", children: /* @__PURE__ */ jsxRuntime.jsx(
+        index.RelativeTime,
+        {
+          timestamp: new Date(token.lastUsedAt),
+          customIntervals: [
+            {
+              unit: "hours",
+              threshold: 1,
+              text: formatMessage({
+                id: "Settings.apiTokens.lastHour",
+                defaultMessage: "last hour"
+              })
+            }
+          ]
+        }
+      ) }) }),
+      canUpdate || canRead || canDelete ? /* @__PURE__ */ jsxRuntime.jsx(index.Table.Cell, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { justifyContent: "end", children: [
+        canUpdate && /* @__PURE__ */ jsxRuntime.jsx(UpdateButton, { tokenName: token.name, tokenId: token.id }),
+        canDelete && /* @__PURE__ */ jsxRuntime.jsx(
+          DeleteButton,
+          {
+            tokenName: token.name,
+            onClickDelete: () => onConfirmDelete?.(token.id),
+            tokenType
+          }
+        )
+      ] }) }) : null
+    ] }, token.id)) })
+  ] }) });
+};
+const MESSAGES_MAP = {
+  edit: {
+    id: "app.component.table.edit",
+    defaultMessage: "Edit {target}"
+  },
+  read: {
+    id: "app.component.table.read",
+    defaultMessage: "Read {target}"
+  }
+};
+const DefaultButton = ({
+  tokenName,
+  tokenId,
+  buttonType = "edit",
+  children
+}) => {
+  const { formatMessage } = reactIntl.useIntl();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    LinkStyled,
+    {
+      forwardedAs: reactRouterDom.NavLink,
+      to: tokenId.toString(),
+      title: formatMessage(MESSAGES_MAP[buttonType], { target: tokenName }),
+      children
+    }
+  );
+};
+const LinkStyled = styled__default.default(v2.Link)`
+  svg {
+    path {
+      fill: ${({ theme }) => theme.colors.neutral500};
+    }
+  }
+
+  &:hover,
+  &:focus {
+    svg {
+      path {
+        fill: ${({ theme }) => theme.colors.neutral800};
+      }
+    }
+  }
+`;
+const DeleteButton = ({ tokenName, onClickDelete, tokenType }) => {
+  const { formatMessage } = reactIntl.useIntl();
+  const { trackUsage } = index.useTracking();
+  const [showConfirmDialog, setShowConfirmDialog] = React__namespace.useState(false);
+  const handleClickDelete = () => {
+    setShowConfirmDialog(false);
+    trackUsage("willDeleteToken", {
+      tokenType
+    });
+    onClickDelete();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingLeft: 1, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.IconButton,
+      {
+        onClick: () => {
+          setShowConfirmDialog(true);
+        },
+        label: formatMessage(
+          {
+            id: "global.delete-target",
+            defaultMessage: "Delete {target}"
+          },
+          { target: `${tokenName}` }
+        ),
+        name: "delete",
+        borderWidth: 0,
+        icon: /* @__PURE__ */ jsxRuntime.jsx(Icons.Trash, {})
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      index.ConfirmDialog,
+      {
+        onClose: () => setShowConfirmDialog(false),
+        onConfirm: handleClickDelete,
+        isOpen: showConfirmDialog
+      }
+    )
+  ] });
+};
+const UpdateButton = ({ tokenName, tokenId }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(DefaultButton, { tokenName, tokenId, children: /* @__PURE__ */ jsxRuntime.jsx(Icons.Pencil, { width: 12 }) });
+};
+exports.Table = Table;
+//# sourceMappingURL=Table-VsNr4Mha.js.map

package/dist/_chunks/Table-VsNr4Mha.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table-VsNr4Mha.js","sources":["../../admin/src/pages/Settings/components/Tokens/Table.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, IconButton, Typography, useCollator } from '@strapi/design-system';\nimport { Link } from '@strapi/design-system/v2';\nimport { useQueryParams } from '@strapi/helper-plugin';\nimport { Pencil, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { NavLink, useNavigate } from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport { ApiToken } from '../../../../../../shared/contracts/api-token';\nimport { SanitizedTransferToken } from '../../../../../../shared/contracts/transfer';\nimport { ConfirmDialog } from '../../../../components/ConfirmDialog';\nimport { RelativeTime } from '../../../../components/RelativeTime';\nimport { Table as TableImpl } from '../../../../components/Table';\nimport { useTracking } from '../../../../features/Tracking';\n\nimport type { Entity } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * Table\n * -----------------------------------------------------------------------------------------------*/\n\ninterface TableProps\n  extends Pick<TableImpl.Props<SanitizedTransferToken | ApiToken>, 'headers' | 'isLoading'> {\n  onConfirmDelete: (id: Entity.ID) => void;\n  permissions: {\n    canRead: boolean;\n    canDelete: boolean;\n    canUpdate: boolean;\n  };\n  tokens: SanitizedTransferToken[] | ApiToken[];\n  tokenType: 'api-token' | 'transfer-token';\n}\n\nconst Table = ({\n  permissions,\n  headers = [],\n  isLoading = false,\n  tokens = [],\n  onConfirmDelete,\n  tokenType,\n}: TableProps) => {\n  const [{ query }] = useQueryParams<{ sort?: string }>();\n  const { formatMessage, locale } = useIntl();\n  const [, sortOrder] = query && query.sort ? query.sort.split(':') : [undefined, 'ASC'];\n  const navigate = useNavigate();\n  const { trackUsage } = useTracking();\n  const formatter = useCollator(locale);\n\n  const sortedTokens = [...tokens].sort((a, b) => {\n    return sortOrder === 'DESC'\n      ? formatter.compare(b.name, a.name)\n      : formatter.compare(a.name, b.name);\n  });\n\n  const { canDelete, canUpdate, canRead } = permissions;\n\n  const handleRowClick = (id: Entity.ID) => () => {\n    if (canRead) {\n      trackUsage('willEditTokenFromList', {\n        tokenType,\n      });\n      navigate(id.toString());\n    }\n  };\n\n  return (\n    <TableImpl.Root headers={headers} rows={sortedTokens} isLoading={isLoading}>\n      <TableImpl.Content>\n        <TableImpl.Head>\n          {headers.map((header) => (\n            <TableImpl.HeaderCell key={header.name} {...header} />\n          ))}\n        </TableImpl.Head>\n        <TableImpl.Empty />\n        <TableImpl.Loading />\n        <TableImpl.Body>\n          {sortedTokens.map((token) => (\n            <TableImpl.Row key={token.id} onClick={handleRowClick(token.id)}>\n              <TableImpl.Cell maxWidth={`${250 / 16}rem`}>\n                <Typography textColor=\"neutral800\" fontWeight=\"bold\" ellipsis>\n                  {token.name}\n                </Typography>\n              </TableImpl.Cell>\n              <TableImpl.Cell maxWidth={`${250 / 16}rem`}>\n                <Typography textColor=\"neutral800\" ellipsis>\n                  {token.description}\n                </Typography>\n              </TableImpl.Cell>\n              <TableImpl.Cell>\n                <Typography textColor=\"neutral800\">\n                  {/* @ts-expect-error One of the tokens doesn't have createdAt */}\n                  <RelativeTime timestamp={new Date(token.createdAt)} />\n                </Typography>\n              </TableImpl.Cell>\n              <TableImpl.Cell>\n                {token.lastUsedAt && (\n                  <Typography textColor=\"neutral800\">\n                    <RelativeTime\n                      timestamp={new Date(token.lastUsedAt)}\n                      customIntervals={[\n                        {\n                          unit: 'hours',\n                          threshold: 1,\n                          text: formatMessage({\n                            id: 'Settings.apiTokens.lastHour',\n                            defaultMessage: 'last hour',\n                          }),\n                        },\n                      ]}\n                    />\n                  </Typography>\n                )}\n              </TableImpl.Cell>\n              {canUpdate || canRead || canDelete ? (\n                <TableImpl.Cell>\n                  <Flex justifyContent=\"end\">\n                    {canUpdate && <UpdateButton tokenName={token.name} tokenId={token.id} />}\n                    {canDelete && (\n                      <DeleteButton\n                        tokenName={token.name}\n                        onClickDelete={() => onConfirmDelete?.(token.id)}\n                        tokenType={tokenType}\n                      />\n                    )}\n                  </Flex>\n                </TableImpl.Cell>\n              ) : null}\n            </TableImpl.Row>\n          ))}\n        </TableImpl.Body>\n      </TableImpl.Content>\n    </TableImpl.Root>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * CRUD Buttons\n * -----------------------------------------------------------------------------------------------*/\n\nconst MESSAGES_MAP = {\n  edit: {\n    id: 'app.component.table.edit',\n    defaultMessage: 'Edit {target}',\n  },\n  read: {\n    id: 'app.component.table.read',\n    defaultMessage: 'Read {target}',\n  },\n};\n\ninterface DefaultButtonProps {\n  tokenName: string;\n  tokenId: Entity.ID;\n  buttonType?: 'edit' | 'read';\n  children: React.ReactNode;\n}\n\nconst DefaultButton = ({\n  tokenName,\n  tokenId,\n  buttonType = 'edit',\n  children,\n}: DefaultButtonProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <LinkStyled\n      forwardedAs={NavLink}\n      to={tokenId.toString()}\n      title={formatMessage(MESSAGES_MAP[buttonType], { target: tokenName })}\n    >\n      {children}\n    </LinkStyled>\n  );\n};\n\nconst LinkStyled = styled(Link)`\n  svg {\n    path {\n      fill: ${({ theme }) => theme.colors.neutral500};\n    }\n  }\n\n  &:hover,\n  &:focus {\n    svg {\n      path {\n        fill: ${({ theme }) => theme.colors.neutral800};\n      }\n    }\n  }\n`;\n\ninterface DeleteButtonProps extends Pick<ButtonProps, 'tokenName'>, Pick<TableProps, 'tokenType'> {\n  onClickDelete: () => void;\n}\n\nconst DeleteButton = ({ tokenName, onClickDelete, tokenType }: DeleteButtonProps) => {\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);\n  const handleClickDelete = () => {\n    setShowConfirmDialog(false);\n    trackUsage('willDeleteToken', {\n      tokenType,\n    });\n    onClickDelete();\n  };\n\n  return (\n    <Box paddingLeft={1} onClick={(e) => e.stopPropagation()}>\n      <IconButton\n        onClick={() => {\n          setShowConfirmDialog(true);\n        }}\n        label={formatMessage(\n          {\n            id: 'global.delete-target',\n            defaultMessage: 'Delete {target}',\n          },\n          { target: `${tokenName}` }\n        )}\n        name=\"delete\"\n        borderWidth={0}\n        icon={<Trash />}\n      />\n      <ConfirmDialog\n        onClose={() => setShowConfirmDialog(false)}\n        onConfirm={handleClickDelete}\n        isOpen={showConfirmDialog}\n      />\n    </Box>\n  );\n};\n\ninterface ButtonProps {\n  tokenName: string;\n  tokenId: Entity.ID;\n}\n\nconst UpdateButton = ({ tokenName, tokenId }: ButtonProps) => {\n  return (\n    <DefaultButton tokenName={tokenName} tokenId={tokenId}>\n      <Pencil width={12} />\n    </DefaultButton>\n  );\n};\n\nexport { Table };\nexport type { TableProps };\n"],"names":["useQueryParams","useIntl","useNavigate","useTracking","useCollator","jsx","TableImpl","jsxs","Typography","RelativeTime","Flex","NavLink","styled","Link","React","Box","IconButton","Trash","ConfirmDialog","Pencil"],"mappings":"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"}

package/dist/_chunks/Table-k6gVR2KH.mjs

@@ -0,0 +1,164 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { useCollator, Typography, Flex, Box, IconButton } from "@strapi/design-system";
+import { Link } from "@strapi/design-system/v2";
+import { useQueryParams } from "@strapi/helper-plugin";
+import { Trash, Pencil } from "@strapi/icons";
+import { useIntl } from "react-intl";
+import { useNavigate, NavLink } from "react-router-dom";
+import styled from "styled-components";
+import { d as useTracking, T as Table$1, bg as RelativeTime, J as ConfirmDialog } from "./index-5ZvCaCyY.mjs";
+const Table = ({
+  permissions,
+  headers = [],
+  isLoading = false,
+  tokens = [],
+  onConfirmDelete,
+  tokenType
+}) => {
+  const [{ query }] = useQueryParams();
+  const { formatMessage, locale } = useIntl();
+  const [, sortOrder] = query && query.sort ? query.sort.split(":") : [void 0, "ASC"];
+  const navigate = useNavigate();
+  const { trackUsage } = useTracking();
+  const formatter = useCollator(locale);
+  const sortedTokens = [...tokens].sort((a, b) => {
+    return sortOrder === "DESC" ? formatter.compare(b.name, a.name) : formatter.compare(a.name, b.name);
+  });
+  const { canDelete, canUpdate, canRead } = permissions;
+  const handleRowClick = (id) => () => {
+    if (canRead) {
+      trackUsage("willEditTokenFromList", {
+        tokenType
+      });
+      navigate(id.toString());
+    }
+  };
+  return /* @__PURE__ */ jsx(Table$1.Root, { headers, rows: sortedTokens, isLoading, children: /* @__PURE__ */ jsxs(Table$1.Content, { children: [
+    /* @__PURE__ */ jsx(Table$1.Head, { children: headers.map((header) => /* @__PURE__ */ jsx(Table$1.HeaderCell, { ...header }, header.name)) }),
+    /* @__PURE__ */ jsx(Table$1.Empty, {}),
+    /* @__PURE__ */ jsx(Table$1.Loading, {}),
+    /* @__PURE__ */ jsx(Table$1.Body, { children: sortedTokens.map((token) => /* @__PURE__ */ jsxs(Table$1.Row, { onClick: handleRowClick(token.id), children: [
+      /* @__PURE__ */ jsx(Table$1.Cell, { maxWidth: `${250 / 16}rem`, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", fontWeight: "bold", ellipsis: true, children: token.name }) }),
+      /* @__PURE__ */ jsx(Table$1.Cell, { maxWidth: `${250 / 16}rem`, children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", ellipsis: true, children: token.description }) }),
+      /* @__PURE__ */ jsx(Table$1.Cell, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: /* @__PURE__ */ jsx(RelativeTime, { timestamp: new Date(token.createdAt) }) }) }),
+      /* @__PURE__ */ jsx(Table$1.Cell, { children: token.lastUsedAt && /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: /* @__PURE__ */ jsx(
+        RelativeTime,
+        {
+          timestamp: new Date(token.lastUsedAt),
+          customIntervals: [
+            {
+              unit: "hours",
+              threshold: 1,
+              text: formatMessage({
+                id: "Settings.apiTokens.lastHour",
+                defaultMessage: "last hour"
+              })
+            }
+          ]
+        }
+      ) }) }),
+      canUpdate || canRead || canDelete ? /* @__PURE__ */ jsx(Table$1.Cell, { children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "end", children: [
+        canUpdate && /* @__PURE__ */ jsx(UpdateButton, { tokenName: token.name, tokenId: token.id }),
+        canDelete && /* @__PURE__ */ jsx(
+          DeleteButton,
+          {
+            tokenName: token.name,
+            onClickDelete: () => onConfirmDelete?.(token.id),
+            tokenType
+          }
+        )
+      ] }) }) : null
+    ] }, token.id)) })
+  ] }) });
+};
+const MESSAGES_MAP = {
+  edit: {
+    id: "app.component.table.edit",
+    defaultMessage: "Edit {target}"
+  },
+  read: {
+    id: "app.component.table.read",
+    defaultMessage: "Read {target}"
+  }
+};
+const DefaultButton = ({
+  tokenName,
+  tokenId,
+  buttonType = "edit",
+  children
+}) => {
+  const { formatMessage } = useIntl();
+  return /* @__PURE__ */ jsx(
+    LinkStyled,
+    {
+      forwardedAs: NavLink,
+      to: tokenId.toString(),
+      title: formatMessage(MESSAGES_MAP[buttonType], { target: tokenName }),
+      children
+    }
+  );
+};
+const LinkStyled = styled(Link)`
+  svg {
+    path {
+      fill: ${({ theme }) => theme.colors.neutral500};
+    }
+  }
+
+  &:hover,
+  &:focus {
+    svg {
+      path {
+        fill: ${({ theme }) => theme.colors.neutral800};
+      }
+    }
+  }
+`;
+const DeleteButton = ({ tokenName, onClickDelete, tokenType }) => {
+  const { formatMessage } = useIntl();
+  const { trackUsage } = useTracking();
+  const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);
+  const handleClickDelete = () => {
+    setShowConfirmDialog(false);
+    trackUsage("willDeleteToken", {
+      tokenType
+    });
+    onClickDelete();
+  };
+  return /* @__PURE__ */ jsxs(Box, { paddingLeft: 1, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        onClick: () => {
+          setShowConfirmDialog(true);
+        },
+        label: formatMessage(
+          {
+            id: "global.delete-target",
+            defaultMessage: "Delete {target}"
+          },
+          { target: `${tokenName}` }
+        ),
+        name: "delete",
+        borderWidth: 0,
+        icon: /* @__PURE__ */ jsx(Trash, {})
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        onClose: () => setShowConfirmDialog(false),
+        onConfirm: handleClickDelete,
+        isOpen: showConfirmDialog
+      }
+    )
+  ] });
+};
+const UpdateButton = ({ tokenName, tokenId }) => {
+  return /* @__PURE__ */ jsx(DefaultButton, { tokenName, tokenId, children: /* @__PURE__ */ jsx(Pencil, { width: 12 }) });
+};
+export {
+  Table as T
+};
+//# sourceMappingURL=Table-k6gVR2KH.mjs.map

package/dist/_chunks/Table-k6gVR2KH.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table-k6gVR2KH.mjs","sources":["../../admin/src/pages/Settings/components/Tokens/Table.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, IconButton, Typography, useCollator } from '@strapi/design-system';\nimport { Link } from '@strapi/design-system/v2';\nimport { useQueryParams } from '@strapi/helper-plugin';\nimport { Pencil, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { NavLink, useNavigate } from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport { ApiToken } from '../../../../../../shared/contracts/api-token';\nimport { SanitizedTransferToken } from '../../../../../../shared/contracts/transfer';\nimport { ConfirmDialog } from '../../../../components/ConfirmDialog';\nimport { RelativeTime } from '../../../../components/RelativeTime';\nimport { Table as TableImpl } from '../../../../components/Table';\nimport { useTracking } from '../../../../features/Tracking';\n\nimport type { Entity } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * Table\n * -----------------------------------------------------------------------------------------------*/\n\ninterface TableProps\n  extends Pick<TableImpl.Props<SanitizedTransferToken | ApiToken>, 'headers' | 'isLoading'> {\n  onConfirmDelete: (id: Entity.ID) => void;\n  permissions: {\n    canRead: boolean;\n    canDelete: boolean;\n    canUpdate: boolean;\n  };\n  tokens: SanitizedTransferToken[] | ApiToken[];\n  tokenType: 'api-token' | 'transfer-token';\n}\n\nconst Table = ({\n  permissions,\n  headers = [],\n  isLoading = false,\n  tokens = [],\n  onConfirmDelete,\n  tokenType,\n}: TableProps) => {\n  const [{ query }] = useQueryParams<{ sort?: string }>();\n  const { formatMessage, locale } = useIntl();\n  const [, sortOrder] = query && query.sort ? query.sort.split(':') : [undefined, 'ASC'];\n  const navigate = useNavigate();\n  const { trackUsage } = useTracking();\n  const formatter = useCollator(locale);\n\n  const sortedTokens = [...tokens].sort((a, b) => {\n    return sortOrder === 'DESC'\n      ? formatter.compare(b.name, a.name)\n      : formatter.compare(a.name, b.name);\n  });\n\n  const { canDelete, canUpdate, canRead } = permissions;\n\n  const handleRowClick = (id: Entity.ID) => () => {\n    if (canRead) {\n      trackUsage('willEditTokenFromList', {\n        tokenType,\n      });\n      navigate(id.toString());\n    }\n  };\n\n  return (\n    <TableImpl.Root headers={headers} rows={sortedTokens} isLoading={isLoading}>\n      <TableImpl.Content>\n        <TableImpl.Head>\n          {headers.map((header) => (\n            <TableImpl.HeaderCell key={header.name} {...header} />\n          ))}\n        </TableImpl.Head>\n        <TableImpl.Empty />\n        <TableImpl.Loading />\n        <TableImpl.Body>\n          {sortedTokens.map((token) => (\n            <TableImpl.Row key={token.id} onClick={handleRowClick(token.id)}>\n              <TableImpl.Cell maxWidth={`${250 / 16}rem`}>\n                <Typography textColor=\"neutral800\" fontWeight=\"bold\" ellipsis>\n                  {token.name}\n                </Typography>\n              </TableImpl.Cell>\n              <TableImpl.Cell maxWidth={`${250 / 16}rem`}>\n                <Typography textColor=\"neutral800\" ellipsis>\n                  {token.description}\n                </Typography>\n              </TableImpl.Cell>\n              <TableImpl.Cell>\n                <Typography textColor=\"neutral800\">\n                  {/* @ts-expect-error One of the tokens doesn't have createdAt */}\n                  <RelativeTime timestamp={new Date(token.createdAt)} />\n                </Typography>\n              </TableImpl.Cell>\n              <TableImpl.Cell>\n                {token.lastUsedAt && (\n                  <Typography textColor=\"neutral800\">\n                    <RelativeTime\n                      timestamp={new Date(token.lastUsedAt)}\n                      customIntervals={[\n                        {\n                          unit: 'hours',\n                          threshold: 1,\n                          text: formatMessage({\n                            id: 'Settings.apiTokens.lastHour',\n                            defaultMessage: 'last hour',\n                          }),\n                        },\n                      ]}\n                    />\n                  </Typography>\n                )}\n              </TableImpl.Cell>\n              {canUpdate || canRead || canDelete ? (\n                <TableImpl.Cell>\n                  <Flex justifyContent=\"end\">\n                    {canUpdate && <UpdateButton tokenName={token.name} tokenId={token.id} />}\n                    {canDelete && (\n                      <DeleteButton\n                        tokenName={token.name}\n                        onClickDelete={() => onConfirmDelete?.(token.id)}\n                        tokenType={tokenType}\n                      />\n                    )}\n                  </Flex>\n                </TableImpl.Cell>\n              ) : null}\n            </TableImpl.Row>\n          ))}\n        </TableImpl.Body>\n      </TableImpl.Content>\n    </TableImpl.Root>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * CRUD Buttons\n * -----------------------------------------------------------------------------------------------*/\n\nconst MESSAGES_MAP = {\n  edit: {\n    id: 'app.component.table.edit',\n    defaultMessage: 'Edit {target}',\n  },\n  read: {\n    id: 'app.component.table.read',\n    defaultMessage: 'Read {target}',\n  },\n};\n\ninterface DefaultButtonProps {\n  tokenName: string;\n  tokenId: Entity.ID;\n  buttonType?: 'edit' | 'read';\n  children: React.ReactNode;\n}\n\nconst DefaultButton = ({\n  tokenName,\n  tokenId,\n  buttonType = 'edit',\n  children,\n}: DefaultButtonProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <LinkStyled\n      forwardedAs={NavLink}\n      to={tokenId.toString()}\n      title={formatMessage(MESSAGES_MAP[buttonType], { target: tokenName })}\n    >\n      {children}\n    </LinkStyled>\n  );\n};\n\nconst LinkStyled = styled(Link)`\n  svg {\n    path {\n      fill: ${({ theme }) => theme.colors.neutral500};\n    }\n  }\n\n  &:hover,\n  &:focus {\n    svg {\n      path {\n        fill: ${({ theme }) => theme.colors.neutral800};\n      }\n    }\n  }\n`;\n\ninterface DeleteButtonProps extends Pick<ButtonProps, 'tokenName'>, Pick<TableProps, 'tokenType'> {\n  onClickDelete: () => void;\n}\n\nconst DeleteButton = ({ tokenName, onClickDelete, tokenType }: DeleteButtonProps) => {\n  const { formatMessage } = useIntl();\n  const { trackUsage } = useTracking();\n  const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);\n  const handleClickDelete = () => {\n    setShowConfirmDialog(false);\n    trackUsage('willDeleteToken', {\n      tokenType,\n    });\n    onClickDelete();\n  };\n\n  return (\n    <Box paddingLeft={1} onClick={(e) => e.stopPropagation()}>\n      <IconButton\n        onClick={() => {\n          setShowConfirmDialog(true);\n        }}\n        label={formatMessage(\n          {\n            id: 'global.delete-target',\n            defaultMessage: 'Delete {target}',\n          },\n          { target: `${tokenName}` }\n        )}\n        name=\"delete\"\n        borderWidth={0}\n        icon={<Trash />}\n      />\n      <ConfirmDialog\n        onClose={() => setShowConfirmDialog(false)}\n        onConfirm={handleClickDelete}\n        isOpen={showConfirmDialog}\n      />\n    </Box>\n  );\n};\n\ninterface ButtonProps {\n  tokenName: string;\n  tokenId: Entity.ID;\n}\n\nconst UpdateButton = ({ tokenName, tokenId }: ButtonProps) => {\n  return (\n    <DefaultButton tokenName={tokenName} tokenId={tokenId}>\n      <Pencil width={12} />\n    </DefaultButton>\n  );\n};\n\nexport { Table };\nexport type { TableProps };\n"],"names":["TableImpl"],"mappings":"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"}