@marimo-team/frontend 0.16.0 → 0.16.2

package/src/core/codemirror/language/languages/sql/validation-errors.ts

@@ -0,0 +1,79 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import type { SupportedDialects } from "@marimo-team/codemirror-sql";
+import { atom, useAtomValue } from "jotai";
+import type { CellId } from "@/core/cells/ids";
+import { store } from "@/core/state/jotai";
+
+export interface SQLValidationError {
+  errorType: string;
+  errorMessage: string;
+  codeblock?: string; // Code block that caused the error
+}
+
+type CellToSQLErrors = Map<CellId, SQLValidationError>;
+
+export const sqlValidationErrorsAtom = atom<CellToSQLErrors>(
+  new Map<CellId, SQLValidationError>(),
+);
+
+export const useSqlValidationErrorsForCell = (cellId: CellId) => {
+  const sqlValidationErrors = useAtomValue(sqlValidationErrorsAtom);
+  return sqlValidationErrors.get(cellId);
+};
+
+export function clearSqlValidationError(cellId: CellId) {
+  const sqlValidationErrors = store.get(sqlValidationErrorsAtom);
+  const newErrors = new Map(sqlValidationErrors);
+  newErrors.delete(cellId);
+  store.set(sqlValidationErrorsAtom, newErrors);
+}
+
+export function setSqlValidationError({
+  cellId,
+  error,
+  dialect,
+}: {
+  cellId: CellId;
+  error: string;
+  dialect: SupportedDialects | null;
+}) {
+  const sqlValidationErrors = store.get(sqlValidationErrorsAtom);
+  const newErrors = new Map(sqlValidationErrors);
+
+  const errorResult: SQLValidationError =
+    dialect === "DuckDB" ? handleDuckdbError(error) : splitErrorMessage(error);
+
+  newErrors.set(cellId, errorResult);
+  store.set(sqlValidationErrorsAtom, newErrors);
+}
+
+function handleDuckdbError(error: string): SQLValidationError {
+  const { errorType, errorMessage } = splitErrorMessage(error);
+  let newErrorMessage = errorMessage;
+
+  // Extract the LINE and the rest of the message as codeblock, keep errorMessage as whatever is before
+  let codeblock: string | undefined;
+  const lineIndex = errorMessage.indexOf("LINE ");
+  if (lineIndex !== -1) {
+    codeblock = errorMessage.slice(Math.max(0, lineIndex)).trim();
+    newErrorMessage = errorMessage.slice(0, Math.max(0, lineIndex)).trim();
+  }
+
+  return {
+    errorType,
+    errorMessage: newErrorMessage,
+    codeblock,
+  };
+}
+
+function splitErrorMessage(error: string) {
+  const errorType = error.split(":")[0].trim();
+  const errorMessage = error.split(":").slice(1).join(":").trim();
+  return { errorType, errorMessage };
+}
+
+export const exportedForTesting = {
+  splitErrorMessage,
+  handleDuckdbError,
+};

package/src/core/codemirror/language/panel/panel.tsx

@@ -5,7 +5,8 @@ import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { Tooltip, TooltipProvider } from "@/components/ui/tooltip";
 import { normalizeName } from "@/core/cells/names";
-import type { ConnectionName } from "@/core/datasets/engines";
+import { getFeatureFlag } from "@/core/config/feature-flag";
+import { type ConnectionName, DUCKDB_ENGINE } from "@/core/datasets/engines";
 import { useAutoGrowInputProps } from "@/hooks/useAutoGrowInputProps";
 import { formatSQL } from "../../format";
 import { languageAdapterState } from "../extension";
