Uploaded image for project: 'OCMUI - OpenShift Cluster Manager UI'
  1. OCMUI - OpenShift Cluster Manager UI
  2. OCMUI-2497

Remove all usages of redux-form from UI code base

    • Icon: Epic Epic
    • Resolution: Unresolved
    • Icon: Undefined Undefined
    • None
    • None
    • A-Team
    • Remove redux-form from UI codebase
    • False
    • Hide

      None

      Show
      None
    • False
    • To Do
    • 75% To Do, 0% In Progress, 25% Done

      The redux-form 3rd party library is deprecated and no longer supported resulting in inability to convert to React 18 types, and also no current security updates.

      We recently converted the rosa and osd wizards from redux-form to Formik form management library.  There are some Formik hints and tips in ROSA V2 tips.

      This epic is to identify and remove all remaining usages of redux-form from our code base.

       

      11/13/2024

      The total number of occurrences of "from 'redux-form'" in the project is 64 usages.

      1. ClusterDetails/components/AddOns/AddOnsParametersModal - 2 usages
      2. ClusterDetails/components/IdentityProvidersPage - 2 usages
      3. ClusterDetails/components/IdentityProvidersPage/components - 2 usages
      4. ClusterDetails/components/IdentityProvidersPage/components/ProvidersForms - 8 usages
      5. ClusterDetails/components/Networking/components/EditApplicationIngressDialog - 2 usages
      6. ClusterDetails/components/Networking/components/EditClusterIngressDialog - 2 usages
      7. ClusterDetails/components/Networking/components/EditClusterWideProxyDialog - 2 usages
      8. ClusterDetails/components/Networking/components/VPCDetailsCard - 1 usage
      9. ClusterDetails/components/UpgradeSettings - 1 usage
      10. ClusterDetailsMultiRegion/components/IdentityProvidersPage/components - 1 usage
      11. common - 4 usages
      12. common/EditClusterAutoScalingDialog - 3 usages
      13. common/Prerequisites - 1 usage
      14. common/ScaleClusterDialog - 3 usages
      15. common/ScaleSection - 1 usage
      16. common/ScaleSection/AutoScaleSection - 1 usage
      17. common/Upgrades - 1 usage
      18. commonMultiRegion/EditClusterAutoScalingDialog - 3 usages
      19. commonMultiRegion/ScaleClusterDialog - 3 usages
      20. commonMultiRegion/ScaleSection - 1 usage
      21. commonMultiRegion/ScaleSection/AutoScaleSection - 1 usage
      22. RegisterCluster - 2 usages
      23. wizards/common - 3 usages
      24. wizards/form/RichInputField - 1 usage
      25. src/components/common - 1 usage
      26. src/components/common/ReduxFormComponents - 7 usages
      27. src/components/common/ReduxFormComponents/ReduxFormKeyValueList - 1 usage
      28. src/components/common/ReduxFormComponents/ReduxFormMachinePoolSubnets - 1 usage
      29. src/components/common/ReduxFormComponents/ReduxFormTaints - 1 usage
      30. src/redux - 1 usage
      31. src/redux/reducers - 1 usage

      Detailed/Full list
            
      Occurrences of 'from 'redux-form'' in Project        
      
              src/components/clusters/ClusterDetails/components/AddOns/AddOnsParametersModal  (2 usages found)
                  AddOnsParametersModal.jsx  (1 usage found)
                      3 import { Field } from 'redux-form';
                  index.jsx  (1 usage found)
                      2 import { reduxForm, reset } from 'redux-form';
              src/components/clusters/ClusterDetails/components/IdentityProvidersPage  (2 usages found)
                  IdentityProvidersPage.jsx  (1 usage found)
                      6 import { reset } from 'redux-form';
                  index.jsx  (1 usage found)
                      6 import { formValueSelector, getFormSyncErrors, reduxForm } from 'redux-form';
              src/components/clusters/ClusterDetails/components/IdentityProvidersPage/components  (2 usages found)
                  CAUpload.tsx  (1 usage found)
                      2 import { WrappedFieldInputProps } from 'redux-form';
                  IDPForm.jsx  (1 usage found)
                      3 import { Field } from 'redux-form';
              src/components/clusters/ClusterDetails/components/IdentityProvidersPage/components/ProvidersForms  (8 usages found)
                  GithubForm.jsx  (1 usage found)
                      3 import { Field } from 'redux-form';
                  GitlabForm.jsx  (1 usage found)
                      3 import { Field } from 'redux-form';
                  GoogleFormRequired.jsx  (1 usage found)
                      3 import { Field } from 'redux-form';
                  IDPBasicFields.tsx  (1 usage found)
                      2 import { Field } from 'redux-form';
                  LDAPForm.jsx  (1 usage found)
                      3 import { Field } from 'redux-form';
                  LDAPFormRequired.jsx  (1 usage found)
                      3 import { Field } from 'redux-form';
                  OpenIDForm.jsx  (1 usage found)
                      3 import { Field } from 'redux-form';
                  OpenIDFormRequired.jsx  (1 usage found)
                      3 import { Field } from 'redux-form';
              src/components/clusters/ClusterDetails/components/Networking/components/EditApplicationIngressDialog  (2 usages found)
                  EditApplicationIngressDialog.tsx  (1 usage found)
                      2 import { SubmitHandler } from 'redux-form';
                  index.ts  (1 usage found)
                      2 import { reduxForm } from 'redux-form';
              src/components/clusters/ClusterDetails/components/Networking/components/EditClusterIngressDialog  (2 usages found)
                  EditClusterIngressDialog.jsx  (1 usage found)
                      3 import { Field } from 'redux-form';
                  index.js  (1 usage found)
                      2 import { formValueSelector, reduxForm } from 'redux-form';
              src/components/clusters/ClusterDetails/components/Networking/components/EditClusterWideProxyDialog  (2 usages found)
                  EditClusterWideProxyDialog.jsx  (1 usage found)
                      3 import { Field } from 'redux-form';
                  index.js  (1 usage found)
                      2 import { change, formValueSelector, getFormMeta, reduxForm } from 'redux-form';
              src/components/clusters/ClusterDetails/components/Networking/components/VPCDetailsCard  (1 usage found)
                  index.js  (1 usage found)
                      2 import { getFormValues } from 'redux-form';
              src/components/clusters/ClusterDetails/components/UpgradeSettings  (1 usage found)
                  index.js  (1 usage found)
                      4 import { formValueSelector, reduxForm } from 'redux-form';        
              src/components/clusters/ClusterDetailsMultiRegion/components/IdentityProvidersPage/components  (1 usage found)
                  CAUpload.tsx  (1 usage found)
                      2 import { WrappedFieldInputProps } from 'redux-form';
              src/components/clusters/common  (4 usages found)
                  DefaultIngressFields.tsx  (1 usage found)
                      3 import { Field } from 'redux-form';
                  SubnetSelectField.tsx  (1 usage found)
                      3 import { WrappedFieldInputProps, WrappedFieldMetaProps } from 'redux-form';
                  UserWorkloadMonitoringSection.jsx  (1 usage found)
                      3 import { Field } from 'redux-form';
                  v1VpcSelectors.ts  (1 usage found)
                      1 import { formValueSelector } from 'redux-form';
              src/components/clusters/common/EditClusterAutoScalingDialog  (3 usages found)
                  EditClusterAutoScalingDialog.tsx  (1 usage found)
                      3 import { Field } from 'redux-form';
                  fieldItemMapper.tsx  (1 usage found)
                      2 import { Field } from 'redux-form';
                  index.ts  (1 usage found)
                      9 } from 'redux-form';
              src/components/clusters/common/Prerequisites  (1 usage found)
                  AcknowledgePrerequisites.jsx  (1 usage found)
                      2 import { Field } from 'redux-form';
              src/components/clusters/common/ScaleClusterDialog  (3 usages found)
                  index.js  (1 usage found)
                      3 import { reduxForm } from 'redux-form';
                  ScaleClusterDialog.jsx  (1 usage found)
                      3 import { Field } from 'redux-form';
                  ScaleClusterSelectors.js  (1 usage found)
                      2 import { getFormValues } from 'redux-form';
              src/components/clusters/common/ScaleSection  (1 usage found)
                  ImdsSection.tsx  (1 usage found)
                      2 import { Field } from 'redux-form';
              src/components/clusters/common/ScaleSection/AutoScaleSection  (1 usage found)
                  AutoScaleSection.jsx  (1 usage found)
                      4 import { Field } from 'redux-form';
              src/components/clusters/common/Upgrades  (1 usages found)
                  UpgradeSettingsFields.jsx  (1 usage found)
                      5 import { Field } from 'redux-form';
              src/components/clusters/commonMultiRegion/EditClusterAutoScalingDialog  (3 usages found)
                  EditClusterAutoScalingDialog.tsx  (1 usage found)
                      3 import { Field } from 'redux-form';
                  fieldItemMapper.tsx  (1 usage found)
                      2 import { Field } from 'redux-form';
                  index.ts  (1 usage found)
                      9 } from 'redux-form';
              src/components/clusters/commonMultiRegion/ScaleClusterDialog  (3 usages found)
                  index.js  (1 usage found)
                      2 import { reduxForm } from 'redux-form';
                  ScaleClusterDialog.tsx  (1 usage found)
                      4 import { Field } from 'redux-form';
                  ScaleClusterSelectors.js  (1 usage found)
                      2 import { getFormValues } from 'redux-form';
              src/components/clusters/commonMultiRegion/ScaleSection  (1 usage found)
                  ImdsSection.tsx  (1 usage found)
                      2 import { Field } from 'redux-form';
              src/components/clusters/commonMultiRegion/ScaleSection/AutoScaleSection  (1 usage found)
                  AutoScaleSection.jsx  (1 usage found)
                      4 import { Field } from 'redux-form';
              src/components/clusters/RegisterCluster  (2 usages found)
                  index.ts  (1 usage found)
                      1 import { reduxForm } from 'redux-form';
                  RegisterCluster.tsx  (1 usage found)
                      4 import { Field, reset } from 'redux-form';
              src/components/clusters/wizards/common  (3 usages found)
                  credentialsSelector.js  (1 usage found)
                      1 import { formValueSelector } from 'redux-form';
                  isCCSCredentialsValidationNeeded.js  (1 usage found)
                      2 import { formValueSelector } from 'redux-form';
                  WizardConnector.js  (1 usage found)
                      9 import { reduxForm } from 'redux-form';
              src/components/clusters/wizards/form/RichInputField  (1 usage found)
                  RichInputField.tsx  (1 usage found)
                      3 import { WrappedFieldInputProps } from 'redux-form';
              src/components/common  (1 usage found)
                  DynamicSelect.tsx  (1 usage found)
                      2 import { WrappedFieldInputProps, WrappedFieldMetaProps } from 'redux-form';
              src/components/common/ReduxFormComponents  (7 usages found)
                  ReduxBooleanField.tsx  (1 usage found)
                      2 import { Field } from 'redux-form';
                  ReduxBooleanSelectDropdown.tsx  (1 usage found)
                      2 import { WrappedFieldInputProps, WrappedFieldMetaProps } from 'redux-form';
                  ReduxFieldArray.jsx  (1 usage found)
                      3 import { FieldArray } from 'redux-form';
                  ReduxHiddenCheckbox.jsx  (1 usage found)
                      3 import { Field } from 'redux-form';
                  ReduxSelectDropdown.tsx  (1 usage found)
                      2 import { WrappedFieldInputProps, WrappedFieldMetaProps } from 'redux-form';
                  RenderArrayFields.jsx  (1 usage found)
                      4 import { Field } from 'redux-form';
                  RenderCompoundArrayFields.jsx  (1 usage found)
                      3 import { Field } from 'redux-form';
              src/components/common/ReduxFormComponents/ReduxFormKeyValueList  (1 usage found)
                  ReduxFormKeyValueList.jsx  (1 usage found)
                      3 import { Field } from 'redux-form';
              src/components/common/ReduxFormComponents/ReduxFormMachinePoolSubnets  (1 usage found)
                  ReduxFormMachinePoolSubnets.jsx  (1 usage found)
                      3 import { Field } from 'redux-form';
              src/components/common/ReduxFormComponents/ReduxFormTaints  (1 usage found)
                  ReduxFormTaints.jsx  (1 usage found)
                      3 import { Field } from 'redux-form';
              src/redux  (1 usage found)
                  sentryMiddleware.ts  (1 usage found)
                      4 import { actionTypes } from 'redux-form';
              src/redux/reducers  (1 usage found)
                  index.ts  (1 usage found)
                      2 import { reducer as formReducer } from 'redux-form';

       

      Open Issues

      • redux-form still used in wizards!?
        src/components/clusters/wizards/common  (3 usages found)
            credentialsSelector.js  (1 usage found)
                1 import { formValueSelector } from 'redux-form';
            isCCSCredentialsValidationNeeded.js  (1 usage found)
                2 import { formValueSelector } from 'redux-form';
            WizardConnector.js  (1 usage found)
                9 import { reduxForm } from 'redux-form';
        src/components/clusters/wizards/form/RichInputField  (1 usage found)
            RichInputField.tsx  (1 usage found)
                3 import { WrappedFieldInputProps } from 'redux-form';
      • redux-form seems to be used in our sentryMiddleware and main reducer index file?
        src/redux  (1 usage found)
                    sentryMiddleware.ts  (1 usage found)
                        4 import { actionTypes } from 'redux-form';
                src/redux/reducers  (1 usage found)
                    index.ts  (1 usage found)
                        2 import { reducer as formReducer } from 'redux-form';
      • I wonder how many of the form components in `src/components/common/ReduxFormComponents` (ex ReduxBooleanField.tsx) already exist as Formik wrapped form components?

              Unassigned Unassigned
              dtaylor@redhat.com David Taylor
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

                Created:
                Updated: