diff --git a/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/OCIVaultSyncReviewFields.tsx b/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/OCIVaultSyncReviewFields.tsx index 5c44988bb..16166c88c 100644 --- a/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/OCIVaultSyncReviewFields.tsx +++ b/frontend/src/components/secret-syncs/forms/SecretSyncReviewFields/OCIVaultSyncReviewFields.tsx @@ -12,9 +12,15 @@ export const OCIVaultSyncReviewFields = () => { return ( <> - {compartmentOcid} - {vaultOcid} - {keyOcid} + + {compartmentOcid} + + + {vaultOcid} + + + {keyOcid} + ); }; diff --git a/frontend/src/components/v2/GenericFieldLabel/GenericFieldLabel.tsx b/frontend/src/components/v2/GenericFieldLabel/GenericFieldLabel.tsx index 5200e1898..95eaf5745 100644 --- a/frontend/src/components/v2/GenericFieldLabel/GenericFieldLabel.tsx +++ b/frontend/src/components/v2/GenericFieldLabel/GenericFieldLabel.tsx @@ -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 ( -
+

{label}

{children ? ( -

{children}

+

{children}

) : (

None

)} diff --git a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/OCIVaultSyncDestinationSection.tsx b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/OCIVaultSyncDestinationSection.tsx index 19445a652..8a987ae26 100644 --- a/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/OCIVaultSyncDestinationSection.tsx +++ b/frontend/src/pages/secret-manager/SecretSyncDetailsByIDPage/components/SecretSyncDestinationSection/OCIVaultSyncDestinationSection.tsx @@ -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 ( <> - {compartmentOcid} - {vaultOcid} - {keyOcid} + +
+ + {compartmentOcid.substring(0, 21)}... + {compartmentOcid.substring(compartmentOcid.length - 6)} + +
+
+ +
+ + {vaultOcid.substring(0, 15)}... + {vaultOcid.substring(vaultOcid.length - 6)} + +
+
+ +
+ + {keyOcid.substring(0, 13)}... + {keyOcid.substring(keyOcid.length - 6)} + +
+
); };