-
Notifications
You must be signed in to change notification settings - Fork 8.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[Enterprise Search] Add Overview landing page/plugin (#76734)
* [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
1 parent
87ca6ff
commit d67a421
Showing
35 changed files
with
868 additions
and
61 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Binary file added
BIN
+25 KB
...s/enterprise_search/public/applications/enterprise_search/assets/app_search.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+24.2 KB
...se_search/public/applications/enterprise_search/assets/bg_enterprise_search.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added
BIN
+29.8 KB
...rprise_search/public/applications/enterprise_search/assets/workplace_search.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions
7
.../enterprise_search/public/applications/enterprise_search/components/product_card/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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'; |
58 changes: 58 additions & 0 deletions
58
...se_search/public/applications/enterprise_search/components/product_card/product_card.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} | ||
} | ||
} |
57 changes: 57 additions & 0 deletions
57
...earch/public/applications/enterprise_search/components/product_card/product_card.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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' }) | ||
); | ||
}); | ||
}); |
71 changes: 71 additions & 0 deletions
71
...ise_search/public/applications/enterprise_search/components/product_card/product_card.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> | ||
} | ||
/> | ||
); | ||
}; |
54 changes: 54 additions & 0 deletions
54
x-pack/plugins/enterprise_search/public/applications/enterprise_search/index.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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%; | ||
} | ||
} |
Oops, something went wrong.