Generalize ProviderSelectField into SelectWithOnChange

Author: skateman

app/javascript/components/provider-form/index.jsx

@@ -8,7 +8,6 @@ import MiqFormRenderer from '../../forms/data-driven-form';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
 import mapper from '../../forms/mappers/componentMapper';
 import ProtocolSelector from './protocol-selector';
-import ProviderSelectField from './provider-select-field';
 import ProviderCredentials from './provider-credentials';
 import ValidateProviderCredentials from './validate-provider-credentials';
 import DetectButton from './detect-button';
@@ -58,7 +57,7 @@ const loadProviderFields = type => API.options(`/api/providers?type=${type}`).th
 );
 
 const typeSelectField = (edit, filter, setState) => ({
-  component: 'provider-select-field',
+  component: 'select-with-onchange',
   id: 'type',
   name: 'type',
   label: __('Type'),
@@ -68,7 +67,7 @@ const typeSelectField = (edit, filter, setState) => ({
     API.options('/api/providers').then(({ data: { supported_providers } }) => supported_providers // eslint-disable-line camelcase
       .filter(({ kind }) => kind === filter)
       .map(({ title, type }) => ({ value: type, label: title }))),
-  loadSchema: value => loadProviderFields(value).then(fields => setState(({ fields: [firstField] }) => ({
+  onChange: value => loadProviderFields(value).then(fields => setState(({ fields: [firstField] }) => ({
     fields: [firstField, ...fields],
   }))),
 });
@@ -161,7 +160,6 @@ const ProviderForm = ({ providerId, kind, title, redirect }) => {
   const componentMapper = {
     ...mapper,
     'protocol-selector': ProtocolSelector,
-    'provider-select-field': ProviderSelectField,
     'provider-credentials': ProviderCredentials,
     'validate-provider-credentials': ValidateProviderCredentials,
     'detect-button': DetectButton,

app/javascript/components/provider-form/provider-select-field.jsx

@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import { useFieldApi } from '@@ddf';
+import Select from './index';
+
+const SelectWithOnChange = ({ onChange, ...props }) => {
+  const { input: { value } } = useFieldApi(props);
+
+  useEffect(() => {
+    if (!props.isDisabled && value) {
+      onChange(value);
+    }
+  }, [value]);
+
+  return <Select {...props} />;
+};
+
+SelectWithOnChange.propTypes = {
+  loadSchema: PropTypes.func,
+};
+
+SelectWithOnChange.defaultProps = {
+  loadSchema: () => undefined,
+};
+
+export default SelectWithOnChange;

app/javascript/components/select/with-onchange.jsx

@@ -8,6 +8,7 @@ import DualListSelect from '../../components/dual-list-select';
 import EditPasswordField from '../../components/async-credentials/edit-password-field';
 import PasswordField from '../../components/async-credentials/password-field';
 import Select from '../../components/select';
+import SelectWithOnChange from '../../components/select/with-onchange';
 import { DataDrivenFormCodeEditor } from '../../components/code-editor';
 import FieldArray from '../../components/field-array';
 
@@ -23,6 +24,7 @@ const mapper = {
   'password-field': PasswordField,
   'validate-credentials': AsyncCredentials,
   [componentTypes.SELECT]: Select,
+  [`${componentTypes.SELECT}-with-onchange`]: SelectWithOnChange,
 };
 
 export default mapper;