Add webhook settings block (#2938)

* Add webhook form  markup

* Update webhook api call

* Add try webhook action

* Fix test webhook

airbyte-webapp/src/components/hooks/services/useWorkspaceHook.tsx

@@ -3,6 +3,7 @@ import { useFetcher, useResource } from "rest-hooks";
 import config from "config";
 import WorkspaceResource, { Workspace } from "core/resources/Workspace";
 import { AnalyticsService } from "core/analytics/AnalyticsService";
+import NotificationsResource from "core/resources/Notifications";
 
 const useWorkspace = (): {
   workspace: Workspace;
@@ -18,9 +19,12 @@ const useWorkspace = (): {
     news: boolean;
     securityUpdates: boolean;
   }) => Promise<void>;
+  updateWebhook: (data: { webhook: string }) => Promise<void>;
   finishOnboarding: (skipStep?: string) => Promise<void>;
+  testWebhook: (webhook: string) => Promise<void>;
 } => {
   const updateWorkspace = useFetcher(WorkspaceResource.updateShape());
+  const tryWebhookUrl = useFetcher(NotificationsResource.tryShape());
   const workspace = useResource(WorkspaceResource.detailShape(), {
     workspaceId: config.ui.workspaceId,
   });
@@ -79,11 +83,47 @@ const useWorkspace = (): {
     );
   };
 
+  const testWebhook = async (webhook: string) => {
+    await tryWebhookUrl(
+      {
+        notificationType: "slack",
+        slackConfiguration: {
+          webhook: webhook,
+        },
+      },
+      {}
+    );
+  };
+
+  const updateWebhook = async (data: { webhook: string }) => {
+    await updateWorkspace(
+      {},
+      {
+        workspaceId: config.ui.workspaceId,
+        initialSetupComplete: workspace.initialSetupComplete,
+        displaySetupWizard: workspace.displaySetupWizard,
+        anonymousDataCollection: workspace.anonymousDataCollection,
+        news: workspace.news,
+        securityUpdates: workspace.securityUpdates,
+        notifications: [
+          {
+            notificationType: "slack",
+            slackConfiguration: {
+              webhook: data.webhook,
+            },
+          },
+        ],
+      }
+    );
+  };
+
   return {
     workspace,
     finishOnboarding,
     setInitialSetupConfig,
     updatePreferences,
+    updateWebhook,
+    testWebhook,
   };
 };
 

airbyte-webapp/src/core/resources/Notifications.ts

@@ -0,0 +1,35 @@
+import { MutateShape, Resource, SchemaDetail } from "rest-hooks";
+import BaseResource from "./BaseResource";
+
+export interface Notifications {
+  status: string;
+  message: string;
+}
+
+export default class NotificationsResource
+  extends BaseResource
+  implements Notifications {
+  readonly status: string = "";
+  readonly message: string = "";
+
+  pk(): string {
+    return "";
+  }
+
+  static urlRoot = "notifications";
+
+  static tryShape<T extends typeof Resource>(
+    this: T
+  ): MutateShape<SchemaDetail<Notifications>> {
+    return {
+      ...super.partialUpdateShape(),
+      getFetchKey: (params) =>
+        "POST /notifications/try" + JSON.stringify(params),
+      fetch: async (
+        params: Readonly<Record<string, unknown>>
+      ): Promise<Notifications> =>
+        await this.fetch("post", `${this.url(params)}/try`, params),
+      schema: this,
+    };
+  }
+}

airbyte-webapp/src/core/resources/Workspace.ts

@@ -1,6 +1,13 @@
 import { MutateShape, ReadShape, Resource, SchemaDetail } from "rest-hooks";
 import BaseResource from "./BaseResource";
 
