fix: id, overview screens

src/lib/actions/analytics.ts

@@ -339,5 +339,6 @@ export enum Submit {
     SiteUpdateSinglePageApplication = 'submit_site_update_single_page_application',
     SiteConnectRepo = 'submit_site_connect_repo',
     SiteRedeploy = 'submit_site_redeploy',
-    SiteDisconnectRepo = 'submit_site_disconnect_repo'
+    SiteDisconnectRepo = 'submit_site_disconnect_repo',
+    SitePromoteDeployment = 'submit_site_promote_deployment'
 }

src/lib/components/id.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
+    import { Icon, Tag } from '@appwrite.io/pink-svelte';
     import { Copy } from '.';
+    import { IconDuplicate } from '@appwrite.io/pink-icons-svelte';
 
     export let value: string;
     export let event: string = null;
@@ -47,24 +49,16 @@
     }
 </script>
 
-<Copy {value} {event} appendTo="parent">
-    <div
-        class="interactive-text-output is-buttons-on-top"
-        class:u-text-center={centered}
-        style:min-inline-size="0"
-        style:display="inline-flex">
+<Copy {value} {event}>
+    <Tag size="s">
+        <Icon icon={IconDuplicate} />
+
         <span
             style:white-space="nowrap"
-            class="text u-line-height-1-5"
             style:overflow="hidden"
             style:word-break="break-all"
             use:truncateText>
             <slot />
         </span>
-        <div class="interactive-text-output-buttons">
-            <button class="interactive-text-output-button is-hidden" aria-label="copy text">
-                <span class="icon-duplicate" aria-hidden="true" />
-            </button>
-        </div>
-    </div>
+    </Tag>
 </Copy>

src/routes/(console)/project-[project]/sites/(components)/deploymentCreatedBy.svelte

@@ -7,14 +7,16 @@
     export let deployment: Models.Deployment;
 </script>
 
