add polyfill for random uuid for insecure http

Author: invisal

src/app/(outerbase)/local/hooks.tsx

@@ -1,5 +1,6 @@
 import { SavedConnectionRawLocalStorage } from "@/app/(theme)/connect/saved-connection-storage";
 import { LocalConnectionData, LocalDashboardData, localDb } from "@/indexdb";
+import { generateId } from "@/lib/generate-id";
 import parseSafeJson from "@/lib/json-safe";
 import useSWR, { mutate } from "swr";
 
@@ -18,7 +19,7 @@ export function useLocalDashboardList() {
 }
 
 export async function createLocalDashboard(boardName: string) {
-  const id = crypto.randomUUID();
+  const id = generateId();
   const now = Date.now();
 
   const data: LocalDashboardData = {
@@ -103,7 +104,7 @@ export async function removeLocalConnection(id: string) {
 export async function createLocalConnection(
   config: SavedConnectionRawLocalStorage
 ): Promise<LocalConnectionData> {
-  const id = crypto.randomUUID();
+  const id = generateId();
 
   const data = {
     id,

src/app/api/events/insert-tracking-record.ts

@@ -2,6 +2,7 @@
 
 import StarbaseDriver from "@/drivers/starbase-driver";
 import { env } from "@/env";
+import { generateId } from "@/lib/generate-id";
 import { type TrackEventItem } from "../../../lib/tracking";
 
 export async function insertTrackingRecord(
@@ -26,7 +27,7 @@ export async function insertTrackingRecord(
         (event) =>
           "(" +
           [
-            crypto.randomUUID(),
+            generateId(),
             Date.now(),
             deviceId,
             event.name,

src/components/editor/prompt-plugin.tsx

@@ -1,4 +1,5 @@
 import AgentDriverList from "@/drivers/agent/list";
+import { generateId } from "@/lib/generate-id";
 import { unifiedMergeView } from "@codemirror/merge";
 import {
   Compartment,
@@ -73,7 +74,7 @@ class PromptWidget extends WidgetType {
     super();
 
     // Generate unique session id for this prompt
-    const sessionId = crypto.randomUUID();
+    const sessionId = generateId();
 
     plugin.lock();
     this.container = document.createElement("div");

src/components/filehandler-picker.tsx

@@ -1,4 +1,5 @@
 import { localDb } from "@/indexdb";
+import { generateId } from "@/lib/generate-id";
 import { cn } from "@/lib/utils";
 import { LucideFile, LucideFolderClosed } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
@@ -52,7 +53,7 @@ async function openFileHandler() {
     ],
   });
 
-  const id = crypto.randomUUID();
+  const id = generateId();
   localDb.file_handler.add({ id, handler: newFileHandler }).then();
 
   return id;

src/components/gui/schema-editor/index.tsx

@@ -1,5 +1,6 @@
 import { useStudioContext } from "@/context/driver-provider";
 import { DatabaseTableSchemaChange } from "@/drivers/base-driver";
+import { generateId } from "@/lib/generate-id";
 import { checkSchemaChange } from "@/lib/sql/sql-generate.schema";
 import { LucideCode, LucideCopy, LucidePlus, LucideSave } from "lucide-react";
 import { Dispatch, SetStateAction, useCallback, useMemo } from "react";
@@ -51,7 +52,7 @@ export default function SchemaEditor({
       columns: [
         ...value.columns,
         {
-          key: window.crypto.randomUUID(),
+          key: generateId(),
           old: null,
           new: newColumn,
         },

src/components/gui/schema-editor/schema-editor-constraint-list.tsx

@@ -4,6 +4,7 @@ import {
   DatabaseTableConstraintChange,
   DatabaseTableSchemaChange,
 } from "@/drivers/base-driver";
+import { generateId } from "@/lib/generate-id";
 import { cn } from "@/lib/utils";
 import {
   LucideArrowUpRight,
@@ -410,7 +411,7 @@ export default function SchemaEditorConstraintList({
         constraints: [
           ...prev.constraints,
           {
-            id: window.crypto.randomUUID(),
+            id: generateId(),
             new: con,
             old: null,
           },

src/components/gui/table-result/context-menu.tsx

@@ -5,6 +5,7 @@ import {
   exportRowsToJson,
   exportRowsToSqlInsert,
 } from "@/lib/export-helper";
+import { generateId } from "@/lib/generate-id";
 import { KEY_BINDING } from "@/lib/key-matcher";
 import { LucidePlus, LucideTrash2 } from "lucide-react";
 import { useCallback } from "react";
@@ -34,7 +35,7 @@ export default function useTableResultContextMenu({
       state: OptimizeTableState;
       event: React.MouseEvent;
     }) => {
-      const randomUUID = crypto.randomUUID();
+      const randomUUID = generateId();
       const timestamp = Math.floor(Date.now() / 1000).toString();
       const hasFocus = !!state.getFocus();
 

src/components/gui/tabs/schema-editor-tab.tsx

@@ -1,6 +1,7 @@
 import OpacityLoading from "@/components/gui/loading-opacity";
 import { useStudioContext } from "@/context/driver-provider";
 import { DatabaseTableSchemaChange } from "@/drivers/base-driver";
+import { generateId } from "@/lib/generate-id";
 import { createTableSchemaDraft } from "@/lib/sql/sql-generate.schema";
 import { cloneDeep } from "lodash";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -74,7 +75,7 @@ export default function SchemaEditorTab({
           }))
           .filter((col) => col.old),
         constraints: prev.constraints.map((con) => ({
-          id: window.crypto.randomUUID(),
+          id: generateId(),
           old: con.old,
           new: cloneDeep(con.old),
         })),

src/core/builtin-tab/open-query-tab.tsx

@@ -1,4 +1,5 @@
 import QueryWindow from "@/components/gui/tabs/query-tab";
+import { generateId } from "@/lib/generate-id";
 import { Binoculars } from "@phosphor-icons/react";
 import { createTabExtension } from "../extension-tab";
 
@@ -20,11 +21,11 @@ export const builtinOpenQueryTab = createTabExtension<
     if (options?.saved) {
       return options.saved.key;
     }
-    return window.crypto.randomUUID();
+    return generateId();
   },
   generate: (options) => {
     const title = options?.saved
-      ? options.name ?? "Query"
+      ? (options.name ?? "Query")
       : "Query " + (QUERY_COUNTER++).toString();
 
     const component = options?.saved ? (

src/drivers/agent/common.ts

@@ -1,3 +1,4 @@
+import { generateId } from "@/lib/generate-id";
 import {
   BaseDriver,
   DatabaseSchemas,
@@ -61,7 +62,7 @@ export default abstract class CommonAgentDriverImplementation extends AgentBaseD
     option: AgentPromptOption
   ): Promise<string> {
     const session = this.history[previousId ?? ""] ?? {
-      id: previousId || crypto.randomUUID(),
+      id: previousId || generateId(),
       createdAt: Date.now(),
       messages: [],
     };

src/drivers/board-storage/local.ts

@@ -1,13 +1,14 @@
 import { DashboardProps } from "@/components/board";
 import { ChartValue } from "@/components/chart/chart-type";
 import { LocalDashboardData, localDb } from "@/indexdb";
+import { generateId } from "@/lib/generate-id";
 import { IBoardStorageDriver } from "./base";
 
 export default class LocalBoardStorage implements IBoardStorageDriver {
   constructor(protected board: LocalDashboardData) {}
 
   async add(chart: ChartValue): Promise<ChartValue | undefined> {
-    const id = crypto.randomUUID();
+    const id = generateId();
     const now = Date.now();
 
     const data: ChartValue = {

src/drivers/saved-doc/electron-saved-doc.ts

@@ -1,4 +1,5 @@
 "use client";
+import { generateId } from "@/lib/generate-id";
 import {
   SavedDocData,
   SavedDocDriver,
@@ -32,7 +33,7 @@ export default class ElectronSavedDocs implements SavedDocDriver {
 
       this.cacheDocs = {
         workspace: [],
-      }
+      };
 
       return this.cacheNamespaceList;
     } else {
@@ -60,7 +61,7 @@ export default class ElectronSavedDocs implements SavedDocDriver {
     await this.getNamespaces();
 
     const now = Math.floor(Date.now() / 1000);
-    const id = window.crypto.randomUUID();
+    const id = generateId();
 
     const namespace = {
       id,
@@ -119,7 +120,7 @@ export default class ElectronSavedDocs implements SavedDocDriver {
         (n) => n.id === namespace
       )!,
       type,
-      id: window.crypto.randomUUID(),
+      id: generateId(),
     };
 
     if (this.cacheDocs[r.namespace.id]) {

src/drivers/saved-doc/indexdb-saved-doc.ts

@@ -1,4 +1,5 @@
 import { localDb } from "@/indexdb";
+import { generateId } from "@/lib/generate-id";
 import {
   SavedDocData,
   SavedDocDriver,
@@ -18,7 +19,7 @@ export default class IndexdbSavedDoc implements SavedDocDriver {
 
   async createNamespace(name: string): Promise<SavedDocNamespace> {
     const now = Math.floor(Date.now() / 1000);
-    const id = window.crypto.randomUUID();
+    const id = generateId();
 
     await localDb.namespace.add({
       id,
@@ -92,7 +93,7 @@ export default class IndexdbSavedDoc implements SavedDocDriver {
     data: SavedDocInput
   ): Promise<SavedDocData> {
     const now = Math.floor(Date.now() / 1000);
-    const id = window.crypto.randomUUID();
+    const id = generateId();
 
     const namespaceData = await localDb.namespace.get(namespace);
     if (!namespaceData) throw new Error("Namespace does not exist");

src/lib/generate-id.ts

@@ -0,0 +1,13 @@
+export function generateId() {
+  if (crypto.randomUUID) {
+    return crypto.randomUUID();
+  }
+
+  // https://stackoverflow.com/questions/105034/how-do-i-create-a-guid-uuid/2117523#2117523
+  return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, (c) =>
+    (
+      +c ^
+      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (+c / 4)))
+    ).toString(16)
+  );
+}

src/lib/sql/sql-generate.schema.ts

@@ -1,10 +1,11 @@
-import deepEqual from "deep-equal";
 import {
   DatabaseTableColumnChange,
   DatabaseTableSchema,
   DatabaseTableSchemaChange,
 } from "@/drivers/base-driver";
+import deepEqual from "deep-equal";
 import { cloneDeep } from "lodash";
+import { generateId } from "../generate-id";
 
 export function checkSchemaColumnChange(change: DatabaseTableColumnChange) {
   return !deepEqual(change.old, change.new);
@@ -33,12 +34,12 @@ export function createTableSchemaDraft(
       new: schema.tableName,
     },
     columns: schema.columns.map((col) => ({
-      key: window.crypto.randomUUID(),
+      key: generateId(),
       old: col,
       new: cloneDeep(col),
     })),
     constraints: (schema.constraints ?? []).map((con) => ({
-      id: window.crypto.randomUUID(),
+      id: generateId(),
       old: con,
       new: cloneDeep(con),
     })),

src/lib/tracking.ts

@@ -1,3 +1,4 @@
+import { generateId } from "./generate-id";
 import { throttleEvent } from "./tracking-throttle";
 
 export interface TrackEventItem {
@@ -39,7 +40,7 @@ export function sendAnalyticEvents(events: TrackEventItem[]) {
 
   let deviceId = localStorage.getItem("od-id");
   if (!deviceId) {
-    deviceId = crypto.randomUUID();
+    deviceId = generateId();
     localStorage.setItem("od-id", deviceId);
   }