@strapi/admin 4.20.5 → 5.0.0-alpha.0

package/dist/_chunks/ListView-QEgFV6dm.mjs

@@ -0,0 +1,215 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { HeaderLayout, LinkButton, Main, ContentLayout, EmptyStateLayout } from "@strapi/design-system";
+import { useFocusWhenNavigate, useRBAC } from "@strapi/helper-plugin";
+import { Plus, EmptyDocuments } from "@strapi/icons";
+import * as qs from "qs";
+import { Helmet } from "react-helmet";
+import { useIntl } from "react-intl";
+import { useNavigate } from "react-router-dom";
+import { q as useTypedSelector, P as Page, u as useNotification, d as useTracking, o as useAPIErrorHandler } from "./index-5ZvCaCyY.mjs";
+import { u as useOnce } from "./useOnce-BuAUYuau.mjs";
+import { c as useGetTransferTokensQuery, d as useDeleteTransferTokenMutation } from "./transferTokens-4KlyXDql.mjs";
+import { T as TRANSFER_TOKEN_TYPE } from "./constants-fJt30IoY.mjs";
+import { T as Table } from "./Table-k6gVR2KH.mjs";
+const tableHeaders = [
+  {
+    name: "name",
+    label: {
+      id: "Settings.tokens.ListView.headers.name",
+      defaultMessage: "Name"
+    },
+    sortable: true
+  },
+  {
+    name: "description",
+    label: {
+      id: "Settings.tokens.ListView.headers.description",
+      defaultMessage: "Description"
+    },
+    sortable: false
+  },
+  {
+    name: "createdAt",
+    label: {
+      id: "Settings.tokens.ListView.headers.createdAt",
+      defaultMessage: "Created at"
+    },
+    sortable: false
+  },
+  {
+    name: "lastUsedAt",
+    label: {
+      id: "Settings.tokens.ListView.headers.lastUsedAt",
+      defaultMessage: "Last used"
+    },
+    sortable: false
+  }
+];
+const ListView = () => {
+  useFocusWhenNavigate();
+  const { formatMessage } = useIntl();
+  const { toggleNotification } = useNotification();
+  const permissions = useTypedSelector(
+    (state) => state.admin_app.permissions.settings?.["transfer-tokens"]
+  );
+  const {
+    isLoading: isLoadingRBAC,
+    allowedActions: { canCreate, canDelete, canUpdate, canRead }
+  } = useRBAC(permissions);
+  const navigate = useNavigate();
+  const { trackUsage } = useTracking();
+  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
+  React.useEffect(() => {
+    navigate({ search: qs.stringify({ sort: "name:ASC" }, { encode: false }) });
+  }, [navigate]);
+  useOnce(() => {
+    trackUsage("willAccessTokenList", {
+      tokenType: TRANSFER_TOKEN_TYPE
+    });
+  });
+  const headers = tableHeaders.map((header) => ({
+    ...header,
+    label: formatMessage(header.label)
+  }));
+  const {
+    data: transferTokens = [],
+    isLoading: isLoadingTokens,
+    error
+  } = useGetTransferTokensQuery(void 0, {
+    skip: !canRead
+  });
+  React.useEffect(() => {
+    if (transferTokens) {
+      trackUsage("didAccessTokenList", {
+        number: transferTokens.length,
+        tokenType: TRANSFER_TOKEN_TYPE
+      });
+    }
+  }, [trackUsage, transferTokens]);
+  React.useEffect(() => {
+    if (error) {
+      toggleNotification({
+        type: "danger",
+        message: formatAPIError(error)
+      });
+    }
+  }, [error, formatAPIError, toggleNotification]);
+  const [deleteToken] = useDeleteTransferTokenMutation();
+  const handleDelete = async (id) => {
+    try {
+      const res = await deleteToken(id);
+      if ("error" in res) {
+        toggleNotification({
+          type: "danger",
+          message: formatAPIError(res.error)
+        });
+      }
+    } catch {
+      toggleNotification({
+        type: "danger",
+        message: formatMessage({ id: "notification.error", defaultMessage: "An error occured" })
+      });
+    }
+  };
+  const isLoading = isLoadingTokens || isLoadingRBAC;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Helmet,
+      {
+        title: formatMessage(
+          { id: "Settings.PageTitle", defaultMessage: "Settings - {name}" },
+          {
+            name: "Transfer Tokens"
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      HeaderLayout,
+      {
+        title: formatMessage({
+          id: "Settings.transferTokens.title",
+          defaultMessage: "Transfer Tokens"
+        }),
+        subtitle: formatMessage({
+          id: "Settings.transferTokens.description",
+          defaultMessage: '"List of generated transfer tokens"'
+          // TODO change this message
+        }),
+        primaryAction: canCreate ? /* @__PURE__ */ jsx(
+          LinkButton,
+          {
+            "data-testid": "create-transfer-token-button",
+            startIcon: /* @__PURE__ */ jsx(Plus, {}),
+            size: "S",
+            onClick: () => trackUsage("willAddTokenFromList", {
+              tokenType: TRANSFER_TOKEN_TYPE
+            }),
+            to: "/settings/transfer-tokens/create",
+            children: formatMessage({
+              id: "Settings.transferTokens.create",
+              defaultMessage: "Create new Transfer Token"
+            })
+          }
+        ) : void 0
+      }
+    ),
+    !canRead ? /* @__PURE__ */ jsx(Page.NoPermissions, {}) : /* @__PURE__ */ jsx(Main, { "aria-busy": isLoading, children: /* @__PURE__ */ jsxs(ContentLayout, { children: [
+      transferTokens.length > 0 && /* @__PURE__ */ jsx(
+        Table,
+        {
+          permissions: { canRead, canDelete, canUpdate },
+          headers,
+          isLoading,
+          onConfirmDelete: handleDelete,
+          tokens: transferTokens,
+          tokenType: TRANSFER_TOKEN_TYPE
+        }
+      ),
+      canCreate && transferTokens.length === 0 ? /* @__PURE__ */ jsx(
+        EmptyStateLayout,
+        {
+          action: /* @__PURE__ */ jsx(
+            LinkButton,
+            {
+              variant: "secondary",
+              startIcon: /* @__PURE__ */ jsx(Plus, {}),
+              to: "/settings/transfer-tokens/create",
+              children: formatMessage({
+                id: "Settings.transferTokens.addNewToken",
+                defaultMessage: "Add new Transfer Token"
+              })
+            }
+          ),
+          icon: /* @__PURE__ */ jsx(EmptyDocuments, { width: "10rem" }),
+          content: formatMessage({
+            id: "Settings.transferTokens.addFirstToken",
+            defaultMessage: "Add your first Transfer Token"
+          })
+        }
+      ) : null,
+      !canCreate && transferTokens.length === 0 ? /* @__PURE__ */ jsx(
+        EmptyStateLayout,
+        {
+          icon: /* @__PURE__ */ jsx(EmptyDocuments, { width: "10rem" }),
+          content: formatMessage({
+            id: "Settings.transferTokens.emptyStateLayout",
+            defaultMessage: "You don’t have any content yet..."
+          })
+        }
+      ) : null
+    ] }) })
+  ] });
+};
+const ProtectedListView = () => {
+  const permissions = useTypedSelector(
+    (state) => state.admin_app.permissions.settings?.["transfer-tokens"].main
+  );
+  return /* @__PURE__ */ jsx(Page.Protect, { permissions, children: /* @__PURE__ */ jsx(ListView, {}) });
+};
+export {
+  ListView,
+  ProtectedListView
+};
+//# sourceMappingURL=ListView-QEgFV6dm.mjs.map

