create-interview-cockpit 0.17.3 → 0.19.0

package/template/client/src/components/LabsPanel.tsx

@@ -1,6 +1,8 @@
 import { useState } from "react";
 import { useStore } from "../store";
-import { parseInfraLabWorkspace } from "../infraLab";
+import { DOCKER_DEEP_DIVE_LAB, parseInfraLabWorkspace } from "../infraLab";
+import { DEFAULT_GHA_LAB, parseGhaLabWorkspace } from "../githubActionsLab";
+import { ENTERPRISE_LOCAL_AUTH_LAB } from "../enterpriseLocalLab";
 import {
   parseFrontendLabWorkspace,
   ISOLATED_MODULE_FEDERATION_LAB,
@@ -8,6 +10,7 @@ import {
   NEXTJS_MF_RUNTIME_LAB,
   NEXTJS_MULTI_ZONES_LAB,
   NEXTJS_MF_RUNTIME_API_LAB,
+  NEXTJS_BFF_AUTH_CLIENT_LAB,
   RSPACK_SHELL_LAB,
 } from "../reactLab";
 import { BROWSER_SECURITY_TEMPLATES } from "../browserSecurityTemplates";
@@ -29,6 +32,7 @@ import {
   Network,
   Shield,
   PenLine,
+  GitBranch,
 } from "lucide-react";
 
 // ─── Helpers ─────────────────────────────────────────────
@@ -41,6 +45,7 @@ const LAB_ORIGINS = new Set([
   "nextjs",
   "module-federation",
   "canvas",
+  "github-actions",
 ]);
 
 function isLabFile(cf: ContextFile) {
@@ -196,6 +201,7 @@ export default function LabsPanel() {
     currentQuestion,
     openSandbox,
     openInfraLab,
+    openGhaLab,
     openReactLab,
     openNextLab,
     openModuleFederationLab,
@@ -302,6 +308,18 @@ export default function LabsPanel() {
     if (parsed) openInfraLab(parsed, cf.id);
   };
 
+  const openGhaFile = async (cf: ContextFile) => {
+    try {
+      const raw = await fetch(`/api/context-files/${cf.id}/content`)
+        .then((r) => r.json())
+        .then((d) => d.content as string);
+      const parsed = parseGhaLabWorkspace(raw);
+      if (parsed) openGhaLab(parsed, cf.id);
+    } catch {
+      /* ignore */
+    }
+  };
+
   const openReactFile = async (cf: ContextFile) => {
     try {
       const raw = await fetch(`/api/context-files/${cf.id}/content`)
@@ -606,13 +624,50 @@ export default function LabsPanel() {
             iconColor="text-cyan-400/70"
             origin="infra"
             emptyText="Save an infra lab to reopen it here"
-            onNewLab={() => openInfraLab()}
-            newLabTitle="Open Infrastructure Lab"
+            newLabMenu={[
+              {
+                label: "AWS LocalStack S3",
+                description:
+                  "Terraform AWS provider pointed at local emulation",
+                onClick: () => openInfraLab(),
+              },
+              {
+                label: "Docker Deep Dive",
+                description:
+                  "Dockerfile + Compose + Node API + Redis, with command-line practice",
+                onClick: () => openInfraLab(DOCKER_DEEP_DIVE_LAB),
+              },
+              {
+                label: "Enterprise BFF Docker Stack",
+                description:
+                  "Terraform deploys NestJS BFF, OIDC mock, Redis & claims API",
+                onClick: () => openInfraLab(ENTERPRISE_LOCAL_AUTH_LAB),
+              },
+            ]}
             onOpen={openInfraFile}
             openTitle="Open in Infrastructure Lab"
             accentClass="text-cyan-200"
             bgClass="bg-cyan-500/10 border border-cyan-500/20"
           />
+          <Section
+            title="GitHub Actions"
+            icon={GitBranch}
+            iconColor="text-amber-400/70"
+            origin="github-actions"
+            emptyText="Save a GitHub Actions lab to reopen it here"
+            newLabMenu={[
+              {
+                label: "Workflows + Composite Action",
+                description:
+                  "Multi-job CI workflow with a local composite action and a matrix build",
+                onClick: () => openGhaLab(DEFAULT_GHA_LAB),
+              },
+            ]}
+            onOpen={openGhaFile}
+            openTitle="Open in GitHub Actions Lab"
+            accentClass="text-amber-200"
+            bgClass="bg-amber-500/10 border border-amber-500/20"
+          />
           <Section
             title="React Labs"
             icon={Atom}
@@ -632,8 +687,19 @@ export default function LabsPanel() {
             iconColor="text-violet-400/70"
             origin="nextjs"
             emptyText="Save a Next.js lab to reopen it here"
-            onNewLab={() => openNextLab()}
-            newLabTitle="Open Next.js Lab"
+            newLabMenu={[
+              {
+                label: "Blank App Router",
+                description: "Standard Next.js App Router practice lab",
+                onClick: () => openNextLab(),
+              },
+              {
+                label: "BFF Auth Client",
+                description:
+                  "Next.js shell that signs in through the local Terraform-deployed BFF",
+                onClick: () => openNextLab(NEXTJS_BFF_AUTH_CLIENT_LAB),
+              },
+            ]}
             onOpen={openNextFile}
             openTitle="Open in Next.js Lab"
             accentClass="text-violet-200"