From faea2712fe77173e987ded3fb5c6448b48ec8ba8 Mon Sep 17 00:00:00 2001 From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com> Date: Mon, 25 Apr 2022 13:36:36 +0100 Subject: [PATCH 1/7] fix: disable cancel button on a disabled select widget --- app/client/src/components/ads/Icon.tsx | 11 +++++++++-- .../SelectWidget/component/SelectButton.test.tsx | 9 +++++++++ .../widgets/SelectWidget/component/SelectButton.tsx | 4 +++- 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/app/client/src/components/ads/Icon.tsx b/app/client/src/components/ads/Icon.tsx index e3f62ae100..009ad963c5 100644 --- a/app/client/src/components/ads/Icon.tsx +++ b/app/client/src/components/ads/Icon.tsx @@ -197,10 +197,11 @@ export const IconWrapper = styled.span` display: flex; align-items: center; - + cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")}; svg { width: ${(props) => sizeHandler(props.size)}px; height: ${(props) => sizeHandler(props.size)}px; + cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")}; ${(props) => !props.keepColors ? ` @@ -216,7 +217,12 @@ export const IconWrapper = styled.span` ${(props) => (props.invisible ? `visibility: hidden;` : null)}; &:hover { - cursor: ${(props) => (props.clickable ? "pointer" : "default")}; + cursor: ${(props) => + props.disabled + ? "not-allowed" + : props.clickable + ? "pointer" + : "default"}; ${(props) => !props.keepColors ? ` @@ -398,6 +404,7 @@ export type IconProps = { keepColors?: boolean; loaderWithIconWrapper?: boolean; clickable?: boolean; + disabled?: boolean; }; const Icon = forwardRef( diff --git a/app/client/src/widgets/SelectWidget/component/SelectButton.test.tsx b/app/client/src/widgets/SelectWidget/component/SelectButton.test.tsx index ab0c65b382..09d7f357ce 100644 --- a/app/client/src/widgets/SelectWidget/component/SelectButton.test.tsx +++ b/app/client/src/widgets/SelectWidget/component/SelectButton.test.tsx @@ -18,6 +18,15 @@ 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(); diff --git a/app/client/src/widgets/SelectWidget/component/SelectButton.tsx b/app/client/src/widgets/SelectWidget/component/SelectButton.tsx index 0daadbd257..3fed5bfe8d 100644 --- a/app/client/src/widgets/SelectWidget/component/SelectButton.tsx +++ b/app/client/src/widgets/SelectWidget/component/SelectButton.tsx @@ -38,14 +38,16 @@ function SelectButton(props: SelectButtonProps) { ) : null} From 7f8bf5c4fef57d77eb0352669286ff5842a20f97 Mon Sep 17 00:00:00 2001 From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com> Date: Wed, 27 Apr 2022 12:29:31 +0100 Subject: [PATCH 2/7] fix: PR reviews --- app/client/src/components/ads/Icon.tsx | 25 +++++++++++-------- .../SelectWidget/component/SelectButton.tsx | 2 +- 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/app/client/src/components/ads/Icon.tsx b/app/client/src/components/ads/Icon.tsx index 009ad963c5..507c9dc0a8 100644 --- a/app/client/src/components/ads/Icon.tsx +++ b/app/client/src/components/ads/Icon.tsx @@ -198,10 +198,13 @@ export const IconWrapper = styled.span` display: flex; align-items: center; cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")}; + &:hover { + cursor: ${(props) => + props.disabled ? "not-allowed" : props.clickable ? "pointer" : "default"}; + } svg { width: ${(props) => sizeHandler(props.size)}px; height: ${(props) => sizeHandler(props.size)}px; - cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")}; ${(props) => !props.keepColors ? ` @@ -217,12 +220,6 @@ export const IconWrapper = styled.span` ${(props) => (props.invisible ? `visibility: hidden;` : null)}; &:hover { - cursor: ${(props) => - props.disabled - ? "not-allowed" - : props.clickable - ? "pointer" - : "default"}; ${(props) => !props.keepColors ? ` @@ -408,7 +405,10 @@ export type IconProps = { }; const Icon = forwardRef( - (props: IconProps & CommonComponentProps, ref: Ref) => { + ( + { onClick, ...props }: IconProps & CommonComponentProps, + ref: Ref, + ) => { const iconName = props.name; const returnIcon = ICON_LOOKUP[iconName as keyof typeof ICON_LOOKUP] || null; @@ -418,7 +418,12 @@ const Icon = forwardRef( let loader = ; if (props.loaderWithIconWrapper) { loader = ( - + ); @@ -429,9 +434,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} diff --git a/app/client/src/widgets/SelectWidget/component/SelectButton.tsx b/app/client/src/widgets/SelectWidget/component/SelectButton.tsx index 3fed5bfe8d..7d2c1d9f57 100644 --- a/app/client/src/widgets/SelectWidget/component/SelectButton.tsx +++ b/app/client/src/widgets/SelectWidget/component/SelectButton.tsx @@ -41,7 +41,7 @@ function SelectButton(props: SelectButtonProps) { disabled={disabled} fillColor={disabled ? Colors.GREY_7 : Colors.GREY_10} name="cross" - onClick={!disabled ? handleCancelClick : undefined} + onClick={handleCancelClick} size={IconSize.XXS} /> ) : null} From 2d578409380e17ac6f6da79a7c077ba8b4abd88f Mon Sep 17 00:00:00 2001 From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com> Date: Wed, 27 Apr 2022 12:30:43 +0100 Subject: [PATCH 3/7] fix: add new line --- .../src/widgets/SelectWidget/component/SelectButton.test.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/app/client/src/widgets/SelectWidget/component/SelectButton.test.tsx b/app/client/src/widgets/SelectWidget/component/SelectButton.test.tsx index 09d7f357ce..5fe7a1996f 100644 --- a/app/client/src/widgets/SelectWidget/component/SelectButton.test.tsx +++ b/app/client/src/widgets/SelectWidget/component/SelectButton.test.tsx @@ -27,15 +27,18 @@ describe("SelectButton", () => { 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")); From 47398e20d9b7b874031337b567084dc9fffab031 Mon Sep 17 00:00:00 2001 From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com> Date: Thu, 28 Apr 2022 12:25:14 +0100 Subject: [PATCH 4/7] fix: PR reviews --- app/client/src/components/ads/Icon.tsx | 11 +---------- 1 file changed, 1 insertion(+), 10 deletions(-) diff --git a/app/client/src/components/ads/Icon.tsx b/app/client/src/components/ads/Icon.tsx index 507c9dc0a8..789f88f15a 100644 --- a/app/client/src/components/ads/Icon.tsx +++ b/app/client/src/components/ads/Icon.tsx @@ -198,10 +198,6 @@ export const IconWrapper = styled.span` display: flex; align-items: center; cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")}; - &:hover { - cursor: ${(props) => - props.disabled ? "not-allowed" : props.clickable ? "pointer" : "default"}; - } svg { width: ${(props) => sizeHandler(props.size)}px; height: ${(props) => sizeHandler(props.size)}px; @@ -418,12 +414,7 @@ const Icon = forwardRef( let loader = ; if (props.loaderWithIconWrapper) { loader = ( - + ); From 70c475f0494580f2ed70ceadecde08321eaa6093 Mon Sep 17 00:00:00 2001 From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com> Date: Thu, 28 Apr 2022 04:59:14 -0700 Subject: [PATCH 5/7] Update Icon.tsx --- app/client/src/components/ads/Icon.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/client/src/components/ads/Icon.tsx b/app/client/src/components/ads/Icon.tsx index 789f88f15a..8ee56754c9 100644 --- a/app/client/src/components/ads/Icon.tsx +++ b/app/client/src/components/ads/Icon.tsx @@ -197,7 +197,8 @@ export const IconWrapper = styled.span` display: flex; align-items: center; - cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")}; + cursor: ${(props) => + props.disabled ? "not-allowed" : props.clickable ? "pointer" : "default"}; svg { width: ${(props) => sizeHandler(props.size)}px; height: ${(props) => sizeHandler(props.size)}px; From 76b2e219f6e256b0c646dfef4d028d56d9353358 Mon Sep 17 00:00:00 2001 From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com> Date: Fri, 29 Apr 2022 02:22:28 +0100 Subject: [PATCH 6/7] fix: build issue --- app/client/src/components/ads/Icon.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/src/components/ads/Icon.tsx b/app/client/src/components/ads/Icon.tsx index 8ee56754c9..256549568e 100644 --- a/app/client/src/components/ads/Icon.tsx +++ b/app/client/src/components/ads/Icon.tsx @@ -197,7 +197,7 @@ export const IconWrapper = styled.span` display: flex; align-items: center; - cursor: ${(props) => + cursor: ${(props) => props.disabled ? "not-allowed" : props.clickable ? "pointer" : "default"}; svg { width: ${(props) => sizeHandler(props.size)}px; From 2f8c178dda51848791bcbabcb0e0a41df4643fa4 Mon Sep 17 00:00:00 2001 From: Tolulope Adetula <31691737+Tooluloope@users.noreply.github.com> Date: Wed, 11 May 2022 02:36:54 +0100 Subject: [PATCH 7/7] fix: Failing Tests --- app/client/src/pages/Editor/BottomBar/ManualUpgrades.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/app/client/src/pages/Editor/BottomBar/ManualUpgrades.tsx b/app/client/src/pages/Editor/BottomBar/ManualUpgrades.tsx index ca82f6604f..4e33b06d4f 100644 --- a/app/client/src/pages/Editor/BottomBar/ManualUpgrades.tsx +++ b/app/client/src/pages/Editor/BottomBar/ManualUpgrades.tsx @@ -248,7 +248,6 @@ function ManualUpgrades() { > {