Skip to content

Commit fb16be9

Browse files
thompsonglthompsongl
committed
Merge branch 'main' into eui/59.0
2 parents 8f1b656 + 42905ec commit fb16be9

21 files changed

Lines changed: 417 additions & 256 deletions

File tree

‎x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/method_api.test.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0; you may not use this file except in compliance with the Elastic License
5+
* 2.0.
6+
*/
7+
8+
import React from 'react';
9+
10+
import { shallow } from 'enzyme';
11+
12+
import { MethodApi } from './method_api';
13+
import { NewSearchIndexTemplate } from './new_search_index_template';
14+
15+
describe('API ingestion method', () => {
16+
beforeEach(() => {
17+
jest.clearAllMocks();
18+
});
19+
20+
it('renders API ingestion method tab', () => {
21+
const wrapper = shallow(<MethodApi />);
22+
const template = wrapper.find(NewSearchIndexTemplate);
23+
24+
expect(template.prop('type')).toEqual('api');
25+
});
26+
});

‎x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/method_api.tsx‎

Lines changed: 9 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -8,76 +8,34 @@
88
/**
99
* TODO:
1010
* - Need to add documentation URLs (search for `#`s)
11-
* - Need to implement the logic for the attaching search engines functionality
1211
*/
1312

1413
import React from 'react';
1514

