@strapi/admin 5.0.0-beta.1 → 5.0.0-beta.11

package/dist/admin/Table-S0UNrz__.mjs

@@ -0,0 +1,183 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Link, useCollator, Typography, Flex, Dialog, Box, IconButton } from '@strapi/design-system';
+import { Trash, Pencil } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { useNavigate, NavLink } from 'react-router-dom';
+import { styled } from 'styled-components';
+import { o as useQueryParams, T as Table$1, C as ConfirmDialog } from './index-7Wlj8eA7.mjs';
+import * as React from 'react';
+import { intervalToDuration, isPast } from 'date-fns';
+import { d as useTracking } from './Theme-vNSAMTAv.mjs';
+
+const intervals = ["years", "months", "days", "hours", "minutes", "seconds"];
+const RelativeTime = React.forwardRef(
+  ({ timestamp, customIntervals = [], ...restProps }, forwardedRef) => {
+    const { formatRelativeTime, formatDate, formatTime } = useIntl();
+    const interval = intervalToDuration({
+      start: timestamp,
+      end: Date.now()
+      // see https://github.com/date-fns/date-fns/issues/2891 – No idea why it's all partial it returns it every time.
+    });
+    const unit = intervals.find((intervalUnit) => {
+      return interval[intervalUnit] > 0 && Object.keys(interval).includes(intervalUnit);
+    });
+    const relativeTime = isPast(timestamp) ? -interval[unit] : interval[unit];
+    const customInterval = customIntervals.find(
+      (custom) => interval[custom.unit] < custom.threshold
+    );
+    const displayText = customInterval ? customInterval.text : formatRelativeTime(relativeTime, unit, { numeric: "auto" });
+    return /* @__PURE__ */ jsx(
+      "time",
+      {
+        ref: forwardedRef,
+        dateTime: timestamp.toISOString(),
+        role: "time",
+        title: `${formatDate(timestamp)} ${formatTime(timestamp)}`,
+        ...restProps,
+        children: displayText
+      }
+    );
+  }
+);
+
+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: "25rem", children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", fontWeight: "bold", ellipsis: true, children: token.name }) }),
+      /* @__PURE__ */ jsx(Table$1.Cell, { maxWidth: "25rem", 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,
+    {
+      tag: 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 handleClickDelete = () => {
+    trackUsage("willDeleteToken", {
+      tokenType
+    });
+    onClickDelete();
+  };
+  return /* @__PURE__ */ jsx(Dialog.Root, { children: /* @__PURE__ */ jsxs(Box, { paddingLeft: 1, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsx(Dialog.Trigger, { children: /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        label: formatMessage(
+          {
+            id: "global.delete-target",
+            defaultMessage: "Delete {target}"
+          },
+          { target: `${tokenName}` }
+        ),
+        name: "delete",
+        borderWidth: 0,
+        children: /* @__PURE__ */ jsx(Trash, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx(ConfirmDialog, { onConfirm: handleClickDelete })
+  ] }) });
+};
+const UpdateButton = ({ tokenName, tokenId }) => {
+  return /* @__PURE__ */ jsx(DefaultButton, { tokenName, tokenId, children: /* @__PURE__ */ jsx(Pencil, { width: 12 }) });
+};
+
+export { Table as T };
+//# sourceMappingURL=Table-S0UNrz__.mjs.map

package/dist/admin/Table-S0UNrz__.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table-S0UNrz__.mjs","sources":["../../admin/src/components/RelativeTime.tsx","../../admin/src/pages/Settings/components/Tokens/Table.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Duration, intervalToDuration, isPast } from 'date-fns';\nimport { useIntl } from 'react-intl';\n\nconst intervals: Array<keyof Duration> = ['years', 'months', 'days', 'hours', 'minutes', 'seconds'];\n\ninterface CustomInterval {\n  unit: keyof Duration;\n  text: string;\n  threshold: number;\n}\n\ninterface RelativeTimeProps extends React.ComponentPropsWithoutRef<'time'> {\n  timestamp: Date;\n  customIntervals?: CustomInterval[];\n}\n\n/**\n * Displays the relative time between a given timestamp and the current time.\n * You can display a custom message for given time intervals by passing an array of custom intervals.\n *\n * @example\n * ```jsx\n * <caption>Display \"last hour\" if the timestamp is less than an hour ago</caption>\n * <RelativeTime\n *  timestamp={new Date('2021-01-01')}\n *  customIntervals={[\n *   { unit: 'hours', threshold: 1, text: 'last hour' },\n *  ]}\n * ```\n */\nconst RelativeTime = React.forwardRef<HTMLTimeElement, RelativeTimeProps>(\n  ({ timestamp, customIntervals = [], ...restProps }, forwardedRef) => {\n    const { formatRelativeTime, formatDate, formatTime } = useIntl();\n\n    /**\n     * TODO: make this auto-update, like a clock.\n     */\n    const interval = intervalToDuration({\n      start: timestamp,\n      end: Date.now(),\n      // see https://github.com/date-fns/date-fns/issues/2891 – No idea why it's all partial it returns it every time.\n    }) as Required<Duration>;\n\n    const unit = intervals.find((intervalUnit) => {\n      return interval[intervalUnit] > 0 && Object.keys(interval).includes(intervalUnit);\n    })!;\n\n    const relativeTime = isPast(timestamp) ? -interval[unit] : interval[unit];\n\n    // Display custom text if interval is less than the threshold\n    const customInterval = customIntervals.find(\n      (custom) => interval[custom.unit] < custom.threshold\n    );\n\n    const displayText = customInterval\n      ? customInterval.text\n      : formatRelativeTime(relativeTime, unit, { numeric: 'auto' });\n\n    return (\n      <time\n        ref={forwardedRef}\n        dateTime={timestamp.toISOString()}\n        role=\"time\"\n        title={`${formatDate(timestamp)} ${formatTime(timestamp)}`}\n        {...restProps}\n      >\n        {displayText}\n      </time>\n    );\n  }\n);\n\nexport { RelativeTime };\nexport type { CustomInterval, RelativeTimeProps };\n","import * as React from 'react';\n\nimport {\n  Box,\n  Flex,\n  IconButton,\n  Typography,\n  useCollator,\n  Link,\n  Dialog,\n} from '@strapi/design-system';\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';\nimport { useQueryParams } from '../../../../hooks/useQueryParams';\n\nimport type { Data } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * Table\n * -----------------------------------------------------------------------------------------------*/\n\ninterface TableProps\n  extends Pick<TableImpl.Props<SanitizedTransferToken | ApiToken>, 'headers' | 'isLoading'> {\n  onConfirmDelete: (id: Data.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: Data.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=\"25rem\">\n                <Typography textColor=\"neutral800\" fontWeight=\"bold\" ellipsis>\n                  {token.name}\n                </Typography>\n              </TableImpl.Cell>\n              <TableImpl.Cell maxWidth=\"25rem\">\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: Data.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      tag={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 handleClickDelete = () => {\n    trackUsage('willDeleteToken', {\n      tokenType,\n    });\n    onClickDelete();\n  };\n\n  return (\n    <Dialog.Root>\n      <Box<'div'> paddingLeft={1} onClick={(e) => e.stopPropagation()}>\n        <Dialog.Trigger>\n          <IconButton\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          >\n            <Trash />\n          </IconButton>\n        </Dialog.Trigger>\n        <ConfirmDialog onConfirm={handleClickDelete} />\n      </Box>\n    </Dialog.Root>\n  );\n};\n\ninterface ButtonProps {\n  tokenName: string;\n  tokenId: Data.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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"}

package/dist/admin/Table-YODk-_Dd.js

@@ -0,0 +1,205 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const designSystem = require('@strapi/design-system');
+const icons = require('@strapi/icons');
+const reactIntl = require('react-intl');
+const reactRouterDom = require('react-router-dom');
+const styledComponents = require('styled-components');
+const index = require('./index-PPLoirnr.js');
+const React = require('react');
+const dateFns = require('date-fns');
+const Theme = require('./Theme-QO8ntQqL.js');
+
+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 intervals = ["years", "months", "days", "hours", "minutes", "seconds"];
+const RelativeTime = React__namespace.forwardRef(
+  ({ timestamp, customIntervals = [], ...restProps }, forwardedRef) => {
+    const { formatRelativeTime, formatDate, formatTime } = reactIntl.useIntl();
+    const interval = dateFns.intervalToDuration({
+      start: timestamp,
+      end: Date.now()
+      // see https://github.com/date-fns/date-fns/issues/2891 – No idea why it's all partial it returns it every time.
+    });
+    const unit = intervals.find((intervalUnit) => {
+      return interval[intervalUnit] > 0 && Object.keys(interval).includes(intervalUnit);
+    });
+    const relativeTime = dateFns.isPast(timestamp) ? -interval[unit] : interval[unit];
+    const customInterval = customIntervals.find(
+      (custom) => interval[custom.unit] < custom.threshold
+    );
+    const displayText = customInterval ? customInterval.text : formatRelativeTime(relativeTime, unit, { numeric: "auto" });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "time",
+      {
+        ref: forwardedRef,
+        dateTime: timestamp.toISOString(),
+        role: "time",
+        title: `${formatDate(timestamp)} ${formatTime(timestamp)}`,
+        ...restProps,
+        children: displayText
+      }
+    );
+  }
+);
+
+const Table = ({
+  permissions,
+  headers = [],
+  isLoading = false,
+  tokens = [],
+  onConfirmDelete,
+  tokenType
+}) => {
+  const [{ query }] = index.useQueryParams();
+  const { formatMessage, locale } = reactIntl.useIntl();
+  const [, sortOrder] = query && query.sort ? query.sort.split(":") : [void 0, "ASC"];
+  const navigate = reactRouterDom.useNavigate();
+  const { trackUsage } = Theme.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: "25rem", children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { textColor: "neutral800", fontWeight: "bold", ellipsis: true, children: token.name }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(index.Table.Cell, { maxWidth: "25rem", 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(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(
+        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,
+    {
+      tag: reactRouterDom.NavLink,
+      to: tokenId.toString(),
+      title: formatMessage(MESSAGES_MAP[buttonType], { target: tokenName }),
+      children
+    }
+  );
+};
+const LinkStyled = styledComponents.styled(designSystem.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 } = Theme.useTracking();
+  const handleClickDelete = () => {
+    trackUsage("willDeleteToken", {
+      tokenType
+    });
+    onClickDelete();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Root, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Box, { paddingLeft: 1, onClick: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(designSystem.Dialog.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      designSystem.IconButton,
+      {
+        label: formatMessage(
+          {
+            id: "global.delete-target",
+            defaultMessage: "Delete {target}"
+          },
+          { target: `${tokenName}` }
+        ),
+        name: "delete",
+        borderWidth: 0,
+        children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(index.ConfirmDialog, { onConfirm: handleClickDelete })
+  ] }) });
+};
+const UpdateButton = ({ tokenName, tokenId }) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(DefaultButton, { tokenName, tokenId, children: /* @__PURE__ */ jsxRuntime.jsx(icons.Pencil, { width: 12 }) });
+};
+
+exports.Table = Table;
+//# sourceMappingURL=Table-YODk-_Dd.js.map

package/dist/admin/Table-YODk-_Dd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table-YODk-_Dd.js","sources":["../../admin/src/components/RelativeTime.tsx","../../admin/src/pages/Settings/components/Tokens/Table.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Duration, intervalToDuration, isPast } from 'date-fns';\nimport { useIntl } from 'react-intl';\n\nconst intervals: Array<keyof Duration> = ['years', 'months', 'days', 'hours', 'minutes', 'seconds'];\n\ninterface CustomInterval {\n  unit: keyof Duration;\n  text: string;\n  threshold: number;\n}\n\ninterface RelativeTimeProps extends React.ComponentPropsWithoutRef<'time'> {\n  timestamp: Date;\n  customIntervals?: CustomInterval[];\n}\n\n/**\n * Displays the relative time between a given timestamp and the current time.\n * You can display a custom message for given time intervals by passing an array of custom intervals.\n *\n * @example\n * ```jsx\n * <caption>Display \"last hour\" if the timestamp is less than an hour ago</caption>\n * <RelativeTime\n *  timestamp={new Date('2021-01-01')}\n *  customIntervals={[\n *   { unit: 'hours', threshold: 1, text: 'last hour' },\n *  ]}\n * ```\n */\nconst RelativeTime = React.forwardRef<HTMLTimeElement, RelativeTimeProps>(\n  ({ timestamp, customIntervals = [], ...restProps }, forwardedRef) => {\n    const { formatRelativeTime, formatDate, formatTime } = useIntl();\n\n    /**\n     * TODO: make this auto-update, like a clock.\n     */\n    const interval = intervalToDuration({\n      start: timestamp,\n      end: Date.now(),\n      // see https://github.com/date-fns/date-fns/issues/2891 – No idea why it's all partial it returns it every time.\n    }) as Required<Duration>;\n\n    const unit = intervals.find((intervalUnit) => {\n      return interval[intervalUnit] > 0 && Object.keys(interval).includes(intervalUnit);\n    })!;\n\n    const relativeTime = isPast(timestamp) ? -interval[unit] : interval[unit];\n\n    // Display custom text if interval is less than the threshold\n    const customInterval = customIntervals.find(\n      (custom) => interval[custom.unit] < custom.threshold\n    );\n\n    const displayText = customInterval\n      ? customInterval.text\n      : formatRelativeTime(relativeTime, unit, { numeric: 'auto' });\n\n    return (\n      <time\n        ref={forwardedRef}\n        dateTime={timestamp.toISOString()}\n        role=\"time\"\n        title={`${formatDate(timestamp)} ${formatTime(timestamp)}`}\n        {...restProps}\n      >\n        {displayText}\n      </time>\n    );\n  }\n);\n\nexport { RelativeTime };\nexport type { CustomInterval, RelativeTimeProps };\n","import * as React from 'react';\n\nimport {\n  Box,\n  Flex,\n  IconButton,\n  Typography,\n  useCollator,\n  Link,\n  Dialog,\n} from '@strapi/design-system';\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';\nimport { useQueryParams } from '../../../../hooks/useQueryParams';\n\nimport type { Data } from '@strapi/types';\n\n/* -------------------------------------------------------------------------------------------------\n * Table\n * -----------------------------------------------------------------------------------------------*/\n\ninterface TableProps\n  extends Pick<TableImpl.Props<SanitizedTransferToken | ApiToken>, 'headers' | 'isLoading'> {\n  onConfirmDelete: (id: Data.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: Data.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=\"25rem\">\n                <Typography textColor=\"neutral800\" fontWeight=\"bold\" ellipsis>\n                  {token.name}\n                </Typography>\n              </TableImpl.Cell>\n              <TableImpl.Cell maxWidth=\"25rem\">\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: Data.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      tag={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 handleClickDelete = () => {\n    trackUsage('willDeleteToken', {\n      tokenType,\n    });\n    onClickDelete();\n  };\n\n  return (\n    <Dialog.Root>\n      <Box<'div'> paddingLeft={1} onClick={(e) => e.stopPropagation()}>\n        <Dialog.Trigger>\n          <IconButton\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          >\n            <Trash />\n          </IconButton>\n        </Dialog.Trigger>\n        <ConfirmDialog onConfirm={handleClickDelete} />\n      </Box>\n    </Dialog.Root>\n  );\n};\n\ninterface ButtonProps {\n  tokenName: string;\n  tokenId: Data.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":["React","useIntl","intervalToDuration","isPast","jsx","useQueryParams","useNavigate","useTracking","useCollator","TableImpl","jsxs","Typography","Flex","NavLink","styled","Link","Dialog","Box","IconButton","Trash","ConfirmDialog","Pencil"],"mappings":"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"}