@strapi/admin 5.21.0 → 5.23.0

package/dist/admin/admin/src/pages/Settings/components/Tokens/FormHead.js

@@ -6,6 +6,7 @@ var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var ConfirmDialog = require('../../../../components/ConfirmDialog.js');
+var Tours = require('../../../../components/GuidedTour/Tours.js');
 var Layout = require('../../../../components/Layouts/Layout.js');
 var BackButton = require('../../../../features/BackButton.js');
 var Notifications = require('../../../../features/Notifications.js');
@@ -125,20 +126,22 @@ const FormHead = ({ title, token, setToken, toggleToken, showToken, canShowToken
                     onRegenerate: handleRegenerate,
                     url: `${regenerateUrl}${token?.id ?? ''}`
                 }),
-                token?.id && toggleToken && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
-                    label: !canShowToken && formatMessage({
-                        id: 'Settings.tokens.encryptionKeyMissing',
-                        defaultMessage: 'In order to view the token, you need a valid encryption key in the admin configuration'
-                    }),
-                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
-                        type: "button",
-                        startIcon: showToken ? /*#__PURE__*/ jsxRuntime.jsx(icons.EyeStriked, {}) : /*#__PURE__*/ jsxRuntime.jsx(icons.Eye, {}),
-                        variant: "secondary",
-                        onClick: ()=>toggleToken?.(),
-                        disabled: !canShowToken,
-                        children: formatMessage({
-                            id: 'Settings.tokens.viewToken',
-                            defaultMessage: 'View token'
+                token?.id && toggleToken && /*#__PURE__*/ jsxRuntime.jsx(Tours.tours.apiTokens.ViewAPIToken, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Tooltip, {
+                        label: !canShowToken && formatMessage({
+                            id: 'Settings.tokens.encryptionKeyMissing',
+                            defaultMessage: 'In order to view the token, you need a valid encryption key in the admin configuration'
+                        }),
+                        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                            type: "button",
+                            startIcon: showToken ? /*#__PURE__*/ jsxRuntime.jsx(icons.EyeStriked, {}) : /*#__PURE__*/ jsxRuntime.jsx(icons.Eye, {}),
+                            variant: "secondary",
+                            onClick: ()=>toggleToken?.(),
+                            disabled: !canShowToken,
+                            children: formatMessage({
+                                id: 'Settings.tokens.viewToken',
+                                defaultMessage: 'View token'
+                            })
                         })
                     })
                 }),

