Skip to content

Commit 82e329f

Browse files
davoclavodavoclavo
authored
fix: improve full page forms to avoid using a modal (#1395)
1 parent f2c9b10 commit 82e329f

File tree

13 files changed

+359
-378
lines changed

13 files changed

+359
-378
lines changed

‎assets/svelte/components/CodeWithCopy.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,10 @@
1111
</script>
1212

1313
<div
14-
class={`flex flex-row bg-muted p-4 rounded-md overflow-hidden ${codeClass}`}
14+
class={`flex flex-row bg-muted rounded-md overflow-hidden ${codeClass}`}
1515
style="max-width: {maxWidth}"
1616
>
17-
<pre class="text-sm overflow-x-auto flex flex-grow"><code class={language}
17+
<pre class="p-4 text-sm overflow-x-auto flex flex-grow"><code class={language}
1818
>{codeContent}</code
1919
>
2020
</pre>

assets/svelte/components/FullPageModal.svelte renamed to assets/svelte/components/FullPageForm.svelte

Lines changed: 34 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
<script lang="ts">
2-
import * as Dialog from "$lib/components/ui/dialog";
32
import { Button } from "$lib/components/ui/button";
43
import * as AlertDialog from "$lib/components/ui/alert-dialog";
54
import { createEventDispatcher, onMount, onDestroy } from "svelte";
65
76
export let title: string = "";
8-
export let open = true;
9-
export let showConfirmDialog = false;
10-
export let showConfirmOnExit = false;
11-
export let bodyPadding = 6;
7+
let showConfirmDialog = false;
8+
export let showConfirmOnExit = true;
129
1310
const dispatch = createEventDispatcher();
1411
@@ -20,17 +17,16 @@
2017
if (showConfirmOnExit) {
2118
showConfirmDialog = true;
2219
} else {
23-
open = false;
2420
dispatch("close");
2521
}
2622
}
2723
}
2824
2925
$: {
30-
if (open && !listening) {
26+
if (!listening) {
3127
window.addEventListener("keydown", handleEscapeKey);
3228
listening = true;
33-
} else if (!open && listening) {
29+
} else {
3430
window.removeEventListener("keydown", handleEscapeKey);
3531
listening = false;
3632
}
@@ -47,7 +43,6 @@
4743
4844
function confirmClose() {
4945
showConfirmDialog = false;
50-
open = false;
5146
dispatch("close");
5247
}
5348
@@ -56,54 +51,40 @@
5651
}
5752
</script>
5853

59-
<Dialog.Root bind:open preventScroll={false} closeOnEscape={false}>
60-
<Dialog.Portal>
61-
<Dialog.Content
62-
closeButton={false}
63-
class="w-full h-full max-w-full max-h-full min-h-screen"
64-
>
65-
<div id="full-page-modal"></div>
66-
<div class="flex flex-col h-full bg-background">
67-
<div class="flex justify-between items-center p-6 border-b">
68-
{#if $$slots.header}
69-
<slot name="header" />
70-
{:else}
71-
<Dialog.Title class="text-2xl font-semibold">{title}</Dialog.Title>
72-
{/if}
54+
<div class="fixed inset-0 bg-background">
55+
<div class="flex flex-col h-full overflow-y-auto">
56+
<div class="flex justify-between items-center p-6 border-b">
57+
{#if $$slots.header}
58+
<slot name="header" />
59+
{:else}
60+
<h2 class="text-2xl font-semibold">{title}</h2>
61+
{/if}
7362

74-
<Dialog.Close asChild>
75-
<Button
76-
variant="outline"
77-
on:click={() => {
78-
if (showConfirmOnExit) {
79-
showConfirmDialog = true;
80-
} else {
81-
open = false;
82-
dispatch("close");
83-
}
84-
}}
85-
>
86-
Exit
87-
</Button>
88-
</Dialog.Close>
89-
</div>
63+
<Button
64+
variant="outline"
65+
on:click={() => {
66+
if (showConfirmOnExit) {
67+
showConfirmDialog = true;
68+
} else {
69+
dispatch("close");
70+
}
71+
}}
72+
>
73+
Exit
74+
</Button>
75+
</div>
9076

91-
<div
92-
class="flex-grow overflow-y-auto"
93-
style="padding: {bodyPadding}px;"
94-
>
95-
<slot />
96-
</div>
77+
<div class="pt-8 pb-12">
78+
<slot />
79+
</div>
9780

98-
{#if $$slots.footer}
99-
<div class="flex-shrink-0 border-t">
100-
<slot name="footer" />
101-
</div>
102-
{/if}
81+
{#if $$slots.footer}
82+
<div class="flex-shrink-0 border-t">
83+
<slot name="footer" />
10384
</div>
104-
</Dialog.Content>
105-
</Dialog.Portal>
106-
</Dialog.Root>
85+
{/if}
86+
</div>
87+
</div>
10788

10889
<AlertDialog.Root bind:open={showConfirmDialog}>
10990
<AlertDialog.Content>

‎assets/svelte/consumers/GroupColumnsForm.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@
109109

110110
<!-- Create Mode - Normal -->
111111
{:else}
112-
<ExpandableCard disabled={!selectedTable}>
112+
<ExpandableCard disabled={!selectedTable} expanded={!isEditMode}>
113113
<svelte:fragment slot="title">
114114
<div class="flex items-center justify-between">
115115
<CardTitle>Message grouping</CardTitle>

‎assets/svelte/consumers/SinkConsumerForm.svelte‎

Lines changed: 32 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
ExpandableCard,
1717
} from "$lib/components/ui/card";
1818
import { Label } from "$lib/components/ui/label";
19-
import FullPageModal from "../components/FullPageModal.svelte";
19+
import FullPageForm from "../components/FullPageForm.svelte";
2020
import { cn } from "$lib/utils";
2121
import FilterForm from "../components/FilterForm.svelte";
2222
import GroupColumnsForm from "./GroupColumnsForm.svelte";
@@ -37,6 +37,7 @@
3737
import ElasticsearchSinkForm from "$lib/sinks/elasticsearch/ElasticsearchSinkForm.svelte";
3838
import * as Alert from "$lib/components/ui/alert/index.js";
3939
import TableSelector from "../components/TableSelector.svelte";
40+
import * as Tooltip from "$lib/components/ui/tooltip";
4041
import * as Popover from "$lib/components/ui/popover";
4142
import * as Dialog from "$lib/components/ui/dialog";
4243
import MessageExamples from "$lib/components/MessageExamples.svelte";
@@ -253,8 +254,6 @@
253254
}
254255
255256
const isEditMode = !!consumer.id;
256-
let dialogOpen = true;
257-
let showConfirmDialog = false;
258257
259258
function handleConsumerSubmit() {
260259
isSubmitting = true;
@@ -382,16 +381,14 @@
382381
const exampleUnixMicrosecondTimestamp = 1704086400000000;
383382
</script>
384383

385-
<FullPageModal
384+
<FullPageForm
386385
title={isEditMode ? `Edit ${consumerTitle}` : `Create ${consumerTitle}`}
387-
bind:open={dialogOpen}
388-
bind:showConfirmDialog
389386
showConfirmOnExit={isDirty}
390387
on:close={handleClose}
391388
>
392389
<form
393390
on:submit|preventDefault={handleConsumerSubmit}
394-
class="space-y-6 max-w-3xl mx-auto mt-6"
391+
class="space-y-6 max-w-3xl mx-auto"
395392
>
396393
<Card>
397394
<CardHeader>
@@ -527,29 +524,17 @@
527524
<ExpandableCard disabled={!transformSectionEnabled} expanded={!isEditMode}>
528525
<svelte:fragment slot="title">
529526
Transforms
530-
<button on:click|stopPropagation>
531-
<Popover.Root>
532-
<Popover.Trigger asChild let:builder>
533-
<Button
534-
builders={[builder]}
535-
variant="link"
536-
class="text-muted-foreground hover:text-foreground p-0"
537-
>
538-
<Info class="h-4 w-4" />
539-
</Button>
540-
</Popover.Trigger>
541-
<Popover.Content class="w-80">
542-
<div class="grid gap-4">
543-
<div class="space-y-2">
544-
<p class="text-sm text-muted-foreground font-normal">
545-
Transform your messages before they are sent to the sink
546-
destination.
547-
</p>
548-
</div>
549-
</div>
550-
</Popover.Content>
551-
</Popover.Root>
552-
</button>
527+
<Tooltip.Root openDelay={200}>
528+
<Tooltip.Trigger>
529+
<Info class="h-4 w-4 text-gray-400 cursor-help" />
530+
</Tooltip.Trigger>
531+
<Tooltip.Content class="p-4 max-w-xs">
532+
<p class="text-sm text-muted-foreground font-normal">
533+
Transform your messages before they are sent to the sink
534+
destination.
535+
</p>
536+
</Tooltip.Content>
537+
</Tooltip.Root>
553538
<Beta size="sm" variant="subtle" />
554539
</svelte:fragment>
555540

@@ -601,35 +586,23 @@
601586
<svelte:fragment slot="title">
602587
Initial backfill
603588

604-
<button on:click|stopPropagation>
605-
<Popover.Root>
606-
<Popover.Trigger asChild let:builder>
607-
<Button
608-
builders={[builder]}
609-
variant="link"
610-
class="text-muted-foreground hover:text-foreground p-0"
589+
<Tooltip.Root openDelay={200}>
590+
<Tooltip.Trigger>
591+
<Info class="h-4 w-4 text-gray-400 cursor-help" />
592+
</Tooltip.Trigger>
593+
<Tooltip.Content class="p-4 max-w-xs">
594+
<p class="text-sm text-muted-foreground font-normal">
595+
Sequin will run an initial <a
596+
href="https://sequinstream.com/docs/reference/backfills"
597+
target="_blank"
598+
rel="noopener noreferrer"
599+
class="text-primary underline"
611600
>
612-
<Info class="h-4 w-4" />
613-
</Button>
614-
</Popover.Trigger>
615-
<Popover.Content class="w-80">
616-
<div class="grid gap-4">
617-
<div class="space-y-2">
618-
<p class="text-sm text-muted-foreground font-normal">
619-
Sequin will run an initial <a
620-
href="https://sequinstream.com/docs/reference/backfills"
621-
target="_blank"
622-
rel="noopener noreferrer"
623-
class="text-primary underline"
624-
>
625-
backfill
626-
</a> of data from the selected table to the sink destination.
627-
</p>
628-
</div>
629-
</div>
630-
</Popover.Content>
631-
</Popover.Root>
632-
</button>
601+
backfill
602+
</a> of data from the selected table to the sink destination.
603+
</p>
604+
</Tooltip.Content>
605+
</Tooltip.Root>
633606
</svelte:fragment>
634607

635608
<svelte:fragment slot="summary">
@@ -928,7 +901,7 @@
928901
</CardContent>
929902
</Card>
930903
</form>
931-
</FullPageModal>
904+
</FullPageForm>
932905

933906
<Dialog.Root bind:open={showMessageTypeExampleModal}>
934907
<Dialog.Portal>

‎assets/svelte/databases/Form.svelte‎

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
22
import { onMount } from "svelte";
33
import { slide, fade } from "svelte/transition";
4-
import FullPageModal from "../components/FullPageModal.svelte";
4+
import FullPageForm from "../components/FullPageForm.svelte";
55
import { Button } from "$lib/components/ui/button";
66
import { Input } from "$lib/components/ui/input";
77
import { Label } from "$lib/components/ui/label";
@@ -172,8 +172,6 @@
172172
}
173173
}
174174
175-
let dialogOpen = true;
176-
let showConfirmDialog = false;
177175
let validating = false;
178176
179177
const progress = tweened(0, { duration: 10000, easing: cubicOut });
@@ -318,22 +316,17 @@ sequin tunnel --ports=[your-local-port]:${form.name}`;
318316
}
319317
</script>
320318

321-
<FullPageModal
322-
title="Connect Database"
323-
bind:open={dialogOpen}
324-
bind:showConfirmDialog
325-
on:close={handleClose}
326-
>
327-
<form on:submit={handleSubmit} class="space-y-6 max-w-3xl mx-auto mt-6">
319+
<FullPageForm title="Connect Database" on:close={handleClose}>
320+
<form on:submit={handleSubmit} class="space-y-6 max-w-3xl mx-auto">
328321
<Card>
329322
<CardHeader class="flex flex-row items-center">
330323
<CardTitle class="flex-grow">Database connection details</CardTitle>
331324
</CardHeader>
332325
<CardContent class="space-y-4">
333326
<div class="flex items-center space-x-2 mb-2">
334327
<Popover bind:open={popoverOpen}>
335-
<PopoverTrigger>
336-
<Button variant="magic">
328+
<PopoverTrigger asChild let:builder>
329+
<Button variant="magic" builders={[builder]}>
337330
<Wand class="inline-block h-4 w-4 mr-2" /> Autofill with Connection
338331
String
339332
</Button>
@@ -372,15 +365,18 @@ sequin tunnel --ports=[your-local-port]:${form.name}`;
372365
disabled={isEdit}
373366
/>
374367
<Label for="use-localhost">Use localhost</Label>
375-
<Popover>
376-
<PopoverTrigger>
377-
<Info class="w-4 h-4 text-muted-foreground" />
378-
</PopoverTrigger>
379-
<PopoverContent>
380-
You can use the Sequin CLI to connect Sequin to a database
381-
running on your local machine.
382-
</PopoverContent>
383-
</Popover>
368+
369+
<Tooltip.Root openDelay={200}>
370+
<Tooltip.Trigger>
371+
<Info class="h-4 w-4 text-gray-400 cursor-help" />
372+
</Tooltip.Trigger>
373+
<Tooltip.Content class="p-4 max-w-xs">
374+
<p class="text-sm text-muted-foreground font-normal">
375+
You can use the Sequin CLI to connect Sequin to a database
376+
running on your local machine.
377+
</p>
378+
</Tooltip.Content>
379+
</Tooltip.Root>
384380
{/if}
385381
</div>
386382
</div>
@@ -899,4 +895,4 @@ sequin tunnel --ports=[your-local-port]:${form.name}`;
899895
</CardContent>
900896
</Card>
901897
</form>
902-
</FullPageModal>
898+
</FullPageForm>

0 commit comments

Comments
 (0)