@strapi/admin 4.18.1-beta.0 → 4.18.1-experimental.0

package/dist/_chunks/Table-nKuv1TlJ.mjs

@@ -0,0 +1,206 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Tbody, Tr, Td, Typography, Flex, Box, IconButton } from "@strapi/design-system";
+import { Link } from "@strapi/design-system/v2";
+import { DynamicTable, useQueryParams, useTracking, onRowClick, pxToRem, RelativeTime, ConfirmDialog } from "@strapi/helper-plugin";
+import { Trash, Eye, Pencil } from "@strapi/icons";
+import { useIntl } from "react-intl";
+import { useHistory, NavLink } from "react-router-dom";
+import styled from "styled-components";
+const Table = ({
+  permissions,
+  headers = [],
+  contentType,
+  isLoading = false,
+  tokens = [],
+  onConfirmDelete,
+  tokenType
+}) => {
+  const { canDelete, canUpdate, canRead } = permissions;
+  return /* @__PURE__ */ jsx(
+    DynamicTable,
+    {
+      headers,
+      contentType,
+      rows: tokens,
+      withBulkActions: canDelete || canUpdate || canRead,
+      isLoading,
+      onConfirmDelete,
+      children: /* @__PURE__ */ jsx(
+        TableRows,
+        {
+          tokenType,
+          permissions,
+          onConfirmDelete
+        }
+      )
+    }
+  );
+};
+const TableRows = ({
+  tokenType,
+  permissions,
+  rows = [],
+  withBulkActions,
+  onConfirmDelete
+}) => {
+  const { canDelete, canUpdate, canRead } = permissions;
+  const [{ query }] = useQueryParams();
+  const { formatMessage } = useIntl();
+  const [, sortOrder] = query && query.sort ? query.sort.split(":") : [void 0, "ASC"];
+  const {
+    push,
+    location: { pathname }
+  } = useHistory();
+  const { trackUsage } = useTracking();
+  const sortedTokens = [...rows].sort((a, b) => {
+    const comparison = a.name.localeCompare(b.name);
+    return sortOrder === "DESC" ? -comparison : comparison;
+  });
+  return /* @__PURE__ */ jsx(Tbody, { children: sortedTokens.map((token) => {
+    return /* @__PURE__ */ jsxs(
+      Tr,
+      {
+        ...onRowClick({
+          fn() {
+            trackUsage("willEditTokenFromList", {
+              tokenType
+            });
+            push(`${pathname}/${token.id}`);
+          },
+          condition: canUpdate
+        }),
+        children: [
+          /* @__PURE__ */ jsx(Td, { maxWidth: pxToRem(250), children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", fontWeight: "bold", ellipsis: true, children: token.name }) }),
+          /* @__PURE__ */ jsx(Td, { maxWidth: pxToRem(250), children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", ellipsis: true, children: token.description }) }),
+          /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsx(Typography, { textColor: "neutral800", children: /* @__PURE__ */ jsx(RelativeTime, { timestamp: new Date(token.createdAt) }) }) }),
+          /* @__PURE__ */ jsx(Td, { 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"
+                  })
+                }
+              ]
+            }
+          ) }) }),
+          withBulkActions && /* @__PURE__ */ jsx(Td, { children: /* @__PURE__ */ jsxs(Flex, { justifyContent: "end", children: [
+            canUpdate && /* @__PURE__ */ jsx(UpdateButton, { tokenName: token.name, tokenId: token.id }),
+            !canUpdate && canRead && /* @__PURE__ */ jsx(ReadButton, { tokenName: token.name, tokenId: token.id }),
+            canDelete && /* @__PURE__ */ jsx(
+              DeleteButton,
+              {
+                tokenName: token.name,
+                onClickDelete: () => onConfirmDelete?.(token.id),
+                tokenType
+              }
+            )
+          ] }) })
+        ]
+      },
+      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();
+  const {
+    location: { pathname }
+  } = useHistory();
+  return /* @__PURE__ */ jsx(
+    LinkStyled,
+    {
+      forwardedAs: NavLink,
+      to: `${pathname}/${tokenId}`,
+      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,
+      {
+        onToggleDialog: () => setShowConfirmDialog(false),
+        onConfirm: handleClickDelete,
+        isOpen: showConfirmDialog
+      }
+    )
+  ] });
+};
+const ReadButton = ({ tokenName, tokenId }) => {
+  return /* @__PURE__ */ jsx(DefaultButton, { tokenName, tokenId, buttonType: "read", children: /* @__PURE__ */ jsx(Eye, {}) });
+};
+const UpdateButton = ({ tokenName, tokenId }) => {
+  return /* @__PURE__ */ jsx(DefaultButton, { tokenName, tokenId, children: /* @__PURE__ */ jsx(Pencil, { width: 12 }) });
+};
+export {
+  Table as T
+};
+//# sourceMappingURL=Table-nKuv1TlJ.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table-nKuv1TlJ.mjs","sources":["../../admin/src/pages/Settings/components/Tokens/Table.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, IconButton, Tbody, Td, Tr, Typography } from '@strapi/design-system';\nimport { Link } from '@strapi/design-system/v2';\nimport {\n  ConfirmDialog,\n  DynamicTable,\n  onRowClick,\n  pxToRem,\n  RelativeTime,\n  useQueryParams,\n  useTracking,\n  TableProps as DynamicTableProps,\n  TableRowProps,\n} from '@strapi/helper-plugin';\nimport { Eye, Pencil, Trash } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { NavLink, useHistory } from 'react-router-dom';\nimport styled from 'styled-components';\n\nimport { ApiToken } from '../../../../../../shared/contracts/api-token';\nimport { SanitizedTransferToken } from '../../../../../../shared/contracts/transfer';\n\nimport type { Entity } from '@strapi/types';\n\ninterface TokenTableRowData {\n  id: Entity.ID;\n  name: string;\n  description: string;\n  createdAt: string;\n  lastUsedAt: string;\n}\n\n/* -------------------------------------------------------------------------------------------------\n * Table\n * -----------------------------------------------------------------------------------------------*/\n\ninterface TableProps\n  extends Pick<\n    DynamicTableProps<TokenTableRowData>,\n    'contentType' | 'onConfirmDelete' | 'headers' | 'isLoading'\n  > {\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  contentType,\n  isLoading = false,\n  tokens = [],\n  onConfirmDelete,\n  tokenType,\n}: TableProps) => {\n  const { canDelete, canUpdate, canRead } = permissions;\n\n  /**\n   * TODO: This needs refactoring to the new `Table` component.\n   */\n  return (\n    <DynamicTable\n      headers={headers}\n      contentType={contentType}\n      rows={tokens}\n      withBulkActions={canDelete || canUpdate || canRead}\n      isLoading={isLoading}\n      onConfirmDelete={onConfirmDelete}\n    >\n      <TableRows\n        tokenType={tokenType}\n        permissions={permissions}\n        onConfirmDelete={onConfirmDelete}\n      />\n    </DynamicTable>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * TableRows\n * -----------------------------------------------------------------------------------------------*/\n\ninterface TableRowsProps\n  extends Pick<DynamicTableProps<TokenTableRowData>, 'onConfirmDelete'>,\n    Pick<TableRowProps<TokenTableRowData>, 'withBulkActions' | 'rows'>,\n    Pick<TableProps, 'tokenType'> {\n  permissions: {\n    canRead: boolean;\n    canDelete: boolean;\n    canUpdate: boolean;\n  };\n}\n\nconst TableRows = ({\n  tokenType,\n  permissions,\n  rows = [],\n  withBulkActions,\n  onConfirmDelete,\n}: TableRowsProps) => {\n  const { canDelete, canUpdate, canRead } = permissions;\n\n  const [{ query }] = useQueryParams<{ sort?: string }>();\n  const { formatMessage } = useIntl();\n  const [, sortOrder] = query && query.sort ? query.sort.split(':') : [undefined, 'ASC'];\n  const {\n    push,\n    location: { pathname },\n  } = useHistory();\n  const { trackUsage } = useTracking();\n\n  const sortedTokens = [...rows].sort((a, b) => {\n    const comparison = a.name.localeCompare(b.name);\n\n    return sortOrder === 'DESC' ? -comparison : comparison;\n  });\n\n  return (\n    <Tbody>\n      {sortedTokens.map((token) => {\n        return (\n          <Tr\n            key={token.id}\n            {...onRowClick({\n              fn() {\n                trackUsage('willEditTokenFromList', {\n                  tokenType,\n                });\n                push(`${pathname}/${token.id}`);\n              },\n              condition: canUpdate,\n            })}\n          >\n            <Td maxWidth={pxToRem(250)}>\n              <Typography textColor=\"neutral800\" fontWeight=\"bold\" ellipsis>\n                {token.name}\n              </Typography>\n            </Td>\n            <Td maxWidth={pxToRem(250)}>\n              <Typography textColor=\"neutral800\" ellipsis>\n                {token.description}\n              </Typography>\n            </Td>\n            <Td>\n              <Typography textColor=\"neutral800\">\n                <RelativeTime timestamp={new Date(token.createdAt)} />\n              </Typography>\n            </Td>\n            <Td>\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            </Td>\n\n            {withBulkActions && (\n              <Td>\n                <Flex justifyContent=\"end\">\n                  {canUpdate && <UpdateButton tokenName={token.name} tokenId={token.id} />}\n                  {!canUpdate && canRead && (\n                    <ReadButton tokenName={token.name} tokenId={token.id} />\n                  )}\n                  {canDelete && (\n                    <DeleteButton\n                      tokenName={token.name}\n                      onClickDelete={() => onConfirmDelete?.(token.id)}\n                      tokenType={tokenType}\n                    />\n                  )}\n                </Flex>\n              </Td>\n            )}\n          </Tr>\n        );\n      })}\n    </Tbody>\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  const {\n    location: { pathname },\n  } = useHistory();\n\n  return (\n    <LinkStyled\n      forwardedAs={NavLink}\n      to={`${pathname}/${tokenId}`}\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        onToggleDialog={() => 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 ReadButton = ({ tokenName, tokenId }: ButtonProps) => {\n  return (\n    <DefaultButton tokenName={tokenName} tokenId={tokenId} buttonType=\"read\">\n      <Eye />\n    </DefaultButton>\n  );\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":[],"mappings":"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"}

