Fix wrong operator formatting in filter popover header (#30318)

* Fix wrong operator formatting in filter popover header

* Replace custom `field.displayName` implementations

* Improve displayName `metabase-lib` method

* Evaluate to an actual display name value

* Add repro for #27104

* Guard against the missing table

e2e/test/scenarios/question/reproductions/27104-wrong-filter-operator-formatting-after-aggregation.cy.spec.js

+import {
+  restore,
+  popover,
+  visitQuestionAdhoc,
+  visualize,
+} from "e2e/support/helpers";
+import { SAMPLE_DB_ID } from "e2e/support/cypress_data";
+import { SAMPLE_DATABASE } from "e2e/support/cypress_sample_database";
+
+const { ORDERS_ID, ORDERS, PEOPLE } = SAMPLE_DATABASE;
+
+const questionDetails = {
+  dataset_query: {
+    database: SAMPLE_DB_ID,
+    query: {
+      "source-table": ORDERS_ID,
+      aggregation: [["count"]],
+      breakout: [["field", PEOPLE.SOURCE, { "source-field": ORDERS.USER_ID }]],
+    },
+    type: "query",
+  },
+  display: "bar",
+};
+
+describe("issue 27104", () => {
+  beforeEach(() => {
+    restore();
+    cy.signInAsAdmin();
+
+    visitQuestionAdhoc(questionDetails, { mode: "notebook" });
+  });
+
+  it("should correctly format the filter operator after the aggregation (metabase#27104)", () => {
+    cy.findAllByTestId("action-buttons").last().findByText("Filter").click();
+    popover().findByText("Count").click();
+    popover().within(() => {
+      // The following line is the main assertion.
+      cy.findByTestId("sidebar-header-title").should("have.text", "Count");
+      // The rest of the test is not really needed for this reproduction.
+      cy.findByTestId("select-button").contains("Equal to").click();
+    });
+    popover().contains("Greater than").click();
+    cy.findByPlaceholderText("Enter a number").type("0").blur();
+    popover().button("Add filter").click();
+
+    visualize();
+
+    cy.findByTestId("qb-filters-panel").findByText("Count is greater than 0");
+    cy.get(".bar").should("have.length", 5);
+  });
+});

frontend/src/metabase-lib/metadata/Field.ts

@@ -145,7 +145,9 @@ class FieldInner extends Base {
   } = {}) {
     let displayName = "";
 
-    if (includeTable && this.table) {
+    // It is possible that the table doesn't exist or
+    // that it does, but its `displayName` resolves to an empty string.
+    if (includeTable && this.table?.displayName?.()) {
       displayName +=
         this.table.displayName({
           includeSchema,

frontend/src/metabase/query_builder/components/filters/FilterPopover/FilterPopoverHeader.tsx

@@ -53,10 +53,7 @@ export default function FilterPopoverHeader({
           className={cx("text-default py1", {
             pr2: !showOperatorSelectorOnOwnRow,
           })}
-          title={
-            (field.table ? field.table.displayName() + " – " : "") +
-            field.displayName()
-          }
+          title={field.displayName({ includeTable: true })}
           onBack={onBack}
         />
       )}

frontend/src/metabase/query_builder/components/filters/pickers/DatePicker/DatePickerShortcuts.tsx

@@ -34,9 +34,7 @@ export default function DatePickerShortcuts({
   let title = "";
   if (dimension) {
     const field = dimension.field();
-    title =
-      (field.table ? field.table.displayName() + " – " : "") +
-      field.displayName();
+    title = field.displayName({ includeTable: true });
   }
 
   const { DAY_OPTIONS, MONTH_OPTIONS, MISC_OPTIONS } = useMemo(