Skip to content

Commit a7842cf

Browse files
davoclavodavoclavo
authored
fix: Message Grouping card form improvements (#1420)
- 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.
1 parent 82ff39a commit a7842cf

4 files changed

Lines changed: 106 additions & 50 deletions

File tree

‎assets/svelte/components/ui/card/expandable-card-header.svelte‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<script lang="ts">
2+
import { CardHeader, CardTitle } from ".";
3+
import { ChevronDown } from "lucide-svelte";
4+
import { Button as ButtonPrimitive } from "bits-ui";
5+
6+
export let expanded: boolean = false;
7+
export let disabled: boolean = false;
8+
export let builders: $$Props["builders"] = [];
9+
10+
function handleClick() {
11+
if (disabled) return;
12+
expanded = !expanded;
13+
}
14+
</script>
15+
16+
<CardHeader class="flex flex-row items-center justify-between">
17+
<ButtonPrimitive.Root
18+
class="flex flex-row items-center justify-between w-full cursor-pointer"
19+
on:click={handleClick}
20+
type="button"
21+
{builders}
22+
{disabled}
23+
>
24+
<CardTitle class="flex items-center gap-2">
25+
<slot />
26+
</CardTitle>
27+
<div
28+
class="transition-transform duration-200"
29+
class:rotate-180={expanded}
30+
class:text-gray-300={disabled}
31+
>
32+
<ChevronDown class="h-4 w-4" />
33+
</div>
34+
</ButtonPrimitive.Root>
35+
</CardHeader>

‎assets/svelte/components/ui/card/expandable-card.svelte‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,40 @@
11
<script lang="ts">
2-
import { Card, CardContent, CardHeader, CardTitle } from ".";
3-
import { ChevronDown } from "lucide-svelte";
2+
import { Card, CardContent } from ".";
3+
import * as Tooltip from "$lib/components/ui/tooltip";
4+
import { Info } from "lucide-svelte";
5+
import ExpandableCardHeader from "./expandable-card-header.svelte";
46
57
export let expanded: boolean = false;
68
export let disabled: boolean = false;
7-
8-
function handleClick() {
9-
if (disabled) return;
10-
expanded = !expanded;
11-
}
9+
export let titleTooltip: string | null = null;
1210
</script>
1311

1412
<Card>
15-
<CardHeader class="flex flex-row items-center justify-between">
16-
<button
17-
type="button"
18-
class="flex flex-row items-center justify-between w-full"
19-
on:click={handleClick}
20-
{disabled}
13+
{#if titleTooltip}
14+
<Tooltip.Root
15+
openDelay={10}
16+
class="flex flex-row items-center justify-between"
2117
>
22-
<CardTitle class="flex items-center gap-2">
23-
<slot name="title" />
24-
</CardTitle>
25-
<div
26-
class="transition-transform duration-200"
27-
class:rotate-180={expanded}
28-
class:text-gray-300={disabled}
29-
>
30-
<ChevronDown class="h-4 w-4" />
31-
</div>
32-
</button>
33-
</CardHeader>
18+
<Tooltip.Trigger asChild let:builder>
19+
<ExpandableCardHeader builders={[builder]} bind:expanded {disabled}>
20+
<slot name="title" />
21+
</ExpandableCardHeader>
22+
</Tooltip.Trigger>
23+
<Tooltip.Content class="max-w-xs space-y-2">
24+
<p class="text-xs text-gray-500">
25+
{titleTooltip}
26+
</p>
27+
</Tooltip.Content>
28+
</Tooltip.Root>
29+
{:else}
30+
<ExpandableCardHeader bind:expanded {disabled}>
31+
<slot name="title" />
32+
</ExpandableCardHeader>
33+
{/if}
3434

3535
<CardContent>
3636
<div class="space-y-2">
37-
{#if disabled || !expanded}
37+
{#if !expanded}
3838
<slot name="summary" />
3939
{:else}
4040
<slot name="content" />

‎assets/svelte/consumers/GroupColumnsForm.svelte‎

Lines changed: 32 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@
1717
let defaultGroupColumns = selectedTable?.default_group_columns || [];
1818
let groupColumnError: string | null = null;
1919
let useCustomGrouping = false;
20-
let isExpanded = false;
2120
2221
$: groupColumnError = errors.sequence_filter?.group_column_attnums?.[0];
2322
$: defaultGroupColumns = selectedTable?.default_group_columns || [];
@@ -60,18 +59,22 @@
6059
.join(", ")}`
6160
: selectedTable?.is_event_table
6261
? "Using source_database_id, source_table_oid, and record_pk for grouping, which is the default"
63-
: "Using primary keys for grouping, which is the default";
62+
: defaultGroupColumns.length === 0
63+
? "No primary keys available. Custom grouping is required."
64+
: "Using primary keys for grouping, which is the default";
6465
</script>
6566

6667
<!-- Edit Mode Card -->
6768
{#if isEditMode}
68-
<Card>
69-
<CardHeader>
70-
<div class="flex items-center justify-between">
71-
<CardTitle>Message grouping</CardTitle>
72-
</div>
73-
</CardHeader>
74-
<CardContent>
69+
<ExpandableCard
70+
disabled={true}
71+
titleTooltip="Message grouping can’t be changed for an active sink."
72+
>
73+
<svelte:fragment slot="title">
74+
<CardTitle>Message grouping</CardTitle>
75+
</svelte:fragment>
76+
77+
<svelte:fragment slot="summary">
7578
{#if !useCustomGrouping && !selectedTable.is_event_table}
7679
<p class="text-sm text-muted-foreground">
7780
Using primary keys for grouping.
@@ -83,16 +86,26 @@
8386
readonly={true}
8487
/>
8588
{/if}
86-
</CardContent>
87-
</Card>
89+
</svelte:fragment>
90+
</ExpandableCard>
8891

8992
<!-- Create Mode - No PKs Available -->
9093
{:else if selectedTable && defaultGroupColumns.length === 0}
91-
<Card>
92-
<CardHeader>
94+
<ExpandableCard
95+
expanded={!isEditMode}
96+
disabled={defaultGroupColumns.length === 0}
97+
>
98+
<svelte:fragment slot="title">
9399
<CardTitle>Message grouping</CardTitle>
94-
</CardHeader>
95-
<CardContent>
100+
</svelte:fragment>
101+
102+
<svelte:fragment slot="summary">
103+
<p class="text-sm text-muted-foreground">
104+
{summaryText}
105+
</p>
106+
</svelte:fragment>
107+
108+
<svelte:fragment slot="content">
96109
<p class="text-sm text-info mb-4">
97110
No primary keys available. Custom grouping is required.
98111
</p>
@@ -104,16 +117,14 @@
104117
{#if groupColumnError}
105118
<p class="text-destructive text-sm mt-2">{groupColumnError}</p>
106119
{/if}
107-
</CardContent>
108-
</Card>
120+
</svelte:fragment>
121+
</ExpandableCard>
109122

110123
<!-- Create Mode - Normal -->
111124
{:else}
112-
<ExpandableCard disabled={!selectedTable} expanded={!isEditMode}>
125+
<ExpandableCard disabled={!selectedTable}>
113126
<svelte:fragment slot="title">
114-
<div class="flex items-center justify-between">
115-
<CardTitle>Message grouping</CardTitle>
116-
</div>
127+
<CardTitle>Message grouping</CardTitle>
117128
</svelte:fragment>
118129

119130
<svelte:fragment slot="summary">

‎assets/svelte/consumers/SinkConsumerForm.svelte‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -354,15 +354,19 @@
354354
});
355355
}
356356
357-
let backfillSectionExpanded = false;
358357
let showMessageTypeExampleModal = false;
359358
let selectedExampleType: "change" | "record" = "change";
360359
361360
let transformSectionEnabled = false;
361+
let transformSectionExpanded = false;
362362
let backfillSectionEnabled = false;
363+
let backfillSectionExpanded = false;
363364
$: {
364365
transformSectionEnabled = selectedTable && consumer.type !== "redis_stream";
366+
transformSectionExpanded = transformSectionEnabled && !isEditMode;
367+
365368
backfillSectionEnabled = selectedTable && !isEditMode;
369+
backfillSectionExpanded = backfillSectionEnabled && !isEditMode;
366370
}
367371
368372
let transformRefreshState: "idle" | "refreshing" | "done" = "idle";
@@ -521,7 +525,10 @@
521525
</CardContent>
522526
</Card>
523527

524-
<ExpandableCard disabled={!transformSectionEnabled} expanded={!isEditMode}>
528+
<ExpandableCard
529+
disabled={!transformSectionEnabled}
530+
expanded={transformSectionExpanded}
531+
>
525532
<svelte:fragment slot="title">
526533
Transforms
527534
<Tooltip.Root openDelay={200}>
@@ -582,7 +589,10 @@
582589
</ExpandableCard>
583590

584591
{#if !isEditMode}
585-
<ExpandableCard disabled={!backfillSectionEnabled} expanded={!isEditMode}>
592+
<ExpandableCard
593+
disabled={!backfillSectionEnabled}
594+
expanded={!isEditMode && backfillSectionEnabled}
595+
>
586596
<svelte:fragment slot="title">
587597
Initial backfill
588598

0 commit comments

Comments
 (0)