From a78716b04145db625bd7f4bbf3f27b0be4d00fad Mon Sep 17 00:00:00 2001
From: David Resende <david.resende@ibm.com>
Date: Wed, 10 Jan 2024 16:47:02 -0500
Subject: [PATCH] temp

---
 .../validate-provider-credentials.jsx         |  1 -
 .../settings-replication-form/helper.js       | 71 ++++++++---------
 .../settings-replication-form/index.jsx       | 76 +++++++++++++------
 .../settings-replication-form.schema.js       | 57 ++++----------
 .../subscriptions-table.jsx                   | 43 +++++++++++
 5 files changed, 143 insertions(+), 105 deletions(-)
 create mode 100644 app/javascript/components/settings-replication-form/subscriptions-table.jsx

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 (
-    <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>
-  );
+  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 (
+    <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>
+  );
+};