* Introduce waitForLoadingSpinnerToDisappear

* Use waitForLoadingSpinnerToDisappear in QueryBuilder tests

* Use waitForLoadingSpinnerToDisappear in ObjectDetailWrapper tests

* Use waitForLoadingSpinnerToDisappear in DashboardApp tests

* Use waitForLoadingSpinnerToDisappear in ActionCreatorModal tests

* Use waitForLoadingSpinnerToDisappear in DatabaseEditApp tests

* Use waitForLoadingSpinnerToDisappear in MetricApp tests

* Use waitForLoadingSpinnerToDisappear in SegmentApp tests

* Use waitForLoadingSpinnerToDisappear in DatabasesPermissionsPage tests

* Use waitForLoadingSpinnerToDisappear in GroupsPermissionsPage tests

* Use waitForLoadingSpinnerToDisappear in PremiumEmbeddingLicensePage tests

* Use waitForLoadingSpinnerToDisappear in TableBrowser tests

* Use waitForLoadingSpinnerToDisappear in FieldValuesWidget tests

* Use waitForLoadingSpinnerToDisappear in DataPicker-Models tests

* Use waitForLoadingSpinnerToDisappear in DataPicker-Questions tests

* Use waitForLoadingSpinnerToDisappear in DataPicker-RawData tests

* Use waitForLoadingSpinnerToDisappear in ActionSidebar tests

* Use waitForLoadingSpinnerToDisappear in DashboardHeader tests

* Use waitForLoadingSpinnerToDisappear in SearchBar tests

* Use waitForLoadingSpinnerToDisappear in SearchResults tests

* Use waitForLoadingSpinnerToDisappear in SearchResultsDropdown tests

* Use waitForLoadingSpinnerToDisappear in MainNavbar tests

* Use waitForLoadingSpinnerToDisappear in Navbar tests

* Use waitForLoadingSpinnerToDisappear in PublicAction tests

* Use waitForLoadingSpinnerToDisappear in DefaultPicker tests

* Use waitForLoadingSpinnerToDisappear in TypeFilterContent tests

* Use waitForLoadingSpinnerToDisappear in SearchApp tests

* Replace waitForElementToBeRemoved(() => screen.queryByText("Loading...")) with waitForLoadingSpinnerToDisappear();

* Replace waitForElementToBeRemoved(() => screen.queryByText(/loading/)) with waitForLoadingSpinnerToDisappear();

* Remove all remaining waitForElementToBeRemoved usages

* Replace all spinner queries by text with queries by test-id

* Make spinner existence assertions consistent

* Consolidate imports

* Connect comment to code

* Add explanatory comment

* Rename waitForLoadingSpinnerToDisappear to waitForLoaderToBeRemoved

Co-authored-by: Kamil Mielnik <kamil@kamilmielnik.com>

* Reverting 18238

* Additional tweaks

---------

Co-authored-by: Luis <luis@pop-os.localdomain>

