Move Formik fields and form helpers from @console/dev-console to @console/shared

frontend/packages/console-shared/src/components/dropdown/index.ts

@@ -0,0 +1 @@
+export { default as ResourceDropdown } from './ResourceDropdown';

frontend/packages/dev-console/src/components/form-utils/FormFooter.tsx → frontend/packages/console-shared/src/components/form-utils/FormFooter.tsx

@@ -6,6 +6,10 @@ import { FormFooterProps } from './form-utils-types';
 const FormFooter: React.FC<FormFooterProps> = ({
   handleSubmit,
   handleReset,
+  handleCancel,
+  submitLabel = 'Save',
+  resetLabel = 'Reload',
+  cancelLabel = 'Cancel',
   isSubmitting,
   errorMessage,
   successMessage,
@@ -15,7 +19,7 @@ const FormFooter: React.FC<FormFooterProps> = ({
   <ButtonBar inProgress={isSubmitting} errorMessage={errorMessage} successMessage={successMessage}>
     {showAlert && (
       <Alert isInline className="co-alert" variant="info" title="You made changes to this page.">
-        Click Save to save changes or Reload to cancel.
+        {`Click ${submitLabel} to save changes or ${resetLabel} to cancel changes.`}
       </Alert>
     )}
     <ActionGroup className="pf-c-form">
@@ -25,11 +29,18 @@ const FormFooter: React.FC<FormFooterProps> = ({
         variant={ButtonVariant.primary}
         isDisabled={disableSubmit}
       >
-        Save
-      </Button>
-      <Button type="button" variant={ButtonVariant.secondary} onClick={handleReset}>
-        Reload
+        {submitLabel}
       </Button>
+      {handleReset && (
+        <Button type="button" variant={ButtonVariant.secondary} onClick={handleReset}>
+          {resetLabel}
+        </Button>
+      )}
+      {handleCancel && (
+        <Button type="button" variant={ButtonVariant.secondary} onClick={handleCancel}>
+          {cancelLabel}
+        </Button>
+      )}
     </ActionGroup>
   </ButtonBar>
 );

frontend/packages/dev-console/src/components/form-utils/form-utils-types.ts → frontend/packages/console-shared/src/components/form-utils/form-utils-types.ts

@@ -1,9 +1,13 @@
 export interface FormFooterProps {
   handleSubmit?: () => void;
-  handleReset: () => void;
+  handleReset?: () => void;
+  handleCancel?: () => void;
+  submitLabel?: string;
+  resetLabel?: string;
+  cancelLabel?: string;
   isSubmitting: boolean;
   errorMessage: string;
-  successMessage: string;
+  successMessage?: string;
   disableSubmit: boolean;
   showAlert?: boolean;
 }

frontend/packages/metal3-plugin/src/components/baremetal-hosts/add-baremetal-host/SwitchField.tsx → frontend/packages/console-shared/src/components/formik-fields/SwitchField.tsx

@@ -1,9 +1,8 @@
-/* eslint-disable no-unused-vars, no-undef */
 import * as React from 'react';
 import { useField } from 'formik';
 import { FormGroup, Switch } from '@patternfly/react-core';
-import { getFieldId } from '@console/dev-console/src/components/formik-fields/field-utils';
-import { CheckboxFieldProps } from '@console/dev-console/src/components/formik-fields/field-types';
+import { getFieldId } from './field-utils';
+import { CheckboxFieldProps } from './field-types';
 
 const SwitchField: React.FC<CheckboxFieldProps> = ({
   label,

frontend/packages/dev-console/src/components/formik-fields/index.ts → frontend/packages/console-shared/src/components/formik-fields/index.ts

@@ -1,12 +1,16 @@
-export { default as InputField } from './InputField';
-export { default as TextAreaField } from './TextAreaField';
-export { default as DropdownField } from './DropdownField';
-export { default as NSDropdownField } from './NSDropdownField';
 export { default as CheckboxField } from './CheckboxField';
-export { default as NumberSpinnerField } from './NumberSpinnerField';
-export { default as EnvironmentField } from './EnvironmentField';
+export { default as DropdownField } from './DropdownField';
 export { default as DroppableFileInputField } from './DroppableFileInputField';
+export { default as EnvironmentField } from './EnvironmentField';
+export { default as InputField } from './InputField';
 export { default as InputSearchField } from './InputSearchField';
 export { default as MultiColumnField } from './multi-column-field/MultiColumnField';
-export { default as ResourceLimitField } from './ResourceLimitField';
+export { default as NSDropdownField } from './NSDropdownField';
+export { default as NumberSpinnerField } from './NumberSpinnerField';
 export { default as RadioButtonField } from './RadioButtonField';
+export { default as ResourceDropdownField } from './ResourceDropdownField';
+export { default as ResourceLimitField } from './ResourceLimitField';
+export { default as SwitchField } from './SwitchField';
+export { default as TextAreaField } from './TextAreaField';
+export * from './field-utils';
+export * from './field-types';

frontend/packages/console-shared/src/components/index.ts

@@ -1,5 +1,8 @@
 export * from './badges';
 export * from './contextMenu';
+export * from './dropdown';
+export * from './form-utils';
+export * from './formik-fields';
 export * from './status';
 export * from './pod';
 export * from './popper';

frontend/packages/dev-console/src/components/dropdown/ApplicationDropdown.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Firehose } from '@console/internal/components/utils';
 import { referenceForModel } from '@console/internal/module/k8s';
 import { ServiceModel } from '@console/knative-plugin';
-import ResourceDropdown from './ResourceDropdown';
+import { ResourceDropdown } from '@console/shared';
 
 interface ApplicationDropdownProps {
   id?: string;

frontend/packages/dev-console/src/components/dropdown/PipelineResourceDropdown.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import * as _ from 'lodash';
+import { ResourceDropdown } from '@console/shared';
 import { Firehose } from '@console/internal/components/utils';
 import { referenceForModel } from '@console/internal/module/k8s';
 import { PipelineResourceModel } from '../../models';
-import ResourceDropdown from './ResourceDropdown';
 
 export interface PipelineResourceDropdownProps {
   dropDownClassName?: string;

frontend/packages/dev-console/src/components/dropdown/SourceSecretDropdown.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SecretModel } from '@console/internal/models';
 import { Firehose } from '@console/internal/components/utils';
-import ResourceDropdown from './ResourceDropdown';
+import { ResourceDropdown } from '@console/shared';
 
 interface SourceSecretDropdownProps {
   dropDownClassName?: string;

frontend/packages/dev-console/src/components/import/advanced/BuildConfigSection.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CheckboxField, EnvironmentField } from '../../formik-fields';
+import { CheckboxField, EnvironmentField } from '@console/shared';
 import FormSection from '../section/FormSection';
 
 export interface BuildConfigSectionProps {

frontend/packages/dev-console/src/components/import/advanced/DeploymentConfigSection.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CheckboxField, EnvironmentField } from '../../formik-fields';
+import { CheckboxField, EnvironmentField } from '@console/shared';
 import FormSection from '../section/FormSection';
 
 export interface DeploymentConfigSectionProps {

frontend/packages/dev-console/src/components/import/advanced/ResourceLimitSection.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
+import { ResourceLimitField } from '@console/shared';
 import FormSection from '../section/FormSection';
-import { ResourceLimitField } from '../../formik-fields';
 import { MemoryUnits, CPUUnits } from '../import-types';
 
 const ResourceLimitSection: React.FC = () => {

frontend/packages/dev-console/src/components/import/advanced/ScalingSection.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { NumberSpinnerField } from '../../formik-fields';
+import { NumberSpinnerField } from '@console/shared';
 import FormSection from '../section/FormSection';
 
 const ScalingSection: React.FC = () => {

frontend/packages/dev-console/src/components/import/advanced/ServerlessScalingSection.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { NumberSpinnerField } from '../../formik-fields';
+import { NumberSpinnerField } from '@console/shared';
 import FormSection from '../section/FormSection';
 
 const ServerlessScalingSection: React.FC = () => {

frontend/packages/dev-console/src/components/import/app/AppSection.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useField } from 'formik';
 import { TextInputTypes } from '@patternfly/react-core';
-import { InputField, TextAreaField } from '../../formik-fields';
+import { InputField, TextAreaField } from '@console/shared';
 import { ProjectData } from '../import-types';
 import FormSection from '../section/FormSection';
 import ApplicationSelector from './ApplicationSelector';

frontend/packages/dev-console/src/components/import/app/ApplicationSelector.tsx

@@ -2,9 +2,8 @@ import * as React from 'react';
 import * as _ from 'lodash';
 import { useFormikContext, FormikValues, useField } from 'formik';
 import { FormGroup, TextInputTypes } from '@patternfly/react-core';
-import { InputField } from '../../formik-fields';
+import { InputField, getFieldId } from '@console/shared';
 import ApplicationDropdown from '../../dropdown/ApplicationDropdown';
-import { getFieldId } from '../../formik-fields/field-utils';
 
 export const CREATE_APPLICATION_KEY = '#CREATE_APPLICATION_KEY#';
 export const UNASSIGNED_KEY = '#UNASSIGNED_KEY#';

frontend/packages/dev-console/src/components/import/builder/BuilderImageSelector.tsx

@@ -4,8 +4,8 @@ import { useField, useFormikContext, FormikValues } from 'formik';
 import { LoadingInline } from '@console/internal/components/utils';
 import { FormGroup, Alert } from '@patternfly/react-core';
 import { StarIcon } from '@patternfly/react-icons';
+import { getFieldId } from '@console/shared';
 import { NormalizedBuilderImages } from '../../../utils/imagestream-utils';
-import { getFieldId } from '../../formik-fields/field-utils';
 import BuilderImageCard from './BuilderImageCard';
 import './BuilderImageSelector.scss';
 

frontend/packages/dev-console/src/components/import/builder/BuilderImageTagSelector.tsx

@@ -4,12 +4,12 @@ import { useFormikContext, FormikValues } from 'formik';
 import { ResourceName } from '@console/internal/components/utils';
 import { K8sResourceKind } from '@console/internal/module/k8s';
 import { ImageStreamTagModel } from '@console/internal/models';
+import { DropdownField } from '@console/shared';
 import {
   BuilderImage,
   getTagDataWithDisplayName,
   getPorts,
 } from '../../../utils/imagestream-utils';
-import { DropdownField } from '../../formik-fields';
 import { useSafeK8s } from '../../../utils/safe-k8s-hook';
 import ImageStreamInfo from './ImageStreamInfo';
 

frontend/packages/dev-console/src/components/import/git/AdvancedGitOptions.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ExpandCollapse } from '@console/internal/components/utils';
 import { TextInputTypes } from '@patternfly/react-core';
-import { InputField } from '../../formik-fields';
+import { InputField } from '@console/shared';
 import FormSection from '../section/FormSection';
 import SourceSecretSelector from './SourceSecretSelector';
 

frontend/packages/dev-console/src/components/import/git/DockerSection.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { TextInputTypes } from '@patternfly/react-core';
-import { InputField } from '../../formik-fields';
+import { InputField } from '@console/shared';
 import FormSection from '../section/FormSection';
 
 export interface DockerSectionProps {

frontend/packages/dev-console/src/components/import/git/GitSection.tsx

@@ -4,7 +4,7 @@ import { Alert, TextInputTypes } from '@patternfly/react-core';
 import { getGitService, GitProvider } from '@console/git-service';
 import { LoadingInline } from '@console/internal/components/utils';
 import { CheckCircleIcon } from '@patternfly/react-icons';
-import { InputField, DropdownField } from '../../formik-fields';
+import { InputField, DropdownField } from '@console/shared';
 import { GitReadableTypes, GitTypes } from '../import-types';
 import { detectGitType, detectGitRepoName } from '../import-validation-utils';
 import { getSampleRepo, getSampleRef, getSampleContextDir } from '../../../utils/imagestream-utils';

frontend/packages/dev-console/src/components/import/git/SourceSecretSelector.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { useFormikContext, FormikValues, useField } from 'formik';
 import { FormGroup } from '@patternfly/react-core';
 import { SecretTypeAbstraction } from '@console/internal/components/secrets/create-secret';
+import { getFieldId } from '@console/shared';
 import SourceSecretDropdown from '../../dropdown/SourceSecretDropdown';
-import { getFieldId } from '../../formik-fields/field-utils';
 import { secretModalLauncher } from '../CreateSecretModal';
 
 const CREATE_SOURCE_SECRET = 'create-source-secret';

frontend/packages/dev-console/src/components/import/image-search/ImageSearch.tsx

@@ -5,8 +5,8 @@ import { ImageStreamImportsModel } from '@console/internal/models';
 import { useFormikContext, FormikValues } from 'formik';
 import { TextInputTypes, Alert, AlertActionCloseButton, Button } from '@patternfly/react-core';
 import { SecretTypeAbstraction } from '@console/internal/components/secrets/create-secret';
+import { InputSearchField } from '@console/shared';
 import { getSuggestedName, getPorts, makePortName } from '../../../utils/imagestream-utils';
-import { InputSearchField } from '../../formik-fields';
 import { secretModalLauncher } from '../CreateSecretModal';
 
 const ImageSearch: React.FC = () => {

frontend/packages/dev-console/src/components/import/image-search/ImageSearchSection.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useFormikContext, FormikValues } from 'formik';
 import { K8sResourceKind } from '@console/internal/module/k8s';
-import { RadioButtonField } from '../../formik-fields';
+import { RadioButtonField } from '@console/shared';
 import FormSection from '../section/FormSection';
 import { imageRegistryType } from '../../../utils/imagestream-utils';
 import ImageStream from './ImageStream';

frontend/packages/dev-console/src/components/import/image-search/ImageStream.tsx

@@ -5,7 +5,7 @@ import { useFormikContext, FormikValues } from 'formik';
 import { k8sGet } from '@console/internal/module/k8s';
 import { ImageStreamTagModel, RoleBindingModel } from '@console/internal/models';
 import { useAccessReview } from '@console/internal/components/utils';
-import { DropdownField, CheckboxField } from '../../formik-fields';
+import { DropdownField, ResourceDropdownField, CheckboxField } from '@console/shared';
 import { ImageStreamProps } from '../import-types';
 import {
   getSuggestedName,
@@ -18,7 +18,6 @@ import {
   getImageStreamTags,
 } from '../../../utils/imagestream-utils';
 import './ImageStream.scss';
-import ResourceDropdownField from '../../formik-fields/ResourceDropdownField';
 
 const ImageStream: React.FC<ImageStreamProps> = ({ imageStreams }) => {
   const resources = getProjectResource();

frontend/packages/dev-console/src/components/import/import-types.ts

@@ -1,6 +1,6 @@
 import { K8sResourceKind, ContainerPort } from '@console/internal/module/k8s';
 import { LazyLoader } from '@console/plugin-sdk';
-import { NameValuePair, NameValueFromPair } from '../formik-fields/field-types';
+import { NameValuePair, NameValueFromPair } from '@console/shared';
 import { NormalizedBuilderImages } from '../../utils/imagestream-utils';
 
 export interface DeployImageFormProps {

frontend/packages/dev-console/src/components/import/pipeline/PipelineTemplate.tsx

@@ -3,8 +3,8 @@ import { LoadingInline } from '@console/internal/components/utils';
 import { k8sList } from '@console/internal/module/k8s';
 import { useFormikContext, FormikValues } from 'formik';
 import { Alert, Expandable } from '@patternfly/react-core';
+import { CheckboxField } from '@console/shared';
 import { PipelineModel } from '../../../models';
-import { CheckboxField } from '../../formik-fields';
 import { PipelineVisualization } from '../../pipelines/detail-page-tabs/pipeline-details/PipelineVisualization';
 
 const MISSING_DOCKERFILE_LABEL_TEXT =

frontend/packages/dev-console/src/components/import/route/CreateRoute.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as _ from 'lodash';
 import { useFormikContext, FormikValues } from 'formik';
 import { TextInputTypes } from '@patternfly/react-core';
-import { InputField, DropdownField } from '../../formik-fields';
+import { InputField, DropdownField } from '@console/shared';
 import { makePortName } from '../../../utils/imagestream-utils';
 
 const CreateRoute: React.FC = () => {

frontend/packages/dev-console/src/components/import/route/RouteCheckbox.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { CheckboxField } from '../../formik-fields';
+import { CheckboxField } from '@console/shared';
 
 const RouteCheckbox: React.FC = () => {
   return (

frontend/packages/dev-console/src/components/import/route/SecureRoute.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useFormikContext, FormikValues } from 'formik';
 import { FormHelperText } from '@patternfly/react-core';
-import { DropdownField, DroppableFileInputField, CheckboxField } from '../../formik-fields';
+import { DropdownField, DroppableFileInputField, CheckboxField } from '@console/shared';
 import {
   TerminationTypes,
   PassthroughInsecureTrafficTypes,

frontend/packages/dev-console/src/components/import/section/ResourceSection.tsx

@@ -7,12 +7,10 @@ import {
   ServiceModel,
   KnativeServingModel,
 } from '@console/knative-plugin';
-import { getBadgeFromType } from '@console/shared';
+import { getBadgeFromType, RadioButtonField, RadioOption } from '@console/shared';
 import { useAccessReview } from '@console/internal/components/utils';
 import { getActiveNamespace } from '@console/internal/actions/ui';
 import { Resources } from '../import-types';
-import { RadioOption } from '../../formik-fields/field-types';
-import { RadioButtonField } from '../../formik-fields';
 import FormSection from './FormSection';
 import './ResourceSection.scss';
 

frontend/packages/dev-console/src/components/import/serverless/ServerlessRouteSection.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { TextInputTypes } from '@patternfly/react-core';
+import { InputField } from '@console/shared';
 import FormSection from '../section/FormSection';
 import { RouteData } from '../import-types';
-import { InputField } from '../../formik-fields';
 
 export interface ServerlessRouteSectionProps {
   route: RouteData;

frontend/packages/dev-console/src/components/modals/DeleteApplicationModal.tsx

@@ -9,9 +9,8 @@ import {
   ModalSubmitFooter,
 } from '@console/internal/components/factory/modal';
 import { Formik, FormikProps, FormikValues } from 'formik';
-import { YellowExclamationTriangleIcon } from '@console/shared';
+import { YellowExclamationTriangleIcon, InputField } from '@console/shared';
 import { K8sResourceKind } from '@console/internal/module/k8s';
-import { InputField } from '../formik-fields';
 
 type DeleteApplicationModalProps = {
   initialApplication: string;

frontend/packages/dev-console/src/components/pipelines/detail-page-tabs/PipelineParameters.tsx

@@ -4,8 +4,7 @@ import { Form, TextInputTypes } from '@patternfly/react-core';
 import { FormikProps, FormikValues } from 'formik';
 import { useAccessReview } from '@console/internal/components/utils';
 import { getActiveNamespace } from '@console/internal/actions/ui';
-import { MultiColumnField, InputField } from '../../formik-fields';
-import { FormFooter } from '../../form-utils';
+import { MultiColumnField, InputField, FormFooter } from '@console/shared';
 
 const PipelineParameters: React.FC<FormikProps<FormikValues>> = ({
   handleSubmit,

frontend/packages/dev-console/src/components/pipelines/detail-page-tabs/PipelineResources.tsx

@@ -4,8 +4,7 @@ import { Form, TextInputTypes } from '@patternfly/react-core';
 import { FormikProps, FormikValues } from 'formik';
 import { useAccessReview } from '@console/internal/components/utils';
 import { getActiveNamespace } from '@console/internal/actions/ui';
-import { MultiColumnField, InputField, DropdownField } from '../../formik-fields';
-import { FormFooter } from '../../form-utils';
+import { MultiColumnField, InputField, DropdownField, FormFooter } from '@console/shared';
 
 enum resourceTypes {
   '' = 'Select resource type',

frontend/packages/dev-console/src/components/pipelines/pipeline-form/PipelineParameterSection.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { FieldArray } from 'formik';
 import { TextInputTypes } from '@patternfly/react-core';
+import { InputField } from '@console/shared';
 import FormSection from '../../import/section/FormSection';
-import { InputField } from '../../formik-fields';
 
 export interface ParamertersSectionProps {
   parameters: {