refactor mirror edit route, add edit page

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>
   );
 };

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}

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;

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>

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;

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>