Check results in [this test tool](https://www.digitalocean.com/community/tools/glob?comments=true&glob=.github%2F%2A%2A%2F%21%28%2A.md%7Cteam.json%29&matches=false&tests=.github%2Fteam.json&tests=.github%2Ffoo%2Fteam.json&tests=.github%2Ffoo%2Fpotato.json&tests=.github%2Ffoo%2Fbar.md&tests=.github%2Ffoo.md&tests=.github%2Fworkflow.yml&tests=.github%2Ffoo%2Fworkflow.yml) that confirm the glob used here is correct.

[ci skip]

* Add data-testid to LeaveConfirmationModal

* Update LeaveConfirmationModal assertions in QueryBuilder unit tests to use data-testid

* Update LeaveConfirmationModal assertions in DashboardApp unit tests to use data-testid

* Update LeaveConfirmationModal assertions in SegmentApp unit tests to use data-testid

* Update LeaveConfirmationModal assertions in MetricApp unit tests to use data-testid

* Update LeaveConfirmationModal assertions in DashboardEditApp unit tests to use data-testid

* Update LeaveConfirmationModal assertions in ActionCreatorModal unit tests to use data-testid

* Extract LeaveConfirmation component

* Add data-testid prop to ConfirmContent

* Replace cancel-leave-confirmation-modal with leave-confirmation

* Rename LeaveConfirmation to LeaveConfirmationModalContent and move it to LeaveConfirmationModal directory

* Replace leave-confirmation-modal with leave-confirmation

[ci skip]

* Add a unit test for /api/pulse/preview_card_info/:id

For the GET endpoint
/api/pulse/preview_card_info/:id

* Add a unit test for the GET endpoint /search/models

* Add a unit test for DELETE /api/timeline-event/:id

* Add a unit test for DELETE /api/timeline-event/:id

* Commit Ngoc's suggestion: Update test/metabase/api/timeline_event_test.clj

Co-authored-by: Ngoc Khuat <qn.khuat@gmail.com>

* Apply Ngoc's suggestion to destructure :timeline_id

* Remove test for event that I created in with-temp

* Fix failed test I introduced, change collection to collection-id

* Test deleting a non-existent timeline event by id

* Move my search-models-test lower

* Copy-paste Ngoc's query-model-set-test and macro

https://github.com/metabase/metabase/pull/32624/files#diff-734923de9c62f49d6b708d64a214ee38d7d0fb1b2c20343bff7b947a6021b021R297-R332

https://github.com/metabase/metabase/pull/32624/files#diff-54344d8b75319d40a4cb2a2afe935500c23d34f0f3c63c51f005493d4dc4f8f1R690-R732



* Remove "database" and "table" from test expectation

Those failed in this PR,
though they passed in 32624

* Revert test for pulse/preview_card_info/, as it'll be removed

* Remove with-verified-cards, which I needlessly copied into this PR

That's needed in 32624,
but not this PR.

* Add a test for the archived-string param

---------

Co-authored-by: Ngoc Khuat <qn.khuat@gmail.com>

* Add more drills tests, unify tests structure, add issues refs

* Add tests for fk-details drill apply

* Tests fixes after merge with master

* Code review fixes

* Comment failing tests after merging with master

* Restore sort drill tests

* wip

* Add comma and fix spelling error

* Added some padding and things

* switch control styles

* text styles

* add storybook examples

* Add guidance text

* Add top padding for small switches

* change default size from `sm` to `md`

* fix missing default `size` prop

* fix paddings

* remove label padding if empty

* use `getStylesRef`

---------

Co-authored-by: Oisin Coveney <oisin@metabase.com>
Co-authored-by: Maz Ameli <maz@metabase.com>

### Background

CLJS output is not watched by webpack. (Watching it causes full page reloads I can't find a way to stop.)
CLJS changes are hot reloaded by shadow-cljs separate from webpack.

Changing CLJS code works great: shadow-cljs hot reloads it and it works nicely.

Changing JS code also works: webpack recompiles (including the latest CLJS output), the browser refreshes, and all is
well.

### The Problem

If you refresh the browser after you've changed only CLJS code, webpack does not know it must recompile the bundles.
Therefore it serves up the old bundles, which have now-stale CLJS output in them.

### The "Solution"

The first time shadow-cljs hot reloads after a CLJS change, a hook in `metabase.util.devtools` registers a
`beforeunload` handler. This handler sends a request to `http://localhost:8080/webpack-dev-server/invalidate`, forcing
webpack to recompile the bundles.

That isn't such a terrible hack by itself. The ugly part is that there's a race
condition between webpack invalidating the bundles and the browser trying to
load the bundles after the refresh, and sometimes the browser wins (loading the
stale CLJS). I added a spin-lock, repeatedly checking `performance.now()` until
500ms have passed, then the handler returns. This small delay gives webpack
time to mark the bundles invalid and allow the refresh.

I haven't experimented with how long that delay needs to be for this to be
reliable. Since this handler is only attached after CLJS code has been hot
reloaded, it will never run for most FE devs.

### Alternative: Smarter webpack

The best solution would be to make webpack
- recompile the bundles when the CLJS output changes; but
- not try to HMR them (which triggers a browser refresh and ruins CLJS hot reloading)
but I have not found any way to configure this out of the box. I think it would require patching `ReactRefreshPlugin`,
a nontrivial job. It might also be possible for shadow-cljs to poke webpack after it finishes building, but there's the
same problem that webpack will want to HMR.

Webpack doesn't support any "lazy" invalidation; as far as I know there's no
way to say "this bundle is now invalid but don't recompile it until someone
tries to GET it" or anything like that.

### Alternative: Block refresh then continue

The `beforeunload` handler could instead work like this:
- `preventDefault()` on the event, stopping the refresh.
- `fetch()` the `invalidate` route as above.
- asynchronously, when that `fetch()` is done and we know webpack has invalidated the bundles, trigger a refresh.

I haven't tried this, since it seems more complicated than the spin-lock. We just need to give the `invalidate` request
a head start.

* Minor updates to the developer's guide

* extra context

---------

Co-authored-by: dan sutton <dan@dpsutton.com>

* Make it easy to add SQLite database

* Replace H2 with SQLite in E2E tests

* Remove long unused E2E reproduction

It's been sufficiently covered with backend tests.

* Remove H2 database helper from E2E tests

* Show a warning modal when clicking "Cancel" in dashboard

* Update dashboard test

* Update question settings test

* Add missing "Edit dashboard" click

* Add tests for leaving dashboard editing via Cancel button

* Add model-editing logic to isLocationAllowed in QueryBuilder

* Fix IS_LOCATION_ALLOWED implementation

* Fix typos

* Remove redundant checks and invert logic for better readability

* Add editing queries tests

* Improve test to include reverted form interaction

* Fix existing test case

* Add editing metadata test

* Add editing metadata test (unedited)

* Organize tests

* Add a test for not showing custom warning modal when saving edited query

* Extract slug to TEST_MODEL_CARD_SLUG

* Add a test for not showing custom warning modal when saving edited metadata

* Remove redundant routing

* Add a workaround for test setup

* Add a test for tabs navigation

* Fix failing test

* Extract isNavigationAllowed out of isLocationAllowed

* Extract createMockLocation

* Add isNavigationAllowed test setup and test for new questions

* Add a test case for beforeunload event

* Format code

* Add more tests and organize them

* Add notebook question tests

* Format code

* Rename component to match the filename

* Fix typo

* Replace useBeforeUnload with LeaveConfirmationModal in SegmentForm

* Replace useBeforeUnload with LeaveConfirmationModal in MetricForm

* Update setup of MetricForm tests to allow testing navigation

* Update setup of SegmentForm tests to allow testing navigation

* Use proper history in MetricForm

* Refactor SegmentForm test setup to be consistent with the one of MetricForm

* Make MetricForm and SegmentForm tests consistent

* Add tests for not showing custom warning

* Add tests for showing custom warning when leaving with unsaved changes

* Extract FORM_URL

* Remove redundant asyncs and awaits

* Rename MetricForm.unit.spec.tsx & SegmentForm.unit.spec.tsx to MetricApp.unit.spec.tsx & SegmentApp.unit.spec.tsx and move them near the components they're testing

* Improve a11y

* Add missing endpoint mocks

* Improve selectors thanks to proper a11y

* Add tests for not showing warning modal when saving changes

* Convert CreateMetricForm to a functional component

* Convert CreateSegmentForm to a functional component

* Convert UpdateMetricFormInner to a functional component

* Convert UpdateSegmentFormInner to a functional component

* Disable LeaveConfirmationModal on scheduled navigation

* Setup metrics & segments POST endpoints

* Properly mock metric and segment creation

* Lift LeaveConfirmationModal from SegmentForm to SegmentApp

* Lift LeaveConfirmationModal from MetricForm to MetricApp

* Sort props

* Get rid of useCallbackEffect usage in MetricApp

* Get rid of useCallbackEffect usage in SegmentApp

* Implement #33646

* More dox

* Seconds, not milliseconds

* Respect env var values