Merge pull request #87 from dockersamples/86-add-tabs-right-panel

mikesir87 · web-flow · commit bca97acf6d93 · 2025-09-16T11:00:57.000-04:00
Add tabbed layout to the code panel
diff --git a/components/interface/client/src/App.scss b/components/interface/client/src/App.scss
@@ -25,7 +25,6 @@ $font-size-base: 0.875rem;
 
 $light-bg-subtle-dark: $gray-800;
 
-
 @import "bootstrap/scss/functions";
 @import "bootstrap/scss/variables";
 @import "bootstrap/scss/bootstrap";
diff --git a/components/interface/client/src/AppRoute.jsx b/components/interface/client/src/AppRoute.jsx
@@ -1,36 +1,39 @@
 import "./App.scss";
 import { PanelGroup, Panel, PanelResizeHandle } from "react-resizable-panels";
 import { ToastContainer } from "react-toastify";
-import { IdePanel } from "./components/IdePanel/IdePanel";
 import { WorkshopPanel } from "./components/WorkshopPanel/WorkshopPanel";
 import { WorkshopContextProvider } from "./WorkshopContext";
+import { TabContextProvider } from "./TabContext";
+import { ExternalContentPanel } from "./components/ExternalContentPanel/ExternalContentPanel";
 
 function AppRoute() {
   return (
     <>
       <WorkshopContextProvider>
-        <PanelGroup direction="horizontal" autoSaveId="persistence">
-          <Panel defaultSize={50} minSize={20} className="resizable-panel">
-            <div className="overflow-auto position-relative">
-              <WorkshopPanel />
-            </div>
-          </Panel>
-          <PanelResizeHandle className="panel-resize-handle">
-            <svg viewBox="0 0 24 24" data-direction="horizontal">
-              <path
-                fill="currentColor"
-                d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2m-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
-              ></path>
-            </svg>
-          </PanelResizeHandle>
-          <Panel
-            defaultSize={50}
-            minSize={20}
-            className="resizable-panel d-flex"
-          >
-            <IdePanel />
-          </Panel>
-        </PanelGroup>
+        <TabContextProvider>
+          <PanelGroup direction="horizontal" autoSaveId="persistence">
+            <Panel defaultSize={50} minSize={20} className="resizable-panel">
+              <div className="overflow-auto position-relative">
+                <WorkshopPanel />
+              </div>
+            </Panel>
+            <PanelResizeHandle className="panel-resize-handle">
+              <svg viewBox="0 0 24 24" data-direction="horizontal">
+                <path
+                  fill="currentColor"
+                  d="M11 18c0 1.1-.9 2-2 2s-2-.9-2-2 .9-2 2-2 2 .9 2 2m-2-8c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0-6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m6 4c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
+                ></path>
+              </svg>
+            </PanelResizeHandle>
+            <Panel
+              defaultSize={50}
+              minSize={20}
+              className="resizable-panel d-flex"
+            >
+              <ExternalContentPanel />
+            </Panel>
+          </PanelGroup>
+        </TabContextProvider>
       </WorkshopContextProvider>
       <ToastContainer position="bottom-right" theme="dark" />
     </>
diff --git a/components/interface/client/src/TabContext.jsx b/components/interface/client/src/TabContext.jsx
@@ -0,0 +1,49 @@
+import { createContext, use, useCallback, useContext, useState } from "react";
+
+const TabContext = createContext([]);
+
+export function TabContextProvider({ children }) {
+  const [tabs, setTabs] = useState([]);
+  const [activeTab, setActiveTab] = useState(null);
+
+  const addTab = useCallback(
+    (url) => {
+      setTabs((prevTabs) => [...prevTabs, url]);
+      setActiveTab(url);
+    },
+    [setTabs, setActiveTab],
+  );
+
+  const removeTab = useCallback(
+    (url) => {
+      setTabs((prevTabs) => prevTabs.filter((tab) => tab !== url));
+      setActiveTab((prevActiveTab) =>
+        prevActiveTab === url ? null : prevActiveTab,
+      );
+    },
+    [setTabs, setActiveTab],
+  );
+
+  const displayLink = useCallback(
+    (url) => {
+      setTabs((prevTabs) => {
+        if (!prevTabs.includes(url)) {
+          return [...prevTabs, url];
+        }
+        return prevTabs;
+      });
+      setActiveTab(url);
+    },
+    [setTabs, setActiveTab],
+  );
+
+  return (
+    <TabContext.Provider
+      value={{ tabs, addTab, removeTab, activeTab, setActiveTab, displayLink }}
+    >
+      {children}
+    </TabContext.Provider>
+  );
+}
+
+export const useTabs = () => useContext(TabContext);
diff --git a/components/interface/client/src/components/ExternalContentPanel/ExternalContentPanel.jsx b/components/interface/client/src/components/ExternalContentPanel/ExternalContentPanel.jsx
@@ -0,0 +1,54 @@
+import { IdePlaceholder } from "./IdePlaceholder";
+import { useTabs } from "../../TabContext";
+import Nav from "react-bootstrap/Nav";
+import Button from "react-bootstrap/Button";
+import "./ExternalContentPanel.scss";
+
+function getTabTitle(url) {
+  if (url === "http://localhost:8085") return "VS Code";
+  return url;
+}
+
+export function ExternalContentPanel() {
+  const { tabs, setActiveTab, activeTab, addTab, removeTab } = useTabs();
+
+  return (
+    <div className="d-flex flex-fill flex-column">
+      <div className="p-3 pt-2 pb-0 bg-secondary-subtle">
+        <Nav
+          variant="tabs"
+          activeKey={activeTab}
+          onSelect={(selectedKey) => setActiveTab(selectedKey)}
+          id="external-content-tabs"
+        >
+          {tabs.map((tab) => (
+            <Nav.Item key={tab} className="me-2 ms-2">
+              <Nav.Link eventKey={tab} className="p-1 ps-3 pe-1">
+                <span className="me-3">{getTabTitle(tab)}</span>
+
+                {!tab.endsWith("localhost:8085") && (
+                  <Button
+                    size="sm"
+                    variant="default"
+                    className="rounded-circle p-1 pt-0 pb-0"
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      removeTab(tab);
+                    }}
+                  >
+                    &times;
+                  </Button>
+                )}
+              </Nav.Link>
+            </Nav.Item>
+          ))}
+        </Nav>
+      </div>
+      {activeTab ? (
+        <iframe style={{ flex: 1, border: "none" }} src={activeTab} />
+      ) : (
+        <IdePlaceholder onLaunch={() => addTab("http://localhost:8085")} />
+      )}
+    </div>
+  );
+}
diff --git a/components/interface/client/src/components/ExternalContentPanel/ExternalContentPanel.scss b/components/interface/client/src/components/ExternalContentPanel/ExternalContentPanel.scss
@@ -0,0 +1,13 @@
+#external-content-tabs {
+  .nav-link {
+    color: var(--bs-body-color);
+  }
+
+  button {
+    &:hover,
+    &:focus {
+      background-color: var(--bs-secondary);
+      color: var(--bs-white);
+    }
+  }
+}
diff --git a/components/interface/client/src/components/ExternalContentPanel/IdePlaceholder.jsx b/components/interface/client/src/components/ExternalContentPanel/IdePlaceholder.jsx
diff --git a/components/interface/client/src/components/ExternalContentPanel/IdePlaceholder.scss b/components/interface/client/src/components/ExternalContentPanel/IdePlaceholder.scss
diff --git a/components/interface/client/src/components/IdePanel/IdePanel.jsx b/components/interface/client/src/components/IdePanel/IdePanel.jsx
diff --git a/components/interface/client/src/components/WorkshopPanel/WorkshopBody.jsx b/components/interface/client/src/components/WorkshopPanel/WorkshopBody.jsx
@@ -59,7 +59,9 @@ export function WorkshopBody() {
                 onClick={() => changeActiveSection(sections[index - 1].id)}
                 className="d-flex align-items-center"
               >
-                <span className="material-symbols-outlined me-1">arrow_back</span>
+                <span className="material-symbols-outlined me-1">
+                  arrow_back
+                </span>
                 <span>Previous</span>
               </Button>
             )}
