From 46208f18ee2f8056080ae38ec663de956b36d835 Mon Sep 17 00:00:00 2001
From: Amogh Bharadwaj <amogh@peerdb.io>
Date: Thu, 14 Dec 2023 19:45:17 +0530
Subject: [PATCH] UI: Advanced section with pull batch size (#822)

Adds an advanced section which currently has pull batch size as a field.
In future this section will have more fields
<img width="904" alt="Screenshot 2023-12-14 at 7 09 05 PM"
src="https://github.com/PeerDB-io/peerdb/assets/65964360/99725db8-cf57-4e76-bf76-579061fe8c34">
---
 ui/app/mirrors/create/cdc/cdc.tsx       | 116 ++++++++++--------------
 ui/app/mirrors/create/cdc/fields.tsx    |  69 ++++++++++++++
 ui/app/mirrors/create/helpers/cdc.ts    |  12 +++
 ui/app/mirrors/create/helpers/common.ts |   3 +-
 4 files changed, 131 insertions(+), 69 deletions(-)
 create mode 100644 ui/app/mirrors/create/cdc/fields.tsx

diff --git a/ui/app/mirrors/create/cdc/cdc.tsx b/ui/app/mirrors/create/cdc/cdc.tsx
index 94b786c5c8..65f2158ee6 100644
--- a/ui/app/mirrors/create/cdc/cdc.tsx
+++ b/ui/app/mirrors/create/cdc/cdc.tsx
@@ -1,15 +1,12 @@
 'use client';
-import { RequiredIndicator } from '@/components/RequiredIndicator';
 import { QRepSyncMode } from '@/grpc_generated/flow';
 import { DBType } from '@/grpc_generated/peers';
-import { Label } from '@/lib/Label';
-import { RowWithSwitch, RowWithTextField } from '@/lib/Layout';
-import { Switch } from '@/lib/Switch';
-import { TextField } from '@/lib/TextField';
-import { Dispatch, SetStateAction } from 'react';
-import { InfoPopover } from '../../../../components/InfoPopover';
+import { Button } from '@/lib/Button';
+import { Icon } from '@/lib/Icon';
+import { Dispatch, SetStateAction, useMemo, useState } from 'react';
 import { CDCConfig, MirrorSetter, TableMapRow } from '../../../dto/MirrorsDTO';
 import { MirrorSetting } from '../helpers/common';
+import CDCFields from './fields';
 import TableMapping from './tablemapping';
 
 interface MirrorConfigProps {
@@ -40,11 +37,20 @@ export default function CDCConfigForm({
   rows,
   setRows,
 }: MirrorConfigProps) {
+  const [show, setShow] = useState(false);
   const handleChange = (val: string | boolean, setting: MirrorSetting) => {
     let stateVal: string | boolean | QRepSyncMode = val;
     setting.stateHandler(stateVal, setter);
   };
 
+  const normalSettings = useMemo(() => {
+    return settings.filter((setting) => setting.advanced != true);
+  }, [settings]);
+
+  const advancedSettings = useMemo(() => {
+    return settings.filter((setting) => setting.advanced == true);
+  }, [settings]);
+
   const paramDisplayCondition = (setting: MirrorSetting) => {
     const label = setting.label.toLowerCase();
     if (
@@ -66,72 +72,46 @@ export default function CDCConfigForm({
           setRows={setRows}
           peerType={mirrorConfig.destination?.type}
         />
-        {settings.map((setting, id) => {
+        {normalSettings.map((setting, id) => {
           return (
-            paramDisplayCondition(setting) &&
-            (setting.type === 'switch' ? (
-              <RowWithSwitch
-                key={id}
-                label={<Label>{setting.label}</Label>}
-                action={
-                  <div
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                    }}
-                  >
-                    <Switch
-                      onCheckedChange={(state: boolean) =>
-                        handleChange(state, setting)
-                      }
-                    />
-                    {setting.tips && (
-                      <InfoPopover
-                        tips={setting.tips}
-                        link={setting.helpfulLink}
-                      />
-                    )}
-                  </div>
-                }
-              />
-            ) : (
-              <RowWithTextField
+            paramDisplayCondition(setting) && (
+              <CDCFields
                 key={id}
-                label={
-                  <Label>
-                    {setting.label}
-                    {RequiredIndicator(setting.required)}
-                  </Label>
-                }
-                action={
-                  <div
-                    style={{
-                      display: 'flex',
-                      flexDirection: 'row',
-                      alignItems: 'center',
-                    }}
-                  >
-                    <TextField
-                      variant='simple'
-                      type={setting.type}
-                      defaultValue={setting.default}
-                      onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                        handleChange(e.target.value, setting)
-                      }
-                    />
-                    {setting.tips && (
-                      <InfoPopover
-                        tips={setting.tips}
-                        link={setting.helpfulLink}
-                      />
-                    )}
-                  </div>
-                }
+                handleChange={handleChange}
+                setting={setting}
               />
-            ))
+            )
           );
         })}
+        <Button
+          className='IconButton'
+          aria-label='collapse'
+          onClick={() => {
+            setShow((prev) => !prev);
+          }}
+          style={{
+            width: '13em',
+            height: '2.5em',
+            marginTop: '2rem',
+            marginBottom: '1rem',
+          }}
+        >
+          <div style={{ display: 'flex', alignItems: 'center' }}>
+            <h3 style={{ marginRight: '10px' }}>Advanced Settings</h3>
+            <Icon name={`keyboard_double_arrow_${show ? 'up' : 'down'}`} />
+          </div>
+        </Button>
+
+        {show &&
+          advancedSettings.map((setting, id) => {
+            return (
+              <CDCFields
+                key={id}
+                handleChange={handleChange}
+                setting={setting}
+              />
+            );
+          })}
       </>
     );
 }
diff --git a/ui/app/mirrors/create/cdc/fields.tsx b/ui/app/mirrors/create/cdc/fields.tsx
new file mode 100644
index 0000000000..a401c3be24
--- /dev/null
+++ b/ui/app/mirrors/create/cdc/fields.tsx
@@ -0,0 +1,69 @@
+'use client';
+import { RequiredIndicator } from '@/components/RequiredIndicator';
+import { Label } from '@/lib/Label';
+import { RowWithSwitch, RowWithTextField } from '@/lib/Layout';
+import { Switch } from '@/lib/Switch';
+import { TextField } from '@/lib/TextField';
+import { InfoPopover } from '../../../../components/InfoPopover';
+import { MirrorSetting } from '../helpers/common';
+
+interface FieldProps {
+  setting: MirrorSetting;
+  handleChange: (val: string | boolean, setting: MirrorSetting) => void;
+}
+
+const CDCFields = ({ setting, handleChange }: FieldProps) => {
+  return setting.type === 'switch' ? (
+    <RowWithSwitch
+      label={<Label>{setting.label}</Label>}
+      action={
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
+        >
+          <Switch
+            onCheckedChange={(state: boolean) => handleChange(state, setting)}
+          />
+          {setting.tips && (
+            <InfoPopover tips={setting.tips} link={setting.helpfulLink} />
+          )}
+        </div>
+      }
+    />
+  ) : (
+    <RowWithTextField
+      label={
+        <Label>
+          {setting.label}
+          {RequiredIndicator(setting.required)}
+        </Label>
+      }
+      action={
+        <div
+          style={{
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+          }}
+        >
+          <TextField
+            variant='simple'
+            type={setting.type}
+            defaultValue={setting.default}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+              handleChange(e.target.value, setting)
+            }
+          />
+          {setting.tips && (
+            <InfoPopover tips={setting.tips} link={setting.helpfulLink} />
+          )}
+        </div>
+      }
+    />
+  );
+};
+
+export default CDCFields;
diff --git a/ui/app/mirrors/create/helpers/cdc.ts b/ui/app/mirrors/create/helpers/cdc.ts
index 81921fb247..d24e9bd9f4 100644
--- a/ui/app/mirrors/create/helpers/cdc.ts
+++ b/ui/app/mirrors/create/helpers/cdc.ts
@@ -11,6 +11,18 @@ export const cdcSettings: MirrorSetting[] = [
     tips: 'Specify if you want initial load to happen for your tables.',
     type: 'switch',
   },
+  {
+    label: 'Pull Batch Size',
+    stateHandler: (value, setter) =>
+      setter((curr: CDCConfig) => ({
+        ...curr,
+        maxBatchSize: (value as boolean) || false,
+      })),
+    tips: 'The number of rows PeerDB will pull from source at a time. If left empty, the default value is 100,000 rows.',
+    type: 'number',
+    default: '100000',
+    advanced: true,
+  },
   {
     label: 'Publication Name',
     stateHandler: (value, setter) =>
diff --git a/ui/app/mirrors/create/helpers/common.ts b/ui/app/mirrors/create/helpers/common.ts
index 02f548eeba..063588b2c1 100644
--- a/ui/app/mirrors/create/helpers/common.ts
+++ b/ui/app/mirrors/create/helpers/common.ts
@@ -16,6 +16,7 @@ export interface MirrorSetting {
   tips?: string;
   helpfulLink?: string;
   default?: string | number;
+  advanced?: boolean; // whether it should come under an 'Advanced' section
 }
 
 export const blankCDCSetting: FlowConnectionConfigs = {
@@ -27,7 +28,7 @@ export const blankCDCSetting: FlowConnectionConfigs = {
   srcTableIdNameMapping: {},
   tableNameSchemaMapping: {},
   metadataPeer: undefined,
-  maxBatchSize: 0,
+  maxBatchSize: 100000,
   doInitialCopy: false,
   publicationName: '',
   snapshotNumRowsPerPartition: 500000,