Merge pull request #89 from dockersamples/88-adjust-automatic-link-tab-usage

Replace automatic tab opening with explicit directive

Author: mikesir87

components/interface/client/package-lock.json

@@ -25,6 +25,7 @@
     "rehype-github-alerts": "^4.1.1",
     "rehype-mermaid": "^3.0.0",
     "rehype-raw": "^7.0.0",
+    "remark-directive": "^4.0.0",
     "remark-gfm": "^4.0.1",
     "sass": "^1.89.2"
   },

components/interface/client/package.json

@@ -1,4 +1,4 @@
-import { createContext, use, useCallback, useContext, useState } from "react";
+import { createContext, useCallback, useContext, useState } from "react";
 
 const TabContext = createContext([]);
 
@@ -7,16 +7,17 @@ export function TabContextProvider({ children }) {
   const [activeTab, setActiveTab] = useState(null);
 
   const addTab = useCallback(
-    (url) => {
-      setTabs((prevTabs) => [...prevTabs, url]);
+    (url, title) => {
+      if (!title) title = url;
+      setTabs((prevTabs) => [...prevTabs, { url, title }]);
       setActiveTab(url);
     },
     [setTabs, setActiveTab],
   );
 
   const removeTab = useCallback(
     (url) => {
-      setTabs((prevTabs) => prevTabs.filter((tab) => tab !== url));
+      setTabs((prevTabs) => prevTabs.filter((tab) => tab.url !== url));
       setActiveTab((prevActiveTab) =>
         prevActiveTab === url ? null : prevActiveTab,
       );
@@ -25,10 +26,12 @@ export function TabContextProvider({ children }) {
   );
 
   const displayLink = useCallback(
-    (url) => {
+    (url, title) => {
+      if (!title) title = url;
+
       setTabs((prevTabs) => {
-        if (!prevTabs.includes(url)) {
-          return [...prevTabs, url];
+        if (!prevTabs.find((tab) => tab.url === url)) {
+          return [...prevTabs, { url, title }];
         }
         return prevTabs;
       });

components/interface/client/src/TabContext.jsx

@@ -1,53 +1,33 @@
 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;
-}
+import { ExternalTabs } from "./ExternalTabs";
+import { useRef } from "react";
 
 export function ExternalContentPanel() {
   const { tabs, setActiveTab, activeTab, addTab, removeTab } = useTabs();
+  const iframeRef = useRef();
 
   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>
+        <ExternalTabs
+          activeTab={activeTab}
+          setActiveTab={setActiveTab}
+          tabs={tabs}
+          onTabRemoval={removeTab}
+        />
       </div>
       {activeTab ? (
-        <iframe style={{ flex: 1, border: "none" }} src={activeTab} />
+        <iframe
+          ref={iframeRef}
+          style={{ flex: 1, border: "none" }}
+          src={activeTab}
+        />
       ) : (
-        <IdePlaceholder onLaunch={() => addTab("http://localhost:8085")} />
+        <IdePlaceholder
+          onLaunch={() => addTab("http://localhost:8085", "Workspace")}
+        />
       )}
     </div>
   );

components/interface/client/src/components/ExternalContentPanel/ExternalContentPanel.jsx

@@ -9,5 +9,10 @@
       background-color: var(--bs-secondary);
       color: var(--bs-white);
     }
+
+    span {
+      position: relative;
+      top: 1px;
+    }
   }
 }

components/interface/client/src/components/ExternalContentPanel/ExternalContentPanel.scss

@@ -0,0 +1,49 @@
+import Nav from "react-bootstrap/Nav";
+import Button from "react-bootstrap/Button";
+
+export function ExternalTabs({
+  activeTab,
+  setActiveTab,
+  tabs,
+  onTabRemoval,
+  onRefreshClick,
+}) {
+  return (
+    <Nav
+      variant="tabs"
+      activeKey={activeTab}
+      onSelect={(selectedKey) => setActiveTab(selectedKey)}
+      id="external-content-tabs"
+    >
+      {tabs.map((tab) => (
+        <Nav.Item key={tab.url} className="me-2 ms-2">
+          <Nav.Link
+            eventKey={tab.url}
+            href={tab.url}
+            className="p-1 ps-3 pe-1"
+            onClick={(e) => {
+              e.preventDefault();
+            }}
+          >
+            <span className="me-3">{tab.title}</span>
+
+            {!tab.title !== "Workspace" && (
+              <Button
+                size="sm"
+                variant="default"
+                className="rounded-circle p-1 pt-0 pb-0"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  e.preventDefault();
+                  onTabRemoval(tab.url);
+                }}
+              >
+                <span className="material-symbols-outlined">close</span>
+              </Button>
+            )}
+          </Nav.Link>
+        </Nav.Item>
+      ))}
+    </Nav>
+  );
+}

components/interface/client/src/components/ExternalContentPanel/ExternalTabs.jsx

@@ -1,17 +1,7 @@
 import { useActiveSection, useWorkshop } from "../../WorkshopContext";
-import { MarkdownHooks } from "react-markdown";
-import remarkGfm from "remark-gfm";
-import rehypeRaw from "rehype-raw";
-import rehypeMermaid from "rehype-mermaid";
-import { rehypeGithubAlerts } from "rehype-github-alerts";
-import { CodeBlock } from "./markdown/CodeBlock";
-import { remarkCodeIndexer } from "./markdown/codeIndexer";
 import { useEffect, useRef } from "react";
-import { ExternalLink } from "./markdown/ExternalLink";
 import Button from "react-bootstrap/Button";
-import Image from "react-bootstrap/Image";
-import { RenderedImage } from "./markdown/RenderedImage";
-import { RenderedSvg } from "./markdown/RenderedSvg";
+import { MarkdownRenderer } from "./markdown/MarkdownRenderer";
 
 export function WorkshopBody() {
   const bodyRef = useRef();
@@ -38,18 +28,7 @@ export function WorkshopBody() {
     <>
       <div className="overflow-auto" ref={bodyRef}>
         <div className="workshop-body p-5 pt-3 pb-3">
-          <MarkdownHooks
-            remarkPlugins={[remarkGfm, remarkCodeIndexer]}
-            rehypePlugins={[rehypeRaw, rehypeMermaid, rehypeGithubAlerts]}
-            components={{
-              code: CodeBlock,
-              a: ExternalLink,
-              img: RenderedImage,
-              svg: RenderedSvg,
-            }}
-          >
-            {activeSection.content}
-          </MarkdownHooks>
+          <MarkdownRenderer>{activeSection.content}</MarkdownRenderer>
         </div>
         <div className="workshop-footer d-flex justify-content-between p-3 border-top">
           <div>

components/interface/client/src/components/WorkshopPanel/WorkshopBody.jsx

@@ -1,15 +1,6 @@
-import { useTabs } from "../../../TabContext";
-
 export function ExternalLink({ href, children, ...rest }) {
-  const { displayLink } = useTabs();
-
-  const handleClick = (e) => {
-    e.preventDefault();
-    displayLink(href);
-  };
-
   return (
-    <a href={href} onClick={handleClick} {...rest}>
+    <a href={href} target="_blank" rel="noopener noreferrer" {...rest}>
       {children}
     </a>
   );

components/interface/client/src/components/WorkshopPanel/markdown/ExternalLink.jsx

@@ -0,0 +1,36 @@
+import { MarkdownHooks } from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import rehypeMermaid from "rehype-mermaid";
+import remarkDirective from "remark-directive";
+import { rehypeGithubAlerts } from "rehype-github-alerts";
+import { CodeBlock } from "./CodeBlock";
+import { remarkCodeIndexer } from "./codeIndexer";
+import { ExternalLink } from "./ExternalLink";
+import { RenderedImage } from "./RenderedImage";
+import { RenderedSvg } from "./RenderedSvg";
+import { tabDirective } from "./reactDirective";
+import { TabLink } from "./TabLink";
+
+export function MarkdownRenderer({ children }) {
+  return (
+    <MarkdownHooks
+      remarkPlugins={[
+        remarkGfm,
+        remarkCodeIndexer,
+        remarkDirective,
+        tabDirective,
+      ]}
+      rehypePlugins={[rehypeRaw, rehypeMermaid, rehypeGithubAlerts]}
+      components={{
+        code: CodeBlock,
+        a: ExternalLink,
+        img: RenderedImage,
+        svg: RenderedSvg,
+        tablink: TabLink,
+      }}
+    >
+      {children}
+    </MarkdownHooks>
+  );
+}

components/interface/client/src/components/WorkshopPanel/markdown/MarkdownRenderer.jsx

@@ -0,0 +1,18 @@
+import { useTabs } from "../../../TabContext";
+
+export function TabLink({ href, title, children }) {
+  const { displayLink } = useTabs();
+
+  return (
+    <a
+      href={href}
+      title={title}
+      onClick={(e) => {
+        e.preventDefault();
+        displayLink(href, title);
+      }}
+    >
+      {children}
+    </a>
+  );
+}