-
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:
Romeo 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:
Braden Shepherdson <braden@metabase.com> Co-authored-by:
Kamil Mielnik <kamil@kamilmielnik.com>
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:
Romeo 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:
Braden Shepherdson <braden@metabase.com> Co-authored-by:
Kamil 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");
});
});