Merge pull request #235 from jtomasek/about-modal-update

Fix service labels and use DetailList in AboutModal

Author: mareklibra

Diff for: src/components/AboutModal.tsx

@@ -3,13 +3,11 @@ import {
   Button,
   AboutModal as PFAboutModal,
   TextContent,
-  TextList,
-  TextListItem,
   ButtonVariant,
 } from '@patternfly/react-core';
 import { GIT_SHA, VERSION, SERVICE_LABELS } from '../config/standalone';
 import redHatLogo from '../images/Logo-Red_Hat-OpenShift_Container_Platform-B-Reverse-RGB.png';
-import { Api } from 'facet-lib';
+import { Api, DetailList, DetailItem } from 'facet-lib';
 
 const { getVersions, handleApiError } = Api;
 
@@ -58,18 +56,21 @@ const AboutModal: React.FC<AboutModalProps> = ({ isOpen, onClose }) => {
       brandImageAlt="Assisted Installer Logo"
     >
       <TextContent>
-        <TextList component="dl">
-          <TextListItem component="dt">Assisted Installer UI version</TextListItem>
-          <TextListItem component="dd">
-            {VERSION} {GIT_SHA ? `(${GIT_SHA})` : ''}
-          </TextListItem>
-          {Object.keys(versions).map((version) => (
-            <>
-              <TextListItem component="dt">{SERVICE_LABELS[version] || version}</TextListItem>
-              <TextListItem component="dd">{versions[version]}</TextListItem>
-            </>
-          ))}
-        </TextList>
+        <DetailList>
+          <>
+            <DetailItem
+              title="Assisted Installer UI version"
+              value={`${VERSION} ${GIT_SHA ? `(${GIT_SHA})` : ''}`}
+            />
+            {Object.keys(versions).map((version) => (
+              <DetailItem
+                key={version}
+                title={SERVICE_LABELS[version] || version}
+                value={versions[version]}
+              />
+            ))}
+          </>
+        </DetailList>
       </TextContent>
     </PFAboutModal>
   );

Diff for: src/config/standalone.ts

@@ -2,9 +2,9 @@ export const VERSION = process.env.REACT_APP_VERSION;
 export const GIT_SHA = process.env.REACT_APP_GIT_SHA;
 
 export const SERVICE_LABELS: { [key in string]: string } = {
-  'assisted-installer': 'Assisted Installer',
-  'assisted-installer-service': 'Assisted Installer Service',
-  'discovery-agent': 'Discovery Agent',
-  'ignition-manifests-and-kubeconfig-generate': 'Ignition Manifests and Kubeconfig Generate',
-  'image-builder': 'Image Builder',
+  assistedInstaller: 'Assisted Installer',
+  assistedInstallerService: 'Assisted Installer Service',
+  discoveryAgent: 'Discovery Agent',
+  ignitionManifestsAndKubeconfigGenerate: 'Ignition Manifests and Kubeconfig Generate',
+  imageBuilder: 'Image Builder',
 };