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

fix: 8385 added button variant support in table column type button (#9164)

Browse Source
This commit is contained in:
Yash Vibhandik 2022-04-07 09:19:51 -07:00 committed by GitHub
parent 0ad66f27bd
commit 7736daf0a5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
14 changed files with 246 additions and 108 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_PropertyPane_IconName_spec.js Normal file
View File

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

76
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_PropertyPane_spec.js
View File

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

29
app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Widget_Add_button_spec.js
View File

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

1
app/client/cypress/locators/commonlocators.json
View File

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

1
app/client/src/components/propertyControls/PrimaryColumnsControl.tsx
View File

@ -216,7 +216,6 @@ class PrimaryColumnsControl extends BaseControl<ControlProps, State> {
const column = {
...columnProps,
buttonStyle: "rgb(3, 179, 101)",
buttonLabelColor: "#FFFFFF",
isDisabled: false,
...tableStyles,
};

28
app/client/src/entities/Widget/utils.test.ts
View File

@ -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: /^(?![<|{{]).+/,
},
},
},
},
};

2
app/client/src/widgets/TableWidget/component/Constants.ts
View File

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

11
app/client/src/widgets/TableWidget/component/TableStyledWrappers.tsx
View File

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

27
app/client/src/widgets/TableWidget/component/TableUtilities.tsx
View File

