Merge pull request #13275 from appsmithorg/fix/disable-cancel-button-on-a-disabled-select-widget

fix: disable cancel button on a disabled select widget

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>

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={() => {

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

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"
           />