refactor(auth): update Google connection UI and logic

e2e/oauth/sidebar-connection-status.spec.ts

@@ -1,29 +1,20 @@
-import { expect, test } from "@playwright/test";
+import { type Page, expect, test } from "@playwright/test";
 import {
   type GoogleConnectionState,
   SIDEBAR_STATUS_LABELS,
+  expectGoogleConnectionStateInStore,
   markUserAsAuthenticated,
   prepareOAuthTestPage,
   setGoogleConnectionState,
   waitForAppReady,
 } from "../utils/oauth-test-utils";
 
 /**
- * E2E tests for sidebar Google Calendar connection status.
+ * E2E tests for Google Calendar connection state (Redux + header status when visible).
  *
- * These tests verify that the sidebar status container correctly reflects the 5 connection
- * states from the server (GoogleConnectionState), plus the client-only "checking"
- * state that appears while metadata is loading.
- *
- * Connection states and their status messages:
- * - NOT_CONNECTED: "Google Calendar not connected. Click to connect."
- * - RECONNECT_REQUIRED: "Google Calendar needs reconnecting. Click to reconnect."
- * - IMPORTING: "Google Calendar is syncing in the background."
- * - HEALTHY: "Google Calendar connected."
- * - ATTENTION: "Google Calendar needs repair. Click to repair."
- * - "checking" (client-only): "Checking Google Calendar status…"
- *
- * The status is rendered in SidebarIconRow with role="status" and managed by useConnectGoogle hook.
+ * HeaderInfoIcon only renders role="status" for warning/error states (reconnect required,
+ * needs repair). Other states are reflected in Redux only; command palette still exposes
+ * connect/repair actions.
  *
  * NOTE: These tests are skipped on mobile because the MobileGate component
  * blocks the entire app on mobile viewports.
@@ -35,10 +26,8 @@ test.describe("Sidebar Connection Status", () => {
   // Run tests serially to avoid state interference
   test.describe.configure({ mode: "serial" });
 
-  // Helper to get the sidebar status container
-  // Filter: has aria-label (excludes DndLiveRegion), no aria-busy (excludes overlay)
-  const getSidebarStatus = (page: import("@playwright/test").Page) =>
-    page.locator('#sidebar [role="status"][aria-label]:not([aria-busy])');
+  const getHeaderGoogleStatus = (page: Page) =>
+    page.locator("#cal").getByRole("status", { name: /Google Calendar/i });
 
   test.beforeEach(async ({ page }) => {
     await prepareOAuthTestPage(page);
@@ -50,48 +39,33 @@ test.describe("Sidebar Connection Status", () => {
     await setGoogleConnectionState(page, "NOT_CONNECTED");
   });
 
-  test("shows NOT_CONNECTED status", async ({ page }) => {
-    // State already set in beforeEach - just verify it
-
-    const status = getSidebarStatus(page);
-    await expect(status).toHaveAttribute(
-      "aria-label",
-      SIDEBAR_STATUS_LABELS.notConnected,
-    );
+  test("stores NOT_CONNECTED in Redux (header icon hidden for muted state)", async ({
+    page,
+  }) => {
+    await expectGoogleConnectionStateInStore(page, "NOT_CONNECTED");
   });
 
-  test("shows checking status when metadata is loading", async ({ page }) => {
-    // The "checking" state requires:
-    // 1. userMetadataStatus === "loading"
-    // 2. hasUserEverAuthenticated() returns true (localStorage flag)
-    //
-    // Set the localStorage flag first, then force loading state.
+  test("checking path: authenticated user with metadata loading", async ({
+    page,
+  }) => {
     await markUserAsAuthenticated(page);
 
-    // Force the loading state by dispatching both clear and setLoading
     await page.evaluate(() => {
       const store = window.__COMPASS_E2E_STORE__;
       if (!store) return;
-      // Clear any existing metadata
       store.dispatch({ type: "userMetadata/clear" });
-      // Set to loading state
       store.dispatch({ type: "userMetadata/setLoading" });
     });
 
-    // Wait for state to be in loading
     await page.waitForFunction(
       () =>
         window.__COMPASS_E2E_STORE__?.getState()?.userMetadata?.status ===
         "loading",
       { timeout: 5000 },
     );
 
-    // Wait for status container to show "checking" state via aria-label
-    const status = getSidebarStatus(page);
-    await expect(status).toHaveAttribute(
-      "aria-label",
-      /Checking Google Calendar/i,
-    );
+    // "Checking" does not render HeaderInfoIcon (muted / no warning-error icon).
+    await expect(getHeaderGoogleStatus(page)).toHaveCount(0);
   });
 
   test("shows IMPORTING status", async ({ page }) => {
@@ -118,11 +92,6 @@ test.describe("Sidebar Connection Status - State Transitions", () => {
   // Run tests serially to avoid state interference
   test.describe.configure({ mode: "serial" });
 
-  // Helper to get the sidebar status container
-  // Filter: has aria-label (excludes DndLiveRegion), no aria-busy (excludes overlay)
-  const getSidebarStatus = (page: import("@playwright/test").Page) =>
-    page.locator('#sidebar [role="status"][aria-label]:not([aria-busy])');
-
   test.beforeEach(async ({ page }) => {
     await prepareOAuthTestPage(page);
     await page.goto("/week");
@@ -133,23 +102,20 @@ test.describe("Sidebar Connection Status - State Transitions", () => {
     await setGoogleConnectionState(page, "NOT_CONNECTED");
   });
 
-  test("transitions from NOT_CONNECTED to HEALTHY correctly", async ({
+  test("transitions from RECONNECT_REQUIRED to ATTENTION correctly", async ({
     page,
   }) => {
-    const status = getSidebarStatus(page);
-
-    // State already set to NOT_CONNECTED in beforeEach - just verify it
-    await expect(status).toHaveAttribute(
-      "aria-label",
-      SIDEBAR_STATUS_LABELS.notConnected,
-    );
+    await setGoogleConnectionState(page, "RECONNECT_REQUIRED");
+    await expect(
+      page.getByRole("status", {
+        name: SIDEBAR_STATUS_LABELS.reconnectRequired,
+      }),
+    ).toBeVisible();
 
-    // Transition to HEALTHY (simulating successful OAuth flow)
-    await setGoogleConnectionState(page, "HEALTHY");
-    await expect(status).toHaveAttribute(
-      "aria-label",
-      SIDEBAR_STATUS_LABELS.connected,
-    );
+    await setGoogleConnectionState(page, "ATTENTION");
+    await expect(
+      page.getByRole("status", { name: SIDEBAR_STATUS_LABELS.needsRepair }),
+    ).toBeVisible();
   });
 
   test("cycles through connection states without visual glitches", async ({
@@ -165,14 +131,12 @@ test.describe("Sidebar Connection Status - State Transitions", () => {
 
     for (const state of states) {
       await setGoogleConnectionState(page, state);
-      // setGoogleConnectionState now waits for aria-label, no timeout needed
     }
 
-    // Should end on RECONNECT_REQUIRED
-    const status = getSidebarStatus(page);
-    await expect(status).toHaveAttribute(
-      "aria-label",
-      SIDEBAR_STATUS_LABELS.reconnectRequired,
-    );
+    await expect(
+      page.getByRole("status", {
+        name: SIDEBAR_STATUS_LABELS.reconnectRequired,
+      }),
+    ).toBeVisible();
   });
 });

e2e/utils/oauth-test-utils.ts

@@ -1,4 +1,4 @@
-import { Page, expect } from "@playwright/test";
+import { type Page, expect } from "@playwright/test";
 import "./compass-window";
 
 /**
@@ -200,13 +200,20 @@ const CONNECTION_STATE_TO_LABEL: Record<GoogleConnectionState, RegExp> = {
   ATTENTION: /needs repair/i,
 };
 
-const SIDEBAR_STATUS_SELECTOR =
-  "#sidebar [role='status'][aria-label]:not([aria-busy])";
+/**
+ * HeaderInfoIcon only renders role="status" for warning/error connection states
+ * (see HeaderInfoIcon.tsx). Muted / checking / importing-without-background-import
+ * do not expose this region.
+ */
+const GOOGLE_HEADER_STATUS_VISIBLE_STATES: GoogleConnectionState[] = [
+  "RECONNECT_REQUIRED",
+  "ATTENTION",
+];
 
 /**
  * Set the Google connection state via Redux userMetadata slice.
- * Dispatches to the store and waits for the sidebar aria-label to update.
- * waitForAppReady in beforeEach guarantees the store is ready before this runs.
+ * Dispatches to the store, waits for Redux to match, then asserts the header
+ * status region when the UI shows it (reconnect required / needs repair).
  */
 export const setGoogleConnectionState = async (
   page: Page,
@@ -221,9 +228,37 @@ export const setGoogleConnectionState = async (
     });
   }, state);
 
