UI: Sort tables, spinner for button (#988)

Spinner for create mirror button and sorts tables in schema alphabetically
PeerDB-io · Jan 4, 2024 · 2e04bb3 · 2e04bb3
1 parent d155028
commit 2e04bb3
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 7 deletions.
diff --git a/flow/cmd/peer_data.go b/flow/cmd/peer_data.go
@@ -168,7 +168,6 @@ func (h *FlowRequestHandler) GetColumns(
 				ON
 					kcu.constraint_name = tc.constraint_name
 					AND kcu.constraint_schema = tc.constraint_schema
-					AND kcu.constraint_name = tc.constraint_name
 				WHERE
 					tc.constraint_type = 'PRIMARY KEY'
 					AND kcu.table_schema = $1

diff --git a/ui/app/mirrors/create/cdc/schemabox.tsx b/ui/app/mirrors/create/cdc/schemabox.tsx
@@ -48,11 +48,13 @@ const SchemaBox = ({
 
   const searchedTables = useMemo(() => {
     const tableQueryLower = tableQuery.toLowerCase();
-    return rows.filter(
-      (row) =>
-        row.schema === schema &&
-        row.source.toLowerCase().includes(tableQueryLower)
-    );
+    return rows
+      .filter(
+        (row) =>
+          row.schema === schema &&
+          row.source.toLowerCase().includes(tableQueryLower)
+      )
+      .sort((a, b) => a.source.localeCompare(b.source));
   }, [schema, rows, tableQuery]);
 
   const schemaIsExpanded = useCallback(

diff --git a/ui/app/mirrors/create/page.tsx b/ui/app/mirrors/create/page.tsx
@@ -8,6 +8,7 @@ import { Icon } from '@/lib/Icon';
 import { Label } from '@/lib/Label';
 import { RowWithSelect, RowWithTextField } from '@/lib/Layout';
 import { Panel } from '@/lib/Panel';
+import { ProgressCircle } from '@/lib/ProgressCircle';
 import { TextField } from '@/lib/TextField';
 import { Divider } from '@tremor/react';
 import Image from 'next/image';
@@ -219,6 +220,7 @@ export default function CreateMirrors() {
               fontWeight: 'bold',
             }}
             variant='normalSolid'
+            disabled={loading}
             onClick={() =>
               mirrorType === 'CDC'
                 ? handleCreateCDC(
@@ -240,7 +242,13 @@ export default function CreateMirrors() {
                   )
             }
           >
-            <Icon name='add' /> Create Mirror
+            {loading ? (
+              <ProgressCircle variant='determinate_progress_circle' />
+            ) : (
+              <>
+                <Icon name='add' /> Create Mirror
+              </>
+            )}
           </Button>
         )}
       </Panel>