Fix column duplication when adding a new breakout (#24503)

frontend/src/metabase-lib/lib/Question.ts

@@ -660,8 +660,9 @@ class QuestionInner {
       query.columnNames(),
     );
 
+    const graphMetrics = this.setting("graph.metrics");
     if (
-      this.setting("graph.metrics") &&
+      graphMetrics &&
       addedColumnNames.length > 0 &&
       removedColumnNames.length === 0
     ) {
@@ -672,22 +673,22 @@ class QuestionInner {
 
       if (addedMetricColumnNames.length > 0) {
         return this.updateSettings({
-          "graph.metrics": [
-            ...this.setting("graph.metrics"),
-            ...addedMetricColumnNames,
-          ],
+          "graph.metrics": [...graphMetrics, ...addedMetricColumnNames],
         });
       }
     }
 
+    const tableColumns = this.setting("table.columns");
     if (
-      this.setting("table.columns") &&
+      tableColumns &&
       addedColumnNames.length > 0 &&
       removedColumnNames.length === 0
     ) {
       return this.updateSettings({
         "table.columns": [
-          ...this.setting("table.columns"),
+          ...tableColumns.filter(
+            column => !addedColumnNames.includes(column.name),
+          ),
           ...addedColumnNames.map(name => {
             const dimension = query.columnDimensionWithName(name);
             return {

frontend/test/metabase/scenarios/binning/binning-reproductions.cy.spec.js

@@ -188,7 +188,7 @@ describe("binning related reproductions", () => {
     cy.findByText("Hour of Day");
   });
 
-  it.skip("shouldn't duplicate the breakout field (metabase#22382)", () => {
+  it("shouldn't duplicate the breakout field (metabase#22382)", () => {
     const questionDetails = {
       name: "22382",
       query: {
@@ -206,7 +206,7 @@ describe("binning related reproductions", () => {
 
     cy.findByTestId("sidebar-left").within(() => {
       cy.findByTextEnsureVisible("Table options");
-      cy.findByText("Count").siblings(".Icon-close").click();
+      cy.findByText("Created At").siblings(".Icon-close").click();
       cy.button("Done").click();
     });