-{#if deployment.providerCommitAuthor}
-    <span title={deployment.$updatedAt}>
-        {capitalize(timeFromNow(deployment.$updatedAt))}
-    </span>
-    ago by <Link href={deployment.providerCommitAuthorUrl} external
-        >{deployment.providerCommitAuthor}</Link>
-{:else}
-    <span title={deployment.$updatedAt}>
-        {capitalize(timeFromNow(deployment.$updatedAt))}
-    </span>
-{/if}
+<p>
+    {#if deployment.providerCommitAuthor}
+        <span title={deployment.$updatedAt}>
+            {capitalize(timeFromNow(deployment.$updatedAt))}
+        </span>
+        by <Link href={deployment.providerCommitAuthorUrl} external
+            >{deployment.providerCommitAuthor}</Link>
+    {:else}
+        <span title={deployment.$updatedAt}>
+            {capitalize(timeFromNow(deployment.$updatedAt))}
+        </span>
+    {/if}
+</p>

src/routes/(console)/project-[project]/sites/promoteModal.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+    import { Button } from '$lib/elements/forms';
+    import { Modal } from '$lib/components';
+    import { sdk } from '$lib/stores/sdk';
+    import { addNotification } from '$lib/stores/notifications';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { invalidate } from '$app/navigation';
+    import { Dependencies } from '$lib/constants';
+
+    export let show = false;
+    export let selectedDeploymentId: string;
+    export let siteId: string;
+    let error: string;
+
+    async function promote() {
+        try {
+            await sdk.forProject.sites.updateDeploymentBuild(siteId, selectedDeploymentId);
+            addNotification({
+                type: 'success',
+                message: `Deployment has been promoted`
+            });
+            trackEvent(Submit.SitePromoteDeployment);
+
+            invalidate(Dependencies.SITE);
+            invalidate(Dependencies.DEPLOYMENTS);
+            show = false;
+        } catch (e) {
+            error = e.message;
+            trackError(e, Submit.SitePromoteDeployment);
+        }
+    }
+</script>
+
+<Modal title="Promote deployment" bind:show bind:error onSubmit={promote}>
+    <p class="text">
+        Are you sure you want to promote this deployment? This might affect your production code.
+    </p>
+
+    <svelte:fragment slot="footer">
+        <Button secondary on:click={() => (show = false)}>Cancel</Button>
+        <Button submit>Promote</Button>
+    </svelte:fragment>
+</Modal>

src/routes/(console)/project-[project]/sites/redeployModal.svelte

@@ -15,7 +15,7 @@
 
     async function redeploy() {
         try {
-            await sdk.forProject.sites.createBuild(site.$id, selectedDeploymentId);
+            sdk.forProject.sites.createBuild(site.$id, selectedDeploymentId);
             addNotification({
                 type: 'success',
                 message: `Redeploying ${site.name}`

src/routes/(console)/project-[project]/sites/site-[site]/+page.svelte

@@ -35,6 +35,7 @@
             </div>
             <div style:flex="2">
                 <DeploymentsOverview
+                    site={data.site}
                     activeDeployment={data.deployment}
                     deploymentList={data.deploymentList} />
             </div>

src/routes/(console)/project-[project]/sites/site-[site]/deploymentsOverview.svelte

@@ -1,6 +1,14 @@
 <script lang="ts">
-    import { Badge, Layout, Status, Table, Typography } from '@appwrite.io/pink-svelte';
-    import OpenOnMobileModal from '../(components)/openOnMobileModal.svelte';
+    import {
+        ActionMenu,
+        Badge,
+        Icon,
+        Layout,
+        Popover,
+        Status,
+        Table,
+        Typography
+    } from '@appwrite.io/pink-svelte';
     import Button from '$lib/elements/forms/button.svelte';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
@@ -8,12 +16,17 @@
     import DeploymentCreatedBy from '../(components)/deploymentCreatedBy.svelte';
     import DeploymentSource from '../(components)/deploymentSource.svelte';
     import Id from '$lib/components/id.svelte';
+    import { IconDotsHorizontal, IconGlobeAlt, IconRefresh } from '@appwrite.io/pink-icons-svelte';
+    import RedeployModal from '../redeployModal.svelte';
+    import PromoteModal from '../promoteModal.svelte';
 
+    export let site: Models.Site;
     export let activeDeployment: Models.Deployment;
     export let deploymentList: Models.DeploymentList = undefined;
 
-    let showDomainQR = false;
-    let selectedDomainURL: string;
+    let showPromote = false;
+    let showRedeploy = false;
+    let selectedDeployment: Models.Deployment = null;
 </script>
 
 <Layout.Stack>
@@ -37,6 +50,7 @@
                 <Table.Header.Cell>Status</Table.Header.Cell>
                 <Table.Header.Cell>Source</Table.Header.Cell>
                 <Table.Header.Cell>Updated</Table.Header.Cell>
+                <Table.Header.Cell />
             </svelte:fragment>
             {#each deploymentList?.deployments as deployment}
                 <Table.Link
@@ -65,12 +79,56 @@
                     <Table.Cell>
                         <DeploymentCreatedBy {deployment} />
                     </Table.Cell>
+                    <Table.Cell>
+                        <Popover placement="bottom-end" let:toggle>
+                            <Button
+                                text
+                                icon
+                                size="s"
+                                on:click={(e) => {
+                                    e.preventDefault();
+                                    toggle(e);
+                                }}>
+                                <Icon size="s" icon={IconDotsHorizontal} /></Button>
+                            <svelte:fragment slot="tooltip" let:toggle>
+                                <ActionMenu.Root>
+                                    <ActionMenu.Item.Button
+                                        leadingIcon={IconRefresh}
+                                        on:click={(e) => {
+                                            e.preventDefault();
+                                            selectedDeployment = deployment;
+                                            showRedeploy = true;
+                                            toggle(e);
+                                        }}>
+                                        Redeploy
+                                    </ActionMenu.Item.Button>
+                                    <ActionMenu.Item.Button
+                                        leadingIcon={IconGlobeAlt}
+                                        on:click={(e) => {
+                                            e.preventDefault();
+                                            selectedDeployment = deployment;
+                                            showPromote = true;
+                                            toggle(e);
+                                        }}>
+                                        Promote
+                                    </ActionMenu.Item.Button>
+                                </ActionMenu.Root>
+                            </svelte:fragment>
+                        </Popover>
+                    </Table.Cell>
                 </Table.Link>
             {/each}
         </Table.Root>
     {/if}
 </Layout.Stack>
 
-{#if showDomainQR && selectedDomainURL}
-    <OpenOnMobileModal bind:show={showDomainQR} siteURL={selectedDomainURL} />
+{#if selectedDeployment && showRedeploy}
+    <RedeployModal {site} selectedDeploymentId={selectedDeployment.$id} bind:show={showRedeploy} />
+{/if}
+
+{#if selectedDeployment && showPromote}
+    <PromoteModal
+        siteId={site.$id}
+        selectedDeploymentId={selectedDeployment.$id}
+        bind:show={showPromote} />
 {/if}