fix(dashboards): Starred dashboards not changing in navbar

static/app/actionCreators/dashboards.tsx

@@ -8,6 +8,7 @@ import PageFiltersStore from 'sentry/stores/pageFiltersStore';
 import type {PageFilters} from 'sentry/types/core';
 import {defined} from 'sentry/utils';
 import {TOP_N} from 'sentry/utils/discover/types';
+import type {QueryClient} from 'sentry/utils/queryClient';
 import {
   type DashboardDetails,
   type DashboardListItem,
@@ -103,6 +104,7 @@ export function updateDashboardVisit(
 
 export async function updateDashboardFavorite(
   api: Client,
+  queryClient: QueryClient,
   orgId: string,
   dashboardId: string | string[],
   isFavorited: boolean
@@ -117,6 +119,12 @@ export async function updateDashboardFavorite(
         },
       }
     );
+    queryClient.invalidateQueries({
+      queryKey: [
+        `/organizations/${orgId}/dashboards/`,
+        {query: {filter: 'onlyFavorites'}},
+      ],
+    });
     addSuccessMessage(isFavorited ? t('Added as favorite') : t('Removed as favorite'));
   } catch (response) {
     const errorResponse = response?.responseJSON ?? null;

static/app/views/dashboards/controls.tsx

@@ -16,6 +16,7 @@ import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';
 import {trackAnalytics} from 'sentry/utils/analytics';
+import {useQueryClient} from 'sentry/utils/queryClient';
 import useApi from 'sentry/utils/useApi';
 import useOrganization from 'sentry/utils/useOrganization';
 import {useUser} from 'sentry/utils/useUser';
@@ -62,7 +63,7 @@ function Controls({
   onAddWidgetFromNewWidgetBuilder,
 }: Props) {
   const [isFavorited, setIsFavorited] = useState(dashboard.isFavorited);
-
+  const queryClient = useQueryClient();
   function renderCancelButton(label = t('Cancel')) {
     return (
       <Button
@@ -214,6 +215,7 @@ function Controls({
                       setIsFavorited(!isFavorited);
                       await updateDashboardFavorite(
                         api,
+                        queryClient,
                         organization.slug,
                         dashboard.id,
                         !isFavorited

static/app/views/dashboards/manage/dashboardGrid.tsx

@@ -23,6 +23,7 @@ import {t, tn} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';
 import {trackAnalytics} from 'sentry/utils/analytics';
+import {useQueryClient} from 'sentry/utils/queryClient';
 import withApi from 'sentry/utils/withApi';
 import {
   DASHBOARD_CARD_GRID_PADDING,
@@ -55,6 +56,7 @@ function DashboardGrid({
   columnCount,
   isLoading,
 }: Props) {
+  const queryClient = useQueryClient();
   // this acts as a cache for the dashboards being passed in. It preserves the previously populated dashboard list
   // to be able to show the 'previous' dashboards on resize
   const [currentDashboards, setCurrentDashboards] = useState<
@@ -102,7 +104,13 @@ function DashboardGrid({
   }
 
   async function handleFavorite(dashboard: DashboardListItem, isFavorited: boolean) {
-    await updateDashboardFavorite(api, organization.slug, dashboard.id, isFavorited);
+    await updateDashboardFavorite(
+      api,
+      queryClient,
+      organization.slug,
+      dashboard.id,
+      isFavorited
+    );
     onDashboardsChange();
     trackAnalytics('dashboards_manage.toggle_favorite', {
       organization,

static/app/views/dashboards/manage/dashboardTable.tsx

@@ -29,6 +29,7 @@ import {t} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
 import type {Organization} from 'sentry/types/organization';
 import {trackAnalytics} from 'sentry/utils/analytics';
+import {useQueryClient} from 'sentry/utils/queryClient';
 import {decodeScalar} from 'sentry/utils/queryString';
 import withApi from 'sentry/utils/withApi';
 import EditAccessSelector from 'sentry/views/dashboards/editAccessSelector';
@@ -78,6 +79,7 @@ function FavoriteButton({
   dashboardId,
   onDashboardsChange,
 }: FavoriteButtonProps) {
+  const queryClient = useQueryClient();
   const [favorited, setFavorited] = useState(isFavorited);
   return (
     <Button
@@ -95,7 +97,13 @@ function FavoriteButton({
       onClick={async () => {
         try {
           setFavorited(!favorited);
-          await updateDashboardFavorite(api, organization.slug, dashboardId, !favorited);
+          await updateDashboardFavorite(
+            api,
+            queryClient,
+            organization.slug,
+            dashboardId,
+            !favorited
+          );
           onDashboardsChange();
           trackAnalytics('dashboards_manage.toggle_favorite', {
             organization,

static/app/views/dashboards/manage/index.tsx

@@ -1,6 +1,5 @@
 import {useEffect, useRef, useState} from 'react';
 import styled from '@emotion/styled';
-import {useQueryClient} from '@tanstack/react-query';
 import type {Query} from 'history';
 import debounce from 'lodash/debounce';
 import pick from 'lodash/pick';
@@ -95,7 +94,6 @@ function ManageDashboards() {
   const api = useApi();
   const dashboardGridRef = useRef<HTMLDivElement>(null);
   const prefersStackedNav = usePrefersStackedNav();
-  const queryClient = useQueryClient();
 
   const [showTemplates, setShowTemplatesLocal] = useLocalStorageState(
     SHOW_TEMPLATES_KEY,
@@ -225,21 +223,6 @@ function ManageDashboards() {
     });
   };
 
-  const handleDashboardsChange = () => {
-    refetchDashboards();
-
-    // We also need to invalidate the cache for the query that is used by the
-    // <DashboardsSecondaryNav /> component ('static/app/views/dashboards/navigation.tsx').
-    // Otherwise, the starred / unstarred dashboards will not be reflected in the navigation
-    // before a full page reload.
-    queryClient.invalidateQueries({
-      queryKey: [
-        `/organizations/${organization.slug}/dashboards/`,
-        {query: {filter: 'onlyFavorites'}},
-      ],
-    });
-  };
-
   const toggleTemplates = () => {
     trackAnalytics('dashboards_manage.templates.toggle', {
       organization,
@@ -336,7 +319,7 @@ function ManageDashboards() {
         dashboards={dashboards}
         organization={organization}
         location={location}
-        onDashboardsChange={handleDashboardsChange}
+        onDashboardsChange={() => refetchDashboards()}
         isLoading={isLoading}
         rowCount={rowCount}
         columnCount={columnCount}
@@ -347,7 +330,7 @@ function ManageDashboards() {
         dashboards={dashboards}
         organization={organization}
         location={location}
-        onDashboardsChange={handleDashboardsChange}
+        onDashboardsChange={() => refetchDashboards()}
         isLoading={isLoading}
       />
     );