From 4ea1647d569330c2f83c91175ac468408b348ac8 Mon Sep 17 00:00:00 2001
From: Amogh Bharadwaj <amogh@peerdb.io>
Date: Thu, 9 Nov 2023 10:31:34 -0500
Subject: [PATCH] Minor UI Fixes (#630)

- Sets whitespace to nowrap  for create peer/mirror buttons
- Prevents drop modals from disappearing when clicking outside
- For multi-mirror shows a single flow now
- Sets snapshot parallel tables default to 4
---
 ui/app/mirrors/create/helpers/cdc.ts |  6 +++---
 ui/app/mirrors/page.tsx              |  9 ++++++++-
 ui/app/peers/page.tsx                | 13 +++++++++++--
 ui/lib/Dialog/Dialog.tsx             |  7 ++++++-
 4 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/ui/app/mirrors/create/helpers/cdc.ts b/ui/app/mirrors/create/helpers/cdc.ts
index af79f83c52..1cfcac49d6 100644
--- a/ui/app/mirrors/create/helpers/cdc.ts
+++ b/ui/app/mirrors/create/helpers/cdc.ts
@@ -57,10 +57,10 @@ export const cdcSettings: MirrorSetting[] = [
     stateHandler: (value, setter) =>
       setter((curr: CDCConfig) => ({
         ...curr,
-        snapshotNumTablesInParallel: parseInt(value as string, 10) || 1,
+        snapshotNumTablesInParallel: parseInt(value as string, 10) || 4,
       })),
-    tips: 'Specify the number of tables to sync perform initial load for, in parallel. The default value is 1.',
-    default: '1',
+    tips: 'Specify the number of tables to sync perform initial load for, in parallel. The default value is 4.',
+    default: '4',
     type: 'number',
   },
   {
diff --git a/ui/app/mirrors/page.tsx b/ui/app/mirrors/page.tsx
index 3bb5c66db6..0f380bd1e4 100644
--- a/ui/app/mirrors/page.tsx
+++ b/ui/app/mirrors/page.tsx
@@ -21,6 +21,7 @@ const stringifyConfig = (flowArray: any[]) => {
 
 export default async function Mirrors() {
   let mirrors = await prisma.flows.findMany({
+    distinct: 'name',
     include: {
       sourcePeer: true,
       destinationPeer: true,
@@ -78,7 +79,13 @@ export default async function Mirrors() {
               href={'/mirrors/create'}
               variant='normalSolid'
             >
-              <div style={{ display: 'flex', alignItems: 'center' }}>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  whiteSpace: 'nowrap',
+                }}
+              >
                 <Icon name='add' /> <Label>New mirror</Label>
               </div>
             </Button>
diff --git a/ui/app/peers/page.tsx b/ui/app/peers/page.tsx
index 6ae7899e15..d3e7672911 100644
--- a/ui/app/peers/page.tsx
+++ b/ui/app/peers/page.tsx
@@ -34,8 +34,17 @@ export default async function Peers() {
               href={'/peers/create'}
               variant='normalSolid'
             >
-              <div style={{ display: 'flex', alignItems: 'center' }}>
-                <Icon name='add' /> <Label>New peer</Label>
+              <div
+                style={{
+                  display: 'flex',
+                  alignItems: 'center',
+                  whiteSpace: 'nowrap',
+                }}
+              >
+                <Icon name='add' />
+                <Label style={{ marginLeft: '0.5rem', fontSize: 15 }}>
+                  New peer
+                </Label>
               </div>
             </Button>
           }
diff --git a/ui/lib/Dialog/Dialog.tsx b/ui/lib/Dialog/Dialog.tsx
index 1b99237c8b..78c5b14b85 100644
--- a/ui/lib/Dialog/Dialog.tsx
+++ b/ui/lib/Dialog/Dialog.tsx
@@ -22,7 +22,12 @@ export function Dialog({
     <RadixDialog.Root {...rootProps}>
       <RadixDialog.Trigger asChild>{TriggerButton}</RadixDialog.Trigger>
       <RadixDialog.Portal>
-        <DialogContent size={size}>{children}</DialogContent>
+        <DialogContent
+          onPointerDownOutside={(e) => e.preventDefault()}
+          size={size}
+        >
+          {children}
+        </DialogContent>
       </RadixDialog.Portal>
     </RadixDialog.Root>
   );