From 743d2b2c9620751ec782eab3dc85a662bd228d53 Mon Sep 17 00:00:00 2001
From: Gabriel Hernandez <ghernandez345@gmail.com>
Date: Thu, 30 Oct 2025 10:39:30 +0000
Subject: [PATCH] add truncation to data set values in certificate details
 modal (#34920)

<!-- Add the related story/sub-task/bug number, like Resolves #123, or
remove if NA -->
**Related issue:** Fixes #34652

Fixes an issue with the organizational unit value overflowing in the
certificate details modal.

This adds truncation to all data set values in this component so that
all values will be truncated if they overflow
---
 .../CertificateDetailsModal.tsx               | 51 ++++++++++++-------
 1 file changed, 34 insertions(+), 17 deletions(-)

diff --git a/frontend/pages/hosts/details/modals/CertificateDetailsModal/CertificateDetailsModal.tsx b/frontend/pages/hosts/details/modals/CertificateDetailsModal/CertificateDetailsModal.tsx
index 8f59d36eaf..ee8d33d987 100644
--- a/frontend/pages/hosts/details/modals/CertificateDetailsModal/CertificateDetailsModal.tsx
+++ b/frontend/pages/hosts/details/modals/CertificateDetailsModal/CertificateDetailsModal.tsx
@@ -5,6 +5,7 @@ import { IHostCertificate } from "interfaces/certificates";
 import Modal from "components/Modal";
 import DataSet from "components/DataSet";
 import Button from "components/buttons/Button";
+import TooltipTruncatedText from "components/TooltipTruncatedText";
 import { monthDayYearFormat } from "utilities/date_format";
 
 const baseClass = "certificate-details-modal";
@@ -88,28 +89,30 @@ const CertificateDetailsModal = ({
                 {subjectCountry && (
                   <DataSet
                     title="Country or region"
-                    value={subjectCountry}
+                    value={<TooltipTruncatedText value={subjectCountry} />}
                     orientation="horizontal"
                   />
                 )}
                 {subjectOrganization && (
                   <DataSet
                     title="Organization"
-                    value={subjectOrganization}
+                    value={<TooltipTruncatedText value={subjectOrganization} />}
                     orientation="horizontal"
                   />
                 )}
                 {subjectOrganizationalUnit && (
                   <DataSet
                     title="Organizational unit"
-                    value={subjectOrganizationalUnit}
+                    value={
+                      <TooltipTruncatedText value={subjectOrganizationalUnit} />
+                    }
                     orientation="horizontal"
                   />
                 )}
                 {subjectCommonName && (
                   <DataSet
                     title="Common name"
-                    value={subjectCommonName}
+                    value={<TooltipTruncatedText value={subjectCommonName} />}
                     orientation="horizontal"
                   />
                 )}
@@ -123,28 +126,30 @@ const CertificateDetailsModal = ({
                 {issuerCountry && (
                   <DataSet
                     title="Country or region"
-                    value={issuerCountry}
+                    value={<TooltipTruncatedText value={issuerCountry} />}
                     orientation="horizontal"
                   />
                 )}
                 {issuerOrganization && (
                   <DataSet
                     title="Organization"
-                    value={issuerOrganization}
+                    value={<TooltipTruncatedText value={issuerOrganization} />}
                     orientation="horizontal"
                   />
                 )}
                 {issuerOrganizationalUnit && (
                   <DataSet
                     title="Organizational unit"
-                    value={issuerOrganizationalUnit}
+                    value={
+                      <TooltipTruncatedText value={issuerOrganizationalUnit} />
+                    }
                     orientation="horizontal"
                   />
                 )}
                 {issuerCommonName && (
                   <DataSet
                     title="Common name"
-                    value={issuerCommonName}
+                    value={<TooltipTruncatedText value={issuerCommonName} />}
                     orientation="horizontal"
                   />
                 )}
@@ -158,14 +163,22 @@ const CertificateDetailsModal = ({
                 {not_valid_before && (
                   <DataSet
                     title="Not valid before"
-                    value={monthDayYearFormat(not_valid_before)}
+                    value={
+                      <TooltipTruncatedText
+                        value={monthDayYearFormat(not_valid_before)}
+                      />
+                    }
                     orientation="horizontal"
                   />
                 )}
                 {not_valid_after && (
                   <DataSet
                     title="Not valid after"
-                    value={monthDayYearFormat(not_valid_after)}
+                    value={
+                      <TooltipTruncatedText
+                        value={monthDayYearFormat(not_valid_after)}
+                      />
+                    }
                     orientation="horizontal"
                   />
                 )}
@@ -179,35 +192,35 @@ const CertificateDetailsModal = ({
                 {key_algorithm && (
                   <DataSet
                     title="Algorithm"
-                    value={key_algorithm}
+                    value={<TooltipTruncatedText value={key_algorithm} />}
                     orientation="horizontal"
                   />
                 )}
                 {!!key_strength && (
                   <DataSet
                     title="Key size"
-                    value={key_strength}
+                    value={<TooltipTruncatedText value={key_strength} />}
                     orientation="horizontal"
                   />
                 )}
                 {key_usage && (
                   <DataSet
                     title="Key usage"
-                    value={key_usage}
+                    value={<TooltipTruncatedText value={key_usage} />}
                     orientation="horizontal"
                   />
                 )}
                 {serial && (
                   <DataSet
                     title="Serial number (hex)"
-                    value={serial}
+                    value={<TooltipTruncatedText value={serial} />}
                     orientation="horizontal"
                   />
                 )}
                 {serialDecimal && (
                   <DataSet
                     title="Serial number (decimal)"
-                    value={serialDecimal}
+                    value={<TooltipTruncatedText value={serialDecimal} />}
                     orientation="horizontal"
                   />
                 )}
@@ -220,7 +233,11 @@ const CertificateDetailsModal = ({
             <dl>
               <DataSet
                 title="Certificate authority"
-                value={certificate_authority ? "Yes" : "No"}
+                value={
+                  <TooltipTruncatedText
+                    value={certificate_authority ? "Yes" : "No"}
+                  />
+                }
                 orientation="horizontal"
               />
             </dl>
@@ -231,7 +248,7 @@ const CertificateDetailsModal = ({
               <dl>
                 <DataSet
                   title="Algorithm"
-                  value={signing_algorithm}
+                  value={<TooltipTruncatedText value={signing_algorithm} />}
                   orientation="horizontal"
                 />
               </dl>