From f3ebccf50c6937ee61df0e723f1fb1ed1780221b Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Sun, 20 Aug 2023 16:02:19 +0200
Subject: [PATCH] fix: settings page

---
 src/lib/components/svgIcon.svelte             | 16 ++++++-
 src/lib/elements/forms/inputSelect.svelte     |  3 +-
 src/lib/elements/forms/inputText.svelte       |  3 +-
 .../function-[function]/settings/+page.ts     |  1 +
 .../settings/executeFunction.svelte           |  2 +-
 .../settings/updateConfiguration.svelte       | 46 +++++++++++++++----
 .../settings/updateRuntime.svelte             |  9 ++--
 7 files changed, 64 insertions(+), 16 deletions(-)

diff --git a/src/lib/components/svgIcon.svelte b/src/lib/components/svgIcon.svelte
index dcc466969..6b3dbb70c 100644
--- a/src/lib/components/svgIcon.svelte
+++ b/src/lib/components/svgIcon.svelte
@@ -4,8 +4,22 @@
     export let name: string;
     export let type: 'color' | 'grayscale' = 'color';
     export let size = 40;
+    export let iconSize: keyof typeof iconSizes = 'medium';
     let className = '';
     export { className as class };
+
+    enum iconSizes {
+        small = '--icon-size-small',
+        medium = '--icon-size-medium',
+        large = '--icon-size-large',
+        xlarge = '--icon-size-extra-large'
+    }
 </script>
 
-<img class={className} width={size} height={size} src={$iconPath(name, type)} alt={name} />
+<img
+    class={className}
+    width={size}
+    height={size}
+    style:inline-size={`var(${iconSizes[iconSize]})`}
+    src={$iconPath(name, type)}
+    alt={name} />
diff --git a/src/lib/elements/forms/inputSelect.svelte b/src/lib/elements/forms/inputSelect.svelte
index db5492479..f55fc25cb 100644
--- a/src/lib/elements/forms/inputSelect.svelte
+++ b/src/lib/elements/forms/inputSelect.svelte
@@ -8,6 +8,7 @@
     export let value: string | number | boolean;
     export let placeholder = '';
     export let required = false;