@ -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 = (
<TableAction
action={action}
backgroundColor={props.backgroundColor}
buttonLabelColor={props.buttonLabelColor}
buttonVariant={props.buttonVariant}
isCellVisible={props.isCellVisible}
isDisabled={props.isDisabled}
isSelected={props.isSelected}
@ -422,7 +421,7 @@ function TableAction(props: {
isSelected: boolean;
action: ColumnAction;
backgroundColor: string;
buttonLabelColor: string;
buttonVariant: ButtonVariant;
isDisabled: boolean;
isCellVisible: boolean;
onCommandClick: (dynamicTrigger: string, onComplete: () => 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 (
<ActionWrapper
background={props.backgroundColor}
buttonLabelColor={props.buttonLabelColor}
onClick={(e) => {
if (props.isSelected) {
e.stopPropagation();
@ -443,16 +446,14 @@ function TableAction(props: {
}}
>
{props.isCellVisible ? (
<Button
<StyledButton
buttonColor={props.backgroundColor}
buttonVariant={props.buttonVariant}
disabled={props.isDisabled}
filled
intent="PRIMARY_BUTTON"
loading={loading}
onClick={() => {
setLoading(true);
props.onCommandClick(props.action.dynamicTrigger, onComplete);
}}
size="small"
onClick={handleClick}
small
text={props.action.label}
/>
) : null}

4
app/client/src/widgets/TableWidget/widget/getTableColumns.tsx
View File

@ -48,10 +48,6 @@ export const getCellProperties = (
rowIndex,
),
buttonColor: getPropertyValue(columnProperties.buttonColor, rowIndex),
buttonLabelColor: getPropertyValue(
columnProperties.buttonLabelColor,
rowIndex,
),
buttonLabel: getPropertyValue(
columnProperties.buttonLabel,
rowIndex,

9
app/client/src/widgets/TableWidget/widget/index.tsx
View File

@ -50,7 +50,7 @@ import { BatchPropertyUpdatePayload } from "actions/controlActions";
import { IconName } from "@blueprintjs/icons";
import { getCellProperties } from "./getTableColumns";
import { Colors } from "constants/Colors";
import { IconNames } from "@blueprintjs/core/node_modules/@blueprintjs/icons";
import { ButtonVariantTypes } from "components/constants";
const ReactTableComponent = lazy(() =>
retryPromise(() => import("../component")),
@ -168,7 +168,8 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
onCommandClick: (action: string, onComplete: () => void) =>
this.onCommandClick(rowIndex, action, onComplete),
backgroundColor: cellProperties.buttonColor || "transparent",
buttonLabelColor: cellProperties.buttonLabelColor || "#FFFFFF",
buttonVariant:
cellProperties.buttonVariant || ButtonVariantTypes.PRIMARY,
isDisabled: cellProperties.isDisabled || false,
isCellVisible: cellProperties.isCellVisible ?? true,
columnActions: [
@ -223,7 +224,7 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
borderRadius: cellProperties.borderRadius,
boxShadow: cellProperties.boxShadow,
boxShadowColor: cellProperties.boxShadowColor,
iconName: cellProperties.iconName || "add",
iconName: cellProperties.iconName || undefined,
iconAlign: cellProperties.iconAlign,
isCellVisible: cellProperties.isCellVisible ?? true,
label: cellProperties.menuButtonLabel ?? "Open menu",
@ -240,7 +241,7 @@ class TableWidget extends BaseWidget<TableWidgetProps, WidgetState> {
dynamicTrigger: columnProperties.onClick || "",
},
],
iconName: (cellProperties.iconName || IconNames.ADD) as IconName,
iconName: cellProperties.iconName as IconName,
buttonColor: cellProperties.buttonColor || Colors.GREEN,
buttonVariant: cellProperties.buttonVariant || "PRIMARY",
borderRadius: cellProperties.borderRadius || "SHARP",

45
app/client/src/widgets/TableWidget/widget/propertyConfig.ts
View File

@ -14,10 +14,11 @@ import {
defaultSelectedRowValidation,
totalRecordsCountValidation,
updateColumnStyles,
updateIconAlignment,
updateIconAlignmentHook,
getBasePropertyPath,
hideByColumnType,
uniqueColumnNameValidation,
updateIconNameHook,
} from "./propertyUtils";
import {
createMessage,
@ -124,7 +125,7 @@ export default [
value: "iconButton",
},
],
updateHook: updateDerivedColumnsHook,
updateHook: updateIconNameHook,
dependencies: [
"primaryColumns",
"derivedColumns",
@ -826,7 +827,7 @@ export default [
ColumnTypes.MENU_BUTTON,
]);
},
updateHook: updateIconAlignment,
updateHook: updateIconAlignmentHook,
dependencies: [
"primaryColumns",
"derivedColumns",
@ -834,7 +835,6 @@ export default [
],
controlType: "ICON_SELECT",
customJSControl: "COMPUTE_VALUE",
defaultIconName: "add",
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: false,
@ -844,7 +844,6 @@ export default [
type: ValidationTypes.TEXT,
params: {
allowedValues: ICON_NAMES,
default: IconNames.ADD,
},
},
},
@ -958,10 +957,12 @@ export default [
label: "Button Variant",
controlType: "DROP_DOWN",
customJSControl: "COMPUTE_VALUE",
defaultValue: ButtonVariantTypes.PRIMARY,
isJSConvertible: true,
helpText: "Sets the variant of the icon button",
helpText: "Sets the variant",
hidden: (props: TableWidgetProps, propertyPath: string) => {
return hideByColumnType(props, propertyPath, [
ColumnTypes.BUTTON,
ColumnTypes.ICON_BUTTON,
]);
},
@ -984,8 +985,6 @@ export default [
value: ButtonVariantTypes.TERTIARY,
},
],
defaultValue: ButtonVariantTypes.PRIMARY,
isBindProperty: true,
isTriggerProperty: false,
validation: {
@ -1104,36 +1103,6 @@ export default [
},
isTriggerProperty: false,
},
{
propertyName: "buttonLabelColor",
label: "Label Color",
controlType: "COLOR_PICKER",
isJSConvertible: true,
customJSControl: "COMPUTE_VALUE",
hidden: (props: TableWidgetProps, propertyPath: string) => {
return hideByColumnType(props, propertyPath, [
ColumnTypes.BUTTON,
]);
},
dependencies: [
"primaryColumns",
"derivedColumns",
"columnOrder",
],
updateHook: updateDerivedColumnsHook,
isBindProperty: true,
isTriggerProperty: false,
validation: {
type: ValidationTypes.TABLE_PROPERTY,
params: {
type: ValidationTypes.TEXT,
params: {
regex: /^(?![<|{{]).+/,
},
},
},
},
{
propertyName: "menuColor",
helpText:

42
app/client/src/widgets/TableWidget/widget/propertyUtils.test.ts
View File

@ -1,4 +1,7 @@
import { defaultSelectedRowValidation } from "./propertyUtils";
import {
defaultSelectedRowValidation,
updateIconNameHook,
} from "./propertyUtils";
import _ from "lodash";
const tableWProps = {
@ -152,6 +155,7 @@ const tableWProps = {
status: 75,
},
};
describe("unit test case for property utils", () => {
it("case: check if the defaultSelectedRowValiation returns parsed value as undefined", () => {
const value = defaultSelectedRowValidation("", tableWProps as any, _);
@ -159,4 +163,40 @@ describe("unit test case for property utils", () => {
expect(value.isValid).toBeTruthy();
expect(value.parsed).toEqual(undefined);
});
it("case: when columnType is menuButton, iconName should be empty string", () => {
const propertiesToUpdate = updateIconNameHook(
tableWProps as any,
"primaryColumns.action.columnType",
"menuButton",
);
const output = [
{
propertyPath: "primaryColumns.action.columnType",
propertyValue: "menuButton",
},
{
propertyPath: "primaryColumns.action.iconName",
propertyValue: "",
},
];
expect(propertiesToUpdate).toEqual(output);
});
it("case: when columnType is iconButton, iconName value should be add", () => {
const propertiesToUpdate = updateIconNameHook(
tableWProps as any,
"primaryColumns.action.columnType",
"iconButton",
);
const output = [
{
propertyPath: "primaryColumns.action.columnType",
propertyValue: "iconButton",
},
{
propertyPath: "primaryColumns.action.iconName",
propertyValue: "add",
},
];
expect(propertiesToUpdate).toEqual(output);
});
});

39
app/client/src/widgets/TableWidget/widget/propertyUtils.ts
View File

@ -3,6 +3,7 @@ import { ColumnProperties } from "../component/Constants";
import { TableWidgetProps } from "../constants";
import { Colors } from "constants/Colors";
import { get } from "lodash";
import { IconNames } from "@blueprintjs/icons";
export enum ColumnTypes {
TEXT = "text",
@ -206,8 +207,44 @@ export const updateColumnStyles = (
}
return;
};
// Select default Icon Name if column type is Icon Button
export function updateIconNameHook(
props: TableWidgetProps,
propertyPath: string,
propertyValue: string,
) {
const property = getBasePropertyPath(propertyPath);
let propertiesToUpdate = [{ propertyPath, propertyValue }];
const updateDerivedColumnsHookArr = updateDerivedColumnsHook(
props,
propertyPath,
propertyValue,
);
if (updateDerivedColumnsHookArr) {
propertiesToUpdate = [
...updateDerivedColumnsHookArr,
...propertiesToUpdate,
];
}
if (propertyValue === "iconButton") {
propertiesToUpdate.push({
propertyPath: `${property}.iconName`,
propertyValue: IconNames.ADD,
});
} else {
propertiesToUpdate.push({
propertyPath: `${property}.iconName`,
propertyValue: "",
});
}
return propertiesToUpdate;
}
// Select default Icon Alignment when an icon is chosen
export function updateIconAlignment(
export function updateIconAlignmentHook(
props: TableWidgetProps,
propertyPath: string,
propertyValue: string,