@multiplatform.one/frappe-ui 7.8.0 → 7.11.0

package/src/FrappeChartCard.spec.tsx

@@ -0,0 +1,179 @@
+/**
+ * MPO-287: a `dataSource` with no data source in scope is a misconfiguration,
+ * not static mode — the same defect MPO-237 fixed one component over. The
+ * card asked for a computed series and there is nowhere to compute it, so
+ * `config.data` must never be painted as the series: a plausible shape
+ * presented confidently is worse than a visible gap, because nothing
+ * downstream can tell it was never computed.
+ *
+ * Static mode (no `dataSource` at all) is the documented, intended path and
+ * is asserted here too, so the fix cannot over-correct into it. A fixture
+ * corpus is a data source (MPO-228), so it stands in for a baseURL and must
+ * not trip the guard.
+ *
+ * The chart body itself is not assertable here: ChartSurface measures its
+ * own width through `onLayout`, which never fires in happy-dom, so no SVG
+ * reaches the DOM. Two things stand in. The card's plain title renders only
+ * when a series reached `ChartCard` — the skeleton, the empty surface and
+ * the not-configured surface each carry different text. And `formatLabel`
+ * is called once per computed group, so spying on it proves whether the
+ * aggregate ran at all.
+ */
+
+import { InMemoryFixtureProvider } from "@multiplatform.one/frappe";
+import { renderWithProviders } from "@multiplatform.one/test-utils";
+import { cleanup, screen, waitFor } from "@testing-library/react";
+import i18next from "i18next";
+import { initReactI18next } from "react-i18next";
+import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest";
+import { FrappeChartCard } from "./FrappeChartCard";
+import { FrappeProvider } from "./FrappeProvider";
+import { __resetFrappeDevWarnSeen } from "./shared/devWarn";
+
+beforeAll(async () => {
+  await i18next.use(initReactI18next).init({
+    lng: "en",
+    interpolation: { escapeValue: false },
+    resources: { en: { translation: {} } },
+  });
+});
+
+beforeEach(() => {
+  __resetFrappeDevWarnSeen();
+});
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+const config = {
+  id: "todo-by-status",
+  title: "ToDos by Status",
+  type: "bar" as const,
+  data: [
+    { label: "Open", value: 41 },
+    { label: "Closed", value: 7 },
+  ],
+};
+
+const dataSource = { doctype: "ToDo", groupBy: "status" };
+
+const todos = [
+  { name: "TD-1", doctype: "ToDo", status: "Open" },
+  { name: "TD-2", doctype: "ToDo", status: "Open" },
+  { name: "TD-3", doctype: "ToDo", status: "Closed" },
+];
+
+describe("FrappeChartCard with a dataSource and no baseURL (MPO-287)", () => {
+  it("does not render config.data as though it were the computed series", () => {
+    vi.spyOn(console, "warn").mockImplementation(() => {});
+    renderWithProviders(<FrappeChartCard config={config} dataSource={dataSource} />);
+
+    expect(screen.queryByText("ToDos by Status")).toBeNull();
+    expect(screen.getByText("ToDos by Status is not configured")).toBeInTheDocument();
+    expect(screen.getByText(/no Frappe baseURL is in scope/)).toBeInTheDocument();
+  });
+
+  it("logs a development warning naming the missing baseURL", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    renderWithProviders(<FrappeChartCard config={config} dataSource={dataSource} />);
+
+    const line = warn.mock.calls.map((call) => String(call[0])).join("\n");
+    expect(line).toContain("[frappe-ui] chart-datasource-without-baseurl");
+    expect(line).toContain("baseURL");
+    expect(line).toContain("component=FrappeChartCard");
+    expect(line).toContain("id=todo-by-status");
+    expect(line).toContain("doctype=ToDo");
+  });
+
+  it("warns once per card, not once per render", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const { rerender } = renderWithProviders(
+      <FrappeChartCard config={config} dataSource={dataSource} />,
+    );
+    rerender(<FrappeChartCard config={{ ...config }} dataSource={dataSource} />);
+    rerender(<FrappeChartCard config={{ ...config }} dataSource={dataSource} />);
+
+    const lines = warn.mock.calls.filter((call) =>
+      String(call[0]).includes("chart-datasource-without-baseurl"),
+    );
+    expect(lines).toHaveLength(1);
+  });
+
+  it("stays silent in production", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const previous = process.env.NODE_ENV;
+    process.env.NODE_ENV = "production";
+    try {
+      renderWithProviders(<FrappeChartCard config={config} dataSource={dataSource} />);
+    } finally {
+      process.env.NODE_ENV = previous;
+    }
+
+    expect(
+      warn.mock.calls.filter((call) =>
+        String(call[0]).includes("chart-datasource-without-baseurl"),
+      ),
+    ).toHaveLength(0);
+  });
+});
+
+describe("FrappeChartCard configured paths stay untouched (MPO-287)", () => {
+  it("renders config.data with no warning when no dataSource is set", () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    renderWithProviders(<FrappeChartCard config={config} />);
+
+    expect(screen.getByText("ToDos by Status")).toBeInTheDocument();
+    expect(screen.queryByText("ToDos by Status is not configured")).toBeNull();
+    expect(
+      warn.mock.calls.filter((call) =>
+        String(call[0]).includes("chart-datasource-without-baseurl"),
+      ),
+    ).toHaveLength(0);
+  });
+
+  it("computes the series, and does not warn, when the provider supplies a baseURL", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const formatLabel = vi.fn((label: string) => label);
+    renderWithProviders(
+      <FrappeProvider baseURL="http://test" fixtures={new InMemoryFixtureProvider({ ToDo: todos })}>
+        <FrappeChartCard config={config} dataSource={{ ...dataSource, formatLabel }} />
+      </FrappeProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByText("ToDos by Status")).toBeInTheDocument());
+    expect([...new Set(formatLabel.mock.calls.map((call) => call[0]))].sort()).toEqual([
+      "Closed",
+      "Open",
+    ]);
+    expect(screen.queryByText("ToDos by Status is not configured")).toBeNull();
+    expect(
+      warn.mock.calls.filter((call) =>
+        String(call[0]).includes("chart-datasource-without-baseurl"),
+      ),
+    ).toHaveLength(0);
+  });
+
+  it("treats a fixture corpus as the data source when no baseURL is set (MPO-228)", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const formatLabel = vi.fn((label: string) => label);
+    renderWithProviders(
+      <FrappeProvider fixtures={new InMemoryFixtureProvider({ ToDo: todos })}>
+        <FrappeChartCard config={config} dataSource={{ ...dataSource, formatLabel }} />
+      </FrappeProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByText("ToDos by Status")).toBeInTheDocument());
+    expect([...new Set(formatLabel.mock.calls.map((call) => call[0]))].sort()).toEqual([
+      "Closed",
+      "Open",
+    ]);
+    expect(screen.queryByText("ToDos by Status is not configured")).toBeNull();
+    expect(
+      warn.mock.calls.filter((call) =>
+        String(call[0]).includes("chart-datasource-without-baseurl"),
+      ),
+    ).toHaveLength(0);
+  });
+});

