From c925bf2efd295ac6b577800aef68a797f15374dd Mon Sep 17 00:00:00 2001
From: arunvjn <32433245+arunvjn@users.noreply.github.com>
Date: Wed, 20 Apr 2022 21:55:55 +0530
Subject: [PATCH] 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.
---
 .../ClientSideTests/DisplayWidgets/Modal_spec.js       |  5 +++++
 app/client/src/pages/Editor/Explorer/Entity/index.tsx  |  3 +++
 app/client/src/pages/Editor/Explorer/Files/index.tsx   | 10 +++++++++-
 app/client/src/sagas/ModalSagas.ts                     | 10 ++++++++++
 4 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Modal_spec.js b/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Modal_spec.js
index de525fe1f4..654870e087 100644
--- a/app/client/cypress/integration/Smoke_TestSuite/ClientSideTests/DisplayWidgets/Modal_spec.js
+++ b/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", () => {
diff --git a/app/client/src/pages/Editor/Explorer/Entity/index.tsx b/app/client/src/pages/Editor/Explorer/Entity/index.tsx
index be72e470ce..ac869c12a2 100644
--- a/app/client/src/pages/Editor/Explorer/Entity/index.tsx
+++ b/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} {
diff --git a/app/client/src/pages/Editor/Explorer/Files/index.tsx b/app/client/src/pages/Editor/Explorer/Files/index.tsx
index 2384639955..3f4b0c7d97 100644
--- a/app/client/src/pages/Editor/Explorer/Files/index.tsx
+++ b/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);
diff --git a/app/client/src/sagas/ModalSagas.ts b/app/client/src/sagas/ModalSagas.ts
index 75dbfda894..af6b469f41 100644
--- a/app/client/src/sagas/ModalSagas.ts
+++ b/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 },