Merge pull request #220 from jtomasek/about-modal

Add about modal with UI version info

Author: mareklibra

Diff for: src/components/AboutModal.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import {
+  Button,
+  AboutModal,
+  TextContent,
+  TextList,
+  TextListItem,
+  ButtonVariant,
+} from '@patternfly/react-core';
+import { GIT_SHA, VERSION } from '../config/standalone';
+import redHatLogo from '../images/Logo-Red_Hat-OpenShift_Container_Platform-B-Reverse-RGB.png';
+
+export const AboutModalButton: React.FC = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const closeModal = () => setIsModalOpen(false);
+  const handleClick = () => setIsModalOpen(true);
+  return (
+    <>
+      <Button variant={ButtonVariant.plain} onClick={handleClick}>
+        About
+      </Button>
+      <AboutModal
+        isOpen={isModalOpen}
+        onClose={closeModal}
+        productName="OpenShift Container Platform Assisted Installer"
+        brandImageSrc={redHatLogo}
+        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>
+          </TextList>
+        </TextContent>
+      </AboutModal>
+    </>
+  );
+};
+
+export default AboutModalButton;

Diff for: src/components/ui/Header.tsx

@@ -4,7 +4,7 @@ import metal3FacetLogo from '../../images/metal3_facet-whitetext.png';
 import redhatLogo from '../../images/Logo-Red_Hat-OpenShift_Container_Platform-B-Reverse-RGB.png';
 import { getProductBrandingCode, FEEDBACK_FORM_LINK } from '../../config/constants';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
-import { VERSION } from '../../config/standalone';
+import AboutModalButton from '../AboutModal';
 
 const getBrandingDetails = () => {
   switch (getProductBrandingCode()) {
@@ -38,7 +38,7 @@ const Header: React.FC = () => {
           >
             Provide feedback <ExternalLinkAltIcon />
           </Button>
-          {VERSION}
+          <AboutModalButton />
         </PageHeaderTools>
       }
       // toolbar={PageToolbar}