From 9a02248df10006ecd8c0abe59bf3672cacfc9554 Mon Sep 17 00:00:00 2001 From: Harsh Mahajan Date: Fri, 27 Mar 2026 11:34:29 +0530 Subject: [PATCH 1/5] fix: upload inv ux and pagination --- src/lib/components/cardGrid.svelte | 30 +++++++++++-- .../variables/importVariablesModal.svelte | 44 ++++++++++++------- .../settings/updateInstallations.svelte | 17 ++++++- .../uploadVariablesModal.svelte | 40 +++++++++++++---- 4 files changed, 101 insertions(+), 30 deletions(-) diff --git a/src/lib/components/cardGrid.svelte b/src/lib/components/cardGrid.svelte index d378a9c66..c45d112fe 100644 --- a/src/lib/components/cardGrid.svelte +++ b/src/lib/components/cardGrid.svelte @@ -8,8 +8,8 @@ - - +
+ {#if $$slots.default} @@ -17,12 +17,12 @@ {/if} -
+
- +
{#if $$slots.actions && !hideFooter} @@ -34,3 +34,25 @@ {/if} + + diff --git a/src/lib/components/variables/importVariablesModal.svelte b/src/lib/components/variables/importVariablesModal.svelte index db776b05d..9368d4d4f 100644 --- a/src/lib/components/variables/importVariablesModal.svelte +++ b/src/lib/components/variables/importVariablesModal.svelte @@ -6,6 +6,7 @@ import { IconInfo } from '@appwrite.io/pink-icons-svelte'; import { Icon, Layout, Selector, Tooltip, Typography, Upload } from '@appwrite.io/pink-svelte'; import { parse } from '$lib/helpers/envfile'; + import { removeFile } from '$lib/helpers/files'; export let show = false; export let variables: Partial[]; @@ -13,6 +14,15 @@ let files: FileList; let error: string; let secret = false; + $: filesList = files?.length + ? Array.from(files).map((file) => ({ + ...file, + name: file.name, + size: file.size, + extension: file.type, + removable: true + })) + : []; async function handleSubmit() { try { @@ -52,28 +62,32 @@ - - + + Drag and drop files here or click to upload - - - - + + + + Only .env files allowed + - - Only .env files allowed - - + - + Up to 100 variables allowed + {#if files?.length} + (files = removeFile(e.detail, files))} /> + {/if} {#if variables?.length > 0} This action can create and update variables but can not delete them. diff --git a/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte b/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte index 8cb2cb9f8..5d61cf6a4 100644 --- a/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte +++ b/src/routes/(console)/project-[region]-[project]/settings/updateInstallations.svelte @@ -84,7 +84,7 @@ {#if total > 0} - +
Add installation - +
+ + diff --git a/src/routes/(console)/project-[region]-[project]/uploadVariablesModal.svelte b/src/routes/(console)/project-[region]-[project]/uploadVariablesModal.svelte index 93ef85bb9..5cf19fe9d 100644 --- a/src/routes/(console)/project-[region]-[project]/uploadVariablesModal.svelte +++ b/src/routes/(console)/project-[region]-[project]/uploadVariablesModal.svelte @@ -15,6 +15,7 @@ Upload } from '@appwrite.io/pink-svelte'; import { parse } from '$lib/helpers/envfile'; + import { removeFile } from '$lib/helpers/files'; export let show = false; export let variableList: Models.VariableList; @@ -33,6 +34,15 @@ let files: FileList; let secret = false; let error: string; + $: filesList = files?.length + ? Array.from(files).map((file) => ({ + ...file, + name: file.name, + size: file.size, + extension: file.type, + removable: true + })) + : []; async function handleSubmit() { try { @@ -87,21 +97,33 @@ - - + + Drag and drop files here or click to upload - - - - + + + + Only .env files allowed + - Only .env files allowed - + - Up to 100 variables allowed + + Up to 100 variables allowed + + {#if files?.length} + (files = removeFile(e.detail, files))} /> + {/if} {#if variableList.total > 0} From efd7cdb6e2c1b03185ffb8ac11974cf634ba1df3 Mon Sep 17 00:00:00 2001 From: Harsh Mahajan Date: Fri, 27 Mar 2026 11:39:55 +0530 Subject: [PATCH 2/5] fix: title --- .../project-[region]-[project]/createVariableModal.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/(console)/project-[region]-[project]/createVariableModal.svelte b/src/routes/(console)/project-[region]-[project]/createVariableModal.svelte index 0cf5fa213..13f9544d2 100644 --- a/src/routes/(console)/project-[region]-[project]/createVariableModal.svelte +++ b/src/routes/(console)/project-[region]-[project]/createVariableModal.svelte @@ -49,7 +49,7 @@ + title={`Create ${isGlobal ? 'global' : 'environment'} variables`}> Set the environment variables or secret keys that will be passed to {!isGlobal From 141121f3f13f6022cadd407e2beac53e23ccaa9f Mon Sep 17 00:00:00 2001 From: Harsh Mahajan Date: Fri, 27 Mar 2026 12:17:30 +0530 Subject: [PATCH 3/5] fixed table in mobile view --- .../variables/environmentVariables.svelte | 23 +++++++++++------ .../updateVariables.svelte | 25 ++++++++++++------- 2 files changed, 32 insertions(+), 16 deletions(-) diff --git a/src/lib/components/variables/environmentVariables.svelte b/src/lib/components/variables/environmentVariables.svelte index 8b4edb8c3..0e6cb6ec9 100644 --- a/src/lib/components/variables/environmentVariables.svelte +++ b/src/lib/components/variables/environmentVariables.svelte @@ -31,6 +31,7 @@ import DeleteVariableModal from './deleteVariableModal.svelte'; import UpdateVariableModal from './updateVariableModal.svelte'; import { Click, trackEvent } from '$lib/actions/analytics'; + import { isSmallViewport } from '$lib/stores/viewport'; const DOCS_LINKS: Record = { site: 'https://appwrite.io/docs/products/sites/develop#accessing-environment-variables', @@ -62,19 +63,27 @@ const createSource = $derived(analyticsCreateSource || analyticsSource); const docsLink = $derived(DOCS_LINKS[productLabel]); - const tableColumns = [ - { id: 'key', width: { min: 300 } }, - { id: 'value', width: { min: 280 } }, - { id: 'actions', width: 40 } - ]; + const tableColumns = $derived( + $isSmallViewport + ? [ + { id: 'key', width: { min: 360 } }, + { id: 'value', width: { min: 220 } }, + { id: 'actions', width: 40 } + ] + : [ + { id: 'key', width: { min: 300 } }, + { id: 'value', width: { min: 280 } }, + { id: 'actions', width: 40 } + ] + ); Set up environment variables to securely manage keys and settings for your project. - - + +