Mark/update notification settings design

airbyte-webapp/src/views/layout/SideBar/components/DocsIcon.tsx → airbyte-webapp/src/components/icons/DocsIcon.tsx

@@ -1,10 +1,8 @@
-const DocsIcon = ({ color = "currentColor" }: { color?: string }): JSX.Element => (
+export const DocsIcon = ({ color = "currentColor" }: { color?: string }): JSX.Element => (
   <svg width="18" height="20" viewBox="0 0 18 20" fill="none">
     <path
       d="M18 16H3C2.73478 16 2.48043 16.1054 2.29289 16.2929C2.10536 16.4804 2 16.7348 2 17C2 17.2652 2.10536 17.5196 2.29289 17.7071C2.48043 17.8946 2.73478 18 3 18H18V20H3C2.20435 20 1.44129 19.6839 0.87868 19.1213C0.316071 18.5587 0 17.7956 0 17V2C0 1.46957 0.210714 0.960859 0.585786 0.585786C0.960859 0.210714 1.46957 0 2 0H18V16ZM2 14.05C2.162 14.017 2.329 14 2.5 14H16V2H2V14.05ZM13 7H5V5H13V7Z"
       fill={color}
     />
   </svg>
 );
-
-export default DocsIcon;

airbyte-webapp/src/components/icons/PlayIcon.tsx

@@ -0,0 +1,12 @@
+interface Props {
+  color?: string;
+}
+
+export const PlayIcon = ({ color = "currentColor" }: Props): JSX.Element => (
+  <svg width="18" height="18" viewBox="0 0 18 18" fill="none" role="img" data-icon="play">
+    <path
+      d="M0 0.993C0 0.445 0.445 0 0.993 0H17.007C17.555 0 18 0.445 18 0.993V17.007C17.9997 17.2703 17.895 17.5227 17.7089 17.7089C17.5227 17.895 17.2703 17.9997 17.007 18H0.993C0.729721 17.9997 0.477302 17.895 0.291135 17.7089C0.104969 17.5227 0.000264735 17.2703 0 17.007V0.993ZM2 2V16H16V2H2ZM7.622 5.415L12.501 8.667C12.5559 8.70351 12.6009 8.75302 12.632 8.81111C12.6631 8.86921 12.6794 8.93409 12.6794 9C12.6794 9.06591 12.6631 9.13079 12.632 9.18889C12.6009 9.24698 12.5559 9.29649 12.501 9.333L7.621 12.585C7.56083 12.6249 7.49098 12.6477 7.41887 12.6512C7.34676 12.6546 7.27507 12.6384 7.21141 12.6043C7.14774 12.5703 7.09448 12.5197 7.05726 12.4578C7.02004 12.396 7.00025 12.3252 7 12.253V5.747C7.00013 5.67465 7.01989 5.60369 7.05716 5.54168C7.09443 5.47967 7.14782 5.42893 7.21165 5.39486C7.27547 5.36079 7.34734 5.34467 7.41961 5.34822C7.49187 5.35177 7.56182 5.37485 7.622 5.415V5.415Z"
+      fill={color}
+    />
+  </svg>
+);

airbyte-webapp/src/locales/en.json

@@ -483,16 +483,22 @@
   "admin.customImage": "custom",
 
   "settings.accountSettings": "Account Settings",
-  "settings.changeSaved": "change saved!",
   "settings.webhook": "Connection status Webhook",
+  "settings.webhook.test.passed": "Webhook test passed!",
+  "settings.webhook.test.failed": "Webhook test failed. Please verify that the webhook URL is valid.",
+  "settings.webhook.save.failed": "Cannot save changes because the webhook test failed. Please verify that the webhook URL is valid.",
   "settings.webhookTitle": "Connection status 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.sendOnSuccess": "Send notifications when sync succeeds.",
-  "settings.sendOnFailure": "Send notifications when sync fails.",
+  "settings.webhookTestText": "Testing the Webhook will send a “Hello World”.",
+  "settings.syncNotifications.label": "Notify me:",
+  "settings.sendOnSuccess": "When Sync succeeds",
+  "settings.sendOnFailure": "When Sync fails",
   "settings.yourWebhook": "Your Webhook URL",
   "settings.test": "Test",
   "settings.notifications": "Notifications",
+  "settings.notificationGuide.button": "Need help with Webhook URL?",
+  "settings.notificationGuide.title": "How to get notification the way you want with your webhook URL?",
+  "settings.notificationGuide.link.configuration": "Configure Sync notifications",
+  "settings.notificationGuide.link.slackConfiguration": "Configure a Slack Notifications Webhook",
   "settings.metrics": "Metrics",
   "settings.notificationSettings": "Notification Settings",
   "settings.metricsSettings": "Metrics Settings",

airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx

@@ -8,6 +8,7 @@ import { NavLink } from "react-router-dom";
 
 import { Link } from "components";
 import { CreditsIcon } from "components/icons/CreditsIcon";
+import { DocsIcon } from "components/icons/DocsIcon";
 import { Text } from "components/ui/Text";
 
 import { useExperiment } from "hooks/services/Experiment";
@@ -21,7 +22,6 @@ import { links } from "utils/links";
 import ChatIcon from "views/layout/SideBar/components/ChatIcon";
 import ConnectionsIcon from "views/layout/SideBar/components/ConnectionsIcon";
 import DestinationIcon from "views/layout/SideBar/components/DestinationIcon";
-import DocsIcon from "views/layout/SideBar/components/DocsIcon";
 import OnboardingIcon from "views/layout/SideBar/components/OnboardingIcon";
 import RecipesIcon from "views/layout/SideBar/components/RecipesIcon";
 import SettingsIcon from "views/layout/SideBar/components/SettingsIcon";

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

@@ -1,60 +1,17 @@
-import React, { useMemo, useState, useCallback } from "react";
-import { FormattedMessage } from "react-intl";
+import React, { useMemo } from "react";
 
 import HeadTitle from "components/HeadTitle";
 
 import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics";
-import useWorkspace, { useCurrentWorkspace, WebhookPayload } from "hooks/services/useWorkspace";
+import { useCurrentWorkspace } from "hooks/services/useWorkspace";
 
-import { Content, SettingsCard } from "../SettingsComponents";
-import WebHookForm from "./components/WebHookForm";
-
-function useAsyncWithTimeout<K, T>(f: (data: K) => Promise<T>) {
-  const [errorMessage, setErrorMessage] = useState<React.ReactNode>(null);
-  const [successMessage, setSuccessMessage] = useState<React.ReactNode>(null);
-  const call = useCallback(
-    async (data: K) => {
-      setSuccessMessage(null);
-      setErrorMessage(null);
-      try {
-        await f(data);
-        setSuccessMessage(<FormattedMessage id="settings.changeSaved" />);
-
-        setTimeout(() => {
-          setSuccessMessage(null);
-        }, 2000);
-      } catch (e) {
-        setErrorMessage(<FormattedMessage id="form.someError" />);
-
-        setTimeout(() => {
-          setErrorMessage(null);
-        }, 2000);
-      }
-    },
-    [f]
-  );
-
-  return {
-    call,
-    successMessage,
-    errorMessage,
-  };
-}
+import { WebHookForm } from "./components/WebHookForm";
 
 const NotificationPage: React.FC = () => {
   useTrackPage(PageTrackingCodes.SETTINGS_NOTIFICATION);
 
-  const { updateWebhook, testWebhook } = useWorkspace();
   const workspace = useCurrentWorkspace();
-
-  const {
-    call: onSubmitWebhook,
-    errorMessage,
-    successMessage,
-  } = useAsyncWithTimeout(async (data: WebhookPayload) => updateWebhook(data));
-
   const firstNotification = workspace.notifications?.[0];
-
   const initialValues = useMemo(
     () => ({
       webhook: firstNotification?.slackConfiguration?.webhook,
@@ -67,17 +24,7 @@ const NotificationPage: React.FC = () => {
   return (
     <>
       <HeadTitle titles={[{ id: "sidebar.settings" }, { id: "settings.notifications" }]} />
-      <SettingsCard title={<FormattedMessage id="settings.notificationSettings" />}>
-        <Content>
-          <WebHookForm
-            webhook={initialValues}
-            onSubmit={onSubmitWebhook}
-            onTest={testWebhook}
-            errorMessage={errorMessage}
-            successMessage={successMessage}
-          />
-        </Content>
-      </SettingsCard>
+      <WebHookForm webhook={initialValues} />
     </>
   );
 };

airbyte-webapp/src/pages/SettingsPage/pages/NotificationPage/components/WebHookForm.module.scss

@@ -0,0 +1,168 @@
+@use "scss/colors";
+@use "scss/variables";
+
+.webhookGuide {
+  opacity: 0;
+  visibility: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 0;
+  max-height: 0;
+  padding: 0 variables.$spacing-xl;
+  margin-bottom: 0;
+  background-color: colors.$grey-50;
+  border-radius: variables.$border-radius-xs;
+  transition: variables.$transition-out;
+
+  &.active {
+    opacity: 1;
+    visibility: visible;
+    height: 150px;
+    max-height: 100%;
+    margin-bottom: variables.$spacing-xl;
+  }
+
+  .webhookGuideTitle {
+    display: flex;
+    justify-content: space-between;
+    padding-bottom: variables.$spacing-lg;
+
+    .crossIcon {
+      font-size: 22px;
+    }
+  }
+
+  ul {
+    list-style-type: none;
+    list-style-position: inside;
+    margin: 0;
+    padding: 0;
+
+    li + li {
+      padding-top: variables.$spacing-md;
+    }
+  }
+
+  .webhookGuideLink {
+    display: inline-flex;
+    align-items: center;
+    padding: variables.$spacing-sm 0;
+    color: colors.$blue;
+
+    .text {
+      color: colors.$blue;
+      padding-left: variables.$spacing-md;
+    }
+  }
+
+  .webhookGuideImg {
+    position: absolute;
+    right: 60px;
+    bottom: -20px;
+    width: 106px;
+    height: 125px;
+  }
+}
+
+.webhookUrlLabelRow {
+  position: relative;
+  margin-bottom: variables.$spacing-md;
+
+  .webhookUrlLabelCell {
+    flex: auto;
+    width: 100%;
+
+    label {
+      padding-bottom: 0;
+    }
+  }
+
+  .webhookGuideButtonCell {
+    position: relative;
+    flex: auto;
+    padding: 0;
+
+    .webhookGuideButton {
+      color: colors.$blue;
+      text-decoration: underline;
+      padding-left: 0;
+      padding-right: 0;
+      white-space: nowrap;
+      margin-right: 45px;
+
+      &:hover {
+        color: colors.$blue;
+      }
+    }
+
+    .webhookGuideButtonImg {
+      position: absolute;
+      bottom: 6px;
+      right: 0;
+      width: 34px;
+      height: 40px;
+    }
+  }
+}
+
+.webhookUrlRow {
+  margin-bottom: variables.$spacing-xl;
+
+  .webhookUrlInputCell {
+    position: relative;
+    flex: auto;
+    width: 100%;
+
+    .webhookErrorMessage {
+      position: absolute;
+      bottom: -16px;
+      left: 0;
+      color: colors.$red-600;
+    }
+  }
+
+  .testButtonCell {
+    flex: auto;
+    padding: 0;
+
+    .testButton {
+      white-space: nowrap;
+    }
+  }
+}
+
+.notificationSettingsLabelRow {
+  margin-bottom: variables.$spacing-md;
+
+  .notificationSettingsLabelCell {
+    label {
+      padding-bottom: 0;
+    }
+  }
+}
+
+.notificationSettingsRow {
+  margin-bottom: variables.$spacing-md;
+
+  .notificationSettingsCell {
+    position: relative;
+    display: flex;
+
+    .sendOnFailure {
+      margin-right: variables.$spacing-xl;
+    }
+  }
+}
+
+.tooltip {
+  transform: translate(0, -#{variables.$spacing-md});
+  white-space: nowrap;
+}
+
+.action {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: variables.$spacing-xl;
+}