Refactor notification resource to use react-query

airbyte-webapp/src/core/domain/notification/NotificationService.tsx

@@ -0,0 +1,21 @@
+import { AirbyteRequestService } from "core/request/AirbyteRequestService";
+import { NotificationStatus } from "./types";
+
+class NotificationService extends AirbyteRequestService {
+  get url(): string {
+    return "notifications";
+  }
+
+  public try(payload: {
+    notificationType: "slack";
+    sendOnSuccess: boolean;
+    sendOnFailure: boolean;
+    slackConfiguration: {
+      webhook: string;
+    };
+  }): Promise<NotificationStatus> {
+    return this.fetch<NotificationStatus>(`${this.url}/try`, payload);
+  }
+}
+
+export { NotificationService };

airbyte-webapp/src/core/domain/notification/types.tsx

@@ -0,0 +1,4 @@
+export interface NotificationStatus {
+  status: string;
+  message: string;
+}

airbyte-webapp/src/hooks/services/useWorkspace.tsx

@@ -1,21 +1,35 @@
 import { useFetcher } from "rest-hooks";
+import { useMutation } from "react-query";
 
 import WorkspaceResource from "core/resources/Workspace";
-import NotificationsResource, {
-  Notifications,
-} from "core/resources/Notifications";
 
 import { useAnalyticsService } from "hooks/services/Analytics";
 import { useCurrentWorkspace } from "services/workspaces/WorkspacesService";
 import { Destination, Source } from "core/domain/connector";
 import { Workspace } from "core/domain/workspace/Workspace";
+import { NotificationStatus } from "core/domain/notification/types";
+import { useConfig } from "config";
+import { useDefaultRequestMiddlewares } from "services/useDefaultRequestMiddlewares";
+import { useInitService } from "services/useInitService";
+import { NotificationService } from "core/domain/notification/NotificationService";
 
 export type WebhookPayload = {
   webhook: string;
   sendOnSuccess: boolean;
   sendOnFailure: boolean;
 };
 
+function useGetNotificationService(): NotificationService {
+  const { apiUrl } = useConfig();
+
+  const requestAuthMiddleware = useDefaultRequestMiddlewares();
+
+  return useInitService(
+    () => new NotificationService(apiUrl, requestAuthMiddleware),
+    [apiUrl, requestAuthMiddleware]
+  );
+}
+
 const useWorkspace = (): {
   workspace: Workspace;
   updatePreferences: (data: {
@@ -25,7 +39,7 @@ const useWorkspace = (): {
     securityUpdates: boolean;
   }) => Promise<Workspace>;
   updateWebhook: (data: WebhookPayload) => Promise<Workspace>;
-  testWebhook: (data: WebhookPayload) => Promise<Notifications>;
+  testWebhook: (data: WebhookPayload) => Promise<NotificationStatus>;
   setInitialSetupConfig: (data: {
     email: string;
     anonymousDataCollection: boolean;
@@ -43,8 +57,9 @@ const useWorkspace = (): {
     destination: Destination;
   }) => Promise<void>;
 } => {
+  const notificationService = useGetNotificationService();
   const updateWorkspace = useFetcher(WorkspaceResource.updateShape());
-  const tryWebhookUrl = useFetcher(NotificationsResource.tryShape());
+
   const workspace = useCurrentWorkspace();
 
   const analyticsService = useAnalyticsService();
@@ -130,19 +145,6 @@ const useWorkspace = (): {
       }
     );
 
-  const testWebhook = async (data: WebhookPayload) =>
-    await tryWebhookUrl(
-      {
-        notificationType: "slack",
-        sendOnSuccess: data.sendOnSuccess,
-        sendOnFailure: data.sendOnFailure,
-        slackConfiguration: {
-          webhook: data.webhook,
-        },
-      },
-      {}
-    );
-
   const updateWebhook = async (data: WebhookPayload) =>
     await updateWorkspace(
       {},
@@ -166,13 +168,24 @@ const useWorkspace = (): {
       }
     );
 
+  const tryWebhookUrl = useMutation((data: WebhookPayload) =>
+    notificationService.try({
+      notificationType: "slack",
+      sendOnSuccess: data.sendOnSuccess,
+      sendOnFailure: data.sendOnFailure,
+      slackConfiguration: {
+        webhook: data.webhook,
+      },
+    })
+  );
+
   return {
     workspace,
     finishOnboarding,
     setInitialSetupConfig,
     updatePreferences,
     updateWebhook,
-    testWebhook,
+    testWebhook: tryWebhookUrl.mutateAsync,
     sendFeedback,
   };
 };

airbyte-webapp/src/pages/SettingsPage/pages/NotificationPage/NotificationPage.tsx

@@ -47,10 +47,6 @@ const NotificationPage: React.FC = () => {
     successMessage,
   } = useAsyncWithTimeout(async (data: WebhookPayload) => updateWebhook(data));
 
-  const onTestWebhook = async (data: WebhookPayload) => {
-    await testWebhook(data);
-  };
-
   const firstNotification = workspace.notifications?.[0];
 
   const initialValues = useMemo(
@@ -74,7 +70,7 @@ const NotificationPage: React.FC = () => {
           <WebHookForm
             webhook={initialValues}
             onSubmit={onSubmitWebhook}
-            onTest={onTestWebhook}
+            onTest={testWebhook}
             errorMessage={errorMessage}
             successMessage={successMessage}
           />