[#3]added breadcrumbs

linagora · May 23, 2024 · b4c926c · b4c926c
1 parent 2362898
commit b4c926c
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 6 deletions.
diff --git a/src/dashboards/AuthParams.tsx b/src/dashboards/AuthParams.tsx
@@ -1,15 +1,16 @@
 import { FormControl, InputLabel, MenuItem, Select } from "@mui/material";
 import { t } from "i18next";
-import attributes from "../static/attributes.json";
+import { useEffect, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../app/hooks";
-import "./AuthParams.css";
-import { useState } from "react";
 import { OptionRenderer } from "../components/authParamOptions/OptionRenderer";
 import {
+  getConfigAsync,
   removeError,
   setError,
   updateAuthParams,
 } from "../features/config/configSlice";
+import attributes from "../static/attributes.json";
+import "./AuthParams.css";
 export function AuthParams() {
   const dispatch = useAppDispatch();
   const authChoiceModules = useAppSelector(
@@ -54,6 +55,21 @@ export function AuthParams() {
       return [];
     }),
   ];
+  const configNum = useAppSelector((state) =>
+    state.router.location?.hash.replace("#authParams/", "")
+  );
+  useEffect(() => {
+    if (
+      configNum !== "latest" &&
+      Number(configNum) !== Number(config.data.metadata.cfgNum)
+    ) {
+      dispatch(
+        getConfigAsync(configNum === "latest" ? undefined : Number(configNum))
+      );
+    } else if (configNum === "latest" && config.data.metadata.next) {
+      dispatch(getConfigAsync());
+    }
+  }, [dispatch, configNum, config.data.metadata]);
 
   const [optionSelected, setOptionSelected] = useState(authModule);
   try {

diff --git a/src/pages/Configuration.tsx b/src/pages/Configuration.tsx
@@ -1,19 +1,39 @@
-import Manager from "./../dashboards/Manager";
+import { Breadcrumbs, Link } from "@mui/material";
+import { t } from "i18next";
+import { useAppSelector } from "../app/hooks";
 import AddApp from "../components/managerComponents/AddApp";
-import SaveButton from "./../components/SaveButton";
 import { ApplicationDashboard } from "../dashboards/ApplicationDashboard";
-import { HomePage } from "../dashboards/HomePage";
 import { AuthParams } from "../dashboards/AuthParams";
+import { HomePage } from "../dashboards/HomePage";
+import { IssuerDashboard } from "../dashboards/IssuerDashboard";
+import SaveButton from "./../components/SaveButton";
+import Manager from "./../dashboards/Manager";
 
 export function Configuration({
   location,
 }: {
   location: { type: string; info: { name: string; type?: string } };
 }) {
+  const metadata = useAppSelector((state) => state.config.data.metadata);
+  console.log(location);
   switch (location.type) {
     case "app":
       return (
         <div className="main">
+          <Breadcrumbs>
+            <Link underline="hover" color="inherit">
+              {t("conf")} {metadata.cfgNum}
+            </Link>
+            <Link underline="none" color="inherit">
+              {location.type}
+            </Link>
+            <Link underline="none" color="inherit">
+              {location.info.type}
+            </Link>
+            <Link underline="hover" color="text.primary">
+              {location.info.name}
+            </Link>
+          </Breadcrumbs>
           <ApplicationDashboard
             name={location.info.name}
             type={location.info.type ? location.info.type : ""}
@@ -34,12 +54,28 @@ export function Configuration({
     case "authParams":
       return (
         <div className="main">
+          <Breadcrumbs>
+            <Link underline="none" color="inherit">
+              {location.info.name === "latest"
+                ? `${t(location.info.name)} ${t("conf")}`
+                : `${t("conf")} ${t(location.info.name)}`}
+            </Link>
+            <Link underline="none" color="text.primary">
+              {t(location.type)}
+            </Link>
+          </Breadcrumbs>
           <AuthParams />
           <div>
             <SaveButton />
           </div>
         </div>
       );
+    case "issuer":
+      return (
+        <div className="main">
+          <IssuerDashboard type={location.info.name} />
+        </div>
+      );
     default:
       return <HomePage />;
   }