From 19a705021b0e1a5f1e782b486b58a9435290f256 Mon Sep 17 00:00:00 2001
From: Aditya Hegde <adityahegderocks@gmail.com>
Date: Thu, 4 Apr 2024 15:30:14 +0530
Subject: [PATCH 1/6] Adding slack inputs to the form

---
 .../src/components/forms/FormSection.svelte   | 11 ++++-
 .../src/components/forms/InputArray.svelte    | 46 +++++++++++++------
 .../src/features/alerts/BaseAlertForm.svelte  |  9 +++-
 .../features/alerts/CreateAlertDialog.svelte  | 27 +++++++++--
 .../features/alerts/EditAlertDialog.svelte    | 25 ++++++----
 .../AlertDialogDeliveryTab.svelte             | 44 ++++++++++++++++--
 .../alerts/extract-alert-form-values.ts       | 42 +++++++++++++++++
 web-common/src/features/alerts/form-utils.ts  | 19 ++++++--
 .../BaseScheduledReportForm.svelte            |  9 +++-
 .../RecipientsInputArray.svelte               | 41 -----------------
 10 files changed, 189 insertions(+), 84 deletions(-)
 delete mode 100644 web-common/src/features/scheduled-reports/RecipientsInputArray.svelte

diff --git a/web-common/src/components/forms/FormSection.svelte b/web-common/src/components/forms/FormSection.svelte
index 0cac4be02aca..793a9e6b5443 100644
--- a/web-common/src/components/forms/FormSection.svelte
+++ b/web-common/src/components/forms/FormSection.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import Switch from "@rilldata/web-common/components/forms/Switch.svelte";
   import InfoCircle from "@rilldata/web-common/components/icons/InfoCircle.svelte";
   import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
   import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
@@ -6,6 +7,8 @@
   export let title: string;
   export let description: string = "";
   export let padding = "p-3";
+  export let showEnabled = false;
+  export let enabled = true;
 </script>
 
 <div class="flex flex-col bg-white {padding} gap-y-3 rounded">
@@ -22,10 +25,16 @@
           </TooltipContent>
         </Tooltip>
       {/if}
