refactor(auth): update Google connection UI and logic by tyler-dane · Pull Request #1591 · SwitchbackTech/compass

tyler-dane · 2026-03-30T17:57:34Z

Changed sidebar status icons to use a unified "DotIcon" for various Google Calendar connection states, enhancing visual consistency.
Introduced a new StatusDotPopover component to manage repair dialogs, improving user interaction during repair processes.
Updated tests to reflect changes in icon usage and dialog behavior, ensuring comprehensive coverage of the new UI flow.
Enhanced the getGoogleConnectionConfig function to include dotColor and dialog properties for better state representation.

Note

Medium Risk
Touches both Google Calendar sync restart behavior (SSE import semantics + duplicate suppression) and client auth/UI state handling, so regressions could affect sync/connection UX. Changes are covered by expanded unit/e2e tests, but span backend + frontend flows.

Overview
Google Calendar connection UI is reworked around a new header status indicator. Sidebar/icon expectations are updated so only warning/error states render a role="status" region, and repair now uses a StatusDotPopover dialog while background sync/repair shows a spinner.

Client connection/sync state handling is simplified and de-flaked. useConnectGoogle now merges Redux connection state with a new external-store override (google.sync.state) for immediate “syncing/repairing” feedback, removes the importGCal Redux sub-slice plumbing, and stops dispatching local-event-sync counts from syncPendingLocalEvents.

Anonymous sign-up prompting is introduced and wired through auth state + event mutations. Auth storage adds shouldPromptSignUpAfterAnonymousCalendarChange with subscription support, event create/edit sagas set the flag for truly anonymous users, and the header info icon prioritizes this prompt over Google status.

Backend sync restart behavior is tightened. restartGoogleCalendarSync now emits operation: "INCREMENTAL" | "REPAIR" correctly, ignores duplicate forced restarts per-user via an in-memory guard, and user-metadata maps sync.importGCal: "RESTART" to google.connectionState: "ATTENTION" (not IMPORTING), with corresponding test updates.

Testing/tooling updates. Playwright e2e assertions switch from sidebar aria-labels to Redux/header visibility, and ESLint relaxes testing-library rules for e2e/**/*.ts.

^{Written by Cursor Bugbot for commit 69b72fe. This will update automatically on new commits. Configure here.}

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

✅ Fixed: Unused styled components after SubCalendarList refactor
- Removed the unused CalendarLabel and CalendarList styled components from styled.ts that were left behind after the SubCalendarList refactor to Tailwind CSS.

_{You can send follow-ups to this agent here.}

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

Bugbot Autofix prepared a fix for the issue found in the latest run.

✅ Fixed: Repairing dialog has onRepair: undefined violating type contract
- Changed onRepair to optional in relevant type definitions and added a defensive disabled check.

_{You can send follow-ups to this agent here.}

- Changed sidebar status icons to use a unified "DotIcon" for various Google Calendar connection states, enhancing visual consistency. - Introduced a new `StatusDotPopover` component to manage repair dialogs, improving user interaction during repair processes. - Updated tests to reflect changes in icon usage and dialog behavior, ensuring comprehensive coverage of the new UI flow. - Enhanced the `getGoogleConnectionConfig` function to include `dotColor` and dialog properties for better state representation.

- Changed sidebar status icons to use a unified "DotIcon" across various connection states, enhancing visual consistency. - Introduced a new `StatusDotPopover` component for improved user interaction during repair actions, providing a dialog with repair options. - Updated the `useConnectGoogle` hook to return an `isRepairing` state, allowing the UI to reflect ongoing repair processes. - Enhanced tests to cover new UI behaviors and ensure proper functionality of the updated components and hooks.

- Introduced a dynamic display title in the StatusDotPopover to reflect the repairing state, enhancing user awareness during calendar repairs. - Updated the aria-label and title properties to utilize the new display title, improving accessibility. - Conditionally rendered the description based on the repairing state, streamlining the UI during repair processes. - Added logic to prevent rendering the SyncStatusDot when user attention is not needed, optimizing performance and user experience.

- Introduced functionality to manage the sign-up prompt for users making anonymous calendar changes, enhancing user engagement and retention. - Updated the authentication state management to include flags for prompting sign-up after anonymous calendar changes. - Enhanced the `useCompleteAuthentication` hook to clear the sign-up prompt when a user is authenticated. - Added tests to ensure the correct behavior of the sign-up prompt logic during event creation and editing. - Refactored related components and hooks to utilize the new sign-up prompt functionality, improving overall user experience.

- Changed the tooltip message in the sidebar status from "Google Calendar needs repair. Click to repair." to "Repairing Google Calendar in the background." to better reflect the current state during repairs. - Updated the corresponding test to ensure the new tooltip message is correctly asserted in the `useConnectGoogle` hook tests.

- Introduced a new animation for the sync dot with a pulse effect to enhance visual feedback during synchronization. - Updated the `SyncStatusDot` component to conditionally apply the new animation based on the anonymous sign-up prompt state. - Enhanced the `useSyncStatusDotState` hook to manage the new `isAnonymousSignUpPrompt` state, improving user engagement. - Added tests to verify the correct application of the new animation and its behavior in different states.

