RTKQuery integration: API Keys (#40043)

frontend/src/metabase-types/api/admin.ts

@@ -14,3 +14,24 @@ export type ApiKey = {
     common_name: string;
   };
 };
+
+export type CreateApiKeyInput = {
+  name: string;
+  group_id: string;
+};
+
+export type CreateApiKeyResponse = {
+  unmasked_key: string;
+};
+
+export type UpdateApiKeyInput = {
+  id: number;
+  group_id: string;
+  name: string;
+};
+
+export type UpdateApiKeyResponse = void;
+
+export type RegenerateApiKeyResponse = {
+  unmasked_key: string;
+};

frontend/src/metabase/admin/people/components/GroupMembersTable/GroupMembersTable.tsx

 import { useMemo } from "react";
-import { useAsync } from "react-use";
 import { t } from "ttag";
 
+import { useListApiKeyQuery } from "metabase/api";
 import AdminContentTable from "metabase/components/AdminContentTable";
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
 import PaginationControls from "metabase/components/PaginationControls";
@@ -11,7 +11,6 @@ import { isAdminGroup, isDefaultGroup } from "metabase/lib/groups";
 import { isNotNull } from "metabase/lib/types";
 import { getFullName } from "metabase/lib/user";
 import { PLUGIN_GROUP_MANAGERS } from "metabase/plugins";
-import { ApiKeysApi } from "metabase/services";
 import { Tooltip, Text, Icon } from "metabase/ui";
 import type { ApiKey, Group, Member, User as IUser } from "metabase-types/api";
 import type { State } from "metabase-types/store";
