fix(integrations): make the new cards match the existing ones and link to their data

Give the Polar, Oura and Nightscout cards the same parked-state resume banner and test-connection button the other integrations carry, distinct brand icons, a connected-state link to where their data appears, and the correct status-key invalidation so the pill refreshes after a disconnect. Fix the sleep empty-state link that pointed at a non-existent settings slug.
2026-11-12 22:26:13 +00:00 · 2026-06-14 21:15:53 +02:00
commit 46f9dfa47f
@@ -0,0 +1,85 @@
+/**
+ * v1.17.0 — interaction-parity + correctness checks for the Nightscout card.
+ *
+ *   1. A `parked` status renders the warning banner + reconnect button
+ *      (matching the WHOOP card's parked treatment, byte-for-byte classes).
+ *   2. A `connected` status renders the shared TestConnectionButton AND the
+ *      connect→data link to /insights/blood-glucose.
+ *   3. The disconnect mutation invalidates `nightscoutStatus()` — the key the
+ *      status query actually reads — so the pill refreshes after disconnect.
+ */
+import { describe, expect, it, vi } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+
+import { queryKeys } from "@/lib/query-keys";
+
+// Capture the disconnect mutation's onSuccess so the test can assert which
+// query keys it invalidates. Status is driven off a per-test payload.
+let statusPayload: unknown = null;
+const invalidateSpy = vi.fn();
+type OnSuccess = () => void;
+const capturedDisconnectOnSuccess: { fn: OnSuccess | null } = { fn: null };
+
+vi.mock("@tanstack/react-query", () => ({
+  useQuery: () => ({ data: statusPayload, isLoading: false }),
+  useMutation: ({ onSuccess }: { onSuccess?: () => void }) => {
+    // The Nightscout card declares exactly one mutation (disconnect).
+    capturedDisconnectOnSuccess.fn = onSuccess ?? null;
+    return { mutate: vi.fn(), isPending: false };
+  },
+  useQueryClient: () => ({ invalidateQueries: invalidateSpy }),
+}));
+
+import { I18nProvider } from "@/lib/i18n/context";
+import { NightscoutCard } from "../nightscout-card";
+
+function render() {
+  return renderToStaticMarkup(
+    <I18nProvider initialLocale="en">
+      <NightscoutCard />
+    </I18nProvider>,
+  );
+}
+
+describe("NightscoutCard — parked + test + data-link + invalidation", () => {
+  it("renders the parked banner + reconnect button when state is parked", () => {
+    statusPayload = {
+      connected: true,
+      configured: true,
+      state: "parked",
+      lastSuccessAt: null,
+      lastError: "Nightscout unreachable",
+    };
+    const html = render();
+    expect(html).toContain('data-state="parked"');
+    expect(html).toContain('data-testid="nightscout-parked-banner"');
+    expect(html).toContain('data-testid="nightscout-resume-button"');
+    expect(html).toContain("border-warning/30 bg-warning/10");
+  });
+
+  it("renders the test-connection button + data link when connected", () => {
+    statusPayload = {
+      connected: true,
+      configured: true,
+      state: "connected",
+      lastSuccessAt: "2026-06-01T00:00:00.000Z",
+      lastError: null,
+    };
+    const html = render();
+    expect(html).toContain("Test connection");
+    expect(html).toContain('data-testid="nightscout-data-link"');
+    expect(html).toContain('href="/insights/blood-glucose"');
+  });
+
+  it("disconnect invalidates the status key the query reads (nightscoutStatus)", () => {
+    statusPayload = { connected: true, configured: true, state: "connected" };
+    invalidateSpy.mockClear();
+    capturedDisconnectOnSuccess.fn = null;
+    render();
+    const onSuccess = capturedDisconnectOnSuccess.fn as (() => void) | null;
+    expect(typeof onSuccess).toBe("function");
+    onSuccess?.();
+    const invalidatedKeys = invalidateSpy.mock.calls.map((c) => c[0]?.queryKey);
+    expect(invalidatedKeys).toContainEqual(queryKeys.nightscoutStatus());
+  });
+});
@@ -0,0 +1,88 @@
+/**
+ * v1.17.0 — interaction-parity check for the shared OAuth integration card
+ * (Polar / Oura). The new cards must match the existing WHOOP card's
+ * parked-state + test-connection + connect→data treatment:
+ *
+ *   1. A `parked` status renders the warning banner + reconnect button.
+ *   2. A `connected` status renders the shared TestConnectionButton (its
+ *      "Test connection" affordance) AND the connect→data link.
+ *   3. The data link resolves to the provider's insight surface.
+ */
+import { describe, expect, it, vi } from "vitest";
+import { renderToStaticMarkup } from "react-dom/server";
+import { Watch } from "lucide-react";
+
+// Drive the card's own `useQuery` status read off a per-test payload.
+let statusPayload: unknown = null;
+vi.mock("@tanstack/react-query", () => ({
+  useQuery: () => ({ data: statusPayload, isLoading: false }),
+  useMutation: () => ({ mutate: vi.fn(), isPending: false }),
+  useQueryClient: () => ({ invalidateQueries: vi.fn() }),
+}));
+
+import { I18nProvider } from "@/lib/i18n/context";
+import { OAuthProviderCard } from "../oauth-provider-card";
+
+function render() {
+  return renderToStaticMarkup(
+    <I18nProvider initialLocale="en">
+      <OAuthProviderCard
+        provider="polar"
+        statusQueryKey={["polar"]}
+        i18nPrefix="settings.polar"
+        icon={Watch}
+        dataHref="/insights/sleep"
+      />
+    </I18nProvider>,
+  );
+}
+
+describe("OAuthProviderCard — parked + test + data-link parity", () => {
+  it("renders the parked banner + reconnect button when state is parked", () => {
+    statusPayload = {
+      connected: true,
+      configured: true,
+      available: true,
+      state: "parked",
+      lastSuccessAt: null,
+      lastError: "Polar grant expired",
+    };
+    const html = render();
+    expect(html).toContain('data-state="parked"');
+    expect(html).toContain('data-testid="polar-parked-banner"');
+    expect(html).toContain('data-testid="polar-resume-button"');
+    expect(html).toContain("reconnect manually");
+    // The parked banner uses the same warning treatment as the WHOOP card.
+    expect(html).toContain("border-warning/30 bg-warning/10");
+  });
+
+  it("renders the test-connection button + data link when connected", () => {
+    statusPayload = {
+      connected: true,
+      configured: true,
+      available: true,
+      state: "connected",
+      lastSuccessAt: "2026-06-01T00:00:00.000Z",
+      lastError: null,
+    };
+    const html = render();
+    // The shared TestConnectionButton surfaces its "Test connection" label.
+    expect(html).toContain("Test connection");
+    // connect→data link points at the provider's insight surface.
+    expect(html).toContain('data-testid="polar-data-link"');
+    expect(html).toContain('href="/insights/sleep"');
+  });
+
+  it("does not render the data link or test button when disconnected", () => {
+    statusPayload = {
+      connected: false,
+      configured: false,
+      available: true,
+    };
+    const html = render();
+    expect(html).not.toContain('data-testid="polar-data-link"');
+    expect(html).not.toContain("Test connection");
+    // The connect CTA stands in instead.
+    expect(html).toContain('data-testid="polar-connect"');
+  });
+});
@@ -7,9 +7,10 @@
 // consolidated envelope. Warm copy, mobile-first, the private-network opt-in
 // toggle maps to `nightscoutAllowPrivateHost`.

