Merge pull request #500 from yast/open-sidebar-button

[web] Offer tip for iSCSI and DASD configuration in the UI

web/cspell.json

@@ -22,6 +22,7 @@
         "autoconnect",
         "btrfs",
         "ccmp",
+        "dasd",
         "dbus",
         "dinstaller",
         "filecontent",

web/package/cockpit-d-installer.changes

@@ -1,3 +1,9 @@
+-------------------------------------------------------------------
+Fri Mar 24 12:50:06 UTC 2023 - Ancor Gonzalez Sosa <[email protected]>
+
+- Added a tip about iSCSI and DASD configuration to the storage
+  page (gh#yast/d-installer#500).
+
 -------------------------------------------------------------------
 Fri Mar 24 10:39:45 UTC 2023 - Imobach Gonzalez Sosa <[email protected]>
 

web/src/components/core/Sidebar.jsx

@@ -23,11 +23,15 @@ import React, { useEffect, useRef, useState } from "react";
 import { Button, Text } from "@patternfly/react-core";
 import { Icon, PageActions } from "~/components/layout";
 
+// FIXME: look for a better way to allow opening the Sidebar from outside
+let openButtonRef = {};
+
 /**
  * D-Installer sidebar navigation
  */
-export default function Sidebar({ children }) {
+const Sidebar = ({ children }) => {
   const [isOpen, setIsOpen] = useState(false);
+  openButtonRef = useRef(null);
   const closeButtonRef = useRef(null);
 
   const open = () => setIsOpen(true);
@@ -83,6 +87,7 @@ export default function Sidebar({ children }) {
     <>
       <PageActions>
         <button
+          ref={openButtonRef}
           onClick={open}
           className="plain-control"
           aria-label="Show navigation and other options"
@@ -125,4 +130,10 @@ export default function Sidebar({ children }) {
       </nav>
     </>
   );
-}
+};
+
+Sidebar.OpenButton = ({ children }) => (
+  <Button variant="link" isInline onClick={() => openButtonRef.current.click()}>{children}</Button>
+);
+
+export default Sidebar;

web/src/components/storage/ProposalTargetSection.jsx

@@ -20,27 +20,30 @@
  */
 
 import React, { useState } from "react";
-import { useNavigate } from "react-router-dom";
-import { Button } from "@patternfly/react-core";
 
-import { If, Popup, Section } from "~/components/core";
+import { If, Popup, Section, Sidebar } from "~/components/core";
 import { ProposalSummary, ProposalTargetForm } from "~/components/storage";
 
 export default function ProposalTargetSection({ proposal, calculateProposal }) {
   const [isOpen, setIsOpen] = useState(false);
-  const navigate = useNavigate();
 
   const onTargetChange = ({ candidateDevices }) => {
     setIsOpen(false);
     calculateProposal({ candidateDevices });
   };
 
   const openDeviceSelector = () => setIsOpen(true);
-  const navigateToISCSIPage = () => navigate("/storage/iscsi");
 
   const { availableDevices = [] } = proposal;
   const renderSelector = availableDevices.length > 0;
 
+  // Temporary mini-component with temporary text for March prototype
+  const SideBarTip = () => {
+    return (
+      <div>If needed, use the <Sidebar.OpenButton>advanced options menu</Sidebar.OpenButton> to configure access to more disks.</div>
+    );
+  };
+
   const Content = () => {
     return (
       <>
@@ -52,6 +55,7 @@ export default function ProposalTargetSection({ proposal, calculateProposal }) {
             <Popup.Cancel onClick={() => setIsOpen(false)} autoFocus />
           </Popup.Actions>
         </Popup>
+        <SideBarTip />
       </>
     );
   };
@@ -60,8 +64,7 @@ export default function ProposalTargetSection({ proposal, calculateProposal }) {
     return (
       <div className="stack">
         <div className="bold">No devices found</div>
-        <div>Please, configure iSCSI targets in order to find available devices for installation.</div>
-        <Button variant="primary" onClick={navigateToISCSIPage}>Configure iSCSI</Button>
+        <SideBarTip />
       </div>
     );
   };