diff --git a/packages/kbn-search-connectors/components/scheduling/connector_scheduling.tsx b/packages/kbn-search-connectors/components/scheduling/connector_scheduling.tsx index 9f97a8ee63769..3d8ea94b3599a 100644 --- a/packages/kbn-search-connectors/components/scheduling/connector_scheduling.tsx +++ b/packages/kbn-search-connectors/components/scheduling/connector_scheduling.tsx @@ -42,8 +42,8 @@ export const SchedulePanel: FC> = ({ <> - -

{title}

+ +

{title}

@@ -115,7 +115,6 @@ export const ConnectorSchedulingComponent: React.FC - {hasIngestionError ? : <>} {children} diff --git a/packages/kbn-search-connectors/components/scheduling/full_content.tsx b/packages/kbn-search-connectors/components/scheduling/full_content.tsx index ced6c9ef8442e..de85f8fb2e4a9 100644 --- a/packages/kbn-search-connectors/components/scheduling/full_content.tsx +++ b/packages/kbn-search-connectors/components/scheduling/full_content.tsx @@ -129,10 +129,10 @@ export const ConnectorContentScheduling: React.FC + - -

{getAccordionTitle(type)}

+ +
{getAccordionTitle(type)}
diff --git a/packages/kbn-search-index-documents/components/documents_overview.test.tsx b/packages/kbn-search-index-documents/components/documents_overview.test.tsx index c11cc5eb2d98d..3f452e2e072a4 100644 --- a/packages/kbn-search-index-documents/components/documents_overview.test.tsx +++ b/packages/kbn-search-index-documents/components/documents_overview.test.tsx @@ -27,6 +27,6 @@ describe('DocumentList', () => { ); - expect(screen.getByText('Browse documents')).toBeInTheDocument(); + expect(screen.getByPlaceholderText('Search documents in this index')).toBeInTheDocument(); }); }); diff --git a/packages/kbn-search-index-documents/components/documents_overview.tsx b/packages/kbn-search-index-documents/components/documents_overview.tsx index d5f6807e313a7..8b5f210e8dd2e 100644 --- a/packages/kbn-search-index-documents/components/documents_overview.tsx +++ b/packages/kbn-search-index-documents/components/documents_overview.tsx @@ -7,16 +7,10 @@ * License v3.0 only", or the "Server Side Public License, v 1". */ -import { - EuiFieldSearch, - EuiFlexGroup, - EuiFlexItem, - EuiPanel, - EuiSpacer, - EuiTitle, -} from '@elastic/eui'; +import { EuiFieldSearch, EuiFlexGroup, EuiFlexItem, EuiPanel, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; import React, { ChangeEvent } from 'react'; +import { css } from '@emotion/react'; interface DocumentsProps { accessControlSwitch?: React.ReactNode; @@ -30,22 +24,22 @@ export const DocumentsOverview: React.FC = ({ documentComponent, searchQueryCallback, }) => { + const { euiTheme } = useEuiTheme(); return ( - - - - -

- {i18n.translate('searchIndexDocuments.documents.title', { - defaultMessage: 'Browse documents', - })} -

