awatertrevi/infisical
1
0
Fork 0
mirror of https://github.com/awatertrevi/infisical.git synced 2026-10-03 01:25:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

truncation and UI tweaks

Browse Source
This commit is contained in:
x032205
2025-05-09 02:05:30 -04:00
parent 5bb8756c67
commit 9054db80ad
3 changed files with 44 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/OCIVaultSyncReviewFields.tsx
+9 -3
View File
@@ -12,9 +12,15 @@ export const OCIVaultSyncReviewFields = () => {
return ( return (
<> <>
<GenericFieldLabel label="Compartment OCID">{compartmentOcid}</GenericFieldLabel> <GenericFieldLabel label="Compartment OCID" truncate>
<GenericFieldLabel label="Vault OCID">{vaultOcid}</GenericFieldLabel> {compartmentOcid}
<GenericFieldLabel label="Key OCID">{keyOcid}</GenericFieldLabel> </GenericFieldLabel>
<GenericFieldLabel label="Vault OCID" truncate>
{vaultOcid}
</GenericFieldLabel>
<GenericFieldLabel label="Key OCID" truncate>
{keyOcid}
</GenericFieldLabel>
</> </>
); );
}; };
frontend/src/components/v2/GenericFieldLabel/GenericFieldLabel.tsx
+10 -3
View File
@@ -6,14 +6,21 @@ type Props = {
children?: ReactNode; children?: ReactNode;
className?: string; className?: string;
labelClassName?: string; labelClassName?: string;
truncate?: boolean;
}; };
export const GenericFieldLabel = ({ label, children, className, labelClassName }: Props) => { export const GenericFieldLabel = ({
label,
children,
className,
labelClassName,
truncate
}: Props) => {
return ( return (
<div className={className}> <div className={twMerge("min-w-0", className)}>
<p className={twMerge("text-xs font-medium text-mineshaft-400", labelClassName)}>{label}</p> <p className={twMerge("text-xs font-medium text-mineshaft-400", labelClassName)}>{label}</p>
{children ? ( {children ? (
<p className="text-sm text-mineshaft-100">{children}</p> <p className={twMerge("text-sm text-mineshaft-100", truncate && "truncate")}>{children}</p>
) : ( ) : (
<p className="text-sm italic text-mineshaft-400/50">None</p> <p className="text-sm italic text-mineshaft-400/50">None</p>
)} )}
frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/OCIVaultSyncDestinationSection.tsx
+25 -3
View File
@@ -1,4 +1,5 @@
import { GenericFieldLabel } from "@app/components/secret-syncs"; import { GenericFieldLabel } from "@app/components/secret-syncs";
import { Tooltip } from "@app/components/v2";
import { TOCIVaultSync } from "@app/hooks/api/secretSyncs/types/oci-vault-sync"; import { TOCIVaultSync } from "@app/hooks/api/secretSyncs/types/oci-vault-sync";
type Props = { type Props = {
@@ -12,9 +13,30 @@ export const OCIVaultSyncDestinationSection = ({ secretSync }: Props) => {
return ( return (
<> <>
<GenericFieldLabel label="Compartment OCID">{compartmentOcid}</GenericFieldLabel> <Tooltip side="bottom" className="max-w-sm select-text break-words" content={compartmentOcid}>
<GenericFieldLabel label="Vault OCID">{vaultOcid}</GenericFieldLabel> <div>
<GenericFieldLabel label="Key OCID">{keyOcid}</GenericFieldLabel> <GenericFieldLabel label="Compartment OCID">
{compartmentOcid.substring(0, 21)}...
{compartmentOcid.substring(compartmentOcid.length - 6)}
</GenericFieldLabel>
</div>
</Tooltip>
<Tooltip side="bottom" className="max-w-sm select-text break-words" content={compartmentOcid}>
<div>
<GenericFieldLabel label="Vault OCID">
{vaultOcid.substring(0, 15)}...
{vaultOcid.substring(vaultOcid.length - 6)}
</GenericFieldLabel>
</div>
</Tooltip>
<Tooltip side="bottom" className="max-w-sm select-text break-words" content={compartmentOcid}>
<div>
<GenericFieldLabel label="Key OCID">
{keyOcid.substring(0, 13)}...
{keyOcid.substring(keyOcid.length - 6)}
</GenericFieldLabel>
</div>
</Tooltip>
</> </>
); );
}; };