[MTV-1786] Add tooltip to Create plan wizard's Target namespace field

Signed-off-by: Jeff Puzzo <[email protected]>
kubev2v · Dec 13, 2024 · f5e85a0 · f5e85a0
1 parent 4000d26
commit f5e85a0
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 2 deletions.
diff --git a/packages/common/src/components/HelpIconPopover/HelpIconPopover.tsx 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
@@ -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
@@ -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/...orklift-console-plugin/src/modules/Providers/views/migrate/components/PlansCreateForm.tsx b/...orklift-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) => ({