Stars: Fix starred state not being updated (#111936)

* Stars: Fix starred state not being updated

* Legacy fallback

* Improve name

public/app/features/dashboard-scene/scene/DashboardScene.tsx

@@ -589,13 +589,14 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> impleme
     this.setState({ overlay: undefined });
   }
 
-  public async onStarDashboard() {
+  public async onStarDashboard(isStarred?: boolean) {
     const { meta, uid } = this.state;
+    isStarred = isStarred ?? Boolean(meta.isStarred);
     if (!uid) {
       return;
     }
     try {
-      const result = await getDashboardSrv().starDashboard(uid, Boolean(meta.isStarred));
+      const result = await getDashboardSrv().starDashboard(uid, isStarred);
 
       this.setState({
         meta: {

public/app/features/stars/StarToolbarButton.tsx

@@ -1,8 +1,9 @@
 import { useMemo } from 'react';
+import { useAsyncRetry } from 'react-use';
 
 import { selectors } from '@grafana/e2e-selectors';
 import { t } from '@grafana/i18n';
-import { config } from '@grafana/runtime';
+import { config, getBackendSrv } from '@grafana/runtime';
 import { Icon, ToolbarButton } from '@grafana/ui';
 import { useAddStarMutation, useRemoveStarMutation, useListStarsQuery } from 'app/api/clients/preferences/v1alpha1';
 import { contextSrv } from 'app/core/core';
@@ -63,18 +64,29 @@ export function StarToolbarButtonApiServer({ group, kind, id }: Pick<Props, 'gro
 }
 
 function StarToolbarButtonLegacy({ dashboard }: { dashboard: Props['dashboard'] }) {
-  const { meta } = dashboard.useState();
+  const { meta, uid: uidFromState } = dashboard.useState();
-  const isStarred = Boolean(meta.isStarred);
+  // uidFromState is used for legacy dashboards (kubernetesDashboards toggle is off)
+  const uid = meta.uid || meta.k8s?.name || uidFromState;
   const tooltips = getStarTooltips();
 
+  const { value: starredUids, retry } = useAsyncRetry(async () => {
+    return getBackendSrv().get('api/user/stars');
+  });
+
+  if (!starredUids || !uid) {
+    return null;
+  }
+
+  const isStarred = starredUids?.includes(uid);
   return (
     <ToolbarButton
       tooltip={isStarred ? tooltips.unstar : tooltips.star}
       icon={<Icon name={isStarred ? 'favorite' : 'star'} size="lg" type={isStarred ? 'mono' : 'default'} />}
       data-testid={selectors.components.NavToolbar.markAsFavorite}
-      onClick={() => {
+      onClick={async () => {
         DashboardInteractions.toolbarFavoritesClick();
-        dashboard.onStarDashboard();
+        await dashboard.onStarDashboard(isStarred);
+        retry();
       }}
     />
   );