From 968054e3109b4a785ed40d000d7149bbc8583c68 Mon Sep 17 00:00:00 2001
From: David Gu <david.gurquiza@gmail.com>
Date: Fri, 9 May 2025 19:10:52 -0600
Subject: [PATCH 1/3] fix: use expandable cards for group columns form

---
 .../svelte/consumers/GroupColumnsForm.svelte  | 40 ++++++++++---------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/assets/svelte/consumers/GroupColumnsForm.svelte b/assets/svelte/consumers/GroupColumnsForm.svelte
index 151f55270..883c0d705 100644
--- a/assets/svelte/consumers/GroupColumnsForm.svelte
+++ b/assets/svelte/consumers/GroupColumnsForm.svelte
@@ -65,13 +65,12 @@
 
 <!-- Edit Mode Card -->
 {#if isEditMode}
-  <Card>
-    <CardHeader>
-      <div class="flex items-center justify-between">
-        <CardTitle>Message grouping</CardTitle>
-      </div>
-    </CardHeader>
-    <CardContent>
+  <ExpandableCard disabled={true}>
+    <svelte:fragment slot="title">
+      <CardTitle>Message grouping</CardTitle>
+    </svelte:fragment>
+
+    <svelte:fragment slot="summary">
       {#if !useCustomGrouping && !selectedTable.is_event_table}
         <p class="text-sm text-muted-foreground">
           Using primary keys for grouping.
@@ -83,16 +82,23 @@
           readonly={true}
         />
       {/if}
-    </CardContent>
-  </Card>
+    </svelte:fragment>
+  </ExpandableCard>
 
   <!-- Create Mode - No PKs Available -->
 {:else if selectedTable && defaultGroupColumns.length === 0}
-  <Card>
-    <CardHeader>
+  <ExpandableCard>
+    <svelte:fragment slot="title">
       <CardTitle>Message grouping</CardTitle>
-    </CardHeader>
-    <CardContent>
+    </svelte:fragment>
+
+    <svelte:fragment slot="summary">
+      <p class="text-sm text-muted-foreground">
+        {summaryText}
+      </p>
+    </svelte:fragment>
+
+    <svelte:fragment slot="content">
       <p class="text-sm text-info mb-4">
         No primary keys available. Custom grouping is required.
       </p>
@@ -104,16 +110,14 @@
       {#if groupColumnError}
         <p class="text-destructive text-sm mt-2">{groupColumnError}</p>
       {/if}
-    </CardContent>
-  </Card>
+    </svelte:fragment>
+  </ExpandableCard>
 
   <!-- Create Mode - Normal -->
 {:else}
   <ExpandableCard disabled={!selectedTable} expanded={!isEditMode}>
     <svelte:fragment slot="title">
-      <div class="flex items-center justify-between">
-        <CardTitle>Message grouping</CardTitle>
-      </div>
+      <CardTitle>Message grouping</CardTitle>
     </svelte:fragment>
 
     <svelte:fragment slot="summary">

From f857be3fd287ae36be0c5278d139aecd74411248 Mon Sep 17 00:00:00 2001
From: David Gu <david.gurquiza@gmail.com>
Date: Fri, 9 May 2025 22:14:23 -0600
Subject: [PATCH 2/3] feat: add tooltip for group message cards for existing
 sinks

---
 .../ui/card/expandable-card-header.svelte     | 34 +++++++++++++
 .../components/ui/card/expandable-card.svelte | 50 +++++++++----------
 .../svelte/consumers/GroupColumnsForm.svelte  |  7 ++-
 3 files changed, 64 insertions(+), 27 deletions(-)
 create mode 100644 assets/svelte/components/ui/card/expandable-card-header.svelte

diff --git a/assets/svelte/components/ui/card/expandable-card-header.svelte b/assets/svelte/components/ui/card/expandable-card-header.svelte
new file mode 100644
index 000000000..4fee5203a
--- /dev/null
+++ b/assets/svelte/components/ui/card/expandable-card-header.svelte
@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { CardHeader, CardTitle } from ".";
+  import { ChevronDown } from "lucide-svelte";
+  import { Button as ButtonPrimitive } from "bits-ui";
+
+  export let expanded: boolean = false;
+  export let disabled: boolean = false;
+  export let builders: $$Props["builders"] = [];
+
+  function handleClick() {
+    if (disabled) return;
+    expanded = !expanded;
+  }
+</script>
+
+<CardHeader class="flex flex-row items-center justify-between">
+  <ButtonPrimitive.Root
+    class="flex flex-row items-center justify-between w-full cursor-pointer"
+    on:click={handleClick}
+    {builders}
+    {disabled}
+  >
+    <CardTitle class="flex items-center gap-2">
+      <slot />
+    </CardTitle>
+    <div
+      class="transition-transform duration-200"
+      class:rotate-180={expanded}
+      class:text-gray-300={disabled}
+    >
+      <ChevronDown class="h-4 w-4" />
+    </div>
+  </ButtonPrimitive.Root>
+</CardHeader>
diff --git a/assets/svelte/components/ui/card/expandable-card.svelte b/assets/svelte/components/ui/card/expandable-card.svelte
index 022aeb4b6..3561d548a 100644
--- a/assets/svelte/components/ui/card/expandable-card.svelte
+++ b/assets/svelte/components/ui/card/expandable-card.svelte
@@ -1,36 +1,36 @@
 <script lang="ts">
-  import { Card, CardContent, CardHeader, CardTitle } from ".";
-  import { ChevronDown } from "lucide-svelte";
+  import { Card, CardContent } from ".";
+  import * as Tooltip from "$lib/components/ui/tooltip";
+  import { Info } from "lucide-svelte";
+  import ExpandableCardHeader from "./expandable-card-header.svelte";
 
   export let expanded: boolean = false;
   export let disabled: boolean = false;
-
-  function handleClick() {
-    if (disabled) return;
-    expanded = !expanded;
-  }
+  export let titleTooltip: string | null = null;
 </script>
 
 <Card>
-  <CardHeader class="flex flex-row items-center justify-between">
-    <button
-      type="button"
-      class="flex flex-row items-center justify-between w-full"
-      on:click={handleClick}
-      {disabled}
+  {#if titleTooltip}
+    <Tooltip.Root
+      openDelay={10}
+      class="flex flex-row items-center justify-between"
     >
-      <CardTitle class="flex items-center gap-2">
-        <slot name="title" />
-      </CardTitle>
-      <div
-        class="transition-transform duration-200"
-        class:rotate-180={expanded}
-        class:text-gray-300={disabled}
-      >
-        <ChevronDown class="h-4 w-4" />
-      </div>
-    </button>
-  </CardHeader>
+      <Tooltip.Trigger asChild let:builder>
+        <ExpandableCardHeader builders={[builder]} bind:expanded {disabled}>
+          <slot name="title" />
+        </ExpandableCardHeader>
+      </Tooltip.Trigger>
+      <Tooltip.Content class="max-w-xs space-y-2">
+        <p class="text-xs text-gray-500">
+          {titleTooltip}
+        </p>
+      </Tooltip.Content>
+    </Tooltip.Root>
+  {:else}
+    <ExpandableCardHeader bind:expanded {disabled}>
+      <slot name="title" />
+    </ExpandableCardHeader>
+  {/if}
 
   <CardContent>
     <div class="space-y-2">
diff --git a/assets/svelte/consumers/GroupColumnsForm.svelte b/assets/svelte/consumers/GroupColumnsForm.svelte
index 883c0d705..8556f9451 100644
--- a/assets/svelte/consumers/GroupColumnsForm.svelte
+++ b/assets/svelte/consumers/GroupColumnsForm.svelte
@@ -65,7 +65,10 @@
 
 <!-- Edit Mode Card -->
 {#if isEditMode}
-  <ExpandableCard disabled={true}>
+  <ExpandableCard
+    disabled={true}
+    titleTooltip="Message grouping can’t be changed for an active sink."
+  >
     <svelte:fragment slot="title">
       <CardTitle>Message grouping</CardTitle>
     </svelte:fragment>
@@ -87,7 +90,7 @@
 
   <!-- Create Mode - No PKs Available -->
 {:else if selectedTable && defaultGroupColumns.length === 0}
-  <ExpandableCard>
+  <ExpandableCard expanded={!isEditMode}>
     <svelte:fragment slot="title">
       <CardTitle>Message grouping</CardTitle>
     </svelte:fragment>

From 60370051cc25fbad4d3fea428780b9b9ae827967 Mon Sep 17 00:00:00 2001
From: David Gu <david.gurquiza@gmail.com>
Date: Mon, 12 May 2025 18:35:52 -0600
Subject: [PATCH 3/3] fix: misc fixes to sink forms, and expandable cards

- The default state for tables with no primary keys is to expand the card, and show the option to select which column to group on. And disabled the collapsing behavior from the card as a column *must* be selected.
- Made a change on ExpandableCards to allow this extra customization of disabling a card in either collapsed or expanded state. Previously a disabled card forced the state to be collapsed.
- Added `type="button"` to the `ExpandableCardHeader` otherwise was causing some UX issues like submitting the form or showing form validation results unexpectedly.
---
 .../ui/card/expandable-card-header.svelte        |  1 +
 .../components/ui/card/expandable-card.svelte    |  2 +-
 assets/svelte/consumers/GroupColumnsForm.svelte  | 12 ++++++++----
 assets/svelte/consumers/SinkConsumerForm.svelte  | 16 +++++++++++++---
 4 files changed, 23 insertions(+), 8 deletions(-)

diff --git a/assets/svelte/components/ui/card/expandable-card-header.svelte b/assets/svelte/components/ui/card/expandable-card-header.svelte
index 4fee5203a..d9e80cdf2 100644
--- a/assets/svelte/components/ui/card/expandable-card-header.svelte
+++ b/assets/svelte/components/ui/card/expandable-card-header.svelte
@@ -17,6 +17,7 @@
   <ButtonPrimitive.Root
     class="flex flex-row items-center justify-between w-full cursor-pointer"
     on:click={handleClick}
+    type="button"
     {builders}
     {disabled}
   >
diff --git a/assets/svelte/components/ui/card/expandable-card.svelte b/assets/svelte/components/ui/card/expandable-card.svelte
index 3561d548a..5a02dff55 100644
--- a/assets/svelte/components/ui/card/expandable-card.svelte
+++ b/assets/svelte/components/ui/card/expandable-card.svelte
@@ -34,7 +34,7 @@
 
   <CardContent>
     <div class="space-y-2">
-      {#if disabled || !expanded}
+      {#if !expanded}
         <slot name="summary" />
       {:else}
         <slot name="content" />
diff --git a/assets/svelte/consumers/GroupColumnsForm.svelte b/assets/svelte/consumers/GroupColumnsForm.svelte
index 8556f9451..a390fc4de 100644
--- a/assets/svelte/consumers/GroupColumnsForm.svelte
+++ b/assets/svelte/consumers/GroupColumnsForm.svelte
@@ -17,7 +17,6 @@
   let defaultGroupColumns = selectedTable?.default_group_columns || [];
   let groupColumnError: string | null = null;
   let useCustomGrouping = false;
-  let isExpanded = false;
 
   $: groupColumnError = errors.sequence_filter?.group_column_attnums?.[0];
   $: defaultGroupColumns = selectedTable?.default_group_columns || [];
@@ -60,7 +59,9 @@
         .join(", ")}`
     : selectedTable?.is_event_table
       ? "Using source_database_id, source_table_oid, and record_pk for grouping, which is the default"
-      : "Using primary keys for grouping, which is the default";
+      : defaultGroupColumns.length === 0
+        ? "No primary keys available. Custom grouping is required."
+        : "Using primary keys for grouping, which is the default";
 </script>
 
 <!-- Edit Mode Card -->
@@ -90,7 +91,10 @@
 
   <!-- Create Mode - No PKs Available -->
 {:else if selectedTable && defaultGroupColumns.length === 0}
-  <ExpandableCard expanded={!isEditMode}>
+  <ExpandableCard
+    expanded={!isEditMode}
+    disabled={defaultGroupColumns.length === 0}
+  >
     <svelte:fragment slot="title">
       <CardTitle>Message grouping</CardTitle>
     </svelte:fragment>
@@ -118,7 +122,7 @@
 
   <!-- Create Mode - Normal -->
 {:else}
-  <ExpandableCard disabled={!selectedTable} expanded={!isEditMode}>
+  <ExpandableCard disabled={!selectedTable}>
     <svelte:fragment slot="title">
       <CardTitle>Message grouping</CardTitle>
     </svelte:fragment>
diff --git a/assets/svelte/consumers/SinkConsumerForm.svelte b/assets/svelte/consumers/SinkConsumerForm.svelte
index 73dd7461a..a418fccb8 100644
--- a/assets/svelte/consumers/SinkConsumerForm.svelte
+++ b/assets/svelte/consumers/SinkConsumerForm.svelte
@@ -354,15 +354,19 @@
     });
   }
 
-  let backfillSectionExpanded = false;
   let showMessageTypeExampleModal = false;
   let selectedExampleType: "change" | "record" = "change";
 
   let transformSectionEnabled = false;
+  let transformSectionExpanded = false;
   let backfillSectionEnabled = false;
+  let backfillSectionExpanded = false;
   $: {
     transformSectionEnabled = selectedTable && consumer.type !== "redis_stream";
+    transformSectionExpanded = transformSectionEnabled && !isEditMode;
+
     backfillSectionEnabled = selectedTable && !isEditMode;
+    backfillSectionExpanded = backfillSectionEnabled && !isEditMode;
   }
 
   let transformRefreshState: "idle" | "refreshing" | "done" = "idle";
@@ -521,7 +525,10 @@
       </CardContent>
     </Card>
 
-    <ExpandableCard disabled={!transformSectionEnabled} expanded={!isEditMode}>
+    <ExpandableCard
+      disabled={!transformSectionEnabled}
+      expanded={transformSectionExpanded}
+    >
       <svelte:fragment slot="title">
         Transforms
         <Tooltip.Root openDelay={200}>
@@ -582,7 +589,10 @@
     </ExpandableCard>
 
     {#if !isEditMode}
-      <ExpandableCard disabled={!backfillSectionEnabled} expanded={!isEditMode}>
+      <ExpandableCard
+        disabled={!backfillSectionEnabled}
+        expanded={!isEditMode && backfillSectionEnabled}
+      >
         <svelte:fragment slot="title">
           Initial backfill