From f3b563ebc318051abab6766ac4b63f263f2c920c Mon Sep 17 00:00:00 2001
From: Camille Moussu <ca.noiray@gmail.com>
Date: Tue, 25 Jun 2024 10:33:13 +0400
Subject: [PATCH] [#3] added breadcrumbs to all dashboards

---
 src/dashboards/HomePage.tsx | 280 ++++++++++++++++++------------------
 src/pages/Configuration.tsx |  42 +++++-
 2 files changed, 173 insertions(+), 149 deletions(-)

diff --git a/src/dashboards/HomePage.tsx b/src/dashboards/HomePage.tsx
index e646b26..f689ecb 100644
--- a/src/dashboards/HomePage.tsx
+++ b/src/dashboards/HomePage.tsx
@@ -54,48 +54,46 @@ export function HomePage() {
 
       return (
         <>
-          <div className="main">
+          <div>
             <div>
-              <div>
-                <img
-                  className="logo"
-                  src={require("./../static/logo_llng_400px.png")}
-                  alt="logo"
-                />
-              </div>
-              <strong className="title1">{t("Configuration Manager")}</strong>
+              <img
+                className="logo"
+                src={require("./../static/logo_llng_400px.png")}
+                alt="logo"
+              />
             </div>
-            <div className="search-container">
-              <div className="search">
-                <Button
-                  component="label"
-                  role={undefined}
-                  variant="contained"
-                  tabIndex={-1}
-                  startIcon={<DownloadIcon />}
-                  onClick={async () =>
-                    await exportData("full", config.data.metadata.cfgNum)
-                  }
-                >
-                  {t("downloadIt")}
-                </Button>
-              </div>
-              <div className="search">
-                <Button
-                  component="label"
-                  role={undefined}
-                  variant="contained"
-                  tabIndex={-1}
-                  startIcon={<CloudUploadIcon />}
-                >
-                  {t("restore")}
-                  <VisuallyHiddenInput
-                    type="file"
-                    onChange={(e) => {
-                      if (e.target instanceof HTMLInputElement) {
-                        handleChangeFile(
-                          e as ChangeEvent<HTMLInputElement>
-                        ).then((fileContent) => {
+            <strong className="title1">{t("Configuration Manager")}</strong>
+          </div>
+          <div className="search-container">
+            <div className="search">
+              <Button
+                component="label"
+                role={undefined}
+                variant="contained"
+                tabIndex={-1}
+                startIcon={<DownloadIcon />}
+                onClick={async () =>
+                  await exportData("full", config.data.metadata.cfgNum)
+                }
+              >
+                {t("downloadIt")}
+              </Button>
+            </div>
+            <div className="search">
+              <Button
+                component="label"
+                role={undefined}
+                variant="contained"
+                tabIndex={-1}
+                startIcon={<CloudUploadIcon />}
+              >
+                {t("restore")}
+                <VisuallyHiddenInput
+                  type="file"
+                  onChange={(e) => {
+                    if (e.target instanceof HTMLInputElement) {
+                      handleChangeFile(e as ChangeEvent<HTMLInputElement>).then(
+                        (fileContent) => {
                           console.debug("File content:", fileContent);
                           dispatch(
                             saveConfigAsync(
@@ -103,48 +101,35 @@ export function HomePage() {
                             )
                           );
                           setOpenSavePopup(true);
-                        });
-                      }
-                    }}
-                  />
-                </Button>
-              </div>
-              <div className="search">
-                <Button
-                  variant="contained"
-                  onClick={() => dispatch(push(`#authParams/latest`))}
-                >
-                  {t("authParams")}
-                </Button>
-              </div>
-              <div className="search">
-                <TextField
-                  type="number"
-                  size="small"
-                  error={aimedConf <= 0}
-                  helperText={`${
-                    aimedConf === 0
-                      ? "Enter only positive and non nul numbers"
-                      : ""
-                  }`}
-                  placeholder={t("search config num")}
-                  onChange={(e) => SetAimedConf(Number(e.target.value))}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter") {
-                      if (aimedConf <= config.data.metadata.cfgNum) {
-                        dispatch(push(`#conf/${aimedConf}`));
-                      } else
-                        dispatch(
-                          setError(
-                            `Latest Config : ${config.data.metadata.cfgNum}`
-                          )
-                        );
+                        }
+                      );
                     }
                   }}
                 />
-                <Button
-                  variant="contained"
-                  onClick={() => {
+              </Button>
+            </div>
+            <div className="search">
+              <Button
+                variant="contained"
+                onClick={() => dispatch(push(`#authParams/latest`))}
+              >
+                {t("authParams")}
+              </Button>
+            </div>
+            <div className="search">
+              <TextField
+                type="number"
+                size="small"
+                error={aimedConf <= 0}
+                helperText={`${
+                  aimedConf === 0
+                    ? "Enter only positive and non nul numbers"
+                    : ""
+                }`}
+                placeholder={t("search config num")}
+                onChange={(e) => SetAimedConf(Number(e.target.value))}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
                     if (aimedConf <= config.data.metadata.cfgNum) {
                       dispatch(push(`#conf/${aimedConf}`));
                     } else
@@ -153,73 +138,84 @@ export function HomePage() {
                           `Latest Config : ${config.data.metadata.cfgNum}`
                         )
                       );
-                  }}
-                >
-                  {t("go")}
-                </Button>
-              </div>
-            </div>
-            <div className="desc">
-              <div>
-                <table className="infoTable">
-                  <thead>
-                    <tr>
-                      <th>
-                        <strong>{t("Latest conf info")}</strong>
-                      </th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    <tr>
-                      <th>
-                        <span>{t("latest")}</span>
-                      </th>
-                      <td>
-                        <Button
-                          variant="contained"
-                          onClick={() => {
-                            dispatch(push(`#conf/latest`));
-                            dispatch(getConfigAsync());
-                          }}
-                        >
-                          {config.data.metadata.cfgNum}
-                        </Button>
-                      </td>
-                    </tr>
-                    <tr>
-                      <th>
-                        <span>{t("date")}</span>
-                      </th>
-                      <td>{createdDate.toLocaleString()}</td>
-                    </tr>
-                    <tr>
-                      <th>
-                        <span>{t("author")}</span>
-                      </th>
-                      <td>{config.data.metadata.cfgAuthor}</td>
-                    </tr>
-                    <tr>
-                      <th>
-                        <span>{t("authorIPAddress")}</span>
-                      </th>
-                      <td>{config.data.metadata.cfgAuthorIP}</td>
-                    </tr>
-                  </tbody>
-                </table>
-              </div>
+                  }
+                }}
+              />
+              <Button
+                variant="contained"
+                onClick={() => {
+                  if (aimedConf <= config.data.metadata.cfgNum) {
+                    dispatch(push(`#conf/${aimedConf}`));
+                  } else
+                    dispatch(
+                      setError(`Latest Config : ${config.data.metadata.cfgNum}`)
+                    );
+                }}
+              >
+                {t("go")}
+              </Button>
             </div>
