mirror of
https://github.com/awatertrevi/infisical.git
synced 2026-10-06 07:26:45 +00:00
Feat: Show imported values in overview
This commit is contained in:
+24
-8
@@ -14,6 +14,7 @@ import { twMerge } from "tailwind-merge";
|
|||||||
import { Button, Checkbox, TableContainer, Td, Tooltip, Tr } from "@app/components/v2";
|
import { Button, Checkbox, TableContainer, Td, Tooltip, Tr } from "@app/components/v2";
|
||||||
import { useToggle } from "@app/hooks";
|
import { useToggle } from "@app/hooks";
|
||||||
import { DecryptedSecret } from "@app/hooks/api/secrets/types";
|
import { DecryptedSecret } from "@app/hooks/api/secrets/types";
|
||||||
|
import { WorkspaceEnv } from "@app/hooks/api/types";
|
||||||
|
|
||||||
import { SecretEditRow } from "./SecretEditRow";
|
import { SecretEditRow } from "./SecretEditRow";
|
||||||
import SecretRenameRow from "./SecretRenameRow";
|
import SecretRenameRow from "./SecretRenameRow";
|
||||||
@@ -30,6 +31,10 @@ type Props = {
|
|||||||
onSecretUpdate: (env: string, key: string, value: string, secretId?: string) => Promise<void>;
|
onSecretUpdate: (env: string, key: string, value: string, secretId?: string) => Promise<void>;
|
||||||
onSecretDelete: (env: string, key: string, secretId?: string) => Promise<void>;
|
onSecretDelete: (env: string, key: string, secretId?: string) => Promise<void>;
|
||||||
isImportedSecretPresentInEnv: (env: string, secretName: string) => boolean;
|
isImportedSecretPresentInEnv: (env: string, secretName: string) => boolean;
|
||||||
|
getImportedSecretByKey: (
|
||||||
|
env: string,
|
||||||
|
secretName: string
|
||||||
|
) => { secret?: DecryptedSecret; environmentInfo?: WorkspaceEnv } | undefined;
|
||||||
};
|
};
|
||||||
|
|
||||||
export const SecretOverviewTableRow = ({
|
export const SecretOverviewTableRow = ({
|
||||||
@@ -41,6 +46,7 @@ export const SecretOverviewTableRow = ({
|
|||||||
onSecretCreate,
|
onSecretCreate,
|
||||||
onSecretDelete,
|
onSecretDelete,
|
||||||
isImportedSecretPresentInEnv,
|
isImportedSecretPresentInEnv,
|
||||||
|
getImportedSecretByKey,
|
||||||
expandableColWidth,
|
expandableColWidth,
|
||||||
onToggleSecretSelect,
|
onToggleSecretSelect,
|
||||||
isSelected
|
isSelected
|
||||||
@@ -53,8 +59,9 @@ export const SecretOverviewTableRow = ({
|
|||||||
<>
|
<>
|
||||||
<Tr isHoverable isSelectable onClick={() => setIsFormExpanded.toggle()} className="group">
|
<Tr isHoverable isSelectable onClick={() => setIsFormExpanded.toggle()} className="group">
|
||||||
<Td
|
<Td
|
||||||
className={`sticky left-0 z-10 bg-mineshaft-800 bg-clip-padding py-0 px-0 group-hover:bg-mineshaft-700 ${isFormExpanded && "border-t-2 border-mineshaft-500"
|
className={`sticky left-0 z-10 bg-mineshaft-800 bg-clip-padding py-0 px-0 group-hover:bg-mineshaft-700 ${
|
||||||
}`}
|
isFormExpanded && "border-t-2 border-mineshaft-500"
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
<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">
|
||||||
@@ -107,8 +114,8 @@ export const SecretOverviewTableRow = ({
|
|||||||
isSecretPresent
|
isSecretPresent
|
||||||
? "Present secret"
|
? "Present secret"
|
||||||
: isSecretImported
|
: isSecretImported
|
||||||
? "Imported secret"
|
? "Imported secret"
|
||||||
: "Missing secret"
|
: "Missing secret"
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<FontAwesomeIcon
|
<FontAwesomeIcon
|
||||||
@@ -132,8 +139,9 @@ export const SecretOverviewTableRow = ({
|
|||||||
<Tr>
|
<Tr>
|
||||||
<Td
|
<Td
|
||||||
colSpan={totalCols}
|
colSpan={totalCols}
|
||||||
className={`bg-bunker-600 px-0 py-0 ${isFormExpanded && "border-b-2 border-mineshaft-500"
|
className={`bg-bunker-600 px-0 py-0 ${
|
||||||
}`}
|
isFormExpanded && "border-b-2 border-mineshaft-500"
|
||||||
|
}`}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="ml-2 p-2"
|
className="ml-2 p-2"
|
||||||
@@ -179,6 +187,7 @@ export const SecretOverviewTableRow = ({
|
|||||||
const isCreatable = !secret;
|
const isCreatable = !secret;
|
||||||
|
|
||||||
const isImportedSecret = isImportedSecretPresentInEnv(slug, secretKey);
|
const isImportedSecret = isImportedSecretPresentInEnv(slug, secretKey);
|
||||||
|
const importedSecret = getImportedSecretByKey(slug, secretKey);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<tr
|
<tr
|
||||||
@@ -189,8 +198,15 @@ export const SecretOverviewTableRow = ({
|
|||||||
className="flex h-full items-center"
|
className="flex h-full items-center"
|
||||||
style={{ padding: "0.25rem 1rem" }}
|
style={{ padding: "0.25rem 1rem" }}
|
||||||
>
|
>
|
||||||
<div title={name} className="flex h-8 w-[8rem] items-center ">
|
<div title={name} className="flex h-8 w-[8rem] items-center space-x-2 ">
|
||||||
<span className="truncate">{name}</span>
|
<span className="truncate">{name}</span>
|
||||||
|
{isImportedSecret && (
|
||||||
|
<Tooltip
|
||||||
|
content={`Imported secret from the '${importedSecret?.environmentInfo?.name}' environment`}
|
||||||
|
>
|
||||||
|
<FontAwesomeIcon icon={faFileImport} />
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</td>
|
</td>
|
||||||
<td className="col-span-2 h-8 w-full">
|
<td className="col-span-2 h-8 w-full">
|
||||||
@@ -198,7 +214,7 @@ export const SecretOverviewTableRow = ({
|
|||||||
secretPath={secretPath}
|
secretPath={secretPath}
|
||||||
isVisible={isSecretVisible}
|
isVisible={isSecretVisible}
|
||||||
secretName={secretKey}
|
secretName={secretKey}
|
||||||
defaultValue={secret?.value}
|
defaultValue={secret?.value || importedSecret?.secret?.value}
|
||||||
secretId={secret?.id}
|
secretId={secret?.id}
|
||||||
isImportedSecret={isImportedSecret}
|
isImportedSecret={isImportedSecret}
|
||||||
isCreatable={isCreatable}
|
isCreatable={isCreatable}
|
||||||
|
|||||||
Reference in New Issue
Block a user