Skip to content

Commit

Permalink
[Dashboard] Store Expanded Panel Id in URL (elastic#78684)
Browse files Browse the repository at this point in the history
* Added expandedPanelId to dashboard app state
  • Loading branch information
ThomThomson committed Sep 29, 2020
1 parent ce96439 commit 9044b06
Show file tree
Hide file tree
Showing 5 changed files with 85 additions and 5 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -384,7 +380,7 @@ export class DashboardAppController {
lastReloadRequestTime,
title: dashboardStateManager.getTitle(),
description: dashboardStateManager.getDescription(),
expandedPanelId,
expandedPanelId: dashboardStateManager.getExpandedPanelId(),
};
};

Expand Down
57 changes: 57 additions & 0 deletions src/plugins/dashboard/public/application/dashboard_state.test.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand All @@ -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);
}
Expand Down
1 change: 1 addition & 0 deletions src/plugins/dashboard/public/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -89,6 +89,7 @@ export interface DashboardAppState {
query: Query | string;
filters: Filter[];
viewMode: ViewMode;
expandedPanelId?: string;
savedQuery?: string;
}

Expand Down
14 changes: 14 additions & 0 deletions test/functional/apps/dashboard/panel_expand_toggle.js
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand Down Expand Up @@ -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);
});
});
});
}

0 comments on commit 9044b06

Please sign in to comment.