From dd435168e674af2d21fe2667bfebbf3d53abb0da Mon Sep 17 00:00:00 2001
From: Amogh-Bharadwaj <amogh@peerdb.io>
Date: Thu, 25 Jan 2024 20:57:28 +0530
Subject: [PATCH] refactor mirror edit route, add edit page

---
 ui/app/mirrors/[mirrorId]/edit/page.tsx       | 34 +++++++++++++++++--
 ui/app/mirrors/[mirrorId]/page.tsx            |  6 +++-
 .../status/qrep/[mirrorId]/qrepGraph.tsx      |  2 +-
 ui/app/peers/[peerName]/helpers.tsx           |  2 +-
 ui/components/EditButton.tsx                  | 28 +++++++++++++++
 ui/components/MirrorLink.tsx                  |  2 +-
 6 files changed, 68 insertions(+), 6 deletions(-)
 create mode 100644 ui/components/EditButton.tsx

diff --git a/ui/app/mirrors/[mirrorId]/edit/page.tsx b/ui/app/mirrors/[mirrorId]/edit/page.tsx
index 44597648b1..fb97a02740 100644
--- a/ui/app/mirrors/[mirrorId]/edit/page.tsx
+++ b/ui/app/mirrors/[mirrorId]/edit/page.tsx
@@ -1,9 +1,39 @@
+// BOILERPLATE
 'use client';
 
-const EditMirror = () => {
+import { TableMapRow } from '@/app/dto/MirrorsDTO';
+import { DBType } from '@/grpc_generated/peers';
+import { Button } from '@/lib/Button';
+import { Label } from '@/lib/Label';
+import { useState } from 'react';
+import TableMapping from '../../create/cdc/tablemapping';
+
+type EditMirrorProps = {
+  params: { mirrorId: string };
+};
+const EditMirror = ({ params: { mirrorId } }: EditMirrorProps) => {
+  const [rows, setRows] = useState<TableMapRow[]>([]);
+  // todo: use mirrorId to query flows table/temporal and get config
+  // you will have to decode the config to get the table mapping. see: /mirrors/page.tsx
   return (
     <div>
-      <h1>Edit Mirror</h1>
+      <Label variant='title3'>Edit {mirrorId}</Label>
+
+      {/* todo: add a prop to this component called alreadySelectedTables and pass the table mapping.
+        Then, at the place where we're blurring out tables on the condition of
+        pkey/replica identity (schemabox.tsx), extend the condition to include the case where table is in alreadySelectedTables */}
+      <TableMapping
+        sourcePeerName='postgres_local' // get this from config
+        peerType={DBType.SNOWFLAKE} // this is destination peer type. get it from config
+        rows={rows}
+        setRows={setRows}
+      />
+      <Button
+        style={{ marginTop: '1rem', width: '8%', height: '2.5rem' }}
+        variant='normalSolid'
+      >
+        Update tables
+      </Button>
     </div>
   );
 };
diff --git a/ui/app/mirrors/[mirrorId]/page.tsx b/ui/app/mirrors/[mirrorId]/page.tsx
index c4c8f75cd8..28a2221d6b 100644
--- a/ui/app/mirrors/[mirrorId]/page.tsx
+++ b/ui/app/mirrors/[mirrorId]/page.tsx
@@ -1,5 +1,6 @@
 import { SyncStatusRow } from '@/app/dto/MirrorsDTO';
 import prisma from '@/app/utils/prisma';
+import EditButton from '@/components/EditButton';
 import { MirrorStatusResponse } from '@/grpc_generated/route';
 import { Header } from '@/lib/Header';
 import { LayoutMain } from '@/lib/Layout';
@@ -84,7 +85,10 @@ export default async function EditMirror({
 
   return (
     <LayoutMain alignSelf='flex-start' justifySelf='flex-start' width='full'>
-      <Header variant='title2'>{mirrorId}</Header>
+      <div style={{ display: 'flex', alignItems: 'center' }}>
+        <Header variant='title2'>{mirrorId}</Header>
+        <EditButton toLink={`/mirrors/${mirrorId}/edit`} />
+      </div>
       <CDCMirror
         rows={rows}
         createdAt={mirrorInfo?.created_at}
diff --git a/ui/app/mirrors/status/qrep/[mirrorId]/qrepGraph.tsx b/ui/app/mirrors/status/qrep/[mirrorId]/qrepGraph.tsx
index 510c473db7..b25e8db232 100644
--- a/ui/app/mirrors/status/qrep/[mirrorId]/qrepGraph.tsx
+++ b/ui/app/mirrors/status/qrep/[mirrorId]/qrepGraph.tsx
@@ -4,7 +4,7 @@ import { Label } from '@/lib/Label';
 import { BarChart } from '@tremor/react';
 import { useEffect, useState } from 'react';
 import ReactSelect from 'react-select';
-import aggregateCountsByInterval from '../../../edit/[mirrorId]/aggregatedCountsByInterval';
+import aggregateCountsByInterval from '../../../[mirrorId]/aggregatedCountsByInterval';
 
 type QrepStatusRow = {
   partitionID: string;
diff --git a/ui/app/peers/[peerName]/helpers.tsx b/ui/app/peers/[peerName]/helpers.tsx
index 503455af7a..ed125ec1a6 100644
--- a/ui/app/peers/[peerName]/helpers.tsx
+++ b/ui/app/peers/[peerName]/helpers.tsx
@@ -19,7 +19,7 @@ export const SlotNameDisplay = ({ slotName }: { slotName: string }) => {
         fontSize: 13,
         fontWeight: 'bold',
       }}
-      href={`/mirrors/edit/${flowName}`}
+      href={`/mirrors/${flowName}`}
     >
       {slotName}
     </Label>
diff --git a/ui/components/EditButton.tsx b/ui/components/EditButton.tsx
new file mode 100644
index 0000000000..accce73873
--- /dev/null
+++ b/ui/components/EditButton.tsx
@@ -0,0 +1,28 @@
+'use client';
+import { Icon } from '@/lib/Icon';
+import { Label } from '@/lib/Label';
+import { useRouter } from 'next/navigation';
+
+const EditButton = ({ toLink }: { toLink: string }) => {
+  const router = useRouter();
+  return (
+    <button
+      className='IconButton'
+      onClick={() => router.push(toLink)}
+      aria-label='sort up'
+      style={{
+        display: 'flex',
+        marginLeft: '1rem',
+        alignItems: 'center',
+        backgroundColor: 'whitesmoke',
+        border: '1px solid rgba(0,0,0,0.1)',
+        borderRadius: '0.5rem',
+      }}
+    >
+      <Label>Edit Mirror</Label>
+      <Icon name='edit' />
+    </button>
+  );
+};
+
+export default EditButton;
diff --git a/ui/components/MirrorLink.tsx b/ui/components/MirrorLink.tsx
index 53cc6f14a4..af73a083fa 100644
--- a/ui/components/MirrorLink.tsx
+++ b/ui/components/MirrorLink.tsx
@@ -11,7 +11,7 @@ const MirrorLink = ({ flowName }: { flowName: string }) => {
       {isLoading ? (
         <ProgressCircle variant='determinate_progress_circle' />
       ) : (
-        <Link href={`/mirrors/edit/${flowName}`}>
+        <Link href={`/mirrors/${flowName}`}>
           <Label>
             <div className='cursor-pointer underline'>{flowName}</div>
           </Label>