package/src/FrappeChartCard.tsx

@@ -15,6 +15,14 @@
  * (permission failures called out), catalog empty state when the aggregate
  * returns no groups, and a subtle stale dim while a post-event refetch is
  * in flight.
+ *
+ * A `dataSource` with no data source in scope — no `baseURL` from the prop
+ * or a FrappeProvider, and no fixture corpus either — is a misconfiguration,
+ * not static mode: the caller asked for a computed series and there is
+ * nowhere to compute it. The card renders the not-configured surface and
+ * warns in dev. It never falls back to `config.data`, which would present
+ * an uncomputed shape as the series. A fixture corpus answers every read
+ * locally, so it stands in for a baseURL (MPO-228).
  */
 import {
   AsyncBoundary,
@@ -23,12 +31,13 @@ import {
   type ChartCardProps,
   type ChartConfig,
 } from "@multiplatform.one/components";
-import React, { useMemo } from "react";
+import React, { useEffect, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { YStack, type YStackProps } from "tamagui";
 import { useResolvedKnobs } from "@multiplatform.one/theme";
 import { ChartCard } from "./ChartCard";
 import { useFrappeConfig } from "./FrappeProvider";
+import { frappeDevWarn } from "./shared/devWarn";
 import {
   useFrappeAggregate,
   type FrappeAggregateConnection,
@@ -52,10 +61,18 @@ export interface FrappeChartDataSource {
 }
 
 export interface FrappeChartCardProps extends Omit<ChartCardProps, "config"> {
-  /** Chart chrome (title, type, height…). In live mode `data` is overridden. */
+  /**
+   * Chart chrome (title, type, height…). In live mode `data` is overridden.
+   * With a `dataSource` and no data source in scope, `data` is not rendered
+   * at all.
+   */
   config: Omit<ChartConfig, "data"> & { data?: ChartConfig["data"] };
   /** When set, the chart series goes live against this doctype. */
   dataSource?: FrappeChartDataSource;
+  /**
+   * Falls back to the FrappeProvider's. Required whenever `dataSource` is
+   * set, unless the provider carries a fixture corpus.
+   */
   baseURL?: string;
   auth?: { useToken?: boolean; token?: string; type?: string };
   syncOptions?: unknown;
@@ -94,8 +111,9 @@ export function FrappeChartCard({
   const { t } = useTranslation();
 
   const finalBaseURL = baseURL ?? providerConfig?.baseURL;
+  const fixtures = providerConfig?.fixtures;
   const connection: FrappeAggregateConnection | undefined =
-    dataSource && finalBaseURL
+    dataSource && (finalBaseURL || fixtures)
       ? {
           baseURL: finalBaseURL,
           socketPort: providerConfig?.socketPort,
@@ -104,10 +122,22 @@ export function FrappeChartCard({
           auth: auth ?? providerConfig?.auth,
           syncOptions: syncOptions ?? providerConfig?.syncOptions,
           realtime: providerConfig?.realtime,
-          fixtures: providerConfig?.fixtures,
+          fixtures,
         }
       : undefined;
 
+  const missingConnection = !!dataSource && !connection;
+  const doctype = dataSource?.doctype;
+  useEffect(() => {
+    if (!missingConnection) return;
+    frappeDevWarn("chart-datasource-without-baseurl", {
+      component: "FrappeChartCard",
+      id: config.id,
+      doctype,
+      suggest: "set baseURL on FrappeChartCard or on the FrappeProvider above it",
+    });
+  }, [missingConnection, config.id, doctype]);
+
   const { groups, isLoading, isStale, error, isPermissionError } = useFrappeAggregate(connection, {
     doctype: dataSource?.doctype ?? "",
     aggregate: dataSource?.aggregate,
@@ -128,11 +158,30 @@ export function FrappeChartCard({
     return { ...config, data } as ChartConfig;
   }, [config, dataSource, groups]);
 
-  // Static passthrough — sanitizing bridge, palette untouched.
-  if (!dataSource || !connection) {
+  // Static passthrough — sanitizing bridge, palette untouched. The caller
+  // supplied the series and asked for no computation.
+  if (!dataSource) {
     return <ChartCard config={liveConfig} {...chartCardProps} />;
   }
 
+  // A requested series with nowhere to compute it. `config.data` is the
+  // caller's placeholder, so drawing it here would publish a shape nothing
+  // downstream could tell was never computed.
+  if (!connection) {
+    return (
+      <AsyncBoundary
+        compact
+        error
+        errorTitle={t("{{title}} is not configured", { title: config.title })}
+        errorDescription={t(
+          "This chart reads {{doctype}} live, but no Frappe baseURL is in scope, so the series was never computed.",
+          { doctype: dataSource.doctype },
+        )}
+        {...(chartCardProps as YStackProps)}
+      />
+    );
+  }
+
   if (isLoading) {
     return (
       <ChartCardSkeleton

package/src/FrappeKPICard.spec.tsx

@@ -125,4 +125,29 @@ describe("FrappeKPICard configured paths stay untouched (MPO-237)", () => {
       warn.mock.calls.filter((call) => String(call[0]).includes("kpi-datasource-without-baseurl")),
     ).toHaveLength(0);
   });
+
+  it("treats a fixture corpus as the data source when no baseURL is set (MPO-228)", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    renderWithProviders(
+      <FrappeProvider
+        fixtures={
+          new InMemoryFixtureProvider({
+            ToDo: [
+              { name: "TD-1", doctype: "ToDo", status: "Open" },
+              { name: "TD-2", doctype: "ToDo", status: "Open" },
+            ],
+          })
+        }
+      >
+        <FrappeKPICard config={config} dataSource={{ doctype: "ToDo" }} />
+      </FrappeProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByText("2")).toBeInTheDocument());
+    expect(screen.queryByText("999")).toBeNull();
+    expect(screen.queryByText("Open ToDos is not configured")).toBeNull();
+    expect(
+      warn.mock.calls.filter((call) => String(call[0]).includes("kpi-datasource-without-baseurl")),
+    ).toHaveLength(0);
+  });
 });

package/src/FrappeKPICard.tsx

@@ -12,11 +12,13 @@
  * (the card dims while a post-event refetch is in flight), and "—" when the
  * aggregate has no result (e.g. avg over an empty set).
  *
- * A `dataSource` with no `baseURL` in scope (neither the prop nor a
- * FrappeProvider) is a misconfiguration, not static mode: the caller asked
- * for a computed figure and there is nowhere to compute it. The card renders
- * the not-configured surface and warns in dev. It never falls back to
- * `config.value`, which would present an uncomputed number as the KPI.
+ * A `dataSource` with no data source in scope — no `baseURL` from the prop
+ * or a FrappeProvider, and no fixture corpus either — is a misconfiguration,
+ * not static mode: the caller asked for a computed figure and there is
+ * nowhere to compute it. The card renders the not-configured surface and
+ * warns in dev. It never falls back to `config.value`, which would present
+ * an uncomputed number as the KPI. A fixture corpus answers every read
+ * locally, so it stands in for a baseURL (MPO-228).
  */
 import {
   AsyncBoundary,
@@ -57,7 +59,10 @@ export interface FrappeKPICardProps extends Omit<YStackProps, "children"> {
   config: KPICardConfig;
   /** When set, the card's value goes live against this doctype. */
   dataSource?: FrappeKPIDataSource;
-  /** Falls back to the FrappeProvider's. Required whenever `dataSource` is set. */
+  /**
+   * Falls back to the FrappeProvider's. Required whenever `dataSource` is
+   * set, unless the provider carries a fixture corpus.
+   */
   baseURL?: string;
   auth?: { useToken?: boolean; token?: string; type?: string };
   syncOptions?: unknown;
@@ -87,8 +92,9 @@ export function FrappeKPICard({
   const { t } = useTranslation();
 
   const finalBaseURL = baseURL ?? providerConfig?.baseURL;
+  const fixtures = providerConfig?.fixtures;
   const connection: FrappeAggregateConnection | undefined =
-    dataSource && finalBaseURL
+    dataSource && (finalBaseURL || fixtures)
       ? {
           baseURL: finalBaseURL,
           socketPort: providerConfig?.socketPort,
@@ -97,21 +103,21 @@ export function FrappeKPICard({
           auth: auth ?? providerConfig?.auth,
           syncOptions: syncOptions ?? providerConfig?.syncOptions,
           realtime: providerConfig?.realtime,
-          fixtures: providerConfig?.fixtures,
+          fixtures,
         }
       : undefined;
 
-  const missingBaseURL = !!dataSource && !finalBaseURL;
+  const missingConnection = !!dataSource && !connection;
   const doctype = dataSource?.doctype;
   useEffect(() => {
-    if (!missingBaseURL) return;
+    if (!missingConnection) return;
     frappeDevWarn("kpi-datasource-without-baseurl", {
       component: "FrappeKPICard",
       id: config.id,
       doctype,
       suggest: "set baseURL on FrappeKPICard or on the FrappeProvider above it",
     });
-  }, [missingBaseURL, config.id, doctype]);
+  }, [missingConnection, config.id, doctype]);
 
   const { value, isLoading, isStale, error, isPermissionError } = useFrappeAggregate(connection, {
     doctype: dataSource?.doctype ?? "",

package/src/FrappeListView.tsx

@@ -298,7 +298,7 @@ export function FrappeListView<TDoc extends { name: string; doctype: string }>({
               {title}
             </Text>
             {subtitleParts.length > 0 && (
-              <Text {...knobProps.body} color={componentColors.text.muted} numberOfLines={1}>
+              <Text {...knobProps.body} color={knobProps.textAccentColor} numberOfLines={1}>
                 {subtitleParts.map((part, index) => (
                   <React.Fragment key={index}>
                     {index > 0 ? " · " : null}
@@ -432,7 +432,7 @@ export function FrappeListView<TDoc extends { name: string; doctype: string }>({
         {...stackProps}
       >
         <Spinner size="large" />
-        <Text {...knobProps.body} color={componentColors.text.muted} marginTop="$2">
+        <Text {...knobProps.body} color={knobProps.textAccentColor} marginTop="$2">
           {t("Loading {{doctype}} schema...", { doctype })}
         </Text>
       </YStack>
@@ -517,17 +517,17 @@ export function FrappeListView<TDoc extends { name: string; doctype: string }>({
         {...knobProps.panelPadding}
         {...knobProps.gap}
       >
-        <Text {...knobProps.label} color={componentColors.text.muted}>
+        <Text {...knobProps.label} color={knobProps.textAccentColor}>
           {t("Filters")}
         </Text>
         {standardFilterFields.length > 0 && (
           <YStack {...knobProps.gap}>
             {standardFilterFields.map((field) => (
               <YStack key={field.fieldname} {...knobProps.gap}>
-                <Text {...knobProps.label} color={componentColors.text.muted}>
+                <Text {...knobProps.label} color={knobProps.textAccentColor}>
                   {field.label || field.fieldname}
                 </Text>
-                <Text {...knobProps.body} color={componentColors.text.muted}>
+                <Text {...knobProps.body} color={knobProps.textAccentColor}>
                   {field.fieldtype === "Select" ? field.options || "—" : "—"}
                 </Text>
               </YStack>
@@ -536,7 +536,7 @@ export function FrappeListView<TDoc extends { name: string; doctype: string }>({
         )}
         {savedFiltersHook.filters.length > 0 && (
           <YStack {...knobProps.gap}>
-            <Text {...knobProps.label} color={componentColors.text.muted}>
+            <Text {...knobProps.label} color={knobProps.textAccentColor}>
               {t("Saved Filters")}
             </Text>
             <SavedFilterDropdown