webui: provide an About screen

ui/webui/src/components/AnacondaAboutModal.jsx

@@ -0,0 +1,100 @@
+/*
+ * Copyright (C) 2023 Red Hat, Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; either version 2.1 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with This program; If not, see <http://www.gnu.org/licenses/>.
+ */
+import cockpit from "cockpit";
+
+import React, { useState, useEffect } from "react";
+import {
+    AboutModal,
+    Button,
+    Flex,
+    TextContent,
+    TextList,
+    TextListItem,
+    Stack,
+    StackItem
+} from "@patternfly/react-core";
+import { ExternalLinkAltIcon } from "@patternfly/react-icons";
+
+import { getAnacondaVersion } from "../helpers/product.js";
+import { LanguageContext } from "./Common.jsx";
+
+import "./AnacondaAboutModal.scss";
+
+const _ = cockpit.gettext;
+
+const AboutModalVersions = ({ anacondaVersion }) => {
+    const arr = [["Anaconda", anacondaVersion]];
+
+    return (
+        <TextContent>
+            <TextList id="about-modal-content" component="dl">
+                {arr.map((item) => (
+                    <React.Fragment key={item[0]}>
+                        <TextListItem component="dt">{item[0]}</TextListItem>
+                        <TextListItem component="dd">{item[1]}</TextListItem>
+                    </React.Fragment>
+                ))}
+            </TextList>
+        </TextContent>
+    );
+};
+
+const ProductName = ({ prettyName }) => {
+    return (
+        <Stack hasGutter>
+            <StackItem id="about-modal-title">{prettyName}</StackItem>
+            <StackItem id="about-modal-subtitle" className="subtitle">{_("Powered by Anaconda")}</StackItem>
+        </Stack>
+    );
+};
+
+export const AnacondaAboutModal = ({ isModalOpen, setIsAboutModalOpen }) => {
+    const [anacondaVersion, setAnacondaVersion] = useState("");
+    const { prettyName } = React.useContext(LanguageContext);
+
+    const toggleModal = () => {
+        setIsAboutModalOpen(!isModalOpen);
+    };
+
+    useEffect(() => {
+        getAnacondaVersion().then(content => setAnacondaVersion(content));
+    }, []);
+
+    return (
+        <AboutModal
+          noAboutModalBoxContentContainer
+          isOpen={isModalOpen}
+          onClose={toggleModal}
+          trademark="Anaconda © 2023 Red Hat, Inc."
+          productName={<ProductName prettyName={prettyName} />}
+        >
+            <Flex id="about-modal-flex2" direction={{ default: "column" }} justifyContent={{ default: "justifyContentSpaceBetween" }}>
+                <AboutModalVersions anacondaVersion={anacondaVersion} />
+                <Button
+                  isInline
+                  id="anaconda-page-button"
+                  variant="link"
+                  icon={<ExternalLinkAltIcon />}
+                  href="https://github.com/rhinstaller/anaconda"
+                  target="_blank"
+                  component="a">
+                    {_("Anaconda project page")}
+                </Button>
+            </Flex>
+        </AboutModal>
+    );
+};

ui/webui/src/components/AnacondaAboutModal.scss

@@ -0,0 +1,48 @@
+@import "global-variables";
+
+.pf-c-about-modal-box__strapline {
+    padding-top: 0;
+  }
+
+  /* Scale down the about box to be a little smaller */
+  @media only screen and (min-width: 992px) {
+    .pf-c-about-modal-box {
+      --pf-c-about-modal-box--lg--MaxWidth: 62rem;
+      --pf-c-about-modal-box--lg--MaxHeight: 38rem;
+      grid-template-rows: 3rem max-content auto;
+      grid-template-columns: 1fr 0fr;
+    }
+  }
+
+  /* Hide the logo and side graphic */
+  .pf-c-about-modal-box__brand,
+  .pf-c-about-modal-box__hero {
+      display: none;
+  }
+
+  /* Make the close button more obvious, since we hide the side graphic*/
+  .pf-c-about-modal-box__close .pf-c-button.pf-m-plain {
+    --pf-c-about-modal-box__close--c-button--BackgroundColor: var(--pf-global--BackgroundColor--dark-200);
+    position: absolute;
+  }
+  .pf-c-about-modal-box__close .pf-c-button.pf-m-plain:hover {
+    --pf-c-about-modal-box__close--c-button--BackgroundColor: var(--pf-global--BackgroundColor--dark-400);
+  }
+
+  .pf-c-about-modal-box {
+    .subtitle {
+      font-size: var(--pf-c-title--m-2xl--FontSize);
+    }
+
+    .pf-c-about-modal-box__body {
+      height: 100%;
+
+      > .pf-l-flex {
+        height: 100%;
+      }
+
+      #about-modal-content {
+        font-size: large;
+      }
+    }
+  } 

ui/webui/src/components/AnacondaHeader.jsx

@@ -26,6 +26,7 @@ import {
     TextContent, Text, TextVariants
 } from "@patternfly/react-core";
 import { InfoCircleIcon } from "@patternfly/react-icons";
