Inform the user on the Review step if a new target namespace is being…

… created (#511)

* Pause polling while namespace select is open, to prevent clobbering search filter

* Inform the user on the Review step if a new target namespace is being created

Co-authored-by: Fabien Dupont <fdupont@redhat.com>

src/app/Plans/components/Wizard/GeneralForm.tsx

@@ -25,6 +25,7 @@ import { ProviderType } from '@app/common/constants';
 import SelectOpenShiftNetworkModal from '@app/common/components/SelectOpenShiftNetworkModal';
 import { HelpIcon } from '@patternfly/react-icons';
 import { useOpenShiftNetworksQuery } from '@app/queries/networks';
+import { usePausedPollingEffect } from '@app/common/context';
 
 interface IGeneralFormProps {
   form: PlanWizardFormState['general'];
@@ -40,6 +41,7 @@ const GeneralForm: React.FunctionComponent<IGeneralFormProps> = ({
   const namespacesQuery = useNamespacesQuery(form.values.targetProvider);
 
   const [isNamespaceSelectOpen, setIsNamespaceSelectOpen] = React.useState(false);
+  usePausedPollingEffect(isNamespaceSelectOpen);
 
   const getFilteredOptions = (searchText?: string) => {
     const namespaceOptions = namespacesQuery.data?.map((namespace) => namespace.name) || [];

src/app/Plans/components/Wizard/Review.tsx

@@ -18,6 +18,7 @@ import { IKubeResponse, KubeClientError } from '@app/client/types';
 import { QuerySpinnerMode, ResolvedQueries } from '@app/common/components/ResolvedQuery';
 import { generateMappings } from './helpers';
 import { usePausedPollingEffect } from '@app/common/context';
+import { useNamespacesQuery } from '@app/queries/namespaces';
 
 interface IReviewProps {
   forms: PlanWizardFormState;
@@ -40,6 +41,13 @@ const Review: React.FunctionComponent<IReviewProps> = ({
   usePausedPollingEffect();
 
   const { networkMapping, storageMapping } = generateMappings({ forms });
+
+  const namespacesQuery = useNamespacesQuery(forms.general.values.targetProvider);
+  const namespaceOptions = namespacesQuery.data?.map((namespace) => namespace.name) || [];
+  const isNewNamespace = !namespaceOptions.find(
+    (namespace) => namespace === forms.general.values.targetNamespace
+  );
+
   return (
     <Form>
       <TextContent>
@@ -63,7 +71,16 @@ const Review: React.FunctionComponent<IReviewProps> = ({
         <GridItem md={3}>Target provider</GridItem>
         <GridItem md={9}>{forms.general.values.targetProvider?.name}</GridItem>
         <GridItem md={3}>Target namespace</GridItem>
-        <GridItem md={9}>{forms.general.values.targetNamespace}</GridItem>
+        <GridItem md={9}>
+          {forms.general.values.targetNamespace}
+          {isNewNamespace ? (
+            <TextContent>
+              <Text component="small">
+                This is a new namespace that will be created when the plan is started.
+              </Text>
+            </TextContent>
+          ) : null}
+        </GridItem>
         <GridItem md={3}>Migration transfer network</GridItem>
         <GridItem md={9}>{forms.general.values.migrationNetwork || POD_NETWORK.name}</GridItem>
         <GridItem md={3}>Selected VMs</GridItem>

src/app/common/context/PollingContext.tsx

@@ -65,11 +65,15 @@ export const PollingContextProvider: React.FunctionComponent<IPollingContextProv
 
 export const usePollingContext = (): IPollingContext => React.useContext(PollingContext);
 
-export const usePausedPollingEffect = (): void => {
-  // Pauses polling when a component mounts, resumes when it unmounts
+export const usePausedPollingEffect = (shouldPause = true): void => {
+  // Pauses polling when a component mounts, resumes when it unmounts. If shouldPause changes while mounted, polling pauses/resumes to match.
   const { pausePolling, resumePolling } = usePollingContext();
   React.useEffect(() => {
-    pausePolling();
+    if (shouldPause) {
+      pausePolling();
+    } else {
+      resumePolling();
+    }
     return resumePolling;
-  }, [pausePolling, resumePolling]);
+  }, [pausePolling, resumePolling, shouldPause]);
 };