Merge pull request #1177 from sgratch/pf5-mig-replace-formgroup-with-…

…formGroupWithHelpText 🐾 Update to PF5 - part 1
kubev2v · May 29, 2024 · d4c7a97 · d4c7a97
2 parents b8eb05e + 5c20a89
commit d4c7a97
Show file tree

Hide file tree

Showing 31 changed files with 283 additions and 218 deletions.
diff --git a/packages/common/src/components/FormGroupWithHelpText/FormGroupWithHelpText.tsx b/packages/common/src/components/FormGroupWithHelpText/FormGroupWithHelpText.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+
+import {
+  FormGroup,
+  FormGroupProps,
+  FormHelperText,
+  HelperText,
+  HelperTextItem,
+} from '@patternfly/react-core';
+
+export interface FormGroupWithHelpTextProps extends FormGroupProps {
+  /**
+   * Sets the FormGroup validated. If you set to success, text color of helper text will be modified to indicate valid state.
+   * If set to error, text color of helper text will be modified to indicate error state.
+   * If set to warning, text color of helper text will be modified to indicate warning state.
+   */
+  validated?: 'success' | 'warning' | 'error' | 'default';
+  /**
+   * Helper text regarding the field. It can be a simple text or an object.
+   */
+  helperText?: React.ReactNode;
+  /**
+   * Helper text after the field when the field is invalid. It can be a simple text or an object.
+   */
+  helperTextInvalid?: React.ReactNode;
+}
+
+/**
+ * Convert the formGroup validated mode into the variant styling of the helper text item
+ * If validated mode was not set or if it's the 'default', set the  variant styling to 'indeterminate'
+ * for being consistent with PF4 behavior
+ */
+const validatedToVariant = (validated) =>
+  !validated || validated === 'default' ? 'indeterminate' : validated;
+
+/**
+ *  A FormGroup component that supports helperTexts
+ *
+ *  This component wraps the FormGroup with an option to use the following helper text related properties
+ *  (since not supported anymore as part of the FormGroup component in PatternFly 5):
+ *  helperText, helperTextInvalid, validated
+ *
+ * `See` https://www.patternfly.org/get-started/release-highlights/#helper-text
+ *
+ * [<img src="static/media/src/components-stories/assets/github-logo.svg"><i class="fi fi-brands-github">
+ * <font color="green">View component source on GitHub</font>](https://github.com/kubev2v/forklift-console-plugin/blob/main/packages/common/src/components/FormGroupWithHelpText/FormGroupWithHelpText.tsx)
+ */
+export const FormGroupWithHelpText: React.FC<FormGroupWithHelpTextProps> = ({
+  label,
+  isRequired,
+  fieldId,
+  labelIcon,
+  role,
+  children,
+  validated,
+  helperText,
+  helperTextInvalid,
+}) => {
+  const helperTextMsg = validated === 'error' && helperTextInvalid ? helperTextInvalid : helperText;
+  const variant = validatedToVariant(validated);
+
+  return (
+    <FormGroup
+      label={label}
+      isRequired={isRequired}
+      fieldId={fieldId}
+      labelIcon={labelIcon}
+      role={role}
+    >
+      {children}
+      <FormHelperText isHidden={false}>
+        <HelperText>
+          <HelperTextItem variant={variant}>{helperTextMsg}</HelperTextItem>
+        </HelperText>
+      </FormHelperText>
+    </FormGroup>
+  );
+};
diff --git a/packages/common/src/components/FormGroupWithHelpText/index.ts b/packages/common/src/components/FormGroupWithHelpText/index.ts
@@ -0,0 +1,3 @@
+// @index(['./*', /__/g], f => `export * from '${f.path}';`)
+export * from './FormGroupWithHelpText';
+// @endindex
diff --git a/packages/common/src/components/index.ts b/packages/common/src/components/index.ts
@@ -3,6 +3,7 @@ export * from './ActionServiceDropdown';
 export * from './ExternalLink';
 export * from './Filter';
 export * from './FilterGroup';
+export * from './FormGroupWithHelpText';
 export * from './Icons';
 export * from './LoadingDots';
 export * from './Page';

diff --git a/...ugin/src/modules/NetworkMaps/views/details/components/MapsSection/components/MapsEdit.tsx b/...ugin/src/modules/NetworkMaps/views/details/components/MapsSection/components/MapsEdit.tsx
@@ -1,9 +1,10 @@
 import React, { ReactNode, useState } from 'react';
 import { DetailsItem } from 'src/modules/Providers/utils';
 
