Handle timeouts in monitor queries in the UI

[jpople]

Closes HJ-188

Description Of Changes

Adds handling and feedback for when async monitor queries take longer than 5s to resolve:

• when loading projects for the project selection screen times out, monitor will be saved with databases: [] (scoped to all projects)
• when saving a monitor times out, user receives a notice that the monitor will continue to be saved in the background

Screen recs (note that these have the timeout delay adjusted as described in the testing steps)

Screen.Recording.2024-11-19.at.23.59.21.mov

Screen.Recording.2024-11-20.at.00.00.38.mov

Steps to Confirm

This is tricky to test-- I've had best results by setting my browser throttling to "GPRS" and temporarily adjusting the timeout delays to be shorter (e.g. 500 ms).

Saving a monitor

1. Create a monitor as normal on a regular-speed connection
2. Behavior should be unchanged (monitor should save, should see success toast then modal closes)
3. Adjust TIMEOUT_DELAY of 5000 ms in ConfigureMonitorModal.tsx to something shorter and slow down your connection
4. Create a monitor
5. Save the monitor
6. When the timeout delay is up and the save query is still loading, should close out of modal and info toast should appear clarifying that the monitor is being saved in the background.

Project list

1. Create a monitor as normal on a regular-speed connection
2. Wait 5 seconds on project selection screen (projects should finish loading)
3. Behavior should be unchanged, no toast and modal should remain open
4. Adjust TIMEOUT_DELAY in useCumulativeGetDatabases.ts and slow down your connection
5. Refresh the page

RTK will cache the results of the project list query when it's called on the main "Monitors" tab and then it'll load instantly inside the modal, so we want to temporarily disable this to make it take longer to load:

6. In ConfigureMonitorModal.tsx comment out lines 44-50:

  // const { data: databases } = useGetDatabasesByConnectionQuery({
  //   page: 1,
  //   size: 25,
  //   connection_config_key: integration.key,
  // });

  // const databasesAvailable = !!databases && !!databases.total;

7. Then set the databasesAvailable prop to true in the ConfigureMonitorDatabasesForm (line 102):

      {formStep === 0 && (
        <ConfigureMonitorForm
          monitor={monitor}
          onClose={onClose}
          onAdvance={onAdvance}
          onSubmit={handleSubmit}
          isSubmitting={isSubmitting}
          // databasesAvailable={databasesAvailable}
          databasesAvailable
          integrationOption={integrationOption}
        />
      )}

8. Click into "Data discovery" tab
9. Create a new monitor
10. When project list fails to load before the delay, monitor should be saved with databases: [] and a toast should appear explaining what happened

Pre-Merge Checklist

• Issue requirements met
• All CI pipelines succeeded
• CHANGELOG.md updated
• Followup issues:
  • Followup issues created (include link)
  • No followup issues
• Database migrations:
  • Ensure that your downrev is up to date with the latest revision on main
  • Ensure that your downgrade() migration is correct and works
    • If a downgrade migration is not possible for this change, please call this out in the PR description!
  • No migrations
• Documentation:
  • Documentation complete, PR opened in fidesdocs
  • Documentation issue created in fidesdocs
  • If there are any new client scopes created as part of the pull request, remember to update public-facing documentation that references our scope registry
  • No documentation updates required

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
fides-plus-nightly	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 20, 2024 5:53pm

[cypress]

fides    Run #11118

Run Properties:   Passed #11118  •  d24aef54ad ℹ️: Merge f439b365d6389927f88594cb5997fc8b95d782c9 into 4702281527d3524aa2d3f3a01322...

Project	fides
Branch Review	refs/pull/5519/merge
Run status	Passed #11118
Run duration	00m 38s
Commit	d24aef54ad ℹ️: Merge f439b365d6389927f88594cb5997fc8b95d782c9 into 4702281527d3524aa2d3f3a01322...
Committer	jpople
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	0
Skipped	0
Passing	4
⚠️ You've recorded test results over your free plan limit. Upgrade your plan to view test results.
View all changes introduced in this branch ↗︎

[gilluminate]

Approved with one minor suggestion.

[gilluminate]

is this meant to center it? If so, wouldn't using auto margins be a safer bet there?

Suggested change

	return <FidesSpinner my={12} />;
	return <FidesSpinner my="auto" />;

[jpople]

This is just to give it some room to breathe when it's the only thing in the modal.

No margin or auto:

Constant margin:

[gilluminate]

Oh man. My bad. I confused my x and y lol.

[cypress]

fides    Run #11119

Run Properties:   Passed #11119  •  34802667ec: Handle timeouts in monitor queries in the UI (#5519)

Project	fides
Branch Review	main
Run status	Passed #11119
Run duration	00m 40s
Commit	34802667ec: Handle timeouts in monitor queries in the UI (#5519)
Committer	jpople
View all properties for this run ↗︎

---

Test results
Failures	0
Flaky	0
Pending	0
Skipped	0
Passing	4
⚠️ You've recorded test results over your free plan limit. Upgrade your plan to view test results.
View all changes introduced in this branch ↗︎