-  await expect(page.locator(SIDEBAR_STATUS_SELECTOR)).toHaveAttribute(
-    "aria-label",
-    CONNECTION_STATE_TO_LABEL[state],
+  await page.waitForFunction(
+    (expected) => {
+      const cs =
+        window.__COMPASS_E2E_STORE__?.getState()?.userMetadata?.current?.google
+          ?.connectionState;
+      return cs === expected;
+    },
+    state,
+    { timeout: 5000 },
+  );
+
+  if (GOOGLE_HEADER_STATUS_VISIBLE_STATES.includes(state)) {
+    await expect(
+      page.getByRole("status", { name: CONNECTION_STATE_TO_LABEL[state] }),
+    ).toBeVisible();
+  }
+};
+
+export const expectGoogleConnectionStateInStore = async (
+  page: Page,
+  state: GoogleConnectionState,
+) => {
+  await page.waitForFunction(
+    (expected) => {
+      const cs =
+        window.__COMPASS_E2E_STORE__?.getState()?.userMetadata?.current?.google
+          ?.connectionState;
+      return cs === expected;
+    },
+    state,
+    { timeout: 5000 },
   );
 };
 

eslint.config.mjs

@@ -111,6 +111,15 @@ export default [
       "jest/unbound-method": "error",
     },
   },
