import {
  useDeleteAPITokenMutation,
  useGetAPITokensQuery
} from "./chunk-NC2FHXMX.js";
import {
  Table
} from "./chunk-XUJ2XFL4.js";
import {
  useOnce
} from "./chunk-AF2Z2UHO.js";
import {
  API_TOKEN_TYPE
} from "./chunk-7GAX2FTH.js";
import {
  useGuidedTour
} from "./chunk-PFI4R5WA.js";
import "./chunk-NP53ZCXD.js";
import "./chunk-KFLQQE5L.js";
import "./chunk-ED4XR3VQ.js";
import "./chunk-MBK4V2X7.js";
import "./chunk-RMBEU7DO.js";
import "./chunk-RI2W2UZ6.js";
import {
  useTracking
} from "./chunk-GSN7U3BK.js";
import "./chunk-T3B5F2LV.js";
import "./chunk-YXDCVYVT.js";
import "./chunk-ZM6TT53G.js";
import {
  useRBAC
} from "./chunk-CMLQV3Z2.js";
import "./chunk-D4WYVNVM.js";
import "./chunk-MMOBCIZG.js";
import {
  Layouts
} from "./chunk-TIVRAWTC.js";
import "./chunk-PQINNV4N.js";
import "./chunk-VYSYYPOB.js";
import {
  ForwardRef$J,
  Page,
  useAPIErrorHandler
} from "./chunk-5CAWUBTQ.js";
import "./chunk-W2TBR6J3.js";
import {
  useTypedSelector
} from "./chunk-QEGMJR7H.js";
import {
  require_lib
} from "./chunk-LCL5TIBZ.js";
import "./chunk-WOQNBAGN.js";
import "./chunk-BHLYCXQ7.js";
import "./chunk-76QM3EFM.js";
import "./chunk-CE4VABH2.js";
import "./chunk-5VODLFKF.js";
import {
  useNotification
} from "./chunk-N55RVBRV.js";
import {
  EmptyStateLayout,
  LinkButton,
  useIntl
} from "./chunk-7XB6XSWQ.js";
import {
  Link,
  useNavigate
} from "./chunk-TUXTO2Z5.js";
import "./chunk-FOD4ENRR.js";
import {
  ForwardRef$1h
} from "./chunk-WRD5KPDH.js";
import {
  require_jsx_runtime
} from "./chunk-NIAJZ5MX.js";
import "./chunk-ACIMPXWY.js";
import {
  require_react
} from "./chunk-MADUDGYZ.js";
import {
  __toESM
} from "./chunk-PLDDJCW6.js";

// node_modules/@strapi/admin/dist/admin/admin/src/pages/Settings/pages/ApiTokens/ListView.mjs
var import_jsx_runtime = __toESM(require_jsx_runtime(), 1);
var React = __toESM(require_react(), 1);
var qs = __toESM(require_lib(), 1);
var 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
  }
];
var ListView = () => {
  const { formatMessage } = useIntl();
  const { toggleNotification } = useNotification();
  const permissions = useTypedSelector((state) => {
    var _a;
    return (_a = state.admin_app.permissions.settings) == null ? void 0 : _a["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 (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, {
    children: [
      (0, import_jsx_runtime.jsx)(Page.Title, {
        children: formatMessage({
          id: "Settings.PageTitle",
          defaultMessage: "Settings - {name}"
        }, {
          name: "API Tokens"
        })
      }),
      (0, import_jsx_runtime.jsx)(Layouts.Header, {
        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 && (0, import_jsx_runtime.jsx)(LinkButton, {
          tag: Link,
          "data-testid": "create-api-token-button",
          startIcon: (0, import_jsx_runtime.jsx)(ForwardRef$1h, {}),
          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 ? (0, import_jsx_runtime.jsx)(Page.NoPermissions, {}) : (0, import_jsx_runtime.jsx)(Page.Main, {
        "aria-busy": isLoading,
        children: (0, import_jsx_runtime.jsxs)(Layouts.Content, {
          children: [
            apiTokens.length > 0 && (0, import_jsx_runtime.jsx)(Table, {
              permissions: {
                canRead,
                canDelete,
                canUpdate
              },
              headers,
              isLoading,
              onConfirmDelete: handleDelete,
              tokens: apiTokens,
              tokenType: API_TOKEN_TYPE
            }),
            canCreate && apiTokens.length === 0 ? (0, import_jsx_runtime.jsx)(EmptyStateLayout, {
              icon: (0, import_jsx_runtime.jsx)(ForwardRef$J, {
                width: "16rem"
              }),
              content: formatMessage({
                id: "Settings.apiTokens.addFirstToken",
                defaultMessage: "Add your first API Token"
              }),
              action: (0, import_jsx_runtime.jsx)(LinkButton, {
                tag: Link,
                variant: "secondary",
                startIcon: (0, import_jsx_runtime.jsx)(ForwardRef$1h, {}),
                to: "/settings/api-tokens/create",
                children: formatMessage({
                  id: "Settings.apiTokens.addNewToken",
                  defaultMessage: "Add new API Token"
                })
              })
            }) : null,
            !canCreate && apiTokens.length === 0 ? (0, import_jsx_runtime.jsx)(EmptyStateLayout, {
              icon: (0, import_jsx_runtime.jsx)(ForwardRef$J, {
                width: "16rem"
              }),
              content: formatMessage({
                id: "Settings.apiTokens.emptyStateLayout",
                defaultMessage: "You don’t have any content yet..."
              })
            }) : null
          ]
        })
      })
    ]
  });
};
var ProtectedListView = () => {
  const permissions = useTypedSelector((state) => {
    var _a;
    return (_a = state.admin_app.permissions.settings) == null ? void 0 : _a["api-tokens"].main;
  });
  return (0, import_jsx_runtime.jsx)(Page.Protect, {
    permissions,
    children: (0, import_jsx_runtime.jsx)(ListView, {})
  });
};
export {
  ListView,
  ProtectedListView
};
//# sourceMappingURL=ListView-RTH3ATTT.js.map