implemented individual routes per nav item

replaced Router by HashRouter
red-hat-storage · Aug 3, 2023 · ff07835 · ff07835
1 parent bb5160e
commit ff07835
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 76 deletions.
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -0,0 +1,46 @@
+import * as React from "react";
+import { useHistory, useLocation } from "react-router-dom";
+import { Nav, NavItem, NavList } from "@patternfly/react-core";
+import * as _ from "lodash";
+import "./navBar.css";
+
+const Navigation: React.FunctionComponent = () => {
+  const history = useHistory();
+  const location = useLocation();
+  const [activeItem, setActiveItem] = React.useState<string>("workloads");
+  const routes = ["workloads", "storage", "compute", "results"];
+
+  const onSelect = React.useCallback(
+    (result: { itemId: string | number }) => {
+      setActiveItem(result.itemId as string);
+      history.push(`/${result.itemId}`);
+    },
+    [history]
+  );
+
+  React.useEffect(() => {
+    const pathname = location?.pathname?.replace?.("/", "");
+    if (!pathname) return;
+    setActiveItem(pathname);
+  }, [location]);
+
+  return (
+    <Nav onSelect={onSelect} variant="horizontal" aria-label="Navigation bar">
+      <NavList>
+        {routes.map((route: string) => (
+          <NavItem
+            id={`nav-item-${route}`}
+            key={route}
+            preventDefault
+            itemId={route}
+            isActive={activeItem === route}
+          >
+            {_.capitalize(route)}
+          </NavItem>
+        ))}
+      </NavList>
+    </Nav>
+  );
+};
+
+export default Navigation;
diff --git a/src/components/Navbar/index.ts b/src/components/Navbar/index.ts
@@ -0,0 +1 @@
+export { default as default } from "./Navbar";
diff --git a/src/components/Navbar/navBar.css b/src/components/Navbar/navBar.css
@@ -0,0 +1,41 @@
+.pf-c-nav.pf-m-horizontal {
+  background-color: var(--pf-global--Color--light-100);
+  padding-left: 1.75rem;
+  --pf-c-nav__link--FontSize: 1.4rem;
+  --pf-c-nav__link--FontWeight: var(
+    --pf-global--FontWeight--overpass--semi-bold
+  );
+  border-bottom: var(--pf-global--BorderWidth--sm) solid
+    var(--pf-global--palette--black-300);
+}
+
+.pf-c-nav__link {
+  --pf-c-nav__link--Color: var(--pf-global--palette--black-600);
+  --pf-c-nav__link--PaddingTop: var(--pf-global--spacer--sm);
+  --pf-c-nav__link--PaddingRight: var(--pf-global--spacer--md);
+  --pf-c-nav__link--PaddingBottom: var(--pf-global--spacer--sm);
+  --pf-c-nav__link--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-nav__link--m-current--Color: var(--pf-global--palette--blue-400);
+}
+
+.pf-c-nav__link:active {
+  --pf-c-nav__link--active--Color: var(--pf-global--palette--black-600);
+}
+
+.pf-c-nav__link:hover {
+  --pf-c-nav__link--hover--Color: var(--pf-global--palette--black-600);
+}
+
+.pf-c-nav__link::before {
+  --pf-c-nav__link--before--BorderColor: currentColor;
+  --pf-c-nav--m-horizontal__link--Right: 0;
+  --pf-c-nav--m-horizontal__link--Left: 0;
+}
+
+.pf-c-nav__link:hover::before {
+  --pf-c-nav__link--before--BorderColor: var(--pf-global--palette--black-300);
+}
+
+.pf-c-nav__link.pf-m-current:hover::before {
+  --pf-c-nav__link--before--BorderColor: currentColor;
+}
diff --git a/src/components/Tour/Tour.ts b/src/components/Tour/Tour.ts
@@ -10,7 +10,7 @@ const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
 const doesElementExist = (element) =>
   document.querySelector(`${element}`) !== null;
 
