Final

2026-03-26 17:22:32 +08:00
parent 9f0392c9c2
commit 992d01ba9b
10 changed files with 134 additions and 71 deletions
--- a/frontend/src/app/components/navbar/Navbar.jsx
+++ b/frontend/src/app/components/navbar/Navbar.jsx
@@ -16,6 +16,7 @@ import CredentialsIcon from "../icons/credentials";
 import AgentIcon from "../icons/agent";
 import DownloadIcon from "../icons/download";
 import useNavigations from "@/app/hooks/useNagivation";
+import { usePathname } from "next/navigation";

 const Navbar = () => {
  const [triggerDropDown, setTriggerDropDown] = useState(false);
@@ -27,11 +28,15 @@ const Navbar = () => {
    navToHome,
    navToOrganization,
    navToUsers,
-  } = useNavigations();
+  } = useNavigations(setTriggerDropDown);
+
+  const pathname = usePathname();

  const isMobile = useIsMobile();
  return (
-    <div className={styles.mainContainer}>
+    <div
+      className={`${styles.mainContainer} ${pathname.includes("/add") ? styles.onAdd : ""}`}
+    >
      {/* Mobile Hamburger Button */}
      <div className={styles.mobileHamburger}>
        <div className={styles.hamburgerMenu}>
--- a/frontend/src/app/components/navbar/styles.module.css
+++ b/frontend/src/app/components/navbar/styles.module.css
@@ -168,4 +168,7 @@
  .hamburgerMenu {
    display: flex;
  }
+  .onAdd {
+    display: none;
+  }
 }
--- a/frontend/src/app/components/toast/success/styles.module.css
+++ b/frontend/src/app/components/toast/success/styles.module.css
@@ -9,7 +9,7 @@
  position: absolute;
  bottom: 25px;
  z-index: 11;
-  right: 20px;
+  right: 10px;
  animation-name: showToast;
  animation-duration: 0.15s;
  animation-timing-function: ease-in-out;
@@ -41,7 +41,7 @@
 .messageContainer p {
  color: #006929;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
--- a/frontend/src/app/components/topHeader/TopHeader.jsx
+++ b/frontend/src/app/components/topHeader/TopHeader.jsx
@@ -47,8 +47,12 @@ const TopHeader = (props) => {
          editState={editState}
        />
      )}