package/dist/_chunks/TokenTypeSelect-gSy4facM.mjs

@@ -0,0 +1,353 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { HeaderLayout, Flex, Button, IconButton, SingleSelect, SingleSelectOption, Typography, Textarea, TextInput } from "@strapi/design-system";
+import { Link } from "@strapi/design-system/v2";
+import { useNotification, useAPIErrorHandler, ConfirmDialog, useTracking, useClipboard, ContentBox } from "@strapi/helper-plugin";
+import { Check, ArrowLeft, Refresh, Duplicate, Key } from "@strapi/icons";
+import { useIntl } from "react-intl";
+import { NavLink } from "react-router-dom";
+import { O as useRegenerateTokenMutation } from "./index-nxvCbsRp.mjs";
+import { format, addDays } from "date-fns";
+import * as locales from "date-fns/locale";
+const Regenerate = ({ onRegenerate, url }) => {
+  const { formatMessage } = useIntl();
+  const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);
+  const [isLoadingConfirmation, setIsLoadingConfirmation] = React.useState(false);
+  const toggleNotification = useNotification();
+  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
+  const [regenerateToken] = useRegenerateTokenMutation();
+  const regenerateData = async () => {
+    try {
+      const res = await regenerateToken(url);
+      if ("error" in res) {
+        toggleNotification({
+          type: "warning",
+          message: formatAPIError(res.error)
+        });
+        return;
+      }
+      if (onRegenerate) {
+        onRegenerate(res.data.accessKey);
+      }
+    } catch (error) {
+      toggleNotification({
+        type: "warning",
+        message: {
+          id: "notification.error",
+          defaultMessage: "Something went wrong"
+        }
+      });
+    } finally {
+      setIsLoadingConfirmation(false);
+    }
+  };
+  const handleConfirmRegeneration = async () => {
+    regenerateData();
+    setShowConfirmDialog(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        startIcon: /* @__PURE__ */ jsx(Refresh, {}),
+        type: "button",
+        size: "S",
+        variant: "tertiary",
+        onClick: () => setShowConfirmDialog(true),
+        name: "regenerate",
+        children: formatMessage({
+          id: "Settings.tokens.regenerate",
+          defaultMessage: "Regenerate"
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        bodyText: {
+          id: "Settings.tokens.popUpWarning.message",
+          defaultMessage: "Are you sure you want to regenerate this token?"
+        },
+        iconRightButton: /* @__PURE__ */ jsx(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"
+        }
+      }
+    )
+  ] });
+};
+const FormHead = ({
+  title,
+  token,
+  setToken,
+  canEditInputs,
+  canRegenerate,
+  isSubmitting,
+  backUrl,
+  regenerateUrl
+}) => {
+  const { formatMessage } = useIntl();
+  const handleRegenerate = (newKey) => {
+    setToken({
+      ...token,
+      accessKey: newKey
+    });
+  };
+  return /* @__PURE__ */ jsx(
+    HeaderLayout,
+    {
+      title: token?.name || formatMessage(title),
+      primaryAction: canEditInputs ? /* @__PURE__ */ jsxs(Flex, { gap: 2, children: [
+        canRegenerate && token?.id && /* @__PURE__ */ jsx(
+          Regenerate,
+          {
+            onRegenerate: handleRegenerate,
+            url: `${regenerateUrl}${token?.id ?? ""}`
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            disabled: isSubmitting,
+            loading: isSubmitting,
+            startIcon: /* @__PURE__ */ jsx(Check, {}),
+            type: "submit",
+            size: "S",
+            children: formatMessage({
+              id: "global.save",
+              defaultMessage: "Save"
+            })
+          }
+        )
+      ] }) : canRegenerate && token?.id && /* @__PURE__ */ jsx(
+        Regenerate,
+        {
+          onRegenerate: handleRegenerate,
+          url: `${regenerateUrl}${token?.id ?? ""}`
+        }
+      ),
+      navigationAction: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Link, { as: NavLink, startIcon: /* @__PURE__ */ jsx(ArrowLeft, {}), to: backUrl, children: formatMessage({
+        id: "global.back",
+        defaultMessage: "Back"
+      }) }) }),
+      ellipsis: true
+    }
+  );
+};
+const TokenBox = ({ token, tokenType }) => {
+  const { formatMessage } = useIntl();
+  const toggleNotification = useNotification();
+  const { trackUsage } = useTracking();
+  const { copy } = useClipboard();
+  const handleClick = (token2) => async () => {
+    if (token2) {
+      const didCopy = await copy(token2);
+      if (didCopy) {
+        trackUsage("didCopyTokenKey", {
+          tokenType
+        });
+        toggleNotification({
+          type: "success",
+          message: { id: "Settings.tokens.notification.copied" }
+        });
+      }
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    ContentBox,
+    {
+      endAction: token && /* @__PURE__ */ jsx("span", { style: { alignSelf: "start" }, children: /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          label: formatMessage({
+            id: "app.component.CopyToClipboard.label",
+            defaultMessage: "Copy to clipboard"
+          }),
+          onClick: handleClick(token),
+          borderWidth: 0,
+          icon: /* @__PURE__ */ jsx(Duplicate, {}),
+          style: { padding: 0, height: "1rem" }
+        }
+      ) }),
+      title: token || formatMessage({
+        id: "Settings.tokens.copy.editTitle",
+        defaultMessage: "This token isn’t accessible anymore."
+      }),
+      subtitle: token ? formatMessage({
+        id: "Settings.tokens.copy.lastWarning",
+        defaultMessage: "Make sure to copy this token, you won’t be able to see it again!"
+      }) : formatMessage({
+        id: "Settings.tokens.copy.editMessage",
+        defaultMessage: "For security reasons, you can only see your token once."
+      }),
+      icon: /* @__PURE__ */ jsx(Key, {}),
+      iconBackground: "neutral100"
+    }
+  );
+};
+const getDateOfExpiration = (createdAt, duration, language = "en") => {
+  if (duration && typeof duration === "number") {
+    const durationInDays = duration / 24 / 60 / 60 / 1e3;
+    return format(addDays(new Date(createdAt), durationInDays), "PPP", {
+      // @ts-expect-error I don't know how to fix this
+      locale: locales[language]
+    });
+  }
+  return "Unlimited";
+};
+const isErrorMessageMessageDescriptor = (message) => {
+  return typeof message === "object" && message !== null && "id" in message;
+};
+const LifeSpanInput = ({
+  token,
+  error,
+  value,
+  onChange,
+  isCreating
+}) => {
+  const { formatMessage } = useIntl();
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      SingleSelect,
+      {
+        name: "lifespan",
+        label: formatMessage({
+          id: "Settings.tokens.form.duration",
+          defaultMessage: "Token duration"
+        }),
+        value,
+        error: error ? formatMessage(
+          isErrorMessageMessageDescriptor(error) ? error : { id: error, defaultMessage: error }
+        ) : void 0,
+        onChange: (value2) => {
+          onChange({ target: { name: "lifespan", value: value2 } });
+        },
+        required: true,
+        disabled: !isCreating,
+        placeholder: "Select",
+        children: [
+          /* @__PURE__ */ jsx(SingleSelectOption, { value: "604800000", children: formatMessage({
+            id: "Settings.tokens.duration.7-days",
+            defaultMessage: "7 days"
+          }) }),
+          /* @__PURE__ */ jsx(SingleSelectOption, { value: "2592000000", children: formatMessage({
+            id: "Settings.tokens.duration.30-days",
+            defaultMessage: "30 days"
+          }) }),
+          /* @__PURE__ */ jsx(SingleSelectOption, { value: "7776000000", children: formatMessage({
+            id: "Settings.tokens.duration.90-days",
+            defaultMessage: "90 days"
+          }) }),
+          /* @__PURE__ */ jsx(SingleSelectOption, { value: "0", children: formatMessage({
+            id: "Settings.tokens.duration.unlimited",
+            defaultMessage: "Unlimited"
+          }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Typography, { variant: "pi", textColor: "neutral600", children: !isCreating && `${formatMessage({
+      id: "Settings.tokens.duration.expiration-date",
+      defaultMessage: "Expiration date"
+      // @ts-expect-error – TODO: fix this.
+    })}: ${getDateOfExpiration(token?.createdAt, parseInt(value ?? "", 10))}` })
+  ] });
+};
+const TokenDescription = ({
+  error,
+  value,
+  onChange,
+  canEditInputs
+}) => {
+  const { formatMessage } = useIntl();
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      label: formatMessage({
+        id: "Settings.tokens.form.description",
+        defaultMessage: "Description"
+      }),
+      id: "description",
+      error: error ? formatMessage(
+        isErrorMessageMessageDescriptor(error) ? error : {
+          id: error,
+          defaultMessage: error
+        }
+      ) : void 0,
+      onChange,
+      disabled: !canEditInputs,
+      children: value
+    }
+  );
+};
+const TokenName = ({ error, value, onChange, canEditInputs }) => {
+  const { formatMessage } = useIntl();
+  return /* @__PURE__ */ jsx(
+    TextInput,
+    {
+      name: "name",
+      error: error ? formatMessage(
+        isErrorMessageMessageDescriptor(error) ? error : { id: error, defaultMessage: error }
+      ) : void 0,
+      label: formatMessage({
+        id: "Settings.tokens.form.name",
+        defaultMessage: "Name"
+      }),
+      onChange,
+      value,
+      disabled: !canEditInputs,
+      required: true
+    }
+  );
+};
+const TokenTypeSelect = ({
+  name = "type",
+  error,
+  value,
+  onChange,
+  canEditInputs,
+  options = [],
+  label
+}) => {
+  const { formatMessage } = useIntl();
+  return /* @__PURE__ */ jsx(
+    SingleSelect,
+    {
+      name,
+      label: formatMessage({
+        id: label.id,
+        defaultMessage: label.defaultMessage
+      }),
+      value,
+      error: error ? formatMessage(
+        isErrorMessageMessageDescriptor(error) ? error : { id: error, defaultMessage: error }
+      ) : void 0,
+      onChange,
+      placeholder: "Select",
+      required: true,
+      disabled: !canEditInputs,
+      children: options && options.map(({ value: value2, label: label2 }) => /* @__PURE__ */ jsx(SingleSelectOption, { value: value2, children: formatMessage(label2) }, value2))
+    }
+  );
+};
+export {
+  FormHead as F,
+  LifeSpanInput as L,
+  TokenName as T,
+  TokenDescription as a,
+  TokenTypeSelect as b,
+  TokenBox as c
+};
+//# sourceMappingURL=TokenTypeSelect-gSy4facM.mjs.map

