[Dashboard] Store Expanded Panel Id in URL (#78684)
* Added expandedPanelId to dashboard app state
This commit is contained in:
parent
65cafcd9c9
commit
33f8ebd335
5 changed files with 85 additions and 5 deletions
|
@ -359,10 +359,6 @@ export class DashboardAppController {
|
|||
incomingEmbeddable = undefined;
|
||||
}
|
||||
|
||||
let expandedPanelId;
|
||||
if (dashboardContainer && !isErrorEmbeddable(dashboardContainer)) {
|
||||
expandedPanelId = dashboardContainer.getInput().expandedPanelId;
|
||||
}
|
||||
const shouldShowEditHelp = getShouldShowEditHelp();
|
||||
const shouldShowViewHelp = getShouldShowViewHelp();
|
||||
const isEmptyInReadonlyMode = shouldShowUnauthorizedEmptyState();
|
||||
|
@ -384,7 +380,7 @@ export class DashboardAppController {
|
|||
lastReloadRequestTime,
|
||||
title: dashboardStateManager.getTitle(),
|
||||
description: dashboardStateManager.getDescription(),
|
||||
expandedPanelId,
|
||||
expandedPanelId: dashboardStateManager.getExpandedPanelId(),
|
||||
};
|
||||
};
|
||||
|
||||
|
|
|
@ -23,6 +23,9 @@ import { getSavedDashboardMock } from './test_helpers';
|
|||
import { InputTimeRange, TimefilterContract, TimeRange } from 'src/plugins/data/public';
|
||||
import { ViewMode } from 'src/plugins/embeddable/public';
|
||||
import { createKbnUrlStateStorage } from 'src/plugins/kibana_utils/public';
|
||||
import { DashboardContainer, DashboardContainerInput } from '.';
|
||||
import { DashboardContainerOptions } from './embeddable/dashboard_container';
|
||||
import { embeddablePluginMock } from '../../../embeddable/public/mocks';
|
||||
|
||||
describe('DashboardState', function () {
|
||||
let dashboardState: DashboardStateManager;
|
||||
|
@ -48,6 +51,23 @@ describe('DashboardState', function () {
|
|||
});
|
||||
}
|
||||
|
||||
function initDashboardContainer(initialInput?: Partial<DashboardContainerInput>) {
|
||||
const { doStart } = embeddablePluginMock.createInstance();
|
||||
const defaultInput: DashboardContainerInput = {
|
||||
id: '123',
|
||||
viewMode: ViewMode.EDIT,
|
||||
filters: [] as DashboardContainerInput['filters'],
|
||||
query: {} as DashboardContainerInput['query'],
|
||||
timeRange: {} as DashboardContainerInput['timeRange'],
|
||||
useMargins: true,
|
||||
title: 'ultra awesome test dashboard',
|
||||
isFullScreenMode: false,
|
||||
panels: {} as DashboardContainerInput['panels'],
|
||||
};
|
||||
const input = { ...defaultInput, ...(initialInput ?? {}) };
|
||||
return new DashboardContainer(input, { embeddable: doStart() } as DashboardContainerOptions);
|
||||
}
|
||||
|
||||
describe('syncTimefilterWithDashboard', function () {
|
||||
test('syncs quick time', function () {
|
||||
savedDashboard.timeRestore = true;
|
||||
|
@ -95,6 +115,43 @@ describe('DashboardState', function () {
|
|||
});
|
||||
});
|
||||
|
||||
describe('Dashboard Container Changes', () => {
|
||||
beforeEach(() => {
|
||||
initDashboardState();
|
||||
});
|
||||
|
||||
test('expanedPanelId in container input casues state update', () => {
|
||||
dashboardState.setExpandedPanelId = jest.fn();
|
||||
|
||||
const dashboardContainer = initDashboardContainer({
|
||||
expandedPanelId: 'theCoolestPanelOnThisDashboard',
|
||||
});
|
||||
|
||||
dashboardState.handleDashboardContainerChanges(dashboardContainer);
|
||||
expect(dashboardState.setExpandedPanelId).toHaveBeenCalledWith(
|
||||
'theCoolestPanelOnThisDashboard'
|
||||
);
|
||||
});
|
||||
|
||||
test('expanedPanelId is not updated when it is the same', () => {
|
||||
dashboardState.setExpandedPanelId = jest
|
||||
.fn()
|
||||
.mockImplementation(dashboardState.setExpandedPanelId);
|
||||
|
||||
const dashboardContainer = initDashboardContainer({
|
||||
expandedPanelId: 'theCoolestPanelOnThisDashboard',
|
||||
});
|
||||
|
||||
dashboardState.handleDashboardContainerChanges(dashboardContainer);
|
||||
dashboardState.handleDashboardContainerChanges(dashboardContainer);
|
||||
expect(dashboardState.setExpandedPanelId).toHaveBeenCalledTimes(1);
|
||||
|
||||
dashboardContainer.updateInput({ expandedPanelId: 'woah it changed' });
|
||||
dashboardState.handleDashboardContainerChanges(dashboardContainer);
|
||||
expect(dashboardState.setExpandedPanelId).toHaveBeenCalledTimes(2);
|
||||
});
|
||||
});
|
||||
|
||||
describe('isDirty', function () {
|
||||
beforeAll(() => {
|
||||
initDashboardState();
|
||||
|
|
|
@ -267,6 +267,10 @@ export class DashboardStateManager {
|
|||
this.setFullScreenMode(input.isFullScreenMode);
|
||||
}
|
||||
|
||||
if (input.expandedPanelId !== this.getExpandedPanelId()) {
|
||||
this.setExpandedPanelId(input.expandedPanelId);
|
||||
}
|
||||
|
||||
if (!_.isEqual(input.query, this.getQuery())) {
|
||||
this.setQuery(input.query);
|
||||
}
|
||||
|
@ -282,6 +286,14 @@ export class DashboardStateManager {
|
|||
this.stateContainer.transitions.set('fullScreenMode', fullScreenMode);
|
||||
}
|
||||
|
||||
public getExpandedPanelId() {
|
||||
return this.appState.expandedPanelId;
|
||||
}
|
||||
|
||||
public setExpandedPanelId(expandedPanelId?: string) {
|
||||
this.stateContainer.transitions.set('expandedPanelId', expandedPanelId);
|
||||
}
|
||||
|
||||
public setFilters(filters: Filter[]) {
|
||||
this.stateContainer.transitions.set('filters', filters);
|
||||
}
|
||||
|
|
|
@ -89,6 +89,7 @@ export interface DashboardAppState {
|
|||
query: Query | string;
|
||||
filters: Filter[];
|
||||
viewMode: ViewMode;
|
||||
expandedPanelId?: string;
|
||||
savedQuery?: string;
|
||||
}
|
||||
|
||||
|
|
|
@ -21,6 +21,7 @@ import expect from '@kbn/expect';
|
|||
|
||||
export default function ({ getService, getPageObjects }) {
|
||||
const retry = getService('retry');
|
||||
const browser = getService('browser');
|
||||
const esArchiver = getService('esArchiver');
|
||||
const kibanaServer = getService('kibanaServer');
|
||||
const dashboardPanelActions = getService('dashboardPanelActions');
|
||||
|
@ -61,5 +62,18 @@ export default function ({ getService, getPageObjects }) {
|
|||
expect(panelCountAfterMaxThenMinimize).to.be(panelCount);
|
||||
});
|
||||
});
|
||||
|
||||
it('minimizes using the browser back button', async () => {
|
||||
const panelCount = await PageObjects.dashboard.getPanelCount();
|
||||
|
||||
await dashboardPanelActions.openContextMenu();
|
||||
await dashboardPanelActions.clickExpandPanelToggle();
|
||||
|
||||
await browser.goBack();
|
||||
await retry.try(async () => {
|
||||
const panelCountAfterMaxThenMinimize = await PageObjects.dashboard.getPanelCount();
|
||||
expect(panelCountAfterMaxThenMinimize).to.be(panelCount);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue