Skip to content

Commit

Permalink
[Enterprise Search] Updated product_selector to match new No Data s…
Browse files Browse the repository at this point in the history 
…creens (elastic#108592)

And updated product selector images to match new Kibana UI
  • Loading branch information
@cchaos @kibanamachine
cchaos authored and kibanamachine committed Aug 14, 2021
1 parent 5e1e8bd commit eb2e72b
Show file tree
Hide file tree
Showing 13 changed files with 62 additions and 168 deletions.
Binary file modified ...s/enterprise_search/public/applications/enterprise_search/assets/app_search.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed ...se_search/public/applications/enterprise_search/assets/bg_enterprise_search.png
View file
Binary file not shown.
Binary file modified ...rprise_search/public/applications/enterprise_search/assets/workplace_search.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion ...arch/public/applications/enterprise_search/components/license_callout/license_callout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
50 changes: 3 additions & 47 deletions ...se_search/public/applications/enterprise_search/components/product_card/product_card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
3 changes: 0 additions & 3 deletions ...blic/applications/enterprise_search/components/product_selector/product_selector.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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);
Expand Down
107 changes: 51 additions & 56 deletions ...ch/public/applications/enterprise_search/components/product_selector/product_selector.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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"
/>

<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" />

<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>
{config.host ? <LicenseCallout /> : <SetupGuideCta />}
</KibanaPageTemplate>
);
};
13 changes: 0 additions & 13 deletions ..._search/public/applications/enterprise_search/components/setup_guide/setup_guide_cta.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
2 changes: 1 addition & 1 deletion ...rch/public/applications/enterprise_search/components/setup_guide/setup_guide_cta.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});
8 changes: 5 additions & 3 deletions ...e_search/public/applications/enterprise_search/components/setup_guide/setup_guide_cta.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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>
Expand All @@ -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>
Expand Down
41 changes: 0 additions & 41 deletions x-pack/plugins/enterprise_search/public/applications/enterprise_search/index.scss
View file

This file was deleted.

2 changes: 0 additions & 2 deletions x-pack/plugins/enterprise_search/public/applications/enterprise_search/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
2 changes: 1 addition & 1 deletion x-pack/plugins/enterprise_search/public/applications/index.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down

0 comments on commit eb2e72b

Please sign in to comment.