From b9514970742fc5d9f375a18ad7ca151d8643830a Mon Sep 17 00:00:00 2001
From: Arman <arman@appwrite.io>
Date: Thu, 10 Aug 2023 22:07:18 +0200
Subject: [PATCH] fix: create deployment dropdown

---
 src/lib/commandCenter/searchers/functions.ts  |  4 +-
 .../function-[function]/+layout.svelte        |  5 +--
 .../function-[function]/+page.svelte          | 41 ++++++++++---------
 .../function-[function]/create.svelte         | 24 +++++++----
 .../function-[function]/createManual.svelte   |  2 +-
 .../functions/function-[function]/store.ts    |  2 +
 6 files changed, 46 insertions(+), 32 deletions(-)

diff --git a/src/lib/commandCenter/searchers/functions.ts b/src/lib/commandCenter/searchers/functions.ts
index f9626a9aa..cb5f23646 100644
--- a/src/lib/commandCenter/searchers/functions.ts
+++ b/src/lib/commandCenter/searchers/functions.ts
@@ -5,7 +5,7 @@ import { get } from 'svelte/store';
 import type { Searcher } from '../commands';
 import type { Models } from '@appwrite.io/console';
 import { page } from '$app/stores';
-import { showCreateDeployment } from '$routes/console/project-[project]/functions/function-[function]/+page.svelte';
+import { showCreateDeployment } from '$routes/console/project-[project]/functions/function-[function]/store';
 
 const getFunctionCommand = (fn: Models.Function, projectId: string) => {
     return {
@@ -37,7 +37,7 @@ export const functionsSearcher = (async (query: string) => {
                     if (!$page.url.pathname.endsWith(func.$id)) {
                         await goto(`/console/project-${projectId}/functions/function-${func.$id}`);
                     }
-                    showCreateDeployment();
+                    showCreateDeployment.set(true);
                 },
                 group: 'functions',
                 icon: 'plus'
diff --git a/src/routes/console/project-[project]/functions/function-[function]/+layout.svelte b/src/routes/console/project-[project]/functions/function-[function]/+layout.svelte
index 46c1233ba..c12446590 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/+layout.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/+layout.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-    import { execute, func } from './store';
+    import { execute, func, showCreateDeployment } from './store';
     import Execute from './execute.svelte';
     import { registerCommands } from '$lib/commandCenter';
     import { goto } from '$app/navigation';
     import { project } from '../../store';
     import { page } from '$app/stores';
-    import { showCreateDeployment } from './+page.svelte';
 
     $: $registerCommands([
         {
@@ -14,7 +13,7 @@
                 if (!$page.url.pathname.endsWith($func.$id)) {
                     await goto(`/console/project-${$project.$id}/functions/function-${$func.$id}`);
                 }
-                showCreateDeployment();
+                showCreateDeployment.set(true);
             },
             keys: $page.url.pathname.endsWith($func.$id) ? ['c'] : ['c', 'd'],
             group: 'functions',
diff --git a/src/routes/console/project-[project]/functions/function-[function]/+page.svelte b/src/routes/console/project-[project]/functions/function-[function]/+page.svelte
index beed84123..1cd79d11d 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/+page.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/+page.svelte
@@ -1,10 +1,3 @@
-<script lang="ts" context="module">
-    let showCreate = writable(false);
-    export const showCreateDeployment = () => {
-        showCreate.set(true);
-    };
-</script>
-
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { base } from '$app/paths';
@@ -49,7 +42,6 @@
     import RedeployModal from './redeployModal.svelte';
     import DeploymentSource from './deploymentSource.svelte';
     import DeploymentCreatedBy from './deploymentCreatedBy.svelte';
-    import { writable } from 'svelte/store';
 
     export let data: PageData;
 
@@ -82,7 +74,7 @@
 <Container>
     <div class="u-flex u-gap-12 common-section u-main-space-between">
         <Heading tag="h2" size="5">Deployments</Heading>
-        <Create bind:showCreate={$showCreate} />
+        <Create main />
     </div>
     {#if data.deployments.total}
         <div class="common-section">
@@ -180,7 +172,7 @@
                 single
                 href="https://appwrite.io/docs/functions#createFunction"
                 target="deployment"
-                on:click={() => showCreate.set(true)} />
+                on:click />
         {/if}
 
         <div class="common-section">
@@ -297,7 +289,7 @@
                 </TableBody>
             </TableScroll>
         {:else}
-            <Empty single target="deployment" on:click={() => showCreate.set(true)}>
+            <Empty single target="deployment" on:click>
                 <div class="u-text-center">
                     <Heading size="7" tag="h2"
                         >You have no deployments. Create one to see it here.</Heading>
@@ -312,18 +304,29 @@
                         text
                         event="empty_documentation"
                         ariaLabel={`create {target}`}>Documentation</Button>
-                    <Button secondary on:click={() => showCreate.set(true)}>
-                        Create deployment
-                    </Button>
+                    <Button secondary on:click>Create deployment</Button>
+                    <Create />
                 </div>
             </Empty>
         {/if}
     {:else}
-        <Empty
-            single
-            target="deployment"
-            href="https://appwrite.io/docs/functions#createFunction"
-            on:click={() => showCreate.set(true)} />
+        <Empty single target="deployment" on:click>
+            <div class="u-text-center">
+                <Heading size="7" tag="h2">Create your first deployment to get started.</Heading>
+                <p class="body-text-2 u-bold u-margin-block-start-4">
+                    Learn more about deployments in our Documentation.
+                </p>
+            </div>
+            <div class="u-flex u-gap-16 u-main-center">
+                <Button
+                    external
+                    href="https://appwrite.io/docs/functions#createFunction"
+                    text
+                    event="empty_documentation"
+                    ariaLabel={`create {target}`}>Documentation</Button>
+                <Create secondary />
+            </div>
+        </Empty>
     {/if}
     {@const sum = data.deployments.total ? data.deployments.total - 1 : 0}
 
diff --git a/src/routes/console/project-[project]/functions/function-[function]/create.svelte b/src/routes/console/project-[project]/functions/function-[function]/create.svelte
index 3bf98ad2c..4a7c87b15 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/create.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/create.svelte
@@ -4,33 +4,43 @@
     import CreateCli from './createCli.svelte';
     import CreateGit from './createGit.svelte';
     import CreateManual from './createManual.svelte';
+    import { showCreateDeployment } from './store';
 
-    export let showCreate = false;
+    export let secondary = false;
+    // This allows us to know which one to open when the user uses the shortcut in the command center
+    export let main = false;
+    let show = false;
     let showCreateCli = false;
     let showCreateGit = false;
     let showCreateManual = false;
+
+    $: if ($showCreateDeployment && main) {
+        show = true;
+    }
 </script>
 
-<DropList bind:show={showCreate} placement="bottom-end">
-    <Button on:click={() => (showCreate = true)} event="create_deployment">
-        <span class="icon-plus" aria-hidden="true" />
+<DropList bind:show placement="bottom-end">
+    <Button {secondary} on:click={() => (show = !show)} event="create_deployment">
+        {#if !secondary}
+            <span class="icon-plus" aria-hidden="true" />
+        {/if}
         <span class="text">Create deployment</span>
     </Button>
     <svelte:fragment slot="list">
         <DropListItem
             on:click={() => {
                 showCreateGit = true;
-                showCreate = false;
+                show = false;
             }}>Git</DropListItem>
         <DropListItem
             on:click={() => {
                 showCreateCli = true;
-                showCreate = false;
+                show = false;
             }}>CLI</DropListItem>
         <DropListItem
             on:click={() => {
                 showCreateManual = true;
-                showCreate = false;
+                show = false;
             }}>Manual</DropListItem>
     </svelte:fragment>
 </DropList>
diff --git a/src/routes/console/project-[project]/functions/function-[function]/createManual.svelte b/src/routes/console/project-[project]/functions/function-[function]/createManual.svelte
index f0d8249bf..136588a97 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/createManual.svelte
+++ b/src/routes/console/project-[project]/functions/function-[function]/createManual.svelte
@@ -49,7 +49,7 @@
 </script>
 
 <Modal {error} size="big" bind:show onSubmit={create}>
-    <svelte:fragment slot="header">Create Deployment</svelte:fragment>
+    <svelte:fragment slot="header">Create deployment</svelte:fragment>
     <FormList>
         <InputFile
             label="Gzipped code (tar.gz)"
diff --git a/src/routes/console/project-[project]/functions/function-[function]/store.ts b/src/routes/console/project-[project]/functions/function-[function]/store.ts
index 597fae82b..eebbdee38 100644
--- a/src/routes/console/project-[project]/functions/function-[function]/store.ts
+++ b/src/routes/console/project-[project]/functions/function-[function]/store.ts
@@ -13,3 +13,5 @@ export const repositories: Writable<{
     installationId: '',
     repositories: []
 });
+
+export const showCreateDeployment: Writable<boolean> = writable(false);