-import { useState } from "react";
+import { useRef, useState } from "react";
+import Link from "next/link";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Activity, Link2, Loader2, Save, Unlink } from "lucide-react";
+import { ArrowRight, Droplet, Link2, Loader2, Save, Unlink } from "lucide-react";

 import {
  AlertDialog,
@@ -32,6 +33,7 @@ import {
  IntegrationStatusPill,
  type IntegrationPillState,
 } from "@/components/settings/integration-status-pill";
+import { TestConnectionButton } from "@/components/settings/test-connection-button";
 import { apiFetchRaw, apiGet, apiPost } from "@/lib/api/api-fetch";
 import { useTranslations } from "@/lib/i18n/context";
 import { invalidateKeys, measurementDependentKeys, queryKeys } from "@/lib/query-keys";
@@ -82,6 +84,8 @@ export function NightscoutCard({ enabled = true }: { enabled?: boolean }) {
    refetchOnWindowFocus: true,
  });

+  const formRef = useRef<HTMLFormElement | null>(null);
+
  const disconnect = useMutation({
    mutationFn: async () => {
      await apiPost("/api/nightscout/disconnect");
@@ -90,7 +94,15 @@ export function NightscoutCard({ enabled = true }: { enabled?: boolean }) {
      setUrl("");
      setToken("");
      setAllowPrivateHost(false);
-      queryClient.invalidateQueries({ queryKey: queryKeys.nightscout() });
+      // The status read keys on `nightscoutStatus()`; invalidate it so the
+      // pill flips back after a disconnect (matching the Withings / WHOOP
+      // pattern), alongside the cross-integration envelope.
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.nightscoutStatus(),
+      });
+      queryClient.invalidateQueries({
+        queryKey: queryKeys.integrationsStatus(),
+      });
    },
  });

