Merge pull request #7311 from skateman/dynamic-schema-select

Add onChange functionality to our DDF select fields

Author: himdel

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';
@@ -19,19 +18,6 @@ const findSkipSubmits = (schema, items) => {
   return [...found, ...children];
 };
 
-const typeSelectField = (edit, filter) => ({
-  component: 'provider-select-field',
-  id: 'type',
-  name: 'type',
-  label: __('Type'),
-  kind: filter,
-  isDisabled: edit,
-  loadOptions: () =>
-    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 }))),
-});
-
 const commonFields = [
   {
     component: componentTypes.TEXT_FIELD,
@@ -58,7 +44,7 @@ const commonFields = [
   },
 ];
 
-export const loadProviderFields = (kind, type) => API.options(`/api/providers?type=${type}`).then(
+const loadProviderFields = type => API.options(`/api/providers?type=${type}`).then(
   ({ data: { provider_form_schema } }) => ([ // eslint-disable-line camelcase
     ...commonFields,
     {
@@ -70,11 +56,27 @@ export const loadProviderFields = (kind, type) => API.options(`/api/providers?ty
   ]),
 );
 
+const typeSelectField = (edit, filter, setState) => ({
+  component: 'select',
+  id: 'type',
+  name: 'type',
+  label: __('Type'),
+  kind: filter,
+  isDisabled: edit,
+  loadOptions: () =>
+    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 }))),
+  onChange: value => loadProviderFields(value).then(fields => setState(({ fields: [firstField] }) => ({
+    fields: [firstField, ...fields],
+  }))),
+});
+
 export const EditingContext = React.createContext({});
 
 const ProviderForm = ({ providerId, kind, title, redirect }) => {
   const edit = !!providerId;
-  const [{ fields, initialValues }, setState] = useState({ fields: edit ? undefined : [typeSelectField(false, kind)] });
+  const [{ fields, initialValues }, setState] = useState({});
 
   const submitLabel = edit ? __('Save') : __('Add');
 
@@ -94,7 +96,7 @@ const ProviderForm = ({ providerId, kind, title, redirect }) => {
         const endpoints = keyBy(_endpoints, 'role');
         const authentications = keyBy(_authentications, 'authtype');
 
-        loadProviderFields(kind, type).then((fields) => {
+        loadProviderFields(type).then((fields) => {
           setState({
             fields: [typeSelectField(true, kind), ...fields],
             initialValues: {
@@ -106,6 +108,10 @@ const ProviderForm = ({ providerId, kind, title, redirect }) => {
           });
         }).then(miqSparkleOff);
       });
+    } else {
+      // As the typeSelectField relies on the setState() function, it's necessary to set the initial state
+      // here and not above in the useState() function.
+      setState({ fields: [typeSelectField(false, kind, setState)] });
     }
   }, [providerId]);
 
@@ -154,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,30 @@
+
+import React, { useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { components } from '@data-driven-forms/pf3-component-mapper';
+
+import { useFieldApi } from '@@ddf';
+
+const SelectWithOnChange = ({ onChange, ...props }) => {
+  if (onChange) {
+    const { input: { value } } = useFieldApi(props);
+
+    useEffect(() => {
+      if (!props.isDisabled && value) {
+        onChange(value);
+      }
+    }, [value]);
+  }
+
+  return <components.Select placeholder={`<${__('Choose')}>`} {...props} />;
+};
+
+SelectWithOnChange.propTypes = {
+  onChange: PropTypes.func,
+};
+
+SelectWithOnChange.defaultProps = {
+  onChange: undefined,
+};
+
+export default SelectWithOnChange;

app/javascript/components/select/index.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
-import { componentMapper, components } from '@data-driven-forms/pf3-component-mapper';
+import { componentMapper } from '@data-driven-forms/pf3-component-mapper';
 import { componentTypes } from '@@ddf';
 
 import AsyncCredentials from '../../components/async-credentials/async-credentials';
 import DualGroup from '../../components/dual-group';
 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 { DataDrivenFormCodeEditor } from '../../components/code-editor';
 import FieldArray from '../../components/field-array';
 
@@ -21,7 +22,7 @@ const mapper = {
   note: props => <div className={props.className} role="alert">{props.label}</div>,
   'password-field': PasswordField,
   'validate-credentials': AsyncCredentials,
-  [componentTypes.SELECT]: props => <components.Select placeholder={`<${__('Choose')}>`} {...props} />,
+  [componentTypes.SELECT]: Select,
 };
 
 export default mapper;