Fix apps and pages in search and recent/popular items (#25214)

* Add `DataAppSearchItem` type

* Handle app search item type in `Urls.dataApp`

* Add `getUrl` method to data apps entity

* Support apps and pages in `entityTypeForModel`

* Properly display page icons in search

* Fix apps and pages labels

* Temporary use dash URL for pages

* Handle data apps in `Urls.collection`

* Add apps and pages filters to the `/search` page

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

-export type CollectionId = number | "root";
+export type RegularCollectionId = number;
+
+export type CollectionId = RegularCollectionId | "root";
 
 export type CollectionContentModel = "card" | "dataset";
 

frontend/src/metabase-types/api/data-app.ts

-import { Collection } from "./collection";
+import { Collection, RegularCollectionId } from "./collection";
 
 export type DataAppId = number;
 
@@ -15,3 +15,9 @@ export interface DataApp {
   created_at: string;
   updated_at: string;
 }
+
+export interface DataAppSearchItem {
+  id: RegularCollectionId;
+  app_id: DataAppId;
+  collection: Collection;
+}

frontend/src/metabase/entities/dashboards.js

@@ -134,7 +134,10 @@ const Dashboards = createEntity({
     getCollection: dashboard =>
       dashboard && normalizedCollection(dashboard.collection),
     getIcon: dashboard => ({
-      name: dashboard.is_app_page ? "document" : "dashboard",
+      name:
+        dashboard.is_app_page || dashboard.model === "page"
+          ? "document"
+          : "dashboard",
     }),
     getColor: () => color("dashboard"),
   },

frontend/src/metabase/entities/data-apps/data-apps.ts

 import { color } from "metabase/lib/colors";
 import { createEntity } from "metabase/lib/entities";
+import * as Urls from "metabase/lib/urls";
 
 import { DataAppSchema } from "metabase/schema";
 import { CollectionsApi, DataAppsApi } from "metabase/services";
 
-import { Collection, DataApp } from "metabase-types/api";
+import { Collection, DataApp, DataAppSearchItem } from "metabase-types/api";
 
 import { DEFAULT_COLLECTION_COLOR_ALIAS } from "../collections/constants";
 
@@ -62,6 +63,9 @@ const DataApps = createEntity({
 
   objectSelectors: {
     getIcon: getDataAppIcon,
+    getUrl: (dataApp: DataApp | DataAppSearchItem) => {
+      return Urls.dataApp(dataApp, { mode: "preview" });
+    },
   },
 
   forms: {

frontend/src/metabase/home/containers/SearchApp.jsx

@@ -28,6 +28,11 @@ import {
 const PAGE_SIZE = 50;
 
 const SEARCH_FILTERS = [
+  {
+    name: t`Apps`,
+    filter: "app",
+    icon: "star",
+  },
   {
     name: t`Dashboards`,
     filter: "dashboard",
@@ -58,6 +63,11 @@ const SEARCH_FILTERS = [
     filter: "card",
     icon: "bar",
   },
+  {
+    name: t`Pages`,
+    filter: "page",
+    icon: "document",
+  },
   {
     name: t`Pulses`,
     filter: "pulse",

frontend/src/metabase/lib/schema/schema.js

 // backend returns model = "card" instead of "question"
-export const entityTypeForModel = model =>
-  model === "card" || model === "dataset" ? "questions" : `${model}s`;
+export const entityTypeForModel = model => {
+  if (model === "card" || model === "dataset") {
+    return "questions";
+  }
+  if (model === "page") {
+    return "dashboards";
+  }
+  if (model === "app") {
+    return "dataApps";
+  }
+  return `${model}s`;
+};
 
 export const entityTypeForObject = object =>
   object && entityTypeForModel(object.model);

frontend/src/metabase/lib/urls/collections.ts

 import slugg from "slugg";
 
-import { Collection as BaseCollection, CollectionId } from "metabase-types/api";
+import {
+  Collection as BaseCollection,
+  CollectionId,
+  RegularCollectionId,
+} from "metabase-types/api";
 
+import { dataApp } from "./dataApps";
 import { appendSlug, extractEntityId } from "./utils";
 
 export const newCollection = (collectionId: CollectionId) =>
@@ -11,7 +16,7 @@ export const otherUsersPersonalCollections = () => "/collection/users";
 
 type Collection = Pick<
   BaseCollection,
-  "id" | "name" | "originalName" | "personal_owner_id"
+  "id" | "name" | "originalName" | "personal_owner_id" | "app_id"
 >;
 
 function slugifyPersonalCollection(collection: Collection) {
@@ -43,6 +48,21 @@ export function collection(collection?: Collection) {
     return `/collection/${id}`;
   }
 
+  // Data app is another kind of Metabase entity build on top of a collection
+  // Each app has a 1:1 relation with a collection
+  // (this collection isn't shown in Metabase though, the app serves as a "wrapper")
+  // When building collection URLs we should take `app_id` into account
+  if (typeof collection.app_id === "number") {
+    return dataApp(
+      {
+        id: collection.id as RegularCollectionId,
+        app_id: collection.app_id,
+        collection: collection as BaseCollection,
+      },
+      { mode: "preview" },
+    );
+  }
+
   const isPersonalCollection = typeof collection.personal_owner_id === "number";
   const slug = isPersonalCollection
     ? slugifyPersonalCollection(collection)

frontend/src/metabase/lib/urls/dataApps.ts

 import slugg from "slugg";
 
-import type { DataApp, Dashboard } from "metabase-types/api";
+import type { DataApp, DataAppSearchItem, Dashboard } from "metabase-types/api";
 
 import { appendSlug } from "./utils";
 
@@ -22,13 +22,17 @@ type DataAppUrlMode = "preview" | "internal" | "app-url";
  * @returns {string} — pathname
  */
 export function dataApp(
-  app: DataApp,
+  app: DataApp | DataAppSearchItem,
   { mode = "internal" }: { mode?: DataAppUrlMode } = {},
 ) {
+  const appId = "app_id" in app ? app.app_id : app.id;
+  const appName = app.collection.name;
+
   if (mode === "preview") {
-    return appendSlug(`/apps/${app.id}`, slugg(app.collection.name));
+    return appendSlug(`/apps/${appId}`, slugg(appName));
   }
-  return appendSlug(`/a/${app.id}`, slugg(app.collection.name));
+
+  return appendSlug(`/a/${appId}`, slugg(appName));
 }
 
 export function dataAppPage(app: DataApp, page: Dashboard) {

frontend/src/metabase/lib/urls/misc.js

@@ -36,6 +36,8 @@ export function modelToUrl(item) {
       return dataset(modelData);
     case "dashboard":
       return dashboard(modelData);
+    case "page":
+      return dashboard(modelData);
     case "pulse":
       return pulse(modelData.id);
     case "table":

frontend/src/metabase/nav/utils/model-names.ts

 import { t } from "ttag";
 
 const TRANSLATED_NAME_BY_MODEL_TYPE: Record<string, string> = {
+  app: t`App`,
   card: t`Question`,
   dataset: t`Dataset`,
   dashboard: t`Dashboard`,
@@ -9,6 +10,7 @@ const TRANSLATED_NAME_BY_MODEL_TYPE: Record<string, string> = {
   collection: t`Collection`,
   segment: t`Segment`,
   metric: t`Metric`,
+  page: t`Page`,
   pulse: t`Pulse`,
 };
 

frontend/src/metabase/search/components/InfoText.jsx

@@ -29,6 +29,8 @@ const infoTextPropTypes = {
 
 export function InfoText({ result }) {
   switch (result.model) {
+    case "app":
+      return t`App`;
     case "card":
       return jt`Saved question in ${formatCollection(
         result,
@@ -40,6 +42,8 @@ export function InfoText({ result }) {
       return getCollectionInfoText(result.collection);
     case "database":
       return t`Database`;
+    case "page":
+      return t`Page`;
     case "table":
       return <TablePath result={result} />;
     case "segment":

frontend/test/metabase/lib/urls.unit.spec.js

@@ -2,12 +2,17 @@ import {
   browseDatabase,
   collection,
   dashboard,
+  dataApp,
   question,
   extractQueryParams,
   extractEntityId,
   extractCollectionId,
   isCollectionPath,
 } from "metabase/lib/urls";
+import {
+  createMockDataApp,
+  createMockCollection,
+} from "metabase-types/api/mocks";
 
 describe("urls", () => {
   describe("question", () => {
@@ -217,6 +222,51 @@ describe("urls", () => {
         }),
       ).toBe("/collection/1-john-doe-s-personal-collection");
     });
+
+    it("handles data app collections", () => {
+      const appCollection = createMockCollection({
+        id: 2,
+        app_id: 5,
+        name: "My App",
+      });
+      expect(collection(appCollection)).toBe("/apps/5-my-app");
+    });
+  });
+
+  describe("dataApp", () => {
+    const appCollection = createMockCollection({ id: 1 });
+    const app = createMockDataApp({ id: 2, collection: appCollection });
+
+    const appId = app.id;
+    const appName = appCollection.name.toLowerCase();
+
+    const appSearchItem = {
+      id: appCollection.id,
+      app_id: app.id,
+      collection: { ...appCollection, app_id: app.id },
+    };
+
+    it("returns data app preview URL", () => {
+      expect(dataApp(app, { mode: "preview" })).toBe(
+        `/apps/${appId}-${appName}`,
+      );
+    });
+
+    it("returns data app internal URL", () => {
+      expect(dataApp(app, { mode: "internal" })).toBe(`/a/${appId}-${appName}`);
+    });
+
+    it("returns data app preview URL out of search result item", () => {
+      expect(dataApp(appSearchItem, { mode: "preview" })).toBe(
+        `/apps/${appId}-${appName}`,
+      );
+    });
+
+    it("returns data app internal URL out of search result item", () => {
+      expect(dataApp(appSearchItem, { mode: "internal" })).toBe(
+        `/a/${appId}-${appName}`,
+      );
+    });
   });
 
   describe("extractEntityId", () => {