package/dist/_chunks/ListView-QEgFV6dm.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListView-QEgFV6dm.mjs","sources":["../../admin/src/pages/Settings/pages/TransferTokens/ListView.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  ContentLayout,\n  EmptyStateLayout,\n  HeaderLayout,\n  LinkButton,\n  Main,\n} from '@strapi/design-system';\nimport { useFocusWhenNavigate, useRBAC } from '@strapi/helper-plugin';\nimport { EmptyDocuments, Plus } from '@strapi/icons';\nimport { Entity } from '@strapi/types';\nimport * as qs from 'qs';\nimport { Helmet } from 'react-helmet';\nimport { useIntl } from 'react-intl';\nimport { useNavigate } from 'react-router-dom';\n\nimport { Page } from '../../../../components/PageHelpers';\nimport { useTypedSelector } from '../../../../core/store/hooks';\nimport { useNotification } from '../../../../features/Notifications';\nimport { useTracking } from '../../../../features/Tracking';\nimport { useAPIErrorHandler } from '../../../../hooks/useAPIErrorHandler';\nimport { useOnce } from '../../../../hooks/useOnce';\nimport {\n  useDeleteTransferTokenMutation,\n  useGetTransferTokensQuery,\n} from '../../../../services/transferTokens';\nimport { TRANSFER_TOKEN_TYPE } from '../../components/Tokens/constants';\nimport { Table } from '../../components/Tokens/Table';\n\nconst tableHeaders = [\n  {\n    name: 'name',\n    label: {\n      id: 'Settings.tokens.ListView.headers.name',\n      defaultMessage: 'Name',\n    },\n    sortable: true,\n  },\n  {\n    name: 'description',\n    label: {\n      id: 'Settings.tokens.ListView.headers.description',\n      defaultMessage: 'Description',\n    },\n    sortable: false,\n  },\n  {\n    name: 'createdAt',\n    label: {\n      id: 'Settings.tokens.ListView.headers.createdAt',\n      defaultMessage: 'Created at',\n    },\n    sortable: false,\n  },\n  {\n    name: 'lastUsedAt',\n    label: {\n      id: 'Settings.tokens.ListView.headers.lastUsedAt',\n      defaultMessage: 'Last used',\n    },\n    sortable: false,\n  },\n] as const;\n\n/* -------------------------------------------------------------------------------------------------\n * ListView\n * -----------------------------------------------------------------------------------------------*/\n\nconst ListView = () => {\n  useFocusWhenNavigate();\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const permissions = useTypedSelector(\n    (state) => state.admin_app.permissions.settings?.['transfer-tokens']\n  );\n  const {\n    isLoading: isLoadingRBAC,\n    allowedActions: { canCreate, canDelete, canUpdate, canRead },\n  } = useRBAC(permissions);\n  const navigate = useNavigate();\n  const { trackUsage } = useTracking();\n  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();\n\n  React.useEffect(() => {\n    navigate({ search: qs.stringify({ sort: 'name:ASC' }, { encode: false }) });\n  }, [navigate]);\n\n  useOnce(() => {\n    trackUsage('willAccessTokenList', {\n      tokenType: TRANSFER_TOKEN_TYPE,\n    });\n  });\n\n  const headers = tableHeaders.map((header) => ({\n    ...header,\n    label: formatMessage(header.label),\n  }));\n\n  const {\n    data: transferTokens = [],\n    isLoading: isLoadingTokens,\n    error,\n  } = useGetTransferTokensQuery(undefined, {\n    skip: !canRead,\n  });\n\n  React.useEffect(() => {\n    if (transferTokens) {\n      trackUsage('didAccessTokenList', {\n        number: transferTokens.length,\n        tokenType: TRANSFER_TOKEN_TYPE,\n      });\n    }\n  }, [trackUsage, transferTokens]);\n\n  React.useEffect(() => {\n    if (error) {\n      toggleNotification({\n        type: 'danger',\n        message: formatAPIError(error),\n      });\n    }\n  }, [error, formatAPIError, toggleNotification]);\n\n  const [deleteToken] = useDeleteTransferTokenMutation();\n\n  const handleDelete = async (id: Entity.ID) => {\n    try {\n      const res = await deleteToken(id);\n\n      if ('error' in res) {\n        toggleNotification({\n          type: 'danger',\n          message: formatAPIError(res.error),\n        });\n      }\n    } catch {\n      toggleNotification({\n        type: 'danger',\n        message: formatMessage({ id: 'notification.error', defaultMessage: 'An error occured' }),\n      });\n    }\n  };\n\n  const isLoading = isLoadingTokens || isLoadingRBAC;\n\n  return (\n    <>\n      <Helmet\n        title={formatMessage(\n          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },\n          {\n            name: 'Transfer Tokens',\n          }\n        )}\n      />\n      <HeaderLayout\n        title={formatMessage({\n          id: 'Settings.transferTokens.title',\n          defaultMessage: 'Transfer Tokens',\n        })}\n        subtitle={formatMessage({\n          id: 'Settings.transferTokens.description',\n          defaultMessage: '\"List of generated transfer tokens\"', // TODO change this message\n        })}\n        primaryAction={\n          canCreate ? (\n            <LinkButton\n              data-testid=\"create-transfer-token-button\"\n              startIcon={<Plus />}\n              size=\"S\"\n              onClick={() =>\n                trackUsage('willAddTokenFromList', {\n                  tokenType: TRANSFER_TOKEN_TYPE,\n                })\n              }\n              to=\"/settings/transfer-tokens/create\"\n            >\n              {formatMessage({\n                id: 'Settings.transferTokens.create',\n                defaultMessage: 'Create new Transfer Token',\n              })}\n            </LinkButton>\n          ) : undefined\n        }\n      />\n      {!canRead ? (\n        <Page.NoPermissions />\n      ) : (\n        <Main aria-busy={isLoading}>\n          <ContentLayout>\n            {transferTokens.length > 0 && (\n              <Table\n                permissions={{ canRead, canDelete, canUpdate }}\n                headers={headers}\n                isLoading={isLoading}\n                onConfirmDelete={handleDelete}\n                tokens={transferTokens}\n                tokenType={TRANSFER_TOKEN_TYPE}\n              />\n            )}\n            {canCreate && transferTokens.length === 0 ? (\n              <EmptyStateLayout\n                action={\n                  <LinkButton\n                    variant=\"secondary\"\n                    startIcon={<Plus />}\n                    to=\"/settings/transfer-tokens/create\"\n                  >\n                    {formatMessage({\n                      id: 'Settings.transferTokens.addNewToken',\n                      defaultMessage: 'Add new Transfer Token',\n                    })}\n                  </LinkButton>\n                }\n                icon={<EmptyDocuments width=\"10rem\" />}\n                content={formatMessage({\n                  id: 'Settings.transferTokens.addFirstToken',\n                  defaultMessage: 'Add your first Transfer Token',\n                })}\n              />\n            ) : null}\n            {!canCreate && transferTokens.length === 0 ? (\n              <EmptyStateLayout\n                icon={<EmptyDocuments width=\"10rem\" />}\n                content={formatMessage({\n                  id: 'Settings.transferTokens.emptyStateLayout',\n                  defaultMessage: 'You don’t have any content yet...',\n                })}\n              />\n            ) : null}\n          </ContentLayout>\n        </Main>\n      )}\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * ProtectedListView\n * -----------------------------------------------------------------------------------------------*/\n\nconst ProtectedListView = () => {\n  const permissions = useTypedSelector(\n    (state) => state.admin_app.permissions.settings?.['transfer-tokens'].main\n  );\n\n  return (\n    <Page.Protect permissions={permissions}>\n      <ListView />\n    </Page.Protect>\n  );\n};\n\nexport { ListView, ProtectedListView };\n"],"names":[],"mappings":"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"}

package/dist/_chunks/ListView-hm-mjZ8N.mjs

@@ -0,0 +1,205 @@
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { HeaderLayout, LinkButton, Main, ContentLayout, EmptyStateLayout } from "@strapi/design-system";
+import { useFocusWhenNavigate, useRBAC } from "@strapi/helper-plugin";
+import { Plus, EmptyDocuments } from "@strapi/icons";
+import * as qs from "qs";
+import { Helmet } from "react-helmet";
+import { useIntl } from "react-intl";
+import { useNavigate } from "react-router-dom";
+import { q as useTypedSelector, P as Page, u as useNotification, d as useTracking, c as useGuidedTour, o as useAPIErrorHandler } from "./index-5ZvCaCyY.mjs";
+import { u as useOnce } from "./useOnce-BuAUYuau.mjs";
+import { u as useGetAPITokensQuery, a as useDeleteAPITokenMutation } from "./apiTokens-dGGyJI-w.mjs";
+import { A as API_TOKEN_TYPE } from "./constants-fJt30IoY.mjs";
+import { T as Table } from "./Table-k6gVR2KH.mjs";
+const TABLE_HEADERS = [
+  {
+    name: "name",
+    label: {
+      id: "Settings.apiTokens.ListView.headers.name",
+      defaultMessage: "Name"
+    },
+    sortable: true
+  },
+  {
+    name: "description",
+    label: {
+      id: "Settings.apiTokens.ListView.headers.description",
+      defaultMessage: "Description"
+    },
+    sortable: false
+  },
+  {
+    name: "createdAt",
+    label: {
+      id: "Settings.apiTokens.ListView.headers.createdAt",
+      defaultMessage: "Created at"
+    },
+    sortable: false
+  },
+  {
+    name: "lastUsedAt",
+    label: {
+      id: "Settings.apiTokens.ListView.headers.lastUsedAt",
+      defaultMessage: "Last used"
+    },
+    sortable: false
+  }
+];
+const ListView = () => {
+  useFocusWhenNavigate();
+  const { formatMessage } = useIntl();
+  const { toggleNotification } = useNotification();
+  const permissions = useTypedSelector(
+    (state) => state.admin_app.permissions.settings?.["api-tokens"]
+  );
+  const {
+    allowedActions: { canRead, canCreate, canDelete, canUpdate }
+  } = useRBAC(permissions);
+  const navigate = useNavigate();
+  const { trackUsage } = useTracking();
+  const startSection = useGuidedTour("ListView", (state) => state.startSection);
+  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();
+  React.useEffect(() => {
+    startSection("apiTokens");
+  }, [startSection]);
+  React.useEffect(() => {
+    navigate({ search: qs.stringify({ sort: "name:ASC" }, { encode: false }) });
+  }, [navigate]);
+  const headers = TABLE_HEADERS.map((header) => ({
+    ...header,
+    label: formatMessage(header.label)
+  }));
+  useOnce(() => {
+    trackUsage("willAccessTokenList", {
+      tokenType: API_TOKEN_TYPE
+    });
+  });
+  const { data: apiTokens = [], isLoading, error } = useGetAPITokensQuery();
+  React.useEffect(() => {
+    if (error) {
+      toggleNotification({
+        type: "danger",
+        message: formatAPIError(error)
+      });
+    }
+  }, [error, formatAPIError, toggleNotification]);
+  React.useEffect(() => {
+    trackUsage("didAccessTokenList", { number: apiTokens.length, tokenType: API_TOKEN_TYPE });
+  }, [apiTokens, trackUsage]);
+  const [deleteToken] = useDeleteAPITokenMutation();
+  const handleDelete = async (id) => {
+    try {
+      const res = await deleteToken(id);
+      if ("error" in res) {
+        toggleNotification({
+          type: "danger",
+          message: formatAPIError(res.error)
+        });
+        return;
+      }
+      trackUsage("didDeleteToken");
+    } catch {
+      toggleNotification({
+        type: "danger",
+        message: formatMessage({
+          id: "notification.error",
+          defaultMessage: "Something went wrong"
+        })
+      });
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Helmet,
+      {
+        title: formatMessage(
+          { id: "Settings.PageTitle", defaultMessage: "Settings - {name}" },
+          { name: "API Tokens" }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      HeaderLayout,
+      {
+        title: formatMessage({ id: "Settings.apiTokens.title", defaultMessage: "API Tokens" }),
+        subtitle: formatMessage({
+          id: "Settings.apiTokens.description",
+          defaultMessage: "List of generated tokens to consume the API"
+        }),
+        primaryAction: canCreate && /* @__PURE__ */ jsx(
+          LinkButton,
+          {
+            "data-testid": "create-api-token-button",
+            startIcon: /* @__PURE__ */ jsx(Plus, {}),
+            size: "S",
+            onClick: () => trackUsage("willAddTokenFromList", {
+              tokenType: API_TOKEN_TYPE
+            }),
+            to: "/settings/api-tokens/create",
+            children: formatMessage({
+              id: "Settings.apiTokens.create",
+              defaultMessage: "Create new API Token"
+            })
+          }
+        )
+      }
+    ),
+    !canRead ? /* @__PURE__ */ jsx(Page.NoPermissions, {}) : /* @__PURE__ */ jsx(Main, { "aria-busy": isLoading, children: /* @__PURE__ */ jsxs(ContentLayout, { children: [
+      apiTokens.length > 0 && /* @__PURE__ */ jsx(
+        Table,
+        {
+          permissions: { canRead, canDelete, canUpdate },
+          headers,
+          isLoading,
+          onConfirmDelete: handleDelete,
+          tokens: apiTokens,
+          tokenType: API_TOKEN_TYPE
+        }
+      ),
+      canCreate && apiTokens.length === 0 ? /* @__PURE__ */ jsx(
+        EmptyStateLayout,
+        {
+          icon: /* @__PURE__ */ jsx(EmptyDocuments, { width: "10rem" }),
+          content: formatMessage({
+            id: "Settings.apiTokens.addFirstToken",
+            defaultMessage: "Add your first API Token"
+          }),
+          action: /* @__PURE__ */ jsx(
+            LinkButton,
+            {
+              variant: "secondary",
+              startIcon: /* @__PURE__ */ jsx(Plus, {}),
+              to: "/settings/api-tokens/create",
+              children: formatMessage({
+                id: "Settings.apiTokens.addNewToken",
+                defaultMessage: "Add new API Token"
+              })
+            }
+          )
+        }
+      ) : null,
+      !canCreate && apiTokens.length === 0 ? /* @__PURE__ */ jsx(
+        EmptyStateLayout,
+        {
+          icon: /* @__PURE__ */ jsx(EmptyDocuments, { width: "10rem" }),
+          content: formatMessage({
+            id: "Settings.apiTokens.emptyStateLayout",
+            defaultMessage: "You don’t have any content yet..."
+          })
+        }
+      ) : null
+    ] }) })
+  ] });
+};
+const ProtectedListView = () => {
+  const permissions = useTypedSelector(
+    (state) => state.admin_app.permissions.settings?.["api-tokens"].main
+  );
+  return /* @__PURE__ */ jsx(Page.Protect, { permissions, children: /* @__PURE__ */ jsx(ListView, {}) });
+};
+export {
+  ListView,
+  ProtectedListView
+};
+//# sourceMappingURL=ListView-hm-mjZ8N.mjs.map

package/dist/_chunks/ListView-hm-mjZ8N.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListView-hm-mjZ8N.mjs","sources":["../../admin/src/pages/Settings/pages/ApiTokens/ListView.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  ContentLayout,\n  EmptyStateLayout,\n  HeaderLayout,\n  LinkButton,\n  Main,\n} from '@strapi/design-system';\nimport { useFocusWhenNavigate, useRBAC } from '@strapi/helper-plugin';\nimport { EmptyDocuments, Plus } from '@strapi/icons';\nimport { Entity } from '@strapi/types';\nimport * as qs from 'qs';\nimport { Helmet } from 'react-helmet';\nimport { useIntl } from 'react-intl';\nimport { useNavigate } from 'react-router-dom';\n\nimport { useGuidedTour } from '../../../../components/GuidedTour/Provider';\nimport { Page } from '../../../../components/PageHelpers';\nimport { useTypedSelector } from '../../../../core/store/hooks';\nimport { useNotification } from '../../../../features/Notifications';\nimport { useTracking } from '../../../../features/Tracking';\nimport { useAPIErrorHandler } from '../../../../hooks/useAPIErrorHandler';\nimport { useOnce } from '../../../../hooks/useOnce';\nimport { useDeleteAPITokenMutation, useGetAPITokensQuery } from '../../../../services/apiTokens';\nimport { API_TOKEN_TYPE } from '../../components/Tokens/constants';\nimport { Table } from '../../components/Tokens/Table';\n\nconst TABLE_HEADERS = [\n  {\n    name: 'name',\n    label: {\n      id: 'Settings.apiTokens.ListView.headers.name',\n      defaultMessage: 'Name',\n    },\n    sortable: true,\n  },\n  {\n    name: 'description',\n    label: {\n      id: 'Settings.apiTokens.ListView.headers.description',\n      defaultMessage: 'Description',\n    },\n    sortable: false,\n  },\n  {\n    name: 'createdAt',\n    label: {\n      id: 'Settings.apiTokens.ListView.headers.createdAt',\n      defaultMessage: 'Created at',\n    },\n    sortable: false,\n  },\n  {\n    name: 'lastUsedAt',\n    label: {\n      id: 'Settings.apiTokens.ListView.headers.lastUsedAt',\n      defaultMessage: 'Last used',\n    },\n    sortable: false,\n  },\n];\n\nexport const ListView = () => {\n  useFocusWhenNavigate();\n  const { formatMessage } = useIntl();\n  const { toggleNotification } = useNotification();\n  const permissions = useTypedSelector(\n    (state) => state.admin_app.permissions.settings?.['api-tokens']\n  );\n  const {\n    allowedActions: { canRead, canCreate, canDelete, canUpdate },\n  } = useRBAC(permissions);\n  const navigate = useNavigate();\n  const { trackUsage } = useTracking();\n  const startSection = useGuidedTour('ListView', (state) => state.startSection);\n  const { _unstableFormatAPIError: formatAPIError } = useAPIErrorHandler();\n\n  React.useEffect(() => {\n    startSection('apiTokens');\n  }, [startSection]);\n\n  React.useEffect(() => {\n    navigate({ search: qs.stringify({ sort: 'name:ASC' }, { encode: false }) });\n  }, [navigate]);\n\n  const headers = TABLE_HEADERS.map((header) => ({\n    ...header,\n    label: formatMessage(header.label),\n  }));\n\n  useOnce(() => {\n    trackUsage('willAccessTokenList', {\n      tokenType: API_TOKEN_TYPE,\n    });\n  });\n\n  const { data: apiTokens = [], isLoading, error } = useGetAPITokensQuery();\n\n  React.useEffect(() => {\n    if (error) {\n      toggleNotification({\n        type: 'danger',\n        message: formatAPIError(error),\n      });\n    }\n  }, [error, formatAPIError, toggleNotification]);\n\n  React.useEffect(() => {\n    trackUsage('didAccessTokenList', { number: apiTokens.length, tokenType: API_TOKEN_TYPE });\n  }, [apiTokens, trackUsage]);\n\n  const [deleteToken] = useDeleteAPITokenMutation();\n\n  const handleDelete = async (id: Entity.ID) => {\n    try {\n      const res = await deleteToken(id);\n\n      if ('error' in res) {\n        toggleNotification({\n          type: 'danger',\n          message: formatAPIError(res.error),\n        });\n\n        return;\n      }\n\n      trackUsage('didDeleteToken');\n    } catch {\n      toggleNotification({\n        type: 'danger',\n        message: formatMessage({\n          id: 'notification.error',\n          defaultMessage: 'Something went wrong',\n        }),\n      });\n    }\n  };\n\n  return (\n    <>\n      <Helmet\n        title={formatMessage(\n          { id: 'Settings.PageTitle', defaultMessage: 'Settings - {name}' },\n          { name: 'API Tokens' }\n        )}\n      />\n      <HeaderLayout\n        title={formatMessage({ id: 'Settings.apiTokens.title', defaultMessage: 'API Tokens' })}\n        subtitle={formatMessage({\n          id: 'Settings.apiTokens.description',\n          defaultMessage: 'List of generated tokens to consume the API',\n        })}\n        primaryAction={\n          canCreate && (\n            <LinkButton\n              data-testid=\"create-api-token-button\"\n              startIcon={<Plus />}\n              size=\"S\"\n              onClick={() =>\n                trackUsage('willAddTokenFromList', {\n                  tokenType: API_TOKEN_TYPE,\n                })\n              }\n              to=\"/settings/api-tokens/create\"\n            >\n              {formatMessage({\n                id: 'Settings.apiTokens.create',\n                defaultMessage: 'Create new API Token',\n              })}\n            </LinkButton>\n          )\n        }\n      />\n      {!canRead ? (\n        <Page.NoPermissions />\n      ) : (\n        <Main aria-busy={isLoading}>\n          <ContentLayout>\n            {apiTokens.length > 0 && (\n              <Table\n                permissions={{ canRead, canDelete, canUpdate }}\n                headers={headers}\n                isLoading={isLoading}\n                onConfirmDelete={handleDelete}\n                tokens={apiTokens}\n                tokenType={API_TOKEN_TYPE}\n              />\n            )}\n            {canCreate && apiTokens.length === 0 ? (\n              <EmptyStateLayout\n                icon={<EmptyDocuments width=\"10rem\" />}\n                content={formatMessage({\n                  id: 'Settings.apiTokens.addFirstToken',\n                  defaultMessage: 'Add your first API Token',\n                })}\n                action={\n                  <LinkButton\n                    variant=\"secondary\"\n                    startIcon={<Plus />}\n                    to=\"/settings/api-tokens/create\"\n                  >\n                    {formatMessage({\n                      id: 'Settings.apiTokens.addNewToken',\n                      defaultMessage: 'Add new API Token',\n                    })}\n                  </LinkButton>\n                }\n              />\n            ) : null}\n            {!canCreate && apiTokens.length === 0 ? (\n              <EmptyStateLayout\n                icon={<EmptyDocuments width=\"10rem\" />}\n                content={formatMessage({\n                  id: 'Settings.apiTokens.emptyStateLayout',\n                  defaultMessage: 'You don’t have any content yet...',\n                })}\n              />\n            ) : null}\n          </ContentLayout>\n        </Main>\n      )}\n    </>\n  );\n};\n\nexport const ProtectedListView = () => {\n  const permissions = useTypedSelector(\n    (state) => state.admin_app.permissions.settings?.['api-tokens'].main\n  );\n\n  return (\n    <Page.Protect permissions={permissions}>\n      <ListView />\n    </Page.Protect>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;AA4BA,MAAM,gBAAgB;AAAA,EACpB;AAAA,IACE,MAAM;AAAA,IACN,OAAO;AAAA,MACL,IAAI;AAAA,MACJ,gBAAgB;AAAA,IAClB;AAAA,IACA,UAAU;AAAA,EACZ;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,OAAO;AAAA,MACL,IAAI;AAAA,MACJ,gBAAgB;AAAA,IAClB;AAAA,IACA,UAAU;AAAA,EACZ;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,OAAO;AAAA,MACL,IAAI;AAAA,MACJ,gBAAgB;AAAA,IAClB;AAAA,IACA,UAAU;AAAA,EACZ;AAAA,EACA;AAAA,IACE,MAAM;AAAA,IACN,OAAO;AAAA,MACL,IAAI;AAAA,MACJ,gBAAgB;AAAA,IAClB;AAAA,IACA,UAAU;AAAA,EACZ;AACF;AAEO,MAAM,WAAW,MAAM;AACP;AACf,QAAA,EAAE,kBAAkB;AACpB,QAAA,EAAE,uBAAuB;AAC/B,QAAM,cAAc;AAAA,IAClB,CAAC,UAAU,MAAM,UAAU,YAAY,WAAW,YAAY;AAAA,EAAA;AAE1D,QAAA;AAAA,IACJ,gBAAgB,EAAE,SAAS,WAAW,WAAW,UAAU;AAAA,EAAA,IACzD,QAAQ,WAAW;AACvB,QAAM,WAAW;AACX,QAAA,EAAE,eAAe;AACvB,QAAM,eAAe,cAAc,YAAY,CAAC,UAAU,MAAM,YAAY;AAC5E,QAAM,EAAE,yBAAyB,eAAe,IAAI,mBAAmB;AAEvE,QAAM,UAAU,MAAM;AACpB,iBAAa,WAAW;AAAA,EAAA,GACvB,CAAC,YAAY,CAAC;AAEjB,QAAM,UAAU,MAAM;AACpB,aAAS,EAAE,QAAQ,GAAG,UAAU,EAAE,MAAM,WAAW,GAAG,EAAE,QAAQ,MAAO,CAAA,EAAG,CAAA;AAAA,EAAA,GACzE,CAAC,QAAQ,CAAC;AAEb,QAAM,UAAU,cAAc,IAAI,CAAC,YAAY;AAAA,IAC7C,GAAG;AAAA,IACH,OAAO,cAAc,OAAO,KAAK;AAAA,EACjC,EAAA;AAEF,UAAQ,MAAM;AACZ,eAAW,uBAAuB;AAAA,MAChC,WAAW;AAAA,IAAA,CACZ;AAAA,EAAA,CACF;AAEK,QAAA,EAAE,MAAM,YAAY,CAAA,GAAI,WAAW,MAAA,IAAU;AAEnD,QAAM,UAAU,MAAM;AACpB,QAAI,OAAO;AACU,yBAAA;AAAA,QACjB,MAAM;AAAA,QACN,SAAS,eAAe,KAAK;AAAA,MAAA,CAC9B;AAAA,IACH;AAAA,EACC,GAAA,CAAC,OAAO,gBAAgB,kBAAkB,CAAC;AAE9C,QAAM,UAAU,MAAM;AACpB,eAAW,sBAAsB,EAAE,QAAQ,UAAU,QAAQ,WAAW,gBAAgB;AAAA,EAAA,GACvF,CAAC,WAAW,UAAU,CAAC;AAEpB,QAAA,CAAC,WAAW,IAAI;AAEhB,QAAA,eAAe,OAAO,OAAkB;AACxC,QAAA;AACI,YAAA,MAAM,MAAM,YAAY,EAAE;AAEhC,UAAI,WAAW,KAAK;AACC,2BAAA;AAAA,UACjB,MAAM;AAAA,UACN,SAAS,eAAe,IAAI,KAAK;AAAA,QAAA,CAClC;AAED;AAAA,MACF;AAEA,iBAAW,gBAAgB;AAAA,IAAA,QACrB;AACa,yBAAA;AAAA,QACjB,MAAM;AAAA,QACN,SAAS,cAAc;AAAA,UACrB,IAAI;AAAA,UACJ,gBAAgB;AAAA,QAAA,CACjB;AAAA,MAAA,CACF;AAAA,IACH;AAAA,EAAA;AAGF,SAEI,qBAAA,UAAA,EAAA,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,UACL,EAAE,IAAI,sBAAsB,gBAAgB,oBAAoB;AAAA,UAChE,EAAE,MAAM,aAAa;AAAA,QACvB;AAAA,MAAA;AAAA,IACF;AAAA,IACA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO,cAAc,EAAE,IAAI,4BAA4B,gBAAgB,cAAc;AAAA,QACrF,UAAU,cAAc;AAAA,UACtB,IAAI;AAAA,UACJ,gBAAgB;AAAA,QAAA,CACjB;AAAA,QACD,eACE,aACE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,eAAY;AAAA,YACZ,+BAAY,MAAK,EAAA;AAAA,YACjB,MAAK;AAAA,YACL,SAAS,MACP,WAAW,wBAAwB;AAAA,cACjC,WAAW;AAAA,YAAA,CACZ;AAAA,YAEH,IAAG;AAAA,YAEF,UAAc,cAAA;AAAA,cACb,IAAI;AAAA,cACJ,gBAAgB;AAAA,YAAA,CACjB;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAGN;AAAA,IACC,CAAC,UACC,oBAAA,KAAK,eAAL,CAAA,CAAmB,IAEpB,oBAAC,MAAK,EAAA,aAAW,WACf,UAAA,qBAAC,eACE,EAAA,UAAA;AAAA,MAAA,UAAU,SAAS,KAClB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,aAAa,EAAE,SAAS,WAAW,UAAU;AAAA,UAC7C;AAAA,UACA;AAAA,UACA,iBAAiB;AAAA,UACjB,QAAQ;AAAA,UACR,WAAW;AAAA,QAAA;AAAA,MACb;AAAA,MAED,aAAa,UAAU,WAAW,IACjC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM,oBAAC,gBAAe,EAAA,OAAM,QAAQ,CAAA;AAAA,UACpC,SAAS,cAAc;AAAA,YACrB,IAAI;AAAA,YACJ,gBAAgB;AAAA,UAAA,CACjB;AAAA,UACD,QACE;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAAQ;AAAA,cACR,+BAAY,MAAK,EAAA;AAAA,cACjB,IAAG;AAAA,cAEF,UAAc,cAAA;AAAA,gBACb,IAAI;AAAA,gBACJ,gBAAgB;AAAA,cAAA,CACjB;AAAA,YAAA;AAAA,UACH;AAAA,QAAA;AAAA,MAAA,IAGF;AAAA,MACH,CAAC,aAAa,UAAU,WAAW,IAClC;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAM,oBAAC,gBAAe,EAAA,OAAM,QAAQ,CAAA;AAAA,UACpC,SAAS,cAAc;AAAA,YACrB,IAAI;AAAA,YACJ,gBAAgB;AAAA,UAAA,CACjB;AAAA,QAAA;AAAA,MAAA,IAED;AAAA,IAAA,EAAA,CACN,EACF,CAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;AAEO,MAAM,oBAAoB,MAAM;AACrC,QAAM,cAAc;AAAA,IAClB,CAAC,UAAU,MAAM,UAAU,YAAY,WAAW,YAAY,EAAE;AAAA,EAAA;AAGlE,6BACG,KAAK,SAAL,EAAa,aACZ,UAAA,oBAAC,YAAS,EACZ,CAAA;AAEJ;"}