Browsing | Fix collection type & move tree utility (#21288)

* Extend `Collection` type definition

* Use correct types

* Move `buildCollectionTree` to collection utils

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

-export type CollectionId = number | string;
+export type CollectionId = number | "root";
+
+export type CollectionContentModel = "card" | "dataset";
 
 export interface Collection {
   id: CollectionId;
   name: string;
   can_write: boolean;
-  personal_owner_id?: number;
+  archived: boolean;
+  children?: Collection[];
+
+  personal_owner_id?: number | unknown;
+
+  location?: string;
+  effective_ancestors?: Collection[];
+
+  here?: CollectionContentModel[];
+  below?: CollectionContentModel[];
+
+  // Assigned on FE
+  originalName?: string;
 }

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

@@ -6,5 +6,6 @@ export const createMockCollection = (
   id: 1,
   name: "Collection",
   can_write: false,
+  archived: false,
   ...opts,
 });

frontend/src/metabase/collections/components/ActionMenu/ActionMenu.tsx

-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback } from "react";
 
+import { Collection } from "metabase-types/api";
 import { ANALYTICS_CONTEXT } from "metabase/collections/constants";
-import { Item, Collection, isItemPinned } from "metabase/collections/utils";
+import { Item, isItemPinned } from "metabase/collections/utils";
 import EventSandbox from "metabase/components/EventSandbox";
 
 import { EntityItemMenu } from "./ActionMenu.styled";

frontend/src/metabase/collections/components/PinnedItemCard/PinnedItemCard.tsx

 import React, { useState } from "react";
 import { t } from "ttag";
 
+import { Collection } from "metabase-types/api";
+
 import Tooltip from "metabase/components/Tooltip";
