diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/columnTypes/menubutton_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/columnTypes/menubutton_spec.js new file mode 100644 index 0000000000..55669584d8 --- /dev/null +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/columnTypes/menubutton_spec.js @@ -0,0 +1,162 @@ +import { ObjectsRegistry } from "../../../../../../support/Objects/Registry"; + +const propPane = ObjectsRegistry.PropertyPane; + +describe("Custom column alias functionality", () => { + before(() => { + cy.dragAndDropToCanvas("tablewidgetv2", { x: 150, y: 300 }); + }); + + it("1. should check that menuitems background color property has access to currentRow", () => { + cy.openPropertyPane("tablewidgetv2"); + cy.editColumn("task"); + cy.changeColumnType("Menu Button"); + cy.get(".t--add-menu-item-btn").click(); + cy.get(".t--edit-column-btn").click(); + cy.get("[data-colindex='1'][data-rowindex='0'] .bp3-button").click({ + force: true, + }); + cy.get(".table-menu-button-popover li a").should( + "have.css", + "background-color", + "rgb(255, 255, 255)", + ); + cy.get("[data-colindex='1'][data-rowindex='1'] .bp3-button").click({ + force: true, + }); + cy.get(".table-menu-button-popover li a").should( + "have.css", + "background-color", + "rgb(255, 255, 255)", + ); + cy.get(".t--property-control-backgroundcolor .t--js-toggle").click(); + propPane.UpdatePropertyFieldValue( + "Background color", + "{{currentRow.step === '#1' ? '#f00' : '#0f0'}}", + ); + cy.wait(2000); + cy.get("[data-colindex='1'][data-rowindex='0'] .bp3-button").click({ + force: true, + }); + cy.get(".table-menu-button-popover li a").should( + "have.css", + "background-color", + "rgb(255, 0, 0)", + ); + cy.get("[data-colindex='1'][data-rowindex='1'] .bp3-button").click({ + force: true, + }); + cy.get(".table-menu-button-popover li a").should( + "have.css", + "background-color", + "rgb(0, 255, 0)", + ); + }); + + it("2. should check that menuitems text color property has access to currentRow", () => { + cy.get("[data-colindex='1'][data-rowindex='0'] .bp3-button").click({ + force: true, + }); + cy.get(".table-menu-button-popover li a").should( + "have.css", + "color", + "rgb(24, 32, 38)", + ); + cy.get("[data-colindex='1'][data-rowindex='1'] .bp3-button").click({ + force: true, + }); + cy.get(".table-menu-button-popover li a").should( + "have.css", + "color", + "rgb(24, 32, 38)", + ); + cy.get(".t--property-control-textcolor .t--js-toggle").click(); + propPane.UpdatePropertyFieldValue( + "Text color", + "{{currentRow.step === '#1' ? '#f00' : '#0f0'}}", + ); + cy.wait(2000); + cy.get("[data-colindex='1'][data-rowindex='0'] .bp3-button").click({ + force: true, + }); + cy.get(".table-menu-button-popover li a").should( + "have.css", + "color", + "rgb(255, 0, 0)", + ); + cy.get("[data-colindex='1'][data-rowindex='1'] .bp3-button").click({ + force: true, + }); + cy.get(".table-menu-button-popover li a").should( + "have.css", + "color", + "rgb(0, 255, 0)", + ); + }); + + it("3. should check that menuitems isDisabled property has access to currentRow", () => { + cy.get("[data-colindex='1'][data-rowindex='0'] .bp3-button").click({ + force: true, + }); + cy.get(".table-menu-button-popover li a").should( + "have.css", + "background-color", + "rgb(255, 0, 0)", + ); + cy.get("[data-colindex='1'][data-rowindex='1'] .bp3-button").click({ + force: true, + }); + cy.get(".table-menu-button-popover li a").should( + "have.css", + "background-color", + "rgb(0, 255, 0)", + ); + cy.get(".t--property-control-disabled .t--js-toggle").click(); + propPane.UpdatePropertyFieldValue( + "Disabled", + "{{currentRow.step === '#1'}}", + ); + cy.wait(2000); + cy.get("[data-colindex='1'][data-rowindex='0'] .bp3-button").click({ + force: true, + }); + cy.get(".table-menu-button-popover li a").should( + "have.css", + "background-color", + "rgb(250, 250, 250)", + ); + cy.get("[data-colindex='1'][data-rowindex='1'] .bp3-button").click({ + force: true, + }); + cy.get(".table-menu-button-popover li a").should( + "have.css", + "background-color", + "rgb(0, 255, 0)", + ); + }); + + it("4. should check that menuitems visible property has access to currentRow", () => { + cy.get("[data-colindex='1'][data-rowindex='0'] .bp3-button").click({ + force: true, + }); + cy.get(".table-menu-button-popover li a").should("exist"); + cy.get("[data-colindex='1'][data-rowindex='1'] .bp3-button").click({ + force: true, + }); + cy.get(".table-menu-button-popover li a").should("exist"); + cy.get(".t--property-control-visible .t--js-toggle").click(); + propPane.UpdatePropertyFieldValue( + "Visible", + "{{currentRow.step === '#1'}}", + ); + cy.wait(2000); + cy.get("[data-colindex='1'][data-rowindex='0'] .bp3-button").click({ + force: true, + }); + cy.get(".table-menu-button-popover li a").should("exist"); + cy.get("[data-colindex='1'][data-rowindex='1'] .bp3-button").click({ + force: true, + }); + cy.get(".table-menu-button-popover li a").should("not.exist"); + }); +}); diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/MenuButtonCell.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/MenuButtonCell.tsx index c13685e4c2..8b4c0d5db5 100644 --- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/MenuButtonCell.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/MenuButtonCell.tsx @@ -25,6 +25,7 @@ function MenuButton({ menuItems, menuVariant, onCommandClick, + rowIndex, }: MenuButtonProps): JSX.Element { const handlePropagation = ( e: React.MouseEvent, @@ -53,6 +54,7 @@ function MenuButton({ menuItems={{ ...menuItems }} menuVariant={menuVariant} onItemClicked={onItemClicked} + rowIndex={rowIndex} /> ); @@ -71,6 +73,7 @@ export interface RenderMenuButtonProps extends BaseCellComponentProps { boxShadow?: string; iconName?: IconName; iconAlign?: Alignment; + rowIndex: number; } export function MenuButtonCell(props: RenderMenuButtonProps) { diff --git a/app/client/src/widgets/TableWidgetV2/component/cellComponents/menuButtonTableComponent.tsx b/app/client/src/widgets/TableWidgetV2/component/cellComponents/menuButtonTableComponent.tsx index 98772ca6f2..c34a2f2829 100644 --- a/app/client/src/widgets/TableWidgetV2/component/cellComponents/menuButtonTableComponent.tsx +++ b/app/client/src/widgets/TableWidgetV2/component/cellComponents/menuButtonTableComponent.tsx @@ -25,6 +25,10 @@ import { MenuItems } from "../Constants"; import tinycolor from "tinycolor2"; import { Colors } from "constants/Colors"; import orderBy from "lodash/orderBy"; +import { + getBooleanPropertyValue, + getPropertyValue, +} from "widgets/TableWidgetV2/widget/utilities"; const MenuButtonContainer = styled.div` width: 100%; @@ -197,15 +201,16 @@ interface PopoverContentProps { menuItems: MenuItems; onItemClicked: (onClick: string | undefined) => void; isCompact?: boolean; + rowIndex: number; } function PopoverContent(props: PopoverContentProps) { - const { isCompact, menuItems: itemsObj, onItemClicked } = props; + const { isCompact, menuItems: itemsObj, onItemClicked, rowIndex } = props; if (!itemsObj) return ; const visibleItems = Object.keys(itemsObj) .map((itemKey) => itemsObj[itemKey]) - .filter((item) => item.isVisible); + .filter((item) => getBooleanPropertyValue(item.isVisible, rowIndex)); const items = orderBy(visibleItems, ["index"], ["asc"]); @@ -224,8 +229,10 @@ function PopoverContent(props: PopoverContentProps) { return ( @@ -244,7 +251,7 @@ function PopoverContent(props: PopoverContentProps) { } onClick={() => onItemClicked(onClick)} text={label} - textColor={textColor} + textColor={getPropertyValue(textColor, rowIndex)} /> ); }); @@ -306,6 +313,7 @@ export interface MenuButtonComponentProps { iconName?: IconName; iconAlign?: Alignment; onItemClicked: (onClick: string | undefined) => void; + rowIndex: number; } function MenuButtonTableComponent(props: MenuButtonComponentProps) { @@ -322,6 +330,7 @@ function MenuButtonTableComponent(props: MenuButtonComponentProps) { menuItems, menuVariant, onItemClicked, + rowIndex, } = props; return ( @@ -341,6 +350,7 @@ function MenuButtonTableComponent(props: MenuButtonComponentProps) { isCompact={isCompact} menuItems={menuItems} onItemClicked={onItemClicked} + rowIndex={rowIndex} /> } disabled={isDisabled} diff --git a/app/client/src/widgets/TableWidgetV2/widget/index.tsx b/app/client/src/widgets/TableWidgetV2/widget/index.tsx index 482e116a8e..8b4f5d7e89 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/index.tsx +++ b/app/client/src/widgets/TableWidgetV2/widget/index.tsx @@ -1425,6 +1425,7 @@ class TableWidgetV2 extends BaseWidget { eventType: EventType.ON_CLICK, }) } + rowIndex={originalIndex} textColor={cellProperties.textColor} textSize={cellProperties.textSize} verticalAlignment={cellProperties.verticalAlignment} diff --git a/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/ButtonProperties.ts b/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/ButtonProperties.ts index 2ac1661f42..ed7e77766e 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/ButtonProperties.ts +++ b/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/ButtonProperties.ts @@ -275,6 +275,7 @@ export default { propertyName: "menuVariant", label: "Menu Variant", controlType: "DROP_DOWN", + customJSControl: "TABLE_COMPUTE_VALUE", helpText: "Sets the variant of the menu button", options: [ { @@ -297,15 +298,19 @@ export default { }, isBindProperty: true, isTriggerProperty: false, + defaultValue: ButtonVariantTypes.PRIMARY, validation: { - type: ValidationTypes.TEXT, + type: ValidationTypes.TABLE_PROPERTY, params: { - default: ButtonVariantTypes.PRIMARY, - allowedValues: [ - ButtonVariantTypes.PRIMARY, - ButtonVariantTypes.SECONDARY, - ButtonVariantTypes.TERTIARY, - ], + type: ValidationTypes.TEXT, + params: { + default: ButtonVariantTypes.PRIMARY, + allowedValues: [ + ButtonVariantTypes.PRIMARY, + ButtonVariantTypes.SECONDARY, + ButtonVariantTypes.TERTIARY, + ], + }, }, }, }, diff --git a/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/MenuItems.ts b/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/MenuItems.ts index 84f80c1918..a7a2695310 100644 --- a/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/MenuItems.ts +++ b/app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/MenuItems.ts @@ -46,30 +46,56 @@ export default { helpText: "Sets the background color of a menu item", label: "Background color", controlType: "PRIMARY_COLUMNS_COLOR_PICKER_V2", + customJSControl: "TABLE_COMPUTE_VALUE", isJSConvertible: true, isBindProperty: true, isTriggerProperty: false, dependencies: ["primaryColumns", "columnOrder"], - validation: { type: ValidationTypes.TEXT }, + validation: { + type: ValidationTypes.TABLE_PROPERTY, + params: { + type: ValidationTypes.TEXT, + params: { + regex: /^(?![<|{{]).+/, + }, + }, + }, }, { propertyName: "textColor", helpText: "Sets the text color of a menu item", label: "Text color", controlType: "PRIMARY_COLUMNS_COLOR_PICKER_V2", - isBindProperty: false, + customJSControl: "TABLE_COMPUTE_VALUE", + isJSConvertible: true, + isBindProperty: true, isTriggerProperty: false, dependencies: ["primaryColumns", "columnOrder"], + validation: { + type: ValidationTypes.TABLE_PROPERTY, + params: { + type: ValidationTypes.TEXT, + params: { + regex: /^(?![<|{{]).+/, + }, + }, + }, }, { propertyName: "isDisabled", helpText: "Disables input to the widget", label: "Disabled", controlType: "SWITCH", + customJSControl: "TABLE_COMPUTE_VALUE", isJSConvertible: true, isBindProperty: true, isTriggerProperty: false, - validation: { type: ValidationTypes.BOOLEAN }, + validation: { + type: ValidationTypes.TABLE_PROPERTY, + params: { + type: ValidationTypes.BOOLEAN, + }, + }, dependencies: ["primaryColumns", "columnOrder"], }, { @@ -77,10 +103,16 @@ export default { helpText: "Controls the visibility of the widget", label: "Visible", controlType: "SWITCH", + customJSControl: "TABLE_COMPUTE_VALUE", isJSConvertible: true, isBindProperty: true, isTriggerProperty: false, - validation: { type: ValidationTypes.BOOLEAN }, + validation: { + type: ValidationTypes.TABLE_PROPERTY, + params: { + type: ValidationTypes.BOOLEAN, + }, + }, dependencies: ["primaryColumns", "columnOrder"], }, ],