awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-09-22 13:39:35 +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-20 20:12:33 +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

21
frontend/src/styles/globals.css
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 {
transform: translateY(10px);
transition: all 0.2s;

58
frontend/src/views/SecretMainPage/components/SecretListView/SecretReferenceDetails.tsx
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 { 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}`} />
))}