Improved deno deploy UX

src/client/components/deno.ts

@@ -4,7 +4,7 @@ import { customElement, property } from 'lit/decorators.js'
 import '@vscode/webview-ui-toolkit/dist/button/index'
 
 import { getContext } from '../utils'
-import { Deployment } from '../../utils/deno/api_types'
+import { Deployment, Project } from '../../utils/deno/api_types'
 import { ClientMessages } from '../../constants'
 import type { ClientMessage } from '../../types'
 
@@ -51,8 +51,8 @@ export class DenoOutput extends LitElement {
   // Declare reactive properties
   @property({ type: Boolean })
   deployed = false
-  @property({ type: String })
-  project?: string
+  @property({ type: Object })
+  project?: Project
   @property({ type: Object })
   deployments?: Deployment[]
 
@@ -63,6 +63,10 @@ export class DenoOutput extends LitElement {
       return html`Deploying to Deno...`
     }
 
+    const project = this.project!
+    const prodDomainMapping = project.productionDeployment?.domainMappings.reduce((acc, curr) =>
+      // oldest is prod domain mapping
+      acc?.createdAt > curr.createdAt ? curr : acc)
     const deployment = this.deployments[0]
     return html`<section>
       <img src="https://www.svgrepo.com/show/378789/deno.svg">
@@ -74,16 +78,17 @@ export class DenoOutput extends LitElement {
           </vscode-link>
         ` : html`Pending` }
         <h4>Project</h4>
-        <vscode-link href="https://dash.deno.com/projects/${this.project}/deployments">${this.project}</vscode-link>
+        <vscode-link href="https://dash.deno.com/projects/${project.name}/deployments">
+          ${project.name}
+        </vscode-link>
       </div>
       <div>
         <h4>Created At</h4>
         ${this.deployed ? (new Date(deployment.createdAt)).toString() : 'Pending' }
         <h4>Status</h4>
-        ${this.deployed
-          ? 'Ready'
-          : html`Deploying <vscode-spinner />`}
-
+          ${this.deployed
+          ? ((supportsMessaging && this.#promoted) ? 'Production' : 'Preview')
+            : html`Deploying <vscode-spinner />`}
         ${when(this.deployed && supportsMessaging && !this.#promoted, () => html`
           <vscode-button
             class="btnPromote"
@@ -93,10 +98,11 @@ export class DenoOutput extends LitElement {
             🚀 ${this.#isPromoting ? 'Promoting...' : 'Promote to Production'}
           </vscode-button>
         `)}
-        ${when(this.deployed && supportsMessaging && this.#promoted, () => html`
+        ${when(this.deployed && supportsMessaging && this.#promoted && project.hasProductionDeployment, () => html`
           <p>
-            Promoted to production: <vscode-link href="https://${deployment.domainMappings[0].domain}">
-              ${deployment.domainMappings[0].domain}
+            Promoted to 🚀:
+            <vscode-link href="https://${prodDomainMapping?.domain}">
+              ${prodDomainMapping?.domain}
             </vscode-link>
           </p>
         `)}

src/client/index.ts

@@ -34,7 +34,7 @@ export const activate: ActivationFunction = (context: RendererContext<void>) =>
           const deno = payload.output as CellOutput<OutputType.deno>['output'] || {}
           const denoElem = document.createElement('deno-output')
           deno.deployed && denoElem.setAttribute('deployed', deno.deployed.toString())
-          deno.project && denoElem.setAttribute('project', deno.project)
+          deno.project && denoElem.setAttribute('project', JSON.stringify(deno.project))
           denoElem.setAttribute('deployments', JSON.stringify(deno.deployments))
           element.appendChild(denoElem)
           break

src/extension/constants.ts

@@ -2,6 +2,7 @@ import os from 'node:os'
 
 export const PLATFORM_OS = os.platform()
 export const DENO_ACCESS_TOKEN_KEY = 'DENO_ACCESS_TOKEN'
+export const DENO_PROJECT_NAME_KEY = 'DENO_PROJECT_NAME'
 
 export const DEFAULT_ENV = {
   RUNME_TASK: 'true',

src/extension/executors/deno/deploy.ts

@@ -2,7 +2,7 @@ import { NotebookCellOutput, NotebookCellOutputItem, NotebookCellExecution } fro
 
 import { renderError } from '../utils'
 import { OutputType, ClientMessages } from '../../../constants'
-import { ENV_STORE, DENO_ACCESS_TOKEN_KEY } from '../../constants'
+import { ENV_STORE, DENO_ACCESS_TOKEN_KEY, DENO_PROJECT_NAME_KEY } from '../../constants'
 import { API } from '../../../utils/deno/api'
 import type { Kernel } from '../../kernel'
 import type { CellOutput, ClientMessage } from '../../../types'
@@ -12,6 +12,7 @@ export async function deploy (
   exec: NotebookCellExecution,
 ): Promise<boolean> {
   let token = ENV_STORE.get(DENO_ACCESS_TOKEN_KEY)
+  const pname = ENV_STORE.get(DENO_PROJECT_NAME_KEY)
 
   const cancel = new Promise<void>((_, reject) =>
     exec.token.onCancellationRequested(() =>
@@ -41,7 +42,9 @@ export async function deploy (
     let iteration = 0
     let created = start
     while (created <= start && iteration < 30) {
-      const deployments = await denoAPI.getDeployments(projects![0].id)
+      // lookup project name if not available use most recent
+      const project = projects?.find(p => p.name === pname) || projects![0]
+      const deployments = await denoAPI.getDeployments(project.id)
       if ((deployments || []).length > 0) {
         created = new Date(deployments![0].createdAt) ?? start
       }
@@ -52,7 +55,7 @@ export async function deploy (
         output: {
           deployed,
           deployments,
-          project: projects![0].name
+          project
         }
       })
 

src/types.ts

@@ -25,7 +25,7 @@ export interface CellOutput<T extends OutputType> {
 
 interface DenoPayload {
   deployed?: boolean
-  project?: string
+  project?: any
   deployments?: any[]
 }