Fix: Context switching UX issues (#18828)

* fix Property panel jitters on focus

* open widget entity on widget selection

* Remove retaining Datasources url on page change

* fix param string while restoring URLs

* add cypress test

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/IDE/Canvas_Context_Bug_Fixes.js

@@ -20,4 +20,19 @@ describe("Canvas context Property Pane", function() {
       2,
     );
   });
+
+  it("Bug Fix: widget explorer should automatically open on widget selection", () => {
+    cy.reload();
+    cy.CheckAndUnfoldEntityItem("Widgets");
+    //check it was originally not expanded
+    cy.get(`[data-guided-tour-id="explorer-entity-Image1"]`).should(
+      "not.exist",
+    );
+
+    cy.get(".t--widget-imagewidget")
+      .eq(0)
+      .click();
+    //check if the entities are not expanded
+    cy.get(`[data-guided-tour-id="explorer-entity-Image1"]`).should("exist");
+  });
 });

app/client/src/constants/PropertyControlConstants.tsx

@@ -94,7 +94,7 @@ export type PropertyPaneControlConfig = {
   postUpdateAction?: ReduxActionType;
   onBlur?: () => void;
   onFocus?: () => void;
-
+  isPanelProperty?: boolean;
   // Numeric Input Control
   min?: number;
 };

app/client/src/pages/Editor/Explorer/Entity/index.tsx

@@ -219,6 +219,7 @@ export type EntityProps = {
   isSticky?: boolean;
   collapseRef?: RefObject<HTMLDivElement> | null;
   customAddButton?: ReactNode;
+  forceExpand?: boolean;
 };
 
 export const Entity = forwardRef(
@@ -247,6 +248,10 @@ export const Entity = forwardRef(
       if (isEntityOpen !== undefined) open(isOpen);
     }, [props.name]);
 
+    useEffect(() => {
+      if (!!props.forceExpand) open(true);
+    }, [props.forceExpand]);
+
     /* eslint-enable react-hooks/exhaustive-deps */
     const toggleChildren = (e: any) => {
       props.onToggle && props.onToggle(!isOpen);

app/client/src/pages/Editor/Explorer/Widgets/WidgetEntity.tsx

@@ -85,7 +85,7 @@ export const WidgetEntity = memo((props: WidgetEntityProps) => {
   const icon = <WidgetIcon type={props.widgetType} />;
   const location = useLocation();
 
-  const shouldExpand = widgetsToExpand.includes(props.widgetId);
+  const forceExpand = widgetsToExpand.includes(props.widgetId);
 
   const pagePermissions = useSelector(getPagePermissions);
 
@@ -153,10 +153,10 @@ export const WidgetEntity = memo((props: WidgetEntityProps) => {
       className="widget"
       contextMenu={showContextMenu && contextMenu}
       entityId={props.widgetId}
+      forceExpand={forceExpand}
       highlight={lastSelectedWidget === props.widgetId}
       icon={icon}
       isDefaultExpanded={
-        shouldExpand ||
         (!!props.searchKeyword && !!props.childWidgets) ||
         !!props.isDefaultExpanded
       }

app/client/src/pages/Editor/PropertyPane/Generator.tsx

@@ -28,6 +28,7 @@ export type PropertyControlsGeneratorProps = {
   type: WidgetType;
   panel: IPanelProps;
   panelPropertyPath?: string;
+  isPanelProperty?: boolean;
   theme: EditorTheme;
   searchQuery?: string;
 };
@@ -114,6 +115,7 @@ const generatePropertyControl = (
           step={GUIDED_TOUR_STEPS.TABLE_WIDGET_BINDING}
         >
           <PropertyControl
+            isPanelProperty={!!props.isPanelProperty}
             key={config.id + props.id}
             {...(config as PropertyPaneControlConfig)}
             panel={props.panel}

app/client/src/pages/Editor/PropertyPane/PanelPropertiesEditor.tsx

@@ -198,6 +198,7 @@ export function PanelPropertiesEditor(
                   <PropertyControlsGenerator
                     config={panelConfigsWithStyleAndContent.content}
                     id={widgetProperties.widgetId}
+                    isPanelProperty
                     panel={panel}
                     panelPropertyPath={panelPropertyPath}
                     searchQuery={searchText}
@@ -215,6 +216,7 @@ export function PanelPropertiesEditor(
                   <PropertyControlsGenerator
                     config={panelConfigsWithStyleAndContent.style}
                     id={widgetProperties.widgetId}
+                    isPanelProperty
                     panel={panel}
                     panelPropertyPath={panelPropertyPath}
                     searchQuery={searchText}
@@ -232,6 +234,7 @@ export function PanelPropertiesEditor(
             <PropertyControlsGenerator
               config={panelConfigs}
               id={widgetProperties.widgetId}
+              isPanelProperty
               panel={panel}
               panelPropertyPath={panelPropertyPath}
               searchQuery={searchText}

app/client/src/pages/Editor/PropertyPane/PropertyControl.tsx

@@ -110,9 +110,9 @@ const PropertyControl = memo((props: Props) => {
   );
 
   useEffect(() => {
+    // This is required because layered panels like Column Panel have Animation of 300ms
+    const focusTimeout = props.isPanelProperty ? 300 : 0;
     if (shouldFocusPropertyPath) {
-      // We can get a code editor element as well, which will take time to load
-      // for that we setTimeout to 200 ms
       setTimeout(() => {
         if (shouldFocusOnPropertyControl(controlRef.current)) {
           const focusableElement = getPropertyControlFocusElement(
@@ -124,7 +124,7 @@ const PropertyControl = memo((props: Props) => {
           });
           focusableElement?.focus();
         }
-      }, 0);
+      }, focusTimeout);
     }
   }, [shouldFocusPropertyPath]);
   /**

app/client/src/sagas/NavigationSagas.ts

@@ -197,7 +197,10 @@ function* setStateOfPage(
       focusHistory.state._routingURL !== currPath &&
       isSameBranch(focusHistory.state._paramString, paramString)
     ) {
-      history.push(`${focusHistory.state._routingURL}${paramString || ""}`);
+      history.push(
+        `${focusHistory.state._routingURL}${focusHistory.state._paramString ||
+          ""}`,
+      );
     }
   } else {
     for (const selectorInfo of selectors) {