Skip to content

Commit c3a9ffa

Browse files
committed
WIP of name and description flyout
1 parent 66f1b92 commit c3a9ffa

File tree

7 files changed

+207
-83
lines changed

7 files changed

+207
-83
lines changed

x-pack/plugins/enterprise_search/common/types/indices.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export interface ConnectorIndex extends ElasticsearchIndex {
3939

4040
export interface CrawlerIndex extends ElasticsearchIndex {
4141
crawler: Crawler;
42-
connector?: Connector;
42+
connector: Connector;
4343
}
4444

4545
export interface ElasticsearchIndexWithPrivileges extends ElasticsearchIndex {
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
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 { useValues, useActions } from 'kea';
11+
12+
import {
13+
EuiFlyout,
14+
EuiFlyoutHeader,
15+
EuiFlyoutBody,
16+
EuiFormRow,
17+
EuiText,
18+
EuiSpacer,
19+
EuiFlyoutFooter,
20+
EuiButtonEmpty,
21+
EuiButton,
22+
EuiTitle,
23+
EuiFlexGroup,
24+
EuiFlexItem,
25+
} from '@elastic/eui';
26+
27+
import { i18n } from '@kbn/i18n';
28+
29+
import { Status } from '../../../../../../../common/types/api';
30+
31+
import { ConnectorNameAndDescriptionApiLogic } from '../../../../api/connector/update_connector_name_and_description_api_logic';
32+
33+
import { ConnectorNameAndDescriptionFormContent } from './connector_name_and_description_form_content';
34+
import { ConnectorNameAndDescriptionLogic } from './connector_name_and_description_logic';
35+
36+
export const ConnectorNameAndDescriptionFlyout: React.FC = () => {
37+
const { status } = useValues(ConnectorNameAndDescriptionApiLogic);
38+
const { isEditing, nameAndDescription, localNameAndDescription } = useValues(
39+
ConnectorNameAndDescriptionLogic
40+
);
41+
const { saveNameAndDescription, setIsEditing } = useActions(ConnectorNameAndDescriptionLogic);
42+
43+
console.log({
44+
nameAndDescription: JSON.stringify(nameAndDescription),
45+
localNameAndDescription: JSON.stringify(localNameAndDescription),
46+
});
47+
if (!isEditing) return null;
48+
49+
return (
50+
<EuiFlyout onClose={() => setIsEditing(false)} size="s">
51+
<EuiFlyoutHeader>
52+
<EuiTitle size="m">
53+
<h3>Describe this crawler</h3>
54+
</EuiTitle>
55+
</EuiFlyoutHeader>
56+
57+
<EuiFlyoutBody>
58+
<EuiFormRow>
59+
<EuiText size="s">
60+
{i18n.translate(
61+
'xpack.enterpriseSearch.content.indices.configurationConnector.nameAndDescriptionForm.description',
62+
{
63+
defaultMessage:
64+
'By naming and describing this connector your colleagues and wider team will know what this connector is meant for.',
65+
}
66+
)}
67+
</EuiText>
68+
</EuiFormRow>
69+
<EuiSpacer />
70+
<ConnectorNameAndDescriptionFormContent />
71+
</EuiFlyoutBody>
72+
73+
<EuiFlyoutFooter>
74+
<EuiFlexGroup justifyContent="spaceBetween">
75+
<EuiFlexItem grow={false}>
76+
<EuiButtonEmpty
77+
onClick={() => setIsEditing(false)}
78+
isDisabled={status === Status.LOADING}
79+
>
80+
Cancel
81+
</EuiButtonEmpty>
82+
</EuiFlexItem>
83+
<EuiFlexItem grow={false}>
84+
<EuiButton isLoading={status === Status.LOADING} fill onClick={saveNameAndDescription}>
85+
Save name and description
86+
</EuiButton>
87+
</EuiFlexItem>
88+
</EuiFlexGroup>
89+
</EuiFlyoutFooter>
90+
</EuiFlyout>
91+
);
92+
};

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_name_and_description/connector_name_and_description_form.tsx

Lines changed: 4 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -12,40 +12,23 @@ import { useActions, useValues } from 'kea';
1212
import {
1313
EuiButton,
1414
EuiButtonEmpty,
15-
EuiFieldText,
1615
EuiFlexGroup,
1716
EuiFlexItem,
1817
EuiForm,
1918
EuiFormRow,
20-
EuiTextArea,
2119
} from '@elastic/eui';
2220

2321
import { Status } from '../../../../../../../common/types/api';
24-
import {
25-
NAME_LABEL,
26-
DESCRIPTION_LABEL,
27-
SAVE_BUTTON_LABEL,
28-
CANCEL_BUTTON_LABEL,
29-
} from '../../../../../shared/constants';
22+
import { SAVE_BUTTON_LABEL, CANCEL_BUTTON_LABEL } from '../../../../../shared/constants';
3023
import { ConnectorNameAndDescriptionApiLogic } from '../../../../api/connector/update_connector_name_and_description_api_logic';
31-
import { isConnectorIndex } from '../../../../utils/indices';
32-
import { IndexViewLogic } from '../../index_view_logic';
3324

25+
import { ConnectorNameAndDescriptionFormContent } from './connector_name_and_description_form_content';
3426
import { ConnectorNameAndDescriptionLogic } from './connector_name_and_description_logic';
3527

3628
export const ConnectorNameAndDescriptionForm: React.FC = () => {
37-
const { index: indexData } = useValues(IndexViewLogic);
3829
const { status } = useValues(ConnectorNameAndDescriptionApiLogic);
39-
const {
40-
localNameAndDescription: { name, description },
41-
} = useValues(ConnectorNameAndDescriptionLogic);
42-
const { saveNameAndDescription, setIsEditing, updateLocalNameAndDescription } = useActions(
43-
ConnectorNameAndDescriptionLogic
44-
);
4530

46-
if (!isConnectorIndex(indexData)) {
47-
return <></>;
48-
}
31+
const { saveNameAndDescription, setIsEditing } = useActions(ConnectorNameAndDescriptionLogic);
4932

5033
return (
5134
<EuiForm
@@ -55,24 +38,7 @@ export const ConnectorNameAndDescriptionForm: React.FC = () => {
5538
}}
5639
component="form"
5740
>
58-
<EuiFormRow label={NAME_LABEL}>
59-
<EuiFieldText
60-
required
61-
value={name ?? ''}
62-
onChange={(event) => {
63-
updateLocalNameAndDescription({ name: event.target.value });
64-
}}
65-
/>
66-
</EuiFormRow>
67-
<EuiFormRow label={DESCRIPTION_LABEL}>
68-
<EuiTextArea
69-
placeholder={'Optional'}
70-
value={description || ''}
71-
onChange={(event) => {
72-
updateLocalNameAndDescription({ description: event.target.value });
73-
}}
74-
/>
75-
</EuiFormRow>
41+
<ConnectorNameAndDescriptionFormContent />
7642
<EuiFormRow>
7743
<EuiFlexGroup>
7844
<EuiFlexItem grow={false}>
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
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 { useActions, useValues } from 'kea';
11+
12+
import { EuiFieldText, EuiFormRow, EuiTextArea } from '@elastic/eui';
13+
14+
import { NAME_LABEL, DESCRIPTION_LABEL } from '../../../../../shared/constants';
15+
16+
import { ConnectorNameAndDescriptionLogic } from './connector_name_and_description_logic';
17+
18+
export const ConnectorNameAndDescriptionFormContent: React.FC = () => {
19+
const {
20+
localNameAndDescription: { name, description },
21+
} = useValues(ConnectorNameAndDescriptionLogic);
22+
const { updateLocalNameAndDescription } = useActions(ConnectorNameAndDescriptionLogic);
23+
24+
return (
25+
<>
26+
<EuiFormRow label={NAME_LABEL}>
27+
<EuiFieldText
28+
required
29+
value={name ?? ''}
30+
onChange={(event) => {
31+
updateLocalNameAndDescription({ name: event.target.value });
32+
}}
33+
/>
34+
</EuiFormRow>
35+
<EuiFormRow label={DESCRIPTION_LABEL}>
36+
<EuiTextArea
37+
placeholder={'Optional'}
38+
value={description || ''}
39+
onChange={(event) => {
40+
updateLocalNameAndDescription({ description: event.target.value });
41+
}}
42+
/>
43+
</EuiFormRow>
44+
</>
45+
);
46+
};

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_name_and_description/connector_name_and_description_logic.ts

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ import {
2626
FetchIndexApiParams,
2727
FetchIndexApiResponse,
2828
} from '../../../../api/index/fetch_index_api_logic';
29-
import { isConnectorIndex } from '../../../../utils/indices';
29+
import { isConnectorIndex, isCrawlerIndex } from '../../../../utils/indices';
3030

3131
type NameAndDescription = Partial<Pick<Connector, 'name' | 'description'>>;
3232

@@ -72,7 +72,9 @@ export const ConnectorNameAndDescriptionLogic = kea<
7272
},
7373
events: ({ actions, values }) => ({
7474
afterMount: () =>
75-
actions.setNameAndDescription(isConnectorIndex(values.index) ? values.index.connector : {}),
75+
actions.setNameAndDescription(
76+
isConnectorIndex(values.index) || isCrawlerIndex(values.index) ? values.index.connector : {}
77+
),
7678
}),
7779
listeners: ({ actions, values }) => ({
7880
apiError: (error) => flashAPIErrors(error),
@@ -92,7 +94,7 @@ export const ConnectorNameAndDescriptionLogic = kea<
9294
},
9395
makeRequest: () => clearFlashMessages(),
9496
saveNameAndDescription: () => {
95-
if (isConnectorIndex(values.index)) {
97+
if (isConnectorIndex(values.index) || isCrawlerIndex(values.index)) {
9698
actions.makeRequest({
9799
connectorId: values.index.connector.id,
98100
indexName: values.index.connector.index_name,

x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler_total_stats.tsx

Lines changed: 22 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,10 +9,18 @@ import React from 'react';
99

1010
import { useValues } from 'kea';
1111

12-
import { EuiStatProps, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiStat } from '@elastic/eui';
12+
import {
13+
EuiStatProps,
14+
EuiFlexGroup,
15+
EuiFlexItem,
16+
EuiPanel,
17+
EuiStat,
18+
EuiSpacer,
19+
} from '@elastic/eui';
1320
import { i18n } from '@kbn/i18n';
1421

1522
import { CrawlerLogic } from './crawler/crawler_logic';
23+
import { NameAndDescriptionStats } from './name_and_description_stats';
1624
import { OverviewLogic } from './overview.logic';
1725

1826
export const CrawlerTotalStats: React.FC = () => {
@@ -60,14 +68,18 @@ export const CrawlerTotalStats: React.FC = () => {
6068
];
6169

6270
return (
63-
<EuiFlexGroup direction="row">
64-
{stats.map((item, index) => (
65-
<EuiFlexItem key={index}>
66-
<EuiPanel color={index === 0 ? 'primary' : 'subdued'} hasShadow={false} paddingSize="l">
67-
<EuiStat {...item} />
68-
</EuiPanel>
69-
</EuiFlexItem>
70-
))}
71-
</EuiFlexGroup>
71+
<>
72+
<NameAndDescriptionStats />
73+
<EuiSpacer />
74+
<EuiFlexGroup direction="row">
75+
{stats.map((item, index) => (
76+
<EuiFlexItem key={index}>
77+
<EuiPanel color={index === 0 ? 'primary' : 'subdued'} hasShadow={false} paddingSize="l">
78+
<EuiStat {...item} />
79+
</EuiPanel>
80+
</EuiFlexItem>
81+
))}
82+
</EuiFlexGroup>
83+
</>
7284
);
7385
};

0 commit comments

Comments
 (0)