From 181c743db214da71e6aa69ce99d60568596a3d32 Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Fri, 14 Feb 2025 16:20:42 +0100
Subject: [PATCH] add alert to bulk editor

---
 .../create-site/variableEditorModal.svelte    | 77 +++++++++++--------
 1 file changed, 44 insertions(+), 33 deletions(-)

diff --git a/src/routes/(console)/project-[project]/sites/create-site/variableEditorModal.svelte b/src/routes/(console)/project-[project]/sites/create-site/variableEditorModal.svelte
index dbf9eee8b..0238cf2cf 100644
--- a/src/routes/(console)/project-[project]/sites/create-site/variableEditorModal.svelte
+++ b/src/routes/(console)/project-[project]/sites/create-site/variableEditorModal.svelte
@@ -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>