Add entity loader hooks for Search, RecentItems, PopularItems, DatabaseCandidates (#31143)

frontend/src/metabase-types/api/automagic-dashboards.ts

+import { DatabaseId } from "metabase-types/api/database";
+
 export interface DatabaseCandidate {
   id: string;
   schema: string;
@@ -8,3 +10,7 @@ export interface TableCandidate {
   title: string;
   url: string;
 }
+
+export interface DatabaseCandidateListQuery {
+  id: DatabaseId;
+}

frontend/src/metabase-types/api/collection.ts

@@ -51,9 +51,9 @@ type CollectionItemModel =
 
 export type CollectionItemId = number;
 
-export interface CollectionItem<T = CollectionItemModel> {
+export interface CollectionItem {
   id: CollectionItemId;
-  model: T;
+  model: CollectionItemModel;
   name: string;
   description: string | null;
   copy?: boolean;

frontend/src/metabase-types/api/search.ts

+import { DatabaseId } from "./database";
+
 export type SearchModelType =
   | "card"
   | "collection"
@@ -5,4 +7,14 @@ export type SearchModelType =
   | "database"
   | "dataset"
   | "table"
-  | "indexed-entity";
+  | "indexed-entity"
+  | "pulse";
+
+export interface SearchListQuery {
+  q?: string;
+  models?: SearchModelType | SearchModelType[];
+  archived?: boolean;
+  table_db_id?: DatabaseId;
+  limit?: number;
+  offset?: number;
+}

frontend/src/metabase/common/hooks/index.ts

+export * from "./use-collection-query";
 export * from "./use-dashboard-query";
+export * from "./use-database-candidate-list-query";
 export * from "./use-database-id-field-list-query";
 export * from "./use-database-list-query";
 export * from "./use-database-query";
 export * from "./use-metric-list-query";
 export * from "./use-metric-query";
+export * from "./use-most-recently-viewed-dashboard";
+export * from "./use-popular-item-list-query";
 export * from "./use-question-list-query";
 export * from "./use-question-query";
+export * from "./use-recent-item-list-query";
 export * from "./use-schema-list-query";
+export * from "./use-search-list-query";
 export * from "./use-segment-list-query";
 export * from "./use-segment-query";
 export * from "./use-table-list-query";
 export * from "./use-table-metadata-query";
 export * from "./use-table-query";
-export * from "./use-collection-query";
-export * from "./use-most-recently-viewed-dashboard";

frontend/src/metabase/common/hooks/use-database-candidate-list-query/index.ts

+export * from "./use-database-candidate-list-query";

frontend/src/metabase/common/hooks/use-database-candidate-list-query/use-database-candidate-list-query.ts

+import DatabaseCandidates from "metabase/entities/database-candidates";
+import {
+  DatabaseCandidateListQuery,
+  DatabaseCandidate,
+} from "metabase-types/api";
+import {
+  useEntityListQuery,
+  UseEntityListQueryProps,
+  UseEntityListQueryResult,
+} from "../use-entity-list-query";
+
+export const useDatabaseCandidateListQuery = (
+  props: UseEntityListQueryProps<DatabaseCandidateListQuery> = {},
+): UseEntityListQueryResult<DatabaseCandidate> => {
+  return useEntityListQuery(props, {
+    fetchList: DatabaseCandidates.actions.fetchList,
+    getList: DatabaseCandidates.selectors.getList,
+    getLoading: DatabaseCandidates.selectors.getLoading,
+    getLoaded: DatabaseCandidates.selectors.getLoaded,
+    getError: DatabaseCandidates.selectors.getError,
+  });
+};

frontend/src/metabase/common/hooks/use-database-candidate-list-query/use-database-candidate-list-query.unit.spec.tsx

+import React from "react";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
+import { createMockDatabaseCandidate } from "metabase-types/api/mocks";
+import { setupDatabaseCandidatesEndpoint } from "__support__/server-mocks";
+import {
+  renderWithProviders,
+  screen,
+  waitForElementToBeRemoved,
+} from "__support__/ui";
+import { useDatabaseCandidateListQuery } from "./use-database-candidate-list-query";
+
+const TEST_DB_ID = 1;
+const TEST_DB_CANDIDATE = createMockDatabaseCandidate();
+
+const TestComponent = () => {
+  const {
+    data = [],
+    isLoading,
+    error,
+  } = useDatabaseCandidateListQuery({
+    query: { id: TEST_DB_ID },
+  });
+
+  if (isLoading || error) {
+    return <LoadingAndErrorWrapper loading={isLoading} error={error} />;
+  }
+
+  return (
+    <div>
+      {data.map((item, index) => (
+        <div key={index}>{item.schema}</div>
+      ))}
+    </div>
+  );
+};
+
+const setup = () => {
+  setupDatabaseCandidatesEndpoint(TEST_DB_ID, [TEST_DB_CANDIDATE]);
+  renderWithProviders(<TestComponent />);
+};
+
+describe("useDatabaseCandidateListQuery", () => {
+  it("should be initially loading", () => {
+    setup();
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
+  });
+
+  it("should show data from the response", async () => {
+    setup();
+    await waitForElementToBeRemoved(() => screen.queryByText("Loading..."));
+    expect(screen.getByText(TEST_DB_CANDIDATE.schema)).toBeInTheDocument();
+  });
+});

frontend/src/metabase/common/hooks/use-popular-item-list-query/index.ts

+export * from "./use-popular-item-list-query";

frontend/src/metabase/common/hooks/use-popular-item-list-query/use-popular-item-list-query.ts

+import PopularItems from "metabase/entities/popular-items";
+import { PopularItem } from "metabase-types/api";
+import {
+  useEntityListQuery,
+  UseEntityListQueryProps,
+  UseEntityListQueryResult,
+} from "../use-entity-list-query";
+
+export const usePopularItemListQuery = (
+  props: UseEntityListQueryProps = {},
+): UseEntityListQueryResult<PopularItem> => {
+  return useEntityListQuery(props, {
+    fetchList: PopularItems.actions.fetchList,
+    getList: PopularItems.selectors.getList,
+    getLoading: PopularItems.selectors.getLoading,
+    getLoaded: PopularItems.selectors.getLoaded,
+    getError: PopularItems.selectors.getError,
+  });
+};

frontend/src/metabase/common/hooks/use-popular-item-list-query/use-popular-item-list-query.unit.spec.tsx

+import React from "react";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
+import { createMockPopularItem } from "metabase-types/api/mocks";
+import { setupPopularItemsEndpoints } from "__support__/server-mocks";
+import {
+  renderWithProviders,
+  screen,
+  waitForElementToBeRemoved,
+} from "__support__/ui";
+import { usePopularItemListQuery } from "./use-popular-item-list-query";
+
+const TEST_ITEM = createMockPopularItem();
+
+const TestComponent = () => {
+  const { data = [], isLoading, error } = usePopularItemListQuery();
+
+  if (isLoading || error) {
+    return <LoadingAndErrorWrapper loading={isLoading} error={error} />;
+  }
+
+  return (
+    <div>
+      {data.map((item, index) => (
+        <div key={index}>{item.model_object.name}</div>
+      ))}
+    </div>
+  );
+};
+
+const setup = () => {
+  setupPopularItemsEndpoints([TEST_ITEM]);
+  renderWithProviders(<TestComponent />);
+};
+
+describe("usePopularItemListQuery", () => {
+  it("should be initially loading", () => {
+    setup();
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
+  });
+
+  it("should show data from the response", async () => {
+    setup();
+    await waitForElementToBeRemoved(() => screen.queryByText("Loading..."));
+    expect(screen.getByText(TEST_ITEM.model_object.name)).toBeInTheDocument();
+  });
+});

frontend/src/metabase/common/hooks/use-recent-item-list-query/index.ts

+export * from "./use-recent-item-list-query";

frontend/src/metabase/common/hooks/use-recent-item-list-query/use-recent-item-list-query.ts

+import RecentItems from "metabase/entities/recent-items";
+import { RecentItem } from "metabase-types/api";
+import {
+  useEntityListQuery,
+  UseEntityListQueryProps,
+  UseEntityListQueryResult,
+} from "../use-entity-list-query";
+
+export const useRecentItemListQuery = (
+  props: UseEntityListQueryProps = {},
+): UseEntityListQueryResult<RecentItem> => {
+  return useEntityListQuery(props, {
+    fetchList: RecentItems.actions.fetchList,
+    getList: RecentItems.selectors.getList,
+    getLoading: RecentItems.selectors.getLoading,
+    getLoaded: RecentItems.selectors.getLoaded,
+    getError: RecentItems.selectors.getError,
+  });
+};

frontend/src/metabase/common/hooks/use-recent-item-list-query/use-recent-item-list-query.unit.spec.tsx

+import React from "react";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
+import { createMockRecentItem } from "metabase-types/api/mocks";
+import { setupRecentViewsEndpoints } from "__support__/server-mocks";
+import {
+  renderWithProviders,
+  screen,
+  waitForElementToBeRemoved,
+} from "__support__/ui";
+import { useRecentItemListQuery } from "./use-recent-item-list-query";
+
+const TEST_ITEM = createMockRecentItem();
+
+const TestComponent = () => {
+  const { data = [], isLoading, error } = useRecentItemListQuery();
+
+  if (isLoading || error) {
+    return <LoadingAndErrorWrapper loading={isLoading} error={error} />;
+  }
+
+  return (
+    <div>
+      {data.map((item, index) => (
+        <div key={index}>{item.model_object.name}</div>
+      ))}
+    </div>
+  );
+};
+
+const setup = () => {
+  setupRecentViewsEndpoints([TEST_ITEM]);
+  renderWithProviders(<TestComponent />);
+};
+
+describe("useRecentItemListQuery", () => {
+  it("should be initially loading", () => {
+    setup();
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
+  });
+
+  it("should show data from the response", async () => {
+    setup();
+    await waitForElementToBeRemoved(() => screen.queryByText("Loading..."));
+    expect(screen.getByText(TEST_ITEM.model_object.name)).toBeInTheDocument();
+  });
+});

frontend/src/metabase/common/hooks/use-search-list-query/index.ts

+export * from "./use-search-list-query";

frontend/src/metabase/common/hooks/use-search-list-query/use-search-list-query.ts

+import Search from "metabase/entities/search";
+import { CollectionItem, SearchListQuery } from "metabase-types/api";
+import {
+  useEntityListQuery,
+  UseEntityListQueryProps,
+  UseEntityListQueryResult,
+} from "../use-entity-list-query";
+
+export const useSearchListQuery = (
+  props: UseEntityListQueryProps<SearchListQuery> = {},
+): UseEntityListQueryResult<CollectionItem> => {
+  return useEntityListQuery(props, {
+    fetchList: Search.actions.fetchList,
+    getList: Search.selectors.getList,
+    getLoading: Search.selectors.getLoading,
+    getLoaded: Search.selectors.getLoaded,
+    getError: Search.selectors.getError,
+  });
+};

frontend/src/metabase/common/hooks/use-search-list-query/use-search-list-query.unit.spec.tsx

+import React from "react";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
+import { createMockCollectionItem } from "metabase-types/api/mocks";
+import { setupSearchEndpoints } from "__support__/server-mocks";
+import {
+  renderWithProviders,
+  screen,
+  waitForElementToBeRemoved,
+} from "__support__/ui";
+import { useSearchListQuery } from "./use-search-list-query";
+
+const TEST_ITEM = createMockCollectionItem();
+
+const TestComponent = () => {
+  const {
+    data = [],
+    isLoading,
+    error,
+  } = useSearchListQuery({
+    query: { models: TEST_ITEM.model },
+  });
+
+  if (isLoading || error) {
+    return <LoadingAndErrorWrapper loading={isLoading} error={error} />;
+  }
+
+  return (
+    <div>
+      {data.map(item => (
+        <div key={item.id}>{item.name}</div>
+      ))}
+    </div>
+  );
+};
+
+const setup = () => {
+  setupSearchEndpoints([TEST_ITEM]);
+  renderWithProviders(<TestComponent />);
+};
+
+describe("useSearchListQuery", () => {
+  it("should be initially loading", () => {
+    setup();
+    expect(screen.getByText("Loading...")).toBeInTheDocument();
+  });
+
+  it("should show data from the response", async () => {
+    setup();
+    await waitForElementToBeRemoved(() => screen.queryByText("Loading..."));
+    expect(screen.getByText(TEST_ITEM.name)).toBeInTheDocument();
+  });
+});

frontend/test/__support__/server-mocks/automagic-dashboards.ts

+import fetchMock from "fetch-mock";
+import { DatabaseCandidate, DatabaseId } from "metabase-types/api";
+
+export function setupDatabaseCandidatesEndpoint(
+  id: DatabaseId,
+  candidates: DatabaseCandidate[],
+) {
+  fetchMock.get(
+    `path:/api/automagic-dashboards/database/${id}/candidates`,
+    candidates,
+  );
+}

frontend/test/__support__/server-mocks/index.ts

 export * from "./action";
 export * from "./activity";
 export * from "./alert";
+export * from "./automagic-dashboards";
 export * from "./bookmark";
 export * from "./card";
 export * from "./collection";