+          </div>
+          <div className="desc">
             <div>
-              <strong className="title2">{t("Latest conf stats")}</strong>
-              <ConfStats config={config.data.config} />
-            </div>
-            <div
-              style={{
-                visibility: config.error.errorContent ? "visible" : "hidden",
-              }}
-            >
-              <strong>{t("latestError")}</strong> {config.error.errorContent}
+              <table className="infoTable">
+                <thead>
+                  <tr>
+                    <th>
+                      <strong>{t("Latest conf info")}</strong>
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <th>
+                      <span>{t("latest")}</span>
+                    </th>
+                    <td>
+                      <Button
+                        variant="contained"
+                        onClick={() => {
+                          dispatch(push(`#conf/latest`));
+                          dispatch(getConfigAsync());
+                        }}
+                      >
+                        {config.data.metadata.cfgNum}
+                      </Button>
+                    </td>
+                  </tr>
+                  <tr>
+                    <th>
+                      <span>{t("date")}</span>
+                    </th>
+                    <td>{createdDate.toLocaleString()}</td>
+                  </tr>
+                  <tr>
+                    <th>
+                      <span>{t("author")}</span>
+                    </th>
+                    <td>{config.data.metadata.cfgAuthor}</td>
+                  </tr>
+                  <tr>
+                    <th>
+                      <span>{t("authorIPAddress")}</span>
+                    </th>
+                    <td>{config.data.metadata.cfgAuthorIP}</td>
+                  </tr>
+                </tbody>
+              </table>
             </div>
           </div>
