[Feature] Click on widget will no longer open property pane

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}
     >

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

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 &&

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,

app/client/src/pages/Editor/GlobalHotKeys.test.tsx

@@ -78,10 +78,16 @@ 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);
+        fireEvent.click(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();
 

app/client/src/utils/hooks/useClickOpenPropPane.tsx → 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,18 +91,15 @@ 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) {
         e.stopPropagation();
       }
     }
   };
-  return openPropertyPane;
+  return clickToSelectWidget;
 };