Improves the styiling of the dsiplayed details

canonical · Jun 26, 2024 · b822baa · b822baa
1 parent 09c8e0b
commit b822baa
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 12 deletions.
diff --git a/ui/src/app/certificate_requests/row.tsx b/ui/src/app/certificate_requests/row.tsx
@@ -1,6 +1,6 @@
 import { useState, Dispatch, SetStateAction } from "react"
 import { extractCSR, extractCert } from "../utils"
-
+import "./../globals.scss"
 
 type rowProps = {
     id: number,
@@ -23,6 +23,12 @@ export default function Row({ id, csr, certificate, ActionMenuExpanded, setActio
             setActionMenuExpanded(id)
         }
     }
+    const getFieldDisplay = (key: string, field: string | undefined, defaultMessage: string) => (
+        <p style={{ color: field ? "black" : "grey" }}>
+            <b>{key}</b>: {field || defaultMessage}
+        </p>
+    );
+
     return (
         <tr>
             <td className="" width={5} aria-label="id">{id}</td>
@@ -65,18 +71,24 @@ export default function Row({ id, csr, certificate, ActionMenuExpanded, setActio
                 </span>
             </td>
             <td id="expanded-row" className="p-table__expanding-panel" aria-hidden={detailsMenuOpen ? "false" : "true"}>
-                <div className="row">
-                    <div className="col-8">
-                        <p><b>Common Name</b>: {csrObj.commonName || "N/A"}</p>
-                        <p><b>Organization</b>: {csrObj.organization || "N/A"}</p>
-                        <p><b>Country</b>: {csrObj.country || "N/A"}</p>
-                        <p><b>Locality</b>: {csrObj.locality || "N/A"}</p>
-                        <p><b>Email Address</b>: {csrObj.emailAddress || "N/A"}</p>
-                        <p><b>Subject Alternative Name DNS</b>: {csrObj.sansDns && csrObj.sansDns.length > 0 ? csrObj.sansDns.join(', ') : "N/A"}</p>
-                        <p><b>Subject Alternative Name IP addresses</b>: {csrObj.sansIp && csrObj.sansIp.length > 0 ? csrObj.sansIp.join(', ') : "N/A"}</p>
+                <div className="col-8">
+                    <div className="certificate-info">
+                        <h4>Basic Information</h4>
+                        {getFieldDisplay("Common Name", csrObj.commonName, "N/A")}
+                        {getFieldDisplay("Organization", csrObj.organization, "N/A")}
+                        {getFieldDisplay("Country", csrObj.country, "N/A")}
+                        {getFieldDisplay("Locality", csrObj.locality, "N/A")}
+                        {getFieldDisplay("Email Address", csrObj.emailAddress, "N/A")}
                         <p><b>Certificate request for a certificate authority</b>: {csrObj.is_ca ? "Yes" : "No"}</p>
                     </div>
+                    <div className="certificate-info">
+                        <h4>Subject Alternative Names</h4>
+                        {getFieldDisplay("Subject Alternative Name DNS", csrObj.sansDns && csrObj.sansDns.length > 0 ? csrObj.sansDns.join(', ') : "", "N/A")}
+                        {getFieldDisplay("Subject Alternative Name IP addresses", csrObj.sansIp && csrObj.sansIp.length > 0 ? csrObj.sansIp.join(', ') : "", "N/A")}
+                    </div>
                 </div>
+
+
             </td>
         </tr>
     )

diff --git a/ui/src/app/globals.scss b/ui/src/app/globals.scss
@@ -8,10 +8,11 @@
 @include vf-p-icon-security;
 
 // Override visibility settings
-#csr-table{
+#csr-table {
     overflow: visible;
 }
-.p-panel__content{
+
+.p-panel__content {
     overflow: visible;
 }
 
@@ -43,4 +44,17 @@
         margin-top: 0.5rem;
         padding-left: 1.5rem;
     }
+}
+
+.certificate-info {
+    margin: 0;
+    padding: 0;
+}
+
+.certificate-info h4 {
+    margin: 4px 0;
+}
+
+.certificate-info p {
+    margin: 4px 0;
 }