Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: disabledWhenInvalid in ButtonGroupWidget #38656

Merged
merged 6 commits into from
Jan 16, 2025
Merged
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
feat: Add disabledWhenInvalid property to each button in ButtonGroupW…
…idget

Co-Authored-By: rahul.barwal@appsmith.com <rahul.barwal@appsmith.com>
devin-ai-integration[bot] and rahulbarwal committed Jan 15, 2025
commit e21937227d8e802a21f6714cfbbbb11ddf56ff3a
Original file line number Diff line number Diff line change
@@ -746,6 +746,7 @@ export interface ButtonGroupComponentProps {
widgetId: string;
buttonMinWidth?: number;
minHeight?: number;
isFormValid?: boolean;
}

export interface ButtonGroupComponentState {
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import { render } from "@testing-library/react";
import React from "react";
import ButtonGroupWidget from "../index";
import { RenderModes } from "constants/WidgetConstants";

describe("ButtonGroupWidget disabledWhenInvalid", () => {
const defaultProps = {
widgetId: "test-button-group",
renderMode: RenderModes.CANVAS,
version: 1,
parentColumnSpace: 1,
parentRowSpace: 1,
leftColumn: 0,
rightColumn: 0,
topRow: 0,
bottomRow: 0,
isLoading: false,
orientation: "horizontal",
groupButtons: {
groupButton1: {
label: "Test Button 1",
id: "groupButton1",
widgetId: "",
buttonType: "SIMPLE",
placement: "CENTER",
isVisible: true,
isDisabled: false,
disabledWhenInvalid: true,
index: 0,
menuItems: {},
},
groupButton2: {
label: "Test Button 2",
id: "groupButton2",
widgetId: "",
buttonType: "SIMPLE",
placement: "CENTER",
isVisible: true,
isDisabled: false,
disabledWhenInvalid: true,
index: 1,
menuItems: {},
},
},
};

it("disables buttons when disabledWhenInvalid is true and form is invalid", () => {
const props = {
...defaultProps,
isFormValid: false,
};

const { container } = render(<ButtonGroupWidget {...props} />);
const buttons = container.querySelectorAll("button");

buttons.forEach((button) => {
expect(button).toBeDisabled();
});
});

it("enables buttons when disabledWhenInvalid is true but form is valid", () => {
const props = {
...defaultProps,
isFormValid: true,
};

const { container } = render(<ButtonGroupWidget {...props} />);
const buttons = container.querySelectorAll("button");

buttons.forEach((button) => {
expect(button).not.toBeDisabled();
});
});

it("enables buttons when disabledWhenInvalid is false regardless of form validity", () => {
const props = {
...defaultProps,
isFormValid: false,
groupButtons: {
...defaultProps.groupButtons,
groupButton1: {
...defaultProps.groupButtons.groupButton1,
disabledWhenInvalid: false,
},
groupButton2: {
...defaultProps.groupButtons.groupButton2,
disabledWhenInvalid: false,
},
},
};

const { container } = render(<ButtonGroupWidget {...props} />);
const buttons = container.querySelectorAll("button");

buttons.forEach((button) => {
expect(button).not.toBeDisabled();
});
});
});
22 changes: 22 additions & 0 deletions app/client/src/widgets/ButtonGroupWidget/widget/index.tsx
Original file line number Diff line number Diff line change
@@ -65,6 +65,7 @@ class ButtonGroupWidget extends BaseWidget<
placement: "CENTER",
isVisible: true,
isDisabled: false,
disabledWhenInvalid: false,
index: 0,
menuItems: {},
},
@@ -77,6 +78,7 @@ class ButtonGroupWidget extends BaseWidget<
widgetId: "",
isVisible: true,
isDisabled: false,
disabledWhenInvalid: false,
index: 1,
menuItems: {},
},
@@ -89,6 +91,7 @@ class ButtonGroupWidget extends BaseWidget<
widgetId: "",
isVisible: true,
isDisabled: false,
disabledWhenInvalid: false,
index: 2,
menuItems: {
menuItem1: {
@@ -99,6 +102,7 @@ class ButtonGroupWidget extends BaseWidget<
onClick: "",
isVisible: true,
isDisabled: false,
disabledWhenInvalid: false,
index: 0,
},
menuItem2: {
@@ -109,6 +113,7 @@ class ButtonGroupWidget extends BaseWidget<
onClick: "",
isVisible: true,
isDisabled: false,
disabledWhenInvalid: false,
index: 1,
},
menuItem3: {
@@ -123,6 +128,7 @@ class ButtonGroupWidget extends BaseWidget<
onClick: "",
isVisible: true,
isDisabled: false,
disabledWhenInvalid: false,
index: 2,
},
},
@@ -517,6 +523,21 @@ class ButtonGroupWidget extends BaseWidget<
},
],
},
{
sectionName: "Form settings",
children: [
{
propertyName: "disabledWhenInvalid",
label: "Disabled invalid forms",
helpText: "Disables this button if the form is invalid, if this button exists directly within a Form widget",
controlType: "SWITCH",
isJSConvertible: true,
isBindProperty: true,
isTriggerProperty: false,
validation: { type: ValidationTypes.BOOLEAN },
},
],
},
{
sectionName: "Events",
hidden: (
@@ -839,6 +860,7 @@ class ButtonGroupWidget extends BaseWidget<
export interface ButtonGroupWidgetProps extends WidgetProps {
orientation: string;
isDisabled: boolean;
disabledWhenInvalid?: boolean;
borderRadius?: string;
boxShadow?: string;
buttonVariant: ButtonVariant;