-      <div className={styles.container}>
-        <div className={styles.title}>
+      <div
+        className={`${styles.container} ${pathName.includes("/add") ? styles.column : ""}`}
+      >
+        <div
+          className={`${styles.title} ${pathName.includes("/add") ? styles.fullWidth : ""}`}
+        >
          {props.requiredButtons.includes("back") && (
            <div onClick={() => router.back()}>
              <BackIcon />
@@ -56,7 +60,9 @@ const TopHeader = (props) => {
          )}
          <p>{props.topbarTitle}</p>
        </div>
-        <div className={styles.actionBar}>
+        <div
+          className={`${styles.actionBar}  ${pathName.includes("/add") ? styles.fullWidth : ""}`}
+        >
          {props?.requiredButtons.includes("search") && (
            <div className={styles.searchBarContainer}>
              {!isMobile && <SearchBar />}
--- a/frontend/src/app/components/topHeader/styles.module.css
+++ b/frontend/src/app/components/topHeader/styles.module.css
@@ -3,6 +3,7 @@
  padding: 24px;
  justify-content: space-between;
  align-items: center;
+
  align-self: stretch;
  background: #21232f;
  transition: all 0.15s;
@@ -46,6 +47,7 @@
  display: flex;
  justify-content: flex-end;
  align-items: center;
+
  gap: 5px;
 }
 .searchBarContainer {
@@ -171,7 +173,19 @@
 }
@media (max-width: 768px) {
  .container {
-    background: #21232f00;
+    background: linear-gradient(180deg, #1c1d2b 0%, #191a24 100%);
+
    padding: 16px;
  }
+  .column {
+    flex-direction: column;
+    gap: 10px;
+  }
+  .fullWidth {
+    width: 100%;
+    justify-content: flex-start;
+  }
+  .fullWidth > button {
+    width: 100%;
+  }
 }
--- a/frontend/src/app/hooks/useNagivation.jsx
+++ b/frontend/src/app/hooks/useNagivation.jsx
@@ -1,36 +1,22 @@
 import { useRouter } from "next/navigation";
-const useNavigations = () => {
+
+export default function useNavigations(setTriggerDropDown) {
  const router = useRouter();
-  const navToHome = () => {
-    router.push("/home");
-  };
-  const navToOrganization = () => {
-    router.push("/organization");
-  };
-  const navToProject = () => {
-    router.push("/projects");
-  };
-  const navToUsers = () => {
-    router.push("/users");
-  };
-  const navToRoles = () => {
-    router.push("/roles");
-  };
-  const navToCredentials = () => {
-    router.push("/credentials");
-  };
-  const navToAgents = () => {
-    router.push("/agents");
+
+  const handleNav = (path) => {
+    if (setTriggerDropDown) {
+      setTriggerDropDown(false);
+    }
+    router.push(path);
  };

  return {
-    navToHome,
-    navToAgents,
-    navToCredentials,
-    navToOrganization,
-    navToProject,
-    navToRoles,
-    navToUsers,
+    navToHome: () => handleNav("/home"),
+    navToAgents: () => handleNav("/agents"),
+    navToCredentials: () => handleNav("/credentials"),
+    navToProject: () => handleNav("/projects"),
+    navToRoles: () => handleNav("/roles"),
+    navToOrganization: () => handleNav("/organization"),
+    navToUsers: () => handleNav("/users"),
  };
-};
-export default useNavigations;
+}
--- a/frontend/src/app/projects/view/[servicesId]/settings.jsx
+++ b/frontend/src/app/projects/view/[servicesId]/settings.jsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useState } from "react";
 import variableStyles from "./variableStyles.module.css";
+import DeleteIcon from "@/app/components/icons/delete";
 const Settings = ({
  setTriggerAddVariable,
  setTriggerAddVolume,
@@ -8,7 +9,29 @@ const Settings = ({
  ...props
 }) => {
  const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
-
+  const sampleData = [
+    { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
+    {
+      id: 2,
+      key: "DatabaseSettings:ConnectionString",
+      value:
+        "mongodb://databaseAdmin:d2OIxck4DHZgOJNuk1A@129.212.210.84:27017/?authSource=admin",
+    },
+    { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
+    {
+      id: 2,
+      key: "DatabaseSettings:ConnectionString",
+      value:
+        "mongodb://databaseAdmin:d2OIxck4DHZgOJNuk1A@129.212.210.84:27017/?authSource=admin",
+    },
+    { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
+    {
+      id: 2,
+      key: "DatabaseSettings:ConnectionString",
+      value:
+        "mongodb://databaseAdmin:d2OIxck4DHZgOJNuk1A@129.212.210.84:27017/?authSource=admin",
+    },
+  ];
  return (
    <div {...props}>
      <div className={variableStyles.variablesHeader}>
@@ -111,16 +134,19 @@ const Settings = ({
                </div>
              </div>
              <div className={variableStyles.variableList}>
-                <div className={variableStyles.emptyVariableList}>
+                {/*  <div className={variableStyles.emptyVariableList}>
                  <div>
                    <p>No Environment Variables added</p>
                  </div>
-                </div>
-                {/* <div className={variableStyles.variable}>
-                          <p>REQUEST_SERVICE_GRPC</p>
-                          <p>request-service:50053</p>
-                          <DeleteIcon />
-                        </div> */}
+                </div> */}
+                {sampleData.map((data, key) => {
+                  return (
+                    <div className={variableStyles.variable}>
+                      <p>{data.key}</p>
+                      <p>{data.value}</p>
+                    </div>
+                  );
+                })}
              </div>
            </div>
          </div>
--- a/frontend/src/app/projects/view/[servicesId]/styles.module.css
+++ b/frontend/src/app/projects/view/[servicesId]/styles.module.css
@@ -324,4 +324,10 @@
  .resourceFields .inputGroup div {
    width: 100%;
  }
+  .projectDetailsHeader {
+    display: none;
+  }
+  .fieldsContainerCreateNew {
+    padding-top: 0;
+  }
 }
--- a/frontend/src/app/projects/view/[servicesId]/variableStyles.module.css
+++ b/frontend/src/app/projects/view/[servicesId]/variableStyles.module.css
@@ -151,26 +151,7 @@
  border-radius: 4px;
  background: #1d1e2a;
 }
-.variable {
-  display: flex;
-  padding: 8px 0;
-  align-items: center;
-  align-self: stretch;
-  border-bottom: 0.5px solid #2e3042;
-  width: 100%;
-}
-.variable p {
-  display: flex;
-  align-items: center;
-  flex: 1 0 0;
-  align-self: stretch;
-  color: #d2d3e1;
-  font-size: 0.9rem;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  letter-spacing: 0.15px;
-}
+
 .environmentVariablesContainer {
  display: flex;
  min-height: 200px;
@@ -202,16 +183,18 @@
 }
 .envVariablesHeader {
  display: flex;
-  flex-direction: column;
+  padding: 12px 24px;
  align-items: flex-start;
+  width: 100%;
  align-self: stretch;
+  flex-direction: column;
+  border-bottom: 1px solid #2c2e3f;
 }
 .envVariablesHeader > div {
  display: flex;
-  padding: 12px 16px;
+
  align-items: flex-start;
  align-self: stretch;
-  border-bottom: 1px solid #2c2e3f;
 }
 .envVariablesHeader > div p {
  display: flex;
@@ -226,16 +209,43 @@
 }
 .variableList {
  display: flex;
-  padding: 0 16px 16px 16px;
+
+  padding: 24px 24px 0 24px;
+
+  padding-bottom: 24px;
  flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
+  gap: 10px;
+  width: 100%;
+  flex: 1 0 0;
+}
+.variable {
+  display: flex;
+  align-items: flex-start;
  align-self: stretch;
+  justify-content: space-between;
+  gap: 5px;
+  width: 100%;
+}
+.variable p {
+  display: flex;
+  align-items: start;
+
+  flex: 1 0 0;
+  align-self: stretch;
+  overflow-wrap: anywhere;
+  color: #d2d3e1;
+  font-size: 0.9rem;
+  font-weight: 400;
+
+  letter-spacing: 0.15px;
 }
 .emptyVariableList {
  display: flex;
  padding: 24px 16px 0 16px;
  flex-direction: column;
  align-items: flex-start;
+  width: 100%;
  gap: 10px;
  flex: 1 0 0;
 }
@@ -243,6 +253,7 @@
  display: flex;
  justify-content: center;
  align-items: center;
+
  align-self: stretch;
 }
 .emptyVariableList > div > div {
--- a/frontend/src/app/projects/view/add-from-scratch/styles.module.css
+++ b/frontend/src/app/projects/view/add-from-scratch/styles.module.css
@@ -332,4 +332,10 @@
  .resourceFields .inputGroup div {
    width: 100%;
  }
+  .projectDetailsHeader {
+    display: none;
+  }
+  .fieldsContainerCreateNew {
+    padding-top: 0;
+  }
 }