Distinguish data app collections from regular ones (#24975)

* Add `app_id` property to `Collection` type

* Add `isDataAppCollection` utility

* Use data app icon for app collections

* Simplify navbar tree collection filtering

* Use `import type` syntax

Co-authored-by: Ryan Laurie <30528226+iethree@users.noreply.github.com>

Co-authored-by: Ryan Laurie <30528226+iethree@users.noreply.github.com>

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

@@ -23,6 +23,11 @@ export interface Collection {
   // Assigned on FE
   originalName?: string;
   path?: CollectionId[];
+
+  // If collection is associated to a data app, it will get an app_id
+  // Data apps are technically collections with extended features
+  // and `app_id` is used to differentiate them from regular collections
+  app_id?: number;
 }
 
 export interface CollectionItem {

frontend/src/metabase/entities/collections/utils.js

@@ -7,12 +7,19 @@ import {
   isPersonalCollection,
   canonicalCollectionId,
 } from "metabase/collections/utils";
+import {
+  getDataAppIcon,
+  isDataAppCollection,
+} from "metabase/entities/data-apps/utils";
 
 import { PLUGIN_COLLECTIONS } from "metabase/plugins";
 
 import { ROOT_COLLECTION, PERSONAL_COLLECTIONS } from "./constants";
 
 export function getCollectionIcon(collection, { tooltip = "default" } = {}) {
+  if (isDataAppCollection(collection)) {
+    return getDataAppIcon();
+  }
   if (collection.id === PERSONAL_COLLECTIONS.id) {
     return { name: "group" };
   }

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

@@ -9,7 +9,7 @@ import { Collection, DataApp } from "metabase-types/api";
 import { DEFAULT_COLLECTION_COLOR_ALIAS } from "../collections/constants";
 
 import { createForm } from "./forms";
-import { getDataAppIcon } from "./utils";
+import { getDataAppIcon, isDataAppCollection } from "./utils";
 
 type EditableDataAppParams = Pick<
   DataApp,
@@ -60,6 +60,6 @@ const DataApps = createEntity({
   },
 });
 
-export { getDataAppIcon };
+export { getDataAppIcon, isDataAppCollection };
 
 export default DataApps;

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

-import { DataApp } from "metabase-types/api";
+import type { Collection, DataApp } from "metabase-types/api";
 
-export function getDataAppIcon(app: DataApp) {
+export function getDataAppIcon(app?: DataApp) {
   return { name: "star" };
 }
+
+export function isDataAppCollection(collection: Collection) {
+  return typeof collection.app_id === "number";
+}

frontend/src/metabase/nav/containers/MainNavbar/MainNavbarContainer.tsx

@@ -19,7 +19,7 @@ import {
 } from "metabase-types/api";
 import { State } from "metabase-types/store";
 
-import DataApps from "metabase/entities/data-apps";
+import DataApps, { isDataAppCollection } from "metabase/entities/data-apps";
 import Bookmarks, { getOrderedBookmarks } from "metabase/entities/bookmarks";
 import Collections, {
   buildCollectionTree,
@@ -202,24 +202,19 @@ function MainNavbarContainer({
   }, [location, params, question, dashboard]);
 
   const collectionTree = useMemo<CollectionTreeItem[]>(() => {
-    const dataAppCollectionIDs = dataApps.map(dataApp => dataApp.collection_id);
-
     const preparedCollections = [];
     const userPersonalCollections = currentUserPersonalCollections(
       collections,
       currentUser.id,
     );
-    const nonPersonalOrArchivedCollections = collections.filter(
-      nonPersonalOrArchivedCollection,
-    );
-    const nonAppsCollections = nonPersonalOrArchivedCollections.filter(
+    const displayableCollections = collections.filter(
       collection =>
-        typeof collection.id === "number" &&
-        !dataAppCollectionIDs.includes(collection.id),
+        nonPersonalOrArchivedCollection(collection) &&
+        !isDataAppCollection(collection),
     );
 
     preparedCollections.push(...userPersonalCollections);
-    preparedCollections.push(...nonAppsCollections);
+    preparedCollections.push(...displayableCollections);
 
     const tree = buildCollectionTree(preparedCollections);
 
@@ -233,7 +228,7 @@ function MainNavbarContainer({
     } else {
       return tree;
     }
-  }, [rootCollection, collections, currentUser, dataApps]);
+  }, [rootCollection, collections, currentUser]);
 
   const reorderBookmarks = useCallback(
     ({ newIndex, oldIndex }) => {