diff --git a/components/interface/client/src/components/WorkshopPanel/markdown/CodeBlock.jsx b/components/interface/client/src/components/WorkshopPanel/markdown/CodeBlock.jsx
@@ -57,31 +57,30 @@ export function CodeBlock({ node, inline, className, children, ...props }) {
         {String(children).replace(/\n$/, "")}
       </SyntaxHighlighter>
       <div className="button-container pt-1  bg-light-subtle align-self-stretch d-flex align-items-center">
-          {canCopy && (
-              <CodeBlockAction
-                  icon="content_copy"
-                  onClick={onCopyClick}
-                  completedText="Copied!"
-                  tooltip="Copy to clipboard"
-              />
-          )}
-          {canRun && (
-              <CodeBlockAction
-                  icon="play_circle"
-                  onClick={onRunClick}
-                  tooltip="Run code"
-              />
-          )}
-
-          {canSaveAsFile && (
-              <CodeBlockAction
-                  icon="save"
-                  onClick={onSaveAsClick}
-                  completedText="Saved!"
-                  tooltip="Save file"
-              />
-          )}
+        {canCopy && (
+          <CodeBlockAction
+            icon="content_copy"
+            onClick={onCopyClick}
+            completedText="Copied!"
+            tooltip="Copy to clipboard"
+          />
+        )}
+        {canRun && (
+          <CodeBlockAction
+            icon="play_circle"
+            onClick={onRunClick}
+            tooltip="Run code"
+          />
+        )}
 
+        {canSaveAsFile && (
+          <CodeBlockAction
+            icon="save"
+            onClick={onSaveAsClick}
+            completedText="Saved!"
+            tooltip="Save file"
+          />
+        )}
       </div>
     </div>
   );
