[ui] Minor bugfixes and improvements (#524)

ui/README.md

@@ -36,15 +36,3 @@ yarn storybook
 Open [http://localhost:6000](http://localhost:6000) with your browser to see the result.
 
 The stories and their corresponding components resides inside the `lib` folder.
-
-## Storybook Github pages
-
-The Storybook in this repositories Github pages at [Storybook](https://peerdb-io.github.io/peerdb-cloud-template).
-
-To deploy a new version of Storybook to Github pages run the script
-
-```bash
-yarn storybook:deploy
-```
-
-It will automatically run the storybook build, push the content to the branch `gh-pages` to automatically deply the newly built Storybook to Github pages.

ui/app/api/peers/route.ts

@@ -1,5 +1,8 @@
-import { UCreatePeerResponse, UValidatePeerResponse } from '@/app/dto/PeersDTO';
-import { PeerConfig } from '@/app/peers/create/configuration/types';
+import {
+  PeerConfig,
+  UCreatePeerResponse,
+  UValidatePeerResponse,
+} from '@/app/dto/PeersDTO';
 import prisma from '@/app/utils/prisma';
 import {
   DBType,

ui/app/dto/PeersDTO.ts

@@ -1,3 +1,5 @@
+import { PostgresConfig, SnowflakeConfig } from '@/grpc_generated/peers';
+
 export type UValidatePeerResponse = {
   valid: boolean;
   message: string;
@@ -7,3 +9,5 @@ export type UCreatePeerResponse = {
   created: boolean;
   message: string;
 };
+
+export type PeerConfig = PostgresConfig | SnowflakeConfig;

ui/app/layout.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from 'next';
 import { AppThemeProvider, StyledComponentsRegistry } from '../lib/AppTheme';
 
 export const metadata: Metadata = {
-  title: 'Peerdb Cloud Template',
+  title: 'Peerdb UI',
 };
 
 export default function RootLayout({

ui/app/mirrors/create/config.tsx

@@ -96,7 +96,7 @@ export default function MirrorConfig(props: MirrorConfigProps) {
                     onValueChange={(val) => handleChange(val, setting)}
                   >
                     {(setting.label.includes('Peer')
-                      ? props.peers?.map((peer) => peer.name)
+                      ? (props.peers ?? []).map((peer) => peer.name)
                       : ['avro', 'sql']
                     ).map((item, id) => {
                       return (

ui/app/mirrors/create/handlers.ts

@@ -1,5 +1,4 @@
 import { UCreateMirrorResponse } from '@/app/dto/MirrorsDTO';
-import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context';
 import { Dispatch, SetStateAction } from 'react';
 import { MirrorConfig, TableMapRow } from '../types';
 import { cdcSchema, tableMappingSchema } from './schema';
@@ -47,7 +46,7 @@ export const handleCreate = async (
     }>
   >,
   setLoading: Dispatch<SetStateAction<boolean>>,
-  router: AppRouterInstance
+  route: RouteCallback
 ) => {
   if (!flowJobName) {
     setMsg({ ok: false, msg: 'Mirror name is required' });
@@ -71,6 +70,6 @@ export const handleCreate = async (
     return;
   }
   setMsg({ ok: true, msg: 'CDC Mirror created successfully' });
-  router.push('/mirrors');
+  route();
   setLoading(false);
 };

ui/app/mirrors/create/page.tsx

@@ -35,13 +35,19 @@ export default function CreateMirrors() {
   const [rows, setRows] = useState<TableMapRow[]>([
     { source: '', destination: '' },
   ]);
+
   useEffect(() => {
     fetch('/api/peers')
       .then((res) => res.json())
       .then((res) => {
-        setPeers(res.peers);
+        setPeers(res);
       });
   }, []);
+
+  let listPeersPage = () => {
+    router.push('/peers');
+  };
+
   return (
     <LayoutMain width='xxLarge' alignSelf='center' justifySelf='center'>
       <Panel>
@@ -112,7 +118,7 @@ export default function CreateMirrors() {
                 config,
                 setFormMessage,
                 setLoading,
-                router
+                listPeersPage
               )
             }
           >

ui/app/mirrors/edit/[mirrorId]/cdc.tsx

@@ -112,7 +112,7 @@ type SnapshotStatusProps = {
 };
 const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => (
   <Table
-    title={<Label variant='headline'>Initial Snapshot</Label>}
+    title={<Label variant='headline'>Initial Copy</Label>}
     toolbar={{
       left: (
         <>

ui/app/mirrors/page.tsx

@@ -14,25 +14,6 @@ import prisma from '../utils/prisma';
 
 export const dynamic = 'force-dynamic';
 
-const Badges = [
-  <Badge variant='positive' key={1}>
-    <Icon name='play_circle' />
-    Active
-  </Badge>,
-  <Badge variant='warning' key={1}>
-    <Icon name='pause_circle' />
-    Paused
-  </Badge>,
-  <Badge variant='destructive' key={1}>
-    <Icon name='dangerous' />
-    Broken
-  </Badge>,
-  <Badge variant='normal' key={1}>
-    <Icon name='pending' />
-    Incomplete
-  </Badge>,
-];
-
 async function CDCFlows() {
   const flows = await prisma.flows.findMany({
     include: {
@@ -105,7 +86,10 @@ async function CDCFlows() {
             </Label>
           </TableCell>
           <TableCell>
-            <Label>Status TBD</Label>
+            <Badge variant='positive' key={1}>
+              <Icon name='play_circle' />
+              Active
+            </Badge>
           </TableCell>
         </TableRow>
       ))}

ui/app/peers/create/configuration/handlers.ts → ui/app/peers/create/[peerType]/handlers.ts

@@ -1,8 +1,10 @@
-import { UCreatePeerResponse, UValidatePeerResponse } from '@/app/dto/PeersDTO';
-import { AppRouterInstance } from 'next/dist/shared/lib/app-router-context';
+import {
+  PeerConfig,
+  UCreatePeerResponse,
+  UValidatePeerResponse,
+} from '@/app/dto/PeersDTO';
 import { Dispatch, SetStateAction } from 'react';
 import { pgSchema, sfSchema } from './schema';
-import { PeerConfig } from './types';
 
 // Frontend form validation
 const validateFields = (
@@ -71,7 +73,7 @@ export const handleCreate = async (
   config: PeerConfig,
   setMessage: Dispatch<SetStateAction<{ ok: boolean; msg: string }>>,
   setLoading: Dispatch<SetStateAction<boolean>>,
-  router: AppRouterInstance,
+  route: RouteCallback,
   name?: string
 ) => {
   let isValid = validateFields(type, config, setMessage, name);
@@ -92,6 +94,6 @@ export const handleCreate = async (
     return;
   }
   setMessage({ ok: true, msg: 'Peer created successfully' });
-  router.push('/peers');
+  route();
   setLoading(false);
 };

ui/app/peers/create/configuration/helpers/common.ts → ui/app/peers/create/[peerType]/helpers/common.ts

@@ -1,4 +1,5 @@
-import { PeerConfig, PeerSetter } from '../types';
+import { PeerConfig } from '@/app/dto/PeersDTO';
+import { PeerSetter } from '@/components/ConfigForm';
 import { blankPostgresSetting } from './pg';
 import { blankSnowflakeSetting } from './sf';
 

ui/app/peers/create/configuration/page.tsx → ui/app/peers/create/[peerType]/page.tsx

@@ -1,4 +1,5 @@
 'use client';
+import { PeerConfig } from '@/app/dto/PeersDTO';
 import { Button } from '@/lib/Button';
 import { ButtonGroup } from '@/lib/ButtonGroup';
 import { Label } from '@/lib/Label';
@@ -7,18 +8,23 @@ import { Panel } from '@/lib/Panel';
 import { TextField } from '@/lib/TextField';
 import { Tooltip } from '@/lib/Tooltip';
 import Link from 'next/link';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useRouter } from 'next/navigation';
 import { useState } from 'react';
 import ConfigForm from '../../../../components/ConfigForm';
 import { handleCreate, handleValidate } from './handlers';
 import { PeerSetting, getBlankSetting } from './helpers/common';
 import { postgresSetting } from './helpers/pg';
 import { snowflakeSetting } from './helpers/sf';
-import { PeerConfig } from './types';
-export default function CreateConfig() {
-  const searchParams = useSearchParams();
+
+type CreateConfigProps = {
+  params: { peerType: string };
+};
+
+export default function CreateConfig({
+  params: { peerType },
+}: CreateConfigProps) {
   const router = useRouter();
-  const dbType = searchParams.get('dbtype') || '';
+  const dbType = peerType;
   const blankSetting = getBlankSetting(dbType);
   const [name, setName] = useState<string>('');
   const [config, setConfig] = useState<PeerConfig>(blankSetting);
@@ -41,6 +47,10 @@ export default function CreateConfig() {
     }
   };
 
+  let listPeersRoute = () => {
+    router.push('/peers');
+  };
+
   return (
     <LayoutMain alignSelf='center' justifySelf='center' width='xxLarge'>
       <Panel>
@@ -102,7 +112,7 @@ export default function CreateConfig() {
                 config,
                 setFormMessage,
                 setLoading,
-                router,
+                listPeersRoute,
                 name
               )
             }

ui/app/peers/create/page.tsx

@@ -1,4 +1,5 @@
 'use client';
+import SelectSource from '@/components/SelectSource';
 import { Action } from '@/lib/Action';
 import { Button } from '@/lib/Button';
 import { ButtonGroup } from '@/lib/ButtonGroup';
@@ -7,13 +8,10 @@ import { Label } from '@/lib/Label';
 import { LayoutMain, RowWithSelect } from '@/lib/Layout';
 import { Panel } from '@/lib/Panel';
 import Link from 'next/link';
-import { useRouter } from 'next/navigation';
 import { useState } from 'react';
-import SelectSource from '../../../components/SelectSource';
 
 export default function CreatePeer() {
   const [peerType, setPeerType] = useState<string>('');
-  const router = useRouter();
   return (
     <LayoutMain alignSelf='center' justifySelf='center' width='xxLarge'>
       <Panel>
@@ -46,7 +44,7 @@ export default function CreatePeer() {
           <Button as={Link} href='/peers'>
             Cancel
           </Button>
-          <Link href={`/peers/create/configuration?dbtype=${peerType}`}>
+          <Link href={`/peers/create/${peerType}`}>
             <Button disabled={!peerType} variant='normalSolid'>
               Continue
             </Button>

ui/app/peers/page.tsx

@@ -5,6 +5,7 @@ import { Icon } from '@/lib/Icon';
 import { Label } from '@/lib/Label';
 import { LayoutMain } from '@/lib/Layout';
 import { Panel } from '@/lib/Panel';
+import { ProgressCircle } from '@/lib/ProgressCircle';
 import { SearchField } from '@/lib/SearchField';
 import { Select } from '@/lib/Select';
 import { Table, TableCell, TableRow } from '@/lib/Table';
@@ -90,7 +91,11 @@ async function PeersTable({ title }: { title: string }) {
 }
 
 function Loading() {
-  return <h2>🌀 Loading...</h2>;
+  return (
+    <h2>
+      <ProgressCircle variant='determinate_progress_circle' /> Loading...
+    </h2>
+  );
 }
 
 export default async function Peers() {

ui/app/utils/callbacks.ts

@@ -0,0 +1 @@
+type RouteCallback = () => void;

ui/app/utils/prisma.ts

@@ -1,5 +1,17 @@
 import { PrismaClient } from '@prisma/client';
 
-const prisma = new PrismaClient();
+const prismaClientSingleton = () => {
+  return new PrismaClient();
+};
+
+type PrismaClientSingleton = ReturnType<typeof prismaClientSingleton>;
+
+const globalForPrisma = globalThis as unknown as {
+  prisma: PrismaClientSingleton | undefined;
+};
+
+const prisma = globalForPrisma.prisma ?? prismaClientSingleton();
 
 export default prisma;
+
+if (process.env.NODE_ENV !== 'production') globalForPrisma.prisma = prisma;

ui/components/ConfigForm.tsx

@@ -1,12 +1,13 @@
 'use client';
-import { PeerSetting } from '@/app/peers/create/configuration/helpers/common';
-import { PeerSetter } from '@/app/peers/create/configuration/types';
+import { PeerConfig } from '@/app/dto/PeersDTO';
+import { PeerSetting } from '@/app/peers/create/[peerType]/helpers/common';
 import { Label } from '@/lib/Label';
 import { RowWithTextField } from '@/lib/Layout';
 import { TextField } from '@/lib/TextField';
 import { Tooltip } from '@/lib/Tooltip';
 import { InfoPopover } from './InfoPopover';
 
+export type PeerSetter = React.Dispatch<React.SetStateAction<PeerConfig>>;
 interface ConfigProps {
   settings: PeerSetting[];
   setter: PeerSetter;

ui/lib/Icon/DeterminateProgressCircle.tsx

@@ -19,12 +19,12 @@ export function DeterminateProgressCircle({
         cy='12'
         r='9'
         stroke='currentColor'
-        stroke-width='2'
+        strokeWidth='2'
       />
       <path
         d='M12 3C13.4203 3 14.8204 3.33614 16.0859 3.98094C17.3514 4.62574 18.4463 5.56089 19.2812 6.70993C20.116 7.85897 20.667 9.18928 20.8892 10.5921C21.1114 11.9949 20.9984 13.4304 20.5595 14.7812C20.1206 16.1319 19.3683 17.3597 18.364 18.364C17.3597 19.3683 16.1319 20.1206 14.7812 20.5595C13.4304 20.9984 11.9949 21.1114 10.5921 20.8892C9.18929 20.667 7.85898 20.116 6.70994 19.2812'
         stroke='currentColor'
-        stroke-width='2'
+        strokeWidth='2'
       />
     </svg>
   );

ui/lib/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}