Add normalized data mock helpers (#30769)

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

@@ -55,6 +55,7 @@ export type FieldValuesType = "list" | "search" | "none";
 
 export type FieldDimension = {
   name: string;
+  human_readable_field?: Field;
 };
 
 export type FieldDimensionOption = {

frontend/src/metabase-types/api/mocks/field.ts

 import {
   DateTimeFieldFingerprint,
   Field,
+  FieldDimension,
   FieldFingerprint,
   FieldGlobalFingerprint,
   FieldValues,
@@ -92,3 +93,10 @@ export const createMockDateTimeFieldFingerprint = (
   latest: "2020-01-01",
   ...opts,
 });
+
+export const createMockFieldDimension = (
+  opts?: Partial<FieldDimension>,
+): FieldDimension => ({
+  name: "mock_field",
+  ...opts,
+});

frontend/src/metabase-types/api/mocks/index.ts

@@ -12,6 +12,7 @@ export * from "./metric";
 export * from "./models";
 export * from "./parameters";
 export * from "./query";
+export * from "./schema";
 export * from "./segment";
 export * from "./table";
 export * from "./timeline";

frontend/src/metabase-types/api/mocks/schema.ts

+import {
+  NormalizedCollection,
+  NormalizedDatabase,
+  NormalizedField,
+  NormalizedFieldDimension,
+  NormalizedMetric,
+  NormalizedSchema,
+  NormalizedSegment,
+  NormalizedTable,
+  NormalizedTimeline,
+} from "metabase-types/api";
+import { createMockDatabase } from "./database";
+import { createMockCollection } from "./collection";
+import { createMockField, createMockFieldDimension } from "./field";
+import { createMockMetric } from "./metric";
+import { createMockSegment } from "./segment";
+import { createMockSchema, createMockTable } from "./table";
+import { createMockTimeline } from "./timeline";
+
+export const createMockNormalizedDatabase = ({
+  tables,
+  schemas,
+  ...opts
+}: Partial<NormalizedDatabase> = {}): NormalizedDatabase => ({
+  ...createMockDatabase(opts),
+  tables,
+  schemas,
+});
+
+export const createMockNormalizedSchema = ({
+  database,
+  tables,
+  ...opts
+}: Partial<NormalizedSchema> = {}): NormalizedSchema => ({
+  ...createMockSchema(opts),
+  database,
+  tables,
+});
+
+export const createMockNormalizedTable = ({
+  db,
+  schema,
+  fields,
+  segments,
+  metrics,
+  ...opts
+}: Partial<NormalizedTable> = {}): NormalizedTable => ({
+  ...createMockTable(opts),
+  db,
+  schema,
+  fields,
+  segments,
+  metrics,
+});
+
+export const createMockNormalizedFieldDimension = ({
+  human_readable_field,
+  ...opts
+}: Partial<NormalizedFieldDimension> = {}): NormalizedFieldDimension => ({
+  ...createMockFieldDimension(opts),
+  human_readable_field,
+});
+
+export const createMockNormalizedField = ({
+  target,
+  table,
+  name_field,
+  dimensions,
+  ...opts
+}: Partial<NormalizedField>): NormalizedField => ({
+  ...createMockField(opts),
+  target,
+  table,
+  name_field,
+  dimensions,
+});
+
+export const createMockNormalizedSegment = ({
+  table,
+  ...opts
+}: Partial<NormalizedSegment> = {}): NormalizedSegment => ({
+  ...createMockSegment(opts),
+  table,
+});
+
+export const createMockNormalizedMetric = ({
+  table,
+  ...opts
+}: Partial<NormalizedMetric> = {}): NormalizedMetric => ({
+  ...createMockMetric(opts),
+  table,
+});
+
+export const createMockNormalizedTimeline = ({
+  collection,
+  events,
+  ...opts
+}: Partial<NormalizedTimeline> = {}): NormalizedTimeline => ({
+  ...createMockTimeline(opts),
+  collection,
+  events,
+});
+
+export const createMockNormalizedCollection = ({
+  items,
+  ...opts
+}: Partial<NormalizedCollection> = {}): NormalizedCollection => ({
+  ...createMockCollection(opts),
+  items,
+});

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

 import type { Database, DatabaseId, InitialSyncStatus } from "./database";
-import type { Field, FieldDimensionOption } from "./field";
+import type { Field, FieldDimensionOption, FieldId } from "./field";
 import type { Metric } from "./metric";
 import type { Segment } from "./segment";
 
@@ -64,6 +64,12 @@ export interface TableQuery {
   include_editable_data_model?: boolean;
 }
 
+export interface TableMetadataQuery {
+  include_sensitive_fields?: boolean;
+  include_hidden_fields?: boolean;
+  include_editable_data_model?: boolean;
+}
+
 export interface TableListQuery {
   dbId?: DatabaseId;
   schemaName?: string;
@@ -73,8 +79,8 @@ export interface TableListQuery {
 
 export interface ForeignKey {
   origin: Field;
-  origin_id: number;
+  origin_id: FieldId;
   destination: Field;
-  destination_id: number;
+  destination_id: FieldId;
   relationship: string; // enum?
 }

frontend/src/metabase-types/store/mocks/entities.ts

+import { EntitiesState } from "metabase-types/store";
+
+// This is a helper for cases when entities state doesn't matter
+// Most likely, createMockEntitiesState from __support__/store would be a better choice
+export const createMockNormalizedEntitiesState = (): EntitiesState => ({
+  actions: {},
+  alerts: {},
+  collections: {},
+  dashboards: {},
+  databases: {},
+  schemas: {},
+  tables: {},
+  fields: {},
+  metrics: {},
+  segments: {},
+  snippets: {},
+  users: {},
+  questions: {},
+});

frontend/src/metabase-types/store/mocks/index.ts

 export * from "./admin";
 export * from "./app";
 export * from "./dashboard";
+export * from "./entities";
 export * from "./embed";
 export * from "./metabot";
 export * from "./parameters";

frontend/src/metabase-types/store/mocks/state.ts

-import { EntitiesState, State } from "metabase-types/store";
+import { State } from "metabase-types/store";
 import { createMockUser } from "metabase-types/api/mocks";
-import {
-  createMockAdminState,
-  createMockAppState,
-  createMockDashboardState,
-  createMockEmbedState,
-  createMockMetabotState,
-  createMockParametersState,
-  createMockQueryBuilderState,
-  createMockSettingsState,
-  createMockSetupState,
-  createMockUploadState,
-} from "metabase-types/store/mocks";
-
-// This is a helper for cases when entities state doesn't matter
-// Most likely, createEntitiesState from __support__/store would be a better choice
-export const createPlaceholderEntitiesState = (): EntitiesState => ({
-  actions: {},
-  alerts: {},
-  collections: {},
-  dashboards: {},
-  databases: {},
-  schemas: {},
-  tables: {},
-  fields: {},
-  metrics: {},
-  segments: {},
-  snippets: {},
-  users: {},
-  questions: {},
-});
+import { createMockAdminState } from "./admin";
+import { createMockAppState } from "./app";
+import { createMockDashboardState } from "./dashboard";
+import { createMockNormalizedEntitiesState } from "./entities";
+import { createMockEmbedState } from "./embed";
+import { createMockMetabotState } from "./metabot";
+import { createMockParametersState } from "./parameters";
+import { createMockQueryBuilderState } from "./qb";
+import { createMockSettingsState } from "./settings";
+import { createMockSetupState } from "./setup";
+import { createMockUploadState } from "./upload";
 
 export const createMockState = (opts?: Partial<State>): State => ({
   admin: createMockAdminState(),
@@ -37,7 +18,7 @@ export const createMockState = (opts?: Partial<State>): State => ({
   currentUser: createMockUser(),
   dashboard: createMockDashboardState(),
   embed: createMockEmbedState(),
-  entities: createPlaceholderEntitiesState(),
+  entities: createMockNormalizedEntitiesState(),
   metabot: createMockMetabotState(),
   parameters: createMockParametersState(),
   qb: createMockQueryBuilderState(),

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

@@ -9,4 +9,5 @@ export * from "./use-schema-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";

frontend/src/metabase/common/hooks/use-table-metadata-query/index.ts

+export * from "./use-table-metadata-query";

frontend/src/metabase/common/hooks/use-table-metadata-query/use-table-metadata-query.ts

+import Tables from "metabase/entities/tables";
+import {
+  useEntityQuery,
+  UseEntityQueryProps,
+  UseEntityQueryResult,
+} from "metabase/common/hooks/use-entity-query";
+import { TableId, TableMetadataQuery } from "metabase-types/api";
+import Table from "metabase-lib/metadata/Table";
+
+export const useTableMetadataQuery = (
+  props: UseEntityQueryProps<TableId, TableMetadataQuery>,
+): UseEntityQueryResult<Table> => {
+  return useEntityQuery(props, {
+    fetch: Tables.actions.fetchMetadata,
+    getObject: Tables.selectors.getObject,
+    getLoading: Tables.selectors.getLoading,
+    getError: Tables.selectors.getError,
+    requestType: "fetchMetadata",
+  });
+};

frontend/src/metabase/common/hooks/use-table-metadata-query/use-table-metadata-query.unit.spec.tsx

+import React from "react";
+import LoadingAndErrorWrapper from "metabase/components/LoadingAndErrorWrapper";
+import { createMockDatabase, createMockTable } from "metabase-types/api/mocks";
+import { setupDatabasesEndpoints } from "__support__/server-mocks";
+import {
+  renderWithProviders,
+  screen,
+  waitForElementToBeRemoved,
+} from "__support__/ui";
+import { useTableMetadataQuery } from "./use-table-metadata-query";
+
+const TEST_TABLE = createMockTable();
+const TEST_DATABASE = createMockDatabase({ tables: [TEST_TABLE] });
+
+const TestComponent = () => {
+  const { data, isLoading, error } = useTableMetadataQuery({
+    id: TEST_TABLE.id,
+  });
+
+  if (isLoading || error || !data) {
+    return <LoadingAndErrorWrapper loading={isLoading} error={error} />;
+  }
+
+  return <div>{data.name}</div>;
+};
+
+const setup = () => {
+  setupDatabasesEndpoints([TEST_DATABASE]);
+  renderWithProviders(<TestComponent />);
+};
+
+describe("useTableQuery", () => {
+  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_TABLE.name)).toBeInTheDocument();
+  });
+});

frontend/test/__support__/store.ts

@@ -31,7 +31,7 @@ import {
   Alert,
 } from "metabase-types/api";
 import { EntitiesState } from "metabase-types/store";
-import { createPlaceholderEntitiesState } from "metabase-types/store/mocks";
+import { createMockNormalizedEntitiesState } from "metabase-types/store/mocks";
 
 export interface EntitiesStateOpts {
   actions?: WritebackAction[];
@@ -70,7 +70,7 @@ export const createMockEntitiesState = (
 ): EntitiesState => {
   const schema = normalize(opts, EntitiesSchema);
   return {
-    ...createPlaceholderEntitiesState(),
+    ...createMockNormalizedEntitiesState(),
     ...schema.entities,
   };
 };