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

improvement: add tooltip to secret table resource count and match secret icon color

Browse Source
This commit is contained in:
Scott Wilson
2024-09-26 16:40:33 -07:00
parent 65375886bd
commit 3a43d7c5d5
2 changed files with 59 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/SecretOverviewPage/components/SecretOverviewTableRow/SecretOverviewTableRow.tsx
+1 -1
View File
@@ -73,7 +73,7 @@ export const SecretOverviewTableRow = ({
> >
<div className="h-full w-full border-r border-mineshaft-600 py-2.5 px-5"> <div className="h-full w-full border-r border-mineshaft-600 py-2.5 px-5">
<div className="flex items-center space-x-5"> <div className="flex items-center space-x-5">
<div className="text-blue-300/70"> <div className="text-bunker-300">
<Checkbox <Checkbox
id={`checkbox-${secretKey}`} id={`checkbox-${secretKey}`}
isChecked={isSelected} isChecked={isSelected}
frontend/src/views/SecretOverviewPage/components/SecretTableResourceCount/SecretTableResourceCount.tsx
+58 -16
View File
@@ -1,6 +1,8 @@
import { faFileImport, faFingerprint, faFolder, faKey } from "@fortawesome/free-solid-svg-icons"; import { faFileImport, faFingerprint, faFolder, faKey } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { Tooltip } from "@app/components/v2";
type Props = { type Props = {
folderCount?: number; folderCount?: number;
importCount?: number; importCount?: number;
@@ -17,28 +19,68 @@ export const SecretTableResourceCount = ({
return ( return (
<div className="flex items-center gap-2 divide-x divide-mineshaft-500 text-sm text-mineshaft-400"> <div className="flex items-center gap-2 divide-x divide-mineshaft-500 text-sm text-mineshaft-400">
{importCount > 0 && ( {importCount > 0 && (
<div className="flex items-center gap-2"> <Tooltip
<FontAwesomeIcon icon={faFileImport} className=" text-green-700" /> className="max-w-sm"
<span>{importCount}</span> content={
</div> <p className="whitespace-nowrap text-center">
Total import count{" "}
<span className="text-center text-mineshaft-400">(matching filters)</span>
</p>
}
>
<div className="flex items-center gap-2">
<FontAwesomeIcon icon={faFileImport} className=" text-green-700" />
<span>{importCount}</span>
</div>
</Tooltip>
)} )}
{folderCount > 0 && ( {folderCount > 0 && (
<div className="flex items-center gap-2 pl-2"> <Tooltip
<FontAwesomeIcon icon={faFolder} className="text-yellow-700" /> className="max-w-sm"
<span>{folderCount}</span> content={
</div> <p className="whitespace-nowrap text-center">
Total folder count{" "}
<span className="text-center text-mineshaft-400">(matching filters)</span>
</p>
}
>
<div className="flex items-center gap-2 pl-2">
<FontAwesomeIcon icon={faFolder} className="text-yellow-700" />
<span>{folderCount}</span>
</div>
</Tooltip>
)} )}
{dynamicSecretCount > 0 && ( {dynamicSecretCount > 0 && (
<div className="flex items-center gap-2 pl-2"> <Tooltip
<FontAwesomeIcon icon={faFingerprint} className="text-yellow-700" /> className="max-w-sm"
<span>{dynamicSecretCount}</span> content={
</div> <p className="whitespace-nowrap text-center">
Total dynamic secret count{" "}
<span className="text-center text-mineshaft-400">(matching filters)</span>
</p>
}
>
<div className="flex items-center gap-2 pl-2">
<FontAwesomeIcon icon={faFingerprint} className="text-yellow-700" />
<span>{dynamicSecretCount}</span>
</div>
</Tooltip>
)} )}
{secretCount > 0 && ( {secretCount > 0 && (
<div className="flex items-center gap-2 pl-2"> <Tooltip
<FontAwesomeIcon icon={faKey} className="text-bunker-300" /> className="max-w-sm"
<span>{secretCount}</span> content={
</div> <p className="whitespace-nowrap text-center">
Total secret count{" "}
<span className="text-center text-mineshaft-400">(matching filters)</span>
</p>
}
>
<div className="flex items-center gap-2 pl-2">
<FontAwesomeIcon icon={faKey} className="text-bunker-300" />
<span>{secretCount}</span>
</div>
</Tooltip>
)} )}
</div> </div>
); );