Dashboard scenes: Editing library panels. (#83223)

* wip * Refactor find panel by key * clean up lint, make isLoading optional * change library panel so that the dashboard key is attached to the panel instead of the library panel * do not reload everything when the library panel is already loaded * Progress on library panel options in options pane * We can skip building the edit scene until we have the library panel loaded * undo changes to findLibraryPanelbyKey, changes not necessary when the panel has the findable id instead of the library panel * fix undo * make sure the save model gets the id from the panel and not the library panel * remove non necessary links and data providers from dummy loading panel * change library panel so that the dashboard key is attached to the panel instead of the library panel * make sure the save model gets the id from the panel and not the library panel * do not reload everything when the library panel is already loaded * Fix merge issue * Clean up * lint cleanup * wip saving * working save * use title from panel model * move library panel api functions * fix issue from merge * Add confirm save modal. Update library panel to response from save request. Add library panel information box to panel options * Better naming * Remove library panel from viz panel state, use sourcePanel.parent instead. Fix edited by time formatting * Add tests for editing library panels * implement changed from review feedback * minor refactor from feedback
2025-02-25 18:55:37 -06:00 · 2024-03-11 20:48:27 +01:00
parent efbcd53119
commit 0b2640e9ff
16 changed files with 596 additions and 81 deletions
--- a/public/app/features/dashboard-scene/panel-edit/PanelOptions.test.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelOptions.test.tsx
@@ -0,0 +1,63 @@
+import { act, fireEvent, render } from '@testing-library/react';
+import React from 'react';
+
+import { SceneGridItem, VizPanel } from '@grafana/scenes';
+import { OptionFilter } from 'app/features/dashboard/components/PanelEditor/OptionsPaneOptions';
+
+import { LibraryVizPanel } from '../scene/LibraryVizPanel';
+import { vizPanelToPanel } from '../serialization/transformSceneToSaveModel';
+
+import { PanelOptions } from './PanelOptions';
+import { VizPanelManager } from './VizPanelManager';
+
+jest.mock('react-router-dom', () => ({
+  useLocation: () => ({
+    pathname: '',
+  }),
+}));
+
+describe('PanelOptions', () => {
+  it('gets library panel options when the editing a library panel', async () => {
+    const panel = new VizPanel({
+      key: 'panel-1',
+      pluginId: 'text',
+    });
+
+    const libraryPanelModel = {
+      title: 'title',
+      uid: 'uid',
+      name: 'libraryPanelName',
+      model: vizPanelToPanel(panel),
+      type: 'panel',
+      version: 1,
+    };
+
+    const libraryPanel = new LibraryVizPanel({
+      isLoaded: true,
+      title: libraryPanelModel.title,
+      uid: libraryPanelModel.uid,
+      name: libraryPanelModel.name,
+      panelKey: panel.state.key!,
+      panel: panel,
+      _loadedPanel: libraryPanelModel,
+    });
+
+    new SceneGridItem({ body: libraryPanel });
+
+    const panelManger = VizPanelManager.createFor(panel);
+
+    const panelOptions = (
+      <PanelOptions vizManager={panelManger} searchQuery="" listMode={OptionFilter.All}></PanelOptions>
+    );
+
+    const r = render(panelOptions);
+    const input = await r.findByTestId('library panel name input');
+    await act(async () => {
+      fireEvent.blur(input, { target: { value: 'new library panel name' } });
+    });
+
+    expect((panelManger.state.sourcePanel.resolve().parent as LibraryVizPanel).state.name).toBe(
+      'new library panel name'
+    );
+  });
+});