+    export let hideRequired = false;
     export let disabled = false;
     export let options: {
         value: string | boolean | number;
@@ -46,7 +47,7 @@
 
 <FormItem>
     {#if label}
-        <Label {required} {optionalText} hide={!showLabel} for={id}>
+        <Label {required} {hideRequired} {optionalText} hide={!showLabel} for={id}>
             {label}
         </Label>
     {/if}
diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index 37a86256f..621849dd9 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -12,6 +12,7 @@
     export let value = '';
     export let placeholder = '';
     export let required = false;
+    export let hideRequired = false;
     export let nullable = false;
     export let disabled = false;
     export let readonly = false;
@@ -72,7 +73,7 @@
 
 <svelte:component this={wrapper} {fullWidth}>
     {#if label}
-        <Label {required} {tooltip} {optionalText} hide={!showLabel} for={id}>
+        <Label {required} {hideRequired} {tooltip} {optionalText} hide={!showLabel} for={id}>
             {label}
         </Label>
     {/if}
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.ts b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.ts
index d247c17e9..818c56a6e 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/+page.ts
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/+page.ts
@@ -4,6 +4,7 @@ import type { PageLoad } from './$types';
 
 export const load: PageLoad = async ({ params, depends }) => {
     depends(Dependencies.VARIABLES);
+    depends(Dependencies.FUNCTIONS);
 
     const [globalVariables, variables] = await Promise.all([
         sdk.forProject.projectApi.listVariables(),
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/executeFunction.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/executeFunction.svelte
index 49608fc1e..112bc2758 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/executeFunction.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/executeFunction.svelte
@@ -8,7 +8,7 @@
 <CardGrid>
     <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16">
         <div class="avatar">
-            <SvgIcon name={$func.runtime.split('-')[0]} type="color" size={80} />
+            <SvgIcon name={$func.runtime.split('-')[0]} type="color" size={80} iconSize="large" />
         </div>
         <div class="u-flex-vertical u-gap-4">
             <Heading tag="h6" size="7">{$func.name}</Heading>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte
index 1320b9fd6..84e961f02 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte
@@ -2,7 +2,15 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { AvatarGroup, CardGrid, Collapsible, CollapsibleItem, Heading } from '$lib/components';
+    import {
+        AvatarGroup,
+        CardGrid,
+        Collapsible,
+        CollapsibleItem,
+        EyebrowHeading,
+        Heading,
+        SvgIcon
+    } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import {
         Button,
@@ -167,6 +175,7 @@
             <FormList>
                 <InputText
                     required
+                    hideRequired
                     label="Entrypoint"
                     id="Entrypoint"
                     placeholder="Enter an entrypoint (e.g. 'index.js')"
@@ -190,7 +199,11 @@
                         <svelte:fragment slot="title">
                             <span class="u-margin-inline-end-16">Git settings</span>
                             {#if !repository}
-                                <Pill>NOT CONNECTED</Pill>
+                                <Pill>
+                                    <EyebrowHeading tag="h6" size="3" style="line-height: unset">
+                                        NOT CONNECTED
+                                    </EyebrowHeading>
+                                </Pill>
                             {/if}
                         </svelte:fragment>
                         {#if repository}
@@ -200,7 +213,15 @@
                                         <span class={getProviderIcon(repository.provider)} />
                                     </div>
                                     <div class="u-cross-child-center u-line-height-1-5">
-                                        <h6 class="u-bold u-trim-1">{repository.name}</h6>
+                                        <h6 class="u-bold u-trim-1">
+                                            {repository.name}
+                                            {#if repository.private}
+                                                <span
+                                                    class="icon-lock-closed"
+                                                    style="font-size: var(--icon-size-small)"
+                                                    aria-hidden="true" />
+                                            {/if}
+                                        </h6>
                                         <p>Last updated: {toLocaleDateTime(repository.pushedAt)}</p>
                                     </div>
                                 </div>
@@ -211,6 +232,7 @@
                                             id="branch"
                                             label="Branch"
                                             placeholder="main"
+                                            interactiveOutput
                                             bind:value={selectedBranch}
                                             bind:search={selectedBranch}
                                             on:select={(event) => {
@@ -235,9 +257,11 @@
                                             bind:value={silentMode} />
                                     </FormList>
                                 </div>
-                                <div class="u-margin-block-start-24 u-flex u-gap-16 u-main-end">
-                                    <Button text on:click={() => (showDisconnect = true)}
-                                        >Disconnect repository</Button>
+                                <div
+                                    class="u-margin-block-start-24 u-flex u-gap-16 u-main-end u-flex-wrap">
+                                    <Button text on:click={() => (showDisconnect = true)}>
+                                        Disconnect repository
+                                    </Button>
                                     <Button secondary href={getRepositoryLink(repository)} external>
                                         View on {ProviderNames[repository.provider] ??
                                             'unknown provider'}
@@ -250,11 +274,16 @@
                                 <div class="u-flex u-cross-center u-flex-vertical u-gap-32">
                                     <div class="u-flex u-cross-center u-gap-8">
                                         <AvatarGroup
+                                            bordered
                                             icons={['github', 'gitlab', 'bitBucket', 'azure']} />
 
                                         <span class="icon-arrow-narrow-right" />
-
-                                        <div class="avatar"><span class="icon-appwrite" /></div>
+                                        <div class="avatar">
+                                            <SvgIcon
+                                                name={$func.runtime.split('-')[0]}
+                                                type="grayscale"
+                                                size={80} />
+                                        </div>
                                     </div>
                                     <Button
                                         secondary
@@ -273,6 +302,7 @@
                             label="Commands"
                             placeholder="Enter an install commad (e.g. 'npm install')"
                             id="install"
+                            tooltip="Enter a single command or chain multiple commands with the && operator"
                             bind:value={commands} />
                     </FormList>
                 </CollapsibleItem>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/settings/updateRuntime.svelte b/src/routes/console/project-[project]/functions/function-[function]/settings/updateRuntime.svelte
index ec8c3ca5d..733a3c3f2 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/settings/updateRuntime.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/settings/updateRuntime.svelte
@@ -4,7 +4,7 @@
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { CardGrid, Heading } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, Form } from '$lib/elements/forms';
+    import { Button, Form, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { onMount } from 'svelte';
@@ -67,15 +67,16 @@
         <Heading tag="h6" size="7">Runtime</Heading>
 
         <svelte:fragment slot="aside">
-            <ul>
+            <FormList>
                 <InputSelect
                     label="Runtime"
                     id="runtime"
                     placeholder="Select runtime"
                     bind:value={runtime}
                     {options}
-                    required />
-            </ul>
+                    required
+                    hideRequired />
+            </FormList>
         </svelte:fragment>
 
         <svelte:fragment slot="actions">