-import { Item, Collection } from "metabase/collections/utils";
+import { Item } from "metabase/collections/utils";
 
 import {
   ItemLink,

frontend/src/metabase/collections/components/PinnedItemOverview/PinnedItemOverview.tsx

@@ -2,11 +2,13 @@ import React from "react";
 import _ from "underscore";
 import { t } from "ttag";
 
+import { Collection } from "metabase-types/api";
+
 import Metadata from "metabase-lib/lib/metadata/Metadata";
 import PinnedItemCard from "metabase/collections/components/PinnedItemCard";
 import CollectionCardVisualization from "metabase/collections/components/CollectionCardVisualization";
 import PinnedItemSortDropTarget from "metabase/collections/components/PinnedItemSortDropTarget";
-import { Item, Collection, isRootCollection } from "metabase/collections/utils";
+import { Item, isRootCollection } from "metabase/collections/utils";
 import PinDropZone from "metabase/collections/components/PinDropZone";
 import ItemDragSource from "metabase/containers/dnd/ItemDragSource";
 

frontend/src/metabase/collections/utils.ts

 import { t } from "ttag";
+import _ from "underscore";
+
+import { Collection, CollectionId } from "metabase-types/api";
 
 export type Item = {
   name: string;
@@ -14,20 +17,6 @@ export type Item = {
   model: string;
 };
 
-type CollectionId = "root" | number;
-
-export type Collection = {
-  id: CollectionId;
-  can_write: boolean;
-  name: string;
-  archived: boolean;
-  personal_owner_id?: number | unknown;
-  children?: Collection[];
-  originalName?: string;
-  effective_ancestors?: Collection[];
-  location?: string;
-};
-
 export function nonPersonalOrArchivedCollection(
   collection: Collection,
 ): boolean {

frontend/src/metabase/entities/collections.js

+import _ from "underscore";
 import { createEntity, undo } from "metabase/lib/entities";
 
 import { color } from "metabase/lib/colors";
@@ -324,3 +325,36 @@ function byCollectionUrlId(state, { params, location }) {
 function byCollectionQueryParameter(state, { location }) {
   return location && location.query && location.query.collectionId;
 }
+
+function hasIntersection(list1, list2) {
+  if (!list2) {
+    return false;
+  }
+  return _.intersection(list1, list2).length > 0;
+}
+
+export function buildCollectionTree(collections, { targetModels } = {}) {
+  if (collections == null) {
+    return [];
+  }
+
+  const shouldFilterCollections = Array.isArray(targetModels);
+
+  return collections.flatMap(collection => {
+    const hasTargetModels =
+      !shouldFilterCollections ||
+      hasIntersection(targetModels, collection.below) ||
+      hasIntersection(targetModels, collection.here);
+
+    return hasTargetModels
+      ? {
+          ...collection,
+          schemaName: collection.originalName || collection.name,
+          icon: getCollectionIcon(collection),
+          children: buildCollectionTree(collection.children || [], {
+            targetModels,
+          }),
+        }
+      : [];
+  });
+}

frontend/src/metabase/query_builder/components/saved-question-picker/SavedQuestionPicker.jsx

@@ -9,6 +9,7 @@ import { Tree } from "metabase/components/tree";
 import Collection, {
   ROOT_COLLECTION,
   PERSONAL_COLLECTIONS,
+  buildCollectionTree,
 } from "metabase/entities/collections";
 import {
   isPersonalCollection,
@@ -23,7 +24,7 @@ import {
   BackButton,
   TreeContainer,
 } from "./SavedQuestionPicker.styled";
-import { buildCollectionTree, findCollectionByName } from "./utils";
+import { findCollectionByName } from "./utils";
 
 const propTypes = {
   isDatasets: PropTypes.bool,

frontend/src/metabase/query_builder/components/saved-question-picker/utils.js

 import _ from "underscore";
-import { getCollectionIcon } from "metabase/entities/collections";
-
-function hasIntersection(list1, list2) {
-  return _.intersection(list1, list2).length > 0;
-}
-
-export function buildCollectionTree(collections, { targetModels } = {}) {
-  if (collections == null) {
-    return [];
-  }
-
-  const shouldFilterCollections = Array.isArray(targetModels);
-
-  return collections.flatMap(collection => {
-    const hasTargetModels =
-      !shouldFilterCollections ||
-      hasIntersection(targetModels, collection.below) ||
-      hasIntersection(targetModels, collection.here);
-
-    return hasTargetModels
-      ? {
-          id: collection.id,
-          name: collection.name,
-          schemaName: collection.originalName || collection.name,
-          icon: getCollectionIcon(collection),
-          children: buildCollectionTree(collection.children, { targetModels }),
-        }
-      : [];
-  });
-}
 
 export const findCollectionByName = (collections, name) => {
   if (!collections || collections.length === 0) {

frontend/src/metabase/query_builder/components/saved-question-picker/utils.unit.spec.js → frontend/test/metabase/entities/collections/buildCollectionTree.unit.spec.js

 import { setupEnterpriseTest } from "__support__/enterprise";
-import { buildCollectionTree } from "./utils";
+import { buildCollectionTree } from "metabase/entities/collections";
 
 function getCollection({
   id = 1,
@@ -119,11 +119,13 @@ describe("buildCollectionTree", () => {
           name: collection.name,
           schemaName: collection.name,
           icon: { name: "folder" },
+          below: ["dataset", "card"],
           children: [
             {
               id: child.id,
               name: child.name,
               schemaName: child.name,
+              below: ["dataset", "card"],
               icon: { name: "folder" },
               children: [
                 {
@@ -132,6 +134,7 @@ describe("buildCollectionTree", () => {
                   schemaName: grandchild1.name,
                   icon: { name: "folder" },
                   children: [],
+                  here: ["dataset"],
                 },
               ],
             },
@@ -166,6 +169,7 @@ describe("buildCollectionTree", () => {
           name: collectionWithDatasets.name,
           schemaName: collectionWithDatasets.name,
           icon: { name: "folder" },
+          here: ["dataset"],
           children: [],
         },
       ]);
@@ -196,12 +200,14 @@ describe("buildCollectionTree", () => {
           name: collection.name,
           schemaName: collection.name,
           icon: { name: "folder" },
+          below: ["dataset"],
           children: [
             {
               id: child.id,
               name: child.name,
               schemaName: child.name,
               icon: { name: "folder" },
+              here: ["dataset"],
               children: [],
             },
           ],
@@ -212,6 +218,7 @@ describe("buildCollectionTree", () => {
           schemaName: collectionWithCards.name,
           icon: { name: "folder" },
           children: [],
+          below: ["card"],
         },
       ]);
     });