-
-
- {accessControlSwitch && {accessControlSwitch}} + + {accessControlSwitch && ( + + {accessControlSwitch} + + )} { label: i18n.translate( 'xpack.enterpriseSearch.content.connectors.connectorDetail.indexMappingsTabLabel', { - defaultMessage: 'Index mappings', + defaultMessage: 'Mappings', } ), onClick: () => diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/access_control_index_selector/access_control_index_selector.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/access_control_index_selector/access_control_index_selector.tsx index c525ed0a413af..e02741638f863 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/access_control_index_selector/access_control_index_selector.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/components/access_control_index_selector/access_control_index_selector.tsx @@ -7,21 +7,36 @@ import React from 'react'; -import { EuiFlexGrid, EuiFlexItem, EuiSuperSelect, EuiText, EuiTitle } from '@elastic/eui'; +import { + EuiFlexGroup, + EuiFlexItem, + EuiIcon, + EuiSuperSelect, + EuiText, + EuiTitle, +} from '@elastic/eui'; import { i18n } from '@kbn/i18n'; export interface AccessControlSelectorOption { description: string; + error?: boolean; title: string; value: 'content-index' | 'access-control-index'; } -const indexSelectorOptions: AccessControlSelectorOption[] = [ +interface IndexSelectorProps { + fullWidth?: boolean; + indexSelectorOptions?: AccessControlSelectorOption[]; + onChange(value: AccessControlSelectorOption['value']): void; + valueOfSelected?: AccessControlSelectorOption['value']; +} + +export const DEFAULT_INDEX_SELECTOR_OPTIONS: AccessControlSelectorOption[] = [ { description: i18n.translate( 'xpack.enterpriseSearch.content.searchIndex.documents.selector.contentIndex.description', { - defaultMessage: 'Browse content fields', + defaultMessage: 'Browse documents ingested by content syncs', } ), title: i18n.translate( @@ -36,7 +51,7 @@ const indexSelectorOptions: AccessControlSelectorOption[] = [ description: i18n.translate( 'xpack.enterpriseSearch.content.searchIndex.documents.selector.accessControl.description', { - defaultMessage: 'Browse document level security fields', + defaultMessage: 'Browse access control lists ingested by access control syncs', } ), title: i18n.translate( @@ -49,34 +64,44 @@ const indexSelectorOptions: AccessControlSelectorOption[] = [ }, ]; -interface IndexSelectorProps { - onChange(value: AccessControlSelectorOption['value']): void; - valueOfSelected?: AccessControlSelectorOption['value']; -} - export const AccessControlIndexSelector: React.FC = ({ - valueOfSelected, + indexSelectorOptions = DEFAULT_INDEX_SELECTOR_OPTIONS, onChange, + valueOfSelected, + fullWidth, }) => { return ( option.error) ? ( + + ) : undefined + } options={indexSelectorOptions.map((option) => { return { dropdownDisplay: ( - - - -

{option.title}

-
-
- - -

{option.description}

-
-
-
+ + {option.error ? ( + + {' '} + + ) : null} + + + +

{option.title}

+
+
+ + +

{option.description}

+
+
+
+
), inputDisplay: option.title, value: option.value, diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/sync_rules/connector_rules.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/sync_rules/connector_rules.tsx index 2607cea17ce6c..6791e7778c9a3 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/sync_rules/connector_rules.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/connector/sync_rules/connector_rules.tsx @@ -56,7 +56,6 @@ export const ConnectorSyncRules: React.FC = () => { setIsEditing={setIsEditing} /> )} - {hasDraft && ( @@ -71,18 +70,6 @@ export const ConnectorSyncRules: React.FC = () => { - - - -

- {i18n.translate('xpack.enterpriseSearch.index.connector.syncRules.title', { - defaultMessage: 'Sync rules ', - })} -

-
-
-
-

{i18n.translate('xpack.enterpriseSearch.index.connector.syncRules.description', { diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/documents.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/documents.tsx index 592da5d044f2a..d384d218c0e25 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/documents.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/documents.tsx @@ -133,6 +133,7 @@ export const SearchIndexDocuments: React.FC = () => { accessControlSwitch={ shouldShowAccessControlSwitcher ? ( diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/index_mappings.scss b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/index_mappings.scss index bdde0fedc412e..a52d3d75c851b 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/index_mappings.scss +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/index_mappings.scss @@ -1,3 +1,3 @@ .enterpriseSearchMappingsSelector { - max-width: $euiSizeXXL * 6; + width: 100%; } diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/index_mappings.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/index_mappings.tsx index b35415cc2e0e0..f9f46e854becd 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/index_mappings.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/index_mappings.tsx @@ -69,13 +69,13 @@ export const SearchIndexIndexMappings: React.FC = () => { return ( <> - {shouldShowAccessControlSwitch && ( diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/pipelines.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/pipelines.tsx index b05e2b66c37e8..40b7c9596cb3a 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/pipelines.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/pipelines.tsx @@ -110,7 +110,6 @@ export const SearchIndexPipelines: React.FC = () => { return ( <> - {showMissingPipelineCallout && ( <> { }), }, { - content: , + content: ( + <> + + + + ), id: SearchIndexTabId.DOCUMENTS, name: i18n.translate('xpack.enterpriseSearch.content.searchIndex.documentsTabLabel', { defaultMessage: 'Documents', }), }, { - content: , + content: ( + <> + + + + ), id: SearchIndexTabId.INDEX_MAPPINGS, name: i18n.translate('xpack.enterpriseSearch.content.searchIndex.indexMappingsTabLabel', { - defaultMessage: 'Index mappings', + defaultMessage: 'Mappings', }), }, ]; const CONNECTOR_TABS: EuiTabbedContentTab[] = [ { - content: , + content: ( + <> + + + + ), id: SearchIndexTabId.CONFIGURATION, name: i18n.translate('xpack.enterpriseSearch.content.searchIndex.configurationTabLabel', { defaultMessage: 'Configuration', @@ -167,7 +182,12 @@ export const SearchIndex: React.FC = () => { ...(hasFilteringFeature ? [ { - content: , + content: ( + <> + + + + ), id: SearchIndexTabId.SYNC_RULES, name: i18n.translate('xpack.enterpriseSearch.content.searchIndex.syncRulesTabLabel', { defaultMessage: 'Sync rules', @@ -176,7 +196,12 @@ export const SearchIndex: React.FC = () => { ] : []), { - content: , + content: ( + <> + + + + ), id: SearchIndexTabId.SCHEDULING, name: i18n.translate('xpack.enterpriseSearch.content.searchIndex.schedulingTabLabel', { defaultMessage: 'Scheduling', @@ -186,14 +211,24 @@ export const SearchIndex: React.FC = () => { const CRAWLER_TABS: EuiTabbedContentTab[] = [ { - content: , + content: ( + <> + + + + ), id: SearchIndexTabId.DOMAIN_MANAGEMENT, name: i18n.translate('xpack.enterpriseSearch.content.searchIndex.domainManagementTabLabel', { defaultMessage: 'Manage Domains', }), }, { - content: , + content: ( + <> + + + + ), id: SearchIndexTabId.CRAWLER_CONFIGURATION, name: i18n.translate( 'xpack.enterpriseSearch.content.searchIndex.crawlerConfigurationTabLabel', @@ -203,7 +238,12 @@ export const SearchIndex: React.FC = () => { ), }, { - content: , + content: ( + <> + + + + ), 'data-test-subj': 'entSearchContent-index-crawler-scheduler-tab', id: SearchIndexTabId.SCHEDULING, name: i18n.translate('xpack.enterpriseSearch.content.searchIndex.schedulingTabLabel', { @@ -213,7 +253,12 @@ export const SearchIndex: React.FC = () => { ]; const PIPELINES_TAB: EuiTabbedContentTab = { - content: , + content: ( + <> + + + + ), id: SearchIndexTabId.PIPELINES, name: i18n.translate('xpack.enterpriseSearch.content.searchIndex.pipelinesTabLabel', { defaultMessage: 'Pipelines', @@ -289,7 +334,7 @@ const Content: React.FC = ({ } return ( <> - + {isCrawlerIndex(index) && } ); diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/sync_jobs/sync_jobs.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/sync_jobs/sync_jobs.tsx index 9495716e1a5e0..2669457cb6837 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/sync_jobs/sync_jobs.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/sync_jobs/sync_jobs.tsx @@ -5,20 +5,25 @@ * 2.0. */ -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; +import { css } from '@emotion/react'; import { useActions, useValues } from 'kea'; -import { EuiButtonGroup } from '@elastic/eui'; +import { EuiFlexGroup, EuiFlexItem, EuiIconTip, EuiSpacer, useEuiTheme } from '@elastic/eui'; import { i18n } from '@kbn/i18n'; - import { Connector, SyncJobsTable } from '@kbn/search-connectors'; import { KibanaLogic } from '../../../../shared/kibana'; import { hasDocumentLevelSecurityFeature } from '../../../utils/connector_helpers'; +import { + AccessControlIndexSelector, + AccessControlSelectorOption, +} from '../components/access_control_index_selector/access_control_index_selector'; + import { SyncJobsViewLogic } from './sync_jobs_view_logic'; export interface SyncJobsProps { @@ -31,6 +36,8 @@ export const SyncJobs: React.FC = ({ connector }) => { productFeatures.hasDocumentLevelSecurityEnabled && hasDocumentLevelSecurityFeature(connector); const errorOnAccessSync = Boolean(connector.last_access_control_sync_error); const errorOnContentSync = Boolean(connector.last_sync_error); + const [selectedIndexType, setSelectedIndexType] = + useState('content-index'); const { connectorId, syncJobsPagination: pagination, @@ -63,44 +70,84 @@ export const SyncJobs: React.FC = ({ connector }) => { } }, [connectorId, selectedSyncJobCategory]); + useEffect(() => { + if (selectedIndexType === 'content-index') { + setSelectedSyncJobCategory('content'); + } else { + setSelectedSyncJobCategory('access_control'); + } + }, [selectedIndexType]); + const { euiTheme } = useEuiTheme(); return ( <> {shouldShowAccessSyncs && ( - { - if (optionId === 'content' || optionId === 'access_control') { - setSelectedSyncJobCategory(optionId); - } - }} - options={[ - { - id: 'content', - label: i18n.translate( - 'xpack.enterpriseSearch.content.syncJobs.lastSync.tableSelector.content.label', - { defaultMessage: 'Content syncs' } - ), - ...(errorOnContentSync ? { iconSide: 'right', iconType: 'warning' } : {}), - }, - - { - id: 'access_control', - label: i18n.translate( - 'xpack.enterpriseSearch.content.syncJobs.lastSync.tableSelector.accessControl.label', - { defaultMessage: 'Access control syncs' } - ), - ...(errorOnAccessSync ? { iconSide: 'right', iconType: 'warning' } : {}), - }, - ]} - /> + <> + + + + + + + {i18n.translate( + 'xpack.enterpriseSearch.accessControlIndexSelector.p.accessControlSyncsAreLabel', + { + defaultMessage: + 'Access control syncs keep permissions information up to date for document level security (DLS)', + } + )} +

+ } + position="right" + /> +
+
+ + )} {selectedSyncJobCategory === 'content' ? (