+export interface Notification {
+  notificationType: string;
+  slackConfiguration: {
+    webhook: string;
+  };
+}
+
 export interface Workspace {
   workspaceId: string;
   customerId: string;
@@ -12,6 +19,7 @@ export interface Workspace {
   news: boolean;
   securityUpdates: boolean;
   displaySetupWizard: boolean;
+  notifications: Notification[];
 }
 
 export default class WorkspaceResource
@@ -27,6 +35,7 @@ export default class WorkspaceResource
   readonly news: boolean = false;
   readonly securityUpdates: boolean = false;
   readonly displaySetupWizard: boolean = true;
+  readonly notifications: Notification[] = [];
 
   pk(): string {
     return this.workspaceId?.toString();

airbyte-webapp/src/locales/en.json

@@ -90,6 +90,7 @@
   "form.toSaveSchema": "To save the new schema, click on Save changes.",
   "form.noteStartSync": "Note that it will delete all the data in your destination and start syncing from scratch. ",
   "form.pkSelected": "{count, plural, =0 { } one {{items}} other {# keys selected}}",
+  "form.url.error": "field must be a valid URL",
 
   "preferences.title": "Specify your preferences",
   "preferences.anonymizeUsage": "Anonymize usage data collection",
@@ -284,6 +285,12 @@
 
   "settings.accountSettings": "Account Settings",
   "settings.changeSaved": "change saved!",
+  "settings.webhook": "Connection failure Webhook",
+  "settings.webhookTitle": "Connection failure Webhook URL",
+  "settings.webhookDescriprion": "Get notifications the way you want (for instance, on Slack, or other).",
+  "settings.webhookTestText": "Testing the Webhook will send a “Hello World”. ",
+  "settings.yourWebhook": "Your Webhook URL",
+  "settings.test": "Test",
 
   "demo.message.title": "This demo is read-only",
   "demo.message.body": "You cannot add or edit any connectors. You will see error messages on purpose if you try to do so."

airbyte-webapp/src/pages/SettingsPage/components/AccountSettings.tsx

@@ -4,20 +4,39 @@ import styled from "styled-components";
 
 import { ContentCard, PreferencesForm } from "components";
 import useWorkspace from "components/hooks/services/useWorkspaceHook";
+import WebHookForm from "./WebHookForm";
 
 const SettingsCard = styled(ContentCard)`
   max-width: 638px;
   width: 100%;
+  margin-top: 12px;
+
+  &:first-child {
+    margin-top: 0;
+  }
 `;
 
 const Content = styled.div`
   padding: 27px 26px 15px;
 `;
 
 const AccountSettings: React.FC = () => {
-  const { workspace, updatePreferences } = useWorkspace();
+  const {
+    workspace,
+    updatePreferences,
+    updateWebhook,
+    testWebhook,
+  } = useWorkspace();
   const [errorMessage, setErrorMessage] = useState<React.ReactNode>(null);
   const [successMessage, setSuccessMessage] = useState<React.ReactNode>(null);
+  const [
+    errorWebhookMessage,
+    setErrorWebhookMessage,
+  ] = useState<React.ReactNode>(null);
+  const [
+    successWebhookMessage,
+    setSuccessWebhookMessage,
+  ] = useState<React.ReactNode>(null);
 
   const onSubmit = async (data: {
     email: string;
@@ -35,23 +54,64 @@ const AccountSettings: React.FC = () => {
     }
   };
 
+  const onSubmitWebhook = async (data: { webhook: string }) => {
+    setSuccessWebhookMessage(null);
+    setErrorWebhookMessage(null);
+    try {
+      await updateWebhook(data);
+      setSuccessWebhookMessage(<FormattedMessage id="settings.changeSaved" />);
+
+      setTimeout(() => {
+        setSuccessWebhookMessage(null);
+      }, 2000);
+    } catch (e) {
+      setErrorWebhookMessage(<FormattedMessage id="form.someError" />);
+
+      setTimeout(() => {
+        setErrorWebhookMessage(null);
+      }, 2000);
+    }
+  };
+
+  const onTestWebhook = async (data: { webhook: string }) => {
+    await testWebhook(data.webhook);
+  };
+
+  const initialWebhookUrl =
+    workspace.notifications && workspace.notifications.length
+      ? workspace.notifications[0].slackConfiguration.webhook
+      : "";
+
   return (
-    <SettingsCard title={<FormattedMessage id="settings.accountSettings" />}>
-      <Content>
-        <PreferencesForm
-          errorMessage={errorMessage}
-          successMessage={successMessage}
-          onSubmit={onSubmit}
-          isEdit
-          preferencesValues={{
-            email: workspace.email,
-            anonymousDataCollection: workspace.anonymousDataCollection,
-            news: workspace.news,
-            securityUpdates: workspace.securityUpdates,
-          }}
-        />
-      </Content>
-    </SettingsCard>
+    <>
+      <SettingsCard title={<FormattedMessage id="settings.webhook" />}>
+        <Content>
+          <WebHookForm
+            notificationUrl={initialWebhookUrl}
+            onSubmit={onSubmitWebhook}
+            onTest={onTestWebhook}
+            errorMessage={errorWebhookMessage}
+            successMessage={successWebhookMessage}
+          />
+        </Content>
+      </SettingsCard>
+      <SettingsCard title={<FormattedMessage id="settings.accountSettings" />}>
+        <Content>
+          <PreferencesForm
+            errorMessage={errorMessage}
+            successMessage={successMessage}
+            onSubmit={onSubmit}
+            isEdit
+            preferencesValues={{
+              email: workspace.email,
+              anonymousDataCollection: workspace.anonymousDataCollection,
+              news: workspace.news,
+              securityUpdates: workspace.securityUpdates,
+            }}
+          />
+        </Content>
+      </SettingsCard>
+    </>
   );
 };