chore(site): move ssh keys management to react-query (coder#9625)

BrunoQuaresma · web-flow · commit 5ca8c4287fc0 · 2023-09-12T14:40:07.000-03:00
diff --git a/site/src/api/queries/sshKeys.ts b/site/src/api/queries/sshKeys.ts
@@ -0,0 +1,24 @@
+import { QueryClient } from "@tanstack/react-query";
+import * as API from "api/api";
+import { GitSSHKey } from "api/typesGenerated";
+
+const getUserSSHKeyQueryKey = (userId: string) => [userId, "sshKey"];
+
+export const userSSHKey = (userId: string) => {
+  return {
+    queryKey: getUserSSHKeyQueryKey(userId),
+    queryFn: () => API.getUserSSHKey(userId),
+  };
+};
+
+export const regenerateUserSSHKey = (
+  userId: string,
+  queryClient: QueryClient,
+) => {
+  return {
+    mutationFn: () => API.regenerateUserSSHKey(userId),
+    onSuccess: (newKey: GitSSHKey) => {
+      queryClient.setQueryData(getUserSSHKeyQueryKey(userId), newKey);
+    },
+  };
+};
diff --git a/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPage.tsx b/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPage.tsx
@@ -1,9 +1,10 @@
-import { useMachine } from "@xstate/react";
-import { PropsWithChildren, FC } from "react";
-import { sshKeyMachine } from "xServices/sshKey/sshKeyXService";
+import { PropsWithChildren, FC, useState } from "react";
 import { ConfirmDialog } from "../../../components/Dialogs/ConfirmDialog/ConfirmDialog";
 import { Section } from "../../../components/SettingsLayout/Section";
 import { SSHKeysPageView } from "./SSHKeysPageView";
+import { regenerateUserSSHKey, userSSHKey } from "api/queries/sshKeys";
+import { displaySuccess } from "components/GlobalSnackbar/utils";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 
 export const Language = {
   title: "SSH keys",
@@ -15,40 +16,47 @@ export const Language = {
 };
 
 export const SSHKeysPage: FC<PropsWithChildren<unknown>> = () => {
-  const [sshState, sshSend] = useMachine(sshKeyMachine);
-  const isLoading = sshState.matches("gettingSSHKey");
-  const hasLoaded = sshState.matches("loaded");
-  const { getSSHKeyError, regenerateSSHKeyError, sshKey } = sshState.context;
-
-  const onRegenerateClick = () => {
-    sshSend({ type: "REGENERATE_SSH_KEY" });
-  };
+  const [isConfirmingRegeneration, setIsConfirmingRegeneration] =
+    useState(false);
+  const queryClient = useQueryClient();
+  const userSSHKeyQuery = useQuery(userSSHKey("me"));
+  const regenerateSSHKeyMutationOptions = regenerateUserSSHKey(
+    "me",
+    queryClient,
+  );
+  const regenerateSSHKeyMutation = useMutation({
+    ...regenerateSSHKeyMutationOptions,
+    onSuccess: (newKey) => {
+      regenerateSSHKeyMutationOptions.onSuccess(newKey);
+      displaySuccess("SSH Key regenerated successfully.");
+      setIsConfirmingRegeneration(false);
+    },
+  });
 
   return (
     <>
       <Section title={Language.title}>
         <SSHKeysPageView
-          isLoading={isLoading}
-          hasLoaded={hasLoaded}
-          getSSHKeyError={getSSHKeyError}
-          regenerateSSHKeyError={regenerateSSHKeyError}
-          sshKey={sshKey}
-          onRegenerateClick={onRegenerateClick}
+          isLoading={userSSHKeyQuery.isLoading}
+          getSSHKeyError={userSSHKeyQuery.error}
+          regenerateSSHKeyError={regenerateSSHKeyMutation.error}
+          sshKey={userSSHKeyQuery.data}
+          onRegenerateClick={() => {
+            setIsConfirmingRegeneration(true);
+          }}
         />
       </Section>
 
       <ConfirmDialog
         type="delete"
         hideCancel={false}
-        open={sshState.matches("confirmSSHKeyRegenerate")}
-        confirmLoading={sshState.matches("regeneratingSSHKey")}
+        open={isConfirmingRegeneration}
+        confirmLoading={regenerateSSHKeyMutation.isLoading}
         title={Language.regenerateDialogTitle}
         confirmText={Language.confirmLabel}
-        onConfirm={() => {
-          sshSend({ type: "CONFIRM_REGENERATE_SSH_KEY" });
-        }}
+        onConfirm={regenerateSSHKeyMutation.mutate}
         onClose={() => {
-          sshSend({ type: "CANCEL_REGENERATE_SSH_KEY" });
+          setIsConfirmingRegeneration(false);
         }}
         description={<>{Language.regenerateDialogMessage}</>}
       />
diff --git a/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.stories.tsx b/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.stories.tsx
@@ -7,7 +7,6 @@ const meta: Meta<typeof SSHKeysPageView> = {
   component: SSHKeysPageView,
   args: {
     isLoading: false,
-    hasLoaded: true,
     sshKey: {
       user_id: "test-user-id",
       created_at: "2022-07-28T07:45:50.795918897Z",
@@ -30,7 +29,7 @@ export const Loading: Story = {
 
 export const WithGetSSHKeyError: Story = {
   args: {
-    hasLoaded: false,
+    sshKey: undefined,
     getSSHKeyError: mockApiError({
       message: "Failed to get SSH key",
     }),
diff --git a/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.tsx b/site/src/pages/UserSettingsPage/SSHKeysPage/SSHKeysPageView.tsx
@@ -14,7 +14,6 @@ export const Language = {
 
 export interface SSHKeysPageViewProps {
   isLoading: boolean;
-  hasLoaded: boolean;
   getSSHKeyError?: unknown;
   regenerateSSHKeyError?: unknown;
   sshKey?: GitSSHKey;
@@ -25,7 +24,6 @@ export const SSHKeysPageView: FC<
   React.PropsWithChildren<SSHKeysPageViewProps>
 > = ({
   isLoading,
-  hasLoaded,
   getSSHKeyError,
   regenerateSSHKeyError,
   sshKey,
@@ -49,7 +47,7 @@ export const SSHKeysPageView: FC<
       {Boolean(regenerateSSHKeyError) && (
         <ErrorAlert error={regenerateSSHKeyError} dismissible />
       )}
-      {hasLoaded && sshKey && (
+      {sshKey && (
         <>
           <p className={styles.description}>
             The following public key is used to authenticate Git in workspaces.
diff --git a/site/src/xServices/sshKey/sshKeyXService.ts b/site/src/xServices/sshKey/sshKeyXService.ts
