From 225b7ffc0502d465d0b883b46039c753cf3db1c2 Mon Sep 17 00:00:00 2001 From: Ryan Keairns Date: Fri, 13 Aug 2021 08:20:34 -0500 Subject: [PATCH 1/8] Use empty state page template --- .../getting_started.test.tsx.snap | 391 ------------------ .../getting_started/getting_started.test.tsx | 107 ----- .../getting_started/getting_started.tsx | 115 ------ .../components/getting_started/index.ts | 9 - .../public/components/overview/overview.tsx | 222 +++++----- 5 files changed, 115 insertions(+), 729 deletions(-) delete mode 100644 src/plugins/kibana_overview/public/components/getting_started/__snapshots__/getting_started.test.tsx.snap delete mode 100644 src/plugins/kibana_overview/public/components/getting_started/getting_started.test.tsx delete mode 100644 src/plugins/kibana_overview/public/components/getting_started/getting_started.tsx delete mode 100644 src/plugins/kibana_overview/public/components/getting_started/index.ts diff --git a/src/plugins/kibana_overview/public/components/getting_started/__snapshots__/getting_started.test.tsx.snap b/src/plugins/kibana_overview/public/components/getting_started/__snapshots__/getting_started.test.tsx.snap deleted file mode 100644 index b5f501eb88a01..0000000000000 --- a/src/plugins/kibana_overview/public/components/getting_started/__snapshots__/getting_started.test.tsx.snap +++ /dev/null @@ -1,391 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`GettingStarted dark mode on 1`] = ` -
- - -
- -

- -

- - - -

- -

- - - - - - } - layout="horizontal" - paddingSize="none" - title="Dashboard" - titleElement="h3" - titleSize="xs" - /> - - - - } - layout="horizontal" - paddingSize="none" - title="Discover" - titleElement="h3" - titleSize="xs" - /> - - - - } - layout="horizontal" - paddingSize="none" - title="Canvas" - titleElement="h3" - titleSize="xs" - /> - - - - } - layout="horizontal" - paddingSize="none" - title="Maps" - titleElement="h3" - titleSize="xs" - /> - - - - } - layout="horizontal" - paddingSize="none" - title="Machine Learning" - titleElement="h3" - titleSize="xs" - /> - - - - } - layout="horizontal" - paddingSize="none" - title="Graph" - titleElement="h3" - titleSize="xs" - /> - - - - - - - - -
- - - - - -
-`; - -exports[`GettingStarted render 1`] = ` -
- - -
- -

- -

- - - -

- -

- - - - - - } - layout="horizontal" - paddingSize="none" - title="Dashboard" - titleElement="h3" - titleSize="xs" - /> - - - - } - layout="horizontal" - paddingSize="none" - title="Discover" - titleElement="h3" - titleSize="xs" - /> - - - - } - layout="horizontal" - paddingSize="none" - title="Canvas" - titleElement="h3" - titleSize="xs" - /> - - - - } - layout="horizontal" - paddingSize="none" - title="Maps" - titleElement="h3" - titleSize="xs" - /> - - - - } - layout="horizontal" - paddingSize="none" - title="Machine Learning" - titleElement="h3" - titleSize="xs" - /> - - - - } - layout="horizontal" - paddingSize="none" - title="Graph" - titleElement="h3" - titleSize="xs" - /> - - - - - - - - -
- - - - - -
-`; diff --git a/src/plugins/kibana_overview/public/components/getting_started/getting_started.test.tsx b/src/plugins/kibana_overview/public/components/getting_started/getting_started.test.tsx deleted file mode 100644 index a2ce059f913f4..0000000000000 --- a/src/plugins/kibana_overview/public/components/getting_started/getting_started.test.tsx +++ /dev/null @@ -1,107 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React from 'react'; -import { GettingStarted } from './getting_started'; -import { shallowWithIntl } from '@kbn/test/jest'; -import { FeatureCatalogueCategory } from 'src/plugins/home/public'; - -const addBasePathMock = jest.fn((path: string) => (path ? path : 'path')); - -const mockApps = [ - { - category: FeatureCatalogueCategory.DATA, - description: 'Display and share a collection of visualizations and saved searches.', - icon: 'dashboardApp', - id: 'dashboard', - order: 100, - path: 'path-to-dashboard', - showOnHomePage: false, - solutionId: 'kibana', - subtitle: 'Analyze data in dashboards.', - title: 'Dashboard', - }, - { - category: FeatureCatalogueCategory.DATA, - description: 'Interactively explore your data by querying and filtering raw documents.', - icon: 'discoverApp', - id: 'discover', - order: 200, - path: 'path-to-discover', - - showOnHomePage: false, - solutionId: 'kibana', - subtitle: 'Search and find insights.', - title: 'Discover', - }, - { - category: FeatureCatalogueCategory.DATA, - description: 'Showcase your data in a pixel-perfect way.', - icon: 'canvasApp', - id: 'canvas', - order: 300, - path: 'path-to-canvas', - - showOnHomePage: false, - solutionId: 'kibana', - subtitle: 'Design pixel-perfect reports.', - title: 'Canvas', - }, - { - category: FeatureCatalogueCategory.DATA, - description: 'Explore geospatial data from Elasticsearch and the Elastic Maps Service.', - icon: 'gisApp', - id: 'maps', - order: 400, - path: 'path-to-maps', - showOnHomePage: false, - solutionId: 'kibana', - subtitle: 'Plot geographic data.', - title: 'Maps', - }, - { - category: FeatureCatalogueCategory.DATA, - description: - 'Automatically model the normal behavior of your time series data to detect anomalies.', - icon: 'machineLearningApp', - id: 'ml', - order: 500, - path: 'path-to-ml', - showOnHomePage: false, - solutionId: 'kibana', - subtitle: 'Model, predict, and detect.', - title: 'Machine Learning', - }, - { - category: FeatureCatalogueCategory.DATA, - description: 'Surface and analyze relevant relationships in your Elasticsearch data.', - icon: 'graphApp', - id: 'graph', - order: 600, - path: 'path-to-graph', - showOnHomePage: false, - solutionId: 'kibana', - subtitle: 'Reveal patterns and relationships.', - title: 'Graph', - }, -]; - -describe('GettingStarted', () => { - test('render', () => { - const component = shallowWithIntl( - - ); - expect(component).toMatchSnapshot(); - }); - test('dark mode on', () => { - const component = shallowWithIntl( - - ); - expect(component).toMatchSnapshot(); - }); -}); diff --git a/src/plugins/kibana_overview/public/components/getting_started/getting_started.tsx b/src/plugins/kibana_overview/public/components/getting_started/getting_started.tsx deleted file mode 100644 index 56247c4e91fa1..0000000000000 --- a/src/plugins/kibana_overview/public/components/getting_started/getting_started.tsx +++ /dev/null @@ -1,115 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -import React, { FC } from 'react'; -import { - EuiButton, - EuiCard, - EuiFlexGrid, - EuiFlexGroup, - EuiFlexItem, - EuiIcon, - EuiImage, - EuiSpacer, - EuiText, - EuiTitle, -} from '@elastic/eui'; -import { FormattedMessage } from '@kbn/i18n/react'; -import { CoreStart } from 'kibana/public'; -import { RedirectAppLinks, useKibana } from '../../../../../../src/plugins/kibana_react/public'; -import { FeatureCatalogueEntry } from '../../../../../../src/plugins/home/public'; -import { PLUGIN_ID } from '../../../common'; - -interface Props { - addBasePath: (path: string) => string; - isDarkTheme: boolean; - apps: FeatureCatalogueEntry[]; -} - -export const GettingStarted: FC = ({ addBasePath, isDarkTheme, apps }) => { - const { - services: { application }, - } = useKibana(); - const gettingStartedGraphicURL = `/plugins/${PLUGIN_ID}/assets/kibana_montage_${ - isDarkTheme ? 'dark' : 'light' - }.svg`; - - return ( -
- - -
- -

- -

- - - - - -

- -

- - - - - - {apps.map(({ subtitle = '', icon, title }) => ( - - } - layout="horizontal" - paddingSize="none" - title={title} - titleElement="h3" - titleSize="xs" - /> - - ))} - - - - - - - - - -
- - - - - - -
- ); -}; diff --git a/src/plugins/kibana_overview/public/components/getting_started/index.ts b/src/plugins/kibana_overview/public/components/getting_started/index.ts deleted file mode 100644 index 10977941afeee..0000000000000 --- a/src/plugins/kibana_overview/public/components/getting_started/index.ts +++ /dev/null @@ -1,9 +0,0 @@ -/* - * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one - * or more contributor license agreements. Licensed under the Elastic License - * 2.0 and the Server Side Public License, v 1; you may not use this file except - * in compliance with, at your election, the Elastic License 2.0 or the Server - * Side Public License, v 1. - */ - -export * from './getting_started'; diff --git a/src/plugins/kibana_overview/public/components/overview/overview.tsx b/src/plugins/kibana_overview/public/components/overview/overview.tsx index 9bba923371f64..f1cb2eeca670a 100644 --- a/src/plugins/kibana_overview/public/components/overview/overview.tsx +++ b/src/plugins/kibana_overview/public/components/overview/overview.tsx @@ -24,6 +24,7 @@ import { RedirectAppLinks, useKibana, KibanaPageTemplate, + KibanaPageTemplateProps, overviewPageActions, OverviewPageFooter, } from '../../../../../../src/plugins/kibana_react/public'; @@ -36,7 +37,6 @@ import { import { PLUGIN_ID, PLUGIN_PATH } from '../../../common'; import { AppPluginStartDependencies } from '../../types'; import { AddData } from '../add_data'; -import { GettingStarted } from '../getting_started'; import { ManageData } from '../manage_data'; import { NewsFeed } from '../news_feed'; import { METRIC_TYPE, trackUiMetric } from '../../lib/ui_metric'; @@ -72,6 +72,17 @@ export const Overview: FC = ({ newsFetchResult, solutions, features }) => const addDataFeatures = getFeaturesByCategory(FeatureCatalogueCategory.DATA); const manageDataFeatures = getFeaturesByCategory(FeatureCatalogueCategory.ADMIN); const devTools = findFeatureById('console'); + const noDataConfig: KibanaPageTemplateProps['noDataConfig'] = { + solution: 'Analytics', + logo: 'logoKibana', + actions: { + beats: { + href: addBasePath(`home#/tutorial_directory`), + recommended: false, + }, + }, + docsLink: 'https://www.elastic.co/kibana/', + }; // Show card for console if none of the manage data plugins are available, most likely in OSS if (manageDataFeatures.length < 1 && devTools) { @@ -127,126 +138,123 @@ export const Overview: FC = ({ newsFetchResult, solutions, features }) => hidden: isNewKibanaInstance, }), }} + noDataConfig={isNewKibanaInstance ? noDataConfig : undefined} template="empty" > - {isNewKibanaInstance ? ( - - ) : ( - <> -
- -

- -

- - - {mainApps.length ? ( - <> - - {mainApps.map(renderAppCard)} - + <> +
+ +

+ +

+ - - - ) : null} - - {remainingApps.length ? ( + {mainApps.length ? ( + <> - {remainingApps.map(renderAppCard)} + {mainApps.map(renderAppCard)} - ) : null} -
-
- - {newsFetchResult && newsFetchResult.feedItems.length ? ( - - - - ) : null} + +