From 277df9bdd45ba166f4e0103d233bcdeaf20de2d9 Mon Sep 17 00:00:00 2001
From: MVarshini <varm@redhat.com>
Date: Mon, 2 Oct 2023 17:59:40 +0530
Subject: [PATCH] Spinner and Page Navigation issues (#3543)

* PBENCH-1263
Spinner and Page Navigation issues
---
 dashboard/src/App.js                           |  4 ++++
 .../components/HeaderComponent/index.jsx       |  5 ++---
 .../components/LoadingComponent/index.less     |  8 ++++++--
 .../SidebarComponent/sideMenuOptions.js        | 18 ++++++++++--------
 .../components/TableComponent/index.jsx        |  6 ------
 dashboard/src/utils/routeConstants.js          | 11 ++++++-----
 6 files changed, 28 insertions(+), 24 deletions(-)

diff --git a/dashboard/src/App.js b/dashboard/src/App.js
index 2acf1e5def..1eb46ebbef 100644
--- a/dashboard/src/App.js
+++ b/dashboard/src/App.js
@@ -101,6 +101,10 @@ const App = () => {
                       element={<ComparisonComponent />}
                     />
                   </Route>
+                  <Route
+                    path={APP_ROUTES.ALL_RUNS}
+                    element={<ComingSoonPage />}
+                  />
                   <Route
                     path={APP_ROUTES.SEARCH}
                     element={<ComingSoonPage />}
diff --git a/dashboard/src/modules/components/HeaderComponent/index.jsx b/dashboard/src/modules/components/HeaderComponent/index.jsx
index 841477f94d..aa5cda8212 100644
--- a/dashboard/src/modules/components/HeaderComponent/index.jsx
+++ b/dashboard/src/modules/components/HeaderComponent/index.jsx
@@ -28,13 +28,12 @@ import {
 } from "@patternfly/react-core";
 import { NAVBAR_CLOSE, NAVBAR_OPEN } from "actions/types";
 import React, { useState } from "react";
+import { movePage, sessionLogout } from "actions/authActions";
 import { useDispatch, useSelector } from "react-redux";
 import { useLocation, useNavigate } from "react-router-dom";
 
-import { sessionLogout } from "actions/authActions";
 import pbenchLogo from "assets/logo/pbench_logo.svg";
 import { useKeycloak } from "@react-keycloak/web";
-import { movePage } from "actions/authActions";
 
 const HeaderToolbar = () => {
   const dispatch = useDispatch();
@@ -143,7 +142,7 @@ const HeaderComponent = () => {
         </PageToggleButton>
       </MastheadToggle>
       <MastheadMain>
-        <MastheadBrand>
+        <MastheadBrand href={"/" + APP_ROUTES.HOME}>
           <Brand src={pbenchLogo} className="header-logo" alt="pbench Logo" />
         </MastheadBrand>
       </MastheadMain>
diff --git a/dashboard/src/modules/components/LoadingComponent/index.less b/dashboard/src/modules/components/LoadingComponent/index.less
index 6759296ee3..eea05cc8eb 100644
--- a/dashboard/src/modules/components/LoadingComponent/index.less
+++ b/dashboard/src/modules/components/LoadingComponent/index.less
@@ -5,9 +5,13 @@
     width: 15%;
     height: 15%;
     position: absolute;
-    top: 30%;
-    left: 30%;
+    top: 35%;
+    left: 50%;
     z-index: 9999;
+    .pf-c-spinner {
+      width: 40px;
+      height: 40px;
+    }
   }
 }
 .main-with-spinner {
diff --git a/dashboard/src/modules/components/SidebarComponent/sideMenuOptions.js b/dashboard/src/modules/components/SidebarComponent/sideMenuOptions.js
index f9e341ffcf..b615ffc81e 100644
--- a/dashboard/src/modules/components/SidebarComponent/sideMenuOptions.js
+++ b/dashboard/src/modules/components/SidebarComponent/sideMenuOptions.js
@@ -1,3 +1,5 @@
+import * as APP_ROUTES from "utils/routeConstants";
+
 export const menuOptions = [
   {
     group: { key: "dashboard", title: "Dashboard" },
@@ -7,35 +9,35 @@ export const menuOptions = [
         submenu: true,
         key: "overview",
         submenuOf: "dashboard",
-        link: "overview",
+        link: APP_ROUTES.OVERVIEW,
       },
       {
         name: "Analysis",
         submenu: true,
         key: "analysis",
         submenuOf: "dashboard",
-        link: "analysis",
+        link: APP_ROUTES.ANALYSIS,
       },
       {
         name: "All runs",
         submenu: true,
         key: "all_runs",
         submenuOf: "dashboard",
-        link: "all_runs",
+        link: APP_ROUTES.ALL_RUNS,
       },
       {
         name: "Results",
         submenu: true,
         key: "results",
         submenuOf: "dashboard",
-        link: "results",
+        link: APP_ROUTES.RESULTS,
       },
       {
         name: "Visualization",
         submenu: true,
         key: "visualization",
         submenuOf: "dashboard",
-        link: "visualization",
+        link: APP_ROUTES.VISUALIZATION,
       },
     ],
   },
@@ -47,7 +49,7 @@ export const menuOptions = [
         submenu: true,
         key: "search",
         submenuOf: "tools",
-        link: "search",
+        link: APP_ROUTES.SEARCH,
       },
     ],
   },
@@ -55,6 +57,6 @@ export const menuOptions = [
 
 export const menuOptionsNonLoggedIn = [
   { key: "dashboard", link: "/", name: "Dashboard" },
-  { key: "search", link: "search", name: "Search" },
-  { key: "expore", link: "explore", name: "Explore" },
+  { key: "search", link: APP_ROUTES.SEARCH, name: "Search" },
+  { key: "expore", link: APP_ROUTES.EXPLORE, name: "Explore" },
 ];
diff --git a/dashboard/src/modules/components/TableComponent/index.jsx b/dashboard/src/modules/components/TableComponent/index.jsx
index b2f4163977..035409cea9 100644
--- a/dashboard/src/modules/components/TableComponent/index.jsx
+++ b/dashboard/src/modules/components/TableComponent/index.jsx
@@ -26,7 +26,6 @@ import { useDispatch, useSelector } from "react-redux";
 
 import { DATASET_UPLOADED } from "assets/constants/overviewConstants";
 import DatePickerWidget from "../DatePickerComponent";
-import PathBreadCrumb from "../BreadCrumbComponent";
 import { RenderPagination } from "../OverviewComponent/common-component";
 import TablePagination from "../PaginationComponent";
 import { useKeycloak } from "@react-keycloak/web";
@@ -129,10 +128,6 @@ const TableWithFavorite = () => {
   const onCloseLoginHint = () => {
     setLoginHintVisible(false);
   };
-  const datasetBreadcrumb = [
-    { name: "Dashboard", link: "/" },
-    { name: "Results", link: "" },
-  ];
 
   /* Favorite Table Pagination */
   const onSetPage = (_evt, newPage, _perPage, startIdx, endIdx) => {
@@ -157,7 +152,6 @@ const TableWithFavorite = () => {
         />
       )}
       <div className="table-container">
-        <PathBreadCrumb pathList={datasetBreadcrumb} />
         <Heading
           containerClass="publicDataPageTitle"
           headingTitle="Results"
diff --git a/dashboard/src/utils/routeConstants.js b/dashboard/src/utils/routeConstants.js
index 241b239408..a5fab06daa 100644
--- a/dashboard/src/utils/routeConstants.js
+++ b/dashboard/src/utils/routeConstants.js
@@ -1,14 +1,15 @@
 export const HOME = "dashboard/";
 
+export const ALL_RUNS = "all-runs";
+export const ANALYSIS = "analysis";
 export const AUTH = "auth";
 export const AUTH_LOGIN = "login";
 export const AUTH_SIGNUP = "signup";
+export const EXPLORE = "explore";
 export const OVERVIEW = "overview";
-export const TOC = "toc";
-export const TABLE_OF_CONTENT = "toc/:dataset_id";
-export const USER_PROFILE = "user-profile";
-export const ANALYSIS = "analysis";
 export const SEARCH = "search";
 export const RESULTS = "results";
-export const EXPLORE = "explore";
+export const TABLE_OF_CONTENT = "toc/:dataset_id";
+export const TOC = "toc";
+export const USER_PROFILE = "user-profile";
 export const VISUALIZATION = "visualization";