update tls certificate list

equinor · Sep 21, 2023 · 3d2a0f1 · 3d2a0f1
1 parent 81686f7
commit 3d2a0f1
Showing 1 changed file with 16 additions and 13 deletions.
diff --git a/src/components/tls-certificate-list/index.tsx b/src/components/tls-certificate-list/index.tsx
@@ -1,6 +1,6 @@
 import { Icon, Typography } from '@equinor/eds-core-react';
 import { chevron_down, chevron_up } from '@equinor/eds-icons';
-import { Fragment, FunctionComponent, useState } from 'react';
+import { FunctionComponent, useCallback, useState } from 'react';
 
 import { TLSCertificateModel } from '../../models/radix-api/secrets/tls-certificate';
 import { formatDateTime } from '../../utils/datetime';
@@ -10,34 +10,37 @@ import './style.css';
 export const TLSCertificateList: FunctionComponent<{
   tlsCertificates: Array<TLSCertificateModel>;
 }> = ({ tlsCertificates }) => {
-  const [expandRows, setExpandRows] = useState<Record<number, boolean>>({
+  const [expandedRows, setExpandedRows] = useState<Record<number, boolean>>({
     0: true,
   });
-  function toggleExpandRow(i: number) {
-    setExpandRows({ ...expandRows, [i]: !expandRows[i] });
-  }
+  const expandRow = useCallback<(index: number) => void>(
+    (idx) => setExpandedRows((x) => ({ ...x, [idx]: !x[idx] })),
+    []
+  );
 
   return (
-    <div className="tls-certificate-list">
+    <div className="grid grid--gap-large">
       {tlsCertificates
-        .map((v, i) => ({ tlsCertificate: v, isExpanded: !!expandRows[i] }))
+        .map((v, i) => ({ tlsCertificate: v, isExpanded: !!expandedRows[i] }))
         .map(({ tlsCertificate, isExpanded }, i) => (
-          <Fragment key={i}>
+          <div key={i} className="tls-certificate-list">
             <div>
               <Typography link as="span">
                 <Icon
                   size={24}
                   data={isExpanded ? chevron_up : chevron_down}
                   role="button"
                   title="Toggle more information"
-                  onClick={() => toggleExpandRow(i)}
+                  onClick={() => expandRow(i)}
                 />
               </Typography>
             </div>
+
             <div className="grid grid--gap-medium">
               <Typography>
                 Issued to <strong>{tlsCertificate?.subject}</strong>
               </Typography>
+
               {isExpanded && (
                 <>
                   <Typography>
@@ -60,18 +63,18 @@ export const TLSCertificateList: FunctionComponent<{
                   {tlsCertificate.dnsNames?.length > 0 && (
                     <Typography>
                       Subject alternative name{' '}
-                      {tlsCertificate.dnsNames.map((dnsName, i, a) => (
+                      {tlsCertificate.dnsNames.map((name, i, { length }) => (
                         <strong key={i}>
-                          {dnsName}
-                          {i < a.length - 1 && ', '}
+                          {name}
+                          {i < length - 1 && ', '}
                         </strong>
                       ))}
                     </Typography>
                   )}
                 </>
               )}
             </div>
-          </Fragment>
+          </div>
         ))}
     </div>
   );