@@ -22,7 +23,7 @@ import {
 import type { LanguageMetadataOf } from "../types";
 import type { QuotePrefixKind } from "../utils/quotes";
 import { getQuotePrefix, MarkdownQuotePrefixTooltip } from "./markdown";
-import { SQLEngineSelect } from "./sql";
+import { SQLEngineSelect, SQLModeSelect } from "./sql";
 
 const Divider = () => <div className="h-4 border-r border-border" />;
 
@@ -70,6 +71,8 @@ export const LanguagePanelComponent: React.FC<{
       updateSQLDialectFromConnection(view, engine);
     };
 
+    const sqlModeEnabled = getFeatureFlag("sql_mode");
+
     actions = (
       <div className="flex flex-1 gap-2 items-center">
         <label className="flex gap-2 items-center">
@@ -95,6 +98,9 @@ export const LanguagePanelComponent: React.FC<{
           onChange={switchEngine}
         />
         <div className="flex items-center gap-2 ml-auto">
+          {sqlModeEnabled && metadata.engine === DUCKDB_ENGINE && (
+            <SQLModeSelect />
+          )}
           <Tooltip content="Format SQL">
             <Button
               variant="text"

package/src/core/codemirror/language/panel/sql.tsx

@@ -1,9 +1,16 @@
 /* Copyright 2024 Marimo. All rights reserved. */
 
+import type { SelectTriggerProps } from "@radix-ui/react-select";
 import { useAtomValue } from "jotai";
-import { AlertCircle, CircleHelpIcon } from "lucide-react";
+import {
+  AlertCircle,
+  CircleHelpIcon,
+  DatabaseBackup,
+  SearchCheck,
+} from "lucide-react";
 import { transformDisplayName } from "@/components/databases/display";
 import { DatabaseLogo } from "@/components/databases/icon";
+import { Button } from "@/components/ui/button";
 import {
   Select,
   SelectContent,
@@ -14,6 +21,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import { Tooltip } from "@/components/ui/tooltip";
 import {
   dataConnectionsMapAtom,
   setLatestEngineSelected,
@@ -24,6 +32,7 @@ import {
 } from "@/core/datasets/engines";
 import type { DataSourceConnection } from "@/core/kernel/messages";
 import { useNonce } from "@/hooks/useNonce";
+import { type SQLMode, useSQLMode } from "../languages/sql/sql-mode";
 
 interface SelectProps {
   selectedEngine: ConnectionName;
@@ -77,7 +86,7 @@ export const SQLEngineSelect: React.FC<SelectProps> = ({
       <SelectItem key={connection.name} value={connection.name}>
         <div className="flex items-center gap-1">
           <DatabaseLogo className="h-3 w-3" name={connection.dialect} />
-          <span className="truncate">
+          <span className="truncate ml-0.5">
             {transformDisplayName(connection.display_name)}
           </span>
         </div>
@@ -88,9 +97,9 @@ export const SQLEngineSelect: React.FC<SelectProps> = ({
   return (
     <div className="flex flex-row gap-1 items-center">
       <Select value={selectedEngine} onValueChange={handleSelectEngine}>
-        <SelectTrigger className="text-xs border-border shadow-none! ring-0! h-4.5 px-1.5">
+        <SQLSelectTrigger>
           <SelectValue placeholder="Select an engine" />
-        </SelectTrigger>
+        </SQLSelectTrigger>
         <SelectContent>
           <SelectGroup>
             <SelectLabel>Database connections</SelectLabel>
@@ -130,3 +139,71 @@ export const SQLEngineSelect: React.FC<SelectProps> = ({
 const HELP_KEY = "__help__";
 const HELP_URL =
   "http://docs.marimo.io/guides/working_with_data/sql/#connecting-to-a-custom-database";
+
+export const SQLModeSelect: React.FC = () => {
+  const { sqlMode, setSQLMode } = useSQLMode();
+
+  const handleToggleMode = () => {
+    setSQLMode(sqlMode === "validate" ? "default" : "validate");
+  };
+
+  const getModeIcon = (mode: SQLMode) => {
+    return mode === "validate" ? (
+      <SearchCheck className="h-3 w-3" />
+    ) : (
+      <DatabaseBackup className="h-3 w-3" />
+    );
+  };
+
+  const getTooltipContent = (mode: SQLMode) => {
+    return mode === "validate" ? (
+      <div className="text-xs">
+        <div className="font-semibold mb-1 flex flex-row items-center gap-1">
+          <SearchCheck className="h-3 w-3" />
+          Validate Mode
+        </div>
+        <p>Queries are validated as you write them</p>
+      </div>
+    ) : (
+      <div className="text-xs">
+        <div className="font-semibold mb-1 flex flex-row items-center gap-1">
+          <DatabaseBackup className="h-3 w-3" />
+          Default Mode
+        </div>
+        <p>Standard editing</p>
+      </div>
+    );
+  };
+
+  return (
+    <div className="flex flex-row gap-1 items-center">
+      <Tooltip delayDuration={300} content={getTooltipContent(sqlMode)}>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={handleToggleMode}
+          className="h-5 px-1.5 text-xs border-border shadow-none hover:bg-accent"
+        >
+          {getModeIcon(sqlMode)}
+          <span className="ml-1">
+            {sqlMode === "validate" ? "Validate" : "Default"}
+          </span>
+        </Button>
+      </Tooltip>
+    </div>
+  );
+};
+
+const SQLSelectTrigger: React.FC<SelectTriggerProps> = ({
+  children,
+  ...props
+}) => {
+  return (
+    <SelectTrigger
+      className="text-xs border-border shadow-none! ring-0! h-5 px-1.5 hover:bg-accent transition-colors"
+      {...props}
+    >
+      {children}
+    </SelectTrigger>
+  );
+};

package/src/core/codemirror/lsp/notebook-lsp.ts

@@ -18,13 +18,19 @@ import { getLSPDocument } from "./utils";
 
 class Snapshotter {
   private documentVersion = 0;
+  private readonly getNotebookCode: () => {
+    cellIds: CellId[];
+    codes: Record<CellId, string>;
+  };
 
   constructor(
-    private readonly getNotebookCode: () => {
+    getNotebookCode: () => {
       cellIds: CellId[];
       codes: Record<CellId, string>;
     },
-  ) {}
+  ) {
+    this.getNotebookCode = getNotebookCode;
+  }
 
   /**
    * Map from the global document version to the cell id and version.

package/src/core/codemirror/readonly/__tests__/extension.test.ts

@@ -9,7 +9,7 @@ import { connectionAtom } from "../../../network/connection";
 import { dynamicReadonly, isEditorReadonly } from "../extension";
 
 function makeStoreWithConnection(
-  state: WebSocketState.CONNECTING | WebSocketState.OPEN,
+  state: typeof WebSocketState.CONNECTING | typeof WebSocketState.OPEN,
 ) {
   const store = createStore();
   store.set(connectionAtom, { state });

package/src/core/codemirror/rtc/loro/awareness.ts

@@ -202,13 +202,25 @@ export const createSelectionLayer = (): Extension =>
  * Renders a blinking cursor to indicate the cursor of another user.
  */
 export class RemoteCursorMarker implements LayerMarker {
+  private left: number;
+  private top: number;
+  private height: number;
+  private name: string;
+  private colorClassName: string;
+
   constructor(
-    private left: number,
-    private top: number,
-    private height: number,
-    private name: string,
-    private colorClassName: string,
-  ) {}
+    left: number,
+    top: number,
+    height: number,
+    name: string,
+    colorClassName: string,
+  ) {
+    this.left = left;
+    this.top = top;
+    this.height = height;
+    this.name = name;
+    this.colorClassName = colorClassName;
+  }
 
   draw(): HTMLElement {
     const elt = document.createElement("div");
@@ -353,16 +365,30 @@ export interface CursorPosition {
 
 export class AwarenessPlugin implements PluginValue {
   sub: Subscription;
+  public view: EditorView;
+  public doc: LoroDoc;
+  public user: UserState;
+  public awareness: Awareness<AwarenessState>;
+  private getTextFromDoc: (doc: LoroDoc) => LoroText;
+  private scopeId: ScopeId;
+  private getUserId?: () => Uid;
 
   constructor(
-    public view: EditorView,
-    public doc: LoroDoc,
-    public user: UserState,
-    public awareness: Awareness<AwarenessState>,
-    private getTextFromDoc: (doc: LoroDoc) => LoroText,
-    private scopeId: ScopeId,
-    private getUserId?: () => Uid,
+    view: EditorView,
+    doc: LoroDoc,
+    user: UserState,
+    awareness: Awareness<AwarenessState>,
+    getTextFromDoc: (doc: LoroDoc) => LoroText,
+    scopeId: ScopeId,
+    getUserId?: () => Uid,
   ) {
+    this.view = view;
+    this.doc = doc;
+    this.user = user;
+    this.awareness = awareness;
+    this.getTextFromDoc = getTextFromDoc;
+    this.scopeId = scopeId;
+    this.getUserId = getUserId;
     this.sub = this.doc.subscribe((e) => {
       if (e.by === "local") {
         // update remote cursor position
@@ -435,12 +461,21 @@ export class AwarenessPlugin implements PluginValue {
 }
 export class RemoteAwarenessPlugin implements PluginValue {
   _awarenessListener?: AwarenessListener;
+  public view: EditorView;
+  public doc: LoroDoc;
+  public awareness: Awareness<AwarenessState>;
+  private scopeId: ScopeId;
+
   constructor(
-    public view: EditorView,
-    public doc: LoroDoc,
-    public awareness: Awareness<AwarenessState>,
-    private scopeId: ScopeId,
+    view: EditorView,
+    doc: LoroDoc,
+    awareness: Awareness<AwarenessState>,
+    scopeId: ScopeId,
   ) {
+    this.view = view;
+    this.doc = doc;
+    this.awareness = awareness;
+    this.scopeId = scopeId;
     const listener: AwarenessListener = async (arg, origin) => {
       if (origin === "local") {
         return;

package/src/core/codemirror/rtc/loro/sync.ts

@@ -40,13 +40,21 @@ export const loroSyncAnnotation = Annotation.define();
 export class LoroSyncPluginValue implements PluginValue {
   sub?: Subscription;
   private isInitDispatch = false;
+  private view: EditorView;
+  private doc: LoroDoc;
+  private docPath: string[];
+  private getTextFromDoc: (doc: LoroDoc) => LoroText;
 
   constructor(
-    private view: EditorView,
-    private doc: LoroDoc,
-    private docPath: string[],
-    private getTextFromDoc: (doc: LoroDoc) => LoroText,
+    view: EditorView,
+    doc: LoroDoc,
+    docPath: string[],
+    getTextFromDoc: (doc: LoroDoc) => LoroText,
   ) {
+    this.view = view;
+    this.doc = doc;
+    this.docPath = docPath;
+    this.getTextFromDoc = getTextFromDoc;
     this.sub = doc.subscribe(this.onRemoteUpdate);
     Promise.resolve().then(() => {
       this.isInitDispatch = true;

package/src/core/config/config-schema.ts

@@ -144,6 +144,7 @@ export const UserConfigSchema = z
             }
             return width;
           }),
+        locale: z.string().nullable().optional(),
         reference_highlighting: z.boolean().default(false),
       })
       .passthrough()

package/src/core/config/config.ts

@@ -82,6 +82,10 @@ export const editorFontSizeAtom = atom<number>((get) => {
   return get(resolvedMarimoConfigAtom).display.code_editor_font_size;
 });
 
+export const localeAtom = atom<string | null | undefined>((get) => {
+  return get(resolvedMarimoConfigAtom).display.locale;
+});
+
 export function isAiEnabled(config: UserConfig) {
   return (
     Boolean(config.ai?.models?.chat_model) ||

package/src/core/config/feature-flag.tsx

@@ -14,6 +14,7 @@ export interface ExperimentalFeatures {
   mcp_docs: boolean;
   sql_linter: boolean;
   external_agents: boolean;
+  sql_mode: boolean;
   // Add new feature flags here
 }
 
@@ -26,13 +27,14 @@ const defaultValues: ExperimentalFeatures = {
   mcp_docs: false,
   sql_linter: false,
   external_agents: import.meta.env.DEV,
+  sql_mode: false,
 };
 
 export function getFeatureFlag<T extends keyof ExperimentalFeatures>(
   feature: T,
 ): ExperimentalFeatures[T] {
   return (
-    (getResolvedMarimoConfig().experimental?.[
+    (getResolvedMarimoConfig()?.experimental?.[
       feature
     ] as ExperimentalFeatures[T]) ?? defaultValues[feature]
   );

package/src/core/datasets/request-registry.ts

@@ -1,10 +1,15 @@
 /* Copyright 2024 Marimo. All rights reserved. */
-import type { SQLTableListPreview, SQLTablePreview } from "../kernel/messages";
+import type {
+  SQLTableListPreview,
+  SQLTablePreview,
+  ValidateSQLResult,
+} from "../kernel/messages";
 import { DeferredRequestRegistry } from "../network/DeferredRequestRegistry";
 import { getRequestClient } from "../network/requests";
 import type {
   PreviewSQLTableListRequest,
   PreviewSQLTableRequest,
+  ValidateSQLRequest,
 } from "../network/types";
 
 // We make a request to the backend to preview the table, passing in Engine, DB, Schema, and Table
@@ -32,3 +37,14 @@ export const PreviewSQLTableList = new DeferredRequestRegistry<
     ...req,
   });
 });
+
+export const ValidateSQL = new DeferredRequestRegistry<
+  Omit<ValidateSQLRequest, "requestId">,
+  ValidateSQLResult
+>("validate-sql", async (requestId, req) => {
+  const client = getRequestClient();
+  await client.validateSQL({
+    requestId: requestId,
+    ...req,
+  });
+});

package/src/core/hotkeys/hotkeys.ts

@@ -452,10 +452,13 @@ export class HotkeyProvider implements IHotkeyProvider {
     return new HotkeyProvider(DEFAULT_HOT_KEY, { platform });
   }
 
+  private hotkeys: Record<HotkeyAction, Hotkey>;
+
   constructor(
-    private hotkeys: Record<HotkeyAction, Hotkey>,
+    hotkeys: Record<HotkeyAction, Hotkey>,
     options: HotkeyProviderOptions = {},
   ) {
+    this.hotkeys = hotkeys;
     this.platform = options.platform ?? resolvePlatform();
     this.mod = this.platform === "mac" ? "Cmd" : "Ctrl";
   }
@@ -503,13 +506,14 @@ export class HotkeyProvider implements IHotkeyProvider {
 }
 
 export class OverridingHotkeyProvider extends HotkeyProvider {
+  private readonly overrides: Partial<Record<HotkeyAction, string | undefined>>;
+
   constructor(
-    private readonly overrides: Partial<
-      Record<HotkeyAction, string | undefined>
-    >,
+    overrides: Partial<Record<HotkeyAction, string | undefined>>,
     options: HotkeyProviderOptions = {},
   ) {
     super(DEFAULT_HOT_KEY, options);
+    this.overrides = overrides;
   }
 
   override getHotkey(action: HotkeyAction): ResolvedHotkey {

package/src/core/i18n/__tests__/locale-provider.test.tsx

@@ -0,0 +1,176 @@
+/* Copyright 2024 Marimo. All rights reserved. */
+
+import { cleanup, render } from "@testing-library/react";
+import { createStore, Provider } from "jotai";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { userConfigAtom } from "@/core/config/config";
+import { parseUserConfig } from "@/core/config/config-schema";
+import { LocaleProvider } from "../locale-provider";
+
+// Mock navigator.language with a getter
+let mockNavigatorLanguage: string | undefined;
+
+Object.defineProperty(window, "navigator", {
+  value: {
+    get language() {
+      return mockNavigatorLanguage;
+    },
+  },
+  writable: true,
+});
+
+// Mock react-aria-components I18nProvider
+vi.mock("react-aria-components", () => ({
+  I18nProvider: ({
+    children,
+    locale,
+  }: {
+    children: React.ReactNode;
+    locale: string;
+  }) => (
+    <div data-testid="i18n-provider" data-locale={locale}>
+      {children}
+    </div>
+  ),
+}));
+
+describe("LocaleProvider", () => {
+  beforeEach(() => {
+    // Reset the mock before each test
+    mockNavigatorLanguage = undefined;
+  });
+
+  afterEach(() => {
+    cleanup();
+    // Clear all mocks after each test
+    mockNavigatorLanguage = undefined;
+    vi.clearAllMocks();
+  });
+
+  it("should render I18nProvider without locale when locale is null", () => {
+    const store = createStore();
+    const config = parseUserConfig({ display: { locale: null } });
+    store.set(userConfigAtom, config);
+
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <LocaleProvider>
+          <div>Test content</div>
+        </LocaleProvider>
+      </Provider>,
+    );
+
+    const i18nProvider = getByTestId("i18n-provider");
+    expect(i18nProvider).toBeInTheDocument();
+    expect(i18nProvider.dataset.locale).toBe(undefined);
+    expect(i18nProvider).toHaveTextContent("Test content");
+  });
+
+  it("should render I18nProvider without locale when locale is undefined", () => {
+    const store = createStore();
+    const config = parseUserConfig({ display: { locale: undefined } });
+    store.set(userConfigAtom, config);
+
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <LocaleProvider>
+          <div>Test content</div>
+        </LocaleProvider>
+      </Provider>,
+    );
+
+    const i18nProvider = getByTestId("i18n-provider");
+    expect(i18nProvider).toBeInTheDocument();
+    expect(i18nProvider.dataset.locale).toBe(undefined);
+    expect(i18nProvider).toHaveTextContent("Test content");
+  });
+
+  it("should render I18nProvider with locale when locale is provided", () => {
+    const store = createStore();
+    const testLocale = "es-ES";
+    const config = parseUserConfig({ display: { locale: testLocale } });
+    store.set(userConfigAtom, config);
+
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <LocaleProvider>
+          <div>Test content</div>
+        </LocaleProvider>
+      </Provider>,
+    );
+
+    const i18nProvider = getByTestId("i18n-provider");
+    expect(i18nProvider).toBeInTheDocument();
+    expect(i18nProvider.dataset.locale).toBe(testLocale);
+    expect(i18nProvider).toHaveTextContent("Test content");
+  });
+
+  it("should render I18nProvider with different locale values", () => {
+    const testCases = ["en-US", "fr-FR", "de-DE", "ja-JP"];
+
+    testCases.forEach((locale) => {
+      const store = createStore();
+      const config = parseUserConfig({ display: { locale } });
+      store.set(userConfigAtom, config);
+
+      const { getByTestId } = render(
+        <Provider store={store}>
+          <LocaleProvider>
+            <div>Test content for {locale}</div>
+          </LocaleProvider>
+        </Provider>,
+      );
+
+      const i18nProvider = getByTestId("i18n-provider");
+      expect(i18nProvider.dataset.locale).toBe(locale);
+      expect(i18nProvider).toHaveTextContent(`Test content for ${locale}`);
+
+      // Clean up after each iteration
+      cleanup();
+    });
+  });
+
+  it("should render children correctly", () => {
+    const store = createStore();
+    const config = parseUserConfig({ display: { locale: "en-US" } });
+    store.set(userConfigAtom, config);
+
+    const { getByText, getByRole } = render(
+      <Provider store={store}>
+        <LocaleProvider>
+          <div>
+            <h1>Test Heading</h1>
+            <p>Test paragraph</p>
+            <button type="button">Test Button</button>
+          </div>
+        </LocaleProvider>
+      </Provider>,
+    );
+
+    expect(getByText("Test Heading")).toBeInTheDocument();
+    expect(getByText("Test paragraph")).toBeInTheDocument();
+    expect(getByRole("button", { name: "Test Button" })).toBeInTheDocument();
+  });
+
+  it("should auto-detect locale when no locale is set in config", () => {
+    mockNavigatorLanguage = "de-DE";
+
+    const store = createStore();
+    const config = parseUserConfig({});
+    store.set(userConfigAtom, config);
+
+    const { getByTestId } = render(
+      <Provider store={store}>
+        <LocaleProvider>
+          <div>Test content</div>
+        </LocaleProvider>
+      </Provider>,
+    );
+
+    const i18nProvider = getByTestId("i18n-provider");
+    expect(i18nProvider).toBeInTheDocument();
+    // When no locale is specified in config, it should use navigator.language
+    expect(i18nProvider.dataset.locale).toBe("de-DE");
+    expect(i18nProvider).toHaveTextContent("Test content");
+  });
+});