Show collection in data reference for questions/models (#26063)

* Show collection in data reference

* Fix type check

* Revert "Fix type check"

This reverts commit 3eef7cd21c8c6c1677fc427ac72a581cd8580bb4.

* Use Collections selector instead of question.card().collection

* fetch collection in loadMetadataForCard

* Replace getCollectionFromCard with Collections selector and rename question -> card

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

@@ -2,6 +2,7 @@ import { DatasetQuery } from "./query";
 
 export interface Card extends UnsavedCard {
   id: CardId;
+  collection_id: number | null;
   name: string;
   description: string | null;
   dataset: boolean;

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

@@ -16,6 +16,7 @@ export const createMockCard = (opts?: Partial<Card>): Card => ({
   dataset: false,
   can_write: false,
   cache_ttl: null,
+  collection_id: null,
   last_query_start: null,
   archived: false,
   ...opts,

frontend/src/metabase/query_builder/components/dataref/QuestionPane/QuestionPane.tsx

@@ -8,9 +8,12 @@ import {
   Description,
   EmptyDescription,
 } from "metabase/components/MetadataInfo/MetadataInfo.styled";
+import Collections from "metabase/entities/collections";
 import Questions from "metabase/entities/questions";
 import SidebarContent from "metabase/query_builder/components/SidebarContent";
 import { getQuestionFromCard } from "metabase/query_builder/selectors";
+import type { Card } from "metabase-types/api/card";
+import type { Collection } from "metabase-types/api/collection";
 import type { State } from "metabase-types/store";
 import Table from "metabase-lib/lib/metadata/Table";
 import Question from "metabase-lib/lib/Question";
@@ -29,16 +32,19 @@ interface QuestionPaneProps {
   onItemClick: (type: string, item: unknown) => void;
   onBack: () => void;
   onClose: () => void;
+  card: Card;
   question: Question;
+  collection: Collection | null;
 }
 
-const mapStateToProps = (state: State, props: QuestionPaneProps) => ({
-  question: getQuestionFromCard(state, props.question),
+const mapStateToProps = (state: State, { card }: QuestionPaneProps) => ({
+  question: getQuestionFromCard(state, card),
 });
 
 const QuestionPane = ({
   onItemClick,
   question,
+  collection,
   onBack,
   onClose,
 }: QuestionPaneProps) => {
@@ -72,6 +78,12 @@ const QuestionPane = ({
           <QuestionPaneIcon name="label" />
           <QuestionPaneDetailText>{t`ID #${question.id()}`}</QuestionPaneDetailText>
         </QuestionPaneDetail>
+        <QuestionPaneDetail>
+          <QuestionPaneIcon name="all" />
+          <QuestionPaneDetailText>
+            {collection?.name ?? t`Our analytics`}
+          </QuestionPaneDetailText>
+        </QuestionPaneDetail>
         <QuestionPaneDetail>
           <QuestionPaneIcon name="calendar" />
           <QuestionPaneDetailText>
@@ -98,6 +110,11 @@ const QuestionPane = ({
 export default _.compose(
   Questions.load({
     id: (_state: State, props: QuestionPaneProps) => props.question.id,
+    entityAlias: "card",
+  }),
+  Collections.load({
+    id: (_state: State, props: QuestionPaneProps) => props.card.collection_id,
+    loadingAndErrorWrapper: false,
   }),
   connect(mapStateToProps),
 )(QuestionPane);

frontend/test/metabase/scenarios/native/data_ref.cy.spec.js

-import { restore, openNativeEditor } from "__support__/e2e/helpers";
+import {
+  restore,
+  openNativeEditor,
+  openQuestionActions,
+} from "__support__/e2e/helpers";
 
 describe("scenarios > native question > data reference sidebar", () => {
   beforeEach(() => {
@@ -38,11 +42,18 @@ describe("scenarios > native question > data reference sidebar", () => {
       },
       { visitQuestion: true },
     );
+    // Move question to personal collection
+    openQuestionActions();
+    cy.findByTestId("move-button").click();
+    cy.findByText("My personal collection").click();
+    cy.findByText("Move").click();
+
     openNativeEditor();
     cy.icon("reference").click();
     cy.findByText("1 model");
     cy.findByText("Native Products Model").click();
-    cy.findByText("A model of the Products table");
+    cy.findByText("A model of the Products table"); // description
+    cy.findByText("Bobby Tables's Personal Collection"); // collection
     cy.findByText("1 column");
     cy.findByText("RENAMED_ID").click();
     cy.findByText("No description");