[v11.1.x] Fix panel paste button in nav toolbar (#90147)

* Fix panel paste button in nav toolbar (#90143)

fix panel paste button in nav toolbar

(cherry picked from commit f88bf474bd)

* modify store import

---------

Co-authored-by: Victor Marin <36818606+mdvictor@users.noreply.github.com>
Co-authored-by: Victor Marin <victor.marin@grafana.com>

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

@@ -14,6 +14,8 @@ import {
 } from '@grafana/scenes';
 import { Dashboard, DashboardCursorSync, LibraryPanel } from '@grafana/schema';
 import appEvents from 'app/core/app_events';
+import { LS_PANEL_COPY_KEY } from 'app/core/constants';
+import store from 'app/core/store';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 import { VariablesChanged } from 'app/features/variables/types';
 
@@ -606,7 +608,7 @@ describe('DashboardScene', () => {
 
         scene.copyPanel(vizPanel);
 
-        expect(scene.state.hasCopiedPanel).toBe(false);
+        expect(store.exists(LS_PANEL_COPY_KEY)).toBe(false);
       });
 
       it('Should fail to copy a library panel if it does not have a grid item parent', () => {
@@ -624,14 +626,14 @@ describe('DashboardScene', () => {
 
         scene.copyPanel(libVizPanel.state.panel as VizPanel);
 
-        expect(scene.state.hasCopiedPanel).toBe(false);
+        expect(store.exists(LS_PANEL_COPY_KEY)).toBe(false);
       });
 
       it('Should copy a panel', () => {
         const vizPanel = ((scene.state.body as SceneGridLayout).state.children[0] as DashboardGridItem).state.body;
         scene.copyPanel(vizPanel as VizPanel);
 
-        expect(scene.state.hasCopiedPanel).toBe(true);
+        expect(store.exists(LS_PANEL_COPY_KEY)).toBe(true);
       });
 
       it('Should copy a library viz panel', () => {
@@ -640,11 +642,11 @@ describe('DashboardScene', () => {
 
         scene.copyPanel(libVizPanel.state.panel as VizPanel);
 
-        expect(scene.state.hasCopiedPanel).toBe(true);
+        expect(store.exists(LS_PANEL_COPY_KEY)).toBe(true);
       });
 
       it('Should paste a panel', () => {
-        scene.setState({ hasCopiedPanel: true });
+        store.set(LS_PANEL_COPY_KEY, JSON.stringify({ key: 'panel-7' }));
         jest.spyOn(JSON, 'parse').mockReturnThis();
         jest.mocked(buildGridItemForPanel).mockReturnValue(
           new DashboardGridItem({
@@ -666,11 +668,11 @@ describe('DashboardScene', () => {
         expect(body.state.children.length).toBe(6);
         expect(gridItem.state.body!.state.key).toBe('panel-7');
         expect(gridItem.state.y).toBe(0);
-        expect(scene.state.hasCopiedPanel).toBe(false);
+        expect(store.exists(LS_PANEL_COPY_KEY)).toBe(false);
       });
 
       it('Should paste a library viz panel', () => {
-        scene.setState({ hasCopiedPanel: true });
+        store.set(LS_PANEL_COPY_KEY, JSON.stringify({ key: 'panel-7' }));
         jest.spyOn(JSON, 'parse').mockReturnValue({ libraryPanel: { uid: 'uid', name: 'libraryPanel' } });
         jest.mocked(buildGridItemForLibPanel).mockReturnValue(
           new DashboardGridItem({
@@ -695,7 +697,7 @@ describe('DashboardScene', () => {
         expect(libVizPanel.state.panelKey).toBe('panel-7');
         expect(libVizPanel.state.panel?.state.key).toBe('panel-7');
         expect(gridItem.state.y).toBe(0);
-        expect(scene.state.hasCopiedPanel).toBe(false);
+        expect(store.exists(LS_PANEL_COPY_KEY)).toBe(false);
       });
 
       it('Should remove a panel', () => {

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

@@ -111,8 +111,6 @@ export interface DashboardSceneState extends SceneObjectState {
   editPanel?: PanelEditor;
   /** Scene object that handles the current drawer or modal */
   overlay?: SceneObject;
-  /** True when a user copies a panel in the dashboard */
-  hasCopiedPanel?: boolean;
   /** The dashboard doesn't have panels */
   isEmpty?: boolean;
   /** Scene object that handles the scopes selector */
@@ -162,7 +160,6 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
       editable: true,
       body: state.body ?? new SceneFlexLayout({ children: [] }),
       links: state.links ?? [],
-      hasCopiedPanel: store.exists(LS_PANEL_COPY_KEY),
       scopes: state.uid && config.featureToggles.scopeFilters ? new ScopesScene() : undefined,
       ...state,
     });
@@ -643,7 +640,6 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
 
     store.set(LS_PANEL_COPY_KEY, JSON.stringify(jsonData));
     appEvents.emit(AppEvents.alertSuccess, ['Panel copied. Use **Paste panel** toolbar action to paste.']);
-    this.setState({ hasCopiedPanel: true });
   }
 
   public pastePanel() {
@@ -698,7 +694,6 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
       children: [gridItem, ...sceneGridLayout.state.children],
     });
 
-    this.setState({ hasCopiedPanel: false });
     store.delete(LS_PANEL_COPY_KEY);
   }
 

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

@@ -17,8 +17,10 @@ import {
 } from '@grafana/ui';
 import { AppChromeUpdate } from 'app/core/components/AppChrome/AppChromeUpdate';
 import { NavToolbarSeparator } from 'app/core/components/AppChrome/NavToolbar/NavToolbarSeparator';
+import { LS_PANEL_COPY_KEY } from 'app/core/constants';
 import { contextSrv } from 'app/core/core';
 import { Trans, t } from 'app/core/internationalization';
+import store from 'app/core/store';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 import { playlistSrv } from 'app/features/playlist/PlaylistSrv';
 
@@ -49,17 +51,7 @@ NavToolbarActions.displayName = 'NavToolbarActions';
  * This part is split into a separate component to help test this
  */
 export function ToolbarActions({ dashboard }: Props) {
-  const {
-    isEditing,
-    viewPanelScene,
-    isDirty,
-    uid,
-    meta,
-    editview,
-    editPanel,
-    editable,
-    hasCopiedPanel: copiedPanel,
-  } = dashboard.useState();
+  const { isEditing, viewPanelScene, isDirty, uid, meta, editview, editPanel, editable } = dashboard.useState();
   const { isPlaying } = playlistSrv.useState();
   const [isAddPanelMenuOpen, setIsAddPanelMenuOpen] = useState(false);
 
@@ -70,7 +62,7 @@ export function ToolbarActions({ dashboard }: Props) {
   const isViewingPanel = Boolean(viewPanelScene);
   const isEditedPanelDirty = useVizManagerDirty(editPanel);
   const isEditingLibraryPanel = useEditingLibraryPanel(editPanel);
-  const hasCopiedPanel = Boolean(copiedPanel);
+  const hasCopiedPanel = store.exists(LS_PANEL_COPY_KEY);
   // Means we are not in settings view, fullscreen panel or edit panel
   const isShowingDashboard = !editview && !isViewingPanel && !isEditingPanel;
   const isEditingAndShowingDashboard = isEditing && isShowingDashboard;