From 7f7e7bb6f3b3f6d83a71f8772147f8524892edfd Mon Sep 17 00:00:00 2001 From: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Date: Wed, 28 Jul 2021 14:48:21 +0530 Subject: [PATCH 1/7] [Feature] Click on widget will no longer open property pane --- .../designSystems/appsmith/PositionedContainer.tsx | 12 ++++++------ .../editorComponents/DraggableComponent.tsx | 6 ------ .../editorComponents/DropTargetComponent.tsx | 14 ++++++++------ .../editorComponents/ResizableComponent.tsx | 6 ++---- ...OpenPropPane.tsx => useClickToSelectWidget.tsx} | 11 +++-------- 5 files changed, 19 insertions(+), 30 deletions(-) rename app/client/src/utils/hooks/{useClickOpenPropPane.tsx => useClickToSelectWidget.tsx} (88%) diff --git a/app/client/src/components/designSystems/appsmith/PositionedContainer.tsx b/app/client/src/components/designSystems/appsmith/PositionedContainer.tsx index a6939fb721b4..e96396fc57ec 100644 --- a/app/client/src/components/designSystems/appsmith/PositionedContainer.tsx +++ b/app/client/src/components/designSystems/appsmith/PositionedContainer.tsx @@ -3,7 +3,7 @@ import { BaseStyle } from "widgets/BaseWidget"; import { WIDGET_PADDING } from "constants/WidgetConstants"; import { generateClassName } from "utils/generators"; import styled from "styled-components"; -import { useClickOpenPropPane } from "utils/hooks/useClickOpenPropPane"; +import { useClickToSelectWidget } from "utils/hooks/useClickToSelectWidget"; import { Layers } from "constants/Layers"; import { useSelector } from "react-redux"; import { snipingModeSelector } from "../../../selectors/editorSelectors"; @@ -27,7 +27,7 @@ export function PositionedContainer(props: PositionedContainerProps) { const x = props.style.xPosition + (props.style.xPositionUnit || "px"); const y = props.style.yPosition + (props.style.yPositionUnit || "px"); const padding = WIDGET_PADDING; - const openPropertyPane = useClickOpenPropPane(); + const clickToSelectWidget = useClickToSelectWidget(); const isSnipingMode = useSelector(snipingModeSelector); // memoized classname const containerClassName = useMemo(() => { @@ -56,11 +56,11 @@ export function PositionedContainer(props: PositionedContainerProps) { }; }, [props.style]); - const openPropPane = useCallback( + const onClickFn = useCallback( (e) => { - openPropertyPane(e, props.widgetId); + clickToSelectWidget(e, props.widgetId); }, - [props.widgetId, openPropertyPane], + [props.widgetId, clickToSelectWidget], ); // TODO: Experimental fix for sniping mode. This should be handled with a single event @@ -76,7 +76,7 @@ export function PositionedContainer(props: PositionedContainerProps) { key={`positioned-container-${props.widgetId}`} onClick={stopEventPropagation} // Positioned Widget is the top enclosure for all widgets and clicks on/inside the widget should not be propogated/bubbled out of this Container. - onClickCapture={openPropPane} + onClickCapture={onClickFn} //Before you remove: This is used by property pane to reference the element style={containerStyle} > diff --git a/app/client/src/components/editorComponents/DraggableComponent.tsx b/app/client/src/components/editorComponents/DraggableComponent.tsx index 1c2e0f317df7..a21d16fa1a87 100644 --- a/app/client/src/components/editorComponents/DraggableComponent.tsx +++ b/app/client/src/components/editorComponents/DraggableComponent.tsx @@ -7,7 +7,6 @@ import { useSelector } from "react-redux"; import { AppState } from "reducers"; import { getColorWithOpacity } from "constants/DefaultTheme"; import { - useShowPropertyPane, useShowTableFilterPane, useWidgetDragResize, } from "utils/hooks/dragResizeHooks"; @@ -67,7 +66,6 @@ export const canDrag = ( function DraggableComponent(props: DraggableComponentProps) { // Dispatch hook handy to toggle property pane - const showPropertyPane = useShowPropertyPane(); const showTableFilterPane = useShowTableFilterPane(); // Dispatch hook handy to set a widget as focused/selected @@ -128,7 +126,6 @@ function DraggableComponent(props: DraggableComponentProps) { showTableFilterPane && showTableFilterPane(); // Tell the rest of the application that a widget has started dragging setIsDragging && setIsDragging(true); - AnalyticsUtil.logEvent("WIDGET_DRAG", { widgetName: props.widgetName, widgetType: props.type, @@ -140,9 +137,6 @@ function DraggableComponent(props: DraggableComponentProps) { // of the property pane is taken into account. // See utils/hooks/dragResizeHooks.tsx const didDrop = monitor.didDrop(); - if (didDrop) { - showPropertyPane && showPropertyPane(props.widgetId, undefined, true); - } // Take this to the bottom of the stack. So that it runs last. // We do this because, we don't want erroraneous mouse clicks to propagate. setTimeout(() => setIsDragging && setIsDragging(false), 0); diff --git a/app/client/src/components/editorComponents/DropTargetComponent.tsx b/app/client/src/components/editorComponents/DropTargetComponent.tsx index 3409b596c622..288baa3ec0d8 100644 --- a/app/client/src/components/editorComponents/DropTargetComponent.tsx +++ b/app/client/src/components/editorComponents/DropTargetComponent.tsx @@ -191,16 +191,18 @@ export function DropTargetComponent(props: DropTargetComponentProps) { // Only show propertypane if this is a new widget. // If it is not a new widget, then let the DraggableComponent handle it. // Give evaluations a second to complete. - setTimeout(() => { - if (showPropertyPane && updateWidgetParams.payload.newWidgetId) { - showPropertyPane(updateWidgetParams.payload.newWidgetId); - // toggleEditWidgetName(updateWidgetParams.payload.newWidgetId, true); - } - }, 100); // Select the widget if it is a new widget selectWidget && selectWidget(widget.widgetId); persistDropTargetRows(widget.widgetId, widgetBottomRow); + if (updateWidgetParams.payload.newWidgetId) { + setTimeout(() => { + showPropertyPane(updateWidgetParams.payload.newWidgetId); + // toggleEditWidgetName(updateWidgetParams.payload.newWidgetId, true); + }, 100); + } else { + showPropertyPane(); + } /* Finally update the widget */ updateWidget && diff --git a/app/client/src/components/editorComponents/ResizableComponent.tsx b/app/client/src/components/editorComponents/ResizableComponent.tsx index f39c4a31a3c5..e27c5edc5259 100644 --- a/app/client/src/components/editorComponents/ResizableComponent.tsx +++ b/app/client/src/components/editorComponents/ResizableComponent.tsx @@ -235,10 +235,8 @@ export const ResizableComponent = memo(function ResizableComponent( selectWidget && selectedWidget !== props.widgetId && selectWidget(props.widgetId); - // Let the propertypane show. - // The propertypane decides whether to show itself, based on - // whether it was showing when the widget resize started. - showPropertyPane && showPropertyPane(props.widgetId, undefined, true); + // Property pane closes after a resize/drag + showPropertyPane && showPropertyPane(); AnalyticsUtil.logEvent("WIDGET_RESIZE_END", { widgetName: props.widgetName, diff --git a/app/client/src/utils/hooks/useClickOpenPropPane.tsx b/app/client/src/utils/hooks/useClickToSelectWidget.tsx similarity index 88% rename from app/client/src/utils/hooks/useClickOpenPropPane.tsx rename to app/client/src/utils/hooks/useClickToSelectWidget.tsx index 0f9ef6ca63e7..22060ce62fbb 100644 --- a/app/client/src/utils/hooks/useClickOpenPropPane.tsx +++ b/app/client/src/utils/hooks/useClickToSelectWidget.tsx @@ -1,5 +1,4 @@ import { get } from "lodash"; -import { useShowPropertyPane } from "utils/hooks/dragResizeHooks"; import { getCurrentWidgetId, getIsPropertyPaneVisible, @@ -50,8 +49,7 @@ export function getParentToOpenIfAny( return; } -export const useClickOpenPropPane = () => { - const showPropertyPane = useShowPropertyPane(); +export const useClickToSelectWidget = () => { const { focusWidget, selectWidget } = useWidgetSelection(); const isPropPaneVisible = useSelector(getIsPropertyPaneVisible); const isTableFilterPaneVisible = useSelector(getIsTableFilterPaneVisible); @@ -72,7 +70,7 @@ export const useClickOpenPropPane = () => { ); const parentWidgetToOpen = getParentToOpenIfAny(focusedWidgetId, widgets); - const openPropertyPane = (e: any, targetWidgetId: string) => { + const clickToSelectWidget = (e: any, targetWidgetId: string) => { // ignore click captures // 1. if the component was resizing or dragging coz it is handled internally in draggable component // 2. table filter property pane is open @@ -93,12 +91,9 @@ export const useClickOpenPropPane = () => { if (parentWidgetToOpen) { selectWidget(parentWidgetToOpen.widgetId, isMultiSelect); focusWidget(parentWidgetToOpen.widgetId); - !isMultiSelect && - showPropertyPane(parentWidgetToOpen.widgetId, undefined, true); } else { selectWidget(focusedWidgetId, isMultiSelect); focusWidget(focusedWidgetId); - !isMultiSelect && showPropertyPane(focusedWidgetId, undefined, true); } if (isMultiSelect) { @@ -106,5 +101,5 @@ export const useClickOpenPropPane = () => { } } }; - return openPropertyPane; + return clickToSelectWidget; }; From 56a97e80ae15cbab9b94343abea064ebda847d3e Mon Sep 17 00:00:00 2001 From: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Date: Thu, 29 Jul 2021 18:58:10 +0530 Subject: [PATCH 2/7] fixing test cases --- app/client/src/pages/Editor/GlobalHotKeys.test.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) diff --git a/app/client/src/pages/Editor/GlobalHotKeys.test.tsx b/app/client/src/pages/Editor/GlobalHotKeys.test.tsx index d41450dd8e79..04c70a76a2a4 100644 --- a/app/client/src/pages/Editor/GlobalHotKeys.test.tsx +++ b/app/client/src/pages/Editor/GlobalHotKeys.test.tsx @@ -78,10 +78,15 @@ describe("Select all hotkey", () => { expect(propPane).toBeNull(); const canvasWidgets = component.queryAllByTestId("test-widget"); expect(canvasWidgets.length).toBe(2); - if (canvasWidgets[1].firstChild) { - fireEvent.mouseOver(canvasWidgets[1].firstChild); - fireEvent.click(canvasWidgets[1].firstChild); - } + act(() => { + if (canvasWidgets[0].firstChild) { + fireEvent.mouseOver(canvasWidgets[0].firstChild); + } + }); + const tabsWidgetName: any = component.container.querySelector( + `span.t--widget-name`, + ); + fireEvent.click(tabsWidgetName); propPane = component.queryByTestId("t--propertypane"); expect(propPane).not.toBeNull(); From 19fd511d828d9ca00188cc2d637f5e87c0bccbad Mon Sep 17 00:00:00 2001 From: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Date: Thu, 29 Jul 2021 19:27:41 +0530 Subject: [PATCH 3/7] coverage fixes --- app/client/src/pages/Editor/GlobalHotKeys.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/client/src/pages/Editor/GlobalHotKeys.test.tsx b/app/client/src/pages/Editor/GlobalHotKeys.test.tsx index 04c70a76a2a4..182e05f6598b 100644 --- a/app/client/src/pages/Editor/GlobalHotKeys.test.tsx +++ b/app/client/src/pages/Editor/GlobalHotKeys.test.tsx @@ -81,6 +81,7 @@ describe("Select all hotkey", () => { act(() => { if (canvasWidgets[0].firstChild) { fireEvent.mouseOver(canvasWidgets[0].firstChild); + fireEvent.click(canvasWidgets[0].firstChild); } }); const tabsWidgetName: any = component.container.querySelector( From 1a5a955abefa17eddf6695dd9ca1189e18966804 Mon Sep 17 00:00:00 2001 From: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Date: Mon, 9 Aug 2021 14:56:27 +0530 Subject: [PATCH 4/7] fixing imports. --- .../src/components/editorComponents/ResizableComponent.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/src/components/editorComponents/ResizableComponent.tsx b/app/client/src/components/editorComponents/ResizableComponent.tsx index 861ae6bae3c0..02f0f4cad49e 100644 --- a/app/client/src/components/editorComponents/ResizableComponent.tsx +++ b/app/client/src/components/editorComponents/ResizableComponent.tsx @@ -41,9 +41,9 @@ import { getNearestParentCanvas } from "utils/generators"; import { commentModeSelector } from "selectors/commentsSelectors"; import { snipingModeSelector } from "selectors/editorSelectors"; import { useWidgetSelection } from "utils/hooks/useWidgetSelection"; -import { getParentToOpenIfAny } from "utils/hooks/useClickOpenPropPane"; import { getCanvasWidgets } from "selectors/entitiesSelector"; import { focusWidget } from "actions/widgetActions"; +import { getParentToOpenIfAny } from "utils/hooks/useClickToSelectWidget"; export type ResizableComponentProps = WidgetProps & { paddingOffset: number; From 3f4dce02f04d812f8c7c1b376f5b64ce5344a541 Mon Sep 17 00:00:00 2001 From: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Date: Wed, 18 Aug 2021 11:02:31 +0530 Subject: [PATCH 5/7] fixing build failure. --- app/client/src/widgets/ModalWidget.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/client/src/widgets/ModalWidget.tsx b/app/client/src/widgets/ModalWidget.tsx index cabfd9436f66..0112ab4f1f40 100644 --- a/app/client/src/widgets/ModalWidget.tsx +++ b/app/client/src/widgets/ModalWidget.tsx @@ -17,7 +17,7 @@ import * as Sentry from "@sentry/react"; import withMeta, { WithMeta } from "./MetaHOC"; import { AppState } from "reducers"; import { getWidget } from "sagas/selectors"; -import { ClickContentToOpenPropPane } from "utils/hooks/useClickOpenPropPane"; +import { ClickContentToOpenPropPane } from "utils/hooks/useClickToSelectWidget"; const MODAL_SIZE: { [id: string]: { width: number; height: number } } = { MODAL_SMALL: { From 8c2acae4b275eee78f228f2776f31493130a7791 Mon Sep 17 00:00:00 2001 From: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Date: Wed, 18 Aug 2021 12:52:00 +0530 Subject: [PATCH 6/7] fixing new specs --- .../Smoke_TestSuite/ClientSideTests/Debugger/Logs_spec.js | 1 + .../DisplayWidgets/Table_Property_JsonUpdate_spec.js | 1 + 2 files changed, 2 insertions(+) diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Debugger/Logs_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Debugger/Logs_spec.js index d71d5f3fbbb2..ed4aca071a3a 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Debugger/Logs_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/Debugger/Logs_spec.js @@ -11,6 +11,7 @@ describe("Debugger logs", function() { cy.get("button") .contains("Submit") .click({ force: true }); + cy.openPropertyPane("buttonwidget"); cy.testJsontext("label", "Test"); cy.get(".t--debugger").click(); cy.get(".t--debugger-log-state").contains("Test"); diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Property_JsonUpdate_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Property_JsonUpdate_spec.js index 42509006f4f3..13eaf2231887 100644 --- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Property_JsonUpdate_spec.js +++ b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Table_Property_JsonUpdate_spec.js @@ -54,6 +54,7 @@ describe("Test Create Api and Bind to Table widget", function() { it("Check Selected Row(s) Resets When Table Data Changes", function() { cy.isSelectRow(1); + cy.openPropertyPane("tablewidget"); cy.testJsontext("tabledata", "[]"); cy.wait("@updateLayout"); const newTableData = [...this.data.TableInput]; From 7fec7364b9f90b7bcaf9337c2e3b1bfcfe92af76 Mon Sep 17 00:00:00 2001 From: Ashok Kumar M <35134347+marks0351@users.noreply.github.com> Date: Thu, 19 Aug 2021 12:25:37 +0530 Subject: [PATCH 7/7] clear property pane state for any new selection. --- app/client/src/utils/hooks/useClickToSelectWidget.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/client/src/utils/hooks/useClickToSelectWidget.tsx b/app/client/src/utils/hooks/useClickToSelectWidget.tsx index 74b19bb41d60..8340a83fd5df 100644 --- a/app/client/src/utils/hooks/useClickToSelectWidget.tsx +++ b/app/client/src/utils/hooks/useClickToSelectWidget.tsx @@ -14,6 +14,7 @@ import { getWidgets } from "sagas/selectors"; import { useWidgetSelection } from "./useWidgetSelection"; import React, { ReactNode, useCallback } from "react"; import { stopEventPropagation } from "utils/AppsmithUtils"; +import { useShowPropertyPane } from "./dragResizeHooks"; /** * @@ -101,6 +102,7 @@ export function ClickContentToOpenPropPane({ export const useClickToSelectWidget = () => { const { focusWidget, selectWidget } = useWidgetSelection(); + const showPropertyPane = useShowPropertyPane(); const isPropPaneVisible = useSelector(getIsPropertyPaneVisible); const isTableFilterPaneVisible = useSelector(getIsTableFilterPaneVisible); const widgets: CanvasWidgetsReduxState = useSelector(getWidgets); @@ -144,7 +146,7 @@ export const useClickToSelectWidget = () => { selectWidget(focusedWidgetId, isMultiSelect); focusWidget(focusedWidgetId); } - + showPropertyPane(); if (isMultiSelect) { e.stopPropagation(); }