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

improvement: improve secret reference styling and reduce debounce for snappier behavior

Browse Source
This commit is contained in:
Scott Wilson
2025-07-28 16:34:39 -07:00
parent 7d1bc86702
commit da28f9224b
1 changed files with 21 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/v2/InfisicalSecretInput/InfisicalSecretInput.tsx
+21 -17
View File
@@ -1,5 +1,5 @@
import { forwardRef, TextareaHTMLAttributes, useCallback, useMemo, useRef, useState } from "react"; import { forwardRef, TextareaHTMLAttributes, useCallback, useMemo, useRef, useState } from "react";
import { faCircle, faFolder, faKey } from "@fortawesome/free-solid-svg-icons"; import { faFolder, faKey, faLayerGroup } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import * as Popover from "@radix-ui/react-popover"; import * as Popover from "@radix-ui/react-popover";
@@ -79,7 +79,7 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
const { currentWorkspace } = useWorkspace(); const { currentWorkspace } = useWorkspace();
const workspaceId = currentWorkspace?.id || ""; const workspaceId = currentWorkspace?.id || "";
const [debouncedValue] = useDebounce(value, 500); const [debouncedValue] = useDebounce(value, 100);
const [highlightedIndex, setHighlightedIndex] = useState(-1); const [highlightedIndex, setHighlightedIndex] = useState(-1);
@@ -142,7 +142,7 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
const suggestions = useMemo(() => { const suggestions = useMemo(() => {
if (!isPopupOpen) return []; if (!isPopupOpen) return [];
// reset highlight whenever recomputation happens // reset highlight whenever recomputation happens
setHighlightedIndex(-1); setHighlightedIndex(0);
const suggestionsArr: ReferenceItem[] = []; const suggestionsArr: ReferenceItem[] = [];
const predicate = suggestionSource.predicate.toLowerCase(); const predicate = suggestionSource.predicate.toLowerCase();
@@ -298,17 +298,21 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
}} }}
> >
<div <div
className="h-full w-full max-w-60 flex-col items-center justify-center rounded-md text-white" className="h-full w-full flex-col items-center justify-center rounded-md text-white"
ref={popoverContentRef} ref={popoverContentRef}
> >
{suggestions.map((item, i) => { {suggestions.map((item, i) => {
let entryIcon; let entryIcon;
let subText;
if (item.type === ReferenceType.SECRET) { if (item.type === ReferenceType.SECRET) {
entryIcon = faKey; entryIcon = <FontAwesomeIcon icon={faKey} className="text-bunker-300" />;
subText = "Secret";
} else if (item.type === ReferenceType.ENVIRONMENT) { } else if (item.type === ReferenceType.ENVIRONMENT) {
entryIcon = faCircle; entryIcon = <FontAwesomeIcon icon={faLayerGroup} className="text-green-700" />;
subText = "Environment";
} else { } else {
entryIcon = faFolder; entryIcon = <FontAwesomeIcon icon={faFolder} className="text-yellow-700" />;
subText = "Folder";
} }
return ( return (
@@ -327,22 +331,22 @@ export const InfisicalSecretInput = forwardRef<HTMLTextAreaElement, Props>(
}} }}
onMouseEnter={() => setHighlightedIndex(i)} onMouseEnter={() => setHighlightedIndex(i)}
style={{ pointerEvents: "auto" }} style={{ pointerEvents: "auto" }}
className="flex items-center justify-between border-mineshaft-600 text-left" className="flex w-full items-center justify-between border-mineshaft-600 text-left"
key={`secret-reference-secret-${i + 1}`} key={`secret-reference-secret-${i + 1}`}
> >
<div <div
className={`${ className={`${
highlightedIndex === i ? "bg-gray-600" : "" highlightedIndex === i ? "bg-mineshaft-500" : ""
} text-md relative mb-0.5 flex w-full cursor-pointer select-none items-center justify-between rounded-md px-2 py-2 outline-none transition-all hover:bg-mineshaft-500 data-[highlighted]:bg-mineshaft-500`} } text-md relative flex w-full cursor-pointer select-none items-center justify-between px-2 py-2 outline-none transition-all hover:bg-mineshaft-700 data-[highlighted]:bg-mineshaft-700`}
> >
<div className="flex w-full gap-2"> <div className="flex w-full items-start gap-2">
<div className="flex items-center text-yellow-700"> <div className="mt-1 flex items-center">{entryIcon}</div>
<FontAwesomeIcon <div className="text-md w-10/12 truncate text-left">
icon={entryIcon} {item.label}
size={item.type === ReferenceType.ENVIRONMENT ? "xs" : "1x"} <div className="mb-[0.1rem] text-xs leading-3 text-bunker-400">
/> {subText}
</div>
</div> </div>
<div className="text-md w-10/12 truncate text-left">{item.label}</div>
</div> </div>
</div> </div>
</div> </div>