+import { HeaderKebab } from "./HeaderKebab";
 
 const _ = cockpit.gettext;
 
@@ -66,6 +67,7 @@ export const AnacondaHeader = ({ beta, title }) => {
                     <Text component="h1">{title}</Text>
                 </TextContent>
                 {betanag}
+                <HeaderKebab />
             </Flex>
         </PageSection>
     );

ui/webui/src/components/HeaderKebab.jsx

@@ -0,0 +1,72 @@
+/*
+ * Copyright (C) 2023 Red Hat, Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; either version 2.1 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with This program; If not, see <http://www.gnu.org/licenses/>.
+ */
+import cockpit from "cockpit";
+
+import React, { useState } from "react";
+import { Dropdown, DropdownItem, DropdownPosition, KebabToggle } from "@patternfly/react-core";
+import { AnacondaAboutModal } from "./AnacondaAboutModal";
+
+const _ = cockpit.gettext;
+
+export const HeaderKebab = () => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [isAboutModalOpen, setIsAboutModalOpen] = useState(false);
+
+    const onToggle = isOpen => {
+        setIsOpen(isOpen);
+    };
+    const onFocus = () => {
+        const element = document.getElementById("toggle-kebab");
+        element.focus();
+    };
+    const onSelect = () => {
+        setIsOpen(false);
+        onFocus();
+    };
+
+    const handleAboutModal = () => {
+        setIsAboutModalOpen(true);
+    };
+
+    const dropdownItems = [
+        <DropdownItem id="about-modal-dropdown-item" key="separated link" onClick={handleAboutModal}>
+            {_("About")}
+        </DropdownItem>,
+    ];
+    return (
+        <>
+            <Dropdown
+              position={DropdownPosition.right}
+              onSelect={onSelect}
+              toggle={
+                  <KebabToggle
+                    id="toggle-kebab"
+                    onToggle={onToggle}
+                  />
+              }
+              isOpen={isOpen}
+              isPlain
+              dropdownItems={dropdownItems}
+            />
+            {isAboutModalOpen &&
+            <AnacondaAboutModal
+              isModalOpen={isAboutModalOpen}
+              setIsAboutModalOpen={setIsAboutModalOpen}
+            />}
+        </>
+    );
+};

ui/webui/src/components/app.jsx

@@ -172,7 +172,7 @@ export const Application = () => {
 
     return (
         <WithDialogs>
-            <LanguageContext.Provider value={{ language, setLanguage }}>
+            <LanguageContext.Provider value={{ language, setLanguage, prettyName }}>
                 <HelpDrawer
                   isExpanded={isHelpExpanded}
                   setIsExpanded={setIsHelpExpanded}

ui/webui/src/helpers/product.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright (C) 2023 Red Hat, Inc.
+ *
+ * This program is free software; you can redistribute it and/or modify it
+ * under the terms of the GNU Lesser General Public License as published by
+ * the Free Software Foundation; either version 2.1 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but
+ * WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
+ * Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with This program; If not, see <http://www.gnu.org/licenses/>.
+ */
+import cockpit from "cockpit";
+
+export const getAnacondaVersion = () => {
+    return cockpit
+            .spawn(["anaconda", "--version"])
+            .then((content) => content.split(" ").slice(-1)[0].replace("\n", ""));
+};

ui/webui/test/check-basic

@@ -60,6 +60,42 @@ class TestBasic(anacondalib.VirtInstallMachineCase):
         # Back button should be disabled on the first screen
         b.wait_visible(f"#installation-back-btn:not([aria-disabled={True}]")
 
+    def testAboutModal(self):
+        b = self.browser
+        m = self.machine
+        i = Installer(b, m)
+
+        i.open()
+
+        # To obtain pretty name and validate
+        pretty_name = m.execute("cat /etc/os-release | grep PRETTY_NAME | cut -d '\"' -f 2 | tr -d '\n'")
+
+        # Click on the kebab
+        b.click("#toggle-kebab")
+
+        #Click on the "About" item from the dropdown
+        b.click("#about-modal-dropdown-item")
+
+        # Expect pretty_name to be shown in modal title
+        b.wait_in_text("#about-modal-title", pretty_name)
+
+        # Expect "Powered by Anaconda" to be shown in modal subtitle
+        b.wait_in_text("#about-modal-subtitle", "Powered by Anaconda")
+
+        # Expect About modal body to be shown
+        b.wait_visible("#about-modal-content")
+        b.wait_in_text("#about-modal-content dt", "Anaconda")
+
+        # Expect button link for Anaconda project page to be shown and click on it
+        b.wait_in_text("#anaconda-page-button", "Anaconda project page")
+        b.click("#anaconda-page-button")
+
+        # Expect trademark to be shown in modal content
+        b.wait_in_text(".pf-c-about-modal-box__strapline", "Anaconda © 2023 Red Hat, Inc.")
+
+        #Close about modal
+        b.click(".pf-c-button[aria-label='Close Dialog']")
+
 class TestQuit(anacondalib.VirtInstallMachineCase):
 
     def testQuitInstallation(self):