DashboardScene: Fix issues with dashboard empty state (#85406)

Fix

Tests

Make sure edit mode is on when adding panel/library panel

Co-authored-by: kay delaney <kay@grafana.com>
This commit is contained in:
Dominik Prokop
2024-03-30 18:34:26 +01:00
committed by GitHub
parent 368fec9b97
commit fa9e139123
6 changed files with 91 additions and 31 deletions

View File

@@ -283,11 +283,15 @@ describe('DashboardScene', () => {
});
it('Should create and add a new panel to the dashboard', () => {
scene.exitEditMode({ skipConfirm: true });
expect(scene.state.isEditing).toBe(false);
scene.onCreateNewPanel();
const body = scene.state.body as SceneGridLayout;
const gridItem = body.state.children[0] as DashboardGridItem;
expect(scene.state.isEditing).toBe(true);
expect(body.state.children.length).toBe(6);
expect(gridItem.state.body!.state.key).toBe('panel-7');
});
@@ -298,6 +302,7 @@ describe('DashboardScene', () => {
const body = scene.state.body as SceneGridLayout;
const gridRow = body.state.children[0] as SceneGridRow;
expect(scene.state.isEditing).toBe(true);
expect(body.state.children.length).toBe(4);
expect(gridRow.state.key).toBe('panel-7');
expect(gridRow.state.children[0].state.key).toBe('griditem-1');
@@ -509,11 +514,15 @@ describe('DashboardScene', () => {
});
it('Should create a new add library panel widget', () => {
scene.exitEditMode({ skipConfirm: true });
expect(scene.state.isEditing).toBe(false);
scene.onCreateLibPanelWidget();
const body = scene.state.body as SceneGridLayout;
const gridItem = body.state.children[0] as DashboardGridItem;
expect(scene.state.isEditing).toBe(true);
expect(body.state.children.length).toBe(6);
expect(gridItem.state.body!.state.key).toBe('panel-7');
expect(gridItem.state.y).toBe(0);

View File

@@ -740,6 +740,10 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
throw new Error('Trying to add a panel in a layout that is not SceneGridLayout');
}
if (!this.state.isEditing) {
this.onEnterEditMode();
}
const sceneGridLayout = this.state.body;
const panelId = dashboardSceneGraph.getNextPanelId(this);
@@ -767,6 +771,10 @@ export class DashboardScene extends SceneObjectBase<DashboardSceneState> {
}
public onCreateNewPanel(): number {
if (!this.state.isEditing) {
this.onEnterEditMode();
}
const vizPanel = getDefaultVizPanel(this);
this.addPanel(vizPanel);

View File

@@ -62,7 +62,10 @@ export function DashboardSceneRenderer({ model }: SceneComponentProps<DashboardS
</div>
)}
<CustomScrollbar autoHeightMin={'100%'} className={styles.scrollbarContainer}>
<div className={styles.canvasContent}>{isEmpty ? emptyState : withPanels}</div>
<div className={styles.canvasContent}>
<>{isEmpty && emptyState}</>
{withPanels}
</div>
</CustomScrollbar>
</div>
)}