Migrate home to redux toolkit and unify jest tests (#31213)

frontend/src/metabase/home/containers/HomeContent/HomeContent.tsx

-import { connect } from "react-redux";
-import _ from "underscore";
-import Databases from "metabase/entities/databases";
-import RecentItems from "metabase/entities/recent-items";
-import PopularItems from "metabase/entities/popular-items";
-import { getUser } from "metabase/selectors/user";
-import { State } from "metabase-types/store";
-import { getSetting } from "metabase/selectors/settings";
-import HomeContent from "../../components/HomeContent";
-
-const mapStateToProps = (state: State) => ({
-  user: getUser(state),
-  isXrayEnabled: getSetting(state, "enable-xrays"),
-});
-
-// eslint-disable-next-line import/no-default-export -- deprecated usage
-export default _.compose(
-  Databases.loadList({ loadingAndErrorWrapper: false }),
-  RecentItems.loadList({ reload: true, loadingAndErrorWrapper: false }),
-  PopularItems.loadList({ reload: true, loadingAndErrorWrapper: false }),
-  connect(mapStateToProps),
-)(HomeContent);

frontend/src/metabase/home/containers/HomeContent/index.ts

-// eslint-disable-next-line import/no-default-export -- deprecated usage
-export { default } from "./HomeContent";

frontend/src/metabase/home/containers/HomePageApp/HomePageApp.tsx

-import { connect } from "react-redux";
-import _ from "underscore";
-import Databases from "metabase/entities/databases";
-import Search from "metabase/entities/search";
-import { openNavbar } from "metabase/redux/app";
-import { getSetting } from "metabase/selectors/settings";
-import { getUserRedirectHomepageToDashboard } from "metabase/selectors/user";
-import { CollectionItem } from "metabase-types/api";
-import { State } from "metabase-types/store";
-import { canUseMetabotOnDatabase } from "metabase/metabot/utils";
-import Database from "metabase-lib/metadata/Database";
-import HomePage from "../../components/HomePage";
-
-interface EntityLoaderProps {
-  databases: Database[];
-  models: CollectionItem[];
-}
-
-interface StateProps {
-  hasMetabot: boolean;
-  homepageDashboard: number | null;
-}
-
-const mapStateToProps = (
-  state: State,
-  { databases, models }: EntityLoaderProps,
-): StateProps => {
-  const hasModels = models.length > 0;
-  const hasSupportedDatabases = databases.some(canUseMetabotOnDatabase);
-  const isMetabotEnabled = getSetting(state, "is-metabot-enabled");
-
-  return {
-    hasMetabot: hasModels && hasSupportedDatabases && isMetabotEnabled,
-    homepageDashboard: getUserRedirectHomepageToDashboard(state),
-  };
-};
-
-const mapDispatchToProps = {
-  onOpenNavbar: openNavbar,
-};
-
-// eslint-disable-next-line import/no-default-export -- deprecated usage
-export default _.compose(
-  Databases.loadList(),
-  Search.loadList({
-    query: {
-      models: "dataset",
-      limit: 1,
-    },
-    listName: "models",
-  }),
-  connect(mapStateToProps, mapDispatchToProps),
-)(HomePage);

frontend/src/metabase/home/containers/HomePageApp/HomePageApp.unit.spec.tsx

-import { Route, Router } from "react-router";
-import fetchMock from "fetch-mock";
-import DashboardApp from "metabase/dashboard/containers/DashboardApp";
-
-import { createMockDashboard, createMockUser } from "metabase-types/api/mocks";
-import { createMockState } from "metabase-types/store/mocks";
-
-import { renderWithProviders, screen } from "__support__/ui";
-import HomePageApp from "./HomePageApp";
-
-const LayoutMock = () => <div>Content</div>;
-jest.mock("../../components/HomeLayout", () => LayoutMock);
-
-const DashboardMock = () => <div>Dashboard</div>;
-jest.mock("metabase/dashboard/containers/DashboardApp", () => DashboardMock);
-
-const setupForRedirect = ({ customDashboardSet = true } = {}) => {
-  const dashboard = createMockDashboard();
-
-  fetchMock.get("path:/api/dashboard/1", dashboard);
-  fetchMock.get("path:/api/database", []);
-  fetchMock.get("path:/api/search", []);
-
-  renderWithProviders(
-    <Router>
-      <Route path="/" component={HomePageApp} />
-      <Route path="/dashboard/:slug" component={DashboardApp} />
-    </Router>,
-    {
-      withRouter: true,
-      storeInitialState: createMockState({
-        currentUser: createMockUser({
-          custom_homepage: customDashboardSet
-            ? {
-                dashboard_id: 1,
-              }
-            : null,
-        }),
-      }),
-    },
-  );
-};
-
-it("should redirect you to a dashboard when one has been defined to be used as a homepage", async () => {
-  setupForRedirect();
-  expect(await screen.findByText("Dashboard")).toBeInTheDocument();
-});
-
-it("should render homepage when custom-homepage is false", async () => {
-  setupForRedirect({
-    customDashboardSet: false,
-  });
-  expect(await screen.findByText("Content")).toBeInTheDocument();
-});

frontend/src/metabase/home/containers/HomePageApp/index.ts

-// eslint-disable-next-line import/no-default-export -- deprecated usage
-export { default } from "./HomePageApp";

frontend/src/metabase/home/containers/HomeXraySection/HomeXraySection.tsx

-import { connect } from "react-redux";
-import _ from "underscore";
-import Databases from "metabase/entities/databases";
-import DatabaseCandidates from "metabase/entities/database-candidates";
-import { isSyncCompleted } from "metabase/lib/syncing";
-import { State } from "metabase-types/store";
-import Database from "metabase-lib/metadata/Database";
-import HomeXraySection from "../../components/HomeXraySection";
-
-interface XraySectionProps {
-  database?: Database;
-  databases: Database[];
-}
-
-const getXrayDatabase = ({ databases }: XraySectionProps) => {
-  const sampleDatabase = databases.find(d => d.is_sample && isSyncCompleted(d));
-  const userDatabase = databases.find(d => !d.is_sample && isSyncCompleted(d));
-  return userDatabase ?? sampleDatabase;
-};
-
-const getXrayQuery = (state: State, { database }: XraySectionProps) => ({
-  id: database?.id,
-});
-
-const mapStateToProps = (state: State, props: XraySectionProps) => ({
-  database: getXrayDatabase(props),
-});
-
-// eslint-disable-next-line import/no-default-export -- deprecated usage
-export default _.compose(
-  Databases.loadList(),
-  connect(mapStateToProps),
-  DatabaseCandidates.loadList({ query: getXrayQuery, listName: "candidates" }),
-)(HomeXraySection);

frontend/src/metabase/home/containers/HomeXraySection/index.ts

-// eslint-disable-next-line import/no-default-export -- deprecated usage
-export { default } from "./HomeXraySection";

frontend/src/metabase/home/selectors.ts

+import { createSelector } from "@reduxjs/toolkit";
+import { getSetting } from "metabase/selectors/settings";
+import { State } from "metabase-types/store";
+import { getUser } from "metabase/selectors/user";
+
+export const getIsXrayEnabled = (state: State) => {
+  return getSetting(state, "enable-xrays");
+};
+
+export const getIsMetabotEnabled = (state: State) => {
+  return getSetting(state, "is-metabot-enabled");
+};
+
+export const getHasMetabotLogo = (state: State) => {
+  return getSetting(state, "show-metabot");
+};
+
+export const getHasIllustration = (state: State) => {
+  return getSetting(state, "show-lighthouse-illustration");
+};
+
+export const getCustomHomePageDashboardId = createSelector(
+  [getUser],
+  user => user?.custom_homepage?.dashboard_id || null,
+);

frontend/src/metabase/routes.jsx

@@ -55,7 +55,7 @@ import DashboardMoveModal from "metabase/dashboard/components/DashboardMoveModal
 import DashboardCopyModal from "metabase/dashboard/components/DashboardCopyModal";
 import { ModalRoute } from "metabase/hoc/ModalRoute";
 
-import HomePageApp from "metabase/home/containers/HomePageApp";
+import { HomePage } from "metabase/home/components/HomePage";
 import CollectionLanding from "metabase/collections/components/CollectionLanding";
 
 import ArchiveApp from "metabase/archive/containers/ArchiveApp";
@@ -120,7 +120,7 @@ export const getRoutes = store => (
         {/* The global all hands routes, things in here are for all the folks */}
         <Route
           path="/"
-          component={HomePageApp}
+          component={HomePage}
           onEnter={(nextState, replace) => {
             const page = PLUGIN_LANDING_PAGE[0] && PLUGIN_LANDING_PAGE[0]();
             if (page && page !== "/") {

frontend/src/metabase/selectors/user.ts

@@ -30,8 +30,3 @@ export const getUserPersonalCollectionId = createSelector(
   [getUser],
   user => user?.personal_collection_id,
 );
-
-export const getUserRedirectHomepageToDashboard = createSelector(
-  [getUser],
-  user => user?.custom_homepage?.dashboard_id || null,
-);