Implement autofocus when opening a dashboard

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

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,

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;

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