DHFPROD-8228: Make Hub Central Documentation Links Dynamic

Author: briantang

marklogic-data-hub-central/ui/src/components/header/header.tsx

@@ -3,6 +3,7 @@ import {RouteComponentProps, withRouter, useHistory, Link} from "react-router-do
 import axios from "axios";
 import {Layout, Icon, Avatar, Menu, Dropdown} from "antd";
 import {UserContext} from "../../util/user-context";
+import {parseVersion} from "../../util/environment";
 import logo from "./logo.svg";
 import styles from "./header.module.scss";
 import {Application} from "../../config/application.config";
@@ -59,26 +60,6 @@ const Header:React.FC<Props> = (props) => {
     return "https://docs.marklogic.com/datahub/" + versionNum;
   };
 
-  const parseVersion = (value) => {
-    if (value === "") {
-      return "";
-    } else {
-      let version = "";
-      let flag = false;
-      for (let c in value) {
-        if (value[c] !== "." && value[c] !== "-") {
-          version += value[c];
-        } else if (value[c] === "." && flag === false) {
-          flag = true;
-          version += value[c];
-        } else {
-          break;
-        }
-      }
-      return version;
-    }
-  };
-
   const logoutKeyDownHandler = (event) => {
     if (event.key === "Tab") {
       toggleUserDropdown(false);

marklogic-data-hub-central/ui/src/config/overview.config.ts

@@ -1,12 +1,21 @@
 const VERSION = "5.5";
 
-const documentationLinkRoot = "https://docs.marklogic.com/datahub/" + VERSION + "/";
+const documentationLinkRoot = "https://docs.marklogic.com/datahub/";
 const documentationLinks = {
-    load: documentationLinkRoot + "flows/loading-with-hubcentral.html",
-    model: documentationLinkRoot + "entities/modeling-with-hubcentral.html",
-    curate: documentationLinkRoot + "flows/curating-with-hubcentral.html",
-    run: documentationLinkRoot + "flows/running-steps-with-hubcentral.html",
-    explore: documentationLinkRoot + "tools/hubcentral/exploring-with-hubcentral.html",
+    tileSpecificLink: function (versionNum, tile) {
+      switch (tile) {
+        case "load": 
+          return documentationLinkRoot + versionNum + "/" + "flows/loading-with-hubcentral.html"
+        case "model": 
+          return documentationLinkRoot + versionNum + "/" + "entities/modeling-with-hubcentral.html" 
+        case "curate":
+          return documentationLinkRoot + versionNum + "/" + "flows/curating-with-hubcentral.html"
+        case "run":
+          return documentationLinkRoot + versionNum + "/" + "flows/running-steps-with-hubcentral.html"
+        case "explore": 
+          return documentationLinkRoot + versionNum + "/" + "tools/hubcentral/exploring-with-hubcentral.html"
+      }
+    }
 }
 
 // TODO Video Tutorial links currently pegged to version 5.4, see: DHFPROD-7513

marklogic-data-hub-central/ui/src/pages/Overview.test.tsx

@@ -5,12 +5,14 @@ import userEvent from "@testing-library/user-event";
 import {render, fireEvent} from "@testing-library/react";
 import Overview from "./Overview";
 import overviewConfig from "../config/overview.config";
+import data from "../assets/mock-data/system-info.data";
 
 describe("Overview component", () => {
 
   it("Verify content display", async () => {
 
-    const {getByText, getByLabelText, getAllByText} = render(<Overview/>);
+    let enabled = ["load", "model", "curate", "run", "explore"];
+    const {getByText, getByLabelText, getAllByText} = render(<Overview enabled={enabled} environment={data.environment}/>);
 
     expect(getByLabelText("overview")).toBeInTheDocument();
 
@@ -35,7 +37,7 @@ describe("Overview component", () => {
     history.push("/tiles"); // initial state
 
     let enabled = ["load", "model", "curate", "run", "explore"];
-    const {getByLabelText, queryAllByText} = render(<Router history={history}><Overview enabled={enabled}/></Router>);
+    const {getByLabelText, queryAllByText} = render(<Router history={history}><Overview enabled={enabled} environment={data.environment}/></Router>);
 
     enabled.forEach((card, i) => {
       expect(getByLabelText(card + "-card")).toHaveClass(`enabled`);
@@ -52,7 +54,7 @@ describe("Overview component", () => {
     history.push("/tiles"); // initial state
 
     let disabled = ["load", "model", "curate", "run", "explore"];
-    const {getByLabelText, getAllByText} = render(<Router history={history}><Overview enabled={[]}/></Router>);
+    const {getByLabelText, getAllByText} = render(<Router history={history}><Overview enabled={[]} environment={data.environment}/></Router>);
 
     disabled.forEach((card, i) => {
       expect(getByLabelText(card + "-card")).toHaveClass(`disabled`);
@@ -70,7 +72,7 @@ describe("Overview component", () => {
     history.push("/tiles");
 
     let enabled = ["load", "model", "curate", "run", "explore"];
-    const {getByLabelText} = render(<Router history={history}><Overview enabled={enabled}/></Router>);
+    const {getByLabelText} = render(<Router history={history}><Overview enabled={enabled} environment={data.environment}/></Router>);
 
     enabled.forEach((id, i) => {
       let card = getByLabelText(id + "-card");
@@ -91,7 +93,7 @@ describe("Overview component", () => {
     history.push("/tiles");
 
     let enabled = ["load", "model", "curate", "run", "explore"];
-    const {getByLabelText} = render(<Router history={history}><Overview enabled={enabled}/></Router>);
+    const {getByLabelText} = render(<Router history={history}><Overview enabled={enabled} environment={data.environment}/></Router>);
 
     getByLabelText("load-card").focus();
     expect(getByLabelText("load-card")).toHaveFocus();
@@ -116,7 +118,7 @@ describe("Overview component", () => {
     history.push("/tiles");
 
     let enabled = ["load", "model", "curate", "run", "explore"];
-    const {getByLabelText} = render(<Router history={history}><Overview enabled={enabled}/></Router>);
+    const {getByLabelText} = render(<Router history={history}><Overview enabled={enabled} environment={data.environment}/></Router>);
 
     // map of which card to go next if up/down/left/right arrow keys are pressed on a card
     const directionMap = {
@@ -152,7 +154,7 @@ describe("Overview component", () => {
     history.push("/tiles"); // initial state
 
     let enabled = ["load", "model", "curate", "run", "explore"];
-    const {getAllByText} = render(<Router history={history}><Overview enabled={enabled}/></Router>);
+    const {getAllByText} = render(<Router history={history}><Overview enabled={enabled} environment={data.environment}/></Router>);
 
     // Mock method for opening links
     const mockedWindowOpen = jest.fn();
@@ -164,7 +166,7 @@ describe("Overview component", () => {
     expect(documentationLinks.length === enabled.length); // All cards should have Documentation links
     documentationLinks.forEach((docLink, i) => {
       fireEvent.click(docLink);
-      expect(mockedWindowOpen).toBeCalledWith(overviewConfig.documentationLinks[enabled[i]], "_blank");
+      expect(mockedWindowOpen).toBeCalledWith(overviewConfig.documentationLinks.tileSpecificLink(5.3, enabled[i]), "_blank");
     });
 
     // Check Video Tutorial links

marklogic-data-hub-central/ui/src/pages/Overview.tsx

@@ -7,9 +7,11 @@ import {Popover} from "antd";
 import "./Overview.scss";
 import modelingInfoIcon from "../assets/icon_helpInfo.png";
 import {ToolbarBulbIconInfo} from "../config/tooltips.config";
+import {parseVersion} from "../util/environment";
 
 interface Props {
     enabled: any;
+    environment: any;
 }
 
 const Overview: React.FC<Props> = (props) => {
@@ -29,7 +31,8 @@ const Overview: React.FC<Props> = (props) => {
 
   const openDocumentation = (e, type) => {
     if (e) e.stopPropagation(); // Stop click from also opening tile
-    window.open(overviewConfig.documentationLinks[type], "_blank");
+    let versionNum = parseVersion(props.environment.dataHubVersion);
+    window.open(overviewConfig.documentationLinks.tileSpecificLink(versionNum, type), "_blank");
   };
 
   const openVideo = (e, type) => {

marklogic-data-hub-central/ui/src/pages/TilesView.tsx

@@ -4,6 +4,7 @@ import Toolbar from "../components/tiles/toolbar";
 import Tiles from "../components/tiles/tiles";
 import styles from "./TilesView.module.scss";
 import "./TilesView.scss";
+import {getEnvironment} from "../util/environment";
 
 import Overview from "./Overview";
 import Load from "./Load";
@@ -155,7 +156,7 @@ const TilesView = (props) => {
             </ConfigProvider>
           ) : null }
         </div>) :
-        <Overview enabled={enabled}/>
+        <Overview enabled={enabled} environment={getEnvironment()}/>
       }
       <Toolbar tiles={tiles} enabled={enabled}/>
     </>

marklogic-data-hub-central/ui/src/util/environment.tsx

@@ -27,6 +27,26 @@ export function getEnvironment():any {
   }
 }
 
+export function parseVersion(value):any {
+  if (value === "") {
+    return "";
+  } else {
+    let version = "";
+    let flag = false;
+    for (let c in value) {
+      if (value[c] !== "." && value[c] !== "-") {
+        version += value[c];
+      } else if (value[c] === "." && flag === false) {
+        flag = true;
+        version += value[c];
+      } else {
+        break;
+      }
+    }
+    return version;
+  }
+}
+
 export function resetEnvironment() {
   localStorage.setItem("environment", JSON.stringify(defaultEnv));
 }