Merge pull request #77 from mikesir87/75-update-extension-compose-flows

Update DD extension to use published Compose flows

Author: mikesir87

components/launcher/Dockerfile

@@ -1,9 +1,49 @@
+# Docker Desktop extension
+
+This directory contains the code for the Docker Desktop extension for Labspaces.
+
+## Development
+
+To develop the extension, run the following steps:
+
+1. Install the NPM dependencies:
+
+    ```console
+    npm install
+    ```
+
+2. Start the app:
+
+    ```console
+    npm run dev
+    ```
+
+3. If you don't have the extension installed yet, install it:
+
+    ```console
+    docker extension install dockersamples/labspace-extension
+    ```
+
+4. Enable debug mode for the extension (to get the Chrome developer tools):
+
+    ```console
+    docker extension dev debug dockersamples/labspace-extension
+    ```
+
+5. Set the UI source for the extension to be your development environment:
+
+    ```console
+    docker extension dev ui-source dockersamples/labspace-extension http://localhost:5173
+    ```
+
+6. Open the extension in Docker Desktop. It will now be using the Vite reload server for the UI, allowing you to make changes and see them reflected immediately.
+
 ## Deep link support
 
 Once the extension is installed, deep links can be used to launch a Labspace.
 
 ```
-http://open.docker.com/dashboard/extension-tab?extensionId=dockersamples/labspace-extension&repo=REPO_URL&title=TITLE
+http://open.docker.com/dashboard/extension-tab?extensionId=dockersamples/labspace-extension&url=PUBLISHED_LABSPACE_URL&title=TITLE
 ```
 
