diff --git a/app/javascript/components/miq-data-table/index.jsx b/app/javascript/components/miq-data-table/index.jsx
index cb2c3af58bd..4ea239b9977 100644
--- a/app/javascript/components/miq-data-table/index.jsx
+++ b/app/javascript/components/miq-data-table/index.jsx
@@ -89,7 +89,7 @@ const MiqDataTable = ({
/** Function to render the header cells. */
const renderHeaders = (getHeaderProps) => (headers.map((header) => {
const { sortHeader, sortDirection } = headerSortingData(header);
- let isSortable = true;
+ let isSortable = sortable;
if (header.header.split('_')[0] === DefaultKey) {
isSortable = false;
}
diff --git a/app/javascript/components/settings-replication-form/helper.js b/app/javascript/components/settings-replication-form/helper.js
new file mode 100644
index 00000000000..2e86e9ebf06
--- /dev/null
+++ b/app/javascript/components/settings-replication-form/helper.js
@@ -0,0 +1,34 @@
+// Creates the rows for the 'subscriptions-table' component
+export const createRows = (subscriptions) => {
+ 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;
+};
\ No newline at end of file
diff --git a/app/javascript/components/settings-replication-form/index.jsx b/app/javascript/components/settings-replication-form/index.jsx
new file mode 100644
index 00000000000..ede9a2834bc
--- /dev/null
+++ b/app/javascript/components/settings-replication-form/index.jsx
@@ -0,0 +1,259 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+import MiqFormRenderer from '@@ddf';
+import { Modal } from 'carbon-components-react';
+// import { Button } from 'carbon-components-react';
+// import MiqDataTable from '../miq-data-table';
+import createSchema from './settings-replication-form.schema';
+import createSubscriptionSchema from './modal-form.schema';
+import { SubscriptionsTableComponent } from './subscriptions-table';
+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');
+
+ const [isModalOpen, setModalOpen] = useState(false);
+ const [modalAction, setModalAction] = useState('');
+ const [currentSubscription, setCurrentSubscription] = useState(null);
+
+ const handleModalOpen = (action, subscription = null) => {
+ setModalAction(action);
+ setCurrentSubscription(subscription);
+ setModalOpen(true);
+ };
+
+ const handleModalClose = () => {
+ setModalOpen(false);
+ setCurrentSubscription(null);
+ };
+
+ 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') {
+ if (form.action === 'add') {
+ 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 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
+
+ /* 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 onReset = () => {
+ setEnforced(() => ({ ...initialValues.enforced }));
+ setValues(() => ({ ...initialValues.values }));
+ setDisabled(true);
+ setChanged(true);
+ setInvalid(() => ({ ...initialValues.invalid }));
+ // eslint-disable-next-line no-return-assign
+ Array.from(document.querySelectorAll('.quota-table-input')).forEach((input, index) => input.value = initialValues.values[index]);
+ add_flash(__('All changes have been reset'), 'warn');
+ }; */
+
+ 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 && (
+
+
+
+ onSubmit(currentSubscription || {})}
+ >
+ {/* Render the MiqFormRenderer inside the modal */}
+
+
+
+
+ );
+
+ /* if (form.type === 'subscription') {
+ } else {
+ return !isLoading && (
+
+
+
+
+
+
+ onCellClick(selectedRow, cellType, formOptions)}
+ />
+
+
+
+
+
+
+
+
+
+
+
+
+ onCellClick(selectedRow, cellType, formOptions)}
+ />
+
+