Skip to content

Commit

Permalink
Merge branch 'master' into alerting/zombie-tasks
Browse files Browse the repository at this point in the history
* master:
  adds strict types to Alerting Client (elastic#53821)
  [Dashboard] Empty screen redesign (elastic#53681)
  Migrate config deprecations and `ShieldUser` functionality to the New Platform (elastic#53768)
  • Loading branch information
gmmorris committed Jan 6, 2020
2 parents 8c34d4a + 8992a43 commit 2c163ea
Show file tree
Hide file tree
Showing 48 changed files with 818 additions and 564 deletions.

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,16 @@ import {
} from '../np_ready/dashboard_empty_screen';
// @ts-ignore
import { findTestSubject } from '@elastic/eui/lib/test';
import { coreMock } from '../../../../../../core/public/mocks';

describe('DashboardEmptyScreen', () => {
const setupMock = coreMock.createSetup();

const defaultProps = {
showLinkToVisualize: true,
onLinkClick: jest.fn(),
uiSettings: setupMock.uiSettings,
http: setupMock.http,
};

function mountComponent(props?: DashboardEmptyScreenProps) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,31 @@

.dshStartScreen {
text-align: center;
padding: $euiSizeS;
}

.dshStartScreen__pageContent {
padding: $euiSizeXXL;
}

.dshStartScreen__panelDesc {
max-width: 260px;
margin: 0 auto;
}

.dshEmptyWidget {
border: $euiBorderThin;
border-style: dashed;
border-radius: $euiBorderRadius;
padding: $euiSizeXXL * 2;
max-width: 400px;
margin-left: $euiSizeS;
text-align: center;
}

.dshEmptyWidget {
border: 2px dashed $euiColorLightShade;
padding: 4 * $euiSize;
max-width: 20em;
margin-left: 10px;
text-align: center;
}
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ export class DashboardAppController {
timefilter: { timefilter },
},
},
core: { notifications, overlays, chrome, injectedMetadata, uiSettings, savedObjects },
core: { notifications, overlays, chrome, injectedMetadata, uiSettings, savedObjects, http },
}: DashboardAppControllerDependencies) {
new FilterStateManager(globalState, getAppState, filterManager);
const queryFilter = filterManager;
Expand Down Expand Up @@ -197,6 +197,8 @@ export class DashboardAppController {
const emptyScreenProps: DashboardEmptyScreenProps = {
onLinkClick: shouldShowEditHelp ? $scope.showAddPanel : $scope.enterEditMode,
showLinkToVisualize: shouldShowEditHelp,
uiSettings,
http,
};
if (shouldShowEditHelp) {
emptyScreenProps.onVisualizeClick = addVisualization;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,94 +19,110 @@
import React from 'react';
import { I18nProvider } from '@kbn/i18n/react';
import {
EuiIcon,
EuiLink,
EuiSpacer,
EuiPageContent,
EuiPageBody,
EuiPage,
EuiImage,
EuiText,
EuiButton,
} from '@elastic/eui';
import { IUiSettingsClient, HttpStart } from 'kibana/public';
import * as constants from './dashboard_empty_screen_constants';

export interface DashboardEmptyScreenProps {
showLinkToVisualize: boolean;
onLinkClick: () => void;
onVisualizeClick?: () => void;
uiSettings: IUiSettingsClient;
http: HttpStart;
}

export function DashboardEmptyScreen({
showLinkToVisualize,
onLinkClick,
onVisualizeClick,
uiSettings,
http,
}: DashboardEmptyScreenProps) {
const IS_DARK_THEME = uiSettings.get('theme:darkMode');
const emptyStateGraphicURL = IS_DARK_THEME
? '/plugins/kibana/home/assets/welcome_graphic_dark_2x.png'
: '/plugins/kibana/home/assets/welcome_graphic_light_2x.png';
const linkToVisualizeParagraph = (
<p data-test-subj="linkToVisualizeParagraph">
<EuiButton
iconSide="right"
size="s"
fill
iconType="arrowDown"
onClick={onVisualizeClick}
data-test-subj="addVisualizationButton"
aria-label={constants.createNewVisualizationButtonAriaLabel}
>
{constants.createNewVisualizationButton}
</EuiButton>
</p>
);
const paragraph = (
description1: string,
description1: string | null,
description2: string,
linkText: string,
ariaLabel: string,
dataTestSubj?: string
) => {
return (
<EuiText size="m">
<EuiText size="m" color="subdued">
<p>
{description1}
{description1 && <span>&nbsp;</span>}
<EuiLink onClick={onLinkClick} aria-label={ariaLabel} data-test-subj={dataTestSubj || ''}>
{linkText}
</EuiLink>
<span>&nbsp;</span>
{description2}
</p>
</EuiText>
);
};
const addVisualizationParagraph = (
<React.Fragment>
{paragraph(
constants.addVisualizationDescription1,
constants.addVisualizationDescription2,
constants.addVisualizationLinkText,
constants.addVisualizationLinkAriaLabel,
'emptyDashboardAddPanelButton'
)}
<EuiSpacer size="m" />
{linkToVisualizeParagraph}
</React.Fragment>
);
const enterEditModeParagraph = paragraph(
constants.howToStartWorkingOnNewDashboardDescription1,
constants.howToStartWorkingOnNewDashboardDescription2,
constants.howToStartWorkingOnNewDashboardEditLinkText,
constants.howToStartWorkingOnNewDashboardEditLinkAriaLabel
);
return (
<I18nProvider>
<EuiPage className="dshStartScreen" restrictWidth="36em">
<EuiPageBody>
<EuiPageContent verticalPosition="center" horizontalPosition="center">
<EuiIcon type="dashboardApp" size="xxl" color="subdued" />
<EuiSpacer size="s" />
<EuiText grow={true}>
<h2 key={0.5}>{constants.fillDashboardTitle}</h2>
</EuiText>
<EuiSpacer size="m" />
{showLinkToVisualize ? addVisualizationParagraph : enterEditModeParagraph}
</EuiPageContent>
</EuiPageBody>
</EuiPage>
</I18nProvider>
const enterViewModeParagraph = paragraph(
null,
constants.addNewVisualizationDescription,
constants.addExistingVisualizationLinkText,
constants.addExistingVisualizationLinkAriaLabel
);
const viewMode = (
<EuiPage className="dshStartScreen" restrictWidth="500px">
<EuiPageBody>
<EuiPageContent
verticalPosition="center"
horizontalPosition="center"
paddingSize="none"
className="dshStartScreen__pageContent"
>
<EuiImage url={http.basePath.prepend(emptyStateGraphicURL)} alt="" />
<EuiText size="m">
<p style={{ fontWeight: 'bold' }}>{constants.fillDashboardTitle}</p>
</EuiText>
<EuiSpacer size="m" />
<div className="dshStartScreen__panelDesc">{enterEditModeParagraph}</div>
</EuiPageContent>
</EuiPageBody>
</EuiPage>
);
const editMode = (
<div data-test-subj="emptyDashboardWidget" className="dshEmptyWidget">
{enterViewModeParagraph}
<EuiSpacer size="l" />
{linkToVisualizeParagraph}
</div>
);
return <I18nProvider>{showLinkToVisualize ? editMode : viewMode}</I18nProvider>;
}
Original file line number Diff line number Diff line change
Expand Up @@ -19,40 +19,20 @@

import { i18n } from '@kbn/i18n';

export const addVisualizationDescription1: string = i18n.translate(
'kbn.dashboard.addVisualizationDescription1',
{
defaultMessage: 'Click the ',
}
);
export const addVisualizationDescription2: string = i18n.translate(
'kbn.dashboard.addVisualizationDescription2',
{
defaultMessage: ' button in the menu bar above to add a visualization to the dashboard.',
}
);
export const addVisualizationLinkText: string = i18n.translate(
'kbn.dashboard.addVisualizationLinkText',
{
defaultMessage: 'Add',
}
);
export const addVisualizationLinkAriaLabel: string = i18n.translate(
'kbn.dashboard.addVisualizationLinkAriaLabel',
{
defaultMessage: 'Add visualization',
}
);
/** VIEW MODE CONSTANTS **/
export const fillDashboardTitle: string = i18n.translate('kbn.dashboard.fillDashboardTitle', {
defaultMessage: 'This dashboard is empty. Let\u2019s fill it up!',
});
export const howToStartWorkingOnNewDashboardDescription1: string = i18n.translate(
'kbn.dashboard.howToStartWorkingOnNewDashboardDescription1',
{
defaultMessage: 'Click the ',
defaultMessage: 'Click',
}
);
export const howToStartWorkingOnNewDashboardDescription2: string = i18n.translate(
'kbn.dashboard.howToStartWorkingOnNewDashboardDescription2',
{
defaultMessage: ' button in the menu bar above to start working on your new dashboard.',
defaultMessage: 'in the menu bar above to start adding panels.',
}
);
export const howToStartWorkingOnNewDashboardEditLinkText: string = i18n.translate(
Expand All @@ -67,13 +47,23 @@ export const howToStartWorkingOnNewDashboardEditLinkAriaLabel: string = i18n.tra
defaultMessage: 'Edit dashboard',
}
);
export const fillDashboardTitle: string = i18n.translate('kbn.dashboard.fillDashboardTitle', {
defaultMessage: 'This dashboard is empty. Let\u2019s fill it up!',
});
export const visualizeAppLinkTest: string = i18n.translate(
'kbn.dashboard.visitVisualizeAppLinkText',
/** EDIT MODE CONSTANTS **/
export const addExistingVisualizationLinkText: string = i18n.translate(
'kbn.dashboard.addExistingVisualizationLinkText',
{
defaultMessage: 'Add an existing',
}
);
export const addExistingVisualizationLinkAriaLabel: string = i18n.translate(
'kbn.dashboard.addVisualizationLinkAriaLabel',
{
defaultMessage: 'Add an existing visualization',
}
);
export const addNewVisualizationDescription: string = i18n.translate(
'kbn.dashboard.addNewVisualizationText',
{
defaultMessage: 'visit the Visualize app',
defaultMessage: 'or new object to this dashboard',
}
);
export const createNewVisualizationButton: string = i18n.translate(
Expand All @@ -82,3 +72,9 @@ export const createNewVisualizationButton: string = i18n.translate(
defaultMessage: 'Create new',
}
);
export const createNewVisualizationButtonAriaLabel: string = i18n.translate(
'kbn.dashboard.createNewVisualizationButtonAriaLabel',
{
defaultMessage: 'Create new visualization button',
}
);
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 4 additions & 4 deletions test/functional/apps/dashboard/empty_dashboard.js
Original file line number Diff line number Diff line change
Expand Up @@ -44,13 +44,13 @@ export default function({ getService, getPageObjects }) {
await PageObjects.dashboard.gotoDashboardLandingPage();
});

it('should display add button', async () => {
const addButtonExists = await testSubjects.exists('emptyDashboardAddPanelButton');
expect(addButtonExists).to.be(true);
it('should display empty widget', async () => {
const emptyWidgetExists = await testSubjects.exists('emptyDashboardWidget');
expect(emptyWidgetExists).to.be(true);
});

it.skip('should open add panel when add button is clicked', async () => {
await testSubjects.click('emptyDashboardAddPanelButton');
await testSubjects.click('dashboardAddPanelButton');
const isAddPanelOpen = await dashboardAddPanel.isAddPanelOpen();
expect(isAddPanelOpen).to.be(true);
});
Expand Down
Loading

0 comments on commit 2c163ea

Please sign in to comment.