-const generateTabId = (id: string, key: number) => `#pf-tab-${key}-${id}`;
+const generateTabId = (id: string) => `#nav-item-${id}`;
 
 export const getSizerTour: GetSizeTour = (dispatch) => {
   const tour = new Shepherd.Tour({
@@ -53,7 +53,7 @@ export const getSizerTour: GetSizeTour = (dispatch) => {
       title: "The main navigation",
       text: "Use the tabs to navigate between defining your <b>Workloads</b>, configuring required <b>Storage</b>, setting your desired <b>Compute</b> sizes and to view your current Sizer <b>Results</b>",
       attachTo: {
-        element: ".pf-c-tabs",
+        element: ".pf-c-nav",
         on: "bottom",
       },
       buttons: [
@@ -71,7 +71,7 @@ export const getSizerTour: GetSizeTour = (dispatch) => {
       title: "Workloads",
       text: "On this page you add your list of Applications that will run on your cluster. We have some common use cases ready as Templates. Defining custom Workloads is also possible.",
       attachTo: {
-        element: generateTabId("workloads-tab", 0),
+        element: generateTabId("workloads"),
         on: "bottom",
       },
       buttons: [
@@ -89,7 +89,7 @@ export const getSizerTour: GetSizeTour = (dispatch) => {
       title: "Storage",
       text: "Here you define the OpenShift Data Foundation installation which will add persistent storage to your Workloads.",
       attachTo: {
-        element: generateTabId("storage-tab", 1),
+        element: generateTabId("storage"),
         on: "top",
       },
       beforeShowPromise: async () => {
@@ -153,7 +153,7 @@ export const getSizerTour: GetSizeTour = (dispatch) => {
       title: "Compute",
       text: "On this page you can set your instance sizes that make up your OpenShift cluster. We have instance sizes for the most popular public clouds built in, otherwise you can use the BareMetal configuration.",
       attachTo: {
-        element: generateTabId("compute-tab", 2),
+        element: generateTabId("compute"),
         on: "bottom",
       },
       buttons: [
@@ -193,7 +193,7 @@ export const getSizerTour: GetSizeTour = (dispatch) => {
       },
       title: "Results",
       attachTo: {
-        element: generateTabId("results-tab", 3),
+        element: generateTabId("results"),
         on: "bottom",
       },
       text: "Generic information on how we calculate the cluster will be visible here and auto-update when you change inputs on the other tabs.",

diff --git a/src/components/sizer.tsx b/src/components/sizer.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Provider, useDispatch, useSelector } from "react-redux";
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
-import { Page, Spinner, Tab, Tabs, TabTitleText } from "@patternfly/react-core";
+import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
+import { Page, Spinner } from "@patternfly/react-core";
 import { request } from "@octokit/request";
 import Header from "./Header/Header";
 import {
@@ -30,6 +30,7 @@ import * as Cookies from "js-cookie";
 import { useSetupAPI } from "../api";
 import { getODFWorkload } from "../workloads";
 import { ODF_DEDICATED_MS_NAME, ODF_WORKLOAD_NAME } from "../constants";
+import Navbar from "./Navbar";
 
 const LazyResultsPage = React.lazy(() => import("./Results/ResultsPage"));
 const LazyComputePage = React.lazy(() => import("./Compute/ComputePage"));
@@ -43,7 +44,6 @@ export const GAContext =
 
 export const Sizer_: React.FC = () => {
   const dispatch = useDispatch();
-  const activeTab = useSelector((state: Store) => state.ui.activeTab);
   const [activeModal, setActiveModal] = React.useState("");
   const coreState = useSelector((state: Store) => _.omit(state, "ui"));
   const prevState = React.useRef<Omit<Store, "ui">>();
@@ -184,92 +184,46 @@ export const Sizer_: React.FC = () => {
 
   return (
     <GAContext.Provider value={analytics}>
-      <Router>
+      <HashRouter>
         <Page header={HeaderComponent} className="sizer-page">
+          <Navbar />
           <React.Suspense
             fallback={<Spinner isSVG aria-label="Basic Spinner" />}
           >
             <LazyAboutModal
               isOpen={activeModal === "About"}
               onClose={() => setActiveModal("")}
             />
-          </React.Suspense>
-          <React.Suspense
-            fallback={<Spinner isSVG aria-label="Basic Spinner" />}
-          >
             <LazyFAQModal
               isOpen={activeModal === "FAQ"}
               onClose={() => setActiveModal("")}
             />
+            <Switch>
+              <Route path="/workloads">
+                <LazyWorkloadPage />
+              </Route>
+              <Route path="/storage">
+                <LazyStoragePage />
+              </Route>
+              <Route path="/compute">
+                <LazyComputePage />
+              </Route>
+              <Route path="/results">
+                <LazyResultsPage />
+              </Route>
+              <Redirect from="/" to="/workloads" />
+            </Switch>
           </React.Suspense>
-          <Switch>
-            <Route path="/">
-              <ErrorBoundary>
-                <Tabs
-                  activeKey={activeTab}
-                  onSelect={(_e, tabIndex) =>
-                    dispatch(setTab(tabIndex as number))
-                  }
-                  unmountOnExit
-                  mountOnEnter
-                >
-                  <Tab
-                    eventKey={0}
-                    title={<TabTitleText>Workloads</TabTitleText>}
-                    id="workloads-tab"
-                  >
-                    <React.Suspense
-                      fallback={<Spinner isSVG aria-label="Basic Spinner" />}
-                    >
-                      <LazyWorkloadPage />
-                    </React.Suspense>
-                  </Tab>
-                  <Tab
-                    className="sizer-section"
-                    eventKey={1}
-                    title={<TabTitleText>Storage</TabTitleText>}
-                    id="storage-tab"
-                  >
-                    <React.Suspense
-                      fallback={<Spinner isSVG aria-label="Basic Spinner" />}
-                    >
-                      <LazyStoragePage />
-                    </React.Suspense>
-                  </Tab>
-                  <Tab
-                    eventKey={2}
-                    title={<TabTitleText>Compute</TabTitleText>}
-                    id="compute-tab"
-                  >
-                    <React.Suspense
-                      fallback={<Spinner isSVG aria-label="Basic Spinner" />}
-                    >
-                      <LazyComputePage />
-                    </React.Suspense>
-                  </Tab>
-                  <Tab
-                    eventKey={3}
-                    title={<TabTitleText>Results</TabTitleText>}
-                    id="results-tab"
-                  >
-                    <React.Suspense
-                      fallback={<Spinner isSVG aria-label="Basic Spinner" />}
-                    >
-                      <LazyResultsPage />
-                    </React.Suspense>
-                  </Tab>
-                </Tabs>
-              </ErrorBoundary>
-            </Route>
-          </Switch>
         </Page>
-      </Router>
+      </HashRouter>
     </GAContext.Provider>
   );
 };
 
 export const Sizer: React.FC = () => (
   <Provider store={store}>
-    <Sizer_ />
+    <ErrorBoundary>
+      <Sizer_ />
+    </ErrorBoundary>
   </Provider>
 );