ECOPROJECT-4164 | fix: prevent modal unmounting when creating environment from empty state in Environments table (#468)

The issue was that the DiscoverySourceSetupModal modal was rendered
inside the EmptyState component, which is unmounted when the first
source is created. This caused the modal to unmount before step 2
(downloading the OVA) could be displayed.


https://github.com/user-attachments/assets/e873395c-0abc-4842-afd4-64c865a53b6c



<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **New Features**
  * Added visual feedback during OVA downloads
* Source list automatically refreshes after environment setup completes
  * Actions disabled during OVA downloads to prevent user conflicts

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Signed-off-by: Montse Ortega <mortegag@redhat.com>

Author: ammont82

src/ui/environment/views/EmptyState.tsx

@@ -8,36 +8,27 @@ import {
   StackItem,
 } from "@patternfly/react-core";
 import { ExclamationCircleIcon, SearchIcon } from "@patternfly/react-icons";
-import React, { useCallback, useState } from "react";
+import React, { useCallback } from "react";
 
 import { useEnvironmentPage } from "../view-models/EnvironmentPageContext";
-import { DiscoverySourceSetupModal } from "./DiscoverySourceSetupModal";
 
-export const EmptyState: React.FC = () => {
-  const vm = useEnvironmentPage();
-
-  const [
-    shouldShowDiscoverySourceSetupModal,
-    setShouldShowDiscoverySetupModal,
-  ] = useState(false);
+export interface EmptyStateProps {
+  onAddEnvironment: () => void;
+  isOvaDownloading: boolean;
+}
 
-  const toggleDiscoverySourceSetupModal = useCallback((): void => {
-    setShouldShowDiscoverySetupModal((lastState) => {
-      if (lastState === true) {
-        void vm.listSources();
-      }
-      return !lastState;
-    });
-  }, [vm]);
+export const EmptyState: React.FC<EmptyStateProps> = ({
+  onAddEnvironment,
+  isOvaDownloading,
+}) => {
+  const vm = useEnvironmentPage();
 
   const handleTryAgain = useCallback(() => {
     if (!vm.isLoadingSources) {
       void vm.listSources();
     }
   }, [vm]);
 
-  const [isOvaDownloading, setIsOvaDownloading] = useState(false);
-
   let emptyStateNode: React.ReactNode = (
     <PFEmptyState
       headingLevel="h4"
@@ -52,7 +43,7 @@ export const EmptyState: React.FC = () => {
 
       <EmptyStateFooter>
         <EmptyStateActions>
-          <Button variant="secondary" onClick={toggleDiscoverySourceSetupModal}>
+          <Button variant="secondary" onClick={onAddEnvironment}>
             Add environment
           </Button>
         </EmptyStateActions>
@@ -90,22 +81,7 @@ export const EmptyState: React.FC = () => {
     );
   }
 
-  return (
-    <>
-      {emptyStateNode}
-      {shouldShowDiscoverySourceSetupModal && (
-        <DiscoverySourceSetupModal
-          isOpen={shouldShowDiscoverySourceSetupModal}
-          onClose={toggleDiscoverySourceSetupModal}
-          isDisabled={vm.isDownloadingSource}
-          onStartDownload={() => setIsOvaDownloading(true)}
-          onAfterDownload={async () => {
-            await vm.listSources();
-          }}
-        />
-      )}
-    </>
-  );
+  return emptyStateNode;
 };
 
 EmptyState.displayName = "SourcesTableEmptyState";

src/ui/environment/views/SourcesTable.tsx

@@ -11,7 +11,13 @@ import {
 } from "@patternfly/react-core";
 import { ArrowLeftIcon, EllipsisVIcon } from "@patternfly/react-icons";
 import { Table, Tbody, Td, Th, Thead, Tr } from "@patternfly/react-table";
-import React, { useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useNavigate } from "react-router-dom";
 
 import type { SourceModel } from "../../../models/SourceModel";
@@ -20,6 +26,7 @@ import { ConfirmationModal } from "../../core/components/ConfirmationModal";
 import { useEnvironmentPage } from "../view-models/EnvironmentPageContext";
 import { AgentStatusView } from "./AgentStatusView";
 import { Columns } from "./Columns";
+import { DiscoverySourceSetupModal } from "./DiscoverySourceSetupModal";
 import { EmptyState } from "./EmptyState";
 
 const VALUE_NOT_AVAILABLE = "-";
@@ -95,6 +102,20 @@ export const SourcesTable: React.FC<SourceTableProps> = ({
     {},
   );
   const [deleteTarget, setDeleteTarget] = useState<SourceModel | null>(null);
+  const [
+    shouldShowDiscoverySourceSetupModal,
+    setShouldShowDiscoverySetupModal,
+  ] = useState(false);
+  const [isOvaDownloading, setIsOvaDownloading] = useState(false);
+
+  const toggleDiscoverySourceSetupModal = useCallback((): void => {
+    setShouldShowDiscoverySetupModal((lastState) => {
+      if (lastState === true) {
+        void vm.listSources();
+      }
+      return !lastState;
+    });
+  }, [vm]);
 
   // Memorize ordered sources without mutating context sources
   const memoizedSources = useMemo(() => {
@@ -512,7 +533,10 @@ export const SourcesTable: React.FC<SourceTableProps> = ({
               ) : (
                 <Tr>
                   <Td colSpan={12}>
-                    <EmptyState />
+                    <EmptyState
+                      onAddEnvironment={toggleDiscoverySourceSetupModal}
+                      isOvaDownloading={isOvaDownloading}
+                    />
                   </Td>
                 </Tr>
               )}
@@ -540,6 +564,18 @@ export const SourcesTable: React.FC<SourceTableProps> = ({
             To use it again, create a new discovery image and redeploy it.
           </ConfirmationModal>
         )}
+
+        {shouldShowDiscoverySourceSetupModal && (
+          <DiscoverySourceSetupModal
+            isOpen={shouldShowDiscoverySourceSetupModal}
+            onClose={toggleDiscoverySourceSetupModal}
+            isDisabled={vm.isDownloadingSource}
+            onStartDownload={() => setIsOvaDownloading(true)}
+            onAfterDownload={async () => {
+              await vm.listSources();
+            }}
+          />
+        )}
       </div>
     );
   }