+          <div>
+            <strong className="title2">{t("Latest conf stats")}</strong>
+            <ConfStats config={config.data.config} />
+          </div>
+          <div
+            style={{
+              visibility: config.error.errorContent ? "visible" : "hidden",
+            }}
+          >
+            <strong>{t("latestError")}</strong> {config.error.errorContent}
+          </div>
           <Footer cfgVersion={config.data.config.cfgVersion} />
           <SavePopup
             config={config}
diff --git a/src/pages/Configuration.tsx b/src/pages/Configuration.tsx
index fce67c1..fb7890b 100644
--- a/src/pages/Configuration.tsx
+++ b/src/pages/Configuration.tsx
@@ -26,9 +26,12 @@ export function Configuration({
       return (
         <div className="main">
           <Breadcrumbs>
+            <Link underline="hover" color="inherit">
+              <span onClick={() => dispatch(push(``))}>{t("conf")}</span>
+            </Link>
             <Link underline="hover" color="inherit">
               <span onClick={() => dispatch(push(`#conf/${metadata.cfgNum}`))}>
-                {t("conf")} {metadata.cfgNum}
+                {metadata.cfgNum}
               </span>
             </Link>
             <Link underline="none" color="inherit">
@@ -51,6 +54,16 @@ export function Configuration({
     case "conf":
       return (
         <div className="main">
+          <Breadcrumbs>
+            <Link underline="hover" color="inherit">
+              <span onClick={() => dispatch(push(``))}>{t("conf")}</span>
+            </Link>
+            <Link underline="hover" color="text.primary">
+              <span onClick={() => dispatch(push(`#conf/${metadata.cfgNum}`))}>
+                {metadata.cfgNum}
+              </span>
+            </Link>
+          </Breadcrumbs>
           <Manager />
           <div>
             <SaveButton />
@@ -62,10 +75,13 @@ export function Configuration({
       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 underline="hover" color="inherit">
+              <span onClick={() => dispatch(push(``))}>{t("conf")}</span>
+            </Link>
+            <Link underline="hover" color="inherit">
+              <span onClick={() => dispatch(push(`#conf/${metadata.cfgNum}`))}>
+                {metadata.cfgNum}
+              </span>
             </Link>
             <Link underline="none" color="text.primary">
               {t(location.type)}
@@ -88,9 +104,12 @@ export function Configuration({
       return (
         <div className="main">
           <Breadcrumbs>
+            <Link underline="hover" color="inherit">
+              <span onClick={() => dispatch(push(``))}>{t("conf")}</span>
+            </Link>
             <Link underline="hover" color="inherit">
               <span onClick={() => dispatch(push(`#conf/${metadata.cfgNum}`))}>
-                {t("conf")} {metadata.cfgNum}
+                {metadata.cfgNum}
               </span>
             </Link>
             <Link underline="none" color="inherit">
@@ -106,6 +125,15 @@ export function Configuration({
         </div>
       );
     default:
-      return <HomePage />;
+      return (
+        <div className="main">
+          <Breadcrumbs>
+            <Link underline="hover" color="text.primary">
+              <span onClick={() => dispatch(push(``))}>{t("conf")}</span>
+            </Link>
+          </Breadcrumbs>
+          <HomePage />
+        </div>
+      );
   }
 }