datajunction-ui 0.0.1-a56 → 0.0.1-a57

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "datajunction-ui",
-  "version": "0.0.1a56",
+  "version": "0.0.1a57",
   "description": "DataJunction Metrics Platform UI",
   "module": "src/index.tsx",
   "repository": {

package/src/app/pages/Root/__tests__/index.test.jsx

@@ -39,7 +39,7 @@ describe('<Root />', () => {
         'href',
         '/sql',
       );
-      expect(screen.getByText('Docs').closest('a')).toHaveAttribute(
+      expect(screen.getByText('Open-Source').closest('a')).toHaveAttribute(
         'href',
         'https://www.datajunction.io',
       );

package/src/app/pages/Root/index.tsx

@@ -5,6 +5,21 @@ import { Helmet } from 'react-helmet-async';
 import DJClientContext from '../../providers/djclient';
 import Search from '../../components/Search';
 
+// Define the type for the docs sites
+type DocsSites = {
+  [key: string]: string;
+};
+
+// Default docs sites if REACT_APP_DOCS_SITES is not defined
+const defaultDocsSites: DocsSites = {
+  "Open-Source": "https://www.datajunction.io/"
+};
+
+// Parse the JSON map from the environment variable or use the default
+const docsSites: DocsSites = process.env.REACT_APP_DOCS_SITES
+  ? JSON.parse(process.env.REACT_APP_DOCS_SITES as string) as DocsSites
+  : defaultDocsSites;
+
 export function Root() {
   const djClient = useContext(DJClientContext).DataJunctionAPI;
 
@@ -12,14 +27,12 @@ export function Root() {
     await djClient.logout();
     window.location.reload();
   };
+
   return (
     <>
       <Helmet>
         <title>DataJunction</title>
-        <meta
-          name="description"
-          content="DataJunction Metrics Platform Webapp"
-        />
+        <meta name="description" content="DataJunction Metrics Platform Webapp" />
       </Helmet>
       <div className="container d-flex align-items-center justify-content-between">
         <div className="header">
@@ -53,13 +66,26 @@ export function Root() {
               </span>
               <span className="menu-link">
                 <span className="menu-title">
-                  <a
-                    href="https://www.datajunction.io"
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    Docs
-                  </a>
+                  <div className="dropdown">
+                    <a
+                      className="btn btn-link dropdown-toggle"
+                      href="#"
+                      id="docsDropdown"
+                      role="button"
+                      aria-expanded="false"
+                    >
+                      Docs
+                    </a>
+                    <ul className="dropdown-menu" aria-labelledby="docsDropdown">
+                      {Object.entries(docsSites).map(([key, value]) => (
+                        <li key={key}>
+                          <a className="dropdown-item" href={value} target="_blank" rel="noreferrer">
+                            {key}
+                          </a>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
                 </span>
               </span>
             </div>
@@ -80,4 +106,4 @@ export function Root() {
       <Outlet />
     </>
   );
-}
+}

package/src/styles/index.css

@@ -1476,4 +1476,30 @@ table {
 }
 .active {
   border-bottom: 2px solid #007acc;
+}
+.dropdown-menu {
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  float: left;
+  min-width: 15rem;
+  padding: 0.5rem;
+  margin: 0;
+  font-size: 1rem;
+  color: #212529;
+  text-align: left;
+  list-style: none;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0.25rem;
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175);
+}
+.dropdown {
+  position: relative;
+}
+.dropdown:hover .dropdown-menu {
+  display: block;
 }