diff --git a/app/javascript/components/provider-form/validate-provider-credentials.jsx b/app/javascript/components/provider-form/validate-provider-credentials.jsx
index 6f56def5408b..e7c83ec3651d 100644
--- a/app/javascript/components/provider-form/validate-provider-credentials.jsx
+++ b/app/javascript/components/provider-form/validate-provider-credentials.jsx
@@ -13,7 +13,6 @@ const ValidateProviderCredentials = ({ ...props }) => {
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 }) => {
diff --git a/app/javascript/components/settings-replication-form/helper.js b/app/javascript/components/settings-replication-form/helper.js
index 36a1cae728c2..791da04621c0 100644
--- a/app/javascript/components/settings-replication-form/helper.js
+++ b/app/javascript/components/settings-replication-form/helper.js
@@ -1,43 +1,34 @@
-import React from 'react';
-import { useFieldApi, useFormApi } from '@@ddf';
-import { Button } from 'carbon-components-react';
-import MiqDataTable from '../miq-data-table';
+// Creates the rows for the 'subscriptions-table' component
+export const createRows = (subscriptions) => {
+ const rows = [];
-export const SubscriptionsTableComponent = (props) => {
- const {
- rows, onCellClick, addButtonLabel, onButtonClick,
- } = useFieldApi(props);
- const formOptions = useFormApi();
+ 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 (
-
-
-
- onCellClick(selectedRow, cellType, formOptions)}
- />
-
- );
+ return rows;
};
diff --git a/app/javascript/components/settings-replication-form/index.jsx b/app/javascript/components/settings-replication-form/index.jsx
index 89d0eb135691..f46190a4bef4 100644
--- a/app/javascript/components/settings-replication-form/index.jsx
+++ b/app/javascript/components/settings-replication-form/index.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import MiqFormRenderer from '@@ddf';
import createSchema from './settings-replication-form.schema';
-import { SubscriptionsTableComponent } from './helper';
+import { SubscriptionsTableComponent } from './subscriptions-table';
import ValidateSubscription from './validate-subscription';
import miqRedirectBack from '../../helpers/miq-redirect-back';
import mapper from '../../forms/mappers/componentMapper';
@@ -51,29 +51,58 @@ const SettingsReplicationForm = ({ 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,
- });
+ if (form.action === 'add') {
+ const newSubscriptions = [];
- 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',
- },
- }));
+ 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 if (form.action === 'edit') {
+ let modifiedSubscriptions = [];
+ modifiedSubscriptions = modifiedSubscriptions.concat(subscriptions);
+
+ const editedSub = {
+ dbname: values.dbname,
+ host: values.host,
+ password: values.password,
+ port: values.port,
+ user: values.user,
+ };
+
+ modifiedSubscriptions[initialValues.subId] = editedSub;
+
+ setState((state) => ({
+ ...state,
+ initialValues: {
+ replication_type: state.initialValues.replication_type,
+ subscriptions: state.initialValues.subscriptions,
+ },
+ subscriptions: modifiedSubscriptions,
+ form: {
+ type: 'replication',
+ className: 'replication_form',
+ action: 'edit',
+ },
+ }));
+ }
} else {
// Redirect to Settings -> Tasks
@@ -111,6 +140,7 @@ const SettingsReplicationForm = ({ pglogicalReplicationFormId }) => {
onCancel={onCancel}
canReset
buttonsLabels={{ submitLabel }}
+ clearOnUnmount={form.type !== 'replication'}
/>
);
};
diff --git a/app/javascript/components/settings-replication-form/settings-replication-form.schema.js b/app/javascript/components/settings-replication-form/settings-replication-form.schema.js
index 8c5491a0963d..e2cc5deacac3 100644
--- a/app/javascript/components/settings-replication-form/settings-replication-form.schema.js
+++ b/app/javascript/components/settings-replication-form/settings-replication-form.schema.js
@@ -1,42 +1,8 @@
/* eslint-disable camelcase */
import { componentTypes, validatorTypes } from '@@ddf';
+import { createRows } from './helper';
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);
@@ -44,6 +10,11 @@ const createSchema = (initialValues, subscriptions, form, replicationHelperText,
...state,
subscriptions,
}));
+
+ console.log(formOptions.getFieldState('subscriptions-table'));
+ console.log(formOptions.getRegisteredFields());
+ console.log(formOptions.getState());
+ console.log(formOptions.schema);
};
const editSubscription = (selectedRow) => {
@@ -56,6 +27,7 @@ const createSchema = (initialValues, subscriptions, form, replicationHelperText,
user: selectedRow.cells[2].value,
password: selectedRow.cells[3].value,
port: selectedRow.cells[4].value,
+ subId: selectedRow.id,
},
form: {
type: 'subscription',
@@ -118,7 +90,7 @@ const createSchema = (initialValues, subscriptions, form, replicationHelperText,
component: 'subscriptions-table',
name: 'subscriptions-table',
id: 'subscriptions-table',
- rows: createRows(),
+ rows: createRows(subscriptions),
onCellClick: (selectedRow, cellType, formOptions) => {
switch (selectedRow.callbackAction) {
case 'editSubscription':
@@ -133,11 +105,10 @@ const createSchema = (initialValues, subscriptions, form, replicationHelperText,
},
addButtonLabel: __('Add Subscription'),
onButtonClick: (formOptions) => {
- formOptions.change('dbname', '');
- formOptions.change('host', '');
- formOptions.change('user', '');
- formOptions.change('password', '');
- formOptions.change('port', '');
+ console.log(formOptions.getRegisteredFields());
+ console.log(formOptions.getState());
+ console.log(formOptions.schema);
+
setState((state) => ({
...state,
initialValues: {
@@ -150,6 +121,10 @@ const createSchema = (initialValues, subscriptions, form, replicationHelperText,
action: 'add',
},
}));
+
+ console.log(formOptions.getRegisteredFields());
+ console.log(formOptions.getState());
+ console.log(formOptions.schema);
},
}],
},
diff --git a/app/javascript/components/settings-replication-form/subscriptions-table.jsx b/app/javascript/components/settings-replication-form/subscriptions-table.jsx
new file mode 100644
index 000000000000..36a1cae728c2
--- /dev/null
+++ b/app/javascript/components/settings-replication-form/subscriptions-table.jsx
@@ -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 (
+
+
+
+ onCellClick(selectedRow, cellType, formOptions)}
+ />
+
+ );
+};