package/dist/_chunks/TokenTypeSelect-gSy4facM.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"TokenTypeSelect-gSy4facM.mjs","sources":["../../admin/src/pages/Settings/components/Tokens/FormHead.tsx","../../admin/src/pages/Settings/components/Tokens/TokenBox.tsx","../../admin/src/pages/Settings/pages/ApiTokens/EditView/utils/getDateOfExpiration.ts","../../admin/src/pages/Settings/utils/forms.ts","../../admin/src/pages/Settings/components/Tokens/LifeSpanInput.tsx","../../admin/src/pages/Settings/components/Tokens/TokenDescription.tsx","../../admin/src/pages/Settings/components/Tokens/TokenName.tsx","../../admin/src/pages/Settings/components/Tokens/TokenTypeSelect.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, Flex, HeaderLayout } from '@strapi/design-system';\nimport { Link } from '@strapi/design-system/v2';\nimport { ConfirmDialog, useAPIErrorHandler, useNotification } from '@strapi/helper-plugin';\nimport { ArrowLeft, Check, Refresh } from '@strapi/icons';\nimport { MessageDescriptor, useIntl } from 'react-intl';\nimport { NavLink } from 'react-router-dom';\n\nimport { useRegenerateTokenMutation } from '../../../../services/api';\n\nimport type { Entity } from '@strapi/types';\n\ninterface RegenerateProps {\n  onRegenerate?: (newKey: string) => void;\n  url: string;\n}\n\nconst Regenerate = ({ onRegenerate, url }: RegenerateProps) => {\n  const { formatMessage } = useIntl();\n  const [showConfirmDialog, setShowConfirmDialog] = React.useState(false);\n\n  const [isLoadingConfirmation, setIsLoadingConfirmation] = React.useState(false);\n  const toggleNotification = useNotification();\n  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();\n\n  const [regenerateToken] = useRegenerateTokenMutation();\n\n  const regenerateData = async () => {\n    try {\n      const res = await regenerateToken(url);\n\n      if ('error' in res) {\n        toggleNotification({\n          type: 'warning',\n          message: formatAPIError(res.error),\n        });\n\n        return;\n      }\n\n      if (onRegenerate) {\n        onRegenerate(res.data.accessKey);\n      }\n    } catch (error) {\n      toggleNotification({\n        type: 'warning',\n        message: {\n          id: 'notification.error',\n          defaultMessage: 'Something went wrong',\n        },\n      });\n    } finally {\n      setIsLoadingConfirmation(false);\n    }\n  };\n\n  const handleConfirmRegeneration = async () => {\n    regenerateData();\n    setShowConfirmDialog(false);\n  };\n\n  return (\n    <>\n      <Button\n        startIcon={<Refresh />}\n        type=\"button\"\n        size=\"S\"\n        variant=\"tertiary\"\n        onClick={() => setShowConfirmDialog(true)}\n        name=\"regenerate\"\n      >\n        {formatMessage({\n          id: 'Settings.tokens.regenerate',\n          defaultMessage: 'Regenerate',\n        })}\n      </Button>\n\n      <ConfirmDialog\n        bodyText={{\n          id: 'Settings.tokens.popUpWarning.message',\n          defaultMessage: 'Are you sure you want to regenerate this token?',\n        }}\n        iconRightButton={<Refresh />}\n        isConfirmButtonLoading={isLoadingConfirmation}\n        isOpen={showConfirmDialog}\n        onToggleDialog={() => setShowConfirmDialog(false)}\n        onConfirm={handleConfirmRegeneration}\n        leftButtonText={{\n          id: 'Settings.tokens.Button.cancel',\n          defaultMessage: 'Cancel',\n        }}\n        rightButtonText={{\n          id: 'Settings.tokens.Button.regenerate',\n          defaultMessage: 'Regenerate',\n        }}\n        title={{\n          id: 'Settings.tokens.RegenerateDialog.title',\n          defaultMessage: 'Regenerate token',\n        }}\n      />\n    </>\n  );\n};\n\ninterface Token {\n  id: Entity.ID;\n  name: string;\n}\n\ninterface FormHeadProps<TToken extends Token | null> {\n  title: MessageDescriptor;\n  token: TToken;\n  canEditInputs: boolean;\n  canRegenerate: boolean;\n  setToken: (token: TToken) => void;\n  isSubmitting: boolean;\n  backUrl: string;\n  regenerateUrl: string;\n}\n\nexport const FormHead = <TToken extends Token | null>({\n  title,\n  token,\n  setToken,\n  canEditInputs,\n  canRegenerate,\n  isSubmitting,\n  backUrl,\n  regenerateUrl,\n}: FormHeadProps<TToken>) => {\n  const { formatMessage } = useIntl();\n  const handleRegenerate = (newKey: string) => {\n    setToken({\n      ...token,\n      accessKey: newKey,\n    });\n  };\n\n  return (\n    <HeaderLayout\n      title={token?.name || formatMessage(title)}\n      primaryAction={\n        canEditInputs ? (\n          <Flex gap={2}>\n            {canRegenerate && token?.id && (\n              <Regenerate\n                onRegenerate={handleRegenerate}\n                url={`${regenerateUrl}${token?.id ?? ''}`}\n              />\n            )}\n            <Button\n              disabled={isSubmitting}\n              loading={isSubmitting}\n              startIcon={<Check />}\n              type=\"submit\"\n              size=\"S\"\n            >\n              {formatMessage({\n                id: 'global.save',\n                defaultMessage: 'Save',\n              })}\n            </Button>\n          </Flex>\n        ) : (\n          canRegenerate &&\n          token?.id && (\n            <Regenerate\n              onRegenerate={handleRegenerate}\n              url={`${regenerateUrl}${token?.id ?? ''}`}\n            />\n          )\n        )\n      }\n      navigationAction={\n        <>\n          {/* @ts-expect-error polymorphic */}\n          <Link as={NavLink} startIcon={<ArrowLeft />} to={backUrl}>\n            {formatMessage({\n              id: 'global.back',\n              defaultMessage: 'Back',\n            })}\n          </Link>\n        </>\n      }\n      ellipsis\n    />\n  );\n};\n","import { IconButton } from '@strapi/design-system';\nimport { ContentBox, useClipboard, useNotification, useTracking } from '@strapi/helper-plugin';\nimport { Duplicate, Key } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\n\ninterface TokenBoxProps {\n  token?: string;\n  tokenType: 'transfer-token' | 'api-token';\n}\n\nexport const TokenBox = ({ token, tokenType }: TokenBoxProps) => {\n  const { formatMessage } = useIntl();\n  const toggleNotification = useNotification();\n  const { trackUsage } = useTracking();\n\n  const { copy } = useClipboard();\n\n  const handleClick = (token: TokenBoxProps['token']) => async () => {\n    if (token) {\n      const didCopy = await copy(token);\n\n      if (didCopy) {\n        trackUsage('didCopyTokenKey', {\n          tokenType,\n        });\n        toggleNotification({\n          type: 'success',\n          message: { id: 'Settings.tokens.notification.copied' },\n        });\n      }\n    }\n  };\n\n  return (\n    <ContentBox\n      endAction={\n        token && (\n          <span style={{ alignSelf: 'start' }}>\n            <IconButton\n              label={formatMessage({\n                id: 'app.component.CopyToClipboard.label',\n                defaultMessage: 'Copy to clipboard',\n              })}\n              onClick={handleClick(token)}\n              borderWidth={0}\n              icon={<Duplicate />}\n              style={{ padding: 0, height: '1rem' }}\n            />\n          </span>\n        )\n      }\n      title={\n        token ||\n        formatMessage({\n          id: 'Settings.tokens.copy.editTitle',\n          defaultMessage: 'This token isn’t accessible anymore.',\n        })\n      }\n      subtitle={\n        token\n          ? formatMessage({\n              id: 'Settings.tokens.copy.lastWarning',\n              defaultMessage: 'Make sure to copy this token, you won’t be able to see it again!',\n            })\n          : formatMessage({\n              id: 'Settings.tokens.copy.editMessage',\n              defaultMessage: 'For security reasons, you can only see your token once.',\n            })\n      }\n      icon={<Key />}\n      iconBackground=\"neutral100\"\n    />\n  );\n};\n","import { addDays, format } from 'date-fns';\nimport * as locales from 'date-fns/locale';\n\nexport const getDateOfExpiration = (\n  createdAt: string,\n  duration: number | null,\n  language: string = 'en'\n) => {\n  if (duration && typeof duration === 'number') {\n    const durationInDays = duration / 24 / 60 / 60 / 1000;\n\n    return format(addDays(new Date(createdAt), durationInDays), 'PPP', {\n      // @ts-expect-error I don't know how to fix this\n      locale: locales[language],\n    });\n  }\n\n  return 'Unlimited';\n};\n","import { MessageDescriptor } from 'react-intl';\n\nconst isErrorMessageMessageDescriptor = (\n  message: string | MessageDescriptor\n): message is MessageDescriptor => {\n  return typeof message === 'object' && message !== null && 'id' in message;\n};\n\nexport { isErrorMessageMessageDescriptor };\n","import { SingleSelectOption, SingleSelect, Typography } from '@strapi/design-system';\nimport { MessageDescriptor, useIntl } from 'react-intl';\n\nimport { getDateOfExpiration } from '../../pages/ApiTokens/EditView/utils/getDateOfExpiration';\nimport { isErrorMessageMessageDescriptor } from '../../utils/forms';\n\nimport type { ApiToken } from '../../../../../../shared/contracts/api-token';\nimport type { TransferToken } from '../../../../../../shared/contracts/transfer';\n\ninterface LifeSpanInputProps {\n  error?: string | MessageDescriptor;\n  value?: string | number | null;\n  onChange: (event: { target: { name: string; value: string } }) => void;\n  isCreating: boolean;\n  token: Partial<TransferToken> | Partial<ApiToken> | null;\n}\n\nexport const LifeSpanInput = ({\n  token,\n  error,\n  value,\n  onChange,\n  isCreating,\n}: LifeSpanInputProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <>\n      <SingleSelect\n        name=\"lifespan\"\n        label={formatMessage({\n          id: 'Settings.tokens.form.duration',\n          defaultMessage: 'Token duration',\n        })}\n        value={value}\n        error={\n          error\n            ? formatMessage(\n                isErrorMessageMessageDescriptor(error)\n                  ? error\n                  : { id: error, defaultMessage: error }\n              )\n            : undefined\n        }\n        onChange={(value) => {\n          // @ts-expect-error – DS v2 won't support number types for select\n          onChange({ target: { name: 'lifespan', value } });\n        }}\n        required\n        disabled={!isCreating}\n        placeholder=\"Select\"\n      >\n        <SingleSelectOption value=\"604800000\">\n          {formatMessage({\n            id: 'Settings.tokens.duration.7-days',\n            defaultMessage: '7 days',\n          })}\n        </SingleSelectOption>\n        <SingleSelectOption value=\"2592000000\">\n          {formatMessage({\n            id: 'Settings.tokens.duration.30-days',\n            defaultMessage: '30 days',\n          })}\n        </SingleSelectOption>\n        <SingleSelectOption value=\"7776000000\">\n          {formatMessage({\n            id: 'Settings.tokens.duration.90-days',\n            defaultMessage: '90 days',\n          })}\n        </SingleSelectOption>\n        <SingleSelectOption value=\"0\">\n          {formatMessage({\n            id: 'Settings.tokens.duration.unlimited',\n            defaultMessage: 'Unlimited',\n          })}\n        </SingleSelectOption>\n      </SingleSelect>\n      <Typography variant=\"pi\" textColor=\"neutral600\">\n        {!isCreating &&\n          `${formatMessage({\n            id: 'Settings.tokens.duration.expiration-date',\n            defaultMessage: 'Expiration date',\n            // @ts-expect-error – TODO: fix this.\n          })}: ${getDateOfExpiration(token?.createdAt, parseInt(value ?? '', 10))}`}\n      </Typography>\n    </>\n  );\n};\n","import { Textarea, TextareaProps } from '@strapi/design-system';\nimport { MessageDescriptor, useIntl } from 'react-intl';\n\nimport { isErrorMessageMessageDescriptor } from '../../utils/forms';\n\ninterface TokenDescriptionProps extends Pick<TextareaProps, 'onChange' | 'value'> {\n  error?: string | MessageDescriptor;\n  canEditInputs: boolean;\n}\n\nexport const TokenDescription = ({\n  error,\n  value,\n  onChange,\n  canEditInputs,\n}: TokenDescriptionProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <Textarea\n      label={formatMessage({\n        id: 'Settings.tokens.form.description',\n        defaultMessage: 'Description',\n      })}\n      id=\"description\"\n      error={\n        error\n          ? formatMessage(\n              isErrorMessageMessageDescriptor(error)\n                ? error\n                : {\n                    id: error,\n                    defaultMessage: error,\n                  }\n            )\n          : undefined\n      }\n      onChange={onChange}\n      disabled={!canEditInputs}\n    >\n      {value}\n    </Textarea>\n  );\n};\n","import { TextInput, TextInputProps } from '@strapi/design-system';\nimport { MessageDescriptor, useIntl } from 'react-intl';\n\nimport { isErrorMessageMessageDescriptor } from '../../utils/forms';\n\ninterface TokenNameProps extends Pick<TextInputProps, 'onChange' | 'value'> {\n  error?: string | MessageDescriptor;\n  canEditInputs: boolean;\n}\n\nexport const TokenName = ({ error, value, onChange, canEditInputs }: TokenNameProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <TextInput\n      name=\"name\"\n      error={\n        error\n          ? formatMessage(\n              isErrorMessageMessageDescriptor(error) ? error : { id: error, defaultMessage: error }\n            )\n          : undefined\n      }\n      label={formatMessage({\n        id: 'Settings.tokens.form.name',\n        defaultMessage: 'Name',\n      })}\n      onChange={onChange}\n      value={value}\n      disabled={!canEditInputs}\n      required\n    />\n  );\n};\n","import { SingleSelectOption, SingleSelect, SingleSelectProps } from '@strapi/design-system';\nimport { MessageDescriptor, useIntl } from 'react-intl';\n\nimport { isErrorMessageMessageDescriptor } from '../../utils/forms';\n\ninterface TokenTypeSelectProps extends Pick<SingleSelectProps, 'onChange' | 'value'> {\n  name?: string;\n  options: Array<{\n    label: MessageDescriptor;\n    value: string;\n  }>;\n  error?: string | MessageDescriptor;\n  canEditInputs: boolean;\n  label: MessageDescriptor;\n}\n\nexport const TokenTypeSelect = ({\n  name = 'type',\n  error,\n  value,\n  onChange,\n  canEditInputs,\n  options = [],\n  label,\n}: TokenTypeSelectProps) => {\n  const { formatMessage } = useIntl();\n\n  return (\n    <SingleSelect\n      name={name}\n      label={formatMessage({\n        id: label.id,\n        defaultMessage: label.defaultMessage,\n      })}\n      value={value}\n      error={\n        error\n          ? formatMessage(\n              isErrorMessageMessageDescriptor(error) ? error : { id: error, defaultMessage: error }\n            )\n          : undefined\n      }\n      onChange={onChange}\n      placeholder=\"Select\"\n      required\n      disabled={!canEditInputs}\n    >\n      {options &&\n        options.map(({ value, label }) => (\n          <SingleSelectOption key={value} value={value}>\n            {formatMessage(label)}\n          </SingleSelectOption>\n        ))}\n    </SingleSelect>\n  );\n};\n"],"names":["token","value","label"],"mappings":"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"}