-[Click here](http://open.docker.com/dashboard/extension-tab?extensionId=dockersamples/labspace-extension&repo=https://github.com/mikesir87/labspace-docker-overview&title=Demo) to launch a sample Labspace
+[Click here](http://open.docker.com/dashboard/extension-tab?extensionId=dockersamples/labspace-extension&url=dockersamples/labspace-container-supported-development&title=Demo) to launch a sample Labspace

components/launcher/README.md

@@ -13,7 +13,7 @@ const HIGHLIGHTED_LABSPACES = [
     title: "Container-supported development",
     description:
       "Use containers to easily run and version databases, debug tools, and more across your entire team with minimal setup.",
-    repo: "http://github.com/mikesir87/labspace-container-supported-development",
+    location: "dockersamples/labspace-container-supported-development",
   },
 ];
 
@@ -22,7 +22,7 @@ const DockerContext = createContext();
 export function DockerContextProvider({ children }) {
   const [hasLabspace, setHasLabspace] = useState(false);
   const [runningLabspace, setRunningLabspace] = useState(null);
-  const [startingLabspace, setStartingLabspace] = useState(false);
+  const [startingLabspace, setStartingLabspace] = useState(null);
   const [stoppingLabspace, setStoppingLabspace] = useState(false);
   const [launchLog, setLaunchLog] = useState("");
   const [forceRefreshCount, setForceRefreshCount] = useState(0);
@@ -79,18 +79,21 @@ export function DockerContextProvider({ children }) {
   }, [setHasLabspace, setStoppingLabspace]);
 
   const startLabspace = useCallback(
-    (repoUrl) => {
+    (location) => {
+      console.log(`Starting Labspace with location ${location}`);
       setLaunchLog("");
-      setStartingLabspace(true);
+      setStartingLabspace(location);
 
       ddClient.docker.cli.exec(
-        "run",
+        "compose",
         [
-          "--rm",
-          "-e",
-          `LABSPACE_CONTENT_REPO=${repoUrl}`,
-          "--use-api-socket",
-          "dockersamples/labspace-launcher",
+          "-f",
+          `oci://${location}`,
+          "-p",
+          "labspace",
+          "up",
+          "-d",
+          "-y",
         ],
         {
           stream: {
@@ -100,7 +103,7 @@ export function DockerContextProvider({ children }) {
             },
             onClose(exitCode) {
               setHasLabspace(true);
-              setStartingLabspace(false);
+              setStartingLabspace(null);
               setForceRefreshCount((c) => c + 1);
             },
           },
@@ -111,16 +114,16 @@ export function DockerContextProvider({ children }) {
   );
 
   const addLabspace = useCallback(
-    (title, repo) => {
-      const newLabspace = { title, repo };
+    (title, location) => {
+      const newLabspace = { title, location };
       setAdditionalLabspaces((labspaces) => [...labspaces, newLabspace]);
     },
     [setAdditionalLabspaces],
   );
 
   const removeLabspace = useCallback(
-    (repo) => {
-      setAdditionalLabspaces((labs) => labs.filter((l) => l.repo !== repo));
+    (location) => {
+      setAdditionalLabspaces((labs) => labs.filter((l) => l.location !== location));
     },
     [setAdditionalLabspaces],
   );

components/launcher/launch-labspace.sh

@@ -56,7 +56,7 @@ export function Home() {
           <Col xs={12} sm={6} md={4} key={labspace.title} className="mb-4">
             <LabspaceCard
               labspace={labspace}
-              onLaunch={() => startLabspace(labspace.repo)}
+              onLaunch={() => startLabspace(labspace.location)}
               starting={startingLabspace}
               running={hasLabspace}
             />
@@ -83,7 +83,7 @@ export function Home() {
             <thead>
               <tr>
                 <th>Title</th>
-                <th>Repo</th>
+                <th>Location</th>
                 <th></th>
               </tr>
             </thead>
@@ -102,25 +102,19 @@ export function Home() {
                 <tr key={labspace.title}>
                   <td className="align-middle">{labspace.title}</td>
                   <td className="align-middle">
-                    <a
-                      href={labspace.repo}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                    >
-                      {labspace.repo}
-                    </a>
+                    {labspace.location}
                   </td>
                   <td className="text-end">
                     <Button
                       variant="primary"
-                      onClick={() => startLabspace(labspace.repo)}
+                      onClick={() => startLabspace(labspace.location)}
                       className="me-2"
                     >
                       Launch
                     </Button>
                     <Button
                       variant="danger"
-                      onClick={() => removeLabspace(labspace.repo)}
+                      onClick={() => removeLabspace(labspace.location)}
                     >
                       Remove
                     </Button>
@@ -143,10 +137,10 @@ export function Home() {
       />
 
       <UrlHandlingModal
-        onLaunchConfirmation={(title, repo) => {
-          if (labspaces.find((l) => l.repo === repo) === undefined)
-            addLabspace(title, repo);
-          startLabspace(repo);
+        onLaunchConfirmation={(title, location) => {
+          if (labspaces.find((l) => l.location === location) === undefined)
+            addLabspace(title, location);
+          startLabspace(location);
         }}
       />
     </Container>

dd-extension/README.md

@@ -1,20 +1,23 @@
 import { useState } from "react";
-import { Modal, Button, Form } from "react-bootstrap";
+import Modal from "react-bootstrap/Modal";
+import Button from "react-bootstrap/Button";
+import InputGroup from "react-bootstrap/InputGroup";
+import Form from "react-bootstrap/Form";
 
 export function AddLabspaceModal({ show, onAdd, onCancel }) {
   const [title, setTitle] = useState("");
-  const [repo, setRepo] = useState("");
+  const [location, setLocation] = useState("");
 
   function handleSubmit(e) {
     e.preventDefault();
-    onAdd(title, repo);
+    onAdd(title, location);
     setTitle("");
-    setRepo("");
+    setLocation("");
   }
 
   function handleCancel() {
     setTitle("");
-    setRepo("");
+    setLocation("");
     onCancel();
   }
 
@@ -36,14 +39,20 @@ export function AddLabspaceModal({ show, onAdd, onCancel }) {
             />
           </Form.Group>
 
-          <Form.Group className="mb-3" controlId="labspaceRepo">
-            <Form.Label>Repo</Form.Label>
-            <Form.Control
-              type="text"
-              value={repo}
-              onChange={(e) => setRepo(e.target.value)}
-              required
-            />
+          <Form.Group className="mb-3" controlId="labspaceComposeFile">
+            <Form.Label>Labspace location</Form.Label>
+            <InputGroup>
+              <InputGroup.Text>oci://</InputGroup.Text>
+              <Form.Control
+                type="text"
+                value={location}
+                onChange={(e) => setLocation(e.target.value)}
+                required
+              />
+            </InputGroup>
+            <Form.Text muted>
+              Location of the published Compose file for the Labspace
+            </Form.Text>
           </Form.Group>
         </Modal.Body>
         <Modal.Footer>

dd-extension/src/DockerContext.jsx

@@ -5,29 +5,29 @@ import { useState } from "react";
 export function UrlHandlingModal({ onLaunchConfirmation }) {
   const searchParams = new URLSearchParams(window.location.search);
   const title = searchParams.get("title");
-  const repo = searchParams.get("repo");
+  const location = searchParams.get("location");
 
-  const [show, setShow] = useState(title && repo);
+  const [show, setShow] = useState(title && location);
 
   const handleConfirm = () => {
     setShow(false);
 
     searchParams.delete("title");
-    searchParams.delete("repo");
+    searchParams.delete("location");
     window.history.replaceState(
       {},
       "",
       `${window.location.pathname}?${searchParams.toString()}`,
     );
 
-    onLaunchConfirmation(title, repo);
+    onLaunchConfirmation(title, location);
   };
 
   const handleCancel = () => {
     setShow(false);
 
     searchParams.delete("title");
-    searchParams.delete("repo");
+    searchParams.delete("location");
     window.history.replaceState(
       {},
       "",
@@ -36,21 +36,21 @@ export function UrlHandlingModal({ onLaunchConfirmation }) {
   };
 
   return (
-    <Modal show={show} onHide={handleCancel} centered>
+    <Modal show={show} onHide={handleCancel} centered size="lg">
       <Modal.Header closeButton>
         <Modal.Title className="mb-0">Confirm Labspace Launch</Modal.Title>
       </Modal.Header>
       <Modal.Body>
-        <p>You are about to launch a Labspace with the following details:</p>
+        <p>You have clicked a link to launch the following Labspace:</p>
         <ul>
           <li>
             <strong>Title:</strong> {title}
           </li>
           <li>
-            <strong>Repo:</strong> {repo}
+            <strong>Location:</strong> {location}
           </li>
         </ul>
-        <p>Please verify these details before continuing.</p>
+        <p>Please confirm the details and validate it's a trusted source.</p>
       </Modal.Body>
       <Modal.Footer>
         <Button variant="secondary" onClick={handleCancel}>

dd-extension/src/Home.jsx

@@ -19,7 +19,6 @@ group "default" {
     "support-vscode-extension",
     "interface", 
     "labspace-cleaner",
-    "launcher",
     "dd-extension",
     "workspace-base",
     "workspace-node", 
@@ -108,12 +107,6 @@ target "labspace-cleaner" {
   tags = tags(IMAGE_NAMESPACE, "labspace-cleaner", IMAGE_TAG)
 }
 
-target "launcher" {
-  inherits = ["_common"]
-  context = "./components/launcher"
-  tags = tags(IMAGE_NAMESPACE, "labspace-launcher", IMAGE_TAG)
-}
-
 target "dd-extension" {
   inherits = ["_common"]
   context = "./dd-extension"