@@ -59,14 +58,10 @@ function GroupMembersTable({
   onPreviousPage,
   reload,
 }: GroupMembersTableProps) {
-  const { loading, value: apiKeys } = useAsync(async () => {
-    const apiKeys = await (ApiKeysApi.list() as Promise<ApiKey[]>);
-    const filteredApiKeys = apiKeys?.filter(
-      (apiKey: ApiKey) => apiKey.group.id === group.id,
-    );
-
-    return filteredApiKeys ?? [];
-  }, [group.id]);
+  const { isLoading, data: apiKeys } = useListApiKeyQuery();
+  const groupApiKeys = useMemo(() => {
+    return apiKeys?.filter(apiKey => apiKey.group.id === group.id) ?? [];
+  }, [apiKeys, group.id]);
 
   // you can't remove people from Default and you can't remove the last user from Admin
   const isCurrentUser = ({ id }: Partial<IUser>) => id === currentUserId;
@@ -97,8 +92,8 @@ function GroupMembersTable({
     [groupMemberships],
   );
 
-  if (loading) {
-    return <LoadingAndErrorWrapper loading={loading} />;
+  if (isLoading) {
+    return <LoadingAndErrorWrapper loading={isLoading} />;
   }
 
   return (
@@ -112,7 +107,7 @@ function GroupMembersTable({
             onDone={handleAddUser}
           />
         )}
-        {apiKeys?.map((apiKey: ApiKey) => (
+        {groupApiKeys?.map((apiKey: ApiKey) => (
           <ApiKeyRow key={`apiKey-${apiKey.id}`} apiKey={apiKey} />
         ))}
         {groupUsers.map((user: IUser) => {

frontend/src/metabase/admin/people/components/GroupsListing.jsx

 /* eslint-disable react/prop-types */
 import cx from "classnames";
 import { Component } from "react";
-import { useAsync } from "react-use";
 import { jt, t } from "ttag";
 import _ from "underscore";
 
+import { useListApiKeyQuery } from "metabase/api";
 import AdminContentTable from "metabase/components/AdminContentTable";
 import AdminPaneLayout from "metabase/components/AdminPaneLayout";
 import Alert from "metabase/components/Alert";
@@ -25,7 +25,6 @@ import {
   getGroupNameLocalized,
 } from "metabase/lib/groups";
 import { KEYCODE_ENTER } from "metabase/lib/keyboard";
-import { ApiKeysApi } from "metabase/services";
 import { Stack, Text, Group, Button, Icon } from "metabase/ui";
 
 import { AddRow } from "./AddRow";
@@ -277,10 +276,10 @@ function GroupsTable({
   onEditGroupCancelClicked,
   onEditGroupDoneClicked,
 }) {
-  const { loading, value: apiKeys } = useAsync(() => ApiKeysApi.list(), []);
+  const { isLoading, data: apiKeys } = useListApiKeyQuery();
 
-  if (loading) {
-    return <LoadingAndErrorWrapper loading={loading} />;
+  if (isLoading) {
+    return <LoadingAndErrorWrapper loading={isLoading} />;
   }
 
   return (

frontend/src/metabase/admin/settings/auth/components/ApiKeysAuthCard.tsx

-import { useEffect, useState } from "react";
 import { t } from "ttag";
 
-import { ApiKeysApi } from "metabase/services";
+import { useCountApiKeyQuery } from "metabase/api";
 
 import { AuthCardBody } from "./AuthCard/AuthCard";
 
 export const ApiKeysAuthCard = () => {
-  const [keyCount, setKeyCount] = useState(0);
-
-  useEffect(() => {
-    ApiKeysApi.count().then(setKeyCount);
-  }, []);
-
+  const { data } = useCountApiKeyQuery();
+  const keyCount = data ?? 0;
   const isConfigured = keyCount > 0;
 
   return (

frontend/src/metabase/admin/settings/components/ApiKeys/CreateApiKeyModal.tsx

 import { useCallback, useState } from "react";
 import { t } from "ttag";
 
+import { useCreateApiKeyMutation } from "metabase/api";
 import {
   Form,
   FormErrorMessage,
@@ -9,30 +10,22 @@ import {
   FormSubmitButton,
   FormTextInput,
 } from "metabase/forms";
-import { ApiKeysApi } from "metabase/services";
 import { Text, Button, Group, Modal, Stack } from "metabase/ui";
 
 import { SecretKeyModal } from "./SecretKeyModal";
 import { API_KEY_VALIDATION_SCHEMA } from "./utils";
 
-export const CreateApiKeyModal = ({
-  onClose,
-  refreshList,
-}: {
-  onClose: () => void;
-  refreshList: () => void;
-}) => {
+export const CreateApiKeyModal = ({ onClose }: { onClose: () => void }) => {
   const [modal, setModal] = useState<"create" | "secretKey">("create");
-  const [secretKey, setSecretKey] = useState<string>("");
+  const [createApiKey, response] = useCreateApiKeyMutation();
+  const secretKey = response?.data?.unmasked_key || "";
 
   const handleSubmit = useCallback(
     async vals => {
-      const response = await ApiKeysApi.create(vals);
-      setSecretKey(response.unmasked_key);
+      await createApiKey(vals);
       setModal("secretKey");
-      refreshList();
     },
-    [refreshList],
+    [createApiKey],
   );
 
   if (modal === "secretKey") {

frontend/src/metabase/admin/settings/components/ApiKeys/DeleteApiKeyModal.tsx

 import { useCallback } from "react";
 import { t } from "ttag";
 
+import { useDeleteApiKeyMutation } from "metabase/api";
 import {
   FormProvider,
   Form,
   FormSubmitButton,
   FormErrorMessage,
 } from "metabase/forms";
-import { ApiKeysApi } from "metabase/services";
 import { Text, Button, Group, Modal, Stack } from "metabase/ui";
 import type { ApiKey } from "metabase-types/api";
 
 export const DeleteApiKeyModal = ({
   onClose,
-  refreshList,
   apiKey,
 }: {
   onClose: () => void;
-  refreshList: () => void;
   apiKey: ApiKey;
 }) => {
+  const [deleteApiKey] = useDeleteApiKeyMutation();
+
   const handleDelete = useCallback(async () => {
-    await ApiKeysApi.delete({ id: apiKey.id });
-    refreshList();
+    await deleteApiKey(apiKey.id);
     onClose();
-  }, [refreshList, onClose, apiKey.id]);
+  }, [onClose, apiKey.id, deleteApiKey]);
 
   return (
     <Modal

frontend/src/metabase/admin/settings/components/ApiKeys/EditApiKeyModal.tsx

 import { useCallback, useState } from "react";
 import { t } from "ttag";
 
+import {
+  useRegenerateApiKeyMutation,
+  useUpdateApiKeyMutation,
+} from "metabase/api";
 import {
   Form,
   FormErrorMessage,
@@ -9,7 +13,6 @@ import {
   FormSubmitButton,
   FormTextInput,
 } from "metabase/forms";
-import { ApiKeysApi } from "metabase/services";
 import { Button, Group, Modal, Stack, Text } from "metabase/ui";
 import { getThemeOverrides } from "metabase/ui/theme";
 import type { ApiKey } from "metabase-types/api";
@@ -18,25 +21,24 @@ import { SecretKeyModal } from "./SecretKeyModal";
 import { API_KEY_VALIDATION_SCHEMA } from "./utils";
 
 const { fontFamilyMonospace } = getThemeOverrides();
+
 type EditModalName = "edit" | "regenerate" | "secretKey";
 
 const RegenerateKeyModal = ({
   apiKey,
   setModal,
   setSecretKey,
-  refreshList,
 }: {
   apiKey: ApiKey;
   setModal: (name: EditModalName) => void;
   setSecretKey: (key: string) => void;
-  refreshList: () => void;
 }) => {
+  const [regenerateApiKey] = useRegenerateApiKeyMutation();
   const handleRegenerate = useCallback(async () => {
-    const result = await ApiKeysApi.regenerate({ id: apiKey.id });
+    const result = await regenerateApiKey(apiKey.id).unwrap();
     setSecretKey(result.unmasked_key);
     setModal("secretKey");
-    refreshList();
-  }, [apiKey.id, refreshList, setModal, setSecretKey]);
+  }, [apiKey.id, setModal, setSecretKey, regenerateApiKey]);
 
   return (
     <Modal
@@ -88,27 +90,25 @@ const RegenerateKeyModal = ({
 
 export const EditApiKeyModal = ({
   onClose,
-  refreshList,
   apiKey,
 }: {
   onClose: () => void;
-  refreshList: () => void;
   apiKey: ApiKey;
 }) => {
   const [modal, setModal] = useState<EditModalName>("edit");
   const [secretKey, setSecretKey] = useState<string>("");
+  const [updateApiKey] = useUpdateApiKeyMutation();
 
   const handleSubmit = useCallback(
     async vals => {
-      await ApiKeysApi.edit({
+      await updateApiKey({
         id: vals.id,
         group_id: vals.group_id,
         name: vals.name,
-      });
-      refreshList();
+      }).unwrap();
       onClose();
     },
-    [onClose, refreshList],
+    [onClose, updateApiKey],
   );
 
   if (modal === "secretKey") {
@@ -121,7 +121,6 @@ export const EditApiKeyModal = ({
         apiKey={apiKey}
         setModal={setModal}
         setSecretKey={setSecretKey}
-        refreshList={refreshList}
       />
     );
   }

frontend/src/metabase/admin/settings/components/ApiKeys/ManageApiKeys.tsx

-import { useEffect, useState } from "react";
-import { useAsyncFn } from "react-use";
+import { useState, useMemo } from "react";
 import { t } from "ttag";
 
-const { fontFamilyMonospace } = getThemeOverrides();
-
+import { useListApiKeyQuery } from "metabase/api";
 import Breadcrumbs from "metabase/components/Breadcrumbs";
 import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
 import { Ellipsified } from "metabase/core/components/Ellipsified";
 import { formatDateTimeWithUnit } from "metabase/lib/formatting/date";
-import { ApiKeysApi } from "metabase/services";
 import { Stack, Title, Text, Button, Group, Icon } from "metabase/ui";
 import { getThemeOverrides } from "metabase/ui/theme";
 import type { ApiKey } from "metabase-types/api";
@@ -18,6 +15,8 @@ import { DeleteApiKeyModal } from "./DeleteApiKeyModal";
 import { EditApiKeyModal } from "./EditApiKeyModal";
 import { formatMaskedKey } from "./utils";
 
+const { fontFamilyMonospace } = getThemeOverrides();
+
 type Modal = null | "create" | "edit" | "delete";
 
 function EmptyTableWarning({ onCreate }: { onCreate: () => void }) {
@@ -45,7 +44,7 @@ function ApiKeysTable({
   setActiveApiKey: (apiKey: ApiKey) => void;
   setModal: (modal: Modal) => void;
   loading: boolean;
-  error?: Error;
+  error?: unknown;
 }) {
   return (
     <Stack data-testid="api-keys-table" pb="lg">
@@ -111,24 +110,23 @@ export const ManageApiKeys = () => {
   const [modal, setModal] = useState<Modal>(null);
   const [activeApiKey, setActiveApiKey] = useState<null | ApiKey>(null);
 
-  const [{ value: apiKeys, loading, error }, refreshList] = useAsyncFn(
-    (): Promise<ApiKey[]> => ApiKeysApi.list(),
-    [],
-  );
+  const { data: apiKeys, error, isLoading } = useListApiKeyQuery();
 
-  const handleClose = () => setModal(null);
+  const sortedApiKeys = useMemo(() => {
+    if (!apiKeys) {
+      return;
+    }
+    return [...apiKeys].sort((a, b) => a.name.localeCompare(b.name));
+  }, [apiKeys]);
 
-  useEffect(() => {
-    refreshList();
-  }, [refreshList]);
+  const handleClose = () => setModal(null);
 
-  const tableIsEmpty = !loading && !error && apiKeys?.length === 0;
+  const tableIsEmpty = !isLoading && !error && apiKeys?.length === 0;
 
   return (
     <>
       <ApiKeyModals
         onClose={handleClose}
-        refreshList={refreshList}
         modal={modal}
         activeApiKey={activeApiKey}
       />
@@ -156,9 +154,9 @@ export const ManageApiKeys = () => {
           >{t`Create API Key`}</Button>
         </Group>
         <ApiKeysTable
-          loading={loading}
+          loading={isLoading}
           error={error}
-          apiKeys={apiKeys?.sort((a, b) => a.name.localeCompare(b.name))}
+          apiKeys={sortedApiKeys}
           setActiveApiKey={setActiveApiKey}
           setModal={setModal}
         />
@@ -169,37 +167,23 @@ export const ManageApiKeys = () => {
 
 function ApiKeyModals({
   onClose,
-  refreshList,
   modal,
   activeApiKey,
 }: {
   onClose: () => void;
-  refreshList: () => void;
   modal: Modal;
   activeApiKey: ApiKey | null;
 }) {
   if (modal === "create") {
-    return <CreateApiKeyModal onClose={onClose} refreshList={refreshList} />;
+    return <CreateApiKeyModal onClose={onClose} />;
   }
 
   if (modal === "edit" && activeApiKey) {
-    return (
-      <EditApiKeyModal
-        onClose={onClose}
-        refreshList={refreshList}
-        apiKey={activeApiKey}
-      />
-    );
+    return <EditApiKeyModal onClose={onClose} apiKey={activeApiKey} />;
   }
 
   if (modal === "delete" && activeApiKey) {
-    return (
-      <DeleteApiKeyModal
-        apiKey={activeApiKey}
-        onClose={onClose}
-        refreshList={refreshList}
-      />
-    );
+    return <DeleteApiKeyModal apiKey={activeApiKey} onClose={onClose} />;
   }
 
   return null;

frontend/src/metabase/api/api-keys.ts

+import type {
+  ApiKey,
+  CreateApiKeyInput,
+  CreateApiKeyResponse,
+  UpdateApiKeyInput,
+  UpdateApiKeyResponse,
+  RegenerateApiKeyResponse,
+} from "metabase-types/api/admin";
+
+import { Api } from "./api";
+import { providesList, API_KEY_TAG, API_KEY_LIST_TAG } from "./tags";
+
+export const apiKeyApi = Api.injectEndpoints({
+  endpoints: builder => ({
+    listApiKey: builder.query<ApiKey[], void>({
+      query: () => `/api/api-key`,
+      providesTags: result => providesList(result, API_KEY_TAG),
+    }),
+    countApiKey: builder.query<number, void>({
+      query: () => `/api/api-key/count`,
+    }),
+    createApiKey: builder.mutation<CreateApiKeyResponse, CreateApiKeyInput>({
+      query: input => ({
+        method: "POST",
+        url: `/api/api-key`,
+        body: input,
+      }),
+      invalidatesTags: [API_KEY_LIST_TAG],
+    }),
+    updateApiKey: builder.mutation<UpdateApiKeyResponse, UpdateApiKeyInput>({
+      query: ({ id, ...body }) => ({
+        method: "PUT",
+        url: `/api/api-key/${id}`,
+        body,
+      }),
+      invalidatesTags: [API_KEY_LIST_TAG],
+    }),
+    deleteApiKey: builder.mutation<void, ApiKey["id"]>({
+      query: id => ({ method: "DELETE", url: `/api/api-key/${id}` }),
+      invalidatesTags: [API_KEY_LIST_TAG],
+    }),
+    regenerateApiKey: builder.mutation<RegenerateApiKeyResponse, ApiKey["id"]>({
+      query: id => ({ method: "PUT", url: `/api/api-key/${id}/regenerate` }),
+      invalidatesTags: [API_KEY_LIST_TAG],
+    }),
+  }),
+});
+
+export const {
+  useListApiKeyQuery,
+  useCountApiKeyQuery,
+  useCreateApiKeyMutation,
+  useRegenerateApiKeyMutation,
+  useUpdateApiKeyMutation,
+  useDeleteApiKeyMutation,
+} = apiKeyApi;

frontend/src/metabase/api/index.ts

 export * from "./api";
+export * from "./api-keys";

frontend/src/metabase/api/tags.ts

@@ -14,5 +14,8 @@ export function providesList<
     : [listTag];
 }
 
-export const tagTypes = [];
+export const API_KEY_TAG = "ApiKey" as const;
+export const API_KEY_LIST_TAG = getListTag(API_KEY_TAG);
+
+export const tagTypes = [API_KEY_TAG];
 export type TagTypes = typeof tagTypes[number];