From f5e85a024f892ab84ef3e6e5aaee3165268c3893 Mon Sep 17 00:00:00 2001
From: Jeff Puzzo <jpuzzo@redhat.com>
Date: Thu, 12 Dec 2024 20:12:15 -0500
Subject: [PATCH] [MTV-1786] Add tooltip to Create plan wizard's Target
 namespace field

Signed-off-by: Jeff Puzzo <jpuzzo@redhat.com>
---
 .../HelpIconPopover/HelpIconPopover.tsx       | 22 ++++++++++++++++
 .../src/components/HelpIconPopover/index.ts   |  3 +++
 packages/common/src/components/index.ts       |  1 +
 .../migrate/components/PlansCreateForm.tsx    | 26 +++++++++++++++++--
 4 files changed, 50 insertions(+), 2 deletions(-)
 create mode 100644 packages/common/src/components/HelpIconPopover/HelpIconPopover.tsx
 create mode 100644 packages/common/src/components/HelpIconPopover/index.ts

diff --git a/packages/common/src/components/HelpIconPopover/HelpIconPopover.tsx b/packages/common/src/components/HelpIconPopover/HelpIconPopover.tsx
new file mode 100644
index 000000000..d1e571b6f
--- /dev/null
+++ b/packages/common/src/components/HelpIconPopover/HelpIconPopover.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import { Popover, PopoverProps } from '@patternfly/react-core';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+
+interface HelpIconPopoverProps {
+  children: React.ReactNode;
+  header?: string;
+  popoverProps?: Omit<PopoverProps, 'bodyContent' | 'titleContent'>;
+}
+
+export const HelpIconPopover: React.FC<HelpIconPopoverProps> = ({
+  children,
+  header,
+  popoverProps,
+}) => (
+  <Popover position="right" bodyContent={children} headerContent={header} {...popoverProps}>
+    <button type="button" className="pf-c-form__group-label-help">
+      <HelpIcon />
+    </button>
+  </Popover>
+);
diff --git a/packages/common/src/components/HelpIconPopover/index.ts b/packages/common/src/components/HelpIconPopover/index.ts
new file mode 100644
index 000000000..1ffc1fefa
--- /dev/null
+++ b/packages/common/src/components/HelpIconPopover/index.ts
@@ -0,0 +1,3 @@
+// @index(['./*', /__/g], f => `export * from '${f.path}';`)
+export * from './HelpIconPopover';
+// @endindex
diff --git a/packages/common/src/components/index.ts b/packages/common/src/components/index.ts
index 3657960e2..e561934ae 100644
--- a/packages/common/src/components/index.ts
+++ b/packages/common/src/components/index.ts
@@ -4,6 +4,7 @@ export * from './ExternalLink';
 export * from './Filter';
 export * from './FilterGroup';
 export * from './FormGroupWithHelpText';
+export * from './HelpIconPopover';
 export * from './Icons';
 export * from './LoadingDots';
 export * from './Page';
diff --git a/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/PlansCreateForm.tsx b/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/PlansCreateForm.tsx
index 12c4fe6eb..bb61cdf2a 100644
--- a/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/PlansCreateForm.tsx
+++ b/packages/forklift-console-plugin/src/modules/Providers/views/migrate/components/PlansCreateForm.tsx
@@ -1,9 +1,9 @@
 import React, { ReactNode, useState } from 'react';
 import { FilterableSelect } from 'src/components';
 import SectionHeading from 'src/components/headers/SectionHeading';
-import { useForkliftTranslation } from 'src/utils/i18n';
+import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
-import { FormGroupWithHelpText } from '@kubev2v/common';
+import { FormGroupWithHelpText, HelpIconPopover } from '@kubev2v/common';
 import {
   NetworkMapModelGroupVersionKind,
   ProviderModelGroupVersionKind,
@@ -19,6 +19,8 @@ import {
   Form,
   FormSelect,
   FormSelectOption,
+  Stack,
+  StackItem,
   TextInput,
 } from '@patternfly/react-core';
 
@@ -275,6 +277,26 @@ export const PlansCreateForm = ({
             id="targetNamespace"
             validated={validation.targetNamespace}
             placeholder={t('Select a namespace')}
+            labelIcon={
+              <HelpIconPopover header={t('Target namespace')}>
+                <Stack hasGutter>
+                  <StackItem>
+                    <ForkliftTrans>
+                      Namespaces, also known as projects, separate resources within clusters.
+                    </ForkliftTrans>
+                  </StackItem>
+
+                  <StackItem>
+                    <ForkliftTrans>
+                      The target namespace is the namespace within your selected target provider
+                      that your virtual machines will be migrated to. This is different from the
+                      namespace that your migration plan will be created in and where your provider
+                      was created.
+                    </ForkliftTrans>
+                  </StackItem>
+                </Stack>
+              </HelpIconPopover>
+            }
           >
             <FilterableSelect
               selectOptions={availableTargetNamespaces.map((ns) => ({