feat(web-appstore): add an App Store view for quick service deployment from curated templates

ts_web/elements/ob-view-services.ts

@@ -139,6 +139,9 @@ export class ObViewServices extends DeesElement {
   @state()
   accessor workspaceOpen: boolean = false;
 
+  @state()
+  accessor pendingTemplate: any = null;
+
   constructor() {
     super();
 
@@ -216,13 +219,23 @@ export class ObViewServices extends DeesElement {
     const state = appstate.servicesStatePart.getState();
     if (state.currentPlatformService) {
       const type = state.currentPlatformService.type;
-      // Clear the selection so it doesn't persist on next visit
       appstate.servicesStatePart.setState({
         ...appstate.servicesStatePart.getState(),
         currentPlatformService: null,
       });
       this.navigateToPlatformDetail(type);
     }
+
+    // If an app template was selected from the App Store, switch to create view
+    const uiState = appstate.uiStatePart.getState();
+    if (uiState.pendingAppTemplate) {
+      this.pendingTemplate = uiState.pendingAppTemplate;
+      appstate.uiStatePart.setState({
+        ...appstate.uiStatePart.getState(),
+        pendingAppTemplate: undefined,
+      });
+      this.currentView = 'create';
+    }
   }
 
   public render(): TemplateResult {
@@ -309,7 +322,63 @@ export class ObViewServices extends DeesElement {
     `;
   }
 
+  private async deployFromTemplate(template: any): Promise<void> {
+    const name = template.id || template.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+    const envVars: Record<string, string> = {};
+    if (template.envVars) {
+      for (const ev of template.envVars) {
+        if (ev.key && ev.value) envVars[ev.key] = ev.value;
+      }
+    }
+    const serviceConfig: interfaces.data.IServiceCreate = {
+      name,
+      image: template.image,
+      port: template.port || 80,
+      envVars,
+      enableMongoDB: template.enableMongoDB || false,
+      enableS3: template.enableS3 || false,
+      enableClickHouse: template.enableClickHouse || false,
+    };
+    await appstate.servicesStatePart.dispatchAction(appstate.createServiceAction, {
+      config: serviceConfig,
+    });
+    this.pendingTemplate = null;
+    this.currentView = 'list';
+  }
+
   private renderCreateView(): TemplateResult {
+    // If we have a pending app template from the App Store, show a quick-deploy confirmation
+    if (this.pendingTemplate) {
+      const t = this.pendingTemplate;
+      return html`
+        <ob-sectionheading>Deploy ${t.name}</ob-sectionheading>
+        <div style="max-width: 600px; margin: 0 auto;">
+          <div style="background: var(--ci-shade-1, #09090b); border: 1px solid var(--ci-shade-2, #27272a); border-radius: 8px; padding: 24px; margin-bottom: 16px;">
+            <h3 style="margin: 0 0 8px 0; font-size: 18px;">${t.name}</h3>
+            <p style="margin: 0 0 16px 0; color: var(--ci-shade-5, #a1a1aa); font-size: 14px;">${t.description}</p>
+            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 13px;">
+              <div><span style="color: var(--ci-shade-5, #a1a1aa);">Image:</span> <strong>${t.image}</strong></div>
+              <div><span style="color: var(--ci-shade-5, #a1a1aa);">Port:</span> <strong>${t.port}</strong></div>
+              <div><span style="color: var(--ci-shade-5, #a1a1aa);">Service Name:</span> <strong>${t.id}</strong></div>
+              <div><span style="color: var(--ci-shade-5, #a1a1aa);">Category:</span> <strong>${t.category}</strong></div>
+            </div>
+            ${t.enableMongoDB || t.enableS3 || t.enableClickHouse ? html`
+              <div style="margin-top: 12px; font-size: 13px; color: var(--ci-shade-5, #a1a1aa);">
+                Platform Services:
+                ${t.enableMongoDB ? html`<span style="margin-right: 8px;">MongoDB</span>` : ''}
+                ${t.enableS3 ? html`<span style="margin-right: 8px;">S3</span>` : ''}
+                ${t.enableClickHouse ? html`<span>ClickHouse</span>` : ''}
+              </div>
+            ` : ''}
+          </div>
+          <div style="display: flex; gap: 12px; justify-content: flex-end;">
+            <button class="deploy-button" style="background: transparent; border: 1px solid var(--ci-shade-2, #27272a); color: inherit;" @click=${() => { this.pendingTemplate = null; this.currentView = 'list'; }}>Cancel</button>
+            <button class="deploy-button" @click=${() => this.deployFromTemplate(t)}>Deploy ${t.name}</button>
+          </div>
+        </div>
+      `;
+    }
+
     return html`
       <ob-sectionheading>Create Service</ob-sectionheading>
       <sz-service-create-view