diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/__mocks__/search_indices.mock.ts b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/__mocks__/search_indices.mock.ts index c77781af69bd16..0fccbf2c6f8a54 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/__mocks__/search_indices.mock.ts +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/__mocks__/search_indices.mock.ts @@ -191,7 +191,7 @@ export const indices: ElasticsearchIndexWithIngestion[] = [ count: 1, crawler: { id: '5', - index_name: 'crawler', + index_name: 'connector-crawler', }, hidden: false, name: 'crawler', diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/__mocks__/view_index.mock.ts b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/__mocks__/view_index.mock.ts index 6e1ebda40bc91a..4f5d4f97cab8ec 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/__mocks__/view_index.mock.ts +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/__mocks__/view_index.mock.ts @@ -205,7 +205,7 @@ export const crawlerIndex: CrawlerViewIndex = { count: 1, crawler: { id: '5', - index_name: 'crawler', + index_name: 'connector-crawler', }, hidden: false, ingestionMethod: IngestionMethod.CRAWLER, diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_name_and_description/connector_name_and_description_flyout.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_name_and_description/connector_name_and_description_flyout.tsx new file mode 100644 index 00000000000000..ee382bfc373ae1 --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_name_and_description/connector_name_and_description_flyout.tsx @@ -0,0 +1,99 @@ +/* + * 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. + */ + +import React from 'react'; + +import { useValues, useActions } from 'kea'; + +import { + EuiFlyout, + EuiFlyoutHeader, + EuiFlyoutBody, + EuiFormRow, + EuiText, + EuiSpacer, + EuiFlyoutFooter, + EuiButtonEmpty, + EuiButton, + EuiTitle, + EuiFlexGroup, + EuiFlexItem, +} from '@elastic/eui'; + +import { i18n } from '@kbn/i18n'; + +import { Status } from '../../../../../../../common/types/api'; +import { CANCEL_BUTTON_LABEL } from '../../../../../shared/constants'; + +import { ConnectorNameAndDescriptionApiLogic } from '../../../../api/connector/update_connector_name_and_description_api_logic'; + +import { ConnectorNameAndDescriptionFormContent } from './connector_name_and_description_form_content'; +import { ConnectorNameAndDescriptionLogic } from './connector_name_and_description_logic'; + +export const ConnectorNameAndDescriptionFlyout: React.FC = () => { + const { status } = useValues(ConnectorNameAndDescriptionApiLogic); + const { isEditing } = useValues(ConnectorNameAndDescriptionLogic); + const { saveNameAndDescription, setIsEditing } = useActions(ConnectorNameAndDescriptionLogic); + + if (!isEditing) return null; + + return ( + setIsEditing(false)} size="s"> + + +

+ {i18n.translate( + 'xpack.enterpriseSearch.content.indices.configurationConnector.nameAndDescriptionFlyout.title', + { + defaultMessage: 'Describe this crawler', + } + )} +

+ + + + + + + {i18n.translate( + 'xpack.enterpriseSearch.content.indices.configurationConnector.nameAndDescriptionFlyout.description', + { + defaultMessage: + 'By naming and describing this connector your colleagues and wider team will know what this connector is meant for.', + } + )} + + + + + + + + + + setIsEditing(false)} + isLoading={status === Status.LOADING} + > + {CANCEL_BUTTON_LABEL} + + + + + {i18n.translate( + 'xpack.enterpriseSearch.content.indices.configurationConnector.nameAndDescriptionFlyout.saveButtonLabel', + { + defaultMessage: 'Save name and description', + } + )} + + + + + + ); +}; diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_name_and_description/connector_name_and_description_form.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_name_and_description/connector_name_and_description_form.tsx index 18716a2c402de9..2f361c8e37da46 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_name_and_description/connector_name_and_description_form.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_name_and_description/connector_name_and_description_form.tsx @@ -12,40 +12,23 @@ import { useActions, useValues } from 'kea'; import { EuiButton, EuiButtonEmpty, - EuiFieldText, EuiFlexGroup, EuiFlexItem, EuiForm, EuiFormRow, - EuiTextArea, } from '@elastic/eui'; import { Status } from '../../../../../../../common/types/api'; -import { - NAME_LABEL, - DESCRIPTION_LABEL, - SAVE_BUTTON_LABEL, - CANCEL_BUTTON_LABEL, -} from '../../../../../shared/constants'; +import { SAVE_BUTTON_LABEL, CANCEL_BUTTON_LABEL } from '../../../../../shared/constants'; import { ConnectorNameAndDescriptionApiLogic } from '../../../../api/connector/update_connector_name_and_description_api_logic'; -import { isConnectorIndex } from '../../../../utils/indices'; -import { IndexViewLogic } from '../../index_view_logic'; +import { ConnectorNameAndDescriptionFormContent } from './connector_name_and_description_form_content'; import { ConnectorNameAndDescriptionLogic } from './connector_name_and_description_logic'; export const ConnectorNameAndDescriptionForm: React.FC = () => { - const { index } = useValues(IndexViewLogic); const { status } = useValues(ConnectorNameAndDescriptionApiLogic); - const { - localNameAndDescription: { name, description }, - } = useValues(ConnectorNameAndDescriptionLogic); - const { saveNameAndDescription, setIsEditing, updateLocalNameAndDescription } = useActions( - ConnectorNameAndDescriptionLogic - ); - if (!isConnectorIndex(index)) { - return <>; - } + const { saveNameAndDescription, setIsEditing } = useActions(ConnectorNameAndDescriptionLogic); return ( { }} component="form" > - - { - updateLocalNameAndDescription({ name: event.target.value }); - }} - /> - - - { - updateLocalNameAndDescription({ description: event.target.value }); - }} - /> - + diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_name_and_description/connector_name_and_description_form_content.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_name_and_description/connector_name_and_description_form_content.tsx new file mode 100644 index 00000000000000..695e69a2efe06a --- /dev/null +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_name_and_description/connector_name_and_description_form_content.tsx @@ -0,0 +1,46 @@ +/* + * 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. + */ + +import React from 'react'; + +import { useActions, useValues } from 'kea'; + +import { EuiFieldText, EuiFormRow, EuiTextArea } from '@elastic/eui'; + +import { NAME_LABEL, DESCRIPTION_LABEL, OPTIONAL_LABEL } from '../../../../../shared/constants'; + +import { ConnectorNameAndDescriptionLogic } from './connector_name_and_description_logic'; + +export const ConnectorNameAndDescriptionFormContent: React.FC = () => { + const { + localNameAndDescription: { name, description }, + } = useValues(ConnectorNameAndDescriptionLogic); + const { updateLocalNameAndDescription } = useActions(ConnectorNameAndDescriptionLogic); + + return ( + <> + + { + updateLocalNameAndDescription({ name: event.target.value }); + }} + /> + + + { + updateLocalNameAndDescription({ description: event.target.value }); + }} + /> + + + ); +}; diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_name_and_description/connector_name_and_description_logic.ts b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_name_and_description/connector_name_and_description_logic.ts index d8d83bbdeb5405..934b7c11e180f0 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_name_and_description/connector_name_and_description_logic.ts +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/connector_name_and_description/connector_name_and_description_logic.ts @@ -26,7 +26,7 @@ import { CachedFetchIndexApiLogicActions, } from '../../../../api/index/cached_fetch_index_api_logic'; import { FetchIndexApiResponse } from '../../../../api/index/fetch_index_api_logic'; -import { isConnectorIndex } from '../../../../utils/indices'; +import { isConnectorIndex, isCrawlerIndex } from '../../../../utils/indices'; type NameAndDescription = Partial>; @@ -72,7 +72,9 @@ export const ConnectorNameAndDescriptionLogic = kea< }, events: ({ actions, values }) => ({ afterMount: () => - actions.setNameAndDescription(isConnectorIndex(values.index) ? values.index.connector : {}), + actions.setNameAndDescription( + isConnectorIndex(values.index) || isCrawlerIndex(values.index) ? values.index.connector : {} + ), }), listeners: ({ actions, values }) => ({ apiError: (error) => flashAPIErrors(error), @@ -92,7 +94,7 @@ export const ConnectorNameAndDescriptionLogic = kea< }, makeRequest: () => clearFlashMessages(), saveNameAndDescription: () => { - if (isConnectorIndex(values.index)) { + if (isConnectorIndex(values.index) || isCrawlerIndex(values.index)) { actions.makeRequest({ connectorId: values.index.connector.id, indexName: values.index.connector.index_name, diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler_total_stats.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler_total_stats.tsx index f396dd19d53852..99687662419bd0 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler_total_stats.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler_total_stats.tsx @@ -9,10 +9,18 @@ import React from 'react'; import { useValues } from 'kea'; -import { EuiStatProps, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiStat } from '@elastic/eui'; +import { + EuiStatProps, + EuiFlexGroup, + EuiFlexItem, + EuiPanel, + EuiStat, + EuiSpacer, +} from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import { CrawlerLogic } from './crawler/crawler_logic'; +import { NameAndDescriptionStats } from './name_and_description_stats'; import { OverviewLogic } from './overview.logic'; export const CrawlerTotalStats: React.FC = () => { @@ -60,14 +68,18 @@ export const CrawlerTotalStats: React.FC = () => { ]; return ( - - {stats.map((item, index) => ( - - - - - - ))} - + <> + + + + {stats.map((item, index) => ( + + + + + + ))} + + ); }; diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/name_and_description_stats.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/name_and_description_stats.tsx index a7f150d24cbf20..3c5b44f6f571a9 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/name_and_description_stats.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/name_and_description_stats.tsx @@ -5,55 +5,58 @@ * 2.0. */ -import React from 'react'; +import React, { MouseEventHandler } from 'react'; -import { useValues } from 'kea'; +import { useActions, useValues } from 'kea'; -import { EuiFlexGroup, EuiFlexItem, EuiPanel, EuiStat, EuiStatProps, EuiText } from '@elastic/eui'; +import { + EuiButtonEmpty, + EuiFlexGroup, + EuiFlexItem, + EuiPanel, + EuiStat, + EuiStatProps, + EuiText, +} from '@elastic/eui'; import { DESCRIPTION_LABEL, NAME_LABEL } from '../../../shared/constants'; -import { generateEncodedPath } from '../../../shared/encode_path_params'; -import { EuiLinkTo } from '../../../shared/react_router_helpers'; -import { SEARCH_INDEX_TAB_PATH } from '../../routes'; -import { isConnectorIndex } from '../../utils/indices'; +import { isConnectorIndex, isCrawlerIndex } from '../../utils/indices'; -import { IndexNameLogic } from './index_name_logic'; +import { ConnectorNameAndDescriptionFlyout } from './connector/connector_name_and_description/connector_name_and_description_flyout'; +import { ConnectorNameAndDescriptionLogic } from './connector/connector_name_and_description/connector_name_and_description_logic'; import { OverviewLogic } from './overview.logic'; -import { SearchIndexTabId } from './search_index'; -const EditDescription: React.FC<{ label: string; indexName: string }> = ({ label, indexName }) => ( +const EditDescription: React.FC<{ + label: string; + onClick: MouseEventHandler; +}> = ({ label, onClick }) => ( {label} - - Edit - + Edit ); export const NameAndDescriptionStats: React.FC = () => { - const { indexName } = useValues(IndexNameLogic); const { indexData, isError, isLoading } = useValues(OverviewLogic); const hideStats = isLoading || isError; + const { setIsEditing: setIsFlyoutVisible } = useActions(ConnectorNameAndDescriptionLogic); - if (!isConnectorIndex(indexData)) { + if (!(isConnectorIndex(indexData) || isCrawlerIndex(indexData))) { return <>; } const stats: EuiStatProps[] = [ { - description: , + description: setIsFlyoutVisible(true)} />, isLoading: hideStats, title: indexData.connector.name, }, { - description: , + description: ( + setIsFlyoutVisible(true)} /> + ), isLoading: hideStats, title: {indexData.connector.description || ''}, titleElement: 'p', @@ -61,14 +64,17 @@ export const NameAndDescriptionStats: React.FC = () => { ]; return ( - - {stats.map((item, index) => ( - - - - - - ))} - + <> + + {stats.map((item, index) => ( + + + + + + ))} + + + ); }; diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/constants/labels.ts b/x-pack/plugins/enterprise_search/public/applications/shared/constants/labels.ts index edfef1ba1f3fc6..65c751493890d8 100644 --- a/x-pack/plugins/enterprise_search/public/applications/shared/constants/labels.ts +++ b/x-pack/plugins/enterprise_search/public/applications/shared/constants/labels.ts @@ -37,3 +37,7 @@ export const NAME_LABEL = i18n.translate('xpack.enterpriseSearch.nameLabel', { export const DESCRIPTION_LABEL = i18n.translate('xpack.enterpriseSearch.descriptionLabel', { defaultMessage: 'Description', }); + +export const OPTIONAL_LABEL = i18n.translate('xpack.enterpriseSearch.optionalLabel', { + defaultMessage: 'Optional', +});