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: add basic ui and icons

Browse Source
This commit is contained in:
Salman
2024-03-14 05:55:23 +05:30
parent 70618420d7
commit 2f932ad103
1 changed files with 62 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
frontend/src/components/v2/SecretInput/SecretInput.tsx
View File

@@ -1,5 +1,7 @@
/* eslint-disable react/no-danger */
import { forwardRef, TextareaHTMLAttributes } from "react";
import { faChevronRight, faFolder, faKey, faRecycle } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { twMerge } from "tailwind-merge";
import { useToggle } from "@app/hooks";
@@ -19,6 +21,10 @@ const syntaxHighlight = (content?: string | null, isVisible?: boolean) => {
if (!content) return "EMPTY";
if (!isVisible) return replaceContentWithDot(content);
// List all the all the variable and the enviroments
// On Environment select list all the secret name and folder
//
let skipNext = false;
const formatedContent = content.split(REGEX).flatMap((el, i) => {
const isInterpolationSyntax = el.startsWith("${") && el.endsWith("}");
@@ -61,6 +67,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
const [isSecretFocused, setIsSecretFocused] = useToggle();
return (
// <>
<div
className={twMerge("w-full overflow-auto rounded-md no-scrollbar", containerClassName)}
style={{ maxHeight: `${21 * 7}px` }}
@@ -73,6 +80,7 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
</span>
</code>
</pre>
<textarea
style={{ whiteSpace: "break-spaces" }}
aria-label="secret value"
@@ -90,6 +98,60 @@ export const SecretInput = forwardRef<HTMLTextAreaElement, Props>(
readOnly={isReadOnly}
/>
</div>
<div className="absolute z-10 w-60 rounded-md border border-mineshaft-600 bg-mineshaft-700 text-sm text-bunker-200">
<div className="z-10 h-full w-60 flex-col items-center justify-center rounded-md py-4 text-white">
{[
{ name: "SECRET NAME", type: "secret" },
{ name: "Folder", type: "folder" },
{ name: "Development", type: "environment" }
].map((e, i) => {
return (
<div
className="flex items-center justify-between border-b border-mineshaft-600 px-2 py-1 last:border-b-0"
key={`key-${i + 1}`}
>
{e.type === "folder" && (
<>
<div className="flex gap-2">
<div className="flex items-center text-yellow-700">
<FontAwesomeIcon icon={faFolder} />
</div>
<div>{e.name}</div>
</div>
<div className="flex items-center text-bunker-200">
<FontAwesomeIcon icon={faChevronRight} />
</div>
</>
)}
{e.type === "environment" && (
<>
<div className="flex gap-2">
<div className="flex items-center text-yellow-700">
<FontAwesomeIcon icon={faRecycle} />
</div>
<div>{e.name}</div>
</div>
<div className="flex items-center text-bunker-200">
<FontAwesomeIcon icon={faChevronRight} />
</div>
</>
)}
{e.type === "secret" && (
<div className="flex gap-2">
<div className="flex items-center text-yellow-700">
<FontAwesomeIcon icon={faKey} />
</div>
<div>{e.name}</div>
</div>
)}
</div>
);
})}
</div>
</div>
</div>
);
}