From 35826c288ee75e71dd8181fbe192c41006ada60c Mon Sep 17 00:00:00 2001
From: = <akhilmhdh@gmail.com>
Date: Sun, 20 Oct 2024 20:12:33 +0530
Subject: [PATCH] feat: changed to a simpler tree ascii ui

---
 frontend/src/styles/globals.css               | 21 +++++++
 .../SecretListView/SecretReferenceDetails.tsx | 58 ++++---------------
 2 files changed, 32 insertions(+), 47 deletions(-)

diff --git a/frontend/src/styles/globals.css b/frontend/src/styles/globals.css
index d3aa5c7f0..0ccfbc466 100644
--- a/frontend/src/styles/globals.css
+++ b/frontend/src/styles/globals.css
@@ -137,6 +137,27 @@ html {
   );
 }
 
+.tree-line::before {
+  content: "";
+  position: absolute;
+  left: -16px;
+  top: 1px;
+  bottom: 0;
+  width: 1px;
+  height: 50%;
+  background-color: #cbd5e0;
+}
+
+.tree-line::after {
+  content: "";
+  position: absolute;
+  left: -16px;
+  top: 50%;
+  width: 12px;
+  height: 1px;
+  background-color: #cbd5e0;
+}
+
 .show-tags {
   transform: translateY(10px);
   transition: all 0.2s;
diff --git a/frontend/src/views/SecretMainPage/components/SecretListView/SecretReferenceDetails.tsx b/frontend/src/views/SecretMainPage/components/SecretListView/SecretReferenceDetails.tsx
index 90c90f415..c79373a31 100644
--- a/frontend/src/views/SecretMainPage/components/SecretListView/SecretReferenceDetails.tsx
+++ b/frontend/src/views/SecretMainPage/components/SecretListView/SecretReferenceDetails.tsx
@@ -1,6 +1,8 @@
+import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
-import { FormControl, SecretInput, Spinner, Tag, Tooltip } from "@app/components/v2";
+import { FormControl, SecretInput, Spinner, Tooltip } from "@app/components/v2";
 import { useWorkspace } from "@app/context";
 import { useGetSecretReferenceTree } from "@app/hooks/api";
 import { SecretV3RawSanitized, TSecretReferenceTraceNode } from "@app/hooks/api/types";
@@ -29,61 +31,23 @@ export const SecretReferenceNode = ({
         />
       </FormControl>
     ) : (
-      <div className="bg-bunker-700 py-2 text-sm">
-        <div>
-          {node.key}
+      <div className="relative bg-bunker-700 py-2 text-sm">
+        <div className="tree-line flex items-center">
+          {`${node.environment}${
+            node.secretPath === "/" ? "" : node.secretPath.split("/").join(".")
+          }.${node.key}`}
           <Tooltip className="break-words" content={node.value}>
             <span
-              className={twMerge(
-                "ml-2 rounded border border-gray-400 px-1 text-xs text-gray-400",
-                !node.value && "border-red-400 text-red-400"
-              )}
+              className={twMerge("ml-1 px-1 text-xs text-gray-400", !node.value && "text-red-400")}
             >
-              {node.value ? "Reveal Value" : "Empty"}
+              <FontAwesomeIcon icon={node.value ? faEye : faEyeSlash} />
             </span>
           </Tooltip>
         </div>
-        <div className="mt-2">
-          <div className="flex items-center space-x-2">
-            <div className="flex items-center">
-              <Tag
-                size="xs"
-                className="mr-0 flex items-center rounded-r-none border border-mineshaft-500"
-              >
-                <div>Environment</div>
-              </Tag>
-              <Tag
-                size="xs"
-                className="flex items-center rounded-l-none border border-mineshaft-500 bg-mineshaft-900 pl-1"
-              >
-                <div className="max-w-[150px] overflow-hidden text-ellipsis whitespace-nowrap">
-                  {node.environment}
-                </div>
-              </Tag>
-            </div>
-            <div className="flex items-center">
-              <Tag
-                size="xs"
-                className="mr-0 flex items-center rounded-r-none border border-mineshaft-500"
-              >
-                <div>Secret Path</div>
-              </Tag>
-              <Tag
-                size="xs"
-                className="flex items-center rounded-l-none border border-mineshaft-500 bg-mineshaft-900 pl-1"
-              >
-                <div className="max-w-[150px] overflow-hidden text-ellipsis whitespace-nowrap">
-                  {node.secretPath}
-                </div>
-              </Tag>
-            </div>
-          </div>
-        </div>
-        <div className="w-full border-b border-mineshaft-500 py-1" />
       </div>
     )}
     {node.children.length > 0 && (
-      <div className="border-l border-gray-600 bg-bunker-700 pl-6 transition-all hover:border-gray-400">
+      <div className="bg-bunker-700 pl-6 transition-all hover:border-gray-400">
         {node.children.map((el, index) => (
           <SecretReferenceNode node={el} key={`node-${node.key}-${index + 1}`} />
         ))}