+import { FormGroupWithHelpText } from '@kubev2v/common';
 import { ProviderModelGroupVersionKind, V1beta1Provider } from '@kubev2v/types';
 import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
-import { Form, FormGroup, FormSelect, FormSelectOption } from '@patternfly/react-core';
+import { Form, FormSelect, FormSelectOption } from '@patternfly/react-core';
 
 export const MapsEdit: React.FC<MapsEditProps> = ({
   providers,
@@ -33,7 +34,7 @@ export const MapsEdit: React.FC<MapsEditProps> = ({
   if (isEdit) {
     return (
       <Form isWidthLimited>
-        <FormGroup
+        <FormGroupWithHelpText
           label={label}
           isRequired
           fieldId="targetProvider"
@@ -58,7 +59,7 @@ export const MapsEdit: React.FC<MapsEditProps> = ({
               ...providers.map(ProviderOption),
             ]}
           </FormSelect>
-        </FormGroup>
+        </FormGroupWithHelpText>
       </Form>
     );
   } else {

diff --git a/...odules/NetworkMaps/views/details/components/ProvidersSection/components/ProvidersEdit.tsx b/...odules/NetworkMaps/views/details/components/ProvidersSection/components/ProvidersEdit.tsx
@@ -1,9 +1,10 @@
 import React, { ReactNode } from 'react';
 import { DetailsItem } from 'src/modules/Providers/utils';
 
+import { FormGroupWithHelpText } from '@kubev2v/common';
 import { ProviderModelGroupVersionKind, V1beta1Provider } from '@kubev2v/types';
 import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
-import { Form, FormGroup, FormSelect, FormSelectOption } from '@patternfly/react-core';
+import { Form, FormSelect, FormSelectOption } from '@patternfly/react-core';
 
 export const ProvidersEdit: React.FC<ProvidersEditProps> = ({
   providers,
@@ -24,7 +25,7 @@ export const ProvidersEdit: React.FC<ProvidersEditProps> = ({
   if (mode === 'edit') {
     return (
       <Form isWidthLimited>
-        <FormGroup
+        <FormGroupWithHelpText
           label={label}
           isRequired
           fieldId="targetProvider"
@@ -49,7 +50,7 @@ export const ProvidersEdit: React.FC<ProvidersEditProps> = ({
               ...providers.map(ProviderOption),
             ]}
           </FormSelect>
-        </FormGroup>
+        </FormGroupWithHelpText>
       </Form>
     );
   } else {

diff --git a/packages/forklift-console-plugin/src/modules/Plans/modals/DuplicateModal.tsx b/packages/forklift-console-plugin/src/modules/Plans/modals/DuplicateModal.tsx
@@ -5,6 +5,7 @@ import { AlertMessageForModals, useModal } from 'src/modules/Providers/modals';
 import { validateK8sName, Validation } from 'src/modules/Providers/utils';
 import { ForkliftTrans, useForkliftTranslation } from 'src/utils/i18n';
 
+import { FormGroupWithHelpText } from '@kubev2v/common';
 import {
   K8sResourceCommon,
   NetworkMapModel,
@@ -19,7 +20,7 @@ import {
 } from '@kubev2v/types';
 import { k8sCreate, k8sPatch } from '@openshift-console/dynamic-plugin-sdk';
 import { K8sModel, useK8sWatchResource } from '@openshift-console/dynamic-plugin-sdk';
-import { Button, Form, FormGroup, Modal, ModalVariant, TextInput } from '@patternfly/react-core';
+import { Button, Form, Modal, ModalVariant, TextInput } from '@patternfly/react-core';
 
 import { Suspend } from '../views/details/components';
 
@@ -221,7 +222,7 @@ export const DuplicateModal: React.FC<DuplicateModalProps> = ({ title, resource,
             <br />
 
             <Form>
-              <FormGroup
+              <FormGroupWithHelpText
                 label="New migration plan name"
                 fieldId="name"
                 validated={newNameValidation}
@@ -237,7 +238,7 @@ export const DuplicateModal: React.FC<DuplicateModalProps> = ({ title, resource,
                   aria-describedby="name-helper"
                   onChange={onChange}
                 />
-              </FormGroup>
+              </FormGroupWithHelpText>
             </Form>
             <br />
 

diff --git a/...ages/forklift-console-plugin/src/modules/Plans/views/create/components/PlanCreateForm.tsx b/...ages/forklift-console-plugin/src/modules/Plans/views/create/components/PlanCreateForm.tsx
@@ -3,8 +3,9 @@ import { SelectableCard } from 'src/modules/Providers/utils/components/Galerry/S
 import { SelectableGallery } from 'src/modules/Providers/utils/components/Galerry/SelectableGallery';
 import { VmData } from 'src/modules/Providers/views';
 
+import { FormGroupWithHelpText } from '@kubev2v/common';
 import { V1beta1Provider } from '@kubev2v/types';
-import { Flex, FlexItem, Form, FormGroup } from '@patternfly/react-core';
+import { Flex, FlexItem, Form } from '@patternfly/react-core';
 
 import { PlanCreatePageState } from '../states';
 
@@ -39,7 +40,7 @@ export const PlanCreateForm: React.FC<PlanCreateFormProps> = ({
   return (
     <div className="forklift-create-provider-edit-section">
       <Form isWidthLimited className="forklift-section-secret-edit">
-        <FormGroup fieldId="type">
+        <FormGroupWithHelpText fieldId="type">
           <FiltersToolbarProviders
             className="forklift--create-plan--filters-toolbar"
             filterState={filterState}
@@ -66,7 +67,7 @@ export const PlanCreateForm: React.FC<PlanCreateFormProps> = ({
               onChange={onChange}
             />
           )}
-        </FormGroup>
+        </FormGroupWithHelpText>
       </Form>
     </div>
   );

diff --git a/.../src/modules/Plans/views/details/components/ProvidersSection/components/ProvidersEdit.tsx b/.../src/modules/Plans/views/details/components/ProvidersSection/components/ProvidersEdit.tsx
@@ -1,9 +1,10 @@
 import React, { ReactNode } from 'react';
 import { DetailsItem } from 'src/modules/Providers/utils';
 
+import { FormGroupWithHelpText } from '@kubev2v/common';
 import { ProviderModelGroupVersionKind, V1beta1Provider } from '@kubev2v/types';
 import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
-import { Form, FormGroup, FormSelect, FormSelectOption } from '@patternfly/react-core';
+import { Form, FormSelect, FormSelectOption } from '@patternfly/react-core';
 
 export const ProvidersEdit: React.FC<ProvidersEditProps> = ({
   providers,
@@ -24,7 +25,7 @@ export const ProvidersEdit: React.FC<ProvidersEditProps> = ({
   if (mode === 'edit') {
     return (
       <Form isWidthLimited>
-        <FormGroup
+        <FormGroupWithHelpText
           label={label}
           isRequired
           fieldId="targetProvider"
@@ -49,7 +50,7 @@ export const ProvidersEdit: React.FC<ProvidersEditProps> = ({
               ...providers.map(ProviderOption),
             ]}
           </FormSelect>
-        </FormGroup>
+        </FormGroupWithHelpText>
       </Form>
     );
   } else {

diff --git a/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Hooks/PlanHooks.tsx b/packages/forklift-console-plugin/src/modules/Plans/views/details/tabs/Hooks/PlanHooks.tsx
@@ -3,14 +3,14 @@ import { Base64 } from 'js-base64';
 import SectionHeading from 'src/components/headers/SectionHeading';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
+import { FormGroupWithHelpText } from '@kubev2v/common';
 import { CodeEditor } from '@openshift-console/dynamic-plugin-sdk';
 import {
   Button,
   Divider,
   Flex,
   FlexItem,
   Form,
-  FormGroup,
   HelperText,
   HelperTextItem,
   PageSection,
@@ -107,19 +107,19 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name,
       <PageSection variant="light">
         <SectionHeading text={t('Pre migration hook')} />
         <Form>
-          <FormGroup label="Enable hook" isRequired fieldId="pre-hook-set">
+          <FormGroupWithHelpText label="Enable hook" isRequired fieldId="pre-hook-set">
             <Switch
               id="pre-hook-set"
               label="Enable pre migration hook"
               labelOff="Do not enable a pre migration hook"
               isChecked={state.preHookSet}
               onChange={(value) => dispatch({ type: 'PRE_HOOK_SET', payload: value })}
             />
-          </FormGroup>
+          </FormGroupWithHelpText>
 
           {state.preHookSet && (
             <>
-              <FormGroup label="Hook runner image" isRequired fieldId="pre-hook-image">
+              <FormGroupWithHelpText label="Hook runner image" isRequired fieldId="pre-hook-image">
                 <TextInput
                   value={state.preHook?.spec?.image}
                   type="url"
@@ -132,8 +132,8 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name,
                     quay.io/konveyor/hook-runner .
                   </HelperTextItem>
                 </HelperText>
-              </FormGroup>
-              <FormGroup label="Ansible playbook" fieldId="pre-hook-image">
+              </FormGroupWithHelpText>
+              <FormGroupWithHelpText label="Ansible playbook" fieldId="pre-hook-image">
                 <CodeEditor
                   language="yaml"
                   value={Base64.decode(state.preHook?.spec?.playbook || '')}
@@ -147,7 +147,7 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name,
                     hook-runner.
                   </HelperTextItem>
                 </HelperText>
-              </FormGroup>
+              </FormGroupWithHelpText>
             </>
           )}
         </Form>
@@ -156,19 +156,19 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name,
       <PageSection variant="light">
         <SectionHeading text={t('Post migration hook')} />
         <Form>
-          <FormGroup label="Enable hook" isRequired fieldId="post-hook-set">
+          <FormGroupWithHelpText label="Enable hook" isRequired fieldId="post-hook-set">
             <Switch
               id="post-hook-set"
               label="Enable post migration hook"
               labelOff="Do not enable a post migration hook"
               isChecked={state.postHookSet}
               onChange={(value) => dispatch({ type: 'POST_HOOK_SET', payload: value })}
             />
-          </FormGroup>
+          </FormGroupWithHelpText>
 
           {state.postHookSet && (
             <>
-              <FormGroup label="Hook runner image" isRequired fieldId="post-hook-image">
+              <FormGroupWithHelpText label="Hook runner image" isRequired fieldId="post-hook-image">
                 <TextInput
                   value={state.postHook?.spec?.image}
                   type="url"
@@ -181,8 +181,8 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name,
                     quay.io/konveyor/hook-runner .
                   </HelperTextItem>
                 </HelperText>
-              </FormGroup>
-              <FormGroup label="Ansible playbook" fieldId="post-hook-image">
+              </FormGroupWithHelpText>
+              <FormGroupWithHelpText label="Ansible playbook" fieldId="post-hook-image">
                 <CodeEditor
                   language="yaml"
                   value={Base64.decode(state.postHook?.spec?.playbook || '')}
@@ -196,7 +196,7 @@ export const PlanHooks: React.FC<{ name: string; namespace: string }> = ({ name,
                     hook-runner.
                   </HelperTextItem>
                 </HelperText>
-              </FormGroup>
+              </FormGroupWithHelpText>
             </>
           )}
         </Form>

diff --git a/packages/forklift-console-plugin/src/modules/Providers/modals/EditModal/EditModal.tsx b/packages/forklift-console-plugin/src/modules/Providers/modals/EditModal/EditModal.tsx
@@ -2,15 +2,8 @@ import React, { ReactNode, useCallback, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { useForkliftTranslation } from 'src/utils/i18n';
 
-import {
-  Button,
-  Form,
-  FormGroup,
-  Modal,
-  ModalVariant,
-  Popover,
-  TextInput,
-} from '@patternfly/react-core';
+import { FormGroupWithHelpText } from '@kubev2v/common';
+import { Button, Form, Modal, ModalVariant, Popover, TextInput } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
 import { useToggle } from '../../hooks';
@@ -171,7 +164,7 @@ export const EditModal: React.FC<EditModalProps> = ({
       <div className="forklift-edit-modal-body">{body}</div>
 
       <Form id="modal-with-form-form" className="forklift-edit-modal-form">
-        <FormGroup
+        <FormGroupWithHelpText
           label={label}
           labelIcon={LabelIcon}
           fieldId="modal-with-form-form-field"
@@ -180,7 +173,7 @@ export const EditModal: React.FC<EditModalProps> = ({
           validated={validation.type}
         >
           {InputComponent_}
-        </FormGroup>
+        </FormGroupWithHelpText>
       </Form>
 
       {typeof owner === 'object' && <ItemIsOwnedAlert owner={owner} namespace={namespace} />}