- Deleted the `AccountIcon` component as part of the refactoring process to streamline the authentication modal. - Removed associated tests from `AuthModal.test.tsx` to reflect the component's removal. - Updated `Header` components in both Calendar and Day views to eliminate references to `AccountIcon`, ensuring a cleaner codebase.

…used styles - Refactored the `Header` component in the Calendar view to streamline its structure by replacing styled components with utility classes. - Removed unused styled components and associated styles from the `styled.ts` file, enhancing code clarity and maintainability. - Updated the layout to utilize flexbox for better alignment and responsiveness, improving the overall user interface.

…mponents - Simplified the `Header` component in the Calendar view by replacing styled components with utility classes for better maintainability. - Removed unused styled components from `styled.ts`, enhancing code clarity. - Updated the layout to utilize standard HTML elements and flexbox for improved alignment and responsiveness.

… DayLabels - Updated the `DayLabels` component in the Calendar view to eliminate styled components, enhancing maintainability and readability. - Replaced `StyledWeekDaysFlex` and `StyledWeekDayFlex` with standard HTML elements and utility classes for improved layout and responsiveness. - Removed the now-unnecessary `styled.ts` file, streamlining the codebase.

- Extracted the `StatusDotPopover` from the `SyncStatusDot` component to improve modularity and maintainability. - Updated the tooltip message for the anonymous sign-up prompt to be more concise. - Adjusted tests to reflect changes in the component structure and updated tooltip text.

…List structure - Deleted the `Info` icon component to streamline the codebase. - Refactored the `SubCalendarList` component to incorporate a tooltip for temporary account information, enhancing user experience. - Updated the layout to utilize utility classes, improving maintainability and readability. - Added tests for the `SubCalendarList` component to ensure correct rendering and functionality.

…e HeaderInfoIcon component - Renamed `dotColor` to `iconColor` in the Google connection types and related components for consistency. - Updated the `useConnectGoogle` hook and associated tests to reflect the new naming convention. - Introduced the `HeaderInfoIcon` component to display connection status with improved tooltip handling and user prompts. - Replaced `SyncStatusDot` with `HeaderInfoIcon` in the Calendar and Day view headers for enhanced user feedback. - Added tests for the new `HeaderInfoIcon` component to ensure correct rendering and functionality.

- Eliminated `icon` property from the sidebar status in the Google connection types and related components to streamline the state management. - Updated tests in the `useConnectGoogle` hook to reflect the removal of icon assertions. - Adjusted the `HeaderInfoIcon` component to remove icon references, ensuring consistency across the application.

…r improved user experience - Updated the `UserProvider` to utilize the `useSession` hook for managing authentication state and profile loading. - Added a new test case in `UserProvider.test.tsx` to verify profile fetching behavior based on authentication state. - Enhanced the `HeaderInfoIcon` component to display a spinner during background calendar imports, improving user feedback. - Refactored `useHeaderInfo` to include background import state, ensuring accurate rendering in the `HeaderInfoIcon`. - Adjusted tests in `SidebarIconRow` to confirm the spinner is not rendered when importing is in progress.

…hook - Refactored the `UserProvider` to utilize the new `useLoadProfile` hook for improved profile loading and state management. - Removed unnecessary state variables and effects related to user loading, enhancing code clarity. - Updated the `UserContext` to reflect changes in the user profile structure. - Added tests for the new `useLoadProfile` hook to ensure correct profile fetching behavior. - Simplified the integration with PostHog for user identification through the `useIdentifyUser` hook.

…management - Introduced `useCompleteAuthentication` hook to streamline the Google authentication process, managing user state and metadata refresh. - Added `useConnectGoogle` hook to handle Google Calendar connection, including error handling and user prompts. - Created `useGoogleAuth` and `useGoogleAuthWithOverlay` hooks for improved Google login experience with overlay support. - Implemented tests for new hooks to ensure correct functionality and error handling during authentication. - Refactored related components and utilities for better integration with the new authentication flow.

- Added new rules in ESLint configuration for TypeScript files in e2e tests to accommodate Playwright usage. - Updated the sidebar connection status tests to improve clarity and accuracy, including renaming helper functions and adjusting assertions. - Introduced a new utility function to assert Google connection state in Redux, enhancing test reliability. - Refactored existing tests to focus on Redux state management and UI visibility for connection states.

…o-import logic - Added `triggerAutoImport` action to the sync slice to initiate non-forced imports without showing a spinner. - Updated `useConnectGoogle` hook to dispatch the new `request` action for active imports and `triggerAutoImport` for RESTART state. - Introduced utility functions `isGoogleCalendarImportActive` and `isGoogleCalendarAutoImportNeeded` to manage import states effectively. - Implemented tests to validate the behavior of auto-import logic and spinner visibility during different import states. - Refactored related components and tests to ensure consistent handling of Google Calendar import states.

