add alert to bulk editor

This commit is contained in:
Arman
2025-02-14 16:20:42 +01:00
parent 0774fc9be7
commit 181c743db2
@@ -9,6 +9,8 @@
import { IconDownload, IconDuplicate } from '@appwrite.io/pink-icons-svelte';
import { InputTextarea } from '$lib/elements/forms';
import type { Models } from '@appwrite.io/console';
import Alert from '$lib/components/alert.svelte';
import { Link } from '$lib/elements';
export let showEditor = false;
export let variables: Partial<Models.Variable>[];
@@ -130,42 +132,51 @@
bind:error
submitOnEnter={false}>
<p slot="description">Add, edit, or delete environment variables using a raw editor.</p>
<Layout.Stack gap="s">
<Tabs.Root stretch let:root>
<Tabs.Item.Button {root} on:click={() => (tab = 'env')} active={tab === 'env'}>
ENV
</Tabs.Item.Button>
<Tabs.Item.Button {root} on:click={() => (tab = 'json')} active={tab === 'json'}>
JSON
</Tabs.Item.Button>
</Tabs.Root>
<Layout.Stack gap="xxs">
{#if tab === 'env'}
<InputTextarea
id="variables"
bind:value={envCode}
rows={10}
placeholder={`SECRET_KEY=dQw4w9WgXcQ...`} />
{:else if tab === 'json'}
<InputTextarea
id="variables"
bind:value={jsonCode}
rows={10}
placeholder={`{\n "SECRET_KEY": "dQw4w9WgXcQ..."\n}`} />
{/if}
<Layout.Stack direction="row">
<Button size="xs" on:click={() => downloadVariables()} compact>
<Icon slot="start" icon={IconDownload} />
Download
</Button>
<Layout.Stack gap="l">
{#if secretVariables?.length > 0}
<Alert type="info" dismissible>
{secretVariables.length} secret variables are hidden from the editor. Their values will
remain unchanged. <Link href="#" variant="muted">Learn more</Link>.
</Alert>
{/if}
<Layout.Stack gap="s">
<Tabs.Root stretch let:root>
<Tabs.Item.Button {root} on:click={() => (tab = 'env')} active={tab === 'env'}>
ENV
</Tabs.Item.Button>
<Tabs.Item.Button {root} on:click={() => (tab = 'json')} active={tab === 'json'}>
JSON
</Tabs.Item.Button>
</Tabs.Root>
<Copy value={tab == 'json' ? jsonCode : envCode}>
<Button size="xs" compact>
<Icon slot="start" icon={IconDuplicate} />
Copy
<Layout.Stack gap="xxs">
{#if tab === 'env'}
<InputTextarea
id="variables"
bind:value={envCode}
rows={10}
placeholder={`SECRET_KEY=dQw4w9WgXcQ...`} />
{:else if tab === 'json'}
<InputTextarea
id="variables"
bind:value={jsonCode}
rows={10}
placeholder={`{\n "SECRET_KEY": "dQw4w9WgXcQ..."\n}`} />
{/if}
<Layout.Stack direction="row">
<Button size="xs" on:click={() => downloadVariables()} compact>
<Icon slot="start" icon={IconDownload} />
Download
</Button>
</Copy>
<Copy value={tab == 'json' ? jsonCode : envCode}>
<Button size="xs" compact>
<Icon slot="start" icon={IconDuplicate} />
Copy
</Button>
</Copy>
</Layout.Stack>
</Layout.Stack>
</Layout.Stack>
</Layout.Stack>