Introduce a DDF component for provider credentials validation

app/javascript/components/async-credentials/async-provider-credentials.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import AsyncCredentials from './async-credentials';
+
+const AsyncProviderCredentials = ({ ...props }) => {
+  const asyncValidate = fields => new Promise((resolve, reject) => {
+    API.post('/api/providers', {
+      action: 'verify_credentials',
+      resource: fields,
+    }).then(({ results: [result] }) => {
+      const { task_id, success } = result; // eslint-disable-line camelcase
+      // The request here can either create a background task or fail
+      return success ? API.wait_for_task(task_id) : Promise.reject(result);
+      // The wait_for_task request can succeed with valid or invalid credentials
+      // with the message that the task is completed successfully. Based on the
+      // task_results we resolve() or reject() with an unknown error.
+      // Any known errors are passed to the catch(), which will reject() with a
+      // message describing what went wrong.
+    }).then(result => (result.task_results ? resolve() : reject(__('Validation failed: unknown error'))))
+      .catch(({ message }) => reject([__('Validation failed:'), message].join(' ')));
+  });
+
+  return <AsyncCredentials asyncValidate={asyncValidate} {...props} />;
+};
+
+AsyncProviderCredentials.propTypes = AsyncCredentials.propTypes;
+AsyncProviderCredentials.defaultProps = AsyncCredentials.defaultProps;
+
+export default AsyncProviderCredentials;

app/javascript/forms/mappers/formsFieldsMapper.jsx

@@ -3,6 +3,7 @@ import { componentTypes } from '@data-driven-forms/react-form-renderer';
 import { formFieldsMapper, components } from '@data-driven-forms/pf3-component-mapper';
 
 import AsyncCredentials from '../../components/async-credentials/async-credentials';
+import AsyncProviderCredentials from '../../components/async-credentials/async-provider-credentials';
 import DualGroup from '../../components/dual-group';
 import DualListSelect from '../../components/dual-list-select';
 import EditSecretField from '../../components/async-credentials/edit-secret-field';
@@ -20,6 +21,7 @@ const fieldsMapper = {
   hr: () => <hr />,
   'secret-switch-field': SecretSwitchField,
   'validate-credentials': AsyncCredentials,
+  'validate-provider-credentials': AsyncProviderCredentials,
   [componentTypes.SELECT]: props => <components.SelectField classNamePrefix="miq-ddf-select" {...props} />,
 };