cursor

Cursor Bugbot has reviewed your changes and found 1 potential issue.

Autofix Details

_{You can send follow-ups to this agent here.}

…n types - Introduced `ImportOperation` type to support both "INCREMENTAL" and "REPAIR" operations in import summaries. - Updated `parseImportResult` function to accept operation type as a parameter, improving flexibility in handling import results. - Refactored sync service and controller tests to utilize the new operation types, ensuring consistent behavior across import scenarios. - Enhanced user metadata handling to reconcile import states based on metadata updates, improving user experience during Google Calendar imports. - Updated tests to validate the new import operation logic and ensure accurate state management during imports.

- Updated `UserMetadataService` to return "ATTENTION" state when a restart is pending, improving user awareness of synchronization status. - Added a new test case to validate the "ATTENTION" state functionality in `user-metadata.service.test.ts`. - Refactored Google Calendar import logic to streamline state management and improve user experience during metadata refresh. - Removed deprecated import state handling from various components and tests, ensuring cleaner code and better maintainability. - Enhanced `useConnectGoogle` and related hooks to improve error handling and user prompts during Google Calendar connection processes.

- Added logic to ignore duplicate restart requests while a full sync is in progress, enhancing user experience by preventing unnecessary operations. - Introduced a new test case to validate the behavior of duplicate restart requests in `sync.service.test.ts`. - Updated `SyncService` to manage active full sync restarts, ensuring proper state handling during synchronization. - Refactored Google Sync UI state management to utilize a more descriptive indicator for syncing states, improving clarity in the user interface. - Enhanced tests across various components to ensure accurate handling of sync states and user feedback during Google Calendar operations.

- Updated the test for `fetchMetadataDeferred` to await the promise directly, ensuring proper synchronization in the test execution. - This change enhances the reliability of the test case by accurately reflecting the intended asynchronous behavior.

…management - Updated import paths for Google authentication utilities to improve code organization and clarity. - Refactored Google sync state management to utilize a dedicated state module, enhancing maintainability. - Introduced new utility functions for handling Google authentication errors and revocation states. - Added tests for new utility functions to ensure correct behavior in various scenarios. - Improved overall structure of Google authentication-related code for better readability and maintainability.

- Introduced `SessionProvider` and `useSession` hook to manage user authentication state and session handling. - Added `UserProvider` and `useLoadProfile` hook for fetching user profile data based on authentication status. - Created utility functions for session management and user state updates, enhancing overall user experience. - Implemented comprehensive tests for session and user profile functionalities to ensure reliability and correctness. - Refactored existing components to integrate with the new session and user management structure, improving code organization and maintainability.

- Updated import paths for the Google OAuth error utility to improve consistency and clarity. - Introduced a new utility file for handling Google popup closed errors, enhancing error management. - Added comprehensive tests for the new error utility to ensure correct behavior across various scenarios.

…ovider - Introduced a new utility function `isPosthogEnabled` to check Posthog configuration based on environment variables. - Removed the redundant local implementation of `isPosthogEnabled` from `CompassProvider` and replaced it with the new utility import, improving code organization and maintainability.

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

^{Bugbot Autofix is ON, but it could not run because the branch was deleted or merged before autofix could start.}

cursor · 2026-03-31T04:54:32Z

+              "Your Google Calendar has run into a sync issue. Repairing will re-import your recent events to make sure everything is up to date.",
+            repairLabel: "Repair",
+            onRepair: onRepairGoogle,
+          },


Repairing state dialog config is unreachable dead code

Low Severity

The "repairing" case in getGoogleConnectionConfig defines a dialog property with onRepair, but this config can never be rendered. In useHeaderInfo, when googleStatus.state === "repairing", a non-null syncTooltip is returned, causing HeaderInfoIcon to early-return with a spinner — the sidebarStatus.dialog path is never reached. This also means the isRepairing prop on StatusDotPopover is always false when the popover renders, making the popover's repairing branch (with the non-animated SpinnerIcon imported from @phosphor-icons/react instead of the animated one at @web/components/Icons/Spinner) dead code.

Additional Locations (1)

packages/web/src/components/HeaderInfoIcon/useHeaderInfo.ts#L50-L56

cursor · 2026-03-31T04:54:32Z

        },
        sidebarStatus: {
-          icon: "LinkBreakIcon",
+          iconColor: "error",


RECONNECT_REQUIRED sidebar status has no dialog or onSelect

Medium Severity

The RECONNECT_REQUIRED state sets sidebarStatus.onSelect to onConnectGoogle but has no dialog property. In HeaderInfoIcon, when iconColor is "error" and there's no dialog, it renders a TooltipWrapper with onClick={sidebarStatus.onSelect}. However, the TooltipWrapper also receives disabled={sidebarStatus.isDisabled} which is false — this works. But looking at the test, it expects clicking to call mockGoogleOnSelect. This path does work, though the ATTENTION state was refactored to use a dialog popover instead of onSelect, creating an inconsistent UX between the two warning/error states that both need user action.