configure: fixes + offline & persistent storage warning

Author: oscartbeaumont

apps/configure/package.json

@@ -11,6 +11,7 @@
 	"dependencies": {
 		"@kobalte/core": "^0.13.3",
 		"@mattrax/ui": "workspace:*",
+		"@solid-primitives/connectivity": "^0.3.20",
 		"@solid-primitives/context": "^0.2.3",
 		"@solid-primitives/event-listener": "^2.3.3",
 		"@solid-primitives/memo": "^1.3.9",

apps/configure/src/components/search/FilterBar.tsx

@@ -47,7 +47,7 @@ export function FilterBar(props: ReturnType<typeof createSearchPageContext>) {
 				description: "My cool view",
 				data,
 			});
-			navigate(`/views/${id}`);
+			navigate(`../views/${id}`);
 		},
 	}));
 

apps/configure/src/components/search/configuration.tsx

@@ -1,6 +1,7 @@
 // This file contains the configuration for data fetching, filtering, ordering, and rendering.
 
 import { Badge } from "@mattrax/ui";
+import { A } from "@solidjs/router";
 import { type Entity, defineEntity } from "./filters";
 
 const typeColumn = (type: string) =>
@@ -20,12 +21,12 @@ export const entities = {
 			name: {
 				header: "Name",
 				render: (user) => (
-					<a
+					<A
 						class="font-medium hover:underline focus:underline p-1 -m-1 w-full block"
-						href={`/users/${user.id}`}
+						href={`../users/${user.id}`}
 					>
 						{user.name}
-					</a>
+					</A>
 				),
 				raw: (user) => user.name,
 			},
@@ -99,12 +100,12 @@ export const entities = {
 			name: {
 				header: "Name",
 				render: (device) => (
-					<a
+					<A
 						class="font-medium hover:underline focus:underline p-1 -m-1 w-full block"
-						href={`/devices/${device.id}`}
+						href={`../devices/${device.id}`}
 					>
 						{device.name}
-					</a>
+					</A>
 				),
 				raw: (device) => device.name,
 			},
@@ -169,12 +170,12 @@ export const entities = {
 			name: {
 				header: "Name",
 				render: (group) => (
-					<a
+					<A
 						class="font-medium hover:underline focus:underline p-1 -m-1 w-full block"
-						href={`/groups/${group.id}`}
+						href={`../groups/${group.id}`}
 					>
 						{group.name}
-					</a>
+					</A>
 				),
 				raw: (group) => group.name,
 			},
@@ -200,12 +201,12 @@ export const entities = {
 			name: {
 				header: "Name",
 				render: (policy) => (
-					<a
+					<A
 						class="font-medium hover:underline focus:underline p-1 -m-1 w-full block"
-						href={`/policies/${policy.id}`}
+						href={`../policies/${policy.id}`}
 					>
 						{policy.name}
-					</a>
+					</A>
 				),
 				raw: (policy) => policy.name,
 			},
@@ -231,12 +232,12 @@ export const entities = {
 			name: {
 				header: "Name",
 				render: (app) => (
-					<a
+					<A
 						class="font-medium hover:underline focus:underline p-1 -m-1 w-full block"
-						href={`/applications/${app.id}`}
+						href={`../applications/${app.id}`}
 					>
 						{app.name}
-					</a>
+					</A>
 				),
 				raw: (app) => app.name,
 			},

apps/configure/src/lib/createTimer.ts

@@ -18,6 +18,8 @@ export function createTimer2(
 		});
 	};
 
+	timer = setTimeout(trigger, untrack(timeout));
+
 	onCleanup(() => {
 		if (timer) clearTimeout(timer);
 	});

apps/configure/src/lib/db.ts

@@ -302,8 +302,13 @@ export const dbVersion = 1;
 export const openAndInitDb = (name: string, createIfNotFound = false) =>
 	openDB<Database>(name, dbVersion, {
 		upgrade(db, oldVersion, newVersion, tx) {
-			// Aborting causes the DB creation to fail
-			if (oldVersion === 0 && !createIfNotFound) return tx.abort();
+			// Aborting causes the DB creation to fail (in only Chrome *sigh*)
+			if (oldVersion === 0 && !createIfNotFound) {
+				if ("chrome" in window) return tx.abort();
+				db.close();
+				window.indexedDB.deleteDatabase(name);
+				return;
+			}
 
 			db.createObjectStore("_kv");
 			db.createObjectStore("_meta");

apps/configure/src/lib/query.ts

@@ -17,6 +17,9 @@ function createDbObserver(
 	db: IDBPDatabase<Database>,
 	onChange: (objectStore: string) => void,
 ) {
+	const stores = [...db.objectStoreNames];
+	if (stores.length === 0) return;
+
 	// @ts-expect-error // TODO: Typescript support for IndexedDB Observers polyfill
 	const observer = db.observe(
 		// This subscribes to all object stores.
@@ -28,8 +31,10 @@ function createDbObserver(
 			onChange(metadata.objectStoreName);
 		},
 	);
-
-	onCleanup(() => observer.stop());
+	if (!observer) console.error("Error registering observer!");
+	onCleanup(() => {
+		if (observer) observer.stop();
+	});
 }
 
 // create a query that will automatically rerun when the database changes

apps/configure/src/lib/sync/index.ts

@@ -3,6 +3,7 @@ import type { IDBPDatabase } from "idb";
 import { toast } from "solid-sonner";
 import type { Database } from "../db";
 import { deleteKey, getKey } from "../kv";
+import { didLastSyncCompleteSuccessfully } from "./operation";
 import * as schema from "./schema";
 
 export type SyncEngine = ReturnType<typeof initSync>;
@@ -16,6 +17,16 @@ export function initSync(db: IDBPDatabase<Database>) {
 	return {
 		db,
 		async syncAll(abort: AbortController): Promise<string | undefined> {
+			if (abort.signal.aborted) return;
+			if (!navigator.onLine) {
+				console.warn("Sync cancelled due to navigator being offline!");
+				return;
+			}
+
+			const isSyncLockAlreadyHeld = (await navigator.locks.query()).held?.find(
+				(lock) => lock.name === "sync",
+			);
+
 			// Be aware the way use this lock intentionally queues up syncs.
 			// Eg. if two tabs hit this code path, one will sync and then the other will sync (both triggering a full sync).
 			//
@@ -25,7 +36,13 @@ export function initSync(db: IDBPDatabase<Database>) {
 			// To mitigate the impacts of this we should // TODO
 			const result = await navigator.locks.request("sync", async (lock) => {
 				if (!lock) return;
-				if (abort.signal.aborted) return;
+
+				// The sync was queued while a sync was already in progress but it succeeded so we can skip it.
+				if (
+					abort.signal.aborted ||
+					(isSyncLockAlreadyHeld && (await didLastSyncCompleteSuccessfully(db)))
+				)
+					return;
 
 				const accessToken = await getKey(db, "accessToken");
 				if (!accessToken) {

apps/configure/src/lib/sync/operation.ts

@@ -154,3 +154,10 @@ export async function resetSyncState(db: IDBPDatabase<Database>) {
 		await db.clear("_meta");
 	});
 }
+
+export async function didLastSyncCompleteSuccessfully(
+	db: IDBPDatabase<Database>,
+) {
+	const meta = await db.getAll("_meta");
+	return meta.every((m) => "syncedAt" in m);
+}

apps/configure/src/lib/sync/schema.ts

@@ -83,7 +83,7 @@ const orgSchema = z.object({
 	),
 	assignedPlans: z.array(
 		z.object({
-			assignedDateTime: z.string(),
+			assignedDateTime: z.string().datetime(),
 			capabilityStatus: z.enum([
 				"Enabled",
 				"Warning",
@@ -205,8 +205,8 @@ export const users = defineSyncEntity("users", {
 		businessPhones: z.array(z.string()).optional(),
 		mobilePhone: z.string().optional(),
 		preferredLanguage: z.string().optional(),
-		lastPasswordChangeDateTime: z.string().optional(),
-		createdDateTime: z.string(),
+		lastPasswordChangeDateTime: z.string().datetime().optional(),
+		createdDateTime: z.string().datetime(),
 	}),
 	upsert: async (db, data, _syncId) => {
 		const tx = db.transaction("users", "readwrite");
@@ -311,8 +311,8 @@ export const devices = defineSyncEntity("devices", {
 		model: z.string().optional(),
 		operatingSystem: z.string().optional(),
 		operatingSystemVersion: z.string().optional(),
-		approximateLastSignInDateTime: z.string().optional(),
-		registrationDateTime: z.string().optional(),
+		approximateLastSignInDateTime: z.string().datetime().optional(),
+		registrationDateTime: z.string().datetime().optional(),
 		deviceCategory: z.string().optional(),
 	}),
 	upsert: async (db, data, _syncId) => {
@@ -366,7 +366,7 @@ export const groups = defineSyncEntity("groups", {
 		description: z.string().optional(),
 		securityEnabled: z.boolean().default(false),
 		visibility: z.enum(["Private", "Public", "HiddenMembership"]).nullable(),
-		createdDateTime: z.string(),
+		createdDateTime: z.string().datetime(),
 		"members@delta": z
 			.array(
 				z.object({
@@ -477,8 +477,8 @@ export const policies = defineSyncEntity("policies", {
 					.nullable()
 					// Microsoft's endpoints are inconsistent.
 					.transform((v) => (v === "" ? null : v)),
-				createdDateTime: z.string(),
-				lastModifiedDateTime: z.string(),
+				createdDateTime: z.string().datetime(),
+				lastModifiedDateTime: z.string().datetime(),
 				assignments: z.array(
 					z.object({
 						id: z.string(),
@@ -585,8 +585,8 @@ export const scripts = defineSyncEntity("scripts", {
 				.nullable()
 				// Microsoft's endpoints are cringe.
 				.transform((v) => (v === "" ? null : v)),
-			createdDateTime: z.string(),
-			lastModifiedDateTime: z.string(),
+			createdDateTime: z.string().datetime(),
+			lastModifiedDateTime: z.string().datetime(),
 			runAsAccount: z.enum(["system", "user"]),
 			fileName: z.string(),
 			scriptContent: z.string().nullable(),
@@ -705,8 +705,8 @@ export const apps = defineSyncEntity("apps", {
 		description: z.string().optional(),
 		publisher: z.string().optional(),
 		largeIcon: z.any().optional(),
-		createdDateTime: z.string(),
-		lastModifiedDateTime: z.string(),
+		createdDateTime: z.string().datetime(),
+		lastModifiedDateTime: z.string().datetime(),
 		isFeatured: z.boolean().default(false),
 		privacyInformationUrl: z.string().nullable(),
 		informationUrl: z.string().nullable(),

apps/configure/src/routes.ts

@@ -11,7 +11,7 @@ export const routes = [
 		component: lazy(() => import("./routes/home")),
 	},
 	{
-		path: "/:userId",
+		path: "/:uid",
 		component: lazy(() => import("./routes/(dash)")),
 		children: [
 			{
@@ -31,7 +31,7 @@ export const routes = [
 				component: lazy(() => import("./routes/(dash)/devices/(devices)")),
 			},
 			{
-				path: "/devices/:userId",
+				path: "/devices/:deviceId",
 				component: lazy(() => import("./routes/(dash)/devices/[deviceId]")),
 			},
 			{