From 7736daf0a5a9eb5d0700854134a51ee59db32ebd Mon Sep 17 00:00:00 2001 From: Yash Vibhandik Date: Thu, 7 Apr 2022 09:19:51 -0700 Subject: [PATCH] fix: 8385 added button variant support in table column type button (#9164) --- .../Table_PropertyPane_IconName_spec.js | 40 ++++++++++ .../DisplayWidgets/Table_PropertyPane_spec.js | 76 ++++++++++++++++++- .../Table_Widget_Add_button_spec.js | 29 ++----- .../cypress/locators/commonlocators.json | 1 + .../PrimaryColumnsControl.tsx | 1 - app/client/src/entities/Widget/utils.test.ts | 28 ++++--- .../TableWidget/component/Constants.ts | 2 - .../component/TableStyledWrappers.tsx | 11 +-- .../TableWidget/component/TableUtilities.tsx | 27 +++---- .../TableWidget/widget/getTableColumns.tsx | 4 - .../src/widgets/TableWidget/widget/index.tsx | 9 ++- .../TableWidget/widget/propertyConfig.ts | 45 ++--------- .../TableWidget/widget/propertyUtils.test.ts | 42 +++++++++- .../TableWidget/widget/propertyUtils.ts | 39 +++++++++- 14 files changed, 246 insertions(+), 108 deletions(-) create mode 100644 app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_PropertyPane_IconName_spec.js diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_PropertyPane_IconName_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_PropertyPane_IconName_spec.js new file mode 100644 index 0000000000..953945fed1 --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_PropertyPane_IconName_spec.js @@ -0,0 +1,40 @@ +const commonlocators = require("../../../../locators/commonlocators.json"); +const dsl = require("../../../../fixtures/tableNewDslWithPagination.json"); + +describe("Table Widget property pane feature validation", function() { + before(() => { + cy.addDsl(dsl); + }); + + it("Verify table column type changes effect on menuButton and iconButton", function() { + cy.openPropertyPane("tablewidget"); + cy.addColumn("CustomColumn"); + cy.editColumn("customColumn1"); + + cy.changeColumnType("Menu Button"); + cy.wait(400); + cy.get(commonlocators.selectedIcon).should("have.text", "(none)"); + cy.getTableDataSelector("1", "5").then((selector) => { + cy.get(selector + " button span.bp3-icon").should("not.exist"); + }); + + cy.changeColumnType("Icon Button"); + cy.wait(400); + cy.get(commonlocators.selectedIcon).should("have.text", "add"); + cy.getTableDataSelector("1", "5").then((selector) => { + cy.get(selector + " button span.bp3-icon").should("exist"); + cy.get(selector + " button span.bp3-icon") + .should("have.attr", "icon") + .and("equal", "add"); + }); + + cy.changeColumnType("Menu Button"); + cy.wait(400); + cy.get(commonlocators.selectedIcon).should("have.text", "(none)"); + cy.getTableDataSelector("1", "5").then((selector) => { + cy.get(selector + " button span.bp3-icon").should("not.exist"); + }); + + cy.closePropertyPane(); + }); +}); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_PropertyPane_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_PropertyPane_spec.js index 3ae3dcbffc..f37e840378 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_PropertyPane_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_PropertyPane_spec.js @@ -348,7 +348,81 @@ describe("Table Widget property pane feature validation", function() { cy.get(publish.backToEditor).click(); }); - it("14. Table-Delete Verification", function() { + it("14. Verify table column type button with button variant", function() { + // Open property pane + cy.openPropertyPane("tablewidget"); + // Add new column in the table with name "CustomColumn" + cy.addColumn("CustomColumn"); + + cy.tableColumnDataValidation("customColumn2"); //To be updated later + + cy.editColumn("customColumn2"); + cy.changeColumnType("Button"); + // default selected opts + cy.get(commonlocators.tableButtonVariant + " span[type='p1']").should( + "have.text", + "Primary", + ); + cy.getTableDataSelector("1", "6").then((selector) => { + cy.get(selector + " button").should( + "have.css", + "background-color", + "rgb(3, 179, 101)", + ); + cy.get(selector + " button > span").should( + "have.css", + "color", + "rgb(255, 255, 255)", + ); + }); + cy.selectDropdownValue(commonlocators.tableButtonVariant, "Secondary"); + cy.get(commonlocators.tableButtonVariant + " span[type='p1']").should( + "have.text", + "Secondary", + ); + cy.getTableDataSelector("1", "6").then((selector) => { + cy.get(selector + " button").should( + "have.css", + "background-color", + "rgba(0, 0, 0, 0)", + ); + cy.get(selector + " button > span").should( + "have.css", + "color", + "rgb(3, 179, 101)", + ); + cy.get(selector + " button").should( + "have.css", + "border", + "1px solid rgb(3, 179, 101)", + ); + }); + cy.selectDropdownValue(commonlocators.tableButtonVariant, "Tertiary"); + cy.get(commonlocators.tableButtonVariant + " span[type='p1']").should( + "have.text", + "Tertiary", + ); + cy.getTableDataSelector("1", "6").then((selector) => { + cy.get(selector + " button").should( + "have.css", + "background-color", + "rgba(0, 0, 0, 0)", + ); + cy.get(selector + " button > span").should( + "have.css", + "color", + "rgb(3, 179, 101)", + ); + cy.get(selector + " button").should( + "have.css", + "border", + "0px none rgb(24, 32, 38)", + ); + }); + cy.closePropertyPane(); + }); + + it("15. Table-Delete Verification", function() { // Open property pane cy.openPropertyPane("tablewidget"); // Delete the Table widget diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Add_button_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Add_button_spec.js index d39ecf37b2..e7f2771fd4 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Add_button_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Add_button_spec.js @@ -104,30 +104,11 @@ describe("Table Widget property pane feature validation", function() { cy.get(widgetsPage.tableBtn).should("have.css", "background-color", color2); }); - it("3. Table Button label color validation", function() { - const color1 = "rgb(255, 255, 0)"; - cy.get(widgetsPage.labelColor) - .click({ force: true }) - .clear() - .type(color1); - cy.get(widgetsPage.tableBtn).should("have.css", "color", color1); - - // Changing the color again to reproduce issue #9526 - const color2 = "rgb(0, 0, 255)"; - cy.get(widgetsPage.labelColor) - .click({ force: true }) - .clear() - // following wait is required to reproduce #9526 - .wait(600) - .type(color2); - cy.get(widgetsPage.tableBtn).should("have.css", "color", color2); - }); - - it("4. Table widget triggeredRow property should be accessible", function() { + it("3. Table widget triggeredRow property should be accessible", function() { cy.get(commonlocators.TextInside).should("have.text", "Tobias Funke"); }); - it("5. Table widget triggeredRow property should be same even after sorting the table", function() { + it("4. Table widget triggeredRow property should be same even after sorting the table", function() { //sort table date on second column cy.get(".draggable-header ") .first() @@ -136,7 +117,7 @@ describe("Table Widget property pane feature validation", function() { cy.get(commonlocators.TextInside).should("have.text", "Tobias Funke"); }); - it("6. Table widget add new icon button column", function() { + it("5. Table widget add new icon button column", function() { cy.get(".t--property-pane-back-btn").click({ force: true }); // hide id column cy.makeColumnVisible("id"); @@ -179,7 +160,7 @@ describe("Table Widget property pane feature validation", function() { */ }); - it("7. Table widget add new menu button column", function() { + it("6. Table widget add new menu button column", function() { cy.openPropertyPane("tablewidget"); // click on Add new Column. cy.get(".t--add-column-btn").click(); @@ -356,7 +337,7 @@ describe("Table Widget property pane feature validation", function() { }); }); - it("8. Table widget test on button icon click, row should not get deselected", () => { + it("7. Table widget test on button icon click, row should not get deselected", () => { cy.get(widgetsPage.tableIconBtn) .last() .click({ force: true }); diff --git a/app/client/cypress/locators/commonlocators.json b/app/client/cypress/locators/commonlocators.json index eb842845c9..2ac2f81cd2 100644 --- a/app/client/cypress/locators/commonlocators.json +++ b/app/client/cypress/locators/commonlocators.json @@ -153,6 +153,7 @@ "debugger": ".t--debugger svg", "errorTab": "[data-cy=t--tab-ERROR]", "debugErrorMsg": ".t--debugger-message", + "tableButtonVariant": ".t--property-control-buttonvariant .bp3-popover-target", "debuggerLabel": "span.debugger-label", "debuggerContextMenu":".t--debugger-contextual-error-menu", "cyclicDependencyError": "//div[@class='Toastify']//span[contains(text(),'Cyclic dependency found while evaluating')]", diff --git a/app/client/src/components/propertyControls/PrimaryColumnsControl.tsx b/app/client/src/components/propertyControls/PrimaryColumnsControl.tsx index 78193756a6..5647faa58a 100644 --- a/app/client/src/components/propertyControls/PrimaryColumnsControl.tsx +++ b/app/client/src/components/propertyControls/PrimaryColumnsControl.tsx @@ -216,7 +216,6 @@ class PrimaryColumnsControl extends BaseControl { const column = { ...columnProps, buttonStyle: "rgb(3, 179, 101)", - buttonLabelColor: "#FFFFFF", isDisabled: false, ...tableStyles, }; diff --git a/app/client/src/entities/Widget/utils.test.ts b/app/client/src/entities/Widget/utils.test.ts index d068690e07..94641abb80 100644 --- a/app/client/src/entities/Widget/utils.test.ts +++ b/app/client/src/entities/Widget/utils.test.ts @@ -4,6 +4,7 @@ import tablePropertyPaneConfig from "widgets/TableWidget/widget/propertyConfig"; import chartPorpertyConfig from "widgets/ChartWidget/widget/propertyConfig"; import { EvaluationSubstitutionType } from "entities/DataTree/dataTreeFactory"; import { AutocompleteDataType } from "utils/autocomplete/TernServer"; +import { ButtonVariantTypes } from "components/constants"; import { ValidationTypes } from "constants/WidgetValidation"; describe("getAllPathsFromPropertyConfig", () => { @@ -170,11 +171,11 @@ describe("getAllPathsFromPropertyConfig", () => { EvaluationSubstitutionType.TEMPLATE, "primaryColumns.status.buttonLabel": EvaluationSubstitutionType.TEMPLATE, + "primaryColumns.status.buttonVariant": + EvaluationSubstitutionType.TEMPLATE, "primaryColumns.status.buttonColor": EvaluationSubstitutionType.TEMPLATE, "primaryColumns.status.isDisabled": EvaluationSubstitutionType.TEMPLATE, - "primaryColumns.status.buttonLabelColor": - EvaluationSubstitutionType.TEMPLATE, "primaryColumns.status.isCellVisible": EvaluationSubstitutionType.TEMPLATE, }, @@ -209,6 +210,20 @@ describe("getAllPathsFromPropertyConfig", () => { isVisible: { type: "BOOLEAN", }, + "primaryColumns.status.buttonVariant": { + type: "TABLE_PROPERTY", + params: { + params: { + allowedValues: [ + ButtonVariantTypes.PRIMARY, + ButtonVariantTypes.SECONDARY, + ButtonVariantTypes.TERTIARY, + ], + default: ButtonVariantTypes.PRIMARY, + }, + type: "TEXT", + }, + }, isSortable: { type: "BOOLEAN", params: { @@ -443,15 +458,6 @@ describe("getAllPathsFromPropertyConfig", () => { }, }, }, - "primaryColumns.status.buttonLabelColor": { - type: ValidationTypes.TABLE_PROPERTY, - params: { - type: ValidationTypes.TEXT, - params: { - regex: /^(?![<|{{]).+/, - }, - }, - }, }, }; diff --git a/app/client/src/widgets/TableWidget/component/Constants.ts b/app/client/src/widgets/TableWidget/component/Constants.ts index fafb85e469..fe9e6dcfde 100644 --- a/app/client/src/widgets/TableWidget/component/Constants.ts +++ b/app/client/src/widgets/TableWidget/component/Constants.ts @@ -105,7 +105,6 @@ export interface CellLayoutProperties { textColor?: string; cellBackground?: string; buttonColor?: string; - buttonLabelColor?: string; buttonLabel?: string; menuButtonLabel?: string; isVisible?: boolean; @@ -187,7 +186,6 @@ export interface ColumnProperties { buttonLabel?: string; menuButtonLabel?: string; buttonColor?: string; - buttonLabelColor?: string; onClick?: string; outputFormat?: string; inputFormat?: string; diff --git a/app/client/src/widgets/TableWidget/component/TableStyledWrappers.tsx b/app/client/src/widgets/TableWidget/component/TableStyledWrappers.tsx index a118a238b9..f560811560 100644 --- a/app/client/src/widgets/TableWidget/component/TableStyledWrappers.tsx +++ b/app/client/src/widgets/TableWidget/component/TableStyledWrappers.tsx @@ -262,19 +262,14 @@ export const MenuColumnWrapper = styled.div<{ selected: boolean }>` } `; -export const ActionWrapper = styled.div<{ - background: string; - buttonLabelColor: string; -}>` +export const ActionWrapper = styled.div` margin: 0 5px 0 0; &&&&&& { .bp3-button { - background: ${(props) => props.background}; - color: ${(props) => props.buttonLabelColor}; - border: none; + min-width: 50px; } .bp3-button span { - font-weight: 400; + font-weight: 500; text-decoration: none; } &&& .bp3-disabled { diff --git a/app/client/src/widgets/TableWidget/component/TableUtilities.tsx b/app/client/src/widgets/TableWidget/component/TableUtilities.tsx index 17821a3e3e..12f5adf102 100644 --- a/app/client/src/widgets/TableWidget/component/TableUtilities.tsx +++ b/app/client/src/widgets/TableWidget/component/TableUtilities.tsx @@ -25,7 +25,6 @@ import { } from "./Constants"; import { isString, isEmpty, findIndex, isNil, isNaN } from "lodash"; import PopoverVideo from "widgets/VideoWidget/component/PopoverVideo"; -import Button from "components/editorComponents/Button"; import AutoToolTipComponent from "widgets/TableWidget/component/AutoToolTipComponent"; import { ControlIcons } from "icons/ControlIcons"; import { AnyStyledComponent } from "styled-components"; @@ -287,7 +286,7 @@ interface RenderActionProps { isSelected: boolean; columnActions?: ColumnAction[]; backgroundColor: string; - buttonLabelColor: string; + buttonVariant: ButtonVariant; isDisabled: boolean; isCellVisible: boolean; onCommandClick: (dynamicTrigger: string, onComplete: () => void) => void; @@ -337,7 +336,7 @@ export const renderActions = ( void) => void; @@ -431,11 +430,15 @@ function TableAction(props: { const onComplete = () => { setLoading(false); }; + const handleClick = () => { + if (props.action.dynamicTrigger) { + setLoading(true); + props.onCommandClick(props.action.dynamicTrigger, onComplete); + } + }; return ( { if (props.isSelected) { e.stopPropagation(); @@ -443,16 +446,14 @@ function TableAction(props: { }} > {props.isCellVisible ? ( -