Merge pull request appsmithorg#13275 from appsmithorg/fix/disable-can…

…cel-button-on-a-disabled-select-widget fix: disable cancel button on a disabled select widget
ganganimaulik · May 11, 2022 · 10aca02 · 10aca02
2 parents 49a4e47 + 2f8c178
commit 10aca02
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 5 deletions.
diff --git a/app/client/src/components/ads/Icon.tsx b/app/client/src/components/ads/Icon.tsx
@@ -198,7 +198,8 @@ export const IconWrapper = styled.span<IconProps>`
 
  display: flex;
  align-items: center;
-
+ cursor: ${(props) =>
+ props.disabled ? "not-allowed" : props.clickable ? "pointer" : "default"};
  svg {
  width: ${(props) => sizeHandler(props.size)}px;
  height: ${(props) => sizeHandler(props.size)}px;
@@ -217,7 +218,6 @@ export const IconWrapper = styled.span<IconProps>`
  ${(props) => (props.invisible ? `visibility: hidden;` : null)};
 
  &:hover {
- cursor: ${(props) => (props.clickable ? "pointer" : "default")};
  ${(props) =>
  !props.keepColors
  ? `
@@ -400,10 +400,14 @@ export type IconProps = {
  keepColors?: boolean;
  loaderWithIconWrapper?: boolean;
  clickable?: boolean;
+ disabled?: boolean;
 };
 
 const Icon = forwardRef(
- (props: IconProps & CommonComponentProps, ref: Ref<HTMLSpanElement>) => {
+ (
+ { onClick, ...props }: IconProps & CommonComponentProps,
+ ref: Ref<HTMLSpanElement>,
+ ) => {
  const iconName = props.name;
  const returnIcon =
  ICON_LOOKUP[iconName as keyof typeof ICON_LOOKUP] || null;
@@ -424,9 +428,9 @@ const Icon = forwardRef(
  className={`${Classes.ICON} ${props.className}`}
  clickable={clickable}
  data-cy={props.cypressSelector}
+ onClick={props.disabled ? noop : onClick}
  ref={ref}
  {...props}
- onClick={props.onClick || noop}
  >
  {returnIcon}
  </IconWrapper>

diff --git a/app/client/src/pages/Editor/BottomBar/ManualUpgrades.tsx b/app/client/src/pages/Editor/BottomBar/ManualUpgrades.tsx
@@ -248,7 +248,6 @@ function ManualUpgrades() {
  >
  <Icon
  className="t--upgrade"
- disabled={applicationVersion < latestVersion}
  fillColor={Colors.SCORPION}
  name="upgrade"
  onClick={() => {

diff --git a/app/client/src/widgets/SelectWidget/component/SelectButton.test.tsx b/app/client/src/widgets/SelectWidget/component/SelectButton.test.tsx
@@ -18,15 +18,27 @@ const renderComponent = (props: SelectButtonProps = defaultProps) => {
 };
 
 describe("SelectButton", () => {
+ it("should not clear value when disabled", () => {
+ const { getByTestId, getByText } = renderComponent({
+ ...defaultProps,
+ disabled: true,
+ });
+ fireEvent.click(getByTestId("selectbutton.btn.cancel"));
+ expect(defaultProps.handleCancelClick).not.toBeCalled();
+ expect(getByText("0")).toBeTruthy();
+ });
+
  it("should render correctly", () => {
  const { getByText } = renderComponent();
  expect(getByText("0")).toBeTruthy();
  });
+
  it("should trigger handleCancelClick method on cancel click", () => {
  const { getByTestId } = renderComponent();
  fireEvent.click(getByTestId("selectbutton.btn.cancel"));
  expect(defaultProps.handleCancelClick).toBeCalled();
  });
+
  it("should toggle popover visibility method on button click", () => {
  const { getByTestId } = renderComponent();
  fireEvent.click(getByTestId("selectbutton.btn.main"));

diff --git a/app/client/src/widgets/SelectWidget/component/SelectButton.tsx b/app/client/src/widgets/SelectWidget/component/SelectButton.tsx
@@ -38,6 +38,7 @@ function SelectButton(props: SelectButtonProps) {
  <Icon
  className="dropdown-icon cancel-icon"
  data-testid="selectbutton.btn.cancel"
+ disabled={disabled}
  fillColor={disabled ? Colors.GREY_7 : Colors.GREY_10}
  name="cross"
  onClick={handleCancelClick}
@@ -46,6 +47,7 @@ function SelectButton(props: SelectButtonProps) {
  ) : null}
  <Icon
  className="dropdown-icon"
+ disabled={disabled}
  fillColor={disabled ? Colors.GREY_7 : Colors.GREY_10}
  name="dropdown"
  />