diff --git a/components/interface/client/src/components/WorkshopPanel/markdown/CodeBlockAction.jsx b/components/interface/client/src/components/WorkshopPanel/markdown/CodeBlockAction.jsx
@@ -5,38 +5,50 @@ import OverlayTrigger from "react-bootstrap/OverlayTrigger";
 import Tooltip from "react-bootstrap/Tooltip";
 
 export function CodeBlockAction({ icon, onClick, completedText, tooltip }) {
-    const [running, setRunning] = useState(false);
-    const [completed, setCompleted] = useState(false);
-    const [hasError, setHasError] = useState(false);
+  const [running, setRunning] = useState(false);
+  const [completed, setCompleted] = useState(false);
+  const [hasError, setHasError] = useState(false);
 
-    useEffect(() => {
-        if (!completed) return;
-        setTimeout(() => setCompleted(false), 2000);
-    }, [completed]);
+  useEffect(() => {
+    if (!completed) return;
+    setTimeout(() => setCompleted(false), 2000);
+  }, [completed]);
 
-    return (
-        <OverlayTrigger
-            placement="top"
-            overlay={(props) => tooltip ? <Tooltip id={`tooltip-${icon}`} {...props}>{tooltip}</Tooltip> : <></>}
-        >
-            <Button
-                className="m-2"
-                variant="secondary"
-                size="sm"
-                onClick={() => {
-                    setRunning(true);
-                    onClick()
-                        .then(() => setCompleted(true))
-                        .catch(() => setHasError(true))
-                        .finally(() => setRunning(false));
-                }}
-                disabled={running}
-            >
-                { completed && completedText && <>{completedText}</> }
-                { running && <Spinner size="sm" /> }
-                { hasError && <span className="text-danger">❌ Error</span> }
-                { (!completed || (completed && !completedText)) && !running && !hasError && <span className="material-symbols-outlined">{ icon }</span> }
-            </Button>
-        </OverlayTrigger>
-    );
+  return (
+    <OverlayTrigger
+      placement="top"
+      overlay={(props) =>
+        tooltip ? (
+          <Tooltip id={`tooltip-${icon}`} {...props}>
+            {tooltip}
+          </Tooltip>
+        ) : (
+          <></>
+        )
+      }
+    >
+      <Button
+        className="m-2"
+        variant="secondary"
+        size="sm"
+        onClick={() => {
+          setRunning(true);
+          onClick()
+            .then(() => setCompleted(true))
+            .catch(() => setHasError(true))
+            .finally(() => setRunning(false));
+        }}
+        disabled={running}
+      >
+        {completed && completedText && <>{completedText}</>}
+        {running && <Spinner size="sm" />}
+        {hasError && <span className="text-danger">❌ Error</span>}
+        {(!completed || (completed && !completedText)) &&
+          !running &&
+          !hasError && (
+            <span className="material-symbols-outlined">{icon}</span>
+          )}
+      </Button>
+    </OverlayTrigger>
+  );
 }
diff --git a/components/interface/client/src/components/WorkshopPanel/markdown/ExternalLink.jsx b/components/interface/client/src/components/WorkshopPanel/markdown/ExternalLink.jsx
@@ -1,6 +1,15 @@
+import { useTabs } from "../../../TabContext";
+
 export function ExternalLink({ href, children, ...rest }) {
+  const { displayLink } = useTabs();
+
+  const handleClick = (e) => {
+    e.preventDefault();
+    displayLink(href);
+  };
+
   return (
-    <a href={href} target="_blank" rel="noopener noreferrer" {...rest}>
+    <a href={href} onClick={handleClick} {...rest}>
       {children}
     </a>
   );
diff --git a/components/interface/client/src/components/WorkshopPanel/markdown/RenderedSvg.jsx b/components/interface/client/src/components/WorkshopPanel/markdown/RenderedSvg.jsx
@@ -1,7 +1,3 @@
 export function RenderedSvg({ node, children, ...rest }) {
-    return (
-        <svg {...rest}>
-            {children}
-        </svg>
-    );
-}
+  return <svg {...rest}>{children}</svg>;
+}
