UI: Collapsible sidebar and fixes (#1418)

- Collapsible sidebar - Remove extra borders from tables - Change dropdown colors https://github.com/PeerDB-io/peerdb/assets/65964360/e5c1c47f-c4b4-431f-ab60-a9881330dd5a ![Screenshot 2024-02-29 at 10 42 05 PM](https://github.com/PeerDB-io/peerdb/assets/65964360/e07d2e6c-0060-4814-9dd7-3cf0827b5597)
PeerDB-io · Mar 4, 2024 · 15c9a0e · 15c9a0e
1 parent b794f19
commit 15c9a0e
Show file tree

Hide file tree

Showing 27 changed files with 353 additions and 335 deletions.
diff --git a/ui/app/alert-config/new.tsx b/ui/app/alert-config/new.tsx
@@ -6,6 +6,7 @@ import ReactSelect from 'react-select';
 import { PulseLoader } from 'react-spinners';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import SelectTheme from '../styles/select';
 import { alertConfigReqSchema, alertConfigType } from './validation';
 
 export interface AlertConfigProps {
@@ -107,6 +108,7 @@ const NewAlertConfig = (alertProps: AlertConfigProps) => {
           }}
           formatOptionLabel={ConfigLabel}
           onChange={(val, _) => val && setServiceType(val.value)}
+          theme={SelectTheme}
         />
       </div>
       <div>

diff --git a/ui/app/alert-config/page.tsx b/ui/app/alert-config/page.tsx
@@ -10,6 +10,7 @@ import React, { useState } from 'react';
 import { PulseLoader } from 'react-spinners';
 import useSWR from 'swr';
 import { UAlertConfigResponse } from '../dto/AlertDTO';
+import { tableStyle } from '../peers/[peerName]/style';
 import { fetcher } from '../utils/swr';
 import NewAlertConfig, { AlertConfigProps } from './new';
 const ServiceIcon = (serviceType: string) => {
@@ -73,9 +74,7 @@ const AlertConfigPage: React.FC = () => {
               alerts.
             </Label>
           </div>
-          <div
-            style={{ marginTop: '2rem', maxHeight: '25em', overflow: 'scroll' }}
-          >
+          <div style={{ ...tableStyle, marginTop: '2rem', maxHeight: '25em' }}>
             <Table>
               {alerts?.length ? (
                 alerts.map((alertConfig: UAlertConfigResponse, index) => (

diff --git a/ui/app/mirrors/[mirrorId]/cdc.tsx b/ui/app/mirrors/[mirrorId]/cdc.tsx
@@ -1,5 +1,6 @@
 'use client';
 import { SyncStatusRow } from '@/app/dto/MirrorsDTO';
+import SelectTheme from '@/app/styles/select';
 import TimeLabel from '@/components/TimeComponent';
 import {
   CloneTableSummary,
@@ -153,6 +154,7 @@ export const SnapshotStatusTable = ({ status }: SnapshotStatusProps) => {
                     value: 'cloneStartTime',
                     label: 'Start Time',
                   }}
+                  theme={SelectTheme}
                 />
               </div>
               <button

diff --git a/ui/app/mirrors/[mirrorId]/cdcGraph.tsx b/ui/app/mirrors/[mirrorId]/cdcGraph.tsx
@@ -1,5 +1,6 @@
 'use client';
 import { SyncStatusRow } from '@/app/dto/MirrorsDTO';
+import SelectTheme from '@/app/styles/select';
 import { formatGraphLabel, timeOptions } from '@/app/utils/graph';
 import { Label } from '@/lib/Label';
 import { BarChart } from '@tremor/react';
@@ -33,6 +34,7 @@ function CdcGraph({ syncs }: { syncs: SyncStatusRow[] }) {
           options={timeOptions}
           defaultValue={{ label: 'hour', value: 'hour' }}
           onChange={(val, _) => val && setAggregateType(val.value)}
+          theme={SelectTheme}
         />
       </div>
       <div style={{ height: '3rem' }}>

diff --git a/ui/app/mirrors/[mirrorId]/syncStatusTable.tsx b/ui/app/mirrors/[mirrorId]/syncStatusTable.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { SyncStatusRow } from '@/app/dto/MirrorsDTO';
+import SelectTheme from '@/app/styles/select';
 import TimeLabel from '@/components/TimeComponent';
 import { Button } from '@/lib/Button';
 import { Icon } from '@/lib/Icon';
@@ -136,6 +137,7 @@ export const SyncStatusTable = ({ rows }: SyncStatusTableProps) => {
                   setSortField(sortVal);
                 }}
                 defaultValue={{ value: 'batchId', label: 'Batch ID' }}
+                theme={SelectTheme}
               />
             </div>
             <button

diff --git a/ui/app/mirrors/[mirrorId]/tablePairs.tsx b/ui/app/mirrors/[mirrorId]/tablePairs.tsx
@@ -1,11 +1,14 @@
 'use client';
+import { tableStyle } from '@/app/peers/[peerName]/style';
 import { TableMapping } from '@/grpc_generated/flow';
 import { SearchField } from '@/lib/SearchField';
+import { Table, TableCell } from '@/lib/Table';
+import { TableRow } from '@tremor/react';
 import { useMemo, useState } from 'react';
 
 const TablePairs = ({ tables }: { tables?: TableMapping[] }) => {
   const [searchQuery, setSearchQuery] = useState<string>('');
-  const shownTables = useMemo(() => {
+  const shownTables: TableMapping[] | undefined = useMemo(() => {
     const shownTables = tables?.filter(
       (table: TableMapping) =>
         table.sourceTableIdentifier.includes(searchQuery) ||
@@ -24,65 +27,26 @@ const TablePairs = ({ tables }: { tables?: TableMapping[] }) => {
             }}
           />
         </div>
-        <div
-          style={{
-            maxHeight: '80%',
-            overflow: 'scroll',
-            marginTop: '1rem',
-          }}
-        >
-          <table
-            style={{
-              marginTop: '1rem',
-              width: '100%',
-              border: '1px solid #ddd',
-              fontSize: 15,
-              overflow: 'scroll',
-            }}
+        <div style={{ ...tableStyle, maxHeight: '40vh', marginTop: '1rem' }}>
+          <Table
+            header={
+              <TableRow>
+                <TableCell>Source Table</TableCell>
+                <TableCell>Destination Table</TableCell>
+              </TableRow>
+            }
           >
-            <thead style={{ position: 'sticky', top: 0 }}>
-              <tr
-                style={{
-                  borderBottom: '1px solid #ddd',
-                  backgroundColor: '#f9f9f9',
-                }}
+            {shownTables?.map((table) => (
+              <TableRow
+                key={`${table.sourceTableIdentifier}.${table.destinationTableIdentifier}`}
               >
-                <th
-                  style={{
-                    textAlign: 'left',
-                    padding: '0.5rem',
-                    fontWeight: 'bold',
-                  }}
-                >
-                  Source Table
-                </th>
-                <th
-                  style={{
-                    textAlign: 'left',
-                    padding: '0.5rem',
-                    fontWeight: 'bold',
-                  }}
-                >
-                  Destination Table
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              {shownTables?.map((table) => (
-                <tr
-                  key={`${table.sourceTableIdentifier}.${table.destinationTableIdentifier}`}
-                  style={{ borderBottom: '1px solid #ddd' }}
-                >
-                  <td style={{ padding: '0.5rem' }}>
-                    {table.sourceTableIdentifier}
-                  </td>
-                  <td style={{ padding: '0.5rem' }}>
-                    {table.destinationTableIdentifier}
-                  </td>
-                </tr>
-              ))}
-            </tbody>
-          </table>
+                <TableCell>{table.sourceTableIdentifier}</TableCell>
+                <TableCell style={{ padding: '0.5rem' }}>
+                  {table.destinationTableIdentifier}
+                </TableCell>
+              </TableRow>
+            ))}
+          </Table>
         </div>
       </div>
     );

diff --git a/ui/app/mirrors/create/mirrorcards.tsx b/ui/app/mirrors/create/mirrorcards.tsx
@@ -46,7 +46,6 @@ const MirrorCards = ({
               style={{
                 padding: '0.5rem',
                 width: '35%',
-                minHeight: '22vh',
                 marginRight:
                   card.title === 'Query Replication' ? '0.5rem' : 'auto',
                 marginLeft:
@@ -71,14 +70,17 @@ const MirrorCards = ({
                   <div style={{ fontSize: 14 }}>{card.description}</div>
                 </Label>
               </div>
-              <Label
-                as={Link}
+              <Link
                 target='_blank'
-                style={{ color: 'teal', cursor: 'pointer' }}
+                style={{
+                  color: 'teal',
+                  cursor: 'pointer',
+                  width: 'fit-content',
+                }}
                 href={card.link}
               >
                 Learn more
-              </Label>
+              </Link>
             </label>
           );
         })}