Fix sample database not appearing in Database Browser without page refresh (#30871)

* Fix sample database not appearing in DatabaseBrowser without page refresh

- Fixes https://github.com/metabase/metabase/issues/29496

* Add an e2e test for #30871

* Add an extra step in e2e test

e2e/test/scenarios/admin/databases/default-sample-database.cy.spec.js

@@ -227,6 +227,69 @@ describe("scenarios > admin > databases > sample database", () => {
     );
   });
 
+  it("updates databases list in Database Browser after bringing sample database back", () => {
+    cy.intercept("GET", "/api/database").as("loadDatabases");
+    cy.intercept("POST", "/api/database/sample_database").as(
+      "restoreSampleDatabase",
+    );
+    cy.intercept("GET", "/api/database/*/usage_info").as(
+      "loadDatabaseUsageInfo",
+    );
+    cy.intercept("GET", "/api/database/*").as("loadDatabase");
+    cy.intercept("DELETE", "/api/database/*").as("deleteDatabase");
+
+    cy.visit("/admin/databases");
+    cy.wait("@loadDatabases");
+    cy.findByTestId("database-list").within(() => {
+      cy.findByText("Sample Database").click();
+    });
+    cy.wait("@loadDatabase");
+
+    cy.button("Remove this database").click();
+    cy.wait("@loadDatabaseUsageInfo");
+    modal().within(() => {
+      cy.findByLabelText(/Delete \d+ saved questions?/).click();
+      cy.findByTestId("database-name-confirmation-input").type(
+        "Sample Database",
+      );
+      cy.findByText("Delete this content and the DB connection").click();
+      cy.wait("@deleteDatabase");
+    });
+
+    cy.findByTestId("database-list").within(() => {
+      cy.findByText("Sample Database").should("not.exist");
+    });
+
+    cy.findByTestId("exit-admin").click();
+
+    cy.wait("@loadDatabases");
+    cy.findByTestId("main-navbar-root").within(() => {
+      cy.findByText("Browse data").should("not.exist");
+    });
+
+    cy.visit("/admin/databases");
+    cy.findByTestId("database-list").within(() => {
+      cy.findByText("Bring the sample database back").click();
+      cy.wait("@restoreSampleDatabase");
+    });
+
+    cy.findByTestId("database-list").within(() => {
+      cy.findByText("Sample Database").should("exist");
+    });
+
+    cy.findByTestId("exit-admin").click();
+
+    cy.wait("@loadDatabases");
+    cy.findByTestId("main-navbar-root").within(() => {
+      cy.findByText("Browse data").should("exist");
+      cy.findByText("Browse data").click();
+    });
+
+    cy.findByTestId("database-browser").within(() => {
+      cy.findByText("Sample Database").should("exist");
+    });
+  });
+
   describeEE("custom caching", () => {
     it("should set custom cache ttl", () => {
       cy.request("PUT", "api/setting/enable-query-caching", { value: true });

frontend/src/metabase/admin/databases/components/DatabaseList/DatabaseList.jsx

@@ -72,7 +72,7 @@ export default class DatabaseList extends Component {
     const error = deletionError || addSampleDatabaseError;
 
     return (
-      <div className="wrapper">
+      <div className="wrapper" data-testid="database-list">
         <section className="PageHeader px2 clearfix">
           {isAdmin && (
             <Link

frontend/src/metabase/admin/databases/database.js

@@ -140,11 +140,7 @@ export const addSampleDatabase = createThunkAction(
       try {
         dispatch({ type: ADDING_SAMPLE_DATABASE });
         const sampleDatabase = await MetabaseApi.db_add_sample_database();
-        await dispatch(
-          Databases.actions.fetchList(query, {
-            reload: true,
-          }),
-        );
+        dispatch(Databases.actions.invalidateLists());
         MetabaseAnalytics.trackStructEvent("Databases", "Add Sample Data");
         return sampleDatabase;
       } catch (error) {

frontend/src/metabase/browse/containers/DatabaseBrowser.jsx

@@ -19,7 +19,7 @@ import { DatabaseGridItem } from "./DatabaseBrowser.styled";
 
 function DatabaseBrowser({ databases }) {
   return (
-    <div>
+    <div data-testid="database-browser">
       <BrowseHeader crumbs={[{ title: t`Our data` }]} />
 
       <Grid>

frontend/src/metabase/nav/components/AdminNavbar/AdminNavbar.tsx

@@ -56,6 +56,7 @@ export const AdminNavbar = ({
         <AdminExitLink
           to="/"
           data-metabase-event="Navbar;Exit Admin"
+          data-testid="exit-admin"
         >{t`Exit admin`}</AdminExitLink>
       </MobileHide>
     </AdminNavbarRoot>