Edit metric and model links (#48231)

* Update the labels for the Edit question action for models and metrics

* Use the metric and model editor by default

* Add e2e tests for metric and model cards

* Remove console.log

* Add extra mode for editing metrics or models

* Use slug to do exact match of path

* Rename editor mode to query

* Rename as param to mode

e2e/test/scenarios/dashboard/dashboard.cy.spec.js

@@ -19,6 +19,7 @@ import {
   commandPalette,
   commandPaletteButton,
   createDashboardWithTabs,
+  createQuestionAndDashboard,
   dashboardHeader,
   describeEE,
   describeWithSnowplow,
@@ -402,6 +403,57 @@ describe("scenarios > dashboard", () => {
         popover().findByText("Edit question").should("be.visible").click();
         cy.findByRole("button", { name: "Visualize" }).should("be.visible");
       });
+
+      it("should allow navigating to the model editor directly from a dashboard card", () => {
+        createQuestionAndDashboard({
+          questionDetails: {
+            name: "orders",
+            type: "model",
+            query: {
+              "source-table": ORDERS_ID,
+            },
+          },
+          dashboardDetails: {
+            name: "Dashboard",
+          },
+        }).then(({ body: { dashboard_id, card } }) => {
+          cy.wrap(`${card.id}-${card.name}`).as("slug");
+          visitDashboard(dashboard_id);
+        });
+
+        showDashboardCardActions();
+        getDashboardCardMenu().click();
+        popover().findByText("Edit model").should("be.visible").click();
+        cy.get("@slug").then(slug => {
+          cy.location("pathname").should("eq", `/model/${slug}/query`);
+        });
+      });
+
+      it("should allow navigating to the metric editor directly from a dashboard card", () => {
+        createQuestionAndDashboard({
+          questionDetails: {
+            name: "orders",
+            type: "metric",
+            query: {
+              "source-table": ORDERS_ID,
+              aggregation: [["count"]],
+            },
+          },
+          dashboardDetails: {
+            name: "Dashboard",
+          },
+        }).then(({ body: { dashboard_id, card } }) => {
+          cy.wrap(`${card.id}-${card.name}`).as("slug");
+          visitDashboard(dashboard_id);
+        });
+
+        showDashboardCardActions();
+        getDashboardCardMenu().click();
+        popover().findByText("Edit metric").should("be.visible").click();
+        cy.get("@slug").then(slug => {
+          cy.location("pathname").should("eq", `/metric/${slug}/query`);
+        });
+      });
     });
 
     describe("title and description", () => {

frontend/src/metabase/dashboard/actions/navigation.js

@@ -11,15 +11,16 @@ import { getNewCardUrl } from "./getNewCardUrl";
 export const EDIT_QUESTION = "metabase/dashboard/EDIT_QUESTION";
 export const editQuestion = createThunkAction(
   EDIT_QUESTION,
-  question => (dispatch, getState) => {
-    const dashboardId = getDashboardId(getState());
-    const { isNative } = Lib.queryDisplayInfo(question.query());
-    const mode = isNative ? "view" : "notebook";
-    const url = Urls.question(question.card(), { mode });
+  (question, mode = "notebook") =>
+    (dispatch, getState) => {
+      const dashboardId = getDashboardId(getState());
+      const { isNative } = Lib.queryDisplayInfo(question.query());
+      const finalMode = isNative ? "view" : mode;
+      const url = Urls.question(question.card(), { mode: finalMode });
 
-    dispatch(openUrl(url));
-    return { dashboardId };
-  },
+      dispatch(openUrl(url));
+      return { dashboardId };
+    },
 );
 
 /**

frontend/src/metabase/dashboard/components/DashCard/DashCardMenu/DashCardMenu.unit.spec.tsx

@@ -43,6 +43,28 @@ const TEST_CARD_NATIVE = createMockCard({
   }),
 });
 
+const TEST_CARD_MODEL = createMockCard({
+  can_write: true,
+  type: "model",
+  dataset_query: createMockStructuredDatasetQuery({
+    database: SAMPLE_DB_ID,
+    query: {
+      "source-table": ORDERS_ID,
+    },
+  }),
+});
+
+const TEST_CARD_METRIC = createMockCard({
+  can_write: true,
+  type: "metric",
+  dataset_query: createMockStructuredDatasetQuery({
+    database: SAMPLE_DB_ID,
+    query: {
+      "source-table": ORDERS_ID,
+    },
+  }),
+});
+
 const TEST_CARD_NO_DATA_ACCESS = createMockCard({
   dataset_query: createMockStructuredDatasetQuery({
     database: SAMPLE_DB_ID,
@@ -129,6 +151,26 @@ describe("DashCardMenu", () => {
     expect(pathname).toBe(`/question/${TEST_CARD_SLUG}`);
   });
 
+  it("should display a link to the editor for models", async () => {
+    const { history } = setup({ card: TEST_CARD_MODEL });
+
+    await userEvent.click(getIcon("ellipsis"));
+    await userEvent.click(await screen.findByText("Edit model"));
+
+    const pathname = history?.getCurrentLocation().pathname;
+    expect(pathname).toBe(`/model/${TEST_CARD_SLUG}/query`);
+  });
+
+  it("should display a link to the editor for metrics", async () => {
+    const { history } = setup({ card: TEST_CARD_METRIC });
+
+    await userEvent.click(getIcon("ellipsis"));
+    await userEvent.click(await screen.findByText("Edit metric"));
+
+    const pathname = history?.getCurrentLocation().pathname;
+    expect(pathname).toBe(`/metric/${TEST_CARD_SLUG}/query`);
+  });
+
   it("should not display a link to the notebook editor if the user does not have the data permission", async () => {
     setup({ card: TEST_CARD_NO_DATA_ACCESS });
 

frontend/src/metabase/dashboard/components/DashCard/DashCardMenu/DashCardMenuItems.tsx

@@ -28,7 +28,8 @@ export const DashCardMenuItems = ({
 
   const {
     plugins,
-    onEditQuestion = question => dispatch(editQuestion(question)),
+    onEditQuestion = (question, mode = "notebook") =>
+      dispatch(editQuestion(question, mode)),
   } = useInteractiveDashboardContext();
 
   const dashcardMenuItems = plugins?.dashboard?.dashcardMenu as
@@ -47,12 +48,31 @@ export const DashCardMenuItems = ({
     })[] = [];
 
     if (withEditLink && canEditQuestion(question)) {
-      items.push({
-        key: "MB_EDIT_QUESTION",
-        iconName: "pencil",
-        label: t`Edit question`,
-        onClick: () => onEditQuestion(question),
-      });
+      const type = question.type();
+      if (type === "question") {
+        items.push({
+          key: "MB_EDIT_QUESTION",
+          iconName: "pencil",
+          label: t`Edit question`,
+          onClick: () => onEditQuestion(question),
+        });
+      }
+      if (type === "model") {
+        items.push({
+          key: "MB_EDIT_MODEL",
+          iconName: "pencil",
+          label: t`Edit model`,
+          onClick: () => onEditQuestion(question, "query"),
+        });
+      }
+      if (type === "metric") {
+        items.push({
+          key: "MB_EDIT_METRIC",
+          iconName: "pencil",
+          label: t`Edit metric`,
+          onClick: () => onEditQuestion(question, "query"),
+        });
+      }
     }
 
     if (withDownloads && canDownloadResults(result)) {

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

@@ -15,7 +15,7 @@ type Card = Partial<SavedCard> & {
 };
 
 export type QuestionUrlBuilderParams = {
-  mode?: "view" | "notebook";
+  mode?: "view" | "notebook" | "query";
   hash?: Card | string;
   query?: Record<string, unknown> | string;
   objectId?: number | string;
@@ -78,6 +78,12 @@ export function question(
 
   if (mode === "notebook") {
     path = `${path}/notebook`;
+  } else if (mode === "query") {
+    if (card.type === "model" || card.type === "metric") {
+      path = `${path}/query`;
+    } else {
+      path = `${path}/notebook`;
+    }
   } else if (objectId) {
     path = `${path}/${objectId}`;
   }