mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
[Enterprise Search] Updated product_selector to match new No Data screens (#108592)
And updated product selector images to match new Kibana UI
This commit is contained in:
Caroline Horn
GitHub
parent
bfea4a1c2b
commit
e33cdc29c6
13 changed files with 62 additions and 168 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB After Width: | Height: | Size: 144 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 78 KiB |
|
|
@ -23,7 +23,7 @@ export const LicenseCallout: React.FC = () => {
|
|||
if (hasPlatinumLicense && !isTrial) return null;
|
||||
|
||||
return (
|
||||
<EuiPanel hasShadow={false} hasBorder className="productCard" paddingSize="l">
|
||||
<EuiPanel hasBorder color="transparent" paddingSize="l">
|
||||
<EuiFlexGroup gutterSize="s" alignItems="center" justifyContent="spaceBetween">
|
||||
<EuiFlexItem grow={7}>
|
||||
<EuiText>
|
||||
|
|
|
|||
|
|
@ -6,54 +6,10 @@
|
|||
*/
|
||||
|
||||
.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;
|
||||
@include euiBreakpoint('xs') {
|
||||
max-height: 115px;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,8 +11,6 @@ import React from 'react';
|
|||
|
||||
import { shallow } from 'enzyme';
|
||||
|
||||
import { EuiPage } from '@elastic/eui';
|
||||
|
||||
import { LicenseCallout } from '../license_callout';
|
||||
import { ProductCard } from '../product_card';
|
||||
import { SetupGuideCta } from '../setup_guide';
|
||||
|
|
@ -25,7 +23,6 @@ describe('ProductSelector', () => {
|
|||
setMockValues({ config: { host: '' } });
|
||||
const wrapper = shallow(<ProductSelector access={{}} />);
|
||||
|
||||
expect(wrapper.find(EuiPage).hasClass('enterpriseSearchOverview')).toBe(true);
|
||||
expect(wrapper.find(ProductCard)).toHaveLength(2);
|
||||
expect(wrapper.find(SetupGuideCta)).toHaveLength(1);
|
||||
expect(wrapper.find(LicenseCallout)).toHaveLength(0);
|
||||
|
|
|
|||
|
|
@ -9,20 +9,14 @@ import React from 'react';
|
|||
|
||||
import { useValues } from 'kea';
|
||||
|
||||
import {
|
||||
EuiPage,
|
||||
EuiPageBody,
|
||||
EuiPageHeader,
|
||||
EuiPageHeaderSection,
|
||||
EuiPageContentBody,
|
||||
EuiFlexGroup,
|
||||
EuiFlexItem,
|
||||
EuiSpacer,
|
||||
EuiTitle,
|
||||
EuiText,
|
||||
} from '@elastic/eui';
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiText } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
||||
import {
|
||||
KibanaPageTemplate,
|
||||
KibanaPageTemplateSolutionNavAvatar,
|
||||
NO_DATA_PAGE_TEMPLATE_PROPS,
|
||||
} from '../../../../../../../../src/plugins/kibana_react/public';
|
||||
import { APP_SEARCH_PLUGIN, WORKPLACE_SEARCH_PLUGIN } from '../../../../../common/constants';
|
||||
import { KibanaLogic } from '../../../shared/kibana';
|
||||
import { SetEnterpriseSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
|
||||
|
|
@ -51,52 +45,53 @@ export const ProductSelector: React.FC<ProductSelectorProps> = ({ access }) => {
|
|||
const shouldShowWorkplaceSearchCard = !config.host || hasWorkplaceSearchAccess;
|
||||
|
||||
return (
|
||||
<EuiPage restrictWidth className="enterpriseSearchOverview">
|
||||
<KibanaPageTemplate {...NO_DATA_PAGE_TEMPLATE_PROPS}>
|
||||
<SetPageChrome />
|
||||
<SendTelemetry action="viewed" metric="overview" />
|
||||
<TrialCallout />
|
||||
<EuiText textAlign="center">
|
||||
<KibanaPageTemplateSolutionNavAvatar
|
||||
name="Enterprise Search"
|
||||
iconType="logoEnterpriseSearch"
|
||||
size="xxl"
|
||||
/>
|
||||
|
||||
<EuiPageBody>
|
||||
<TrialCallout />
|
||||
<EuiPageHeader>
|
||||
<EuiPageHeaderSection className="enterpriseSearchOverview__header">
|
||||
<EuiTitle size="l">
|
||||
<h1>
|
||||
{i18n.translate('xpack.enterpriseSearch.overview.heading', {
|
||||
defaultMessage: 'Welcome to Elastic Enterprise Search',
|
||||
})}
|
||||
</h1>
|
||||
</EuiTitle>
|
||||
<EuiSpacer />
|
||||
<EuiText>
|
||||
<p>
|
||||
{config.host
|
||||
? i18n.translate('xpack.enterpriseSearch.overview.subheading', {
|
||||
defaultMessage: 'Add search to your app or organization.',
|
||||
})
|
||||
: i18n.translate('xpack.enterpriseSearch.overview.setupHeading', {
|
||||
defaultMessage: 'Choose a product to set up and get started.',
|
||||
})}
|
||||
</p>
|
||||
</EuiText>
|
||||
</EuiPageHeaderSection>
|
||||
</EuiPageHeader>
|
||||
<EuiPageContentBody>
|
||||
<EuiFlexGroup justifyContent="center" gutterSize="xl">
|
||||
{shouldShowAppSearchCard && (
|
||||
<EuiFlexItem grow={false} className="enterpriseSearchOverview__card">
|
||||
<ProductCard product={APP_SEARCH_PLUGIN} image={AppSearchImage} />
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
{shouldShowWorkplaceSearchCard && (
|
||||
<EuiFlexItem grow={false} className="enterpriseSearchOverview__card">
|
||||
<ProductCard product={WORKPLACE_SEARCH_PLUGIN} image={WorkplaceSearchImage} />
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
<EuiSpacer size="xxl" />
|
||||
{config.host ? <LicenseCallout /> : <SetupGuideCta />}
|
||||
</EuiPageContentBody>
|
||||
</EuiPageBody>
|
||||
</EuiPage>
|
||||
<EuiSpacer />
|
||||
|
||||
<h1>
|
||||
{i18n.translate('xpack.enterpriseSearch.overview.heading', {
|
||||
defaultMessage: 'Welcome to Elastic Enterprise Search',
|
||||
})}
|
||||
</h1>
|
||||
<p>
|
||||
{config.host
|
||||
? i18n.translate('xpack.enterpriseSearch.overview.subheading', {
|
||||
defaultMessage: 'Add search to your app or organization.',
|
||||
})
|
||||
: i18n.translate('xpack.enterpriseSearch.overview.setupHeading', {
|
||||
defaultMessage: 'Choose a product to set up and get started.',
|
||||
})}
|
||||
</p>
|
||||
</EuiText>
|
||||
|
||||
<EuiSpacer size="xxl" />
|
||||
|
||||
<EuiFlexGroup justifyContent="center" gutterSize="xl">
|
||||
{shouldShowAppSearchCard && (
|
||||
<EuiFlexItem grow={false}>
|
||||
<ProductCard product={APP_SEARCH_PLUGIN} image={AppSearchImage} />
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
{shouldShowWorkplaceSearchCard && (
|
||||
<EuiFlexItem grow={false}>
|
||||
<ProductCard product={WORKPLACE_SEARCH_PLUGIN} image={WorkplaceSearchImage} />
|
||||
</EuiFlexItem>
|
||||
)}
|
||||
</EuiFlexGroup>
|
||||
|
||||
<EuiSpacer size="xxl" />
|
||||
|
||||
{config.host ? <LicenseCallout /> : <SetupGuideCta />}
|
||||
</KibanaPageTemplate>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,20 +6,7 @@
|
|||
*/
|
||||
|
||||
.enterpriseSearchSetupCta {
|
||||
margin: $euiSize auto $euiSizeXL;
|
||||
|
||||
// Clickable EuiPanel override - line panel up with product cards
|
||||
&.euiPanel--isClickable {
|
||||
width: calc(100% - #{$euiSize});
|
||||
}
|
||||
|
||||
&__text {
|
||||
max-width: $euiSize * 40;
|
||||
}
|
||||
|
||||
&__image {
|
||||
display: block;
|
||||
max-width: 100%;
|
||||
width: $euiSize * 10;
|
||||
margin: 0 auto;
|
||||
|
||||
|
|
|
|||
|
|
@ -16,6 +16,6 @@ describe('SetupGuideCta', () => {
|
|||
const wrapper = shallow(<SetupGuideCta />);
|
||||
|
||||
expect(wrapper.find('.enterpriseSearchSetupCta')).toHaveLength(1);
|
||||
expect(wrapper.find('img')).toHaveLength(1);
|
||||
expect(wrapper.find('EuiImage')).toHaveLength(1);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
|
||||
import React from 'react';
|
||||
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiText } from '@elastic/eui';
|
||||
import { EuiFlexGroup, EuiFlexItem, EuiTitle, EuiText, EuiImage } from '@elastic/eui';
|
||||
import { i18n } from '@kbn/i18n';
|
||||
|
||||
import { EuiPanelTo } from '../../../shared/react_router_helpers';
|
||||
|
|
@ -22,9 +22,11 @@ export const SetupGuideCta: React.FC = () => (
|
|||
paddingSize="l"
|
||||
className="enterpriseSearchSetupCta"
|
||||
data-test-subj="setupGuideLink"
|
||||
hasBorder
|
||||
color="transparent"
|
||||
>
|
||||
<EuiFlexGroup alignItems="center" justifyContent="spaceBetween">
|
||||
<EuiFlexItem className="enterpriseSearchSetupCta__text">
|
||||
<EuiFlexItem>
|
||||
<EuiTitle size="s">
|
||||
<h2>{PRODUCT_SELECTOR_CALLOUT_HEADING}</h2>
|
||||
</EuiTitle>
|
||||
|
|
@ -36,7 +38,7 @@ export const SetupGuideCta: React.FC = () => (
|
|||
</EuiText>
|
||||
</EuiFlexItem>
|
||||
<EuiFlexItem grow={false}>
|
||||
<img src={CtaImage} alt="" className="enterpriseSearchSetupCta__image" />
|
||||
<EuiImage src={CtaImage} alt="" className="enterpriseSearchSetupCta__image" />
|
||||
</EuiFlexItem>
|
||||
</EuiFlexGroup>
|
||||
</EuiPanelTo>
|
||||
|
|
|
|||
|
|
@ -1,41 +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; you may not use this file except in compliance with the Elastic License
|
||||
* 2.0.
|
||||
*/
|
||||
|
||||
.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;
|
||||
@include euiBreakpoint('m', 'l', 'xl') {
|
||||
margin-bottom: $euiSizeL;
|
||||
}
|
||||
}
|
||||
|
||||
// EUI override
|
||||
.euiTitle + .euiTitle {
|
||||
margin-top: 0;
|
||||
|
||||
@include euiBreakpoint('m', 'l', 'xl') {
|
||||
margin-top: $euiSizeS;
|
||||
}
|
||||
}
|
||||
|
||||
.enterpriseSearchOverview__card {
|
||||
flex-basis: 50%;
|
||||
}
|
||||
}
|
||||
|
|
@ -19,8 +19,6 @@ import { ProductSelector } from './components/product_selector';
|
|||
import { SetupGuide } from './components/setup_guide';
|
||||
import { ROOT_PATH, SETUP_GUIDE_PATH } from './routes';
|
||||
|
||||
import './index.scss';
|
||||
|
||||
export const EnterpriseSearch: React.FC<InitialAppData> = ({ access = {} }) => {
|
||||
const { errorConnecting } = useValues(HttpLogic);
|
||||
const { config } = useValues(KibanaLogic);
|
||||
|
|
|
|||
|
|
@ -64,7 +64,7 @@ describe('renderApp', () => {
|
|||
|
||||
it('renders EnterpriseSearch', () => {
|
||||
mount(EnterpriseSearch);
|
||||
expect(mockContainer.querySelector('.enterpriseSearchOverview')).not.toBeNull();
|
||||
expect(mockContainer.querySelector('.kbnPageTemplate')).not.toBeNull();
|
||||
});
|
||||
|
||||
it('renders AppSearch', () => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue