Skip to content
Snippets Groups Projects
  • Romeo Van Snick's avatar
    0dc75042
    Combine columns (#42021) · 0dc75042
    Romeo Van Snick authored
    * [MLv2] Add `preview-expression` to eval an expression on sample data
    
    This is needed to show the previews in the UX for the combining columns
    epic #39977.
    
    Fixes #39979.
    
    * [MBQL lib] Add "Combine columns" drill-thru
    
    This is following the original plan of using a drill for this. It's hard
    to combine that with the "preview" functionality.
    
    See [thread](https://metaboat.slack.com/archives/C06P22KS4JH/p1712264174056569)
    for discussion of how we might approach that issue.
    
    Fixes #39978.
    
    * [MBQL lib] Add "Combine columns" drill-thru
    
    This is following the original plan of using a drill for this. It's hard
    to combine that with the "preview" functionality.
    
    See [thread](https://metaboat.slack.com/archives/C06P22KS4JH/p1712264174056569
    
    )
    for discussion of how we might approach that issue.
    
    Fixes #39978.
    
    * [MLv2] Add `preview-expression` to eval an expression on sample data
    
    This is needed to show the previews in the UX for the combining columns
    epic #39977.
    
    Fixes #39979.
    
    * [MLv2] Add `preview-expression` to eval an expression on sample data
    
    This is needed to show the previews in the UX for the combining columns
    epic #39977.
    
    Fixes #39979.
    
    * Revert "Merge branch 'mblib-preview-expressions' into combine-columns"
    
    This reverts commit dac17f84aaae09906a206106290f7f58dea659bd, reversing
    changes made to 2934fab19db495ca8104801d41bc8aba457e401f.
    
    * Revert "Merge branch 'mblib-preview-expressions' into combine-columns"
    
    This reverts commit 2934fab19db495ca8104801d41bc8aba457e401f, reversing
    changes made to 6a43c22e78fb616c7ac0b024811b2989a1ae0f20.
    
    * Revert "Merge branch 'mblib-preview-expressions' into combine-columns"
    
    This reverts commit 6a43c22e78fb616c7ac0b024811b2989a1ae0f20, reversing
    changes made to 2257333a8ae69f0c9a6f6fdf0c8f5d837263f97a.
    
    * [FE] "Combine columns" drill thru (#40082)
    
    * Type Section['icon'] properly, including the hack for summarize section
    
    * Add combine columns section
    
    * Add types for combine columns drill
    
    * Add combine columns drill component stub
    
    * Mock combine columns drill
    
    * Add component stub
    
    * Encapsulate typing hacks
    
    * Extract CombineColumnsDrill
    
    * Extract ColumnAndSeparatorRow
    
    * Improve naming, add button to edit separators
    
    * Translate string
    
    * Improve styling
    
    * Separator input
    
    * Handle removing columns
    
    * Rename lib.ts to utils.ts
    
    * Implement onSubmit
    
    * Add getNextColumnAndSeparator
    
    * Use form for a11y
    
    * Handle vertical overflow
    
    * Handle horizontal overflow
    
    * Extract formatSeparator
    
    * Use proper translations
    
    * Adjust min/max sizes
    
    * Fix scrollbar being unnecessarily shown
    
    * Display source column name
    
    * Avoid serializing the entire column and putting it into DOM
    
    * Use module.css extension
    
    * Format code
    
    * Improve a11y
    
    * Mock combineColumnsDrillExpression and previewExpression
    
    * Add Preview component
    
    * Move preview logic to Preview component
    
    * Style Preview
    
    * Format code
    
    * Move styles to CSS modules
    
    * Update UI to latest designs
    - move "Add another column" button
    - remove "Separated by X" button
    - always show separator inputs
    
    * Remove displayInfo mock
    
    * Add asReturned
    
    * Update CombineColumnsDrillThruInfo
    
    * Integrate new way of working with combine columns drill
    
    * Fix generating expression names
    
    * Integrate drill with click actions
    
    * Integrate new preview workflow
    
    * Revert "Update UI to latest designs"
    
    This reverts commit cda039dffe9d452c0866f63800e2e887a540fe67.
    
    * Use previewExpression interface correctly
    
    * Use new preview_expression API
    
    * Make sure columns are created with original query and stage index
    
    * Extract usePreview and handle preview errors
    
    * Update popover title
    
    * Move add column button
    
    * Fix outline being cut off
    
    * Style preview label as per design
    
    * Format empty separator
    
    * Make preview scrollable
    
    * Use project convention
    
    * Simplify ScrollArea usage
    
    * Use ScrollArea in CombineColumnsDrill
    
    * Update comment
    
    * Remove Lib.previewExpression
    
    * Clean up the preview after removing Lib.previewExpression
    
    * Implement getPreview
    
    * Change default column preview to 'text'
    
    * Remove usePreview hook which is no longer in use
    
    * Rename Preview to Example
    
    * Use different placeholder for separator input
    
    * Add whitespace placeholder
    
    * Add ColumnPicker boilerplate
    
    * Export Input
    
    * Use QueryColumnPicker for ColumnPicker
    
    * Pass width to AccordionList
    
    * Add sequences popover events with tippy
    
    * Remove unused ColumnOption helpers
    
    * Add testid to Example
    
    * Add e2e test for combine column in header
    
    * Select content of separator input on focus
    
    * Reduce padding on example
    
    * Add monospace variant to Text
    
    * Use monospace variant in Example
    
    * Use monospace font in textinput
    
    * Match faux-select label styles to our TextInput label styles
    
    * Add missing color
    
    * Remove !important
    
    * Use pre whitespace so consecutive spaces show up
    
    * Remove empty default
    
    * Add example for boolean
    
    * Remove !important
    
    * Use should.have text over contain
    
    ---------
    
    Co-authored-by: default avatarRomeo Van Snick <romeo@romeovansnick.be>
    
    * Remove duplicated code
    
    * Export useMantineTheme from metabase/ui
    
    * Use useMantineTheme instead of reading theme directly
    
    * Remove setTimeout in popover
    
    * Use plain t instead of jt
    
    * Move Popover dropdown sequence hack to metabase/ui
    
    ---------
    
    Co-authored-by: default avatarBraden Shepherdson <braden@metabase.com>
    Co-authored-by: default avatarKamil Mielnik <kamil@kamilmielnik.com>
    Combine columns (#42021)
    Romeo Van Snick authored
    * [MLv2] Add `preview-expression` to eval an expression on sample data
    
    This is needed to show the previews in the UX for the combining columns
    epic #39977.
    
    Fixes #39979.
    
    * [MBQL lib] Add "Combine columns" drill-thru
    
    This is following the original plan of using a drill for this. It's hard
    to combine that with the "preview" functionality.
    
    See [thread](https://metaboat.slack.com/archives/C06P22KS4JH/p1712264174056569)
    for discussion of how we might approach that issue.
    
    Fixes #39978.
    
    * [MBQL lib] Add "Combine columns" drill-thru
    
    This is following the original plan of using a drill for this. It's hard
    to combine that with the "preview" functionality.
    
    See [thread](https://metaboat.slack.com/archives/C06P22KS4JH/p1712264174056569
    
    )
    for discussion of how we might approach that issue.
    
    Fixes #39978.
    
    * [MLv2] Add `preview-expression` to eval an expression on sample data
    
    This is needed to show the previews in the UX for the combining columns
    epic #39977.
    
    Fixes #39979.
    
    * [MLv2] Add `preview-expression` to eval an expression on sample data
    
    This is needed to show the previews in the UX for the combining columns
    epic #39977.
    
    Fixes #39979.
    
    * Revert "Merge branch 'mblib-preview-expressions' into combine-columns"
    
    This reverts commit dac17f84aaae09906a206106290f7f58dea659bd, reversing
    changes made to 2934fab19db495ca8104801d41bc8aba457e401f.
    
    * Revert "Merge branch 'mblib-preview-expressions' into combine-columns"
    
    This reverts commit 2934fab19db495ca8104801d41bc8aba457e401f, reversing
    changes made to 6a43c22e78fb616c7ac0b024811b2989a1ae0f20.
    
    * Revert "Merge branch 'mblib-preview-expressions' into combine-columns"
    
    This reverts commit 6a43c22e78fb616c7ac0b024811b2989a1ae0f20, reversing
    changes made to 2257333a8ae69f0c9a6f6fdf0c8f5d837263f97a.
    
    * [FE] "Combine columns" drill thru (#40082)
    
    * Type Section['icon'] properly, including the hack for summarize section
    
    * Add combine columns section
    
    * Add types for combine columns drill
    
    * Add combine columns drill component stub
    
    * Mock combine columns drill
    
    * Add component stub
    
    * Encapsulate typing hacks
    
    * Extract CombineColumnsDrill
    
    * Extract ColumnAndSeparatorRow
    
    * Improve naming, add button to edit separators
    
    * Translate string
    
    * Improve styling
    
    * Separator input
    
    * Handle removing columns
    
    * Rename lib.ts to utils.ts
    
    * Implement onSubmit
    
    * Add getNextColumnAndSeparator
    
    * Use form for a11y
    
    * Handle vertical overflow
    
    * Handle horizontal overflow
    
    * Extract formatSeparator
    
    * Use proper translations
    
    * Adjust min/max sizes
    
    * Fix scrollbar being unnecessarily shown
    
    * Display source column name
    
    * Avoid serializing the entire column and putting it into DOM
    
    * Use module.css extension
    
    * Format code
    
    * Improve a11y
    
    * Mock combineColumnsDrillExpression and previewExpression
    
    * Add Preview component
    
    * Move preview logic to Preview component
    
    * Style Preview
    
    * Format code
    
    * Move styles to CSS modules
    
    * Update UI to latest designs
    - move "Add another column" button
    - remove "Separated by X" button
    - always show separator inputs
    
    * Remove displayInfo mock
    
    * Add asReturned
    
    * Update CombineColumnsDrillThruInfo
    
    * Integrate new way of working with combine columns drill
    
    * Fix generating expression names
    
    * Integrate drill with click actions
    
    * Integrate new preview workflow
    
    * Revert "Update UI to latest designs"
    
    This reverts commit cda039dffe9d452c0866f63800e2e887a540fe67.
    
    * Use previewExpression interface correctly
    
    * Use new preview_expression API
    
    * Make sure columns are created with original query and stage index
    
    * Extract usePreview and handle preview errors
    
    * Update popover title
    
    * Move add column button
    
    * Fix outline being cut off
    
    * Style preview label as per design
    
    * Format empty separator
    
    * Make preview scrollable
    
    * Use project convention
    
    * Simplify ScrollArea usage
    
    * Use ScrollArea in CombineColumnsDrill
    
    * Update comment
    
    * Remove Lib.previewExpression
    
    * Clean up the preview after removing Lib.previewExpression
    
    * Implement getPreview
    
    * Change default column preview to 'text'
    
    * Remove usePreview hook which is no longer in use
    
    * Rename Preview to Example
    
    * Use different placeholder for separator input
    
    * Add whitespace placeholder
    
    * Add ColumnPicker boilerplate
    
    * Export Input
    
    * Use QueryColumnPicker for ColumnPicker
    
    * Pass width to AccordionList
    
    * Add sequences popover events with tippy
    
    * Remove unused ColumnOption helpers
    
    * Add testid to Example
    
    * Add e2e test for combine column in header
    
    * Select content of separator input on focus
    
    * Reduce padding on example
    
    * Add monospace variant to Text
    
    * Use monospace variant in Example
    
    * Use monospace font in textinput
    
    * Match faux-select label styles to our TextInput label styles
    
    * Add missing color
    
    * Remove !important
    
    * Use pre whitespace so consecutive spaces show up
    
    * Remove empty default
    
    * Add example for boolean
    
    * Remove !important
    
    * Use should.have text over contain
    
    ---------
    
    Co-authored-by: default avatarRomeo Van Snick <romeo@romeovansnick.be>
    
    * Remove duplicated code
    
    * Export useMantineTheme from metabase/ui
    
    * Use useMantineTheme instead of reading theme directly
    
    * Remove setTimeout in popover
    
    * Use plain t instead of jt
    
    * Move Popover dropdown sequence hack to metabase/ui
    
    ---------
    
    Co-authored-by: default avatarBraden Shepherdson <braden@metabase.com>
    Co-authored-by: default avatarKamil Mielnik <kamil@kamilmielnik.com>
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
combine-column.cy.spec.js 1.93 KiB
import { openPeopleTable, popover, restore } from "e2e/support/helpers";

describe("scenarios > visualizations > drillthroughs > table_drills > combine columns", () => {
  beforeEach(() => {
    restore();
    cy.signInAsAdmin();
  });

  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();

    cy.findAllByTestId("header-cell").contains("Email").click();
    popover().findByText("Combine columns").click();

    popover().within(() => {
      cy.findByTestId("combine-column-example").should(
        "contain",
        "email@example.com12345",
      );
      cy.findByText("ID").click();
    });

    popover()
      .last()
      .within(() => {
        cy.findByText("Name").click();
      });

    popover().within(() => {
      cy.findByText("Separated by (empty)").click();
      cy.findByLabelText("Separator").type("__");
      cy.findByTestId("combine-column-example").should(
        "have.text",
        "email@example.com__text",
      );

      cy.findByText("Add column").click();
      cy.findByTestId("combine-column-example").should(
        "have.text",
        "email@example.com__text__12345",
      );

      cy.findAllByRole("textbox").last().clear();
      cy.findByTestId("combine-column-example").should(
        "have.text",
        "email@example.com__text12345",
      );

      cy.findAllByRole("textbox").last().clear().type("+");
      cy.findByTestId("combine-column-example").should(
        "have.text",
        "email@example.com__text+12345",
      );

      cy.findByText("Done").click();
    });

    cy.findAllByTestId("header-cell")
      .last()
      .should("have.text", "Email Name ID");
  });
});