awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-06 07:26:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: changed to a simpler tree ascii ui

Browse Source
This commit is contained in:
=
2024-10-25 13:11:15 +05:30
parent fae4e1fa55
commit 35826c288e
2 changed files with 32 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/styles/globals.css
+21
View File
@@ -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 { .show-tags {
transform: translateY(10px); transform: translateY(10px);
transition: all 0.2s; transition: all 0.2s;
frontend/src/views/SecretMainPage/components/SecretListView/SecretReferenceDetails.tsx
+11 -47
View File
@@ -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 { 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 { useWorkspace } from "@app/context";
import { useGetSecretReferenceTree } from "@app/hooks/api"; import { useGetSecretReferenceTree } from "@app/hooks/api";
import { SecretV3RawSanitized, TSecretReferenceTraceNode } from "@app/hooks/api/types"; import { SecretV3RawSanitized, TSecretReferenceTraceNode } from "@app/hooks/api/types";
@@ -29,61 +31,23 @@ export const SecretReferenceNode = ({
/> />
</FormControl> </FormControl>
) : ( ) : (
<div className="bg-bunker-700 py-2 text-sm"> <div className="relative bg-bunker-700 py-2 text-sm">
<div> <div className="tree-line flex items-center">
{node.key} {`${node.environment}${
node.secretPath === "/" ? "" : node.secretPath.split("/").join(".")
}.${node.key}`}
<Tooltip className="break-words" content={node.value}> <Tooltip className="break-words" content={node.value}>
<span <span
className={twMerge( className={twMerge("ml-1 px-1 text-xs text-gray-400", !node.value && "text-red-400")}
"ml-2 rounded border border-gray-400 px-1 text-xs text-gray-400",
!node.value && "border-red-400 text-red-400"
)}
> >
{node.value ? "Reveal Value" : "Empty"} <FontAwesomeIcon icon={node.value ? faEye : faEyeSlash} />
</span> </span>
</Tooltip> </Tooltip>
</div> </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> </div>
)} )}
{node.children.length > 0 && ( {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) => ( {node.children.map((el, index) => (
<SecretReferenceNode node={el} key={`node-${node.key}-${index + 1}`} /> <SecretReferenceNode node={el} key={`node-${node.key}-${index + 1}`} />
))} ))}