DHFPROD-9923: Enable HC UI Navigation on ML Cloud

briantang · Sanjeevani19 · commit fe4f44735798 · 2023-08-21T15:39:43.000-05:00
diff --git a/marklogic-data-hub-central/ui/src/App.tsx b/marklogic-data-hub-central/ui/src/App.tsx
@@ -1,5 +1,5 @@
 import React, {useEffect, useContext} from "react";
-import axios from "axios";
+import axios from "@config/axios";
 import {Switch} from "react-router";
 import {Route, Redirect, RouteComponentProps, withRouter} from "react-router-dom";
 import {UserContext} from "@util/user-context";
diff --git a/marklogic-data-hub-central/ui/src/api/environment.ts b/marklogic-data-hub-central/ui/src/api/environment.ts
@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios from "@config/axios";
 
 export const getSystemInfo = async () => {
   return await axios.get(`/api/environment/systemInfo`);
diff --git a/marklogic-data-hub-central/ui/src/api/facets.tsx b/marklogic-data-hub-central/ui/src/api/facets.tsx
@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios from "@config/axios";
 
 export const rangeFacet = async (props, database) => {
   return await axios({
diff --git a/marklogic-data-hub-central/ui/src/api/mapping.tsx b/marklogic-data-hub-central/ui/src/api/mapping.tsx
@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios from "@config/axios";
 import {getStep, updateStep} from "./steps";
 
 export const updateMappingArtifact = async mapping => {
diff --git a/marklogic-data-hub-central/ui/src/api/matching.ts b/marklogic-data-hub-central/ui/src/api/matching.ts
@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios from "@config/axios";
 
 export const updateMatchingArtifact = async matching => {
   try {
diff --git a/marklogic-data-hub-central/ui/src/api/merging.ts b/marklogic-data-hub-central/ui/src/api/merging.ts
@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios from "@config/axios";
 
 export const updateMergingArtifact = async merging => {
   try {
diff --git a/marklogic-data-hub-central/ui/src/api/modeling.ts b/marklogic-data-hub-central/ui/src/api/modeling.ts
@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios from "@config/axios";
 import {EntityModified} from "../types/modeling-types";
 
 export const primaryEntityTypes = async () => {
diff --git a/marklogic-data-hub-central/ui/src/api/queries.tsx b/marklogic-data-hub-central/ui/src/api/queries.tsx
@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios from "@config/axios";
 
 export const creatNewQuery = async query => {
   return await axios({
diff --git a/marklogic-data-hub-central/ui/src/api/record.tsx b/marklogic-data-hub-central/ui/src/api/record.tsx
@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios from "@config/axios";
 
 export const getRecord = async (uri, database) => {
   let encodedUri = encodeURIComponent(uri);
diff --git a/marklogic-data-hub-central/ui/src/api/steps.tsx b/marklogic-data-hub-central/ui/src/api/steps.tsx
@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios from "@config/axios";
 
 export const createStep = async (name, type, settings) => {
   return await axios.post(`/api/steps/${type}`, settings);
diff --git a/marklogic-data-hub-central/ui/src/components/advanced-settings/advanced-settings.tsx b/marklogic-data-hub-central/ui/src/components/advanced-settings/advanced-settings.tsx
@@ -1,5 +1,5 @@
 import React, {useState, useEffect, useContext, useRef} from "react";
-import Axios from "axios";
+import axios from "@config/axios";
 import Select, {components as SelectComponents} from "react-select";
 import CreatableSelect from "react-select/creatable";
 import reactSelectThemeConfig from "@config/react-select-theme.config";
@@ -312,10 +312,8 @@ const AdvancedSettings: React.FC<Props> = props => {
       if (usesAdvancedTargetCollections) {
         const targetEntityType = String(props.stepData.targetEntityType || props.stepData.targetEntity);
         const targetEntityTitle = targetEntityType.substring(targetEntityType.lastIndexOf("/") + 1);
-        const defaultCollectionsURL = `/api/steps/${stepType}/defaultCollections/${encodeURIComponent(
-          targetEntityTitle,
-        )}`;
-        const defaultCollectionsResp = await Axios.get(defaultCollectionsURL);
+        const defaultCollectionsURL = `/api/steps/${stepType}/defaultCollections/${encodeURIComponent(targetEntityTitle)}`;
+        const defaultCollectionsResp = await axios.get(defaultCollectionsURL);
         if (defaultCollectionsResp.status === 200) {
           setDefaultTargetCollections(defaultCollectionsResp.data);
         }
diff --git a/marklogic-data-hub-central/ui/src/components/entities/create-edit-step/create-edit-step.tsx b/marklogic-data-hub-central/ui/src/components/entities/create-edit-step/create-edit-step.tsx
@@ -1,6 +1,6 @@
 import React, {useState, useEffect, useContext, useRef} from "react";
 import {Row, Col, Form, FormControl, FormLabel} from "react-bootstrap";
-import axios from "axios";
+import axios from "@config/axios";
 import styles from "./create-edit-step.module.scss";
 import "./create-edit-step.scss";
 import {UserContext} from "@util/user-context";
diff --git a/marklogic-data-hub-central/ui/src/components/entities/entity-tiles.tsx b/marklogic-data-hub-central/ui/src/components/entities/entity-tiles.tsx
@@ -13,7 +13,7 @@ import MappingCard from "./mapping/mapping-card";
 import {MappingStepMessages} from "@config/tooltips.config";
 import MatchingCard from "./matching/matching-card";
 import MergingCard from "./merging/merging-card";
-import axios from "axios";
+import axios from "@config/axios";
 import {faTimesCircle} from "@fortawesome/free-solid-svg-icons";
 import {sortStepsByUpdated} from "@util/conversionFunctions";
 import styles from "./entity-tiles.module.scss";
diff --git a/marklogic-data-hub-central/ui/src/components/entities/merging/merging-step-detail/merging-step-detail.tsx b/marklogic-data-hub-central/ui/src/components/entities/merging/merging-step-detail/merging-step-detail.tsx
@@ -6,7 +6,7 @@ import {MergingStep, defaultPriorityOption} from "../../../../types/curation-typ
 import React, {useContext, useEffect, useState} from "react";
 import {clearSessionStorageOnRefresh, getViewSettings, setViewSettings} from "@util/user-context";
 
-import Axios from "axios";
+import axios from "@config/axios";
 import {CurationContext} from "@util/curation-context";
 import CustomPageHeader from "../../page-header/page-header";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
@@ -175,9 +175,7 @@ const MergingStepDetail: React.FC = () => {
   const retrieveCalculatedMergingActivity = async (mergingStepArtifact: MergingStep) => {
     if (mergingStepArtifact && mergingStepArtifact.name) {
       try {
-        const calculatedMergingActivityResp = await Axios.get(
-          `/api/steps/merging/${mergingStepArtifact.name}/calculateMergingActivity`,
-        );
+        const calculatedMergingActivityResp = await axios.get(`/api/steps/merging/${mergingStepArtifact.name}/calculateMergingActivity`);
         if (calculatedMergingActivityResp.status === 200) {
           setSourceNames(calculatedMergingActivityResp.data.sourceNames || []);
         }
diff --git a/marklogic-data-hub-central/ui/src/components/flows/flows.tsx b/marklogic-data-hub-central/ui/src/components/flows/flows.tsx
@@ -7,7 +7,7 @@ import {getViewSettings, setViewSettings} from "@util/user-context";
 import {getUserPreferences, updateUserPreferences} from "../../../src/services/user-preferences";
 import {Flow} from "../../types/run-types";
 import NewFlowDialog from "./new-flow-dialog/new-flow-dialog";
-import axios from "axios";
+import axios from "@config/axios";
 import styles from "./flows.module.scss";
 import {useDropzone} from "react-dropzone";
 import {
diff --git a/marklogic-data-hub-central/ui/src/components/header/header.tsx b/marklogic-data-hub-central/ui/src/components/header/header.tsx
@@ -1,6 +1,6 @@
 import React, {useContext, useState, useEffect, createRef} from "react";
 import {RouteComponentProps, withRouter, useHistory, Link} from "react-router-dom";
-import axios from "axios";
+import axios from "@config/axios";
 import {UserContext} from "@util/user-context";
 import {parseVersion} from "@util/environment";
 import logo from "./logo.svg";
diff --git a/marklogic-data-hub-central/ui/src/components/header/system-info/system-info.tsx b/marklogic-data-hub-central/ui/src/components/header/system-info/system-info.tsx
@@ -7,7 +7,6 @@ import {faCopy, faExclamationTriangle} from "@fortawesome/free-solid-svg-icons";
 import {facetValues, primaryEntityTypes} from "@api/queries";
 
 import {AuthoritiesContext} from "@util/authorities";
-import Axios from "axios";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {QuestionCircleFill} from "react-bootstrap-icons";
 import {Search} from "react-bootstrap-icons";
@@ -16,7 +15,7 @@ import Spinner from "react-bootstrap/Spinner";
 import StepsConfig from "@config/steps.config";
 import {Typeahead} from "react-bootstrap-typeahead";
 import {UserContext} from "@util/user-context";
-import axios from "axios";
+import axios from "@config/axios";
 import {getEnvironment} from "@util/environment";
 import reactSelectThemeConfig from "@config/react-select-theme.config";
 import styles from "./system-info.module.scss";
@@ -198,7 +197,7 @@ const SystemInfo = props => {
           "targetCollection": sourceName,
         };
       }
-      let response = await Axios.post("/api/environment/clearUserData", payload);
+      let response = await axios.post("/api/environment/clearUserData", payload);
       if (response.status === 200) {
         setIsLoading(false);
         setMessage({show: true});
diff --git a/marklogic-data-hub-central/ui/src/components/job-response/job-response.tsx b/marklogic-data-hub-central/ui/src/components/job-response/job-response.tsx
@@ -6,7 +6,7 @@ import {SearchContext} from "@util/search-context";
 import {canStopFlow, isFlowRunning} from "@util/run-utils";
 import {dateConverter, renderDuration, durationFromDateTime} from "@util/date-conversion";
 import styles from "./job-response.module.scss";
-import axios from "axios";
+import axios from "@config/axios";
 import {UserContext} from "@util/user-context";
 import {getMappingArtifactByStepName} from "../../api/mapping";
 import {useHistory} from "react-router-dom";
diff --git a/marklogic-data-hub-central/ui/src/components/login-form/login-form.tsx b/marklogic-data-hub-central/ui/src/components/login-form/login-form.tsx
@@ -1,11 +1,10 @@
 import {Col, Form, Row} from "react-bootstrap";
 import {HCAlert, HCButton, HCInput} from "@components/common";
 import {Lock, Person} from "react-bootstrap-icons";
-import React, {useContext, useState} from "react";
-
+import React, {useContext, useState, useEffect, useRef} from "react";
 import {Spinner} from "react-bootstrap";
 import {UserContext} from "@util/user-context";
-import axios from "axios";
+import axios from "@config/axios";
 import styles from "./login-form.module.scss";
 
 const LoginForm: React.FC = () => {
@@ -16,6 +15,27 @@ const LoginForm: React.FC = () => {
   const [isUsernameTouched, setUsernameTouched] = useState(false);
   const [isPasswordTouched, setPasswordTouched] = useState(false);
   const [message, setMessage] = useState({show: false, text: ""});
+  const formRef = useRef<any>();
+
+  useEffect(() => {
+    let mlAuthenticationFlag = document.cookie.split("; ").filter(row => row.startsWith("mlAuthentication=")).map(c => c.split("=")[1])[0];
+    let basePathURL = document.cookie.split("; ").filter(row => row.startsWith("mlHcBasePath=")).map(c => c.split("=")[1])[0];
+    if (basePathURL) {
+      window.localStorage.setItem("dataHubBasePath", basePathURL);
+    } else {
+      window.localStorage.setItem("dataHubBasePath", "");
+    }
+    if (mlAuthenticationFlag && mlAuthenticationFlag === "cloud") {
+      window.localStorage.setItem("dataHubEnvironmentSettings", mlAuthenticationFlag);
+
+      //automatically submit empty username and password if environment is cloud
+      if (formRef && formRef.current) {
+        formRef.current.dispatchEvent(new Event("submit", {cancelable: true}));
+      }
+    } else {
+      window.localStorage.setItem("dataHubEnvironmentSettings", "");
+    }
+  }, []);
 
   const handleSubmit = async (event: {preventDefault: () => void}) => {
     if (event) event.preventDefault();
@@ -74,7 +94,7 @@ const LoginForm: React.FC = () => {
       </div>
 
       <div className={styles.loginForm}>
-        <Form onSubmit={handleSubmit} className={`container-fluid ${styles.loginForm}`}>
+        <Form onSubmit={handleSubmit} className={`container-fluid ${styles.loginForm}`} ref={formRef}>
           <Row className={"mb-2"}>
             <Col>
               <HCInput
diff --git a/marklogic-data-hub-central/ui/src/components/modal-status/modal-status.tsx b/marklogic-data-hub-central/ui/src/components/modal-status/modal-status.tsx
@@ -1,7 +1,7 @@
 import React, {useState, useContext, useEffect} from "react";
 import {RouteComponentProps, withRouter, useLocation, useHistory} from "react-router-dom";
 import {Modal} from "react-bootstrap";
-import axios from "axios";
+import axios from "@config/axios";
 
 import {UserContext} from "@util/user-context";
 import {useInterval} from "../../hooks/use-interval";
diff --git a/marklogic-data-hub-central/ui/src/components/pop-over-search/pop-over-search.tsx b/marklogic-data-hub-central/ui/src/components/pop-over-search/pop-over-search.tsx
@@ -1,6 +1,6 @@
 import React, {useState, useContext, useEffect} from "react";
 import styles from "./pop-over-search.module.scss";
-import axios from "axios";
+import axios from "@config/axios";
 import {UserContext} from "@util/user-context";
 import {SearchContext} from "@util/search-context";
 import {CheckSquare} from "react-bootstrap-icons";
diff --git a/marklogic-data-hub-central/ui/src/components/queries/managing/manage-query-modal/manage-query.tsx b/marklogic-data-hub-central/ui/src/components/queries/managing/manage-query-modal/manage-query.tsx
@@ -12,7 +12,7 @@ import {Modal} from "react-bootstrap";
 import {QueryOptions} from "../../../../types/query-types";
 import {SearchContext} from "@util/search-context";
 import {UserContext} from "@util/user-context";
-import axios from "axios";
+import axios from "@config/axios";
 import {faTrashAlt} from "@fortawesome/free-regular-svg-icons";
 import {getExportPreview} from "../../../query-export/export-preview/export-preview";
 import {getSavedQueryPreview} from "@api/queries";
diff --git a/marklogic-data-hub-central/ui/src/components/queries/saving/discard-changes/discard-changes-modal.tsx b/marklogic-data-hub-central/ui/src/components/queries/saving/discard-changes/discard-changes-modal.tsx
@@ -2,7 +2,7 @@ import React, {useContext} from "react";
 import {Modal} from "react-bootstrap";
 import {SearchContext} from "@util/search-context";
 import {UserContext} from "@util/user-context";
-import axios from "axios";
+import axios from "@config/axios";
 import {QueryOptions} from "../../../../types/query-types";
 import {HCButton, HCModal} from "@components/common";
 
diff --git a/marklogic-data-hub-central/ui/src/components/queries/saving/edit-save-query/edit-query-details.tsx b/marklogic-data-hub-central/ui/src/components/queries/saving/edit-save-query/edit-query-details.tsx
@@ -1,7 +1,7 @@
 import React, {useState, useEffect, useContext} from "react";
 import {Row, Col, Modal, Form, FormLabel} from "react-bootstrap";
 import styles from "../save-query-modal/save-query-modal.module.scss";
-import axios from "axios";
+import axios from "@config/axios";
 import {UserContext} from "@util/user-context";
 import {SearchContext} from "@util/search-context";
 import {HCInput, HCButton, HCModal} from "@components/common";
diff --git a/marklogic-data-hub-central/ui/src/components/queries/saving/edit-save-query/save-changes-modal.tsx b/marklogic-data-hub-central/ui/src/components/queries/saving/edit-save-query/save-changes-modal.tsx
@@ -2,7 +2,7 @@ import React, {useState, useContext, useEffect} from "react";
 import {Row, Col, Modal, Form, FormLabel} from "react-bootstrap";
 import {SearchContext} from "@util/search-context";
 import styles from "../save-query-modal/save-query-modal.module.scss";
-import axios from "axios";
+import axios from "@config/axios";
 import {UserContext} from "@util/user-context";
 import {QueryOptions} from "../../../../types/query-types";
 import {HCInput, HCButton, HCModal} from "@components/common";
diff --git a/marklogic-data-hub-central/ui/src/config/axios.js b/marklogic-data-hub-central/ui/src/config/axios.js
@@ -0,0 +1,12 @@
+import axios from "axios";
+
+let mlAuthentication = window.localStorage.getItem("dataHubEnvironmentSettings");
+let mlBasePathURL =  window.localStorage.getItem("dataHubBasePath");
+
+const instance = mlAuthentication === "cloud" ? 
+  axios.create({
+    baseURL: `${mlBasePathURL}`
+  }) :
+  axios.create({});
+
+export default instance;
diff --git a/marklogic-data-hub-central/ui/src/pages/Browse.tsx b/marklogic-data-hub-central/ui/src/pages/Browse.tsx
@@ -1,5 +1,5 @@
 import React, {useState, useEffect, useContext, useRef, useLayoutEffect} from "react";
-import axios from "axios";
+import axios from "@config/axios";
 import {RouteComponentProps, withRouter} from "react-router-dom";
 import {UserContext} from "@util/user-context";
 import {SearchContext} from "@util/search-context";
diff --git a/marklogic-data-hub-central/ui/src/pages/Curate.tsx b/marklogic-data-hub-central/ui/src/pages/Curate.tsx
@@ -5,7 +5,7 @@ import {AuthoritiesContext} from "@util/authorities";
 import EntityTiles from "@components/entities/entity-tiles";
 import {ErrorMessageContext} from "@util/error-message-context";
 import {MissingPagePermission} from "@config/messages.config";
-import axios from "axios";
+import axios from "@config/axios";
 import styles from "./Curate.module.scss";
 import tiles from "@config/tiles.config";
 import {useHistory} from "react-router-dom";
diff --git a/marklogic-data-hub-central/ui/src/pages/Detail.tsx b/marklogic-data-hub-central/ui/src/pages/Detail.tsx
@@ -1,5 +1,5 @@
 import React, {useState, useEffect, useContext, useRef} from "react";
-import axios from "axios";
+import axios from "@config/axios";
 import dayjs from "dayjs";
 import {RouteComponentProps, withRouter} from "react-router-dom";
 import {UserContext} from "@util/user-context";
diff --git a/marklogic-data-hub-central/ui/src/pages/Load.tsx b/marklogic-data-hub-central/ui/src/pages/Load.tsx
@@ -5,7 +5,7 @@ import ViewSwitch from "@components/common/switch-view/view-switch";
 import LoadList from "@components/load/load-list";
 import LoadCard from "@components/load/load-card";
 import {getViewSettings, setViewSettings, UserContext} from "@util/user-context";
-import axios from "axios";
+import axios from "@config/axios";
 import {createStep, updateStep, getSteps, deleteStep} from "@api/steps";
 import {sortStepsByUpdated} from "@util/conversionFunctions";
 import {AuthoritiesContext} from "@util/authorities";
diff --git a/marklogic-data-hub-central/ui/src/pages/Monitor.tsx b/marklogic-data-hub-central/ui/src/pages/Monitor.tsx
@@ -3,7 +3,7 @@ import styles from "./Monitor.module.scss";
 import {AuthoritiesContext} from "@util/authorities";
 import tiles from "@config/tiles.config";
 import {MissingPagePermission} from "@config/messages.config";
-import axios from "axios";
+import axios from "@config/axios";
 import {UserContext} from "@util/user-context";
 import JobResultsTableView from "@components/job-results-table-view/job-results-table-view";
 import SearchPagination from "@components/search-pagination/search-pagination";
diff --git a/marklogic-data-hub-central/ui/src/pages/Run.tsx b/marklogic-data-hub-central/ui/src/pages/Run.tsx
@@ -1,7 +1,7 @@
 import React, {useState, useEffect, useContext} from "react";
 import styles from "./Run.module.scss";
 import Flows from "@components/flows/flows";
-import axios from "axios";
+import axios from "@config/axios";
 import {AuthoritiesContext} from "@util/authorities";
 import {UserContext} from "@util/user-context";
 import tiles from "../config/tiles.config";
diff --git a/marklogic-data-hub-central/ui/src/util/manageArtifacts-service.tsx b/marklogic-data-hub-central/ui/src/util/manageArtifacts-service.tsx
@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios from "@config/axios";
 
 const getMappingValidationResp = async (mapName: string, map, uri: string, dbName: string) => {
   let resp = await axios.post(`/api/artifacts/mapping/validation?uri=${encodeURIComponent(uri)}&db=${dbName}`, map);
diff --git a/marklogic-data-hub-central/ui/src/util/search-service.tsx b/marklogic-data-hub-central/ui/src/util/search-service.tsx
@@ -1,4 +1,4 @@
-import axios from "axios";
+import axios from "@config/axios";
 
 const getUris = async (stepName: string, count: number) => {
   let resp = await axios.get(`/api/steps/mapping/${stepName}/uris?limit=${count}`);
diff --git a/marklogic-data-hub-central/ui/src/util/stomp.ts b/marklogic-data-hub-central/ui/src/util/stomp.ts
@@ -3,7 +3,7 @@ import React from "react";
 import SockJS from "sockjs-client";
 import {Subject, BehaviorSubject} from "rxjs";
 import {Client, Message, Stomp} from "stompjs/lib/stomp.min";
-import axios from "axios";
+import axios from "@config/axios";
 
 /** possible states for the STOMP service */
 export enum STOMPState {
diff --git a/marklogic-data-hub-central/ui/src/util/user-context.tsx b/marklogic-data-hub-central/ui/src/util/user-context.tsx
@@ -8,7 +8,7 @@ import {AuthoritiesContext} from "./authorities";
 import {MAX_SESSION_TIME} from "@config/application.config";
 import {Subscription} from "rxjs";
 import {ViewSettingsType} from "../types/view-types";
-import axios from "axios";
+import axios from "@config/axios";
 import {useHistory} from "react-router-dom";
 
 const defaultUserData = {
@@ -88,13 +88,13 @@ const UserProvider: React.FC<{children: any}> = ({children}) => {
       if (request) {
         const requestHash = getConfigHash(request);
         if (encounteredErrors.includes(requestHash)) {
-          throw new axios.Cancel(requestHash);
+          throw new Error("Cancel Request");
         }
       }
       return request;
     },
     error => {
-      if (error instanceof axios.Cancel && encounteredErrors.includes(error.message)) {
+      if (error instanceof Error && encounteredErrors.includes(error.message)) {
         return new Promise(r => setTimeout(r, 5000)).then(r => {
           // forget the error after 5 seconds.
           if (encounteredErrors.includes(error.message)) {

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-import axios from "axios";`
	`1`	`+import axios from "@config/axios";`
`2`	`2`
`3`	`3`	`export const getSystemInfo = async () => {`
`4`	`4`	return await axios.get(`/api/environment/systemInfo`);