From ba36ac1357e8e977c98accb912421fc3b40b4ecd Mon Sep 17 00:00:00 2001 From: Adriana Cruz Date: Wed, 21 Jun 2023 11:36:47 -0600 Subject: [PATCH] webui: provide an About screen --- .../src/components/AnacondaAboutModal.jsx | 79 +++++++++++++++++++ ui/webui/src/components/AnacondaHeader.jsx | 2 + ui/webui/src/components/HeaderKebab.jsx | 73 +++++++++++++++++ ui/webui/src/components/app.scss | 12 +++ ui/webui/src/helpers/product.js | 4 + 5 files changed, 170 insertions(+) create mode 100644 ui/webui/src/components/AnacondaAboutModal.jsx create mode 100644 ui/webui/src/components/HeaderKebab.jsx diff --git a/ui/webui/src/components/AnacondaAboutModal.jsx b/ui/webui/src/components/AnacondaAboutModal.jsx new file mode 100644 index 000000000000..edd93d16fa63 --- /dev/null +++ b/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 . + */ +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 ( + <> + + +

Powered by Anaconda

+ + + + + Anaconda + {anacondaVersion} + Blivet + XXX + Pykickstart + XXX + Python + XXX + + + + {" "} + + + + + ); +}; diff --git a/ui/webui/src/components/AnacondaHeader.jsx b/ui/webui/src/components/AnacondaHeader.jsx index 5d900bc8f233..8361d5bfb9a9 100644 --- a/ui/webui/src/components/AnacondaHeader.jsx +++ b/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 }) => { {title} {betanag} + ); diff --git a/ui/webui/src/components/HeaderKebab.jsx b/ui/webui/src/components/HeaderKebab.jsx new file mode 100644 index 000000000000..81c3ebfa9b91 --- /dev/null +++ b/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 . + */ +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 = [ + + Documentation + , + , + + About + , + ]; + return ( + <> + + } + isOpen={isOpen} + isPlain + dropdownItems={dropdownItems} + /> + {isAboutModalOpen && + } + + + ); +}; diff --git a/ui/webui/src/components/app.scss b/ui/webui/src/components/app.scss index 3f9c4bea7b71..f3c989496202 100644 --- a/ui/webui/src/components/app.scss +++ b/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; +} diff --git a/ui/webui/src/helpers/product.js b/ui/webui/src/helpers/product.js index 74e82f5cfa3c..2b0de7c36979 100644 --- a/ui/webui/src/helpers/product.js +++ b/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"]); +};