Fix x-rays not handling missing dimension (#31739)

e2e/test/scenarios/dashboard/reproductions/31697-question-xray-segment.cy.spec.js

+import { popover, restore, visitQuestion } from "e2e/support/helpers";
+import { SAMPLE_DATABASE } from "e2e/support/cypress_sample_database";
+
+const { ORDERS_ID, ORDERS } = SAMPLE_DATABASE;
+
+const segmentDetails = {
+  name: "Orders segment",
+  description: "All orders with a total under $100.",
+  table_id: ORDERS_ID,
+  definition: {
+    "source-table": ORDERS_ID,
+    aggregation: [["count"]],
+    filter: ["<", ["field", ORDERS.TOTAL, null], 100],
+  },
+};
+
+const getQuestionDetails = segment => ({
+  display: "line",
+  query: {
+    "source-table": ORDERS_ID,
+    filter: ["segment", segment.id],
+    aggregation: [["count"]],
+    breakout: [["field", ORDERS.CREATED_AT, { "temporal-unit": "month" }]],
+  },
+  visualization_settings: {
+    "graph.metrics": ["count"],
+    "graph.dimensions": ["CREATED_AT"],
+  },
+});
+
+describe("issue 31697", () => {
+  beforeEach(() => {
+    restore();
+    cy.signInAsAdmin();
+    cy.request("POST", "/api/segment", segmentDetails).then(
+      ({ body: segment }) => {
+        cy.createQuestion(getQuestionDetails(segment), { wrapId: true });
+      },
+    );
+    cy.intercept("GET", "/api/automagic-dashboards/**").as("xrayDashboard");
+  });
+
+  it("should allow x-rays for questions with segments (metabase#31697)", () => {
+    cy.get("@questionId").then(visitQuestion);
+    cy.get(".dot").eq(0).click({ force: true });
+    popover().findByText("Automatic insights…").click();
+    popover().findByText("X-ray").click();
+    cy.wait("@xrayDashboard");
+
+    cy.findByRole("main").within(() => {
+      cy.findByText(/A closer look at number of Orders/).should("be.visible");
+      cy.findByText("Orders segment").should("be.visible");
+    });
+  });
+});

frontend/src/metabase/dashboard/containers/AutomaticDashboardApp.jsx

@@ -32,6 +32,7 @@ import { color } from "metabase/lib/colors";
 import { getValuePopulatedParameters } from "metabase-lib/parameters/utils/parameter-values";
 import * as Q from "metabase-lib/queries/utils/query";
 import { getFilterDimension } from "metabase-lib/queries/utils/dimension";
+import { isSegment } from "metabase-lib/queries/utils/filter";
 
 import {
   ItemContent,
@@ -221,7 +222,7 @@ const TransientFilter = ({ filter, metadata }) => {
     <div className="mr3">
       <Icon
         size={12}
-        name={getIconForFilter(dimension.field())}
+        name={getIconForFilter(filter, dimension)}
         className="mr1"
       />
       <Filter filter={filter} metadata={metadata} />
@@ -229,8 +230,14 @@ const TransientFilter = ({ filter, metadata }) => {
   );
 };
 
-const getIconForFilter = field => {
-  if (field.isDate()) {
+const getIconForFilter = (filter, dimension) => {
+  const field = dimension?.field();
+
+  if (isSegment(filter)) {
+    return "star";
+  } else if (!field) {
+    return "label";
+  } else if (field.isDate()) {
     return "calendar";
   } else if (field.isLocation()) {
     return "location";