fix(dashboards): Starred dashboards not changing in navbar (#90338)

Before, starring a dashboard on the manage dashboards page would show
changes in the nav bar but if it was favourited anywhere else it would
not. I've moved the logic to clear the api query cache to the
`updateDashboardFavorite` function so that the cache is cleared every
time a favourite dashboard is updated. As long as this function is being
used to update the favourites, the navbar will show the changes. (This
function is being used to update favourites in all places afaik)

Author: nikkikapadia

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}
       />
     );