Add zFCP issues to ProposalPage

- And allow configuring zFCP in the empty state.

Author: joseivanlopez

web/src/components/storage/ProposalPage.test.tsx

@@ -65,6 +65,7 @@ const mockUseConfigModel = jest.fn();
 const mockUseProposal = jest.fn();
 const mockUseIssues = jest.fn();
 const mockUseDASDSystem = jest.fn();
+const mockUseZFCPSystem = jest.fn();
 
 jest.mock("~/hooks/model/system/storage", () => ({
   ...jest.requireActual("~/hooks/model/system/storage"),
@@ -96,6 +97,11 @@ jest.mock("~/hooks/model/system/dasd", () => ({
   useSystem: () => mockUseDASDSystem(),
 }));
 
+jest.mock("~/hooks/model/system/zfcp", () => ({
+  ...jest.requireActual("~/hooks/model/system/zfcp"),
+  useSystem: () => mockUseZFCPSystem(),
+}));
+
 jest.mock("./ProposalFailedInfo", () => () => <div>proposal failed info</div>);
 jest.mock("./UnsupportedModelInfo", () => () => <div>unsupported model info</div>);
 jest.mock("./FixableConfigInfo", () => () => <div>fixable config info</div>);
@@ -133,9 +139,9 @@ describe("if there are no devices", () => {
   });
 
   describe("if zFCP is not supported", () => {
-    // beforeEach(() => {
-    //   mockUseZFCPSupported.mockReturnValue(false);
-    // });
+    beforeEach(() => {
+      mockUseZFCPSystem.mockReturnValue(null);
+    });
 
     it("does not render an option for activating zFCP", () => {
       installerRender(<ProposalPage />);
@@ -145,7 +151,7 @@ describe("if there are no devices", () => {
 
   describe("if DASD is not supported", () => {
     beforeEach(() => {
-      mockUseDASDSystem.mockReturnValue(undefined);
+      mockUseDASDSystem.mockReturnValue(null);
     });
 
     it("does not render an option for activating DASD", () => {
@@ -154,10 +160,10 @@ describe("if there are no devices", () => {
     });
   });
 
-  describe.skip("if zFCP is supported", () => {
-    // beforeEach(() => {
-    //   mockUseZFCPSupported.mockReturnValue(true);
-    // });
+  describe("if zFCP is supported", () => {
+    beforeEach(() => {
+      mockUseZFCPSystem.mockReturnValue({});
+    });
 
     it("renders an option for activating zFCP", () => {
       installerRender(<ProposalPage />);

web/src/components/storage/ProposalPage.tsx

@@ -61,10 +61,10 @@ import { _, n_ } from "~/i18n";
 import { useLocation } from "react-router";
 import { useStorageUiState } from "~/context/storage-ui-state";
 import { useSystem as useDASDSystem } from "~/hooks/model/system/dasd";
-
-import type { Issue } from "~/model/issue";
-
+import { useSystem as useZFCPSystem } from "~/hooks/model/system/zfcp";
 import spacingStyles from "@patternfly/react-styles/css/utilities/Spacing/spacing";
+import IssuesAlert from "~/components/core/IssuesAlert";
+import type { Issue } from "~/model/issue";
 
 type InvalidConfigEmptyStateProps = {
   issues: Issue[];
@@ -136,8 +136,8 @@ function UnknownConfigEmptyState(): React.ReactNode {
 }
 
 function UnavailableDevicesEmptyState(): React.ReactNode {
-  const isZFCPSupported = false;
   const dasdSystem = useDASDSystem();
+  const zfcpSystem = useZFCPSystem();
 
   const description = _(
     "There are not disks available for the installation. You may need to configure some device.",
@@ -157,7 +157,7 @@ function UnavailableDevicesEmptyState(): React.ReactNode {
               {_("Connect to iSCSI targets")}
             </Link>
           </SplitItem>
-          {isZFCPSupported && (
+          {zfcpSystem && (
             <SplitItem>
               <Link to={PATHS.zfcp.root} variant="link">
                 {_("Activate zFCP disks")}
@@ -307,6 +307,7 @@ export default function ProposalPage(): React.ReactNode {
   // Hopefully this could be removed in the future. See rationale at UseStorageUiState
   const [resetNeeded, setResetNeeded] = useState(location.state?.resetStorageUiState);
   const { setUiState } = useStorageUiState();
+  const zfcpIssues = useIssues("zfcp");
 
   React.useEffect(() => {
     if (resetNeeded) {
@@ -324,6 +325,7 @@ export default function ProposalPage(): React.ReactNode {
       progress={{ scope: "storage", ensureRefetched: STORAGE_MODEL_KEY }}
     >
       <Page.Content>
+        <IssuesAlert issues={zfcpIssues} />
         <ProposalPageContent />
       </Page.Content>
     </Page>