Combine column shortcut (#42442)

* Add index file to CombineColumns

* Add CombinColumnAction

* Add CombinColumnsAction to default and embedding modes

* Fix outdated --color-brand references

* Set up sequenced close handler in combine columns

* Allow outside clicks to happen when popover is not open

* Add e2e test for combine column shortcut

* Remove unused prop

* Rename file to match component name: CombineColumnsAction

* Simplify test assertion

* Set width on combine columns action

* Remove superflouous ? check

e2e/test/scenarios/visualizations-tabular/column-shortcuts/combine-column-shortcut.cy.spec.ts

+import _ from "underscore";
+
+import { SAMPLE_DATABASE } from "e2e/support/cypress_sample_database";
+import { restore, popover, createQuestion } from "e2e/support/helpers";
+
+const { PEOPLE, PEOPLE_ID } = SAMPLE_DATABASE;
+
+describe("scenarios > visualizations > combine shortcut", () => {
+  beforeEach(() => {
+    restore();
+    cy.signInAsNormalUser();
+  });
+
+  it("should be possible add a new column through the combine columns shortcut", () => {
+    createQuestion(
+      {
+        query: {
+          "source-table": PEOPLE_ID,
+          limit: 1,
+          fields: [
+            ["field", PEOPLE.ID, null],
+            ["field", PEOPLE.EMAIL, null],
+          ],
+        },
+      },
+      {
+        visitQuestion: true,
+      },
+    );
+
+    combineColumns({
+      columns: ["Email", "ID"],
+      newColumn: "Combined Email, ID",
+      example: "email@example.com12345",
+      newValue: "borer-hudson@yahoo.com1",
+    });
+  });
+});
+
+function combineColumns({
+  columns,
+  example,
+  newColumn,
+  newValue,
+}: {
+  columns: string[];
+  example: string;
+  newColumn: string;
+  newValue?: string;
+}) {
+  const requestAlias = _.uniqueId("dataset");
+  cy.intercept("POST", "/api/dataset").as(requestAlias);
+  cy.findByLabelText("Add column").click();
+
+  popover().findByText("Combine columns").click();
+  for (const column of columns) {
+    selectColumn(column);
+  }
+
+  if (example) {
+    popover().findByTestId("combine-example").should("have.text", example);
+  }
+
+  popover().button("Done").click();
+
+  cy.wait(`@${requestAlias}`);
+
+  cy.findByRole("columnheader", { name: newColumn }).should("be.visible");
+
+  if (newValue) {
+    cy.findByRole("gridcell", { name: newValue }).should("be.visible");
+  }
+}
+
+function selectColumn(name: string) {
+  popover().findAllByText("Select a column...").first().click();
+  popover().last().findByText(name).click();
+}

frontend/src/metabase/query_builder/components/expressions/CombineColumns/ColumnAndSeparatorRow/ColumnInput.module.css

@@ -14,7 +14,7 @@ button.root {
 
   &.open,
   &:focus-visible {
-    border-color: var(--color-brand);
+    border-color: var(--mb-color-brand);
     outline: none;
   }
 }

frontend/src/metabase/query_builder/components/expressions/CombineColumns/ColumnAndSeparatorRow/ColumnInput.tsx

@@ -125,7 +125,9 @@ export function ColumnInput({
             {text}
           </Button>
         </Popover.Target>
-        <Popover.Dropdown>{dropdown}</Popover.Dropdown>
+        <Popover.Dropdown setupSequencedCloseHandler={open}>
+          {dropdown}
+        </Popover.Dropdown>
       </Popover>
     </Input.Wrapper>
   );

frontend/src/metabase/query_builder/components/expressions/CombineColumns/CombineColumns.tsx

@@ -21,6 +21,7 @@ interface Props {
   query: Lib.Query;
   stageIndex: number;
   onSubmit: (name: string, clause: Lib.ExpressionClause) => void;
+  width?: number;
 }
 
 type State = {
@@ -35,6 +36,7 @@ export function CombineColumns({
   query: originalQuery,
   stageIndex: originalStageIndex,
   onSubmit,
+  width,
 }: Props) {
   const [state, setState] = useState<State>({
     columnsAndSeparators: [
@@ -146,7 +148,7 @@ export function CombineColumns({
 
   return (
     <form onSubmit={handleSubmit}>
-      <Box maw="100vw" p="lg" pt={0}>
+      <Box maw="100vw" w={width} p="lg" pt={0}>
         <Stack spacing="lg" mt="lg">
           <Stack spacing="md">
             <Box>

frontend/src/metabase/query_builder/components/expressions/CombineColumns/index.tsx

+export { CombineColumns } from "./CombineColumns";

frontend/src/metabase/query_builder/components/expressions/ExpressionWidget.tsx

@@ -14,7 +14,7 @@ import {
   trackColumnExtractViaShortcut,
 } from "../../analytics";
 
-import { CombineColumns } from "./CombineColumns/CombineColumns";
+import { CombineColumns } from "./CombineColumns";
 import { ExpressionEditorTextfield } from "./ExpressionEditorTextfield";
 import {
   ActionButtonsWrapper,

frontend/src/metabase/querying/utils/drills/combine-columns-drill/components/ColumnPicker/ColumnPicker.module.css

@@ -14,7 +14,7 @@ button.root {
 
   &.open,
   &:focus-visible {
-    border-color: var(--color-brand);
+    border-color: var(--mb-color-brand);
     outline: none;
   }
 }

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

@@ -129,7 +129,7 @@ export function ColumnPicker({
             {text}
           </Button>
         </Popover.Target>
-        <Popover.Dropdown setupSequencedCloseHandler onBlur={handleBlur}>
+        <Popover.Dropdown setupSequencedCloseHandler={open} onBlur={handleBlur}>
           {dropdown}
         </Popover.Dropdown>
       </Popover>

frontend/src/metabase/visualizations/click-actions/actions/CombineColumnsAction/CombineColumnsAction.tsx

+import { t } from "ttag";
+
+import { CombineColumns } from "metabase/query_builder/components/expressions/CombineColumns";
+import type { LegacyDrill } from "metabase/visualizations/types";
+import type { ClickActionPopoverProps } from "metabase/visualizations/types/click-actions";
+import * as Lib from "metabase-lib";
+
+export const CombineColumnsAction: LegacyDrill = ({ question, clicked }) => {
+  const { isEditable } = Lib.queryDisplayInfo(question.query());
+
+  if (
+    !clicked ||
+    clicked.value !== undefined ||
+    !clicked.columnShortcuts ||
+    clicked.extraData?.isRawTable ||
+    !isEditable
+  ) {
+    return [];
+  }
+
+  const Popover = ({
+    onChangeCardAndRun,
+    onClose,
+  }: ClickActionPopoverProps) => {
+    const query = question.query();
+    const stageIndex = -1;
+
+    function handleSubmit(name: string, clause: Lib.ExpressionClause) {
+      const newQuery = Lib.expression(query, stageIndex, name, clause);
+      const nextQuestion = question.setQuery(newQuery);
+      const nextCard = nextQuestion.card();
+
+      onChangeCardAndRun({ nextCard });
+      onClose();
+    }
+
+    return (
+      <CombineColumns
+        query={query}
+        stageIndex={stageIndex}
+        onSubmit={handleSubmit}
+        width={474}
+      />
+    );
+  };
+
+  return [
+    {
+      name: "column-combine",
+      title: t`Combine columns`,
+      tooltip: t`Combine columns`,
+      buttonType: "horizontal",
+      icon: "combine",
+      default: true,
+      section: "new-column",
+      popover: Popover,
+    },
+  ];
+};

frontend/src/metabase/visualizations/click-actions/actions/CombineColumnsAction/index.ts

+export { CombineColumnsAction } from "./CombineColumnsAction";

frontend/src/metabase/visualizations/click-actions/modes/DefaultMode.ts

 import type { QueryClickActionsMode } from "../../types";
 import { ColumnFormattingAction } from "../actions/ColumnFormattingAction";
+import { CombineColumnsAction } from "../actions/CombineColumnsAction";
 import { DashboardClickAction } from "../actions/DashboardClickAction";
 import { ExtractColumnAction } from "../actions/ExtractColumn";
 import { HideColumnAction } from "../actions/HideColumnAction";
@@ -13,6 +14,7 @@ export const DefaultMode: QueryClickActionsMode = {
     ColumnFormattingAction,
     DashboardClickAction,
     ExtractColumnAction,
+    CombineColumnsAction,
   ],
   fallback: NativeQueryClickFallback,
 };

frontend/src/metabase/visualizations/click-actions/modes/EmbeddingSdkMode.ts

 import type { QueryClickActionsMode } from "../../types";
+import { CombineColumnsAction } from "../actions/CombineColumnsAction";
 import { DashboardClickAction } from "../actions/DashboardClickAction";
 import { ExtractColumnAction } from "../actions/ExtractColumn";
 import { HideColumnAction } from "../actions/HideColumnAction";
@@ -24,6 +25,11 @@ export const EmbeddingSdkMode: QueryClickActionsMode = {
     "drill-thru/zoom-in.geographic",
     "drill-thru/zoom-in.timeseries",
   ],
-  clickActions: [HideColumnAction, DashboardClickAction, ExtractColumnAction],
+  clickActions: [
+    HideColumnAction,
+    DashboardClickAction,
+    ExtractColumnAction,
+    CombineColumnsAction,
+  ],
   fallback: NativeQueryClickFallback,
 };