fix: scroll to active entity in explorer on route change (#13085)

* Scroll to active entity in explorer on route change

* Removes scroll animation

* Open modal via entity explorer

* Try tonavigate to canvas only in edit mode

* Added cypress to assert modals' presence when triggered from the API page.

app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Modal_spec.js

@@ -20,6 +20,11 @@ describe("Modal Widget Functionality", function() {
       .click();
     cy.get(".t--entity-name:contains(Modal1)").click();
     cy.get(".t--modal-widget").should("exist");
+
+    cy.CreateAPI("FirstAPI");
+
+    cy.get(".t--entity-name:contains(Modal1)").click();
+    cy.get(".t--modal-widget").should("exist");
   });
 
   it("3. Display toast on close action", () => {

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

@@ -96,6 +96,9 @@ export const EntityItem = styled.div<{
     background: ${Colors.GREY_2};
   }
 
+  scroll-margin-top: 36px;
+  scroll-snap-margin-top: 36px;
+
   & .${EntityClassNames.TOOLTIP} {
     ${entityTooltipCSS}
     .${Classes.POPOVER_TARGET} {

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo } from "react";
+import React, { useCallback, useEffect, useMemo } from "react";
 import { useActiveAction } from "../hooks";
 import { Entity } from "../Entity/index";
 import {
@@ -45,6 +45,14 @@ function Files() {
 
   const activeActionId = useActiveAction();
 
+  useEffect(() => {
+    if (!activeActionId) return;
+    document.getElementById(`entity-${activeActionId}`)?.scrollIntoView({
+      block: "nearest",
+      inline: "nearest",
+    });
+  }, [activeActionId]);
+
   const onFilesToggle = useCallback(
     (isOpen: boolean) => {
       saveExplorerStatus(applicationId, "queriesAndJs", isOpen);

app/client/src/sagas/ModalSagas.ts

@@ -46,6 +46,10 @@ import AppsmithConsole from "utils/AppsmithConsole";
 import WidgetFactory from "utils/WidgetFactory";
 import { Toaster } from "components/ads/Toast";
 import { deselectAllInitAction } from "actions/widgetSelectionActions";
+import { navigateToCanvas } from "pages/Editor/Explorer/Widgets/utils";
+import { getCurrentPageId } from "selectors/editorSelectors";
+import { APP_MODE } from "entities/App";
+import { getAppMode } from "selectors/applicationSelectors";
 const WidgetTypes = WidgetFactory.widgetTypes;
 
 export function* createModalSaga(action: ReduxAction<{ modalName: string }>) {
@@ -129,6 +133,12 @@ export function* showModalSaga(action: ReduxAction<{ modalId: string }>) {
     },
   });
 
+  const pageId: string = yield select(getCurrentPageId);
+  const appMode: APP_MODE = yield select(getAppMode);
+
+  if (appMode === APP_MODE.EDIT)
+    navigateToCanvas({ pageId, widgetId: action.payload.modalId });
+
   yield put({
     type: ReduxActionTypes.SELECT_WIDGET_INIT,
     payload: { widgetId: action.payload.modalId },