User should get UX feedback during repair

[tyler-dane]

Where did this happen?

No response

Expected Behavior

When a user sees the "Google Calendar needs repair" icon and clicks it, it triggers a non-blocking backend call. The icon should change to the same spinner that shows when importing background events (except it should be the warning color). That way, users know to wait while the repair happens.

When an error happens during the repair, the backend should try to remedy it proactively. If it can't, it should notify the user of the error and the error should render as a toast.

Current Behavior

Nothing happens after clicking from a UX perspective; the icon stays the same.

The backend, however, is restarting the sync in the background:

0|backend  | 26-03-28 09:31:58 [warn] app:user.service: Restarting Google Calendar sync for user: {REDACTED} (forced)

Steps to Reproduce

1. Create a scenario where the user's calendar needs repairing
2. Icon shows up telling them to repair
3. Click icon

Possible Solution

Add handler to change the icon after click. Include error handling for what happens if the repair fails. One backend failure that could happen is:

0|backend  | 26-03-28 09:27:17 [error] app:user.service: Re-sync failed for user: 65c58e8564beca45ea92e37b Quota exceeded for quota metric 'Queries' and limit 'Queries per minute per user' of service 'calendar-json.googleapis.com' for consumer 'project_number:725572113265'. {
0|backend  |   "config": {
0|backend  |     "url": "https://www.googleapis.com/calendar/v3/calendars/{REDACTED}/events?singleEvents=false&maxResults=2500&pageToken={REDACTED}%3D",
0|backend  |     "method": "GET",
0|backend  |     "apiVersion": "",
0|backend  |     "userAgentDirectives": [
0|backend  |       {
0|backend  |         "product": "google-api-nodejs-client",
0|backend  |         "version": "8.0.1",
0|backend  |         "comment": "gzip"
0|backend  |       }
0|backend  |     ],

Context

No response