Merge pull request #5 from dockersamples/add-local-catalog-support

Add local catalog support

Author: mikesir87

Dockerfile

@@ -23,7 +23,7 @@ LABEL org.opencontainers.image.title="Labspaces" \
     com.docker.extension.publisher-url="https://github.com/dockersamples/labspace-extension" \
     com.docker.extension.additional-urls="[{\"title\":\"Create your own Labspace\",\"url\":\"https://github.com/dockersamples/labspace-starter\"}]" \
     com.docker.extension.categories="cloud-development" \
-    com.docker.extension.changelog="Fix bug that was showing \"Starting...\" label for all Labspaces instead of only the one being started"
+    com.docker.extension.changelog="- Adding experimentation for locally defined catalogs and Labspace content"
 COPY beaker.svg /
 COPY metadata.json /
 COPY --from=build /usr/local/app/dist /ui

src/CatalogContext.jsx

@@ -46,8 +46,8 @@ export function CatalogContextProvider({ children }) {
   }, [customLabspaces]);
 
   const addCatalog = useCallback(
-    (name, url) => {
-      setCatalogs((catalog) => [...catalog, { name, url }]);
+    ({ name, url, content }) => {
+      setCatalogs((catalog) => [...catalog, { name, url, content }]);
     },
     [setCatalogs],
   );
@@ -89,16 +89,22 @@ export function CatalogContextProvider({ children }) {
 
   useEffect(() => {
     Promise.all(
-      catalogs.map((catalog) =>
-        fetch(catalog.url)
-          .then((res) => res.text())
-          .then((text) => parse(text))
-          .then((data) => ({
-            ...catalog,
-            tags: data.tags || [],
-            labspaces: data.labspaces || [],
-          })),
-      ),
+      catalogs.map(async (catalog) => {
+        let catalogContent;
+        if (catalog.content) {
+          console.log("Got some content", catalog.content);
+          catalogContent = catalog.content;
+        } else {
+          catalogContent = await fetch(catalog.url).then((res) => res.text());
+        }
+
+        const data = parse(catalogContent);
+        return {
+          ...catalog,
+          tags: data.tags || [],
+          labspaces: data.labspaces || [],
+        };
+      }),
     ).then((results) => setCatalogDetails(results));
   }, [catalogs]);
 

src/DockerContext.jsx

@@ -90,9 +90,13 @@ export function DockerContextProvider({ children }) {
       setLaunchLog("");
       setStartingLabspace(location);
 
+      const projectFileLocation = location.startsWith("/")
+        ? location
+        : `oci://${location}`;
+
       ddClient.docker.cli.exec(
         "compose",
-        ["-f", `oci://${location}`, "-p", "labspace", "up", "-d", "-y"],
+        ["-f", projectFileLocation, "-p", "labspace", "up", "-d", "-y"],
         {
           stream: {
             onOutput(data) {

src/components/ManageCatalogsModal.jsx

@@ -23,8 +23,7 @@ async function validateUrlResponse(url) {
   return response;
 }
 
-async function validateCatalogContent(response) {
-  const data = await response.text();
+async function validateCatalogContent(data) {
   let catalog;
   try {
     catalog = parse(data);
@@ -44,6 +43,7 @@ export function ManageCatalogsModal({ show, onClose }) {
   const { catalogs, addCatalog, removeCatalog } = useCatalogs();
   const [title, setTitle] = useState("");
   const [url, setUrl] = useState("");
+  const [catalogContent, setCatalogContent] = useState("");
   const [error, setError] = useState(null);
   const [showCatalogAdded, setShowCatalogAdded] = useState(false);
 
@@ -57,7 +57,8 @@ export function ManageCatalogsModal({ show, onClose }) {
     try {
       validateUrl(url);
       const response = await validateUrlResponse(url);
-      await validateCatalogContent(response);
+      const data = await response.text();
+      await validateCatalogContent(data);
 
       return true;
     } catch (e) {
@@ -66,12 +67,21 @@ export function ManageCatalogsModal({ show, onClose }) {
     }
   }, []);
 
-  function handleSubmit(e) {
+  async function handleSubmit(e) {
     e.preventDefault();
-    validate(url)
-      .then(() => addCatalog(title, url))
-      .then(() => setShowCatalogAdded(true))
-      .then(() => reset());
+    setError(null);
+
+    if (!url && !catalogContent) {
+      setError("Please provide either a URL or catalog content");
+      return;
+    }
+
+    if (url) await validate(url);
+    else await validateCatalogContent(catalogContent);
+
+    addCatalog({ name: title, url, content: catalogContent });
+    setShowCatalogAdded(true);
+    reset();
   }
 
   function handleCancel() {
@@ -137,17 +147,33 @@ export function ManageCatalogsModal({ show, onClose }) {
             />
           </Form.Group>
 
+          <Alert variant="info">
+            You can add a catalog by either providing the URL or the content of
+            the catalog definition file. If both are provided, the URL will be
+            used.
+          </Alert>
+
           <Form.Group className="mb-3" controlId="labspaceComposeFile">
             <Form.Label>Catalog URL</Form.Label>
             <Form.Control
               type="text"
               value={url}
               onChange={(e) => setUrl(e.target.value)}
-              required
             />
             <Form.Text muted>Location of the catalog definition file</Form.Text>
           </Form.Group>
 
+          <Form.Group className="mb-3" controlId="labspaceComposeFile">
+            <Form.Label>Catalog Content</Form.Label>
+            <Form.Control
+              as="textarea"
+              rows={7}
+              value={catalogContent}
+              onChange={(e) => setCatalogContent(e.target.value)}
+            />
+            <Form.Text muted>Content of the catalog definition file</Form.Text>
+          </Form.Group>
+
           {showCatalogAdded && (
             <Alert variant="success" onClose={() => setShowCatalogAdded(false)}>
               Catalog added successfully!