[ui] Minor bugfixes and improvements

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/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/page.tsx

@@ -39,7 +39,7 @@ export default function CreateMirrors() {
     fetch('/api/peers')
       .then((res) => res.json())
       .then((res) => {
-        setPeers(res.peers);
+        setPeers(res);
       });
   }, []);
   return (

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

ui/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "peerdb-cloud-template",
+  "name": "peerdb-ui",
   "version": "0.1.0",
   "private": true,
   "scripts": {
@@ -19,6 +19,7 @@
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.4",
     "@radix-ui/react-form": "^0.0.3",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-progress": "^1.0.3",
     "@radix-ui/react-radio-group": "^1.1.3",
@@ -33,7 +34,9 @@
     "@types/react": "18.2.21",
     "@types/react-dom": "18.2.7",
     "classnames": "^2.3.2",
+    "clsx": "^2.0.0",
     "long": "^5.2.3",
+    "lucide-react": "^0.287.0",
     "material-symbols": "0.11.0",
     "moment": "^2.29.4",
     "next": "13.4.16",
@@ -70,6 +73,7 @@
     "storybook": "^7.3.0",
     "string-width": "^6.1.0",
     "tailwindcss": "^3.3.3",
+    "tailwindcss-animate": "^1.0.7",
     "typescript": "^5.2.2",
     "webpack": "^5.76.0"
   },

ui/tailwind.config.ts

@@ -101,5 +101,5 @@ module.exports = {
         /^(fill-(?:slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)-(?:50|100|200|300|400|500|600|700|800|900|950))$/,
     },
   ],
-  plugins: [require('@headlessui/tailwindcss')],
+  plugins: [require('@headlessui/tailwindcss'), require('tailwindcss-animate')],
 } satisfies Config;

ui/yarn.lock

@@ -1909,6 +1909,11 @@
     "@radix-ui/react-label" "2.0.2"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-icons@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-icons/-/react-icons-1.3.0.tgz#c61af8f323d87682c5ca76b856d60c2312dbcb69"
+  integrity sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==
+
 "@radix-ui/[email protected]":
   version "1.0.1"
   resolved "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz"
@@ -4823,6 +4828,11 @@ clone@^1.0.2:
   resolved "https://registry.npmjs.org/clone/-/clone-1.0.4.tgz"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
+clsx@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
+  integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz"
@@ -7766,6 +7776,11 @@ lru-cache@^6.0.0:
   resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-10.0.1.tgz"
   integrity sha512-IJ4uwUTi2qCccrioU6g9g/5rvvVl13bsdczUUcqbciD9iLr095yj8DQKdObriEvuNSx325N1rV1O0sJFszx75g==
 
+lucide-react@^0.287.0:
+  version "0.287.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.287.0.tgz#efa49872a91fa97b7ef650c4b40396b6880d0088"
+  integrity sha512-auxP2bTGiMoELzX+6ItTeNzLmhGd/O+PHBsrXV2YwPXYCxarIFJhiMOSzFT9a1GWeYPSZtnWdLr79IVXr/5JqQ==
+
 lz-string@^1.5.0:
   version "1.5.0"
   resolved "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz"
@@ -10046,6 +10061,11 @@ tailwind-merge@^1.9.1:
   resolved "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz"
   integrity sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==
 
+tailwindcss-animate@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz#318b692c4c42676cc9e67b19b78775742388bef4"
+  integrity sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==
+
 tailwindcss@^3.3.3:
   version "3.3.3"
   resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.3.tgz"