package/dist/admin/admin/src/pages/Settings/components/Tokens/FormHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormHead.js","sources":["../../../../../../../../admin/src/pages/Settings/components/Tokens/FormHead.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, Dialog, Flex, Tooltip } from '@strapi/design-system';\nimport { Check, ArrowClockwise, Eye, EyeStriked } from '@strapi/icons';\nimport { MessageDescriptor, useIntl } from 'react-intl';\n\nimport { ConfirmDialog } from '../../../../components/ConfirmDialog';\nimport { Layouts } from '../../../../components/Layouts/Layout';\nimport { BackButton } from '../../../../features/BackButton';\nimport { useNotification } from '../../../../features/Notifications';\nimport { useAPIErrorHandler } from '../../../../hooks/useAPIErrorHandler';\nimport { useRegenerateTokenMutation } from '../../../../services/transferTokens';\n\nimport type { Data } 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: 'danger',\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: 'danger',\n        message: formatMessage({\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    <Dialog.Root open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>\n      <Dialog.Trigger>\n        <Button\n          startIcon={<ArrowClockwise />}\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      </Dialog.Trigger>\n\n      <ConfirmDialog\n        title={formatMessage({\n          id: 'Settings.tokens.RegenerateDialog.title',\n          defaultMessage: 'Regenerate token',\n        })}\n        endAction={\n          <Button\n            startIcon={<ArrowClockwise />}\n            loading={isLoadingConfirmation}\n            onClick={handleConfirmRegeneration}\n          >\n            {formatMessage({\n              id: 'Settings.tokens.Button.regenerate',\n              defaultMessage: 'Regenerate',\n            })}\n          </Button>\n        }\n      >\n        {formatMessage({\n          id: 'Settings.tokens.popUpWarning.message',\n          defaultMessage: 'Are you sure you want to regenerate this token?',\n        })}\n      </ConfirmDialog>\n    </Dialog.Root>\n  );\n};\n\ninterface Token {\n  id: Data.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  canShowToken?: boolean;\n  setToken: (token: TToken) => void;\n  toggleToken?: () => void;\n  showToken?: boolean;\n  isSubmitting: boolean;\n  regenerateUrl: string;\n}\n\nexport const FormHead = <TToken extends Token | null>({\n  title,\n  token,\n  setToken,\n  toggleToken,\n  showToken,\n  canShowToken,\n  canEditInputs,\n  canRegenerate,\n  isSubmitting,\n  regenerateUrl,\n}: FormHeadProps<TToken>) => {\n  const { formatMessage } = useIntl();\n  const handleRegenerate = (newKey: string) => {\n    setToken({\n      ...token,\n      accessKey: newKey,\n    });\n    toggleToken?.();\n  };\n\n  return (\n    <Layouts.Header\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            {token?.id && toggleToken && (\n              <Tooltip\n                label={\n                  !canShowToken &&\n                  formatMessage({\n                    id: 'Settings.tokens.encryptionKeyMissing',\n                    defaultMessage:\n                      'In order to view the token, you need a valid encryption key in the admin configuration',\n                  })\n                }\n              >\n                <Button\n                  type=\"button\"\n                  startIcon={showToken ? <EyeStriked /> : <Eye />}\n                  variant=\"secondary\"\n                  onClick={() => toggleToken?.()}\n                  disabled={!canShowToken}\n                >\n                  {formatMessage({\n                    id: 'Settings.tokens.viewToken',\n                    defaultMessage: 'View token',\n                  })}\n                </Button>\n              </Tooltip>\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={<BackButton />}\n      ellipsis\n    />\n  );\n};\n"],"names":["Regenerate","onRegenerate","url","formatMessage","useIntl","showConfirmDialog","setShowConfirmDialog","React","useState","isLoadingConfirmation","setIsLoadingConfirmation","toggleNotification","useNotification","_unstableFormatAPIError","formatAPIError","useAPIErrorHandler","regenerateToken","useRegenerateTokenMutation","regenerateData","res","type","message","error","data","accessKey","id","defaultMessage","handleConfirmRegeneration","_jsxs","Dialog","Root","open","onOpenChange","_jsx","Trigger","Button","startIcon","ArrowClockwise","size","variant","onClick","name","ConfirmDialog","title","endAction","loading","FormHead","token","setToken","toggleToken","showToken","canShowToken","canEditInputs","canRegenerate","isSubmitting","regenerateUrl","handleRegenerate","newKey","Layouts","Header","primaryAction","Flex","gap","Tooltip","label","EyeStriked","Eye","disabled","Check","navigationAction","BackButton","ellipsis"],"mappings":"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"}
+{"version":3,"file":"FormHead.js","sources":["../../../../../../../../admin/src/pages/Settings/components/Tokens/FormHead.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, Dialog, Flex, Tooltip } from '@strapi/design-system';\nimport { Check, ArrowClockwise, Eye, EyeStriked } from '@strapi/icons';\nimport { MessageDescriptor, useIntl } from 'react-intl';\n\nimport { ConfirmDialog } from '../../../../components/ConfirmDialog';\nimport { tours } from '../../../../components/GuidedTour/Tours';\nimport { Layouts } from '../../../../components/Layouts/Layout';\nimport { BackButton } from '../../../../features/BackButton';\nimport { useNotification } from '../../../../features/Notifications';\nimport { useAPIErrorHandler } from '../../../../hooks/useAPIErrorHandler';\nimport { useRegenerateTokenMutation } from '../../../../services/transferTokens';\n\nimport type { Data } 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: 'danger',\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: 'danger',\n        message: formatMessage({\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    <Dialog.Root open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>\n      <Dialog.Trigger>\n        <Button\n          startIcon={<ArrowClockwise />}\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      </Dialog.Trigger>\n\n      <ConfirmDialog\n        title={formatMessage({\n          id: 'Settings.tokens.RegenerateDialog.title',\n          defaultMessage: 'Regenerate token',\n        })}\n        endAction={\n          <Button\n            startIcon={<ArrowClockwise />}\n            loading={isLoadingConfirmation}\n            onClick={handleConfirmRegeneration}\n          >\n            {formatMessage({\n              id: 'Settings.tokens.Button.regenerate',\n              defaultMessage: 'Regenerate',\n            })}\n          </Button>\n        }\n      >\n        {formatMessage({\n          id: 'Settings.tokens.popUpWarning.message',\n          defaultMessage: 'Are you sure you want to regenerate this token?',\n        })}\n      </ConfirmDialog>\n    </Dialog.Root>\n  );\n};\n\ninterface Token {\n  id: Data.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  canShowToken?: boolean;\n  setToken: (token: TToken) => void;\n  toggleToken?: () => void;\n  showToken?: boolean;\n  isSubmitting: boolean;\n  regenerateUrl: string;\n}\n\nexport const FormHead = <TToken extends Token | null>({\n  title,\n  token,\n  setToken,\n  toggleToken,\n  showToken,\n  canShowToken,\n  canEditInputs,\n  canRegenerate,\n  isSubmitting,\n  regenerateUrl,\n}: FormHeadProps<TToken>) => {\n  const { formatMessage } = useIntl();\n  const handleRegenerate = (newKey: string) => {\n    setToken({\n      ...token,\n      accessKey: newKey,\n    });\n    toggleToken?.();\n  };\n\n  return (\n    <Layouts.Header\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            {token?.id && toggleToken && (\n              <tours.apiTokens.ViewAPIToken>\n                <Tooltip\n                  label={\n                    !canShowToken &&\n                    formatMessage({\n                      id: 'Settings.tokens.encryptionKeyMissing',\n                      defaultMessage:\n                        'In order to view the token, you need a valid encryption key in the admin configuration',\n                    })\n                  }\n                >\n                  <Button\n                    type=\"button\"\n                    startIcon={showToken ? <EyeStriked /> : <Eye />}\n                    variant=\"secondary\"\n                    onClick={() => toggleToken?.()}\n                    disabled={!canShowToken}\n                  >\n                    {formatMessage({\n                      id: 'Settings.tokens.viewToken',\n                      defaultMessage: 'View token',\n                    })}\n                  </Button>\n                </Tooltip>\n              </tours.apiTokens.ViewAPIToken>\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={<BackButton />}\n      ellipsis\n    />\n  );\n};\n"],"names":["Regenerate","onRegenerate","url","formatMessage","useIntl","showConfirmDialog","setShowConfirmDialog","React","useState","isLoadingConfirmation","setIsLoadingConfirmation","toggleNotification","useNotification","_unstableFormatAPIError","formatAPIError","useAPIErrorHandler","regenerateToken","useRegenerateTokenMutation","regenerateData","res","type","message","error","data","accessKey","id","defaultMessage","handleConfirmRegeneration","_jsxs","Dialog","Root","open","onOpenChange","_jsx","Trigger","Button","startIcon","ArrowClockwise","size","variant","onClick","name","ConfirmDialog","title","endAction","loading","FormHead","token","setToken","toggleToken","showToken","canShowToken","canEditInputs","canRegenerate","isSubmitting","regenerateUrl","handleRegenerate","newKey","Layouts","Header","primaryAction","Flex","gap","tours","apiTokens","ViewAPIToken","Tooltip","label","EyeStriked","Eye","disabled","Check","navigationAction","BackButton","ellipsis"],"mappings":"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"}

package/dist/admin/admin/src/pages/Settings/components/Tokens/FormHead.mjs

@@ -4,6 +4,7 @@ import { Flex, Tooltip, Button, Dialog } from '@strapi/design-system';
 import { EyeStriked, Eye, Check, ArrowClockwise } from '@strapi/icons';
 import { useIntl } from 'react-intl';
 import { ConfirmDialog } from '../../../../components/ConfirmDialog.mjs';
+import { tours } from '../../../../components/GuidedTour/Tours.mjs';
 import { Layouts } from '../../../../components/Layouts/Layout.mjs';
 import { BackButton } from '../../../../features/BackButton.mjs';
 import { useNotification } from '../../../../features/Notifications.mjs';
@@ -104,20 +105,22 @@ const FormHead = ({ title, token, setToken, toggleToken, showToken, canShowToken
                     onRegenerate: handleRegenerate,
                     url: `${regenerateUrl}${token?.id ?? ''}`
                 }),
-                token?.id && toggleToken && /*#__PURE__*/ jsx(Tooltip, {
-                    label: !canShowToken && formatMessage({
-                        id: 'Settings.tokens.encryptionKeyMissing',
-                        defaultMessage: 'In order to view the token, you need a valid encryption key in the admin configuration'
-                    }),
-                    children: /*#__PURE__*/ jsx(Button, {
-                        type: "button",
-                        startIcon: showToken ? /*#__PURE__*/ jsx(EyeStriked, {}) : /*#__PURE__*/ jsx(Eye, {}),
-                        variant: "secondary",
-                        onClick: ()=>toggleToken?.(),
-                        disabled: !canShowToken,
-                        children: formatMessage({
-                            id: 'Settings.tokens.viewToken',
-                            defaultMessage: 'View token'
+                token?.id && toggleToken && /*#__PURE__*/ jsx(tours.apiTokens.ViewAPIToken, {
+                    children: /*#__PURE__*/ jsx(Tooltip, {
+                        label: !canShowToken && formatMessage({
+                            id: 'Settings.tokens.encryptionKeyMissing',
+                            defaultMessage: 'In order to view the token, you need a valid encryption key in the admin configuration'
+                        }),
+                        children: /*#__PURE__*/ jsx(Button, {
+                            type: "button",
+                            startIcon: showToken ? /*#__PURE__*/ jsx(EyeStriked, {}) : /*#__PURE__*/ jsx(Eye, {}),
+                            variant: "secondary",
+                            onClick: ()=>toggleToken?.(),
+                            disabled: !canShowToken,
+                            children: formatMessage({
+                                id: 'Settings.tokens.viewToken',
+                                defaultMessage: 'View token'
+                            })
                         })
                     })
                 }),

package/dist/admin/admin/src/pages/Settings/components/Tokens/FormHead.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"FormHead.mjs","sources":["../../../../../../../../admin/src/pages/Settings/components/Tokens/FormHead.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, Dialog, Flex, Tooltip } from '@strapi/design-system';\nimport { Check, ArrowClockwise, Eye, EyeStriked } from '@strapi/icons';\nimport { MessageDescriptor, useIntl } from 'react-intl';\n\nimport { ConfirmDialog } from '../../../../components/ConfirmDialog';\nimport { Layouts } from '../../../../components/Layouts/Layout';\nimport { BackButton } from '../../../../features/BackButton';\nimport { useNotification } from '../../../../features/Notifications';\nimport { useAPIErrorHandler } from '../../../../hooks/useAPIErrorHandler';\nimport { useRegenerateTokenMutation } from '../../../../services/transferTokens';\n\nimport type { Data } 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: 'danger',\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: 'danger',\n        message: formatMessage({\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    <Dialog.Root open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>\n      <Dialog.Trigger>\n        <Button\n          startIcon={<ArrowClockwise />}\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      </Dialog.Trigger>\n\n      <ConfirmDialog\n        title={formatMessage({\n          id: 'Settings.tokens.RegenerateDialog.title',\n          defaultMessage: 'Regenerate token',\n        })}\n        endAction={\n          <Button\n            startIcon={<ArrowClockwise />}\n            loading={isLoadingConfirmation}\n            onClick={handleConfirmRegeneration}\n          >\n            {formatMessage({\n              id: 'Settings.tokens.Button.regenerate',\n              defaultMessage: 'Regenerate',\n            })}\n          </Button>\n        }\n      >\n        {formatMessage({\n          id: 'Settings.tokens.popUpWarning.message',\n          defaultMessage: 'Are you sure you want to regenerate this token?',\n        })}\n      </ConfirmDialog>\n    </Dialog.Root>\n  );\n};\n\ninterface Token {\n  id: Data.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  canShowToken?: boolean;\n  setToken: (token: TToken) => void;\n  toggleToken?: () => void;\n  showToken?: boolean;\n  isSubmitting: boolean;\n  regenerateUrl: string;\n}\n\nexport const FormHead = <TToken extends Token | null>({\n  title,\n  token,\n  setToken,\n  toggleToken,\n  showToken,\n  canShowToken,\n  canEditInputs,\n  canRegenerate,\n  isSubmitting,\n  regenerateUrl,\n}: FormHeadProps<TToken>) => {\n  const { formatMessage } = useIntl();\n  const handleRegenerate = (newKey: string) => {\n    setToken({\n      ...token,\n      accessKey: newKey,\n    });\n    toggleToken?.();\n  };\n\n  return (\n    <Layouts.Header\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            {token?.id && toggleToken && (\n              <Tooltip\n                label={\n                  !canShowToken &&\n                  formatMessage({\n                    id: 'Settings.tokens.encryptionKeyMissing',\n                    defaultMessage:\n                      'In order to view the token, you need a valid encryption key in the admin configuration',\n                  })\n                }\n              >\n                <Button\n                  type=\"button\"\n                  startIcon={showToken ? <EyeStriked /> : <Eye />}\n                  variant=\"secondary\"\n                  onClick={() => toggleToken?.()}\n                  disabled={!canShowToken}\n                >\n                  {formatMessage({\n                    id: 'Settings.tokens.viewToken',\n                    defaultMessage: 'View token',\n                  })}\n                </Button>\n              </Tooltip>\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={<BackButton />}\n      ellipsis\n    />\n  );\n};\n"],"names":["Regenerate","onRegenerate","url","formatMessage","useIntl","showConfirmDialog","setShowConfirmDialog","React","useState","isLoadingConfirmation","setIsLoadingConfirmation","toggleNotification","useNotification","_unstableFormatAPIError","formatAPIError","useAPIErrorHandler","regenerateToken","useRegenerateTokenMutation","regenerateData","res","type","message","error","data","accessKey","id","defaultMessage","handleConfirmRegeneration","_jsxs","Dialog","Root","open","onOpenChange","_jsx","Trigger","Button","startIcon","ArrowClockwise","size","variant","onClick","name","ConfirmDialog","title","endAction","loading","FormHead","token","setToken","toggleToken","showToken","canShowToken","canEditInputs","canRegenerate","isSubmitting","regenerateUrl","handleRegenerate","newKey","Layouts","Header","primaryAction","Flex","gap","Tooltip","label","EyeStriked","Eye","disabled","Check","navigationAction","BackButton","ellipsis"],"mappings":";;;;;;;;;;;;AAoBA,MAAMA,aAAa,CAAC,EAAEC,YAAY,EAAEC,GAAG,EAAmB,GAAA;IACxD,MAAM,EAAEC,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAM,CAACC,iBAAmBC,EAAAA,oBAAAA,CAAqB,GAAGC,KAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;AAEjE,IAAA,MAAM,CAACC,qBAAuBC,EAAAA,wBAAAA,CAAyB,GAAGH,KAAAA,CAAMC,QAAQ,CAAC,KAAA,CAAA;IACzE,MAAM,EAAEG,kBAAkB,EAAE,GAAGC,eAAAA,EAAAA;AAC/B,IAAA,MAAM,EAAEC,uBAAAA,EAAyBC,cAAc,EAAE,GAAGC,kBAAAA,EAAAA;IAEpD,MAAM,CAACC,gBAAgB,GAAGC,0BAAAA,EAAAA;AAE1B,IAAA,MAAMC,cAAiB,GAAA,UAAA;QACrB,IAAI;YACF,MAAMC,GAAAA,GAAM,MAAMH,eAAgBd,CAAAA,GAAAA,CAAAA;AAElC,YAAA,IAAI,WAAWiB,GAAK,EAAA;gBAClBR,kBAAmB,CAAA;oBACjBS,IAAM,EAAA,QAAA;oBACNC,OAASP,EAAAA,cAAAA,CAAeK,IAAIG,KAAK;AACnC,iBAAA,CAAA;AAEA,gBAAA;AACF;AAEA,YAAA,IAAIrB,YAAc,EAAA;gBAChBA,YAAakB,CAAAA,GAAAA,CAAII,IAAI,CAACC,SAAS,CAAA;AACjC;AACF,SAAA,CAAE,OAAOF,KAAO,EAAA;YACdX,kBAAmB,CAAA;gBACjBS,IAAM,EAAA,QAAA;AACNC,gBAAAA,OAAAA,EAASlB,aAAc,CAAA;oBACrBsB,EAAI,EAAA,oBAAA;oBACJC,cAAgB,EAAA;AAClB,iBAAA;AACF,aAAA,CAAA;SACQ,QAAA;YACRhB,wBAAyB,CAAA,KAAA,CAAA;AAC3B;AACF,KAAA;AAEA,IAAA,MAAMiB,yBAA4B,GAAA,UAAA;AAChCT,QAAAA,cAAAA,EAAAA;QACAZ,oBAAqB,CAAA,KAAA,CAAA;AACvB,KAAA;IAEA,qBACEsB,IAAA,CAACC,OAAOC,IAAI,EAAA;QAACC,IAAM1B,EAAAA,iBAAAA;QAAmB2B,YAAc1B,EAAAA,oBAAAA;;AAClD,0BAAA2B,GAAA,CAACJ,OAAOK,OAAO,EAAA;AACb,gBAAA,QAAA,gBAAAD,GAACE,CAAAA,MAAAA,EAAAA;AACCC,oBAAAA,SAAAA,gBAAWH,GAACI,CAAAA,cAAAA,EAAAA,EAAAA,CAAAA;oBACZjB,IAAK,EAAA,QAAA;oBACLkB,IAAK,EAAA,GAAA;oBACLC,OAAQ,EAAA,UAAA;AACRC,oBAAAA,OAAAA,EAAS,IAAMlC,oBAAqB,CAAA,IAAA,CAAA;oBACpCmC,IAAK,EAAA,YAAA;8BAEJtC,aAAc,CAAA;wBACbsB,EAAI,EAAA,4BAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA;;;0BAIJO,GAACS,CAAAA,aAAAA,EAAAA;AACCC,gBAAAA,KAAAA,EAAOxC,aAAc,CAAA;oBACnBsB,EAAI,EAAA,wCAAA;oBACJC,cAAgB,EAAA;AAClB,iBAAA,CAAA;AACAkB,gBAAAA,SAAAA,gBACEX,GAACE,CAAAA,MAAAA,EAAAA;AACCC,oBAAAA,SAAAA,gBAAWH,GAACI,CAAAA,cAAAA,EAAAA,EAAAA,CAAAA;oBACZQ,OAASpC,EAAAA,qBAAAA;oBACT+B,OAASb,EAAAA,yBAAAA;8BAERxB,aAAc,CAAA;wBACbsB,EAAI,EAAA,mCAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA;;0BAIHvB,aAAc,CAAA;oBACbsB,EAAI,EAAA,sCAAA;oBACJC,cAAgB,EAAA;AAClB,iBAAA;;;;AAIR,CAAA;AAoBO,MAAMoB,WAAW,CAA8B,EACpDH,KAAK,EACLI,KAAK,EACLC,QAAQ,EACRC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,aAAa,EACbC,aAAa,EACbC,YAAY,EACZC,aAAa,EACS,GAAA;IACtB,MAAM,EAAEpD,aAAa,EAAE,GAAGC,OAAAA,EAAAA;AAC1B,IAAA,MAAMoD,mBAAmB,CAACC,MAAAA,GAAAA;QACxBT,QAAS,CAAA;AACP,YAAA,GAAGD,KAAK;YACRvB,SAAWiC,EAAAA;AACb,SAAA,CAAA;AACAR,QAAAA,WAAAA,IAAAA;AACF,KAAA;IAEA,qBACEhB,GAAA,CAACyB,QAAQC,MAAM,EAAA;QACbhB,KAAOI,EAAAA,KAAAA,EAAON,QAAQtC,aAAcwC,CAAAA,KAAAA,CAAAA;AACpCiB,QAAAA,aAAAA,EACER,8BACExB,IAACiC,CAAAA,IAAAA,EAAAA;YAAKC,GAAK,EAAA,CAAA;;gBACRT,aAAiBN,IAAAA,KAAAA,EAAOtB,oBACvBQ,GAACjC,CAAAA,UAAAA,EAAAA;oBACCC,YAAcuD,EAAAA,gBAAAA;AACdtD,oBAAAA,GAAAA,EAAK,CAAC,EAAEqD,aAAAA,CAAc,EAAER,KAAOtB,EAAAA,EAAAA,IAAM,GAAG;;gBAG3CsB,KAAOtB,EAAAA,EAAAA,IAAMwB,6BACZhB,GAAC8B,CAAAA,OAAAA,EAAAA;oBACCC,KACE,EAAA,CAACb,gBACDhD,aAAc,CAAA;wBACZsB,EAAI,EAAA,sCAAA;wBACJC,cACE,EAAA;AACJ,qBAAA,CAAA;AAGF,oBAAA,QAAA,gBAAAO,GAACE,CAAAA,MAAAA,EAAAA;wBACCf,IAAK,EAAA,QAAA;wBACLgB,SAAWc,EAAAA,SAAAA,iBAAYjB,GAACgC,CAAAA,UAAAA,EAAAA,EAAAA,CAAAA,iBAAgBhC,GAACiC,CAAAA,GAAAA,EAAAA,EAAAA,CAAAA;wBACzC3B,OAAQ,EAAA,WAAA;AACRC,wBAAAA,OAAAA,EAAS,IAAMS,WAAAA,IAAAA;AACfkB,wBAAAA,QAAAA,EAAU,CAAChB,YAAAA;kCAEVhD,aAAc,CAAA;4BACbsB,EAAI,EAAA,2BAAA;4BACJC,cAAgB,EAAA;AAClB,yBAAA;;;8BAINO,GAACE,CAAAA,MAAAA,EAAAA;oBACCgC,QAAUb,EAAAA,YAAAA;oBACVT,OAASS,EAAAA,YAAAA;AACTlB,oBAAAA,SAAAA,gBAAWH,GAACmC,CAAAA,KAAAA,EAAAA,EAAAA,CAAAA;oBACZhD,IAAK,EAAA,QAAA;oBACLkB,IAAK,EAAA,GAAA;8BAEJnC,aAAc,CAAA;wBACbsB,EAAI,EAAA,aAAA;wBACJC,cAAgB,EAAA;AAClB,qBAAA;;;aAIJ2B,aACAN,IAAAA,KAAAA,EAAOtB,oBACLQ,GAACjC,CAAAA,UAAAA,EAAAA;YACCC,YAAcuD,EAAAA,gBAAAA;AACdtD,YAAAA,GAAAA,EAAK,CAAC,EAAEqD,aAAAA,CAAc,EAAER,KAAOtB,EAAAA,EAAAA,IAAM,GAAG;;AAKhD4C,QAAAA,gBAAAA,gBAAkBpC,GAACqC,CAAAA,UAAAA,EAAAA,EAAAA,CAAAA;QACnBC,QAAQ,EAAA;;AAGd;;;;"}
+{"version":3,"file":"FormHead.mjs","sources":["../../../../../../../../admin/src/pages/Settings/components/Tokens/FormHead.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Button, Dialog, Flex, Tooltip } from '@strapi/design-system';\nimport { Check, ArrowClockwise, Eye, EyeStriked } from '@strapi/icons';\nimport { MessageDescriptor, useIntl } from 'react-intl';\n\nimport { ConfirmDialog } from '../../../../components/ConfirmDialog';\nimport { tours } from '../../../../components/GuidedTour/Tours';\nimport { Layouts } from '../../../../components/Layouts/Layout';\nimport { BackButton } from '../../../../features/BackButton';\nimport { useNotification } from '../../../../features/Notifications';\nimport { useAPIErrorHandler } from '../../../../hooks/useAPIErrorHandler';\nimport { useRegenerateTokenMutation } from '../../../../services/transferTokens';\n\nimport type { Data } 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: 'danger',\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: 'danger',\n        message: formatMessage({\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    <Dialog.Root open={showConfirmDialog} onOpenChange={setShowConfirmDialog}>\n      <Dialog.Trigger>\n        <Button\n          startIcon={<ArrowClockwise />}\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      </Dialog.Trigger>\n\n      <ConfirmDialog\n        title={formatMessage({\n          id: 'Settings.tokens.RegenerateDialog.title',\n          defaultMessage: 'Regenerate token',\n        })}\n        endAction={\n          <Button\n            startIcon={<ArrowClockwise />}\n            loading={isLoadingConfirmation}\n            onClick={handleConfirmRegeneration}\n          >\n            {formatMessage({\n              id: 'Settings.tokens.Button.regenerate',\n              defaultMessage: 'Regenerate',\n            })}\n          </Button>\n        }\n      >\n        {formatMessage({\n          id: 'Settings.tokens.popUpWarning.message',\n          defaultMessage: 'Are you sure you want to regenerate this token?',\n        })}\n      </ConfirmDialog>\n    </Dialog.Root>\n  );\n};\n\ninterface Token {\n  id: Data.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  canShowToken?: boolean;\n  setToken: (token: TToken) => void;\n  toggleToken?: () => void;\n  showToken?: boolean;\n  isSubmitting: boolean;\n  regenerateUrl: string;\n}\n\nexport const FormHead = <TToken extends Token | null>({\n  title,\n  token,\n  setToken,\n  toggleToken,\n  showToken,\n  canShowToken,\n  canEditInputs,\n  canRegenerate,\n  isSubmitting,\n  regenerateUrl,\n}: FormHeadProps<TToken>) => {\n  const { formatMessage } = useIntl();\n  const handleRegenerate = (newKey: string) => {\n    setToken({\n      ...token,\n      accessKey: newKey,\n    });\n    toggleToken?.();\n  };\n\n  return (\n    <Layouts.Header\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            {token?.id && toggleToken && (\n              <tours.apiTokens.ViewAPIToken>\n                <Tooltip\n                  label={\n                    !canShowToken &&\n                    formatMessage({\n                      id: 'Settings.tokens.encryptionKeyMissing',\n                      defaultMessage:\n                        'In order to view the token, you need a valid encryption key in the admin configuration',\n                    })\n                  }\n                >\n                  <Button\n                    type=\"button\"\n                    startIcon={showToken ? <EyeStriked /> : <Eye />}\n                    variant=\"secondary\"\n                    onClick={() => toggleToken?.()}\n                    disabled={!canShowToken}\n                  >\n                    {formatMessage({\n                      id: 'Settings.tokens.viewToken',\n                      defaultMessage: 'View token',\n                    })}\n                  </Button>\n                </Tooltip>\n              </tours.apiTokens.ViewAPIToken>\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={<BackButton />}\n      ellipsis\n    />\n  );\n};\n"],"names":["Regenerate","onRegenerate","url","formatMessage","useIntl","showConfirmDialog","setShowConfirmDialog","React","useState","isLoadingConfirmation","setIsLoadingConfirmation","toggleNotification","useNotification","_unstableFormatAPIError","formatAPIError","useAPIErrorHandler","regenerateToken","useRegenerateTokenMutation","regenerateData","res","type","message","error","data","accessKey","id","defaultMessage","handleConfirmRegeneration","_jsxs","Dialog","Root","open","onOpenChange","_jsx","Trigger","Button","startIcon","ArrowClockwise","size","variant","onClick","name","ConfirmDialog","title","endAction","loading","FormHead","token","setToken","toggleToken","showToken","canShowToken","canEditInputs","canRegenerate","isSubmitting","regenerateUrl","handleRegenerate","newKey","Layouts","Header","primaryAction","Flex","gap","tours","apiTokens","ViewAPIToken","Tooltip","label","EyeStriked","Eye","disabled","Check","navigationAction","BackButton","ellipsis"],"mappings":"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"}

package/dist/admin/admin/src/pages/Settings/components/Tokens/Table.js

@@ -1,18 +1,38 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
-require('react');
+var React = require('react');
 var designSystem = require('@strapi/design-system');
 var icons = require('@strapi/icons');
 var reactIntl = require('react-intl');
 var reactRouterDom = require('react-router-dom');
 var styled = require('styled-components');
 var ConfirmDialog = require('../../../../components/ConfirmDialog.js');
+var Tours = require('../../../../components/GuidedTour/Tours.js');
 var RelativeTime = require('../../../../components/RelativeTime.js');
 var Table$1 = require('../../../../components/Table.js');
 var Tracking = require('../../../../features/Tracking.js');
 var useQueryParams = require('../../../../hooks/useQueryParams.js');
 
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
 const Table = ({ permissions, headers = [], isLoading = false, tokens = [], onConfirmDelete, tokenType })=>{
     const [{ query }] = useQueryParams.useQueryParams();
     const { formatMessage, locale } = reactIntl.useIntl();
@@ -51,7 +71,9 @@ const Table = ({ permissions, headers = [], isLoading = false, tokens = [], onCo
                 /*#__PURE__*/ jsxRuntime.jsx(Table$1.Table.Empty, {}),
                 /*#__PURE__*/ jsxRuntime.jsx(Table$1.Table.Loading, {}),
                 /*#__PURE__*/ jsxRuntime.jsx(Table$1.Table.Body, {
-                    children: sortedTokens.map((token)=>/*#__PURE__*/ jsxRuntime.jsxs(Table$1.Table.Row, {
+                    children: sortedTokens.map((token)=>{
+                        const GuidedTourTooltip = token.name === 'Read Only' ? Tours.tours.apiTokens.ManageAPIToken : React__namespace.Fragment;
+                        return /*#__PURE__*/ jsxRuntime.jsxs(Table$1.Table.Row, {
                             onClick: handleRowClick(token.id),
                             children: [
                                 /*#__PURE__*/ jsxRuntime.jsx(Table$1.Table.Cell, {
@@ -101,9 +123,11 @@ const Table = ({ permissions, headers = [], isLoading = false, tokens = [], onCo
                                     children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
                                         justifyContent: "end",
                                         children: [
-                                            canUpdate && /*#__PURE__*/ jsxRuntime.jsx(UpdateButton, {
-                                                tokenName: token.name,
-                                                tokenId: token.id
+                                            /*#__PURE__*/ jsxRuntime.jsx(GuidedTourTooltip, {
+                                                children: canUpdate && /*#__PURE__*/ jsxRuntime.jsx(UpdateButton, {
+                                                    tokenName: token.name,
+                                                    tokenId: token.id
+                                                })
                                             }),
                                             canDelete && /*#__PURE__*/ jsxRuntime.jsx(DeleteButton, {
                                                 tokenName: token.name,
@@ -114,7 +138,8 @@ const Table = ({ permissions, headers = [], isLoading = false, tokens = [], onCo
                                     })
                                 }) : null
                             ]
-                        }, token.id))
+                        }, token.id);
+                    })
                 })
             ]
         })

package/dist/admin/admin/src/pages/Settings/components/Tokens/Table.js.map

@@ -1 +1 @@
-{"version":3,"file":"Table.js","sources":["../../../../../../../../admin/src/pages/Settings/components/Tokens/Table.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  Flex,\n  IconButton,\n  Typography,\n  useCollator,\n  Dialog,\n  LinkButton,\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    <LinkButtonStyled\n      tag={NavLink}\n      to={tokenId.toString()}\n      onClick={(e: React.MouseEvent) => e.stopPropagation()}\n      title={formatMessage(MESSAGES_MAP[buttonType], { target: tokenName })}\n      variant=\"ghost\"\n      size=\"S\"\n    >\n      {children}\n    </LinkButtonStyled>\n  );\n};\n\nconst LinkButtonStyled = styled(LinkButton)`\n  padding: 0.7rem;\n\n  & > span {\n    display: flex;\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            variant=\"ghost\"\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 />\n    </DefaultButton>\n  );\n};\n\nexport { Table };\nexport type { TableProps };\n"],"names":["Table","permissions","headers","isLoading","tokens","onConfirmDelete","tokenType","query","useQueryParams","formatMessage","locale","useIntl","sortOrder","sort","split","undefined","navigate","useNavigate","trackUsage","useTracking","formatter","useCollator","sortedTokens","a","b","compare","name","canDelete","canUpdate","canRead","handleRowClick","id","toString","_jsx","TableImpl","Root","rows","_jsxs","Content","Head","map","header","HeaderCell","Empty","Loading","Body","token","Row","onClick","Cell","maxWidth","Typography","textColor","fontWeight","ellipsis","description","RelativeTime","timestamp","Date","createdAt","lastUsedAt","customIntervals","unit","threshold","text","defaultMessage","Flex","justifyContent","UpdateButton","tokenName","tokenId","DeleteButton","onClickDelete","MESSAGES_MAP","edit","read","DefaultButton","buttonType","children","LinkButtonStyled","tag","NavLink","to","e","stopPropagation","title","target","variant","size","styled","LinkButton","handleClickDelete","Dialog","Box","paddingLeft","Trigger","IconButton","label","Trash","ConfirmDialog","onConfirm","Pencil"],"mappings":"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"}
+{"version":3,"file":"Table.js","sources":["../../../../../../../../admin/src/pages/Settings/components/Tokens/Table.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  Flex,\n  IconButton,\n  Typography,\n  useCollator,\n  Dialog,\n  LinkButton,\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 { tours } from '../../../../components/GuidedTour/Tours';\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            const GuidedTourTooltip =\n              token.name === 'Read Only' ? tours.apiTokens.ManageAPIToken : React.Fragment;\n            return (\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                      <GuidedTourTooltip>\n                        {canUpdate && <UpdateButton tokenName={token.name} tokenId={token.id} />}\n                      </GuidedTourTooltip>\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          })}\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    <LinkButtonStyled\n      tag={NavLink}\n      to={tokenId.toString()}\n      onClick={(e: React.MouseEvent) => e.stopPropagation()}\n      title={formatMessage(MESSAGES_MAP[buttonType], { target: tokenName })}\n      variant=\"ghost\"\n      size=\"S\"\n    >\n      {children}\n    </LinkButtonStyled>\n  );\n};\n\nconst LinkButtonStyled = styled(LinkButton)`\n  padding: 0.7rem;\n\n  & > span {\n    display: flex;\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            variant=\"ghost\"\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 />\n    </DefaultButton>\n  );\n};\n\nexport { Table };\nexport type { TableProps };\n"],"names":["Table","permissions","headers","isLoading","tokens","onConfirmDelete","tokenType","query","useQueryParams","formatMessage","locale","useIntl","sortOrder","sort","split","undefined","navigate","useNavigate","trackUsage","useTracking","formatter","useCollator","sortedTokens","a","b","compare","name","canDelete","canUpdate","canRead","handleRowClick","id","toString","_jsx","TableImpl","Root","rows","_jsxs","Content","Head","map","header","HeaderCell","Empty","Loading","Body","token","GuidedTourTooltip","tours","apiTokens","ManageAPIToken","React","Fragment","Row","onClick","Cell","maxWidth","Typography","textColor","fontWeight","ellipsis","description","RelativeTime","timestamp","Date","createdAt","lastUsedAt","customIntervals","unit","threshold","text","defaultMessage","Flex","justifyContent","UpdateButton","tokenName","tokenId","DeleteButton","onClickDelete","MESSAGES_MAP","edit","read","DefaultButton","buttonType","children","LinkButtonStyled","tag","NavLink","to","e","stopPropagation","title","target","variant","size","styled","LinkButton","handleClickDelete","Dialog","Box","paddingLeft","Trigger","IconButton","label","Trash","ConfirmDialog","onConfirm","Pencil"],"mappings":"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"}

package/dist/admin/admin/src/pages/Settings/components/Tokens/Table.mjs

@@ -1,11 +1,12 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import 'react';
+import * as React from 'react';
 import { LinkButton, 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 { ConfirmDialog } from '../../../../components/ConfirmDialog.mjs';
+import { tours } from '../../../../components/GuidedTour/Tours.mjs';
 import { RelativeTime } from '../../../../components/RelativeTime.mjs';
 import { Table as Table$1 } from '../../../../components/Table.mjs';
 import { useTracking } from '../../../../features/Tracking.mjs';
@@ -49,7 +50,9 @@ const Table = ({ permissions, headers = [], isLoading = false, tokens = [], onCo
                 /*#__PURE__*/ jsx(Table$1.Empty, {}),
                 /*#__PURE__*/ jsx(Table$1.Loading, {}),
                 /*#__PURE__*/ jsx(Table$1.Body, {
-                    children: sortedTokens.map((token)=>/*#__PURE__*/ jsxs(Table$1.Row, {
+                    children: sortedTokens.map((token)=>{
+                        const GuidedTourTooltip = token.name === 'Read Only' ? tours.apiTokens.ManageAPIToken : React.Fragment;
+                        return /*#__PURE__*/ jsxs(Table$1.Row, {
                             onClick: handleRowClick(token.id),
                             children: [
                                 /*#__PURE__*/ jsx(Table$1.Cell, {
@@ -99,9 +102,11 @@ const Table = ({ permissions, headers = [], isLoading = false, tokens = [], onCo
                                     children: /*#__PURE__*/ jsxs(Flex, {
                                         justifyContent: "end",
                                         children: [
-                                            canUpdate && /*#__PURE__*/ jsx(UpdateButton, {
-                                                tokenName: token.name,
-                                                tokenId: token.id
+                                            /*#__PURE__*/ jsx(GuidedTourTooltip, {
+                                                children: canUpdate && /*#__PURE__*/ jsx(UpdateButton, {
+                                                    tokenName: token.name,
+                                                    tokenId: token.id
+                                                })
                                             }),
                                             canDelete && /*#__PURE__*/ jsx(DeleteButton, {
                                                 tokenName: token.name,
@@ -112,7 +117,8 @@ const Table = ({ permissions, headers = [], isLoading = false, tokens = [], onCo
                                     })
                                 }) : null
                             ]
-                        }, token.id))
+                        }, token.id);
+                    })
                 })
             ]
         })

package/dist/admin/admin/src/pages/Settings/components/Tokens/Table.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Table.mjs","sources":["../../../../../../../../admin/src/pages/Settings/components/Tokens/Table.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  Flex,\n  IconButton,\n  Typography,\n  useCollator,\n  Dialog,\n  LinkButton,\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    <LinkButtonStyled\n      tag={NavLink}\n      to={tokenId.toString()}\n      onClick={(e: React.MouseEvent) => e.stopPropagation()}\n      title={formatMessage(MESSAGES_MAP[buttonType], { target: tokenName })}\n      variant=\"ghost\"\n      size=\"S\"\n    >\n      {children}\n    </LinkButtonStyled>\n  );\n};\n\nconst LinkButtonStyled = styled(LinkButton)`\n  padding: 0.7rem;\n\n  & > span {\n    display: flex;\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            variant=\"ghost\"\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 />\n    </DefaultButton>\n  );\n};\n\nexport { Table };\nexport type { TableProps };\n"],"names":["Table","permissions","headers","isLoading","tokens","onConfirmDelete","tokenType","query","useQueryParams","formatMessage","locale","useIntl","sortOrder","sort","split","undefined","navigate","useNavigate","trackUsage","useTracking","formatter","useCollator","sortedTokens","a","b","compare","name","canDelete","canUpdate","canRead","handleRowClick","id","toString","_jsx","TableImpl","Root","rows","_jsxs","Content","Head","map","header","HeaderCell","Empty","Loading","Body","token","Row","onClick","Cell","maxWidth","Typography","textColor","fontWeight","ellipsis","description","RelativeTime","timestamp","Date","createdAt","lastUsedAt","customIntervals","unit","threshold","text","defaultMessage","Flex","justifyContent","UpdateButton","tokenName","tokenId","DeleteButton","onClickDelete","MESSAGES_MAP","edit","read","DefaultButton","buttonType","children","LinkButtonStyled","tag","NavLink","to","e","stopPropagation","title","target","variant","size","styled","LinkButton","handleClickDelete","Dialog","Box","paddingLeft","Trigger","IconButton","label","Trash","ConfirmDialog","onConfirm","Pencil"],"mappings":"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"}
+{"version":3,"file":"Table.mjs","sources":["../../../../../../../../admin/src/pages/Settings/components/Tokens/Table.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Box,\n  Flex,\n  IconButton,\n  Typography,\n  useCollator,\n  Dialog,\n  LinkButton,\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 { tours } from '../../../../components/GuidedTour/Tours';\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            const GuidedTourTooltip =\n              token.name === 'Read Only' ? tours.apiTokens.ManageAPIToken : React.Fragment;\n            return (\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                      <GuidedTourTooltip>\n                        {canUpdate && <UpdateButton tokenName={token.name} tokenId={token.id} />}\n                      </GuidedTourTooltip>\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          })}\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    <LinkButtonStyled\n      tag={NavLink}\n      to={tokenId.toString()}\n      onClick={(e: React.MouseEvent) => e.stopPropagation()}\n      title={formatMessage(MESSAGES_MAP[buttonType], { target: tokenName })}\n      variant=\"ghost\"\n      size=\"S\"\n    >\n      {children}\n    </LinkButtonStyled>\n  );\n};\n\nconst LinkButtonStyled = styled(LinkButton)`\n  padding: 0.7rem;\n\n  & > span {\n    display: flex;\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            variant=\"ghost\"\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 />\n    </DefaultButton>\n  );\n};\n\nexport { Table };\nexport type { TableProps };\n"],"names":["Table","permissions","headers","isLoading","tokens","onConfirmDelete","tokenType","query","useQueryParams","formatMessage","locale","useIntl","sortOrder","sort","split","undefined","navigate","useNavigate","trackUsage","useTracking","formatter","useCollator","sortedTokens","a","b","compare","name","canDelete","canUpdate","canRead","handleRowClick","id","toString","_jsx","TableImpl","Root","rows","_jsxs","Content","Head","map","header","HeaderCell","Empty","Loading","Body","token","GuidedTourTooltip","tours","apiTokens","ManageAPIToken","React","Fragment","Row","onClick","Cell","maxWidth","Typography","textColor","fontWeight","ellipsis","description","RelativeTime","timestamp","Date","createdAt","lastUsedAt","customIntervals","unit","threshold","text","defaultMessage","Flex","justifyContent","UpdateButton","tokenName","tokenId","DeleteButton","onClickDelete","MESSAGES_MAP","edit","read","DefaultButton","buttonType","children","LinkButtonStyled","tag","NavLink","to","e","stopPropagation","title","target","variant","size","styled","LinkButton","handleClickDelete","Dialog","Box","paddingLeft","Trigger","IconButton","label","Trash","ConfirmDialog","onConfirm","Pencil"],"mappings":"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"}

package/dist/admin/admin/src/pages/Settings/components/Tokens/TokenBox.js

@@ -9,6 +9,7 @@ var styled = require('styled-components');
 var ContentBox = require('../../../../components/ContentBox.js');
 var Context = require('../../../../components/GuidedTour/Context.js');
 var Tours = require('../../../../components/GuidedTour/Tours.js');
+var constants = require('../../../../components/GuidedTour/utils/constants.js');
 var Notifications = require('../../../../features/Notifications.js');
 var Tracking = require('../../../../features/Tracking.js');
 var useClipboard = require('../../../../hooks/useClipboard.js');
@@ -22,28 +23,28 @@ const ApiTokenBox = ({ token, tokenType })=>{
     const { trackUsage } = Tracking.useTracking();
     const dispatch = Context.useGuidedTour('TokenBox', (s)=>s.dispatch);
     const { copy } = useClipboard.useClipboard();
-    const handleClick = (token)=>async ()=>{
-            if (token) {
-                const didCopy = await copy(token);
-                if (didCopy) {
-                    trackUsage('didCopyTokenKey', {
-                        tokenType
-                    });
-                    dispatch({
-                        type: 'set_completed_actions',
-                        payload: [
-                            'didCopyApiToken'
-                        ]
-                    });
-                    toggleNotification({
-                        type: 'success',
-                        message: formatMessage({
-                            id: 'Settings.tokens.notification.copied'
-                        })
-                    });
-                }
+    const handleCopyToken = async (token)=>{
+        if (token) {
+            const didCopy = await copy(token);
+            if (didCopy) {
+                trackUsage('didCopyTokenKey', {
+                    tokenType
+                });
+                dispatch({
+                    type: 'set_completed_actions',
+                    payload: [
+                        constants.GUIDED_TOUR_REQUIRED_ACTIONS.apiTokens.copyToken
+                    ]
+                });
+                toggleNotification({
+                    type: 'success',
+                    message: formatMessage({
+                        id: 'Settings.tokens.notification.copied'
+                    })
+                });
             }
-        };
+        }
+    };
     return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
         children: /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
             shadow: "tableShadow",
@@ -68,8 +69,8 @@ const ApiTokenBox = ({ token, tokenType })=>{
                         }),
                         /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
                             children: formatMessage({
-                                id: 'Settings.tokens.copy.lastWarning',
-                                defaultMessage: "Make sure to copy this token, you won't be able to see it again!"
+                                id: 'Settings.apiTokens.copy.lastWarning',
+                                defaultMessage: 'Copy your API token'
                             })
                         })
                     ]
@@ -89,7 +90,10 @@ const ApiTokenBox = ({ token, tokenType })=>{
                     children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
                         startIcon: /*#__PURE__*/ jsxRuntime.jsx(icons.Duplicate, {}),
                         variant: "secondary",
-                        onClick: handleClick(token),
+                        onClick: (e)=>{
+                            e.preventDefault();
+                            handleCopyToken(token);
+                        },
                         marginTop: 6,
                         children: formatMessage({
                             id: 'Settings.tokens.copy.copy',