Convert Settings Replication Form to React

app/javascript/components/provider-form/validate-provider-credentials.jsx

@@ -12,6 +12,8 @@ const ValidateProviderCredentials = ({ ...props }) => {
   const asyncValidate = (fields, fieldNames) => new Promise((resolve, reject) => {
     const url = providerId ? `/api/providers/${providerId}` : '/api/providers';
     const resource = pick(fields, fieldNames);
+
+    console.log(resource);
     const updatedResource = trimFieldValue(resource);
 
     API.post(url, { action: 'verify_credentials', resource: updatedResource }).then(({ results: [result] = [], ...single }) => {

app/javascript/components/settings-replication-form/helper.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import { useFieldApi, useFormApi } from '@@ddf';
+import { Button } from 'carbon-components-react';
+import MiqDataTable from '../miq-data-table';
+
+export const SubscriptionsTableComponent = (props) => {
+  const {
+    rows, onCellClick, addButtonLabel, onButtonClick,
+  } = useFieldApi(props);
+  const formOptions = useFormApi();
+
+  return (
+    <div className="subscriptions-table">
+      <Button
+        kind="primary"
+        className="subscription-add bx--btn bx--btn--primary pull-right"
+        type="button"
+        variant="contained"
+        onClick={() => onButtonClick(formOptions)}
+      >
+        {addButtonLabel}
+      </Button>
+
+      <MiqDataTable
+        headers={[
+          { key: 'dbname', header: __('Database') },
+          { key: 'host', header: __('Host') },
+          { key: 'user', header: __('Username') },
+          { key: 'password', header: __('Password') },
+          { key: 'port', header: __('Port') },
+          { key: 'backlog', header: __('Backlog') },
+          { key: 'status', header: __('Status') },
+          { key: 'provider_region', header: __('Region') },
+          { key: 'edit', header: __('Edit') },
+          { key: 'delete', header: __('Delete') },
+        ]}
+        rows={rows}
+        size="md"
+        onCellClick={(selectedRow, cellType) => onCellClick(selectedRow, cellType, formOptions)}
+      />
+    </div>
+  );
+};

app/javascript/components/settings-replication-form/index.jsx

@@ -0,0 +1,125 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import MiqFormRenderer from '@@ddf';
+import createSchema from './settings-replication-form.schema';
+import { SubscriptionsTableComponent } from './helper';
+import ValidateSubscription from './validate-subscription';
+import miqRedirectBack from '../../helpers/miq-redirect-back';
+import mapper from '../../forms/mappers/componentMapper';
+import { http } from '../../http_api';
+
+const SettingsReplicationForm = ({ pglogicalReplicationFormId }) => {
+  const [{
+    initialValues, subscriptions, form, replicationHelperText, isLoading,
+  }, setState] = useState({ isLoading: !!pglogicalReplicationFormId });
+  const submitLabel = __('Save');
+
+  console.log(initialValues);
+  console.log(subscriptions);
+
+  const componentMapper = {
+    ...mapper,
+    'subscriptions-table': SubscriptionsTableComponent,
+    'validate-subscription': ValidateSubscription,
+  };
+
+  // console.log(initialValues, form);
+
+  useEffect(() => {
+    if (pglogicalReplicationFormId) {
+      miqSparkleOn();
+      http.get(`/ops/pglogical_subscriptions_form_fields/${pglogicalReplicationFormId}`).then((response) => {
+        setState({
+          initialValues: {
+            replication_type: response.replication_type,
+            subscriptions: response.subscriptions,
+          },
+          subscriptions: response.subscriptions,
+          form: {
+            type: 'replication',
+            className: 'replication_form',
+            action: 'edit',
+          },
+          replicationHelperText: '',
+          isLoading: false,
+        });
+      });
+      miqSparkleOff();
+    }
+  }, [pglogicalReplicationFormId]);
+
+  const onSubmit = (values) => {
+    if (form.type === 'subscription') {
+      const newSubscriptions = [];
+
+      newSubscriptions.push({
+        dbname: values.dbname,
+        host: values.host,
+        user: values.user,
+        password: values.password,
+        port: values.port,
+      });
+
+      setState((state) => ({
+        ...state,
+        initialValues: {
+          replication_type: state.initialValues.replication_type,
+          subscriptions: state.initialValues.subscriptions,
+        },
+        subscriptions: subscriptions.concat(newSubscriptions),
+        form: {
+          type: 'replication',
+          className: 'replication_form',
+          action: 'edit',
+        },
+      }));
+    } else {
+      // Redirect to Settings -> Tasks
+
+      /* http.post(`/ops/pglogical_save_subscriptions/${pglogicalReplicationFormId}?button=${'save'}`, submitData, { skipErrors: [400] }).then(() => {
+        const message = __('Order Request was Submitted');
+        miqRedirectBack(message, 'success', '/miq_request/show_list?typ=service/');
+      }).catch((err) => {
+        console.log(err);
+      }); */
+    }
+  };
+
+  const onCancel = () => {
+    if (form.type === 'subscription') {
+      setState((state) => ({
+        ...state,
+        form: {
+          type: 'replication',
+          className: 'replication_form',
+          action: 'edit',
+        },
+      }));
+    } else {
+      const message = __('Dialog Cancelled');
+      miqRedirectBack(message, 'warning', '/ops/explorer');
+    }
+  };
+
+  return !isLoading && (
+    <MiqFormRenderer
+      schema={createSchema(initialValues, subscriptions, form, replicationHelperText, setState)}
+      componentMapper={componentMapper}
+      initialValues={initialValues}
+      onSubmit={onSubmit}
+      onCancel={onCancel}
+      canReset
+      buttonsLabels={{ submitLabel }}
+    />
+  );
+};
+
+SettingsReplicationForm.propTypes = {
+  pglogicalReplicationFormId: PropTypes.string,
+};
+SettingsReplicationForm.defaultProps = {
+  pglogicalReplicationFormId: undefined,
+};
+
+export default SettingsReplicationForm;

app/javascript/components/settings-replication-form/settings-replication-form.schema.js

@@ -0,0 +1,219 @@
+/* eslint-disable camelcase */
+import { componentTypes, validatorTypes } from '@@ddf';
+
+const createSchema = (initialValues, subscriptions, form, replicationHelperText, setState) => {
+  // Creates the rows for the 'subscriptions-table' component
+  const createRows = () => {
+    const rows = [];
+
+    subscriptions.forEach((value, index) => {
+      rows.push({
+        id: index.toString(),
+        dbname: { text: value.dbname },
+        host: { text: value.host },
+        user: { text: value.user },
+        password: { text: value.password },
+        port: { text: value.port },
+        backlog: { text: value.backlog ? value.backlog : '' },
+        status: { text: value.status ? value.status : '' },
+        provider_region: { text: value.provider_region || value.provider_region === 0 ? value.provider_region : '' },
+        edit: {
+          is_button: true,
+          text: __('Update'),
+          kind: 'tertiary',
+          size: 'md',
+          callback: 'editSubscription',
+        },
+        delete: {
+          is_button: true,
+          text: __('Delete'),
+          kind: 'danger',
+          size: 'md',
+          callback: 'deleteSubscription',
+        },
+      });
+    });
+
+    return rows;
+  };
+
+  const deleteSubscription = (selectedRow, cellType, formOptions) => {
+    subscriptions.splice(selectedRow.id, 1);
+
+    setState((state) => ({
+      ...state,
+      subscriptions,
+    }));
+  };
+
+  const editSubscription = (selectedRow) => {
+    setState((state) => ({
+      ...state,
+      initialValues: {
+        ...state.initialValues,
+        dbname: selectedRow.cells[0].value,
+        host: selectedRow.cells[1].value,
+        user: selectedRow.cells[2].value,
+        password: selectedRow.cells[3].value,
+        port: selectedRow.cells[4].value,
+      },
+      form: {
+        type: 'subscription',
+        className: 'subscription-form',
+        action: 'edit',
+      },
+    }));
+  };
+
+  const replicationFields = ({
+    fields: [
+      {
+        component: componentTypes.SELECT,
+        id: 'replication_type',
+        name: 'replication_type',
+        label: __('Type'),
+        helperText: replicationHelperText,
+        onChange: (value) => {
+          let helperText;
+
+          if (initialValues.replication_type === 'none' && value === 'none') {
+            helperText = __('No replication role has been set');
+          } else if (initialValues.replication_type === 'remote' && value === 'none') {
+            helperText = __('Replication will be disabled for this region');
+          } else if (initialValues.replication_type === 'global' && value === 'none') {
+            helperText = __('All current subscriptions will be removed');
+          } else if (initialValues.replication_type === 'global' && value === 'remote') {
+            helperText = __('Changing to remote replication role will remove all current subscriptions');
+          }
+
+          setState((state) => ({
+            ...state,
+            replicationHelperText: helperText,
+          }));
+        },
+        options: [
+          {
+            label: `<${_('None')}>`,
+            value: 'none',
+          },
+          {
+            label: `Global`,
+            value: 'global',
+          },
+          {
+            label: `Remote`,
+            value: 'remote',
+          },
+        ],
+      },
+      {
+        component: componentTypes.SUB_FORM,
+        name: 'subscriptions_section',
+        id: 'subscriptions_section',
+        condition: {
+          when: 'replication_type',
+          is: 'global',
+        },
+        fields: [{
+          component: 'subscriptions-table',
+          name: 'subscriptions-table',
+          id: 'subscriptions-table',
+          rows: createRows(),
+          onCellClick: (selectedRow, cellType, formOptions) => {
+            switch (selectedRow.callbackAction) {
+              case 'editSubscription':
+                editSubscription(selectedRow);
+                break;
+              case 'deleteSubscription':
+                deleteSubscription(selectedRow, cellType, formOptions);
+                break;
+              default:
+                break;
+            }
+          },
+          addButtonLabel: __('Add Subscription'),
+          onButtonClick: (formOptions) => {
+            formOptions.change('dbname', '');
+            formOptions.change('host', '');
+            formOptions.change('user', '');
+            formOptions.change('password', '');
+            formOptions.change('port', '');
+            setState((state) => ({
+              ...state,
+              initialValues: {
+                replication_type: state.initialValues.replication_type,
+                subscriptions: state.initialValues.subscriptions,
+              },
+              form: {
+                type: 'subscription',
+                className: 'subscription-form',
+                action: 'add',
+              },
+            }));
+          },
+        }],
+      },
+    ],
+  });
+
+  const subscriptionFields = ({
+    fields: [
+      {
+        component: 'validate-subscription',
+        name: 'validate-sub',
+        id: 'validate-sub',
+        isRequired: true,
+        validate: [{ type: validatorTypes.REQUIRED }],
+        skipSubmit: true,
+        fields: [
+          {
+            component: componentTypes.TEXT_FIELD,
+            name: 'dbname',
+            id: 'dbname',
+            label: __('Database'),
+            isRequired: true,
+            validate: [{ type: validatorTypes.REQUIRED }],
+          },
+          {
+            component: componentTypes.TEXT_FIELD,
+            name: 'host',
+            id: 'host',
+            label: __('Host'),
+            isRequired: true,
+            validate: [{ type: validatorTypes.REQUIRED }],
+          },
+          {
+            component: componentTypes.TEXT_FIELD,
+            name: 'user',
+            id: 'user',
+            label: __('Username'),
+            isRequired: true,
+            validate: [{ type: validatorTypes.REQUIRED }],
+          },
+          {
+            component: componentTypes.TEXT_FIELD,
+            name: 'password',
+            id: 'password',
+            label: __('Password'),
+            type: 'password',
+            isReadOnly: form.action === 'edit',
+            isRequired: true,
+            validate: [{ type: validatorTypes.REQUIRED }],
+          },
+          {
+            component: componentTypes.TEXT_FIELD,
+            name: 'port',
+            id: 'port',
+            label: __('Port'),
+            isRequired: true,
+            validate: [{ type: validatorTypes.REQUIRED }],
+          },
+        ],
+      },
+    ],
+  });
+
+  return form.type === 'subscription' ? subscriptionFields : replicationFields;
+};
+
+export default createSchema;