fix: provide access to currentRow in table widget menubutton items (#15457)

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");
+  });
+});

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<HTMLDivElement, MouseEvent>,
@@ -53,6 +54,7 @@ function MenuButton({
         menuItems={{ ...menuItems }}
         menuVariant={menuVariant}
         onItemClicked={onItemClicked}
+        rowIndex={rowIndex}
       />
     </div>
   );
@@ -71,6 +73,7 @@ export interface RenderMenuButtonProps extends BaseCellComponentProps {
   boxShadow?: string;
   iconName?: IconName;
   iconAlign?: Alignment;
+  rowIndex: number;
 }
 
 export function MenuButtonCell(props: RenderMenuButtonProps) {

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 <StyledMenu />;
   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 (
       <BaseMenuItem
-        backgroundColor={backgroundColor || "#FFFFFF"}
+        backgroundColor={
-        disabled={isDisabled}
+          getPropertyValue(backgroundColor, rowIndex) || "#FFFFFF"
+        }
+        disabled={getBooleanPropertyValue(isDisabled, rowIndex)}
         icon={
           iconAlign !== Alignment.RIGHT ? (
             <Icon color={iconColor} icon={iconName || undefined} />
@@ -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}

app/client/src/widgets/TableWidgetV2/widget/index.tsx

@@ -1425,6 +1425,7 @@ class TableWidgetV2 extends BaseWidget<TableWidgetProps, WidgetState> {
                 eventType: EventType.ON_CLICK,
               })
             }
+            rowIndex={originalIndex}
             textColor={cellProperties.textColor}
             textSize={cellProperties.textSize}
             verticalAlignment={cellProperties.verticalAlignment}

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,7 +298,10 @@ export default {
       },
       isBindProperty: true,
       isTriggerProperty: false,
+      defaultValue: ButtonVariantTypes.PRIMARY,
       validation: {
+        type: ValidationTypes.TABLE_PROPERTY,
+        params: {
           type: ValidationTypes.TEXT,
           params: {
             default: ButtonVariantTypes.PRIMARY,
@@ -309,5 +313,6 @@ export default {
           },
         },
       },
+    },
   ],
 };

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"],
               },
             ],