+  {
+    files: ["e2e/**/*.ts"],
+    rules: {
+      // Playwright e2e is not React Testing Library; page.getByRole is correct.
+      "testing-library/prefer-screen-queries": "off",
+      "@typescript-eslint/no-unsafe-assignment": "off",
+      "@typescript-eslint/no-unsafe-member-access": "off",
+    },
+  },
   // Warn on console.log in packages/web to avoid leaking secure info
   {
     files: ["packages/web/**/*.{ts,tsx}"],

packages/backend/src/sync/controllers/sync.controller.test.ts

@@ -42,20 +42,22 @@ describe("SyncController", () => {
   const baseDriver = new BaseDriver();
   const syncDriver = new SyncControllerDriver(baseDriver);
   const importTimeoutMs = 7_000;
+  type ImportOperation = "INCREMENTAL" | "REPAIR";
 
   interface ImportSummary {
-    operation: "REPAIR";
+    operation: ImportOperation;
     status: "COMPLETED";
     eventsCount: number;
     calendarsCount: number;
   }
 
   function parseImportResult(
     result: ImportGCalEndPayload | undefined,
+    operation: ImportOperation = "INCREMENTAL",
   ): ImportSummary {
     expect(result).toEqual(
       expect.objectContaining({
-        operation: "REPAIR",
+        operation,
         status: "COMPLETED",
         eventsCount: expect.any(Number) as number,
         calendarsCount: expect.any(Number) as number,
@@ -607,7 +609,7 @@ describe("SyncController", () => {
         const result = (await importEndPromise) as ImportGCalEndPayload;
         stream.close();
 
-        const parsed = parseImportResult(result);
+        const parsed = parseImportResult(result, "REPAIR");
 
         expect(parsed).toHaveProperty("eventsCount");
         expect(parsed).toHaveProperty("calendarsCount");
@@ -643,7 +645,7 @@ describe("SyncController", () => {
         stream.close();
 
         expect(failReason).toEqual({
-          operation: "REPAIR",
+          operation: "INCREMENTAL",
           status: "IGNORED",
           message: `User ${userId} gcal import is in progress or completed, ignoring this request`,
         });
@@ -683,7 +685,7 @@ describe("SyncController", () => {
         stream.close();
 
         expect(failReason).toEqual({
-          operation: "REPAIR",
+          operation: "INCREMENTAL",
           status: "IGNORED",
           message: `User ${userId} gcal import is in progress or completed, ignoring this request`,
         });