@peers-app/peers-ui 0.27.2 → 0.27.4

package/src/screens/data-explorer/query-executor.tsx

@@ -1,520 +0,0 @@
-import { groupDeviceVar, newid } from "@peers-app/peers-sdk";
-import type React from "react";
-import { useEffect, useRef, useState } from "react";
-import { LoadingIndicator } from "../../components/loading-indicator";
-import { isDesktop } from "../../globals";
-import { useObservable } from "../../hooks";
-import { registerInternalPeersUI } from "../../ui-router/ui-loader";
-
-interface ISqlQueryResult {
-  columns: string[];
-  rows: unknown[][];
-  rowCount: number;
-  isWriteOperation?: boolean;
-  changesCount?: number;
-}
-
-type DataExplorerQueryApi = {
-  executeQuery: (query: string, writeEnabled: boolean) => Promise<ISqlQueryResult>;
-};
-
-type WindowWithDataExplorerQuery = Window & {
-  electronAPI?: { dataExplorer?: DataExplorerQueryApi };
-};
-
-function getDataExplorerQueryApi(): DataExplorerQueryApi | undefined {
-  return (window as WindowWithDataExplorerQuery).electronAPI?.dataExplorer;
-}
-
-interface IQueryTab {
-  id: string;
-  name: string;
-  query: string;
-}
-
-const defaultQuery = "SELECT * FROM sqlite_master WHERE type='table' LIMIT 10";
-
-// Persistent vars at module level
-const queryTabs = groupDeviceVar<IQueryTab[]>("dataExplorerQueryTabs", {
-  defaultValue: [
-    {
-      id: newid(),
-      name: "Query 1",
-      query: defaultQuery,
-    },
-  ],
-});
-
-const activeQueryTabId = groupDeviceVar<string>("dataExplorerActiveQueryTab", {
-  defaultValue: "",
-});
-
-export function QueryExecutor() {
-  useObservable(queryTabs);
-  useObservable(activeQueryTabId);
-  const [results, setResults] = useState<{ [tabId: string]: ISqlQueryResult }>({});
-  const [errors, setErrors] = useState<{ [tabId: string]: string }>({});
-  const [loading, setLoading] = useState<{ [tabId: string]: boolean }>({});
-  const [writeEnabled, setWriteEnabled] = useState(false);
-
-  // Local state for query input to avoid locking up on fast typing
-  const [localQuery, setLocalQuery] = useState<string>("");
-  const debounceTimeoutRef = useRef<NodeJS.Timeout>();
-  const lastSavedQueryRef = useRef<string>("");
-
-  const tabs = queryTabs();
-  const activeTabId = activeQueryTabId();
-  const activeTab = tabs.find((t) => t.id === activeTabId);
-
-  // Sync local query with persisted query when tab changes
-  useEffect(() => {
-    const persistedQuery = activeTab?.query || "";
-    setLocalQuery(persistedQuery);
-    lastSavedQueryRef.current = persistedQuery;
-  }, [activeTab?.query]);
-
-  // Subscribe to tab changes
-  useEffect(() => {
-    // Initialize activeTabId if not set
-    if (!activeQueryTabId() && queryTabs().length > 0) {
-      activeQueryTabId(queryTabs()[0].id);
-    }
-  }, []);
-
-  const query = localQuery;
-  const result = activeTab ? results[activeTab.id] : null;
-  const error = activeTab ? errors[activeTab.id] : null;
-  const isLoading = activeTab ? loading[activeTab.id] : false;
-
-  // Debounced function to update the persisted query
-  const updatePersistedQuery = (newQuery: string) => {
-    if (!activeTab) return;
-    if (newQuery === lastSavedQueryRef.current) return; // Skip if unchanged
-
-    const currentTabs = queryTabs();
-    queryTabs(currentTabs.map((t) => (t.id === activeTab.id ? { ...t, query: newQuery } : t)));
-    lastSavedQueryRef.current = newQuery;
-  };
-
-  const setQuery = (newQuery: string) => {
-    // Update local state immediately for responsive UI
-    setLocalQuery(newQuery);
-
-    // Clear existing debounce timeout
-    if (debounceTimeoutRef.current) {
-      clearTimeout(debounceTimeoutRef.current);
-    }
-
-    // Debounce the persisted update (300ms delay)
-    debounceTimeoutRef.current = setTimeout(() => {
-      updatePersistedQuery(newQuery);
-    }, 300);
-  };
-
-  // Cleanup debounce timeout on unmount
-  useEffect(() => {
-    return () => {
-      if (debounceTimeoutRef.current) {
-        clearTimeout(debounceTimeoutRef.current);
-      }
-    };
-  }, []);
-
-  // Save immediately on blur
-  const handleBlur = () => {
-    if (debounceTimeoutRef.current) {
-      clearTimeout(debounceTimeoutRef.current);
-      debounceTimeoutRef.current = undefined;
-    }
-    updatePersistedQuery(localQuery);
-  };
-
-  const setResult = (result: ISqlQueryResult | null) => {
-    if (!activeTab) return;
-    setResults((prev) => {
-      const newResults = { ...prev };
-      if (result === null) {
-        delete newResults[activeTab.id];
-      } else {
-        newResults[activeTab.id] = result;
-      }
-      return newResults;
-    });
-  };
-
-  const setError = (error: string | null) => {
-    if (!activeTab) return;
-    setErrors((prev) => {
-      const newErrors = { ...prev };
-      if (error === null) {
-        delete newErrors[activeTab.id];
-      } else {
-        newErrors[activeTab.id] = error;
-      }
-      return newErrors;
-    });
-  };
-
-  const setLoadingState = (isLoading: boolean) => {
-    if (!activeTab) return;
-    setLoading((prev) => ({ ...prev, [activeTab.id]: isLoading }));
-  };
-
-  const executeQuery = async () => {
-    if (!query.trim()) {
-      setError("Please enter a query");
-      return;
-    }
-
-    // Save the current query immediately before execution (in case debounce hasn't fired yet)
-    if (debounceTimeoutRef.current) {
-      clearTimeout(debounceTimeoutRef.current);
-      debounceTimeoutRef.current = undefined;
-    }
-    updatePersistedQuery(query);
-
-    try {
-      setLoadingState(true);
-      setError(null);
-      setResult(null);
-
-      const api = getDataExplorerQueryApi();
-      if (!api) {
-        setError("Data Explorer API not available");
-        return;
-      }
-
-      const queryResult = await api.executeQuery(query, writeEnabled);
-      setResult(queryResult);
-    } catch (err: unknown) {
-      setError(err instanceof Error ? err.message : "Query execution failed");
-    } finally {
-      setLoadingState(false);
-    }
-  };
-
-  const addNewTab = () => {
-    const currentTabs = queryTabs();
-    const newTab: IQueryTab = {
-      id: newid(),
-      name: `Query ${currentTabs.length + 1}`,
-      query: defaultQuery,
-    };
-    queryTabs([...currentTabs, newTab]);
-    activeQueryTabId(newTab.id);
-  };
-
-  const closeTab = (tabId: string) => {
-    const currentTabs = queryTabs();
-    if (currentTabs.length === 1) return; // Don't close the last tab
-
-    const tabIndex = currentTabs.findIndex((t) => t.id === tabId);
-    const newTabs = currentTabs.filter((t) => t.id !== tabId);
-
-    queryTabs(newTabs);
-
-    // If we're closing the active tab, switch to another one
-    if (tabId === activeQueryTabId()) {
-      const newIndex = Math.min(tabIndex, newTabs.length - 1);
-      activeQueryTabId(newTabs[newIndex].id);
-    }
-
-    // Clean up results and errors for closed tab
-    setResults((prev) => {
-      const newResults = { ...prev };
-      delete newResults[tabId];
-      return newResults;
-    });
-    setErrors((prev) => {
-      const newErrors = { ...prev };
-      delete newErrors[tabId];
-      return newErrors;
-    });
-  };
-
-  const _renameTab = (tabId: string, newName: string) => {
-    const currentTabs = queryTabs();
-    queryTabs(currentTabs.map((t) => (t.id === tabId ? { ...t, name: newName } : t)));
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-    // Execute on Cmd/Ctrl + Enter
-    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
-      e.preventDefault();
-      executeQuery();
-    }
-  };
-
-  if (!isDesktop()) {
-    return (
-      <div className="container-fluid p-4">
-        <div className="alert alert-info">
-          Query Executor is only available in the desktop application.
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="container-fluid p-4">
-      {/* Navigation Tabs */}
-      <ul className="nav nav-tabs mb-4">
-        <li className="nav-item">
-          <a className="nav-link" href="#/data-explorer">
-            <i className="bi bi-table"></i> Tables
-          </a>
-        </li>
-        <li className="nav-item">
-          <a className="nav-link active" href="#/data-explorer/query">
-            <i className="bi bi-terminal"></i> Query
-          </a>
-        </li>
-      </ul>
-
-      <h2 className="mb-3">SQL Query Executor</h2>
-
-      {/* Query Tabs */}
-      <div className="mb-3">
-        <ul className="nav nav-tabs">
-          {tabs.map((tab) => (
-            <li key={tab.id} className="nav-item">
-              <div
-                className={`nav-link ${tab.id === activeTabId ? "active" : ""}`}
-                style={{ cursor: "pointer", display: "flex", alignItems: "center", gap: "8px" }}
-              >
-                <span onClick={() => activeQueryTabId(tab.id)} style={{ flex: 1 }}>
-                  {tab.name}
-                </span>
-                {tabs.length > 1 && (
-                  <button
-                    className="btn btn-sm p-0"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      closeTab(tab.id);
-                    }}
-                    style={{
-                      border: "none",
-                      background: "none",
-                      fontSize: "1.2em",
-                      lineHeight: 1,
-                      opacity: 0.6,
-                    }}
-                    title="Close tab"
-                  >
-                    ×
-                  </button>
-                )}
-              </div>
-            </li>
-          ))}
-          <li className="nav-item">
-            <button
-              className="nav-link"
-              onClick={addNewTab}
-              style={{ border: "none", background: "none" }}
-              title="New query tab"
-            >
-              <i className="bi bi-plus-lg"></i>
-            </button>
-          </li>
-        </ul>
-      </div>
-
-      {/* Query Input */}
-      <div className="card mb-4">
-        <div className="card-body">
-          <div className="d-flex justify-content-between align-items-center">
-            <label htmlFor="query-input" className="form-label mb-0">
-              <strong>SQL Query</strong>
-            </label>
-            <div className="form-check form-switch">
-              <input
-                className="form-check-input"
-                type="checkbox"
-                id="enable-writes"
-                checked={writeEnabled}
-                onChange={(e) => setWriteEnabled(e.target.checked)}
-              />
-              <label className="form-check-label small" htmlFor="enable-writes">
-                Enable Writes
-              </label>
-            </div>
-          </div>
-          <textarea
-            id="query-input"
-            className="form-control font-monospace"
-            rows={6}
-            value={query}
-            onChange={(e) => setQuery(e.target.value)}
-            onBlur={handleBlur}
-            onKeyDown={handleKeyDown}
-            placeholder="Enter your SQL query here..."
-          />
-          <div className="mt-3 d-flex justify-content-between align-items-center">
-            <button
-              className="btn btn-primary"
-              onClick={executeQuery}
-              disabled={isLoading || !query.trim()}
-            >
-              {isLoading ? (
-                <>
-                  <span
-                    className="spinner-border spinner-border-sm me-2"
-                    role="status"
-                    aria-hidden="true"
-                  ></span>
-                  Executing...
-                </>
-              ) : (
-                <>
-                  <i className="bi bi-play-fill"></i> Execute Query
-                </>
-              )}
-            </button>
-            <small className="text-muted">
-              <i className="bi bi-info-circle"></i> Press Cmd/Ctrl + Enter to execute
-            </small>
-          </div>
-        </div>
-      </div>
-
-      {/* Error Display */}
-      {error && (
-        <div className="alert alert-danger" role="alert">
-          <i className="bi bi-exclamation-triangle-fill me-2"></i>
-          <strong>Error:</strong> {error}
-        </div>
-      )}
-
-      {/* Loading */}
-      {isLoading && (
-        <div className="text-center py-5">
-          <LoadingIndicator />
-        </div>
-      )}
-
-      {/* Results Display */}
-      {result && !isLoading && (
-        <div className="card">
-          <div className="card-body">
-            <div className="d-flex justify-content-between align-items-center mb-3">
-              <h5 className="card-title mb-0">
-                {result.isWriteOperation ? "Write Result" : "Query Results"}
-                {result.isWriteOperation ? (
-                  <span className="badge bg-success ms-2">
-                    {result.changesCount} row{result.changesCount !== 1 ? "s" : ""} affected
-                  </span>
-                ) : (
-                  <span className="badge bg-primary ms-2">{result.rowCount} rows</span>
-                )}
-              </h5>
-              <button className="btn btn-sm btn-outline-secondary" onClick={() => setResult(null)}>
-                <i className="bi bi-x"></i> Clear
-              </button>
-            </div>
-
-            {result.isWriteOperation ? (
-              <div className="alert alert-success mb-0">
-                <i className="bi bi-check-circle-fill me-2"></i>
-                Query executed successfully. {result.changesCount} row
-                {result.changesCount !== 1 ? "s" : ""} affected.
-              </div>
-            ) : result.rowCount === 0 ? (
-              <div className="alert alert-info mb-0">
-                Query executed successfully but returned no rows.
-              </div>
-            ) : (
-              <div className="table-responsive">
-                <table className="table table-sm table-hover table-bordered">
-                  <thead className="table-light">
-                    <tr>
-                      {result.columns.map((col, idx) => (
-                        <th key={idx} className="font-monospace small">
-                          {col}
-                        </th>
-                      ))}
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {result.rows.map((row, rowIdx) => (
-                      <tr key={rowIdx}>
-                        {row.map((cell, cellIdx) => (
-                          <td key={cellIdx} className="font-monospace small">
-                            {cell === null ? (
-                              <span className="text-muted fst-italic">null</span>
-                            ) : typeof cell === "object" ? (
-                              <pre className="mb-0" style={{ fontSize: "0.7rem" }}>
-                                {JSON.stringify(cell, null, 2)}
-                              </pre>
-                            ) : (
-                              String(cell)
-                            )}
-                          </td>
-                        ))}
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Example Queries */}
-      {!result && !isLoading && !error && (
-        <div className="card">
-          <div className="card-body">
-            <h5 className="card-title">Example Queries</h5>
-            <ul className="list-unstyled mb-0">
-              <li className="mb-2">
-                <button
-                  className="btn btn-sm btn-outline-secondary font-monospace"
-                  onClick={() => setQuery("SELECT * FROM sqlite_master WHERE type='table'")}
-                >
-                  List all tables
-                </button>
-              </li>
-              <li className="mb-2">
-                <button
-                  className="btn btn-sm btn-outline-secondary font-monospace"
-                  onClick={() => setQuery("PRAGMA table_info(Users)")}
-                >
-                  Show Users table schema
-                </button>
-              </li>
-              <li className="mb-2">
-                <button
-                  className="btn btn-sm btn-outline-secondary font-monospace"
-                  onClick={() => setQuery("SELECT name, sql FROM sqlite_master WHERE type='index'")}
-                >
-                  List all indexes
-                </button>
-              </li>
-              <li className="mb-2">
-                <button
-                  className="btn btn-sm btn-outline-secondary font-monospace"
-                  onClick={() => setQuery("PRAGMA database_list")}
-                >
-                  Show attached databases
-                </button>
-              </li>
-            </ul>
-          </div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-registerInternalPeersUI({
-  peersUIId: "data-explorer-query-ui",
-  component: QueryExecutor,
-  routes: [
-    {
-      isMatch: (_props, context) => context.path === "data-explorer/query",
-      uiCategory: "screen",
-      priority: 2,
-    },
-  ],
-});

package/src/screens/device-pairing/device-pairing.test.tsx

@@ -1,143 +0,0 @@
-import type { DevicePairingState } from "@peers-app/peers-sdk";
-import { fireEvent, render, waitFor } from "@testing-library/react";
-import { DestinationDevicePairing, SourceDevicePairing } from "./device-pairing";
-
-const mockRpc = {
-  startSource: jest.fn(),
-  startDestination: jest.fn(),
-  approve: jest.fn(),
-  reject: jest.fn(),
-  cancel: jest.fn(),
-};
-let mockPairingState: DevicePairingState = { phase: "idle" };
-
-jest.mock("./identity-ipc", () => ({
-  identityTools: async () => mockRpc,
-}));
-
-jest.mock("./use-device-pairing-state", () => ({
-  useDevicePairingState: () => mockPairingState,
-}));
-
-describe("device pairing UI lifecycle", () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-    mockPairingState = { phase: "idle" };
-    mockRpc.cancel.mockResolvedValue({ phase: "idle" });
-  });
-
-  it("starts the destination on mount and cancels when it resolves after unmount", async () => {
-    let resolveStart!: (value: DevicePairingState) => void;
-    mockRpc.startDestination.mockReturnValue(
-      new Promise((resolve) => {
-        resolveStart = resolve;
-      }),
-    );
-    const view = render(<DestinationDevicePairing onBack={jest.fn()} />);
-
-    await waitFor(() =>
-      expect(mockRpc.startDestination).toHaveBeenCalledWith({ deviceType: "browser" }),
-    );
-    view.unmount();
-    resolveStart({
-      sessionId: "00mh0wlipkdbeaw8tests0001",
-      role: "destination",
-      phase: "showing-code",
-      code: "7-aardvark-adroitness-absurd",
-    });
-
-    await waitFor(() => {
-      expect(mockRpc.cancel).toHaveBeenCalledWith({
-        sessionId: "00mh0wlipkdbeaw8tests0001",
-      });
-    });
-  });
-
-  it("shows the destination code and QR while waiting for a source", () => {
-    mockPairingState = {
-      sessionId: "00mh0wlipkdbeaw8tests0004",
-      role: "destination",
-      phase: "showing-code",
-      code: "7-aardvark-adroitness-absurd",
-      notice: "Pairing code did not match. Try the new code.",
-      expiresAt: Date.now() + 60_000,
-    };
-    mockRpc.startDestination.mockResolvedValue(mockPairingState);
-    const view = render(<DestinationDevicePairing onBack={jest.fn()} />);
-
-    expect(view.getByLabelText("Pairing code")).toHaveTextContent("7-aardvark-adroitness-absurd");
-    expect(view.getByLabelText("Pairing code QR")).toBeInTheDocument();
-    expect(view.getByText("Pairing code did not match. Try the new code.")).toBeInTheDocument();
-  });
-
-  it("sends the typed code to the host and only approves from the source", async () => {
-    mockRpc.startSource.mockResolvedValue({
-      sessionId: "00mh0wlipkdbeaw8tests0002",
-      role: "source",
-      phase: "connecting",
-    });
-    const view = render(<SourceDevicePairing onClose={jest.fn()} />);
-
-    fireEvent.change(view.getByLabelText("Pairing code"), {
-      target: { value: " 7 aardvark adroitness absurd " },
-    });
-    fireEvent.click(view.getByRole("button", { name: "Connect" }));
-    await waitFor(() =>
-      expect(mockRpc.startSource).toHaveBeenCalledWith({ code: "7 aardvark adroitness absurd" }),
-    );
-
-    mockPairingState = {
-      sessionId: "00mh0wlipkdbeaw8tests0002",
-      role: "source",
-      phase: "waiting-for-approval",
-      remoteDevice: { deviceName: "New phone", deviceType: "mobile" },
-    };
-    view.rerender(<SourceDevicePairing onClose={jest.fn()} />);
-    expect(view.getByText("New phone (mobile)")).toBeInTheDocument();
-    fireEvent.click(view.getByRole("button", { name: "Approve" }));
-    await waitFor(() =>
-      expect(mockRpc.approve).toHaveBeenCalledWith({ sessionId: "00mh0wlipkdbeaw8tests0002" }),
-    );
-  });
-
-  it("keeps source cancellation available while transferring", async () => {
-    const onClose = jest.fn();
-    mockPairingState = {
-      sessionId: "00mh0wlipkdbeaw8tests0003",
-      role: "source",
-      phase: "transferring",
-    };
-    const view = render(<SourceDevicePairing onClose={onClose} />);
-
-    fireEvent.click(view.getByRole("button", { name: "Cancel" }));
-
-    await waitFor(() => {
-      expect(mockRpc.cancel).toHaveBeenCalledWith({
-        sessionId: "00mh0wlipkdbeaw8tests0003",
-      });
-      expect(onClose).toHaveBeenCalled();
-    });
-  });
-
-  it("does not clear the destination success reload when Done unmounts the flow", () => {
-    jest.useFakeTimers();
-    mockPairingState = {
-      sessionId: "00mh0wlipkdbeaw8tests0005",
-      role: "destination",
-      phase: "complete",
-    };
-    mockRpc.startDestination.mockResolvedValue(mockPairingState);
-    const setTimeoutSpy = jest.spyOn(window, "setTimeout");
-    const clearTimeoutSpy = jest.spyOn(window, "clearTimeout");
-    const view = render(<DestinationDevicePairing onBack={jest.fn()} />);
-    const reloadTimer = setTimeoutSpy.mock.calls.find(([, delay]) => delay === 750);
-
-    expect(reloadTimer).toBeDefined();
-    view.unmount();
-    expect(clearTimeoutSpy).not.toHaveBeenCalled();
-
-    setTimeoutSpy.mockRestore();
-    clearTimeoutSpy.mockRestore();
-    jest.useRealTimers();
-  });
-});