Merge pull request #621 from appwrite/fix-deployments-create

fix: deployments empty state create

Author: TorstenDittmann

src/lib/components/empty.svelte

@@ -7,6 +7,7 @@
     import { trackEvent } from '$lib/actions/analytics';
 
     export let single = false;
+    export let noMedia = false;
     export let target: string = null;
     export let href: string = null;
 
@@ -23,17 +24,19 @@
     <article class="card u-grid u-cross-center u-width-full-line common-section">
         <div
             class="u-flex u-flex-vertical u-cross-center u-gap-24 u-width-full-line u-overflow-hidden">
-            <button
-                type="button"
-                on:click|preventDefault
-                on:click={track}
-                aria-label="create {target}">
-                {#if $app.themeInUse === 'dark'}
-                    <img src={EmptyDark} alt="create" aria-hidden="true" width="376" />
-                {:else}
-                    <img src={EmptyLight} alt="create" aria-hidden="true" width="376" />
-                {/if}
-            </button>
+            {#if !noMedia}
+                <button
+                    type="button"
+                    on:click|preventDefault
+                    on:click={track}
+                    aria-label="create {target}">
+                    {#if $app.themeInUse === 'dark'}
+                        <img src={EmptyDark} alt="create" aria-hidden="true" width="376" />
+                    {:else}
+                        <img src={EmptyLight} alt="create" aria-hidden="true" width="376" />
+                    {/if}
+                </button>
+            {/if}
             <slot>
                 <div class="u-text-center">
                     <Heading size="7" tag="h2" trimmed={false}>

src/routes/console/project-[project]/functions/function-[function]/+page.svelte

@@ -152,6 +152,25 @@
                     </div>
                 </svelte:fragment>
             </CardGrid>
+        {:else if $deploymentList.total}
+            <Empty noMedia single>
+                <Create secondary round>
+                    <i class="icon-plus" />
+                </Create>
+                <div class="u-text-center">
+                    <p class="body-text-2 u-margin-block-start-4">
+                        Add a new deployment, or activate an existing one to see your function in
+                        action. <br />Learn more about deployments in our
+                        <a
+                            class="link"
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            href="https://appwrite.io/docs/products/functions/deployment"
+                            >documentation</a
+                        >.
+                    </p>
+                </div>
+            </Empty>
         {:else}
             <Empty single target="deployment">
                 <div class="u-text-center">

src/routes/console/project-[project]/functions/function-[function]/create.svelte

@@ -8,6 +8,7 @@
     import { showCreateDeployment } from './store';
 
     export let secondary = false;
+    export let round = 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;
@@ -23,11 +24,13 @@
 </script>
 
 <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 {secondary} {round} on:click={() => (show = !show)} event="create_deployment">
+        <slot>
+            {#if !secondary}
+                <span class="icon-plus" aria-hidden="true" />
+            {/if}
+            <span class="text">Create deployment</span>
+        </slot>
     </Button>
     <svelte:fragment slot="list">
         <DropListItem