webui: about screen

ui/webui/src/components/AnacondaAboutModal.jsx

@@ -0,0 +1,90 @@
+/*
+ * 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,
+} from "@patternfly/react-core";
+import { ExternalLinkAltIcon } from "@patternfly/react-icons";
+
+import { read_os_release as readOsRelease } from "os-release.js";
+import { getAnacondaVersion } from "../helpers/product";
+
+const _ = cockpit.gettext;
+
+const AboutModalVersions = ({ anacondaVersion }) => {
+    const arr = [["Anaconda", anacondaVersion], ["Blivet", "XXX"], ["Pykickstart", "XXX"], ["Python", "XXX"]];
+
+    return (
+        <>
+            <TextContent id="subtitle">
+                <h2>{_("Powered by Anaconda")}</h2>
+            </TextContent>
+            <TextContent />
+            <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>
+        </>
+    );
+};
+
+export const AnacondaAboutModal = ({ isModalOpen, setIsAboutModalOpen }) => {
+    const toggleModal = () => {
+        setIsAboutModalOpen(!isModalOpen);
+    };
+
+    const [anacondaVersion, setAnacondaVersion] = useState("");
+    const [prettyName, setPrettyName] = useState("");
+    useEffect(() => {
+        getAnacondaVersion().then(content => setAnacondaVersion(content));
+        readOsRelease().then(osRelease => setPrettyName(osRelease.PRETTY_NAME));
+    }, []);
+
+    return (
+        <>
+            <AboutModal
+              isOpen={isModalOpen}
+              onClose={toggleModal}
+              trademark="Anaconda © 2023 Red Hat, Inc."
+              productName={prettyName}
+            >
+                <AboutModalVersions anacondaVersion={anacondaVersion} />
+                <Flex id="about-modal-flex">
+                    <Button id="anaconda-page-button" variant="link" icon={<ExternalLinkAltIcon />}>
+                        Anaconda project page
+                    </Button>
+                    <Button variant="link" icon={<ExternalLinkAltIcon />}>
+                        Report a bug
+                    </Button>
+                </Flex>
+            </AboutModal>
+        </>
+    );
+};

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,69 @@
+/*
+ * 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 React, { useState } from "react";
+import { Dropdown, DropdownItem, DropdownPosition, KebabToggle } from "@patternfly/react-core";
+import { AnacondaAboutModal } from "./AnacondaAboutModal";
+
+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 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/aboutmodal.scss

@@ -0,0 +1,53 @@
+@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);
+  }
+
+  #about-modal-flex{
+    position: static;
+    margin-top: 10rem;
+  }
+
+  .pf-c-about-modal-box__content {
+    margin-top: 0;
+  }
+
+  #anaconda-page-button {
+    padding-left: 0;
+  }
+
+  #subtitle { 
+    margin-bottom: 48px;
+  }
+
+  #about-modal-content {
+    font-size: large;
+  }
+
+

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", ""))
+            .then(content => { return content });
+};

ui/webui/src/index.js

@@ -32,6 +32,7 @@ import cockpit from "cockpit";
  */
 import "../pkg/lib/patternfly/patternfly-4-overrides.scss";
 import "./components/app.scss";
+import "./components/aboutmodal.scss";
 
 document.addEventListener("DOMContentLoaded", function () {
     const root = createRoot(document.getElementById("app"));