webui: provide an About screen

ui/webui/src/components/AnacondaAboutModal.jsx

@@ -0,0 +1,79 @@
+/*
+ * Copyright (C) 2022 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, useEffect } from "react";
+import {
+ AboutModal,
+ Button,
+ Flex,
+ TextContent,
+ TextList,
+ TextListItem,
+} from "@patternfly/react-core";
+import { ExternalLinkAltIcon } from "@patternfly/react-icons";
+import { getAnacondaVersion } from "../helpers/product";
+import "../components/app.scss";
+
+export const AnacondaAboutModal = ({ isModalOpen, setIsAboutModalOpen }) => {
+ const toggleModal = () => {
+ setIsAboutModalOpen(!isModalOpen);
+ };
+
+ const [anacondaVersion, setAnacondaVersion] = useState("");
+
+ useEffect(() => {
+ getAnacondaVersion().then(content =>
+ setAnacondaVersion(content.split(" ").slice(-1)[0].replace("\n", ""))
+ );
+ }, []);
+
+ return (
+ <>
+ <AboutModal
+ style={{ marginTop: "0" }}
+ isOpen={isModalOpen}
+ onClose={toggleModal}
+ trademark="© 2023 Red Hat, Inc."
+ productName="Red Hat Enterprise Linux 9 installer"
+ >
+ <TextContent className="pf-u-py-xl" style={{ marginBottom: "48px" }}>
+ <h1>Powered by Anaconda</h1>
+ </TextContent>
+ <TextContent />
+ <TextContent>
+ <TextList component="dl" style={{ fontSize: "large" }}>
+ <TextListItem component="dt">Anaconda</TextListItem>
+ <TextListItem component="dd">{anacondaVersion}</TextListItem>
+ <TextListItem component="dt">Blivet</TextListItem>
+ <TextListItem component="dd">XXX</TextListItem>
+ <TextListItem component="dt">Pykickstart</TextListItem>
+ <TextListItem component="dd">XXX</TextListItem>
+ <TextListItem component="dt">Python</TextListItem>
+ <TextListItem component="dd">XXX</TextListItem>
+ </TextList>
+ </TextContent>
+ <Flex style={{ marginTop: "13rem", position: "static" }}>
+ <Button variant="link" icon={<ExternalLinkAltIcon />} style={{ paddingLeft: "0" }}>
+ 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,73 @@
+/*
+ * Copyright (C) 2022 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, DropdownSeparator, 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="action" component="button">
+ Documentation
+ </DropdownItem>,
+ <DropdownSeparator key="separator" />,
+ <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/app.scss

@@ -37,3 +37,15 @@ html:not(.index-page) body {
 .ct-table .pf-c-table__expandable-row-content {
  padding: 0;
 }
+
+.pf-c-about-modal-box__strapline {
+ padding-top: 0;
+}
+
+.pf-c-about-modal-box__brand {
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='55.519' height='42' data-name='Layer 1'%3E%3Cg style='stroke-width:3.42857'%3E%3Cpath d='M157.77 62.61a14 14 0 0 1 .31 3.42c0 14.88-18.1 17.46-30.61 17.46-48.64 0-84.94-30.23-84.94-39.49a6.43 6.43 0 0 1 .22-1.94l-3.66 9.06a18.45 18.45 0 0 0-1.51 7.33c0 18.11 41 45.48 87.74 45.48 20.69 0 36.43-7.76 36.43-21.77 0-1.08 0-1.94-1.73-10.13z' style='stroke-width:3.42857' transform='matrix(.29167 0 0 .29167 -.146 -.146)'/%3E%3Cpath d='M127.47 83.49c12.51 0 30.61-2.58 30.61-17.46a14 14 0 0 0-.31-3.42l-7.45-32.36c-1.72-7.12-3.23-10.35-15.73-16.6C124.89 8.69 103.76.5 97.51.5 91.69.5 90 8 83.06 8c-6.68 0-11.64-5.6-17.89-5.6-6 0-9.91 4.09-12.93 12.5 0 0-8.41 23.72-9.49 27.16a6.43 6.43 0 0 0-.22 1.94c0 9.22 36.3 39.45 84.94 39.45M160 72.07c1.73 8.19 1.73 9.05 1.73 10.13 0 14-15.74 21.77-36.43 21.77-46.76.03-87.72-27.37-87.72-45.48a18.45 18.45 0 0 1 1.51-7.33C22.27 52 .5 55 .5 74.22c0 31.48 74.59 70.28 133.65 70.28 45.28 0 56.7-20.48 56.7-36.65 0-12.72-11-27.16-30.83-35.78' style='fill:%23e00;stroke-width:15.5388' transform='matrix(.29167 0 0 .29167 -.146 -.146)'/%3E%3C/g%3E%3C/svg%3E");
+ background-repeat: no-repeat;
+ margin-top: 30px;
+ margin-left: 65px;
+ padding-bottom: 0;
+}

ui/webui/src/helpers/product.js

@@ -31,3 +31,7 @@ export const getOsReleaseByKey = (key) => {
  )
  .finally(confFile.close);
 };
+
+export const getAnacondaVersion = () => {
+ return cockpit.spawn(["anaconda", "--version"]);
+};