Allow duplicate "combine column" columns in chill mode (#42314)

* Add suffix to name if column already exists

* Add test for duplicate combine columns

* Use direct question in test

Co-authored-by: Kamil Mielnik <kamil@kamilmielnik.com>

* Fix formatting

* Use createQuestion for other tests too

* Fix table references

---------

Co-authored-by: Kamil Mielnik <kamil@kamilmielnik.com>

e2e/test/scenarios/visualizations-tabular/drillthroughs/combine-column.cy.spec.js

 import { SAMPLE_DB_ID } from "e2e/support/cypress_data";
+import { SAMPLE_DATABASE } from "e2e/support/cypress_sample_database";
 import {
+  createQuestion,
   describeWithSnowplow,
   expectGoodSnowplowEvent,
   expectNoBadSnowplowEvents,
-  openPeopleTable,
   popover,
   resetSnowplow,
   restore,
 } from "e2e/support/helpers";
 
+const { PEOPLE, PEOPLE_ID } = SAMPLE_DATABASE;
+
 describeWithSnowplow(
   "scenarios > visualizations > drillthroughs > table_drills > combine columns",
   () => {
@@ -23,16 +26,19 @@ describeWithSnowplow(
     });
 
     it("should be possible to combine columns from the a table header", () => {
-      openPeopleTable({ limit: 3, mode: "notebook" });
-
-      cy.findByLabelText("Pick columns").click();
-      popover().within(() => {
-        cy.findByText("Select none").click();
-        cy.findByLabelText("Email").click();
-      });
-
-      cy.findByLabelText("Pick columns").click();
-      cy.button("Visualize").click();
+      createQuestion(
+        {
+          query: {
+            "source-table": PEOPLE_ID,
+            fields: [
+              ["field", PEOPLE.ID, { "base-type": "type/Number" }],
+              ["field", PEOPLE.EMAIL, { "base-type": "type/Text" }],
+            ],
+            limit: 3,
+          },
+        },
+        { visitQuestion: true },
+      );
 
       cy.findAllByTestId("header-cell").contains("Email").click();
       popover().findByText("Combine columns").click();
@@ -86,5 +92,34 @@ describeWithSnowplow(
         database_id: SAMPLE_DB_ID,
       });
     });
+
+    it("should handle duplicate column names", () => {
+      createQuestion(
+        {
+          query: {
+            "source-table": PEOPLE_ID,
+            fields: [
+              ["field", PEOPLE.ID, { "base-type": "type/Number" }],
+              ["field", PEOPLE.EMAIL, { "base-type": "type/Text" }],
+            ],
+            limit: 3,
+          },
+        },
+        { visitQuestion: true },
+      );
+
+      // first combine (email + ID)
+      cy.findAllByTestId("header-cell").contains("Email").click();
+      popover().findByText("Combine columns").click();
+      popover().findByText("Done").click();
+
+      // second combine (email + ID)
+      cy.findAllByTestId("header-cell").contains("Email").click();
+      popover().findByText("Combine columns").click();
+      popover().findByText("Done").click();
+
+      cy.findAllByTestId("header-cell").contains("Email ID").should("exist");
+      cy.findAllByTestId("header-cell").contains("Email ID_2").should("exist");
+    });
   },
 );

frontend/src/metabase/querying/utils/drills/combine-columns-drill/components/CombineColumnsDrill/CombineColumnsDrill.tsx

@@ -105,6 +105,7 @@ export const CombineColumnsDrill = ({
       column,
       columnsAndSeparators,
     );
+
     const newQuery = Lib.expression(query, stageIndex, name, expressionClause);
 
     onSubmit(newQuery);

frontend/src/metabase/querying/utils/drills/combine-columns-drill/utils.ts

@@ -139,9 +139,37 @@ export const getExpressionName = (
   column: Lib.ColumnMetadata,
   columnsAndSeparators: ColumnAndSeparator[],
 ): string => {
+  const columnNames = Lib.returnedColumns(query, stageIndex).map(
+    column => Lib.displayInfo(query, stageIndex, column).displayName,
+  );
+
+  const name = getCombinedColumnName(
+    query,
+    stageIndex,
+    column,
+    columnsAndSeparators,
+  );
+
+  return getNextName(columnNames, name, 1);
+};
+
+function getNextName(names: string[], name: string, index: number): string {
+  const suffixed = index === 1 ? name : `${name}_${index}`;
+  if (!names.includes(suffixed)) {
+    return suffixed;
+  }
+  return getNextName(names, name, index + 1);
+}
+
+function getCombinedColumnName(
+  query: Lib.Query,
+  stageIndex: number,
+  column: Lib.ColumnMetadata,
+  columnsAndSeparators: ColumnAndSeparator[],
+) {
   const columns = [column, ...columnsAndSeparators.map(({ column }) => column)];
   const names = columns.map(
     column => Lib.displayInfo(query, stageIndex, column).displayName,
   );
   return names.join(" ");
-};
+}