[#7] added search for config num in homepage and informations about l…

…atest config + button to auth params
linagora · May 13, 2024 · 0948fc9 · 0948fc9
1 parent f19b78e
commit 0948fc9
Show file tree

Hide file tree

Showing 8 changed files with 206 additions and 86 deletions.
diff --git a/src/components/Footer.css b/src/components/Footer.css
@@ -0,0 +1,11 @@
+.footer {
+  position: fixed;
+  bottom: 0;
+  background-color: #2f3237;
+  width: 100%;
+  text-align: center;
+  color: #ffffffaf;
+}
+.footer span {
+  margin: 5px;
+}
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -0,0 +1,17 @@
+import { useTranslation } from "react-i18next";
+import "./NavBar.css";
+import { useAppSelector } from "../app/hooks";
+import "./Footer.css";
+export function Footer() {
+  const { t } = useTranslation();
+  const cfgVersion = useAppSelector(
+    (state) => state.config.data.metadata.cfgVersion
+  );
+
+  return (
+    <footer className="footer">
+      <strong> {t("cfgVersion")}</strong>
+      <span>{cfgVersion}</span>
+    </footer>
+  );
+}
diff --git a/src/components/applicationsComponents/AppPage.css b/src/components/applicationsComponents/AppPage.css
@@ -57,7 +57,7 @@ tr:nth-child(even) {
   border-radius: 5px;
 }
 
-table {
+.appDesc table {
   margin-top: 2%;
   border: 1px solid #acacac;
   width: 100%;

diff --git a/src/components/managerComponents/Issuers.tsx b/src/components/managerComponents/Issuers.tsx
@@ -70,14 +70,7 @@ function Issuers() {
           ).length
         ),
     });
-  }, [
-    config.issuerDBSAMLActivation,
-    config.samlSPMetaDataXML,
-    config.issuerDBOpenIDConnectActivation,
-    config.oidcRPMetaDataOptions,
-    config.issuerDBCASActivation,
-    config.casAppMetaDataOptions,
-  ]);
+  }, [config]);
   return (
     <div className="issuersList">
       <div className="issuers" data-testid="issuer.saml">

diff --git a/src/dashboards/HomePage.css b/src/dashboards/HomePage.css
@@ -0,0 +1,36 @@
+.infoTable {
+  border: 1px solid #acacac;
+  width: 100%;
+  text-align: left;
+  max-width: 100%;
+  flex-wrap: wrap;
+  border-collapse: collapse;
+  box-shadow: 5% #acacac;
+}
+
+.infoTable tr,
+td,
+th {
+  padding: 1%;
+}
+
+.desc {
+  display: flex;
+  flex-direction: row;
+  align-content: space-between;
+  margin: 2%;
+}
+
+.logo {
+  width: 400px;
+}
+
+.search-container {
+  display: flex;
+  justify-content: flex-end;
+  margin: 15px;
+}
+
+.search {
+  margin-right: 2%;
+}
diff --git a/src/dashboards/HomePage.tsx b/src/dashboards/HomePage.tsx
@@ -8,7 +8,8 @@ import {
 import { Button, TextField } from "@mui/material";
 import { t } from "i18next";
 import { useEffect, useState } from "react";
-
+import "./HomePage.css";
+import { Footer } from "../components/Footer";
 export function HomePage() {
   const config = useAppSelector((state) => state.config);
   const dispatch = useAppDispatch();
@@ -40,68 +41,51 @@ export function HomePage() {
       );
     } else {
       const createdDate = new Date(config.data.metadata.cfgDate * 1000);
+      const appNum =
+        (config.data.config.locationRules
+          ? Object.keys(config.data.config.locationRules).length
+          : 0) +
+        (config.data.config.samlSPMetaDataXML
+          ? Object.keys(config.data.config.samlSPMetaDataXML).length
+          : 0) +
+        (config.data.config.oidcRPMetaDataOptions
+          ? Object.keys(config.data.config.oidcRPMetaDataOptions).length
+          : 0) +
+        (config.data.config.casAppMetaDataOptions
+          ? Object.keys(config.data.config.casAppMetaDataOptions).length
+          : 0);
+
       return (
-        <div className="main">
-          <table>
-            <tbody>
-              <tr>
-                <th>{t("latest")}</th>
-                <td>
-                  <Button
-                    variant="contained"
-                    onClick={() => {
-                      dispatch(push(`#conf/latest`));
-                      dispatch(getConfigAsync());
-                    }}
-                  >
-                    {config.data.metadata.cfgNum}
-                  </Button>
-                </td>
-              </tr>
-              <tr>
-                <th>{t("author")}</th>
-                <td>{config.data.metadata.cfgAuthor}</td>
-              </tr>
-              <tr>
-                <th>{t("authorIPAddress")}</th>
-                <td>{config.data.metadata.cfgAuthorIP}</td>
-              </tr>
-              <tr>
-                <th>{t("date")}</th>
-                <td>{createdDate.toLocaleString()}</td>
-              </tr>
-              <tr>
-                <th>{t("cfgVersion")}</th>
-                <td>{config.data.metadata.cfgVersion}</td>
-              </tr>
-              <tr>
-                <th>{t("chooseConf")}</th>
-                <td>
-                  <TextField
-                    type="number"
-                    error={aimedConf <= 0}
-                    helperText={`${
-                      aimedConf === 0
-                        ? "Enter only positive and non nul numbers"
-                        : ""
-                    }`}
-                    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={() => {
+        <>
+          <div className="main">
+            <div>
+              <div>
+                <img
+                  className="logo"
+                  src={require("./../static/logo_llng_400px.png")}
+                  alt="logo"
+                />
+              </div>
+              <strong className="title1">{t("Configuration Manager")}</strong>
+            </div>
+            <div className="search-container">
+              <div className="search">
+                <Button variant="contained">{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
@@ -110,22 +94,92 @@ export function HomePage() {
                             `Latest Config : ${config.data.metadata.cfgNum}`
                           )
                         );
-                    }}
-                  >
-                    {t("go")}
-                  </Button>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-          <div
-            style={{
-              visibility: config.error.errorContent ? "visible" : "hidden",
-            }}
-          >
-            <strong>{t("latestError")}</strong> {config.error.errorContent}
+                    }
+                  }}
+                />
+                <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>
+                <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>
+
+                    <tr>
+                      <th>
+                        <span>{t("App Number")}</span>
+                      </th>
+                      <td>{appNum}</td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
+            </div>
+            <div
+              style={{
+                visibility: config.error.errorContent ? "visible" : "hidden",
+              }}
+            >
+              <strong>{t("latestError")}</strong> {config.error.errorContent}
+            </div>
           </div>
-        </div>
+          <Footer />
+        </>
       );
     }
   } catch (e) {

diff --git a/src/static/logo_llng_400px.png b/src/static/logo_llng_400px.png
diff --git a/src/utils/test-utils.tsx b/src/utils/test-utils.tsx
@@ -91,6 +91,15 @@ export function renderWithProviders(
           },
         },
       },
+      router: {
+        location: {
+          pathname: "/manager.html",
+          search: "",
+          hash: "#conf/14",
+          state: null,
+          key: "o01z0jry",
+        },
+      },
     },
 
     store = setupStore(preloadedState),