From 687ae58b0e4e5565dbda19575a83004e9f6e5f11 Mon Sep 17 00:00:00 2001
From: "Michael S. Molina" <michael.s.molina@gmail.com>
Date: Thu, 6 Oct 2022 11:02:51 -0300
Subject: [PATCH] Implement autofocus when opening a dashboard

---
 .../src/dashboard/actions/hydrate.js          | 21 ++++++++++++++++++-
 .../dashboard/containers/DashboardPage.tsx    |  3 +++
 .../DashboardsSubMenu.tsx                     |  8 ++++++-
 .../useExploreAdditionalActionsMenu/index.jsx |  5 ++++-
 4 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/superset-frontend/src/dashboard/actions/hydrate.js b/superset-frontend/src/dashboard/actions/hydrate.js
index 4422165a0ab5b..b2022c05e2121 100644
--- a/superset-frontend/src/dashboard/actions/hydrate.js
+++ b/superset-frontend/src/dashboard/actions/hydrate.js
@@ -62,6 +62,7 @@ export const HYDRATE_DASHBOARD = 'HYDRATE_DASHBOARD';
 
 export const hydrateDashboard =
   ({
+    history,
     dashboard,
     charts,
     filterboxMigrationState = FILTER_BOX_MIGRATION_STATES.NOOP,
@@ -291,8 +292,26 @@ export const hydrateDashboard =
       future: [],
     };
 
+    // Searches for a focused_chart parameter in the URL to automatically focus a chart
+    const { focused_chart: focusedChartId } = regularUrlParams;
+    let focusedChartLayoutId;
+    if (focusedChartId) {
+      // Converts focused_chart to dashboard layout id
+      const found = Object.values(dashboardLayout.present).find(
+        // eslint-disable-next-line eqeqeq
+        element => element.meta?.chartId == focusedChartId,
+      );
+      focusedChartLayoutId = found?.id;
+      // Removes the focused_chart parameter from the URL
+      const params = new URLSearchParams(window.location.search);
+      params.delete('focused_chart');
+      history.replace({
+        search: params.toString(),
+      });
+    }
+
     // find direct link component and path from root
-    const directLinkComponentId = getLocationHash();
+    const directLinkComponentId = focusedChartLayoutId || getLocationHash();
     let directPathToChild = dashboardState.directPathToChild || [];
     if (layout[directLinkComponentId]) {
       directPathToChild = (layout[directLinkComponentId].parents || []).slice();
diff --git a/superset-frontend/src/dashboard/containers/DashboardPage.tsx b/superset-frontend/src/dashboard/containers/DashboardPage.tsx
index 17097b6c1c800..598ed3e6e3877 100644
--- a/superset-frontend/src/dashboard/containers/DashboardPage.tsx
+++ b/superset-frontend/src/dashboard/containers/DashboardPage.tsx
@@ -17,6 +17,7 @@
  * under the License.
  */
 import React, { FC, useEffect, useMemo, useRef, useState } from 'react';
+import { useHistory } from 'react-router-dom';
 import {
   CategoricalColorNamespace,
   FeatureFlag,
@@ -155,6 +156,7 @@ const useSyncDashboardStateWithLocalStorage = () => {
 export const DashboardPage: FC<PageProps> = ({ idOrSlug }: PageProps) => {
   const dispatch = useDispatch();
   const theme = useTheme();
+  const history = useHistory();
   const user = useSelector<any, UserWithPermissionsAndRoles>(
     state => state.user,
   );
@@ -301,6 +303,7 @@ export const DashboardPage: FC<PageProps> = ({ idOrSlug }: PageProps) => {
         }
         dispatch(
           hydrateDashboard({
+            history,
             dashboard,
             charts,
             activeTabs,
diff --git a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/DashboardsSubMenu.tsx b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/DashboardsSubMenu.tsx
index 8dc0b0c2b15fc..922c65a86d7c7 100644
--- a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/DashboardsSubMenu.tsx
+++ b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/DashboardsSubMenu.tsx
@@ -24,6 +24,7 @@ import { Menu } from 'src/components/Menu';
 import { Link } from 'react-router-dom';
 
 export interface DashboardsSubMenuProps {
+  chartId?: number;
   dashboards?: { id: number; dashboard_title: string }[];
 }
 
@@ -32,6 +33,7 @@ const HEIGHT = 300;
 const SEARCH_THRESHOLD = 10;
 
 const DashboardsSubMenu = ({
+  chartId,
   dashboards = [],
   ...menuProps
 }: DashboardsSubMenuProps) => {
@@ -48,6 +50,7 @@ const DashboardsSubMenu = ({
   );
   const noResults = dashboards.length === 0;
   const noResultsFound = dashboardSearch && filteredDashboards.length === 0;
+  const urlQueryString = chartId ? `?focused_chart=${chartId}` : '';
   return (
     <>
       {showSearch && (
@@ -80,7 +83,10 @@ const DashboardsSubMenu = ({
             }}
             {...menuProps}
           >
-            <Link target="_blank" to={`/superset/dashboard/${dashboard.id}`}>
+            <Link
+              target="_blank"
+              to={`/superset/dashboard/${dashboard.id}${urlQueryString}`}
+            >
               <div
                 css={css`
                   display: flex;
diff --git a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx
index e7c661ffe74bc..fa794e871ce57 100644
--- a/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx
+++ b/superset-frontend/src/explore/components/useExploreAdditionalActionsMenu/index.jsx
@@ -259,7 +259,10 @@ export const useExploreAdditionalActionsMenu = (
             title={t('Dashboards added to')}
             key={MENU_KEYS.DASHBOARDS_ADDED_TO}
           >
-            <DashboardsSubMenu dashboards={dashboards} />
+            <DashboardsSubMenu
+              chartId={slice?.slice_id}
+              dashboards={dashboards}
+            />
           </Menu.SubMenu>
           <Menu.Divider />
         </>