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

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

12
frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/OCIVaultSyncReviewFields.tsx
View File

@@ -12,9 +12,15 @@ export const OCIVaultSyncReviewFields = () => {
return (
<>
<GenericFieldLabel label="Compartment OCID">{compartmentOcid}</GenericFieldLabel>
<GenericFieldLabel label="Vault OCID">{vaultOcid}</GenericFieldLabel>
<GenericFieldLabel label="Key OCID">{keyOcid}</GenericFieldLabel>
<GenericFieldLabel label="Compartment OCID" truncate>
{compartmentOcid}
</GenericFieldLabel>
<GenericFieldLabel label="Vault OCID" truncate>
{vaultOcid}
</GenericFieldLabel>
<GenericFieldLabel label="Key OCID" truncate>
{keyOcid}
</GenericFieldLabel>
</>
);
};

13
frontend/src/components/v2/GenericFieldLabel/GenericFieldLabel.tsx
View File

@@ -6,14 +6,21 @@ type Props = {
children?: ReactNode;
className?: string;
labelClassName?: string;
truncate?: boolean;
};
export const GenericFieldLabel = ({ label, children, className, labelClassName }: Props) => {
export const GenericFieldLabel = ({
label,
children,
className,
labelClassName,
truncate
}: Props) => {
return (
<div className={className}>
<div className={twMerge("min-w-0", className)}>
<p className={twMerge("text-xs font-medium text-mineshaft-400", labelClassName)}>{label}</p>
{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>
)}

28
frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/OCIVaultSyncDestinationSection.tsx
View File

@@ -1,4 +1,5 @@
import { GenericFieldLabel } from "@app/components/secret-syncs";
import { Tooltip } from "@app/components/v2";
import { TOCIVaultSync } from "@app/hooks/api/secretSyncs/types/oci-vault-sync";
type Props = {
@@ -12,9 +13,30 @@ export const OCIVaultSyncDestinationSection = ({ secretSync }: Props) => {
return (
<>
<GenericFieldLabel label="Compartment OCID">{compartmentOcid}</GenericFieldLabel>
<GenericFieldLabel label="Vault OCID">{vaultOcid}</GenericFieldLabel>
<GenericFieldLabel label="Key OCID">{keyOcid}</GenericFieldLabel>
<Tooltip side="bottom" className="max-w-sm select-text break-words" content={compartmentOcid}>
<div>
<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>
</>
);
};