diff --git a/web/src/assets/styles/global.scss b/web/src/assets/styles/global.scss index cbd6d1558b..35b0e7c73c 100644 --- a/web/src/assets/styles/global.scss +++ b/web/src/assets/styles/global.scss @@ -25,7 +25,7 @@ a { color: currentcolor; } -a:not(.pf-v5-c-button,.pf-v5-c-nav__link), +a:not(.pf-v5-c-button,.pf-v5-c-nav__link,.pf-v5-c-menu__item), // TODO: make it better, using PatternFly custom properties for overriding it button.pf-m-plain, button.pf-m-link { diff --git a/web/src/components/storage/DeviceSelection.jsx b/web/src/components/storage/DeviceSelection.jsx index f6306297fe..12e5b28e24 100644 --- a/web/src/components/storage/DeviceSelection.jsx +++ b/web/src/components/storage/DeviceSelection.jsx @@ -28,6 +28,7 @@ import { useNavigate } from "react-router-dom"; import { Card, CardBody, + Flex, Form, FormGroup, PageSection, Radio, @@ -40,6 +41,7 @@ import { deviceChildren } from "~/components/storage/utils"; import { Loading } from "~/components/layout"; import { Page } from "~/components/core"; import { DeviceSelectorTable } from "~/components/storage"; +import DevicesTechMenu from "./DevicesTechMenu"; import { compact, useCancellablePromise } from "~/utils"; import { useInstallerClient } from "~/context/installer"; @@ -174,7 +176,7 @@ devices.").split(/[[\]]/); - + + + + {_("Prepare more devices by configuring advanced")} + + diff --git a/web/src/components/storage/ProposalPageMenu.jsx b/web/src/components/storage/DevicesTechMenu.jsx similarity index 76% rename from web/src/components/storage/ProposalPageMenu.jsx rename to web/src/components/storage/DevicesTechMenu.jsx index 8adbd86943..ffdb42aea7 100644 --- a/web/src/components/storage/ProposalPageMenu.jsx +++ b/web/src/components/storage/DevicesTechMenu.jsx @@ -23,7 +23,10 @@ import React, { useEffect, useState } from "react"; import { useHref } from "react-router-dom"; -import { Page } from "~/components/core"; +import { + MenuToggle, + Select, SelectList, SelectOption +} from "@patternfly/react-core"; import { _ } from "~/i18n"; import { useInstallerClient } from "~/context/installer"; @@ -35,13 +38,13 @@ const DASDLink = () => { const href = useHref("/storage/dasd"); return ( - DASD - + ); }; @@ -53,13 +56,13 @@ const ZFCPLink = () => { const href = useHref("/storage/zfcp"); return ( - {_("zFCP")} - + ); }; @@ -71,13 +74,13 @@ const ISCSILink = () => { const href = useHref("/storage/iscsi"); return ( - {_("iSCSI")} - + ); }; @@ -90,7 +93,8 @@ const ISCSILink = () => { * * @param {ProposalMenuProps} props */ -export default function ProposalPageMenu({ label }) { +export default function DevicesTechMenu({ label }) { + const [isOpen, setIsOpen] = useState(false); const [showDasdLink, setShowDasdLink] = useState(false); const [showZFCPLink, setShowZFCPLink] = useState(false); const { storage: client } = useInstallerClient(); @@ -100,13 +104,30 @@ export default function ProposalPageMenu({ label }) { client.zfcp.isSupported().then(setShowZFCPLink); }, [client.dasd, client.zfcp]); + const toggle = toggleRef => ( + setIsOpen(!isOpen)} isExpanded={isOpen}> + {label} + + ); + + const onSelect = (_event, value) => { + setIsOpen(false); + }; + return ( - - + ); } diff --git a/web/src/components/storage/index.js b/web/src/components/storage/index.js index 3561fcf16e..220de471c6 100644 --- a/web/src/components/storage/index.js +++ b/web/src/components/storage/index.js @@ -20,7 +20,6 @@ */ export { default as ProposalPage } from "./ProposalPage"; -export { default as ProposalPageMenu } from "./ProposalPageMenu"; export { default as ProposalSettingsSection } from "./ProposalSettingsSection"; export { default as ProposalTransactionalInfo } from "./ProposalTransactionalInfo"; export { default as ProposalActionsDialog } from "./ProposalActionsDialog";