Allow using models in native queries and dashboards (#19743)

* Add E2E tests

* Allow adding models to dashboards

* Allow using models in native queries

* Fix last edit info vertical alignment

* Change picker's copy

* Handle undefiend question

frontend/src/metabase/containers/QuestionPicker.jsx

@@ -11,7 +11,7 @@ const QuestionPicker = ({ value, onChange, maxHeight, ...props }) => (
     style={maxHeight != null ? { maxHeight } : {}}
     value={value === undefined ? undefined : { model: "card", id: value }}
     onChange={question => onChange(question ? question.id : undefined)}
-    models={["card"]}
+    models={["card", "dataset"]}
   />
 );
 

frontend/src/metabase/dashboard/components/add-card-sidebar/QuestionList.jsx

@@ -37,7 +37,7 @@ export function QuestionList({
 
   query = {
     ...query,
-    models: "card",
+    models: ["card", "dataset"],
     limit: DEFAULT_SEARCH_LIMIT,
   };
 
@@ -61,7 +61,10 @@ export function QuestionList({
                 key={item.id}
                 id={item.id}
                 name={item.getName()}
-                icon={item.getIcon().name}
+                icon={{
+                  name: item.getIcon().name,
+                  size: item.model === "dataset" ? 18 : 16,
+                }}
                 onSelect={onSelect}
                 rightIcon={PLUGIN_MODERATION.getStatusIcon(
                   item.moderated_status,

frontend/src/metabase/query_builder/components/template_tags/CardTagEditor.jsx

@@ -2,6 +2,7 @@
 import React, { Component } from "react";
 import { Link } from "react-router";
 import { t } from "ttag";
+import cx from "classnames";
 
 import Icon from "metabase/components/Icon";
 import QuestionPicker from "metabase/containers/QuestionPicker";
@@ -57,9 +58,9 @@ export default class CardTagEditor extends Component {
     return (
       <SelectButton>
         {tag["card-id"] == null ? (
-          <span className="text-medium">{t`Pick a saved question`}</span>
+          <span className="text-medium">{t`Pick a question or a model`}</span>
         ) : this.errorMessage() ? (
-          <span className="text-medium">{t`Pick a different question`}</span>
+          <span className="text-medium">{t`Pick a different question or a model`}</span>
         ) : question ? (
           question.name
         ) : (
@@ -83,7 +84,9 @@ export default class CardTagEditor extends Component {
           {cardId == null ? (
             t`Question #…`
           ) : (
-            <Link to={this.getQuestionUrl()}>{t`Question #${cardId}`}</Link>
+            <Link to={this.getQuestionUrl()}>
+              {question?.dataset ? t`Model #${cardId}` : t`Question #${cardId}`}
+            </Link>
           )}
         </h3>
         {loading ? (
@@ -115,7 +118,9 @@ export default class CardTagEditor extends Component {
                 <Icon name="all" size={12} mr={1} /> {question.collection.name}
               </div>
             )}
-            <div className="flex align-center mt1">
+            <div
+              className={cx("flex align-center", { mt1: question.collection })}
+            >
               <Icon name="calendar" size={12} mr={1} />{" "}
               {t`Last edited ${formatDate(question.updated_at)}`}
             </div>

frontend/test/metabase/scenarios/models/models.cy.spec.js

@@ -3,9 +3,11 @@ import {
   modal,
   popover,
   getNotebookStep,
+  openNativeEditor,
   openNewCollectionItemFlowFor,
   visualize,
   mockSessionProperty,
+  sidebar,
 } from "__support__/e2e/cypress";
 
 import {
@@ -453,6 +455,46 @@ describe("scenarios > models", () => {
       cy.findByText("Sample Dataset");
     });
   });
+
+  describe("listing", () => {
+    beforeEach(() => {
+      cy.request("PUT", "/api/card/1", { name: "Orders Model", dataset: true });
+    });
+
+    it("should allow adding models to dashboards", () => {
+      cy.intercept("GET", "/api/dashboard/*").as("fetchDashboard");
+      cy.createDashboard().then(({ body: { id: dashboardId } }) => {
+        cy.visit(`/dashboard/${dashboardId}`);
+        cy.icon("pencil").click();
+        cy.get(".QueryBuilder-section .Icon-add").click();
+        sidebar()
+          .findByText("Orders Model")
+          .click();
+        cy.button("Save").click();
+        cy.wait("@fetchDashboard");
+        cy.findByText("Orders Model");
+      });
+    });
+
+    it("should allow using models in native queries", () => {
+      cy.intercept("POST", "/api/dataset").as("query");
+      openNativeEditor().type("select * from {{#}}", {
+        parseSpecialCharSequences: false,
+      });
+      sidebar()
+        .findByText("Pick a question or a model")
+        .click();
+      selectFromDropdown("Orders Model");
+      cy.get("@editor").contains("select * from {{#1}}");
+      cy.get(".NativeQueryEditor .Icon-play").click();
+      cy.wait("@query");
+      cy.get(".TableInteractive").within(() => {
+        cy.findByText("USER_ID");
+        cy.findByText("PRODUCT_ID");
+        cy.findByText("TAX");
+      });
+    });
+  });
 });
 
 function getCollectionItemRow(itemName) {

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

@@ -45,7 +45,7 @@ describe("scenarios > question > native", () => {
     cy.contains("Question #…")
       .parent()
       .parent()
-      .contains("Pick a saved question")
+      .contains("Pick a question or a model")
       .click({ force: true });
 
     // selecting a question should update the query