Skip to content

Commit

Permalink
[Enterprise Search] Add Overview landing page/plugin (#76734)
Browse files Browse the repository at this point in the history
* [public] Register Enterprise search plugin

+ move new Home strings to constants

* [server] Register plugin access/visibility

* Set up Enterprise Search Kibana Chrome

- Add SetEnterpriseSearchChrome
- Update Enterprise Search breadcrumbs to link to new overview plugin (+ update overview plugin URL per team discussion)
  - Add ability to break out of React Router basename by not using history.createhref
  - Update createHref mock to more closely match Kibana urls (adding /app prefix)
- Minor documentation fix

* Set up Enterprise Search plugin telemetry

- client-side: SendEnterpriseSearchTelemetry
- server-side: register saved objects, usage collector, etc.

* Enterprise search overview views (#23)

* Add formatTestSubj util

This allows us to correctly format strings into our casing for data-test-subj attrs

* Add images and stylesheet

* Add product card component

* Add index component

* Remove unused styles

* Fix inter-plugin links
- by add shouldNotCreateHref prop to RR helpers
- similiar to breadcrumb change

* Fix/clean up CSS

- Prefer EUI components over bespoke CSS (e.g. EuiCard)
- Remove unused or unspecific CSS
- Pull out product card CSS to its component
- Fix kebab-cased CSS classes to camelCased

* Clean up ProductCard props

- Prefer passing in our plugin consts instead of separate props
- Move productCardDescription to constants
- Update tests

* Add telemetry clicked actions to product buttons

+ revert data-test-subj strings to previous implementation
+ prune format_test_subj helper by using lodash util directly

* [PR feedback] Add new plugin to applicationUsageSchema per telemetry team request

* Fix failing functional navLinks test

* Fix telemetry schema test

* [Perf] Optimize assets size by switching from 300kb SVG to 25kb PNG

* Only show product cards if the user has access to that product

- adds access checks
- fixes flex/CSS to show one card at a time

Co-authored-by: Scotty Bollinger <scotty.bollinger@elastic.co>
  • Loading branch information
Constance and scottybollinger authored Sep 9, 2020
1 parent 87ca6ff commit d67a421
Show file tree
Hide file tree
Showing 35 changed files with 868 additions and 61 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ export const applicationUsageSchema = {
csm: commonSchema,
canvas: commonSchema,
dashboard_mode: commonSchema, // It's a forward app so we'll likely never report it
enterpriseSearch: commonSchema,
appSearch: commonSchema,
workplaceSearch: commonSchema,
graph: commonSchema,
Expand Down
28 changes: 28 additions & 0 deletions src/plugins/telemetry/schema/oss_plugins.json
Original file line number Diff line number Diff line change
Expand Up @@ -414,6 +414,34 @@
}
}
},
"enterpriseSearch": {
"properties": {
"clicks_total": {
"type": "long"
},
"clicks_7_days": {
"type": "long"
},
"clicks_30_days": {
"type": "long"
},
"clicks_90_days": {
"type": "long"
},
"minutes_on_screen_total": {
"type": "float"
},
"minutes_on_screen_7_days": {
"type": "float"
},
"minutes_on_screen_30_days": {
"type": "float"
},
"minutes_on_screen_90_days": {
"type": "float"
}
}
},
"appSearch": {
"properties": {
"clicks_total": {
Expand Down
30 changes: 29 additions & 1 deletion x-pack/plugins/enterprise_search/common/constants.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,24 @@ export const ENTERPRISE_SEARCH_PLUGIN = {
NAME: i18n.translate('xpack.enterpriseSearch.productName', {
defaultMessage: 'Enterprise Search',
}),
URL: '/app/enterprise_search',
NAV_TITLE: i18n.translate('xpack.enterpriseSearch.navTitle', {
defaultMessage: 'Overview',
}),
SUBTITLE: i18n.translate('xpack.enterpriseSearch.featureCatalogue.subtitle', {
defaultMessage: 'Search everything',
}),
DESCRIPTIONS: [
i18n.translate('xpack.enterpriseSearch.featureCatalogueDescription1', {
defaultMessage: 'Build a powerful search experience.',
}),
i18n.translate('xpack.enterpriseSearch.featureCatalogueDescription2', {
defaultMessage: 'Connect your users to relevant data.',
}),
i18n.translate('xpack.enterpriseSearch.featureCatalogueDescription3', {
defaultMessage: 'Unify your team content.',
}),
],
URL: '/app/enterprise_search/overview',
};

export const APP_SEARCH_PLUGIN = {
Expand All @@ -23,6 +40,10 @@ export const APP_SEARCH_PLUGIN = {
defaultMessage:
'Leverage dashboards, analytics, and APIs for advanced application search made simple.',
}),
CARD_DESCRIPTION: i18n.translate('xpack.enterpriseSearch.appSearch.productCardDescription', {
defaultMessage:
'Elastic App Search provides user-friendly tools to design and deploy a powerful search to your websites or web/mobile applications.',
}),
URL: '/app/enterprise_search/app_search',
SUPPORT_URL: 'https://discuss.elastic.co/c/enterprise-search/app-search/',
};
Expand All @@ -36,6 +57,13 @@ export const WORKPLACE_SEARCH_PLUGIN = {
defaultMessage:
'Search all documents, files, and sources available across your virtual workplace.',
}),
CARD_DESCRIPTION: i18n.translate(
'xpack.enterpriseSearch.workplaceSearch.productCardDescription',
{
defaultMessage:
"Unify all your team's content in one place, with instant connectivity to popular productivity and collaboration tools.",
}
),
URL: '/app/enterprise_search/workplace_search',
SUPPORT_URL: 'https://discuss.elastic.co/c/enterprise-search/workplace-search/',
};
Expand Down
4 changes: 4 additions & 0 deletions x-pack/plugins/enterprise_search/common/types/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@ export interface IInitialAppData {
ilmEnabled?: boolean;
isFederatedAuth?: boolean;
configuredLimits?: IConfiguredLimits;
access?: {
hasAppSearchAccess: boolean;
hasWorkplaceSearchAccess: boolean;
};
appSearch?: IAppSearchAccount;
workplaceSearch?: IWorkplaceSearchInitialData;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
* Jest to accept its use within a jest.mock()
*/
export const mockHistory = {
createHref: jest.fn(({ pathname }) => `/enterprise_search${pathname}`),
createHref: jest.fn(({ pathname }) => `/app/enterprise_search${pathname}`),
push: jest.fn(),
location: {
pathname: '/current-path',
Expand Down
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.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

export { ProductCard } from './product_card';
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

.productCard {
margin: $euiSizeS;

&__imageContainer {
max-height: 115px;
overflow: hidden;
background-color: #0076cc;

@include euiBreakpoint('s', 'm', 'l', 'xl') {
max-height: none;
}
}

&__image {
width: 100%;
height: auto;
}

.euiCard__content {
max-width: 350px;
margin-top: $euiSizeL;

@include euiBreakpoint('s', 'm', 'l', 'xl') {
margin-top: $euiSizeXL;
}
}

.euiCard__title {
margin-bottom: $euiSizeM;
font-weight: $euiFontWeightBold;

@include euiBreakpoint('s', 'm', 'l', 'xl') {
margin-bottom: $euiSizeL;
font-size: $euiSizeL;
}
}

.euiCard__description {
font-weight: $euiFontWeightMedium;
color: $euiColorMediumShade;
margin-bottom: $euiSize;
}

.euiCard__footer {
margin-bottom: $euiSizeS;

@include euiBreakpoint('s', 'm', 'l', 'xl') {
margin-bottom: $euiSizeM;
font-size: $euiSizeL;
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React from 'react';
import { shallow } from 'enzyme';

import { EuiCard } from '@elastic/eui';
import { EuiButton } from '../../../shared/react_router_helpers';
import { APP_SEARCH_PLUGIN, WORKPLACE_SEARCH_PLUGIN } from '../../../../../common/constants';

jest.mock('../../../shared/telemetry', () => ({
sendTelemetry: jest.fn(),
}));
import { sendTelemetry } from '../../../shared/telemetry';

import { ProductCard } from './';

describe('ProductCard', () => {
beforeEach(() => {
jest.clearAllMocks();
});

it('renders an App Search card', () => {
const wrapper = shallow(<ProductCard product={APP_SEARCH_PLUGIN} image="as.jpg" />);
const card = wrapper.find(EuiCard).dive().shallow();

expect(card.find('h2').text()).toEqual('Elastic App Search');
expect(card.find('.productCard__image').prop('src')).toEqual('as.jpg');

const button = card.find(EuiButton);
expect(button.prop('to')).toEqual('/app/enterprise_search/app_search');
expect(button.prop('data-test-subj')).toEqual('LaunchAppSearchButton');

button.simulate('click');
expect(sendTelemetry).toHaveBeenCalledWith(expect.objectContaining({ metric: 'app_search' }));
});

it('renders a Workplace Search card', () => {
const wrapper = shallow(<ProductCard product={WORKPLACE_SEARCH_PLUGIN} image="ws.jpg" />);
const card = wrapper.find(EuiCard).dive().shallow();

expect(card.find('h2').text()).toEqual('Elastic Workplace Search');
expect(card.find('.productCard__image').prop('src')).toEqual('ws.jpg');

const button = card.find(EuiButton);
expect(button.prop('to')).toEqual('/app/enterprise_search/workplace_search');
expect(button.prop('data-test-subj')).toEqual('LaunchWorkplaceSearchButton');

button.simulate('click');
expect(sendTelemetry).toHaveBeenCalledWith(
expect.objectContaining({ metric: 'workplace_search' })
);
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

import React, { useContext } from 'react';
import upperFirst from 'lodash/upperFirst';
import snakeCase from 'lodash/snakeCase';
import { i18n } from '@kbn/i18n';
import { EuiCard, EuiTextColor } from '@elastic/eui';

import { EuiButton } from '../../../shared/react_router_helpers';
import { sendTelemetry } from '../../../shared/telemetry';
import { KibanaContext, IKibanaContext } from '../../../index';

import './product_card.scss';

interface IProductCard {
// Expects product plugin constants (@see common/constants.ts)
product: {
ID: string;
NAME: string;
CARD_DESCRIPTION: string;
URL: string;
};
image: string;
}

export const ProductCard: React.FC<IProductCard> = ({ product, image }) => {
const { http } = useContext(KibanaContext) as IKibanaContext;

return (
<EuiCard
className="productCard"
titleElement="h2"
title={i18n.translate('xpack.enterpriseSearch.overview.productCard.heading', {
defaultMessage: `Elastic {productName}`,
values: { productName: product.NAME },
})}
image={
<div className="productCard__imageContainer">
<img src={image} className="productCard__image" alt="" role="presentation" />
</div>
}
paddingSize="l"
description={<EuiTextColor color="subdued">{product.CARD_DESCRIPTION}</EuiTextColor>}
footer={
<EuiButton
fill
to={product.URL}
shouldNotCreateHref={true}
onClick={() =>
sendTelemetry({
http,
product: 'enterprise_search',
action: 'clicked',
metric: snakeCase(product.ID),
})
}
data-test-subj={`Launch${upperFirst(product.ID)}Button`}
>
{i18n.translate('xpack.enterpriseSearch.overview.productCard.button', {
defaultMessage: `Launch {productName}`,
values: { productName: product.NAME },
})}
</EuiButton>
}
/>
);
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License;
* you may not use this file except in compliance with the Elastic License.
*/

.enterpriseSearchOverview {
padding-top: 78px;
background-image: url('./assets/bg_enterprise_search.png');
background-repeat: no-repeat;
background-size: 670px;
background-position: center -27px;

@include euiBreakpoint('m', 'l', 'xl') {
padding-top: 158px;
background-size: 1160px;
background-position: center -48px;
}

&__header {
text-align: center;
margin: auto;
}

&__heading {
@include euiBreakpoint('xs', 's') {
font-size: $euiFontSizeXL;
line-height: map-get(map-get($euiTitles, 'm'), 'line-height');
}
}

&__subheading {
color: $euiColorMediumShade;
font-size: $euiFontSize;

@include euiBreakpoint('m', 'l', 'xl') {
font-size: $euiFontSizeL;
margin-bottom: $euiSizeL;
}
}

// EUI override
.euiTitle + .euiTitle {
margin-top: 0;

@include euiBreakpoint('m', 'l', 'xl') {
margin-top: $euiSizeS;
}
}

.enterpriseSearchOverview__card {
flex-basis: 50%;
}
}
Loading

0 comments on commit d67a421

Please sign in to comment.