+      {#if showEnabled}
+        <div class="grow"></div>
+        <Switch bind:checked={enabled} />
+      {/if}
     </span>
     {#if description}
       <span class="text-sm text-slate-600">{description}</span>
     {/if}
   </div>
-  <slot />
+  {#if enabled}
+    <slot />
+  {/if}
 </div>
diff --git a/web-common/src/components/forms/InputArray.svelte b/web-common/src/components/forms/InputArray.svelte
index f4a5d87a0f50..5358078532b8 100644
--- a/web-common/src/components/forms/InputArray.svelte
+++ b/web-common/src/components/forms/InputArray.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { createEventDispatcher } from "svelte";
+  import type { createForm } from "svelte-forms-lib";
   import { slide } from "svelte/transition";
   import { Button, IconButton } from "../button";
   import Add from "../icons/Add.svelte";
@@ -8,10 +8,9 @@
   import Tooltip from "../tooltip/Tooltip.svelte";
   import TooltipContent from "../tooltip/TooltipContent.svelte";
 
-  export let id = "";
+  export let id: string;
   export let label = "";
-  export let values: any[];
-  export let errors: any[];
+  export let description = "";
   // The accessorKey is necessary due to the way svelte-forms-lib works with arrays.
   // See: https://svelte-forms-lib-sapper-docs.vercel.app/array
   export let accessorKey: string;
@@ -19,13 +18,34 @@
   export let hint = "";
   export let addItemLabel = "Add item";
 
-  const dispatch = createEventDispatcher();
+  export let formState: ReturnType<typeof createForm<Record<string, any>>>;
+  const { form, errors } = formState;
+  $: values = $form[id] as Record<string, string>[];
+  // There's a bug in how `svelte-forms-lib` types the `$errors` store for arrays.
+  // See: https://github.com/tjinauyeung/svelte-forms-lib/issues/154#issuecomment-1087331250
+  $: errs = ($errors[id] as unknown as Record<string, string>[]) ?? [];
 
   function handleKeyDown(event: KeyboardEvent) {
     if (event.key === "Enter") {
       event.preventDefault();
     }
   }
+
+  function handleAddItem() {
+    $form[id] = $form[id].concat({ email: "" });
+    errs = errs.concat({ email: "" });
+    // Focus on the new input element
+    setTimeout(() => {
+      const input = document.getElementById(
+        `${id}.${$form[id].length - 1}.${accessorKey}`,
+      );
+      input?.focus();
+    }, 0);
+  }
+  function handleRemove(index: number) {
+    $form[id] = $form[id].filter((_, i) => i !== index);
+    errs = errs.filter((r, i) => i !== index);
+  }
 </script>
 
 <div class="flex flex-col gap-y-2.5">
@@ -42,6 +62,9 @@
           </TooltipContent>
         </Tooltip>
       {/if}
+      {#if description}
+        <div class="text-sm text-slate-600">{description}</div>
+      {/if}
     </div>
   {/if}
   <div
@@ -60,23 +83,18 @@
             ]?.accessorKey && 'border-red-500'}"
             on:keydown={handleKeyDown}
           />
-          <IconButton
-            on:click={() =>
-              dispatch("remove-item", {
-                index: i,
-              })}
-          >
+          <IconButton on:click={() => handleRemove(i)}>
             <Trash size="16px" className="text-gray-500 cursor-pointer" />
           </IconButton>
         </div>
-        {#if errors[i]?.[accessorKey]}
+        {#if errs[i]?.[accessorKey]}
           <div in:slide={{ duration: 200 }} class="text-red-500 text-sm py-px">
-            {errors[i][accessorKey]}
+            {errs[i][accessorKey]}
           </div>
         {/if}
       </div>
     {/each}
-    <Button on:click={() => dispatch("add-item")} type="secondary" dashed>
+    <Button dashed on:click={handleAddItem} type="secondary">
       <div class="flex gap-x-2">
         <Add className="text-gray-700" />
         {addItemLabel}
diff --git a/web-common/src/features/alerts/BaseAlertForm.svelte b/web-common/src/features/alerts/BaseAlertForm.svelte
index 91417d69f615..9ff8fa6e2061 100644
--- a/web-common/src/features/alerts/BaseAlertForm.svelte
+++ b/web-common/src/features/alerts/BaseAlertForm.svelte
@@ -2,13 +2,18 @@
   import { DialogTitle } from "@rgossiaux/svelte-headlessui";
   import * as DialogTabs from "@rilldata/web-common/components/dialog/tabs";
   import { createEventDispatcher } from "svelte";
+  import type { createForm } from "svelte-forms-lib";
   import Button from "../../components/button/Button.svelte";
   import AlertDialogCriteriaTab from "./criteria-tab/AlertDialogCriteriaTab.svelte";
   import AlertDialogDataTab from "./data-tab/AlertDialogDataTab.svelte";
   import AlertDialogDeliveryTab from "./delivery-tab/AlertDialogDeliveryTab.svelte";
-  import { checkIsTabValid, FieldsByTab } from "./form-utils";
+  import {
+    type AlertFormValues,
+    checkIsTabValid,
+    FieldsByTab,
+  } from "./form-utils";
 
-  export let formState: any; // svelte-forms-lib's FormState
+  export let formState: ReturnType<typeof createForm<AlertFormValues>>;
   export let isEditForm: boolean;
 
   const dispatch = createEventDispatcher();
diff --git a/web-common/src/features/alerts/CreateAlertDialog.svelte b/web-common/src/features/alerts/CreateAlertDialog.svelte
index bd7cbfd51fb4..e21a45090536 100644
--- a/web-common/src/features/alerts/CreateAlertDialog.svelte
+++ b/web-common/src/features/alerts/CreateAlertDialog.svelte
@@ -52,7 +52,7 @@
     dimension = $dashboardStore.selectedDimensionName ?? "";
   }
 
-  const formState = createForm({
+  const formState = createForm<AlertFormValues>({
     initialValues: {
       name: "",
       measure:
@@ -70,7 +70,18 @@
       ],
       criteriaOperation: V1Operation.OPERATION_AND,
       snooze: SnoozeOptions[0].value, // Defaults to `Off`
-      recipients: [
+      enableSlackNotification: true,
+      slackChannels: [
+        {
+          channel: "",
+        },
+      ],
+      slackUsers: [
+        { email: $user.data?.user?.email ? $user.data.user.email : "" },
+        { email: "" },
+      ],
+      enableEmailNotification: true,
+      emailRecipients: [
         { email: $user.data?.user?.email ? $user.data.user.email : "" },
         { email: "" },
       ],
@@ -98,9 +109,15 @@
                 getAlertQueryArgsFromFormValues(values),
               ),
               metricsViewName: values.metricsViewName,
-              emailRecipients: values.recipients
-                .map((r) => r.email)
-                .filter(Boolean),
+              slackChannels: values.enableSlackNotification
+                ? values.slackChannels.map((c) => c.channel).filter(Boolean)
+                : undefined,
+              slackUsers: values.enableSlackNotification
+                ? values.slackUsers.map((c) => c.email).filter(Boolean)
+                : undefined,
+              emailRecipients: values.enableEmailNotification
+                ? values.emailRecipients.map((r) => r.email).filter(Boolean)
+                : undefined,
               renotify: !!values.snooze,
               renotifyAfterSeconds: values.snooze ? Number(values.snooze) : 0,
             },
diff --git a/web-common/src/features/alerts/EditAlertDialog.svelte b/web-common/src/features/alerts/EditAlertDialog.svelte
index c2010f40d99e..753d49229f44 100644
--- a/web-common/src/features/alerts/EditAlertDialog.svelte
+++ b/web-common/src/features/alerts/EditAlertDialog.svelte
@@ -2,7 +2,10 @@
   import { page } from "$app/stores";
   import { Dialog, DialogOverlay } from "@rgossiaux/svelte-headlessui";
   import { createAdminServiceEditAlert } from "@rilldata/web-admin/client";
-  import { extractAlertFormValues } from "@rilldata/web-common/features/alerts/extract-alert-form-values";
+  import {
+    extractAlertFormValues,
+    extractAlertNotification,
+  } from "@rilldata/web-common/features/alerts/extract-alert-form-values";
   import {
     useMetricsView,
     useMetricsViewTimeRange,
@@ -23,6 +26,7 @@
   import { getSnoozeValueFromAlertSpec } from "./delivery-tab/snooze";
   import {
     alertFormValidationSchema,
+    AlertFormValues,
     getAlertQueryArgsFromFormValues,
   } from "./form-utils";
 
@@ -48,15 +52,12 @@
     { query: { queryClient } },
   );
 
-  const formState = createForm({
+  const formState = createForm<AlertFormValues>({
     initialValues: {
       name: alertSpec.title as string,
       snooze: getSnoozeValueFromAlertSpec(alertSpec),
-      recipients:
-        alertSpec?.notifiers
-          ?.find((n) => n.connector === "email")
-          ?.properties?.email?.recipients?.map((r) => ({ email: r })) ?? [],
       evaluationInterval: alertSpec.intervalsIsoDuration ?? "",
+      ...extractAlertNotification(alertSpec),
       ...extractAlertFormValues(
         queryArgsJson,
         $metricsViewSpec?.data ?? {},
@@ -78,9 +79,15 @@
                 getAlertQueryArgsFromFormValues(values),
               ),
               metricsViewName: values.metricsViewName,
-              emailRecipients: values.recipients
-                .map((r) => r.email)
-                .filter(Boolean),
+              slackChannels: values.enableSlackNotification
+                ? values.slackChannels.map((c) => c.channel).filter(Boolean)
+                : undefined,
+              slackUsers: values.enableSlackNotification
+                ? values.slackUsers.map((c) => c.email).filter(Boolean)
+                : undefined,
+              emailRecipients: values.enableEmailNotification
+                ? values.emailRecipients.map((r) => r.email).filter(Boolean)
+                : undefined,
               renotify: !!values.snooze,
               renotifyAfterSeconds: values.snooze ? Number(values.snooze) : 0,
             },
diff --git a/web-common/src/features/alerts/delivery-tab/AlertDialogDeliveryTab.svelte b/web-common/src/features/alerts/delivery-tab/AlertDialogDeliveryTab.svelte
index ebbb1398129a..87db042f3f49 100644
--- a/web-common/src/features/alerts/delivery-tab/AlertDialogDeliveryTab.svelte
+++ b/web-common/src/features/alerts/delivery-tab/AlertDialogDeliveryTab.svelte
@@ -1,10 +1,12 @@
 <script lang="ts">
   import FormSection from "@rilldata/web-common/components/forms/FormSection.svelte";
+  import InputArray from "@rilldata/web-common/components/forms/InputArray.svelte";
   import Select from "@rilldata/web-common/components/forms/Select.svelte";
   import { SnoozeOptions } from "@rilldata/web-common/features/alerts/delivery-tab/snooze";
-  import RecipientsInputArray from "@rilldata/web-common/features/scheduled-reports/RecipientsInputArray.svelte";
+  import type { AlertFormValues } from "@rilldata/web-common/features/alerts/form-utils";
+  import type { createForm } from "svelte-forms-lib";
 
-  export let formState: any; // svelte-forms-lib's FormState
+  export let formState: ReturnType<typeof createForm<AlertFormValues>>;
 
   const { form } = formState;
 </script>
@@ -26,9 +28,41 @@
     />
   </FormSection>
   <FormSection
-    description="Choose who will get notified by email for this alert. Make sure they have access to your project."
-    title="Recipients"
+    bind:enabled={$form["enableSlackNotification"]}
+    showEnabled
+    title="Slack notifications"
   >
-    <RecipientsInputArray {formState} showLabel={false} />
+    <InputArray
+      accessorKey="channel"
+      addItemLabel="Add channel"
+      description="We’ll send alerts directly to these channels."
+      {formState}
+      id="slackChannels"
+      label="Channels"
+      placeholder="# Enter a Slack channel name"
+    />
+    <InputArray
+      accessorKey="user"
+      addItemLabel="Add user"
+      description="We’ll alert them with direct messages in Slack."
+      {formState}
+      id="slackEmails"
+      label="Users"
+      placeholder="Enter an email address"
+    />
+  </FormSection>
+  <FormSection
+    bind:enabled={$form["enableEmailNotification"]}
+    description="We’ll email alerts to these addresses. Make sure they have access to your project."
+    showEnabled
+    title="Email notifications"
+  >
+    <InputArray
+      accessorKey="email"
+      addItemLabel="Add email"
+      {formState}
+      id="emailRecipients"
+      placeholder="Enter an email address"
+    />
   </FormSection>
 </div>
diff --git a/web-common/src/features/alerts/extract-alert-form-values.ts b/web-common/src/features/alerts/extract-alert-form-values.ts
index 4ef41738dae9..c15a5fa17a9f 100644
--- a/web-common/src/features/alerts/extract-alert-form-values.ts
+++ b/web-common/src/features/alerts/extract-alert-form-values.ts
@@ -2,6 +2,7 @@ import type { AlertFormValues } from "@rilldata/web-common/features/alerts/form-
 import { createAndExpression } from "@rilldata/web-common/features/dashboards/stores/filter-utils";
 import { TimeRangePreset } from "@rilldata/web-common/lib/time/types";
 import {
+  V1AlertSpec,
   V1MetricsViewAggregationDimension,
   V1MetricsViewAggregationMeasure,
   V1MetricsViewAggregationRequest,
@@ -58,3 +59,44 @@ export function extractAlertFormValues(
     timeRange,
   };
 }
+
+export type AlertNotificationValues = Pick<
+  AlertFormValues,
+  | "enableSlackNotification"
+  | "slackChannels"
+  | "slackUsers"
+  | "enableEmailNotification"
+  | "emailRecipients"
+>;
+
+export function extractAlertNotification(
+  alertSpec: V1AlertSpec,
+): AlertNotificationValues {
+  const slackNotifier = alertSpec.notifiers?.find(
+    (n) => n.connector === "slack",
+  );
+  const slackChannels: string[] | undefined =
+    slackNotifier?.properties?.channels;
+  const slackUsers: string[] | undefined = slackNotifier?.properties?.channels;
+
+  const emailNotifier = alertSpec.notifiers?.find(
+    (n) => n.connector === "email",
+  );
+  const emailRecipients: string[] | undefined =
+    emailNotifier?.properties?.recipients;
+
+  return {
+    enableSlackNotification: !!slackNotifier,
+    slackChannels: mapAndAddEmptyEntry(slackChannels, "channel"),
+    slackUsers: mapAndAddEmptyEntry(slackUsers, "email"),
+
+    enableEmailNotification: !!emailNotifier,
+    emailRecipients: mapAndAddEmptyEntry(emailRecipients, "email"),
+  };
+}
+
+function mapAndAddEmptyEntry<R>(entries: string[] | undefined, key: string): R {
+  const mappedEntries = entries?.map((e) => ({ [key]: e })) ?? [];
+  mappedEntries.push({ [key]: "" });
+  return mappedEntries as R;
+}
diff --git a/web-common/src/features/alerts/form-utils.ts b/web-common/src/features/alerts/form-utils.ts
index bba20928fc80..0f74ef21a7f3 100644
--- a/web-common/src/features/alerts/form-utils.ts
+++ b/web-common/src/features/alerts/form-utils.ts
@@ -23,7 +23,11 @@ export type AlertFormValues = {
   criteriaOperation: V1Operation;
   evaluationInterval: string;
   snooze: string;
-  recipients: { email: string }[];
+  enableSlackNotification: boolean;
+  slackChannels: { channel: string }[];
+  slackUsers: { email: string }[];
+  enableEmailNotification: boolean;
+  emailRecipients: { email: string }[];
   // The following fields are not editable in the form, but they're state that's used throughout the form, so
   // it's helpful to have them here. Also, in the future they may be editable in the form.
   metricsViewName: string;
@@ -71,7 +75,12 @@ export const alertFormValidationSchema = yup.object({
   ),
   criteriaOperation: yup.string().required("Required"),
   snooze: yup.string().required("Required"),
-  recipients: yup.array().of(
+  slackUsers: yup.array().of(
+    yup.object().shape({
+      email: yup.string().email("Invalid email"),
+    }),
+  ),
+  emailRecipients: yup.array().of(
     yup.object().shape({
       email: yup.string().email("Invalid email"),
     }),
@@ -80,7 +89,7 @@ export const alertFormValidationSchema = yup.object({
 export const FieldsByTab: (keyof AlertFormValues)[][] = [
   ["name", "measure"],
   ["criteria", "criteriaOperation"],
-  ["snooze", "recipients"],
+  ["snooze", "slackUsers", "emailRecipients"],
 ];
 
 export function checkIsTabValid(
@@ -109,11 +118,11 @@ export function checkIsTabValid(
   } else if (tabIndex === 2) {
     // TODO: do better for >1 recipients
     hasRequiredFields =
-      formValues.snooze !== "" && formValues.recipients[0].email !== "";
+      formValues.snooze !== "" && formValues.emailRecipients[0].email !== "";
 
     // There's a bug in how `svelte-forms-lib` types the `$errors` store for arrays.
     // See: https://github.com/tjinauyeung/svelte-forms-lib/issues/154#issuecomment-1087331250
-    const receipientErrors = errors.recipients as unknown as {
+    const receipientErrors = errors.emailRecipients as unknown as {
       email: string;
     }[];
 
diff --git a/web-common/src/features/scheduled-reports/BaseScheduledReportForm.svelte b/web-common/src/features/scheduled-reports/BaseScheduledReportForm.svelte
index 4f6b7f20c31d..b56d8cb9216b 100644
--- a/web-common/src/features/scheduled-reports/BaseScheduledReportForm.svelte
+++ b/web-common/src/features/scheduled-reports/BaseScheduledReportForm.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
+  import InputArray from "@rilldata/web-common/components/forms/InputArray.svelte";
   import TimePicker from "@rilldata/web-common/components/forms/TimePicker.svelte";
-  import RecipientsInputArray from "@rilldata/web-common/features/scheduled-reports/RecipientsInputArray.svelte";
   import { V1ExportFormat } from "@rilldata/web-common/runtime-client";
   import InputV2 from "../../components/forms/InputV2.svelte";
   import Select from "../../components/forms/Select.svelte";
@@ -88,9 +88,14 @@
     optional
     placeholder="1000"
   />
-  <RecipientsInputArray
+  <InputArray
+    accessorKey="email"
+    addItemLabel="Add email"
     {formState}
     hint="Recipients will receive different views based on their security policy.
         Recipients without project access can't view the report."
+    id="recipients"
+    label="Recipients"
+    placeholder="Enter an email address"
   />
 </form>
diff --git a/web-common/src/features/scheduled-reports/RecipientsInputArray.svelte b/web-common/src/features/scheduled-reports/RecipientsInputArray.svelte
deleted file mode 100644
index b2b5e5158f5c..000000000000
--- a/web-common/src/features/scheduled-reports/RecipientsInputArray.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script lang="ts">
-  import InputArray from "@rilldata/web-common/components/forms/InputArray.svelte";
-
-  export let formState: any; // svelte-forms-lib's FormState
-  export let showLabel = true;
-  export let hint = "";
-
-  const { form, errors } = formState;
-
-  // There's a bug in how `svelte-forms-lib` types the `$errors` store for arrays.
-  // See: https://github.com/tjinauyeung/svelte-forms-lib/issues/154#issuecomment-1087331250
-  $: recipientErrors = $errors.recipients as unknown as { email: string }[];
-</script>
-
-<InputArray
-  accessorKey="email"
-  addItemLabel="Add email"
-  bind:errors={recipientErrors}
-  bind:values={$form["recipients"]}
-  {hint}
-  id="recipients"
-  label={showLabel ? "Recipients" : ""}
-  on:add-item={() => {
-    $form["recipients"] = $form["recipients"].concat({ email: "" });
-    recipientErrors = recipientErrors.concat({ email: "" });
-
-    // Focus on the new input element
-    setTimeout(() => {
-      const input = document.getElementById(
-        `recipients.${$form["recipients"].length - 1}.email`,
-      );
-      input?.focus();
-    }, 0);
-  }}
-  on:remove-item={(event) => {
-    const index = event.detail.index;
-    $form["recipients"] = $form["recipients"].filter((r, i) => i !== index);
-    recipientErrors = recipientErrors.filter((r, i) => i !== index);
-  }}
-  placeholder="Enter an email address"
-/>

From 43c00d538806418f6af2ee0fca24354d491f490a Mon Sep 17 00:00:00 2001
From: Aditya Hegde <adityahegderocks@gmail.com>
Date: Thu, 4 Apr 2024 15:48:02 +0530
Subject: [PATCH 2/6] Adding slack inputs to metadata

---
 .../AlertHistoryTableCompositeCell.svelte     |  1 -
 .../alerts/metadata/AlertMetadata.svelte      | 44 ++++++++++++-------
 .../metadata/MetadataList.svelte              | 17 +++++++
 .../metadata/ReportMetadata.svelte            | 15 ++++---
 .../metadata/notifiers-utils.ts               | 40 +++++++++++++++++
 5 files changed, 95 insertions(+), 22 deletions(-)
 create mode 100644 web-admin/src/features/scheduled-reports/metadata/MetadataList.svelte
 create mode 100644 web-admin/src/features/scheduled-reports/metadata/notifiers-utils.ts

diff --git a/web-admin/src/features/alerts/history/AlertHistoryTableCompositeCell.svelte b/web-admin/src/features/alerts/history/AlertHistoryTableCompositeCell.svelte
index 6aa07acc02a0..9075936f58f3 100644
--- a/web-admin/src/features/alerts/history/AlertHistoryTableCompositeCell.svelte
+++ b/web-admin/src/features/alerts/history/AlertHistoryTableCompositeCell.svelte
@@ -11,7 +11,6 @@
   export let timeZone: string;
   export let currentExecution: V1AlertExecution | null;
   export let result: V1AssertionResult;
-  $: console.log("result", result);
 </script>
 
 <div class="flex gap-x-2 items-center px-4 py-[10px]">
diff --git a/web-admin/src/features/alerts/metadata/AlertMetadata.svelte b/web-admin/src/features/alerts/metadata/AlertMetadata.svelte
index 90f67f06f00d..54f04a6c2fe0 100644
--- a/web-admin/src/features/alerts/metadata/AlertMetadata.svelte
+++ b/web-admin/src/features/alerts/metadata/AlertMetadata.svelte
@@ -13,7 +13,9 @@
   import ProjectAccessControls from "@rilldata/web-admin/features/projects/ProjectAccessControls.svelte";
   import EmailRecipients from "@rilldata/web-admin/features/scheduled-reports/metadata/EmailRecipients.svelte";
   import MetadataLabel from "@rilldata/web-admin/features/scheduled-reports/metadata/MetadataLabel.svelte";
+  import MetadataList from "@rilldata/web-admin/features/scheduled-reports/metadata/MetadataList.svelte";
   import MetadataValue from "@rilldata/web-admin/features/scheduled-reports/metadata/MetadataValue.svelte";
+  import { extractNotifier } from "@rilldata/web-admin/features/scheduled-reports/metadata/notifiers-utils";
   import { IconButton } from "@rilldata/web-common/components/button";
   import Button from "@rilldata/web-common/components/button/Button.svelte";
   import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
@@ -40,13 +42,16 @@
   $: dashboardTitle =
     $dashboard.data?.metricsView.spec.title || $dashboardName.data;
 
+  $: alertSpec = $alertQuery.data?.resource?.alert?.spec;
+
   $: metricsViewAggregationRequest = JSON.parse(
-    $alertQuery.data?.resource?.alert?.spec?.queryArgsJson ?? "{}",
+    alertSpec?.queryArgsJson ?? "{}",
   ) as V1MetricsViewAggregationRequest;
 
-  $: snoozeLabel = humaniseAlertSnoozeOption(
-    $alertQuery.data?.resource?.alert?.spec,
-  );
+  $: snoozeLabel = humaniseAlertSnoozeOption(alertSpec);
+
+  $: emailNotifier = extractNotifier(alertSpec?.notifiers, "email");
+  $: slackNotifier = extractNotifier(alertSpec?.notifiers, "slack");
 
   // Actions
   const queryClient = useQueryClient();
@@ -71,7 +76,7 @@
   }
 </script>
 
-{#if $alertQuery.data?.resource?.alert?.spec}
+{#if alertSpec}
   <div class="flex flex-col gap-y-9 w-full max-w-full 2xl:max-w-[1200px]">
     <div class="flex flex-col gap-y-2">
       <!-- Header row 1 -->
@@ -83,9 +88,7 @@
               <AlertOwnerBlock
                 {organization}
                 {project}
-                ownerId={$alertQuery.data.resource.alert.spec.annotations[
-                  "admin_owner_user_id"
-                ]}
+                ownerId={alertSpec.annotations["admin_owner_user_id"]}
               />
             {/if}
           </svelte:fragment>
@@ -93,7 +96,7 @@
       </div>
       <div class="flex gap-x-2 items-center">
         <h1 class="text-gray-700 text-lg font-bold">
-          {$alertQuery.data.resource.alert.spec.title}
+          {alertSpec.title}
         </h1>
         <div class="grow" />
         {#if !$isAlertCreatedByCode.data}
@@ -159,19 +162,28 @@
       filters={metricsViewAggregationRequest?.having}
     />
 
-    <!-- Recipients -->
-    <EmailRecipients
-      emailRecipients={$alertQuery.data.resource.alert.spec.notifiers.find(
-        (n) => n.connector === "email",
-      )?.properties?.email?.recipients ?? []}
-    />
+    <!-- Slack notification -->
+    {#if slackNotifier}
+      <MetadataList
+        data={[...slackNotifier.channels, ...slackNotifier.users]}
+        label="Slack notifications"
+      />
+    {/if}
+
+    <!-- Email notifications -->
+    {#if emailNotifier}
+      <MetadataList
+        data={emailNotifier.recipients}
+        label="Email notifications"
+      />
+    {/if}
   </div>
 {/if}
 
 {#if $alertQuery.data && $dashboard.data?.metricsView.spec}
   <EditAlertDialog
     open={showEditAlertDialog}
-    alertSpec={$alertQuery.data.resource.alert.spec}
+    {alertSpec}
     on:close={() => (showEditAlertDialog = false)}
     metricsViewName={$dashboardName.data}
   />
diff --git a/web-admin/src/features/scheduled-reports/metadata/MetadataList.svelte b/web-admin/src/features/scheduled-reports/metadata/MetadataList.svelte
new file mode 100644
index 000000000000..c12eb2b5aff5
--- /dev/null
+++ b/web-admin/src/features/scheduled-reports/metadata/MetadataList.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import MetadataLabel from "@rilldata/web-admin/features/scheduled-reports/metadata/MetadataLabel.svelte";
+  import { Tag } from "@rilldata/web-common/components/tag/index.js";
+  export let data: string[];
+  export let label: string;
+</script>
+
+<div class="flex flex-col gap-y-3">
+  <MetadataLabel>{label} ({data.length})</MetadataLabel>
+  <div class="flex flex-wrap gap-2">
+    {#each data as datum}
+      <Tag>
+        {datum}
+      </Tag>
+    {/each}
+  </div>
+</div>
diff --git a/web-admin/src/features/scheduled-reports/metadata/ReportMetadata.svelte b/web-admin/src/features/scheduled-reports/metadata/ReportMetadata.svelte
index 717506daa0bd..457f253fe7b6 100644
--- a/web-admin/src/features/scheduled-reports/metadata/ReportMetadata.svelte
+++ b/web-admin/src/features/scheduled-reports/metadata/ReportMetadata.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
   import EmailRecipients from "@rilldata/web-admin/features/scheduled-reports/metadata/EmailRecipients.svelte";
+  import MetadataList from "@rilldata/web-admin/features/scheduled-reports/metadata/MetadataList.svelte";
+  import { extractNotifier } from "@rilldata/web-admin/features/scheduled-reports/metadata/notifiers-utils";
   import IconButton from "@rilldata/web-common/components/button/IconButton.svelte";
   import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
   import ThreeDot from "@rilldata/web-common/components/icons/ThreeDot.svelte";
@@ -48,6 +50,11 @@
       },
     );
 
+  $: emailNotifier = extractNotifier(
+    $reportQuery.data.resource.report.spec.notifiers,
+    "email",
+  );
+
   // Actions
   const queryClient = useQueryClient();
   const deleteReport = createAdminServiceDeleteReport();
@@ -161,11 +168,9 @@
     </div>
 
     <!-- Recipients -->
-    <EmailRecipients
-      emailRecipients={$reportQuery.data.resource.report.spec.notifiers.find(
-        (n) => n.connector === "email",
-      )?.properties?.email?.recipients ?? []}
-    />
+    {#if emailNotifier}
+      <MetadataList data={emailNotifier.recipients} label="Recipients" />
+    {/if}
   </div>
 {/if}
 
diff --git a/web-admin/src/features/scheduled-reports/metadata/notifiers-utils.ts b/web-admin/src/features/scheduled-reports/metadata/notifiers-utils.ts
new file mode 100644
index 000000000000..ef26b29bacfc
--- /dev/null
+++ b/web-admin/src/features/scheduled-reports/metadata/notifiers-utils.ts
@@ -0,0 +1,40 @@
+import type { V1Notifier } from "@rilldata/web-common/runtime-client";
+
+export type EmailNotifierProperties = {
+  recipients: string[];
+};
+export type SlackNotifierProperties = {
+  users: string[];
+  channels: string[];
+  webhooks: string[];
+};
+
+type NotifierPropsMap = {
+  email: EmailNotifierProperties;
+  slack: SlackNotifierProperties;
+};
+
+export function extractNotifier<Notifier extends keyof NotifierPropsMap>(
+  notifiers: V1Notifier[] | undefined,
+  name: Notifier,
+): NotifierPropsMap[Notifier] | undefined {
+  if (!notifiers) return undefined;
+  const notifier = notifiers.find((n) => n.connector === name);
+  if (!notifier?.properties) return undefined;
+
+  switch (name) {
+    case "email":
+      return {
+        recipients: notifier.properties.recipients ?? [],
+      } as NotifierPropsMap[Notifier];
+
+    case "slack":
+      return {
+        users: notifier.properties.recipients ?? [],
+        channels: notifier.properties.recipients ?? [],
+        webhooks: notifier.properties.recipients ?? [],
+      } as NotifierPropsMap[Notifier];
+  }
+
+  return notifier.properties as NotifierPropsMap[Notifier];
+}

From bd6019073adaf7c50f7351da6be483ade57ca1fa Mon Sep 17 00:00:00 2001
From: Aditya Hegde <adityahegderocks@gmail.com>
Date: Thu, 4 Apr 2024 17:12:45 +0530
Subject: [PATCH 3/6] Adding a check for slack notifier presence

---
 .../AlertDialogDeliveryTab.svelte             | 54 ++++++++++---------
 .../alerts/delivery-tab/notifiers-utils.ts    |  9 ++++
 2 files changed, 39 insertions(+), 24 deletions(-)
 create mode 100644 web-common/src/features/alerts/delivery-tab/notifiers-utils.ts

diff --git a/web-common/src/features/alerts/delivery-tab/AlertDialogDeliveryTab.svelte b/web-common/src/features/alerts/delivery-tab/AlertDialogDeliveryTab.svelte
index 87db042f3f49..62c21c5a9114 100644
--- a/web-common/src/features/alerts/delivery-tab/AlertDialogDeliveryTab.svelte
+++ b/web-common/src/features/alerts/delivery-tab/AlertDialogDeliveryTab.svelte
@@ -2,13 +2,17 @@
   import FormSection from "@rilldata/web-common/components/forms/FormSection.svelte";
   import InputArray from "@rilldata/web-common/components/forms/InputArray.svelte";
   import Select from "@rilldata/web-common/components/forms/Select.svelte";
+  import { getHasSlackConnection } from "@rilldata/web-common/features/alerts/delivery-tab/notifiers-utils";
   import { SnoozeOptions } from "@rilldata/web-common/features/alerts/delivery-tab/snooze";
   import type { AlertFormValues } from "@rilldata/web-common/features/alerts/form-utils";
+  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
   import type { createForm } from "svelte-forms-lib";
 
   export let formState: ReturnType<typeof createForm<AlertFormValues>>;
 
   const { form } = formState;
+
+  $: hasSlackNotifier = getHasSlackConnection($runtime.instanceId);
 </script>
 
 <div class="flex flex-col gap-y-3">
@@ -27,30 +31,32 @@
       options={SnoozeOptions}
     />
   </FormSection>
-  <FormSection
-    bind:enabled={$form["enableSlackNotification"]}
-    showEnabled
-    title="Slack notifications"
-  >
-    <InputArray
-      accessorKey="channel"
-      addItemLabel="Add channel"
-      description="We’ll send alerts directly to these channels."
-      {formState}
-      id="slackChannels"
-      label="Channels"
-      placeholder="# Enter a Slack channel name"
-    />
-    <InputArray
-      accessorKey="user"
-      addItemLabel="Add user"
-      description="We’ll alert them with direct messages in Slack."
-      {formState}
-      id="slackEmails"
-      label="Users"
-      placeholder="Enter an email address"
-    />
-  </FormSection>
+  {#if hasSlackNotifier}
+    <FormSection
+      bind:enabled={$form["enableSlackNotification"]}
+      showEnabled
+      title="Slack notifications"
+    >
+      <InputArray
+        accessorKey="channel"
+        addItemLabel="Add channel"
+        description="We’ll send alerts directly to these channels."
+        {formState}
+        id="slackChannels"
+        label="Channels"
+        placeholder="# Enter a Slack channel name"
+      />
+      <InputArray
+        accessorKey="user"
+        addItemLabel="Add user"
+        description="We’ll alert them with direct messages in Slack."
+        {formState}
+        id="slackEmails"
+        label="Users"
+        placeholder="Enter an email address"
+      />
+    </FormSection>
+  {/if}
   <FormSection
     bind:enabled={$form["enableEmailNotification"]}
     description="We’ll email alerts to these addresses. Make sure they have access to your project."
diff --git a/web-common/src/features/alerts/delivery-tab/notifiers-utils.ts b/web-common/src/features/alerts/delivery-tab/notifiers-utils.ts
new file mode 100644
index 000000000000..be0b4699c5a3
--- /dev/null
+++ b/web-common/src/features/alerts/delivery-tab/notifiers-utils.ts
@@ -0,0 +1,9 @@
+import { createRuntimeServiceListNotifierConnectors } from "@rilldata/web-common/runtime-client";
+
+export function getHasSlackConnection(runtimeId: string) {
+  return createRuntimeServiceListNotifierConnectors(runtimeId, {
+    query: {
+      select: (data) => !!data.connectors?.some((c) => c.name === "slack"),
+    },
+  });
+}

From 553ed02e2aee25ec6dcf66f46b0dd0cd0eadaa60 Mon Sep 17 00:00:00 2001
From: Aditya Hegde <adityahegderocks@gmail.com>
Date: Thu, 4 Apr 2024 17:36:30 +0530
Subject: [PATCH 4/6] Fix lint

---
 web-admin/src/features/alerts/metadata/AlertMetadata.svelte      | 1 -
 .../features/scheduled-reports/metadata/ReportMetadata.svelte    | 1 -
 2 files changed, 2 deletions(-)

diff --git a/web-admin/src/features/alerts/metadata/AlertMetadata.svelte b/web-admin/src/features/alerts/metadata/AlertMetadata.svelte
index 54f04a6c2fe0..169af87e4f7e 100644
--- a/web-admin/src/features/alerts/metadata/AlertMetadata.svelte
+++ b/web-admin/src/features/alerts/metadata/AlertMetadata.svelte
@@ -11,7 +11,6 @@
     useIsAlertCreatedByCode,
   } from "@rilldata/web-admin/features/alerts/selectors";
   import ProjectAccessControls from "@rilldata/web-admin/features/projects/ProjectAccessControls.svelte";
-  import EmailRecipients from "@rilldata/web-admin/features/scheduled-reports/metadata/EmailRecipients.svelte";
   import MetadataLabel from "@rilldata/web-admin/features/scheduled-reports/metadata/MetadataLabel.svelte";
   import MetadataList from "@rilldata/web-admin/features/scheduled-reports/metadata/MetadataList.svelte";
   import MetadataValue from "@rilldata/web-admin/features/scheduled-reports/metadata/MetadataValue.svelte";
diff --git a/web-admin/src/features/scheduled-reports/metadata/ReportMetadata.svelte b/web-admin/src/features/scheduled-reports/metadata/ReportMetadata.svelte
index 457f253fe7b6..5bde39bf026b 100644
--- a/web-admin/src/features/scheduled-reports/metadata/ReportMetadata.svelte
+++ b/web-admin/src/features/scheduled-reports/metadata/ReportMetadata.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
   import { goto } from "$app/navigation";
-  import EmailRecipients from "@rilldata/web-admin/features/scheduled-reports/metadata/EmailRecipients.svelte";
   import MetadataList from "@rilldata/web-admin/features/scheduled-reports/metadata/MetadataList.svelte";
   import { extractNotifier } from "@rilldata/web-admin/features/scheduled-reports/metadata/notifiers-utils";
   import IconButton from "@rilldata/web-common/components/button/IconButton.svelte";

From 76bf79063b43796a83f5f078beb3186612b13e3f Mon Sep 17 00:00:00 2001
From: Aditya Hegde <adityahegderocks@gmail.com>
Date: Thu, 4 Apr 2024 18:07:40 +0530
Subject: [PATCH 5/6] Fixes

---
 admin/server/alerts.go                            |  6 +++---
 .../scheduled-reports/metadata/notifiers-utils.ts | 15 ---------------
 .../delivery-tab/AlertDialogDeliveryTab.svelte    |  4 ++--
 3 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/admin/server/alerts.go b/admin/server/alerts.go
index eb4c10809c6a..6909ab87d13b 100644
--- a/admin/server/alerts.go
+++ b/admin/server/alerts.go
@@ -464,7 +464,7 @@ func (s *Server) yamlForManagedAlert(opts *adminv1.AlertOptions, ownerUserID str
 	// Notification options
 	res.Renotify = opts.Renotify
 	res.RenotifyAfter = opts.RenotifyAfterSeconds
-	res.Notify.Email.Emails = opts.EmailRecipients
+	res.Notify.Email.Recipients = opts.EmailRecipients
 	res.Notify.Slack.Channels = opts.SlackChannels
 	res.Notify.Slack.Users = opts.SlackUsers
 	res.Notify.Slack.Webhooks = opts.SlackWebhooks
@@ -496,7 +496,7 @@ func (s *Server) yamlForCommittedAlert(opts *adminv1.AlertOptions) ([]byte, erro
 	// Notification options
 	res.Renotify = opts.Renotify
 	res.RenotifyAfter = opts.RenotifyAfterSeconds
-	res.Notify.Email.Emails = opts.EmailRecipients
+	res.Notify.Email.Recipients = opts.EmailRecipients
 	res.Notify.Slack.Channels = opts.SlackChannels
 	res.Notify.Slack.Users = opts.SlackUsers
 	res.Notify.Slack.Webhooks = opts.SlackWebhooks
@@ -589,7 +589,7 @@ type alertYAML struct {
 	RenotifyAfter uint32 `yaml:"renotify_after"`
 	Notify        struct {
 		Email struct {
-			Emails []string `yaml:"emails"`
+			Recipients []string `yaml:"recipients"`
 		}
 		Slack struct {
 			Users    []string `yaml:"users"`
diff --git a/web-admin/src/features/scheduled-reports/metadata/notifiers-utils.ts b/web-admin/src/features/scheduled-reports/metadata/notifiers-utils.ts
index ef26b29bacfc..76f05ee46d58 100644
--- a/web-admin/src/features/scheduled-reports/metadata/notifiers-utils.ts
+++ b/web-admin/src/features/scheduled-reports/metadata/notifiers-utils.ts
@@ -21,20 +21,5 @@ export function extractNotifier<Notifier extends keyof NotifierPropsMap>(
   if (!notifiers) return undefined;
   const notifier = notifiers.find((n) => n.connector === name);
   if (!notifier?.properties) return undefined;
-
-  switch (name) {
-    case "email":
-      return {
-        recipients: notifier.properties.recipients ?? [],
-      } as NotifierPropsMap[Notifier];
-
-    case "slack":
-      return {
-        users: notifier.properties.recipients ?? [],
-        channels: notifier.properties.recipients ?? [],
-        webhooks: notifier.properties.recipients ?? [],
-      } as NotifierPropsMap[Notifier];
-  }
-
   return notifier.properties as NotifierPropsMap[Notifier];
 }
diff --git a/web-common/src/features/alerts/delivery-tab/AlertDialogDeliveryTab.svelte b/web-common/src/features/alerts/delivery-tab/AlertDialogDeliveryTab.svelte
index 62c21c5a9114..f92a0b42970d 100644
--- a/web-common/src/features/alerts/delivery-tab/AlertDialogDeliveryTab.svelte
+++ b/web-common/src/features/alerts/delivery-tab/AlertDialogDeliveryTab.svelte
@@ -47,11 +47,11 @@
         placeholder="# Enter a Slack channel name"
       />
       <InputArray
-        accessorKey="user"
+        accessorKey="email"
         addItemLabel="Add user"
         description="We’ll alert them with direct messages in Slack."
         {formState}
-        id="slackEmails"
+        id="slackUsers"
         label="Users"
         placeholder="Enter an email address"
       />

From ce3ab8792bf5a346bde94dfdbf05fe9ff23f9d64 Mon Sep 17 00:00:00 2001
From: Aditya Hegde <adityahegderocks@gmail.com>
Date: Mon, 8 Apr 2024 11:36:02 +0530
Subject: [PATCH 6/6] PR comments

---
 .../src/components/forms/FormSection.svelte    |  4 ++--
 .../delivery-tab/AlertDialogDeliveryTab.svelte | 18 +++++++++++++++---
 .../alerts/delivery-tab/notifiers-utils.ts     |  5 ++++-
 3 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/web-common/src/components/forms/FormSection.svelte b/web-common/src/components/forms/FormSection.svelte
index 793a9e6b5443..d9eb236bc7e4 100644
--- a/web-common/src/components/forms/FormSection.svelte
+++ b/web-common/src/components/forms/FormSection.svelte
@@ -7,7 +7,7 @@
   export let title: string;
   export let description: string = "";
   export let padding = "p-3";
-  export let showEnabled = false;
+  export let showSectionToggle = false;
   export let enabled = true;
 </script>
 
@@ -25,7 +25,7 @@
           </TooltipContent>
         </Tooltip>
       {/if}
-      {#if showEnabled}
+      {#if showSectionToggle}
         <div class="grow"></div>
         <Switch bind:checked={enabled} />
       {/if}
diff --git a/web-common/src/features/alerts/delivery-tab/AlertDialogDeliveryTab.svelte b/web-common/src/features/alerts/delivery-tab/AlertDialogDeliveryTab.svelte
index f92a0b42970d..68071b870ad6 100644
--- a/web-common/src/features/alerts/delivery-tab/AlertDialogDeliveryTab.svelte
+++ b/web-common/src/features/alerts/delivery-tab/AlertDialogDeliveryTab.svelte
@@ -13,6 +13,7 @@
   const { form } = formState;
 
   $: hasSlackNotifier = getHasSlackConnection($runtime.instanceId);
+  $: console.log($hasSlackNotifier);
 </script>
 
 <div class="flex flex-col gap-y-3">
@@ -31,10 +32,10 @@
       options={SnoozeOptions}
     />
   </FormSection>
-  {#if hasSlackNotifier}
+  {#if $hasSlackNotifier.data}
     <FormSection
       bind:enabled={$form["enableSlackNotification"]}
-      showEnabled
+      showSectionToggle
       title="Slack notifications"
     >
       <InputArray
@@ -56,11 +57,22 @@
         placeholder="Enter an email address"
       />
     </FormSection>
+  {:else}
+    <FormSection title="Slack notifications">
+      <span class="text-sm text-slate-600">
+        Slack has not been configured for this project. Read the <a
+          href="https://docs.rilldata.com/reference/connectors/slack"
+          target="_blank"
+        >
+          docs
+        </a> to learn more.
+      </span>
+    </FormSection>
   {/if}
   <FormSection
     bind:enabled={$form["enableEmailNotification"]}
     description="We’ll email alerts to these addresses. Make sure they have access to your project."
-    showEnabled
+    showSectionToggle
     title="Email notifications"
   >
     <InputArray
diff --git a/web-common/src/features/alerts/delivery-tab/notifiers-utils.ts b/web-common/src/features/alerts/delivery-tab/notifiers-utils.ts
index be0b4699c5a3..4e55435ae7e6 100644
--- a/web-common/src/features/alerts/delivery-tab/notifiers-utils.ts
+++ b/web-common/src/features/alerts/delivery-tab/notifiers-utils.ts
@@ -3,7 +3,10 @@ import { createRuntimeServiceListNotifierConnectors } from "@rilldata/web-common
 export function getHasSlackConnection(runtimeId: string) {
   return createRuntimeServiceListNotifierConnectors(runtimeId, {
     query: {
-      select: (data) => !!data.connectors?.some((c) => c.name === "slack"),
+      select: (data) => {
+        console.log(data);
+        !!data.connectors?.some((c) => c.name === "slack");
+      },
     },
   });
 }