From 61a73d95c16c56e8d9cac421e491e0d1768a92b5 Mon Sep 17 00:00:00 2001
From: Amogh Bharadwaj <amogh@peerdb.io>
Date: Thu, 21 Mar 2024 03:08:42 +0530
Subject: [PATCH] UI: remove pub load check (#1510)

Currently configuration form for create CDC is gated by publications
being loaded, but there's no user facing info that this wait is
happening.
Better to just have the loading be indicated by the publication dropdown
and render the form no matter what
---
 ui/app/mirrors/create/cdc/cdc.tsx    | 26 ++++++++++----------------
 ui/app/mirrors/create/cdc/fields.tsx |  9 ++++++++-
 2 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/ui/app/mirrors/create/cdc/cdc.tsx b/ui/app/mirrors/create/cdc/cdc.tsx
index cb9ea4a381..3c194f0a8c 100644
--- a/ui/app/mirrors/create/cdc/cdc.tsx
+++ b/ui/app/mirrors/create/cdc/cdc.tsx
@@ -38,6 +38,7 @@ export default function CDCConfigForm({
   setRows,
 }: MirrorConfigProps) {
   const [publications, setPublications] = useState<string[]>();
+  const [pubLoading, setPubLoading] = useState(true);
   const [show, setShow] = useState(false);
   const handleChange = (val: string | boolean, setting: MirrorSetting) => {
     let stateVal: string | boolean = val;
@@ -66,26 +67,15 @@ export default function CDCConfigForm({
     return true;
   };
 
-  const optionsForField = (setting: MirrorSetting) => {
-    switch (setting.label) {
-      case 'Publication Name':
-        return publications;
-      default:
-        return [];
-    }
-  };
-
   useEffect(() => {
+    setPubLoading(true);
     fetchPublications(mirrorConfig.source?.name || '').then((pubs) => {
       setPublications(pubs);
+      setPubLoading(false);
     });
   }, [mirrorConfig.source?.name]);
 
-  if (
-    mirrorConfig.source != undefined &&
-    mirrorConfig.destination != undefined &&
-    publications != undefined
-  )
+  if (mirrorConfig.source != undefined && mirrorConfig.destination != undefined)
     return (
       <>
         {normalSettings.map((setting, id) => {
@@ -95,7 +85,12 @@ export default function CDCConfigForm({
                 key={id}
                 handleChange={handleChange}
                 setting={setting}
-                options={optionsForField(setting)}
+                options={
+                  setting.label === 'Publication Name'
+                    ? publications
+                    : undefined
+                }
+                publicationsLoading={pubLoading}
               />
             )
           );
@@ -126,7 +121,6 @@ export default function CDCConfigForm({
                 key={setting.label}
                 handleChange={handleChange}
                 setting={setting}
-                options={optionsForField(setting)}
               />
             );
           })}
diff --git a/ui/app/mirrors/create/cdc/fields.tsx b/ui/app/mirrors/create/cdc/fields.tsx
index 8bf802ffa1..7d8842e89a 100644
--- a/ui/app/mirrors/create/cdc/fields.tsx
+++ b/ui/app/mirrors/create/cdc/fields.tsx
@@ -13,9 +13,15 @@ interface FieldProps {
   setting: MirrorSetting;
   handleChange: (val: string | boolean, setting: MirrorSetting) => void;
   options?: string[];
+  publicationsLoading?: boolean;
 }
 
-const CDCField = ({ setting, handleChange, options }: FieldProps) => {
+const CDCField = ({
+  setting,
+  handleChange,
+  options,
+  publicationsLoading,
+}: FieldProps) => {
   return setting.type === 'switch' ? (
     <RowWithSwitch
       label={
@@ -72,6 +78,7 @@ const CDCField = ({ setting, handleChange, options }: FieldProps) => {
               getOptionLabel={(option) => option.label}
               getOptionValue={(option) => option.option}
               theme={SelectTheme}
+              isLoading={publicationsLoading}
             />
           </div>
           {setting.tips && (