@@ -114,7 +126,12 @@ export function NightscoutCard({ enabled = true }: { enabled?: boolean }) {
        setMsgType("success");
        setToken("");
        void invalidateKeys(queryClient, measurementDependentKeys);
-        queryClient.invalidateQueries({ queryKey: queryKeys.nightscout() });
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.nightscoutStatus(),
+        });
+        queryClient.invalidateQueries({
+          queryKey: queryKeys.integrationsStatus(),
+        });
      } else {
        let detail = t("settings.nightscoutConnectFailed");
        try {
@@ -145,7 +162,7 @@ export function NightscoutCard({ enabled = true }: { enabled?: boolean }) {
      className="bg-card border-border rounded-xl border p-4 sm:p-6"
    >
      <SettingsCardHeader
-        icon={Activity}
+        icon={Droplet}
        title={t("settings.nightscout")}
        titleAccessory={
          <span className="bg-muted text-foreground rounded-full px-2 py-0.5 text-[0.6875rem] font-medium">
@@ -166,11 +183,46 @@ export function NightscoutCard({ enabled = true }: { enabled?: boolean }) {
      <div className="mt-4 space-y-4 pl-7">
        {errorMessage && <IntegrationErrorMessage message={errorMessage} />}

+        {/* Parked-integration resume CTA. Surfaces only when the row state
+            is `parked` (>24h of persistent failures). Nightscout has no OAuth
+            redirect — the user re-validates by re-submitting the connect form,
+            so "reconnect" scrolls the form into view + focuses the URL field.
+            Markup matches the WHOOP card byte for byte. */}
+        {pillState === "parked" && (
+          <div
+            data-testid="nightscout-parked-banner"
+            className="border-warning/30 bg-warning/10 flex flex-wrap items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm"
+          >
+            <span className="text-warning min-w-0 text-xs break-words">
+              {t("settings.integrationPill.parkedReconnect")}
+            </span>
+            <Button
+              type="button"
+              size="sm"
+              variant="outline"
+              onClick={() => {
+                formRef.current?.scrollIntoView({
+                  behavior: "smooth",
+                  block: "center",
+                });
+                formRef.current
+                  ?.querySelector<HTMLInputElement>("#nightscout-url")
+                  ?.focus();
+              }}
+              data-testid="nightscout-resume-button"
+              className="min-h-11"
+            >
+              <Link2 className="h-3.5 w-3.5" />
+              {t("settings.integrationPill.resumeCta")}
+            </Button>
+          </div>
+        )}
+
        <p className="text-muted-foreground text-xs">
          {t("settings.nightscoutHelp")}
        </p>

-        <form onSubmit={handleConnect} className="space-y-3">
+        <form ref={formRef} onSubmit={handleConnect} className="space-y-3">
          <div className="space-y-1.5">
            <Label htmlFor="nightscout-url">{t("settings.nightscoutUrl")}</Label>
            <Input
@@ -263,37 +315,56 @@ export function NightscoutCard({ enabled = true }: { enabled?: boolean }) {
        </form>

        {status?.connected && (
-          <AlertDialog>
-            <AlertDialogTrigger asChild>
-              <Button
-                variant="outline"
-                size="sm"
-                className="text-destructive min-h-11"
-              >
-                <Unlink className="h-3.5 w-3.5" />
-                {t("settings.nightscoutDisconnect")}
-              </Button>
-            </AlertDialogTrigger>
-            <AlertDialogContent>
-              <AlertDialogHeader>
-                <AlertDialogTitle>
-                  {t("settings.nightscoutDisconnectTitle")}
-                </AlertDialogTitle>
-                <AlertDialogDescription>
-                  {t("settings.nightscoutDisconnectDescription")}
-                </AlertDialogDescription>
-              </AlertDialogHeader>
-              <AlertDialogFooter>
-                <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
-                <AlertDialogAction
-                  variant="destructive"
-                  onClick={() => disconnect.mutate()}
-                >
-                  {t("settings.nightscoutDisconnect")}
-                </AlertDialogAction>
-              </AlertDialogFooter>
-            </AlertDialogContent>
-          </AlertDialog>
+          <>
+            <div className="flex flex-wrap items-start gap-2 [&>*]:min-w-[10rem] sm:[&>*]:min-w-0">
+              <TestConnectionButton
+                endpoint="/api/nightscout/test"
+                disabled={!status?.connected}
+              />
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="text-destructive min-h-11"
+                  >
+                    <Unlink className="h-3.5 w-3.5" />
+                    {t("settings.nightscoutDisconnect")}
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>
+                      {t("settings.nightscoutDisconnectTitle")}
+                    </AlertDialogTitle>
+                    <AlertDialogDescription>
+                      {t("settings.nightscoutDisconnectDescription")}
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
+                    <AlertDialogAction
+                      variant="destructive"
+                      onClick={() => disconnect.mutate()}
+                    >
+                      {t("settings.nightscoutDisconnect")}
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </div>
+            {/* connect→data loop: a discreet link to where the glucose
+                readings now surface — doubles as the "your data is richer"
+                cue. */}
+            <Link
+              href="/insights/blood-glucose"
+              data-testid="nightscout-data-link"
+              className="text-primary inline-flex items-center gap-1 text-xs underline-offset-2 hover:underline"
+            >
+              {t("settings.nightscoutViewData")}
+              <ArrowRight className="h-3 w-3" />
+            </Link>
+          </>
        )}
      </div>
    </div>
@@ -8,8 +8,9 @@
 // Mirrors the Nightscout card's self-contained status pattern.

 import { useState } from "react";
+import Link from "next/link";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
-import { Activity, Link2, Unlink } from "lucide-react";
+import { ArrowRight, Link2, Unlink, type LucideIcon } from "lucide-react";

 import {
  AlertDialog,
@@ -28,6 +29,7 @@ import {
  IntegrationStatusPill,
  type IntegrationPillState,
 } from "@/components/settings/integration-status-pill";
+import { TestConnectionButton } from "@/components/settings/test-connection-button";
 import { apiGet, apiPost } from "@/lib/api/api-fetch";
 import { useTranslations } from "@/lib/i18n/context";
 import { invalidateKeys, measurementDependentKeys } from "@/lib/query-keys";
@@ -68,6 +70,10 @@ export interface OAuthProviderCardProps {
  statusQueryKey: readonly unknown[];
  /** i18n key prefix (e.g. `settings.polar`). */
  i18nPrefix: string;
+  /** Distinct card glyph, kept in the same size/treatment as the other cards. */
+  icon: LucideIcon;
+  /** Where this provider's synced data surfaces (e.g. `/insights/sleep`). */
+  dataHref: string;
  enabled?: boolean;
 }

@@ -75,6 +81,8 @@ export function OAuthProviderCard({
  provider,
  statusQueryKey,
  i18nPrefix,
+  icon,
+  dataHref,
  enabled = true,
 }: OAuthProviderCardProps) {
  const { t } = useTranslations();
@@ -116,7 +124,7 @@ export function OAuthProviderCard({
      className="bg-card border-border rounded-xl border p-4 sm:p-6"
    >
      <SettingsCardHeader
-        icon={Activity}
+        icon={icon}
        title={t(`${i18nPrefix}`)}
        description={<p>{t(`${i18nPrefix}Description`)}</p>}
        status={
@@ -140,6 +148,36 @@ export function OAuthProviderCard({
          </p>
        )}

+        {/* Parked-integration resume CTA. Surfaces only when the row state
+            is `parked` (>24h of persistent failures). For an env-based OAuth
+            provider there are no stored BYO credentials to re-validate — the
+            grant itself has to be re-issued, so "reconnect" re-initiates the
+            existing connect flow (`/api/<provider>/connect`); a successful
+            callback clears the park. Markup matches the WHOOP card byte for
+            byte. */}
+        {pillState === "parked" && (
+          <div
+            data-testid={`${provider}-parked-banner`}
+            className="border-warning/30 bg-warning/10 flex flex-wrap items-center justify-between gap-2 rounded-md border px-3 py-2 text-sm"
+          >
+            <span className="text-warning min-w-0 text-xs break-words">
+              {t("settings.integrationPill.parkedReconnect")}
+            </span>
+            <Button
+              type="button"
+              size="sm"
+              variant="outline"
+              onClick={handleConnect}
+              disabled={serverUnavailable}
+              data-testid={`${provider}-resume-button`}
+              className="min-h-11"
+            >
+              <Link2 className="h-3.5 w-3.5" />
+              {t("settings.integrationPill.resumeCta")}
+            </Button>
+          </div>
+        )}
+
        <p className="text-muted-foreground text-xs">
          {t(`${i18nPrefix}Help`)}
        </p>
@@ -154,40 +192,57 @@ export function OAuthProviderCard({
        )}

        {status?.connected ? (
-          <div className="flex flex-wrap items-start gap-2 [&>*]:min-w-[10rem] sm:[&>*]:min-w-0">
-            <AlertDialog>
-              <AlertDialogTrigger asChild>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  className="text-destructive min-h-11"
-                  data-testid={`${provider}-disconnect`}
-                >
-                  <Unlink className="h-3.5 w-3.5" />
-                  {t(`${i18nPrefix}Disconnect`)}
-                </Button>
-              </AlertDialogTrigger>
-              <AlertDialogContent>
-                <AlertDialogHeader>
-                  <AlertDialogTitle>
-                    {t(`${i18nPrefix}DisconnectTitle`)}
-                  </AlertDialogTitle>
-                  <AlertDialogDescription>
-                    {t(`${i18nPrefix}DisconnectDescription`)}
-                  </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                  <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
-                  <AlertDialogAction
-                    variant="destructive"
-                    onClick={() => disconnect.mutate()}
+          <>
+            <div className="flex flex-wrap items-start gap-2 [&>*]:min-w-[10rem] sm:[&>*]:min-w-0">
+              <TestConnectionButton
+                endpoint={`/api/${provider}/test`}
+                disabled={!status?.connected}
+              />
+              <AlertDialog>
+                <AlertDialogTrigger asChild>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="text-destructive min-h-11"
+                    data-testid={`${provider}-disconnect`}
                  >
+                    <Unlink className="h-3.5 w-3.5" />
                    {t(`${i18nPrefix}Disconnect`)}
-                  </AlertDialogAction>
-                </AlertDialogFooter>
-              </AlertDialogContent>
-            </AlertDialog>
-          </div>
+                  </Button>
+                </AlertDialogTrigger>
+                <AlertDialogContent>
+                  <AlertDialogHeader>
+                    <AlertDialogTitle>
+                      {t(`${i18nPrefix}DisconnectTitle`)}
+                    </AlertDialogTitle>
+                    <AlertDialogDescription>
+                      {t(`${i18nPrefix}DisconnectDescription`)}
+                    </AlertDialogDescription>
+                  </AlertDialogHeader>
+                  <AlertDialogFooter>
+                    <AlertDialogCancel>{t("common.cancel")}</AlertDialogCancel>
+                    <AlertDialogAction
+                      variant="destructive"
+                      onClick={() => disconnect.mutate()}
+                    >
+                      {t(`${i18nPrefix}Disconnect`)}
+                    </AlertDialogAction>
+                  </AlertDialogFooter>
+                </AlertDialogContent>
+              </AlertDialog>
+            </div>
+            {/* connect→data loop: a discreet link to where this provider's
+                readings now surface — doubles as the "your data is richer"
+                cue. */}
+            <Link
+              href={dataHref}
+              data-testid={`${provider}-data-link`}
+              className="text-primary inline-flex items-center gap-1 text-xs underline-offset-2 hover:underline"
+            >
+              {t(`${i18nPrefix}ViewData`)}
+              <ArrowRight className="h-3 w-3" />
+            </Link>
+          </>
        ) : (
          <Button
            type="button"
@@ -3,6 +3,8 @@
 // v1.17.0 (F4) — Oura Cloud integration card. Thin wrapper over the shared
 // env-based OAuth card.

+import { CircleDot } from "lucide-react";
+
 import { OAuthProviderCard } from "@/components/settings/integrations/oauth-provider-card";
 import { queryKeys } from "@/lib/query-keys";

@@ -12,6 +14,8 @@ export function OuraCard({ enabled = true }: { enabled?: boolean }) {
      provider="oura"
      statusQueryKey={queryKeys.oura()}
      i18nPrefix="settings.oura"
+      icon={CircleDot}
+      dataHref="/insights/sleep"
      enabled={enabled}
    />
  );
@@ -3,6 +3,8 @@
 // v1.17.0 (F4) — Polar AccessLink integration card. Thin wrapper over the
 // shared env-based OAuth card.

+import { Watch } from "lucide-react";
+
 import { OAuthProviderCard } from "@/components/settings/integrations/oauth-provider-card";
 import { queryKeys } from "@/lib/query-keys";

@@ -12,6 +14,8 @@ export function PolarCard({ enabled = true }: { enabled?: boolean }) {
      provider="polar"
      statusQueryKey={queryKeys.polar()}
      i18nPrefix="settings.polar"
+      icon={Watch}
+      dataHref="/insights/sleep"
      enabled={enabled}
    />
  );