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; +} + +export const HelpIconPopover: React.FC = ({ + children, + header, + popoverProps, +}) => ( + + + +); 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={ + + + + + Namespaces, also known as projects, separate resources within clusters. + + + + + + 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. + + + + + } > ({