Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
balajisoundar 2022-08-01 10:31:34 +05:30 committed by GitHub
parent de23ea9d61
commit a6d37625a1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 229 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

162
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Widgets/TableV2/columnTypes/menubutton_spec.js Normal file
View File

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

3
app/client/src/widgets/TableWidgetV2/component/cellComponents/MenuButtonCell.tsx
View File

@ -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) {

20
app/client/src/widgets/TableWidgetV2/component/cellComponents/menuButtonTableComponent.tsx
View File

@ -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"}
disabled={isDisabled}
backgroundColor={
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}

1
app/client/src/widgets/TableWidgetV2/widget/index.tsx
View File

@ -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}

19
app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/ButtonProperties.ts
View File

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

40
app/client/src/widgets/TableWidgetV2/widget/propertyConfig/PanelConfig/MenuItems.ts
View File

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