16-
import { useValues } from 'kea';
17-
18-
import { EuiCodeBlock, EuiLink, EuiPanel, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
19-
import { i18n } from '@kbn/i18n';
15+
import { EuiText } from '@elastic/eui';
2016
import { FormattedMessage } from '@kbn/i18n-react';
2117

22-
import { getEnterpriseSearchUrl } from '../../../shared/enterprise_search_url/external_url';
23-
24-
import { DOCUMENTS_API_JSON_EXAMPLE } from './constants';
25-
import { NewSearchIndexLogic } from './new_search_index_logic';
2618
import { NewSearchIndexTemplate } from './new_search_index_template';
2719

2820
export const MethodApi: React.FC = () => {
29-
const { name } = useValues(NewSearchIndexLogic);
30-
const apiKey = 1212312313; // TODO change this
31-
32-
const searchIndexApiUrl = getEnterpriseSearchUrl('/api/ent/v1/search_indices/');
33-
3421
return (
3522
<NewSearchIndexTemplate
23+
title={
24+
<FormattedMessage
25+
id="xpack.enterpriseSearch.content.newIndex.methodApi.title"
26+
defaultMessage="Index using the API"
27+
/>
28+
}
3629
description={
3730
<EuiText size="s">
3831
<FormattedMessage
3932
id="xpack.enterpriseSearch.content.newIndex.methodApi.description"
40-
defaultMessage="Your API endpoint can be used to add new documents to your index, update documents, retrieve documents by ID, and delete documents. There are a variety of {clientLibrariesLink} to help you get started."
41-
values={{
42-
clientLibrariesLink: (
43-
<EuiLink href="#" target="_blank">
44-
{i18n.translate(
45-
'xpack.enterpriseSearch.content.newIndex.methodApi.description.clientLibrariesLink',
46-
{
47-
defaultMessage: 'client libraries',
48-
}
49-
)}
50-
</EuiLink>
51-
),
52-
}}
33+
defaultMessage="Provide a name and optionally select a language analyzer for your documents. An Elasticsearch index will be created. In the next step, well display API instructions."
5334
/>
5435
</EuiText>
5536
}
5637
docsUrl="#"
5738
type="api"
58-
>
59-
<EuiPanel hasBorder>
60-
<EuiTitle size="xs">
61-
<h3>
62-
{i18n.translate('xpack.enterpriseSearch.content.newIndex.methodApi.endpointTitle', {
63-
defaultMessage: 'Enter a name to preview your new API endpoint',
64-
})}
65-
</h3>
66-
</EuiTitle>
67-
{name && (
68-
<>
69-
<EuiSpacer size="m" />
70-
<EuiCodeBlock language="bash" fontSize="m" isCopyable>
71-
{`\
72-
curl -X POST '${searchIndexApiUrl}${name}/document' \\
73-
-H 'Content-Type: application/json' \\
74-
-H 'Authorization: Bearer ${apiKey}' \\
75-
-d '${JSON.stringify(DOCUMENTS_API_JSON_EXAMPLE, null, 2)}'
76-
`}
77-
</EuiCodeBlock>
78-
</>
79-
)}
80-
</EuiPanel>
81-
</NewSearchIndexTemplate>
39+
/>
8240
);
8341
};

‎x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/method_connector.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { NewSearchIndexTemplate } from './new_search_index_template';
2121
export const MethodConnector: React.FC = () => {
2222
return (
2323
<NewSearchIndexTemplate
24+
title="Connector"
2425
description={i18n.translate(
2526
'xpack.enterpriseSearch.content.newIndex.methodConnector.description',
2627
{

‎x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/method_crawler.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import { NewSearchIndexTemplate } from './new_search_index_template';
2121
export const MethodCrawler: React.FC = () => {
2222
return (
2323
<NewSearchIndexTemplate
24+
title="Crawler"
2425
description={i18n.translate(
2526
'xpack.enterpriseSearch.content.newIndex.methodCrawler.description',
2627
{

‎x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/method_es.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export const MethodEs: React.FC = () => {
2626

2727
return (
2828
<NewSearchIndexTemplate
29+
title="Elasticsearch"
2930
description={i18n.translate(
3031
'xpack.enterpriseSearch.content.newIndex.methodElasticsearch.description',
3132
{

‎x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/method_json.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export const MethodJson: React.FC = () => {
2424

2525
return (
2626
<NewSearchIndexTemplate
27+
title="json"
2728
description={i18n.translate(
2829
'xpack.enterpriseSearch.content.newIndex.methodJson.description',
2930
{

‎x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/new_index.scss‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/*
2+
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
3+
* or more contributor license agreements. Licensed under the Elastic License
4+
* 2.0; you may not use this file except in compliance with the Elastic License
5+
* 2.0.
6+
*/
7+
8+
.entSearchNewIndexButtonGroupButton {
9+
border: $euiBorderThin;
10+
11+
&--selected {
12+
border: 1px $euiColorPrimary solid;
13+
}
14+
15+
.rightArrow {
16+
border-radius: $euiBorderRadiusSmall;
17+
background: transparentize($euiColorPrimary, .8);
18+
color: $euiColorPrimaryText;
19+
padding: $euiSizeXS;
20+
width: $euiSizeL;
21+
}
22+
}

‎x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/new_index/new_index.tsx‎

Lines changed: 58 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,9 @@ import React, { useState, useEffect } from 'react';
1717
import { useActions } from 'kea';
1818

1919
import {
20-
EuiCheckableCard,
2120
EuiFlexGroup,
2221
EuiFlexItem,
2322
EuiIcon,
24-
EuiLink,
2523
EuiPanel,
2624
EuiSpacer,
2725
EuiText,
@@ -40,11 +38,7 @@ import { MethodCrawler } from './method_crawler';
4038
import { MethodEs } from './method_es';
4139
import { MethodJson } from './method_json';
4240

43-
interface CardLabelProps {
44-
title: string;
45-
description: React.ReactNode;
46-
icon: string;
47-
}
41+
import './new_index.scss';
4842

4943
interface ButtonGroupOption {
5044
id: string;
@@ -67,68 +61,55 @@ export const NewIndex: React.FC = () => {
6761
id: 'crawler',
6862
icon: 'globe',
6963
label: i18n.translate('xpack.enterpriseSearch.content.newIndex.buttonGroup.crawler.label', {
70-
defaultMessage: 'Web crawler',
64+
defaultMessage: 'Use the web crawler',
7165
}),
7266
description: i18n.translate(
7367
'xpack.enterpriseSearch.content.newIndex.buttonGroup.crawler.description',
7468
{
75-
defaultMessage: 'Automatically index content from your website or knowlege base',
76-
}
77-
),
78-
},
79-
{
80-
id: 'api',
81-
icon: 'visVega',
82-
label: i18n.translate('xpack.enterpriseSearch.content.newIndex.buttonGroup.api.label', {
83-
defaultMessage: 'API',
84-
}),
85-
description: i18n.translate(
86-
'xpack.enterpriseSearch.content.newIndex.buttonGroup.api.description',
87-
{
88-
defaultMessage: 'Use a variety of client libraries to add documents to your search index',
69+
defaultMessage: 'Index content from your websites',
8970
}
9071
),
9172
},
9273
{
9374
id: 'connector',
9475
icon: 'package',
9576
label: i18n.translate('xpack.enterpriseSearch.content.newIndex.buttonGroup.connector.label', {
96-
defaultMessage: 'Connector',
77+
defaultMessage: 'Use a data integration',
9778
}),
9879
description: i18n.translate(
9980
'xpack.enterpriseSearch.content.newIndex.buttonGroup.connector.description',
10081
{
10182
defaultMessage:
102-
'Ingest data from content sources like GitHub, Google Drive or SharePoint',
83+
'Index content frrom third-party services such as SharePoint and Google Drive',
10384
}
10485
),
10586
},
10687
{
107-
id: 'elasticsearch',
108-
icon: 'logoElasticsearch',
109-
label: i18n.translate(
110-
'xpack.enterpriseSearch.content.newIndex.buttonGroup.elasticsearch.label',
111-
{
112-
defaultMessage: 'Elasticsearch index',
113-
}
114-
),
88+
id: 'api',
89+
icon: 'visVega',
90+
label: i18n.translate('xpack.enterpriseSearch.content.newIndex.buttonGroup.api.label', {
91+
defaultMessage: 'Use the API',
92+
}),
11593
description: i18n.translate(
116-
'xpack.enterpriseSearch.content.newIndex.buttonGroup.elasticsearch.description',
94+
'xpack.enterpriseSearch.content.newIndex.buttonGroup.api.description',
11795
{
118-
defaultMessage: 'Connect to an existing Elasticsearch index',
96+
defaultMessage: 'Use a variety of client libraries to add documents to your search index',
11997
}
12098
),
12199
},
122100
{
123-
id: 'json',
124-
icon: 'document',
125-
label: i18n.translate('xpack.enterpriseSearch.content.newIndex.buttonGroup.json.label', {
126-
defaultMessage: 'Paste or upload JSON',
127-
}),
101+
id: 'customIntegration',
102+
icon: 'package',
103+
label: i18n.translate(
104+
'xpack.enterpriseSearch.content.newIndex.buttonGroup.customIntegration.label',
105+
{
106+
defaultMessage: 'Build a custom data integration',
107+
}
108+
),
128109
description: i18n.translate(
129-
'xpack.enterpriseSearch.content.newIndex.buttonGroup.json.description',
110+
'xpack.enterpriseSearch.content.newIndex.buttonGroup.customIntegration.description',
130111
{
131-
defaultMessage: 'Manually upload JSON files',
112+
defaultMessage: 'Clone the connector package repo and start customizing.',
132113
}
133114
),
134115
},
@@ -150,37 +131,20 @@ export const NewIndex: React.FC = () => {
150131
</>
151132
);
152133

153-
const CardLabel: React.FC<CardLabelProps> = ({ title, description, icon }) => (
154-
<span style={{ minWidth: '13rem', width: 'calc(100% - .5rem)', display: 'inline-block' }}>
155-
<EuiFlexGroup gutterSize="s" alignItems="center">
156-
<EuiFlexItem grow={false}>
157-
<EuiIcon type={icon} color="text" />
158-
</EuiFlexItem>
159-
<EuiFlexItem>
160-
<EuiTitle size="xxs">
161-
<h4>{title}</h4>
162-
</EuiTitle>
163-
</EuiFlexItem>
164-
</EuiFlexGroup>
165-
<EuiSpacer size="xs" />
166-
<EuiText size="xs">{description}</EuiText>
167-
</span>
168-
);
169-
170134
const SelectSearchIndexLayout = () => (
171135
<>
172136
<EuiFlexGroup>
173-
<EuiFlexItem grow={false} style={{ maxWidth: '22rem' }}>
174-
<EuiPanel hasShadow={false} paddingSize="none" grow={false}>
137+
<EuiFlexItem grow={false} style={{ maxWidth: '24rem' }}>
138+
<EuiPanel hasShadow={false} paddingSize="m" grow={false} color="subdued">
175139
<EuiTitle size="xs">
176140
<h4>
177141
{i18n.translate('xpack.enterpriseSearch.content.newIndex.selectSearchIndex.title', {
178-
defaultMessage: 'Create a search index',
142+
defaultMessage: 'Select an ingestion method',
179143
})}
180144
</h4>
181145
</EuiTitle>
182146
<EuiSpacer size="xs" />
183-
<EuiText size="s">
147+
<EuiText size="xs">
184148
<p>
185149
{i18n.translate(
186150
'xpack.enterpriseSearch.content.newIndex.selectSearchIndex.description',
@@ -195,32 +159,42 @@ export const NewIndex: React.FC = () => {
195159
<EuiFlexGroup direction="column" gutterSize="s" alignItems="flexStart">
196160
{buttonGroupOptions.map((item) => (
197161
<EuiFlexItem style={{ width: 'calc(100% - .5rem)' }}>
198-
<EuiCheckableCard
199-
id={`method_${item.id}`}
200-
label={
201-
<CardLabel
202-
title={item.label}
203-
description={item.description}
204-
icon={item.icon}
205-
/>
162+
<EuiPanel
163+
className={
164+
selectedMethod.id === item.id
165+
? 'entSearchNewIndexButtonGroupButton--selected'
166+
: 'entSearchNewIndexButtonGroupButton'
206167
}
207-
value={item.id}
208-
name="method_options"
209-
onChange={() => handleMethodChange(item.id)}
210-
checked={selectedMethod.id === item.id}
211-
/>
168+
hasShadow={false}
169+
onClick={() => {
170+
handleMethodChange(item.id);
171+
}}
172+
>
173+
<EuiFlexGroup alignItems="center" responsive={false}>
174+
<EuiFlexItem grow>
175+
<EuiFlexGroup direction="column" gutterSize="none">
176+
<EuiFlexItem grow={false}>
177+
<EuiTitle size="xs">
178+
<h4>{item.label}</h4>
179+
</EuiTitle>
180+
</EuiFlexItem>
181+
<EuiFlexItem grow>
182+
<EuiText size="xs">
183+
<p>{item.description}</p>
184+
</EuiText>
185+
</EuiFlexItem>
186+
</EuiFlexGroup>
187+
</EuiFlexItem>
188+
<EuiFlexItem grow={false}>
189+
<div className="rightArrow">
190+
<EuiIcon type="arrowRight" color="primary" />
191+
</div>
192+
</EuiFlexItem>
193+
</EuiFlexGroup>
194+
</EuiPanel>
212195
</EuiFlexItem>
213196
))}
214197
</EuiFlexGroup>
215-
<EuiSpacer size="m" />
216-
<EuiLink href="#" target="_blank">
217-
{i18n.translate(
218-
'xpack.enterpriseSearch.content.newIndex.selectSearchIndex.learnMore.buttonText',
219-
{
220-
defaultMessage: 'Learn more about search indices',
221-
}
222-
)}
223-
</EuiLink>
224198
</EuiPanel>
225199
</EuiFlexItem>
226200
<EuiFlexItem>

0 commit comments

Comments
 (0)