Add client parameter definition on Diagnostics App (#357)

Co-authored-by: Ry Anderson <[email protected]>

Author: Omnicpie

tools/diagnostics-app/src/app/router.tsx

@@ -5,11 +5,13 @@ import ViewsLayout from './views/layout';
 import SQLConsolePage from './views/sql-console';
 import SyncDiagnosticsPage from './views/sync-diagnostics';
 import SchemaPage from './views/schema';
+import ClientParamsPage from './views/client-params';
 
 export const LOGIN_ROUTE = '/login';
 export const SQL_CONSOLE_ROUTE = '/sql-console';
 export const SYNC_DIAGNOSTICS_ROUTE = '/sync-diagnostics';
 export const SCHEMA_ROUTE = '/schema';
+export const CLIENT_PARAMETERS_ROUTE = '/client-parameters';
 
 /**
  * Navigate to this route after authentication
@@ -43,6 +45,10 @@ export const router = createBrowserRouter([
       {
         path: SCHEMA_ROUTE,
         element: <SchemaPage />
+      },
+      {
+        path: CLIENT_PARAMETERS_ROUTE,
+        element: <ClientParamsPage />
       }
     ]
   }

tools/diagnostics-app/src/app/views/client-params.tsx

@@ -0,0 +1,96 @@
+import { NavigationPage } from '@/components/navigation/NavigationPage';
+import { getParams, setParams as setParamsGlobal } from '@/library/powersync/ConnectionManager';
+import { Box, Button, Grid, IconButton, styled, TextField } from '@mui/material';
+import { FormEvent, useState } from 'react';
+import DeleteIcon from '@mui/icons-material/Delete';
+import AddIcon from '@mui/icons-material/Add';
+
+const jsonToObjectArray = (json: Object) => {
+  const entrySet = Object.entries(json);
+  return entrySet.map(([key, value]) => ({
+    key,
+    value
+  }));
+};
+
+function ClientParamsPage() {
+  const [params, setParams] = useState(jsonToObjectArray(getParams()));
+
+  const onSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const newParams = params.reduce((curr, item) => ({ ...curr, [`${item.key}`]: item.value }), {});
+    setParamsGlobal(newParams);
+  };
+
+  const replace = (idx: number, val: any) => setParams((a) => a.map((entity, i) => (i === idx ? val : entity)));
+
+  const removeIdx = (idx: number) =>
+    setParams((a) => a.map((entity, i) => i !== idx && entity).filter((entity) => entity !== false));
+
+  const addRow = () => {
+    setParams((a) => [...a, { key: '', value: '' }]);
+  };
+
+  const changeValue = (idx: number, value: string, currKey: string) => {
+    replace(idx, { key: currKey, value });
+  };
+
+  const changeKey = (idx: number, key: string, currValue: unknown) => {
+    replace(idx, { key, value: currValue });
+  };
+
+  return (
+    <NavigationPage title="Client Parameters">
+      <S.MainContainer>
+        <form onSubmit={onSubmit}>
+          {params.map(({ key, value }, idx) => (
+            <S.CenteredGrid container>
+              <S.CenteredGrid item xs={12} md={10}>
+                <TextField
+                  label="Key"
+                  value={key}
+                  sx={{ margin: '10px' }}
+                  onChange={(v) => changeKey(idx, v.target.value, value)}
+                />
+                <TextField
+                  label="Value"
+                  value={value}
+                  sx={{ margin: '10px' }}
+                  onChange={(v) => changeValue(idx, v.target.value, key)}
+                />
+
+                <IconButton sx={{ margin: '10px' }} color="error" onClick={() => removeIdx(idx)}>
+                  <DeleteIcon />
+                </IconButton>
+              </S.CenteredGrid>
+            </S.CenteredGrid>
+          ))}
+          <S.CenteredGrid container>
+            <IconButton sx={{ margin: '10px' }} onClick={addRow}>
+              <AddIcon />
+            </IconButton>
+          </S.CenteredGrid>
+          <Button type="submit" sx={{ margin: '10px' }} variant="contained">
+            Submit
+          </Button>
+        </form>
+      </S.MainContainer>
+    </NavigationPage>
+  );
+}
+
+namespace S {
+  export const MainContainer = styled(Box)`
+    padding: 20px;
+  `;
+
+  export const CenteredGrid = styled(Grid)`
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  `;
+}
+
+export default ClientParamsPage;

tools/diagnostics-app/src/app/views/layout.tsx

@@ -7,6 +7,7 @@ import StorageIcon from '@mui/icons-material/Storage';
 import TableChartIcon from '@mui/icons-material/TableChart';
 import TerminalIcon from '@mui/icons-material/Terminal';
 import WifiIcon from '@mui/icons-material/Wifi';
+import UserIcon from '@mui/icons-material/VerifiedUser';
 
 import {
   AppBar,
@@ -25,7 +26,13 @@ import {
 } from '@mui/material';
 import React from 'react';
 
-import { LOGIN_ROUTE, SCHEMA_ROUTE, SQL_CONSOLE_ROUTE, SYNC_DIAGNOSTICS_ROUTE } from '@/app/router';
+import {
+  CLIENT_PARAMETERS_ROUTE,
+  LOGIN_ROUTE,
+  SCHEMA_ROUTE,
+  SQL_CONSOLE_ROUTE,
+  SYNC_DIAGNOSTICS_ROUTE
+} from '@/app/router';
 import { useNavigationPanel } from '@/components/navigation/NavigationPanelContext';
 import { signOut, sync, syncErrorTracker } from '@/library/powersync/ConnectionManager';
 import { usePowerSync } from '@powersync/react';
@@ -74,6 +81,11 @@ export default function ViewsLayout({ children }: { children: React.ReactNode })
         title: 'SQL Console',
         icon: () => <TerminalIcon />
       },
+      {
+        path: CLIENT_PARAMETERS_ROUTE,
+        title: 'Client Parameters',
+        icon: () => <UserIcon />
+      },
       {
         path: LOGIN_ROUTE,
         title: 'Sign Out',
@@ -208,4 +220,4 @@ namespace S {
     object-fit: contain;
     padding: 20px;
   `;
-}
+}

tools/diagnostics-app/src/library/powersync/ConnectionManager.ts

@@ -10,10 +10,19 @@ import Logger from 'js-logger';
 import { DynamicSchemaManager } from './DynamicSchemaManager';
 import { RecordingStorageAdapter } from './RecordingStorageAdapter';
 import { TokenConnector } from './TokenConnector';
+import { safeParse } from '../safeParse/safeParse';
 
 Logger.useDefaults();
 Logger.setLevel(Logger.DEBUG);
 
+export const PARAMS_STORE = 'currentParams';
+
+export const getParams = () => {
+  const stringifiedParams = localStorage.getItem(PARAMS_STORE);
+  const params = safeParse(stringifiedParams);
+  return params;
+}
+
 export const schemaManager = new DynamicSchemaManager();
 
 export const db = new PowerSyncDatabase({
@@ -74,7 +83,8 @@ if (connector.hasCredentials()) {
 }
 
 export async function connect() {
-  await sync.connect();
+  const params = getParams();
+  await sync.connect({ params });
   if (!sync.syncStatus.connected) {
     // Disconnect but don't wait for it
     sync.disconnect();
@@ -90,7 +100,8 @@ export async function clearData() {
   await schemaManager.clear();
   await schemaManager.refreshSchema(db.database);
   if (connector.hasCredentials()) {
-    await sync.connect();
+    const params = getParams();
+    await sync.connect({ params });
   }
 }
 
@@ -103,4 +114,10 @@ export async function signOut() {
   await db.disconnectAndClear();
 }
 
+export const setParams = (p: object) => {
+  const stringified = JSON.stringify(p);
+  localStorage.setItem(PARAMS_STORE, stringified);
+  connect();
+};
+
 (window as any).db = db;

tools/diagnostics-app/src/library/safeParse/safeParse.ts

@@ -0,0 +1,8 @@
+export const safeParse = (jsonString?: string | null) => {
+  try {
+    if (!jsonString) return {};
+    return JSON.parse(jsonString);
+  } catch (error) {
+    return {};
+  }
+};