[8.x] [Search][DLS] UX improvements (#193945) (#195062)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Search][DLS] UX improvements
(#193945)](https://github.com/elastic/kibana/pull/193945)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"José Luis
González","email":"joseluisgj@gmail.com"},"sourceCommit":{"committedDate":"2024-10-04T13:57:04Z","message":"[Search][DLS]
UX improvements (#193945)\n\n## Summary\r\n\r\nThis PR add several
changes ir order to bring more consistency and\r\nbetter UX managing
_Content Indices_ and _Access Control Indices_:\r\n- The
`AccessControlIndexSelector ` will have always a `min-width`
to\r\ndisplay without line breaks the content for better reading\r\n-
Remove ~~_Browse documents_~~ title in Documents section and
~~_Sync\r\nrules_~~.\r\n- Same gutter and space for each tab section
content using a more\r\ncondensed design\r\n- _~~Index~~ Mappings_
tabbed name section has been renamed simple\r\n_Mappings_\r\n- The
Overview table sync now is managed by the
same\r\n`<AccessControlIndexSelector/>` as it is in _Documents_ and
_Mappings_\r\nsections\r\n- The `<AccessControlIndexSelector/>` componen
now can be more\r\ncusomized, passing custom title and description,
error status,\r\n_fullWidth_ and some more.\r\n- The `search_index.tsx`
file for rendering indices was fixed to use\r\nsame spacing and tabs
size\r\n\r\n![CleanShot 2024-09-24 at 15
41\r\n47](https://github.com/user-attachments/assets/02bf764d-672a-4b7b-b861-23d98502b912)\r\n\r\n\r\n---------\r\n\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"4e65fd2ece8e8211705db6d613a7c7ce59608e76","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:EnterpriseSearch","v8.16.0","backport:version"],"title":"[Search][DLS]
UX
improvements","number":193945,"url":"https://github.com/elastic/kibana/pull/193945","mergeCommit":{"message":"[Search][DLS]
UX improvements (#193945)\n\n## Summary\r\n\r\nThis PR add several
changes ir order to bring more consistency and\r\nbetter UX managing
_Content Indices_ and _Access Control Indices_:\r\n- The
`AccessControlIndexSelector ` will have always a `min-width`
to\r\ndisplay without line breaks the content for better reading\r\n-
Remove ~~_Browse documents_~~ title in Documents section and
~~_Sync\r\nrules_~~.\r\n- Same gutter and space for each tab section
content using a more\r\ncondensed design\r\n- _~~Index~~ Mappings_
tabbed name section has been renamed simple\r\n_Mappings_\r\n- The
Overview table sync now is managed by the
same\r\n`<AccessControlIndexSelector/>` as it is in _Documents_ and
_Mappings_\r\nsections\r\n- The `<AccessControlIndexSelector/>` componen
now can be more\r\ncusomized, passing custom title and description,
error status,\r\n_fullWidth_ and some more.\r\n- The `search_index.tsx`
file for rendering indices was fixed to use\r\nsame spacing and tabs
size\r\n\r\n![CleanShot 2024-09-24 at 15
41\r\n47](https://github.com/user-attachments/assets/02bf764d-672a-4b7b-b861-23d98502b912)\r\n\r\n\r\n---------\r\n\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"4e65fd2ece8e8211705db6d613a7c7ce59608e76"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/193945","number":193945,"mergeCommit":{"message":"[Search][DLS]
UX improvements (#193945)\n\n## Summary\r\n\r\nThis PR add several
changes ir order to bring more consistency and\r\nbetter UX managing
_Content Indices_ and _Access Control Indices_:\r\n- The
`AccessControlIndexSelector ` will have always a `min-width`
to\r\ndisplay without line breaks the content for better reading\r\n-
Remove ~~_Browse documents_~~ title in Documents section and
~~_Sync\r\nrules_~~.\r\n- Same gutter and space for each tab section
content using a more\r\ncondensed design\r\n- _~~Index~~ Mappings_
tabbed name section has been renamed simple\r\n_Mappings_\r\n- The
Overview table sync now is managed by the
same\r\n`<AccessControlIndexSelector/>` as it is in _Documents_ and
_Mappings_\r\nsections\r\n- The `<AccessControlIndexSelector/>` componen
now can be more\r\ncusomized, passing custom title and description,
error status,\r\n_fullWidth_ and some more.\r\n- The `search_index.tsx`
file for rendering indices was fixed to use\r\nsame spacing and tabs
size\r\n\r\n![CleanShot 2024-09-24 at 15
41\r\n47](https://github.com/user-attachments/assets/02bf764d-672a-4b7b-b861-23d98502b912)\r\n\r\n\r\n---------\r\n\r\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"4e65fd2ece8e8211705db6d613a7c7ce59608e76"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: José Luis González <joseluisgj@gmail.com>

packages/kbn-search-connectors/components/scheduling/connector_scheduling.tsx

@@ -42,8 +42,8 @@ export const SchedulePanel: FC<PropsWithChildren<SchedulePanelProps>> = ({
     <>
       <EuiSplitPanel.Outer>
         <EuiSplitPanel.Inner color="subdued">
-          <EuiTitle>
-            <h2>{title}</h2>
+          <EuiTitle size="s">
+            <h4>{title}</h4>
           </EuiTitle>
         </EuiSplitPanel.Inner>
         <EuiSplitPanel.Inner>
@@ -115,7 +115,6 @@ export const ConnectorSchedulingComponent: React.FC<ConnectorContentSchedulingPr
   }
   return (
     <>
-      <EuiSpacer size="l" />
       {hasIngestionError ? <ConnectorError /> : <></>}
       {children}
       <EuiFlexGroup>

packages/kbn-search-connectors/components/scheduling/full_content.tsx

@@ -129,10 +129,10 @@ export const ConnectorContentScheduling: React.FC<ConnectorContentSchedulingProp
           paddingSize="m"
           id={`${type}-content-sync-schedule`}
           buttonContent={
-            <EuiFlexGroup direction="column" gutterSize="s">
+            <EuiFlexGroup direction="column" gutterSize="xs">
               <EuiFlexItem>
-                <EuiTitle size="s">
-                  <h4>{getAccordionTitle(type)}</h4>
+                <EuiTitle size="xs">
+                  <h5>{getAccordionTitle(type)}</h5>
                 </EuiTitle>
               </EuiFlexItem>
               <EuiFlexItem>

packages/kbn-search-index-documents/components/documents_overview.test.tsx

@@ -27,6 +27,6 @@ describe('DocumentList', () => {
       </I18nProvider>
     );
 
-    expect(screen.getByText('Browse documents')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Search documents in this index')).toBeInTheDocument();
   });
 });

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<DocumentsProps> = ({
   documentComponent,
   searchQueryCallback,
 }) => {
+  const { euiTheme } = useEuiTheme();
   return (
     <EuiPanel hasBorder={false} hasShadow={false} paddingSize="none">
-      <EuiSpacer />
       <EuiFlexGroup direction="column">
         <EuiFlexItem>
-          <EuiFlexGroup direction="row" alignItems="center">
-            <EuiFlexItem className="enterpriseSearchDocumentsHeader" grow={false}>
-              <EuiTitle size="s">
-                <h2>
-                  {i18n.translate('searchIndexDocuments.documents.title', {
-                    defaultMessage: 'Browse documents',
-                  })}
-                </h2>
-              </EuiTitle>
-            </EuiFlexItem>
-            {accessControlSwitch && <EuiFlexItem grow={false}>{accessControlSwitch}</EuiFlexItem>}
+          <EuiFlexGroup direction="row" alignItems="center" gutterSize="s">
+            {accessControlSwitch && (
+              <EuiFlexItem
+                css={css`
+                  min-width: ${euiTheme.base * 18}px;
+                `}
+                grow={false}
+              >
+                {accessControlSwitch}
+              </EuiFlexItem>
+            )}
             <EuiFlexItem>
               <EuiFieldSearch
                 data-telemetry-id={`${dataTelemetryIdPrefix}-documents-searchDocuments`}

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

@@ -121,7 +121,7 @@ export const ConnectorDetail: React.FC = () => {
       label: i18n.translate(
         'xpack.enterpriseSearch.content.connectors.connectorDetail.indexMappingsTabLabel',
         {
-          defaultMessage: 'Index mappings',
+          defaultMessage: 'Mappings',
         }
       ),
       onClick: () =>

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<IndexSelectorProps> = ({
-  valueOfSelected,
+  indexSelectorOptions = DEFAULT_INDEX_SELECTOR_OPTIONS,
   onChange,
+  valueOfSelected,
+  fullWidth,
 }) => {
   return (
     <EuiSuperSelect
+      fullWidth={fullWidth}
       valueOfSelected={valueOfSelected}
       onChange={onChange}
+      prepend={
+        indexSelectorOptions.some((option) => option.error) ? (
+          <EuiIcon type={'warning'} />
+        ) : undefined
+      }
       options={indexSelectorOptions.map((option) => {
         return {
           dropdownDisplay: (
-            <EuiFlexGrid gutterSize="none">
-              <EuiFlexItem>
-                <EuiTitle size="xs">
-                  <h4>{option.title}</h4>
-                </EuiTitle>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <EuiText size="xs">
-                  <p>{option.description}</p>
-                </EuiText>
-              </EuiFlexItem>
-            </EuiFlexGrid>
+            <EuiFlexGroup direction="row" alignItems="center" gutterSize="m">
+              {option.error ? (
+                <EuiFlexItem grow={false} align>
+                  <EuiIcon type={'warning'} />{' '}
+                </EuiFlexItem>
+              ) : null}
+              <EuiFlexGroup direction="column" gutterSize="none">
+                <EuiFlexItem>
+                  <EuiTitle size="xs">
+                    <h4>{option.title}</h4>
+                  </EuiTitle>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiText size="xs">
+                    <p>{option.description}</p>
+                  </EuiText>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexGroup>
           ),
           inputDisplay: option.title,
           value: option.value,

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}
         />
       )}
-      <EuiSpacer />
       <EuiFlexGroup direction="column">
         {hasDraft && (
           <EuiFlexItem>
@@ -71,18 +70,6 @@ export const ConnectorSyncRules: React.FC = () => {
         <EuiFlexItem>
           <EuiFlexGroup justifyContent="spaceBetween">
             <EuiFlexItem>
-              <EuiFlexGroup alignItems="center" justifyContent="flexStart" gutterSize="s">
-                <EuiFlexItem grow={false}>
-                  <EuiTitle size="s">
-                    <h2>
-                      {i18n.translate('xpack.enterpriseSearch.index.connector.syncRules.title', {
-                        defaultMessage: 'Sync rules ',
-                      })}
-                    </h2>
-                  </EuiTitle>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-              <EuiSpacer />
               <EuiText size="s">
                 <p>
                   {i18n.translate('xpack.enterpriseSearch.index.connector.syncRules.description', {

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 ? (
           <AccessControlIndexSelector
+            fullWidth
             onChange={setSelectedIndexType}
             valueOfSelected={selectedIndexType}
           />

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%;
 }

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 (
     <>
-      <EuiSpacer />
       <EuiFlexGroup>
         <EuiFlexItem grow={2}>
           <EuiFlexGroup direction="column" gutterSize="s">
             {shouldShowAccessControlSwitch && (
               <EuiFlexItem grow={false} className="enterpriseSearchMappingsSelector">
                 <AccessControlIndexSelector
+                  fullWidth
                   onChange={setSelectedIndexType}
                   valueOfSelected={selectedIndexType}
                 />

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 (
     <>
-      <EuiSpacer />
       {showMissingPipelineCallout && (
         <>
           <EuiCallOut

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

@@ -11,7 +11,7 @@ import { useParams } from 'react-router-dom';
 
 import { useValues } from 'kea';
 
-import { EuiTabbedContent, EuiTabbedContentTab } from '@elastic/eui';
+import { EuiSpacer, EuiTabbedContent, EuiTabbedContentTab } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
 
@@ -141,24 +141,39 @@ export const SearchIndex: React.FC = () => {
       }),
     },
     {
-      content: <SearchIndexDocuments />,
+      content: (
+        <>
+          <EuiSpacer size="l" />
+          <SearchIndexDocuments />
+        </>
+      ),
       id: SearchIndexTabId.DOCUMENTS,
       name: i18n.translate('xpack.enterpriseSearch.content.searchIndex.documentsTabLabel', {
         defaultMessage: 'Documents',
       }),
     },
     {
-      content: <SearchIndexIndexMappings />,
+      content: (
+        <>
+          <EuiSpacer size="l" />
+          <SearchIndexIndexMappings />
+        </>
+      ),
       id: SearchIndexTabId.INDEX_MAPPINGS,
       name: i18n.translate('xpack.enterpriseSearch.content.searchIndex.indexMappingsTabLabel', {
-        defaultMessage: 'Index mappings',
+        defaultMessage: 'Mappings',
       }),
     },
   ];
 
   const CONNECTOR_TABS: EuiTabbedContentTab[] = [
     {
-      content: <ConnectorConfiguration />,
+      content: (
+        <>
+          <EuiSpacer size="l" />
+          <ConnectorConfiguration />
+        </>
+      ),
       id: SearchIndexTabId.CONFIGURATION,
       name: i18n.translate('xpack.enterpriseSearch.content.searchIndex.configurationTabLabel', {
         defaultMessage: 'Configuration',
@@ -167,7 +182,12 @@ export const SearchIndex: React.FC = () => {
     ...(hasFilteringFeature
       ? [
           {
-            content: <ConnectorSyncRules />,
+            content: (
+              <>
+                <EuiSpacer size="l" />
+                <ConnectorSyncRules />
+              </>
+            ),
             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: <ConnectorScheduling />,
+      content: (
+        <>
+          <EuiSpacer size="l" />
+          <ConnectorScheduling />
+        </>
+      ),
       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: <SearchIndexDomainManagement />,
+      content: (
+        <>
+          <EuiSpacer size="l" />
+          <SearchIndexDomainManagement />
+        </>
+      ),
       id: SearchIndexTabId.DOMAIN_MANAGEMENT,
       name: i18n.translate('xpack.enterpriseSearch.content.searchIndex.domainManagementTabLabel', {
         defaultMessage: 'Manage Domains',
       }),
     },
     {
-      content: <CrawlerConfiguration />,
+      content: (
+        <>
+          <EuiSpacer size="l" />
+          <CrawlerConfiguration />
+        </>
+      ),
       id: SearchIndexTabId.CRAWLER_CONFIGURATION,
       name: i18n.translate(
         'xpack.enterpriseSearch.content.searchIndex.crawlerConfigurationTabLabel',
@@ -203,7 +238,12 @@ export const SearchIndex: React.FC = () => {
       ),
     },
     {
-      content: <AutomaticCrawlScheduler />,
+      content: (
+        <>
+          <EuiSpacer size="l" />
+          <AutomaticCrawlScheduler />
+        </>
+      ),
       '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: <SearchIndexPipelines />,
+    content: (
+      <>
+        <EuiSpacer size="l" />
+        <SearchIndexPipelines />
+      </>
+    ),
     id: SearchIndexTabId.PIPELINES,
     name: i18n.translate('xpack.enterpriseSearch.content.searchIndex.pipelinesTabLabel', {
       defaultMessage: 'Pipelines',
@@ -289,7 +334,7 @@ const Content: React.FC<ContentProps> = ({
   }
   return (
     <>
-      <EuiTabbedContent tabs={tabs} selectedTab={selectedTab} onTabClick={onTabClick} />
+      <EuiTabbedContent size="l" tabs={tabs} selectedTab={selectedTab} onTabClick={onTabClick} />
       {isCrawlerIndex(index) && <CrawlCustomSettingsFlyout />}
     </>
   );

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<SyncJobsProps> = ({ 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<AccessControlSelectorOption['value']>('content-index');
   const {
     connectorId,
     syncJobsPagination: pagination,
@@ -63,44 +70,84 @@ export const SyncJobs: React.FC<SyncJobsProps> = ({ connector }) => {
     }
   }, [connectorId, selectedSyncJobCategory]);
 
+  useEffect(() => {
+    if (selectedIndexType === 'content-index') {
+      setSelectedSyncJobCategory('content');
+    } else {
+      setSelectedSyncJobCategory('access_control');
+    }
+  }, [selectedIndexType]);
+  const { euiTheme } = useEuiTheme();
   return (
     <>
       {shouldShowAccessSyncs && (
-        <EuiButtonGroup
-          legend={i18n.translate(
-            'xpack.enterpriseSearch.content.syncJobs.lastSync.tableSelector.legend',
-            { defaultMessage: 'Select sync job type to display.' }
-          )}
-          name={i18n.translate(
-            'xpack.enterpriseSearch.content.syncJobs.lastSync.tableSelector.name',
-            { defaultMessage: 'Sync job type' }
-          )}
-          idSelected={selectedSyncJobCategory}
-          onChange={(optionId) => {
-            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' } : {}),
-            },
-          ]}
-        />
+        <>
+          <EuiFlexGroup gutterSize="s" alignItems="center">
+            <EuiFlexItem
+              grow={false}
+              css={css`
+                min-width: ${euiTheme.base * 18}px;
+              `}
+            >
+              <AccessControlIndexSelector
+                fullWidth
+                onChange={setSelectedIndexType}
+                valueOfSelected={selectedIndexType}
+                indexSelectorOptions={[
+                  {
+                    description: i18n.translate(
+                      'xpack.enterpriseSearch.content.searchIndex.documents.selector.contentIndexSync.description',
+                      {
+                        defaultMessage: 'Browse content sync history',
+                      }
+                    ),
+                    error: errorOnContentSync,
+                    title: i18n.translate(
+                      'xpack.enterpriseSearch.content.searchIndex.documents.selector.contentIndexSync.title',
+                      {
+                        defaultMessage: 'Content syncs',
+                      }
+                    ),
+                    value: 'content-index',
+                  },
+                  {
+                    description: i18n.translate(
+                      'xpack.enterpriseSearch.content.searchIndex.documents.selector.accessControlSync.description',
+                      {
+                        defaultMessage: 'Browse access control sync history',
+                      }
+                    ),
+                    error: errorOnAccessSync,
+                    title: i18n.translate(
+                      'xpack.enterpriseSearch.content.searchIndex.documents.selectorSync.accessControl.title',
+                      {
+                        defaultMessage: 'Access control syncs',
+                      }
+                    ),
+                    value: 'access-control-index',
+                  },
+                ]}
+              />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiIconTip
+                content={
+                  <p>
+                    {i18n.translate(
+                      'xpack.enterpriseSearch.accessControlIndexSelector.p.accessControlSyncsAreLabel',
+                      {
+                        defaultMessage:
+                          'Access control syncs keep permissions information up to date for document level security (DLS)',
+                      }
+                    )}
+                  </p>
+                }
+                position="right"
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer size="m" />
+        </>
       )}
       {selectedSyncJobCategory === 'content' ? (
         <SyncJobsTable

x-pack/plugins/translations/translations/fr-FR.json

@@ -6923,7 +6923,6 @@
     "searchIndexDocuments.documentList.resultLimit": "Seuls les {number} premiers résultats sont disponibles pour la pagination. Veuillez utiliser la barre de recherche pour filtrer vos résultats.",
     "searchIndexDocuments.documentList.resultLimitTitle": "Les résultats sont limités à {number} documents",
     "searchIndexDocuments.documents.searchField.placeholder": "Rechercher des documents dans cet index",
-    "searchIndexDocuments.documents.title": "Parcourir des documents",
     "searchIndexDocuments.result.expandTooltip.allVisible": "Tous les champs sont visibles",
     "searchIndexDocuments.result.expandTooltip.showFewer": "Afficher {amount} champs en moins",
     "searchIndexDocuments.result.expandTooltip.showMore": "Afficher {amount} champs en plus",
@@ -17032,10 +17031,6 @@
     "xpack.enterpriseSearch.content.supportedLanguages.spanishLabel": "Espagnol",
     "xpack.enterpriseSearch.content.supportedLanguages.thaiLabel": "Thaï",
     "xpack.enterpriseSearch.content.supportedLanguages.universalLabel": "Universel",
-    "xpack.enterpriseSearch.content.syncJobs.lastSync.tableSelector.accessControl.label": "Synchronisations de contrôle d'accès",
-    "xpack.enterpriseSearch.content.syncJobs.lastSync.tableSelector.content.label": "Synchronisations de contenu",
-    "xpack.enterpriseSearch.content.syncJobs.lastSync.tableSelector.legend": "Sélectionnez le type de tâche de synchronisation à afficher.",
-    "xpack.enterpriseSearch.content.syncJobs.lastSync.tableSelector.name": "Type de tâche de synchronisation",
     "xpack.enterpriseSearch.crawler.action.deleteDomain.confirmationPopupMessage": "Voulez-vous vraiment supprimer le domaine \"{domainUrl}\" et tous ses paramètres ?",
     "xpack.enterpriseSearch.crawler.addDomainFlyout.description": "Vous pouvez ajouter plusieurs domaines au robot d'indexation de cet index. Ajoutez un autre domaine ici et modifiez les points d'entrée et les règles d'indexation à partir de la page \"Gérer\".",
     "xpack.enterpriseSearch.crawler.addDomainFlyout.openButtonLabel": "Ajouter un domaine",
@@ -17310,7 +17305,6 @@
     "xpack.enterpriseSearch.index.connector.syncRules.invalidTitle": "Les ébauches de règles de synchronisation ne sont pas valides",
     "xpack.enterpriseSearch.index.connector.syncRules.successCallout.applyDraftRulesTitle": "Activer les ébauches de règles",
     "xpack.enterpriseSearch.index.connector.syncRules.syncRulesLabel": "En savoir plus sur les règles de synchronisation",
-    "xpack.enterpriseSearch.index.connector.syncRules.title": "Règles de synchronisation ",
     "xpack.enterpriseSearch.index.connector.syncRules.unsavedChanges": "Vos modifications n'ont pas été enregistrées. Voulez-vous vraiment quitter ?",
     "xpack.enterpriseSearch.index.connector.syncRules.validatedDescription": "Activez les ébauches de règles pour qu'elles prennent effet à la prochaine synchronisation.",
     "xpack.enterpriseSearch.index.connector.syncRules.validateDraftTitle": "Enregistrer et valider l'ébauche",

x-pack/plugins/translations/translations/ja-JP.json

@@ -6677,7 +6677,6 @@
     "searchIndexDocuments.documentList.resultLimit": "最初の{number}件の結果のみがページ制御できます。結果を絞り込むには、検索バーを使用してください。",
     "searchIndexDocuments.documentList.resultLimitTitle": "結果は{number}ドキュメントに制限されています。",
     "searchIndexDocuments.documents.searchField.placeholder": "このインデックスでドキュメントを検索",
-    "searchIndexDocuments.documents.title": "ドキュメントを参照",
     "searchIndexDocuments.result.expandTooltip.allVisible": "すべてのフィールドが表示されます",
     "searchIndexDocuments.result.expandTooltip.showFewer": "表示するフィールド数を{amount}個減らす",
     "searchIndexDocuments.result.expandTooltip.showMore": "表示するフィールド数を{amount}個増やす",
@@ -16778,10 +16777,6 @@
     "xpack.enterpriseSearch.content.supportedLanguages.spanishLabel": "スペイン語",
     "xpack.enterpriseSearch.content.supportedLanguages.thaiLabel": "タイ語",
     "xpack.enterpriseSearch.content.supportedLanguages.universalLabel": "ユニバーサル",
-    "xpack.enterpriseSearch.content.syncJobs.lastSync.tableSelector.accessControl.label": "アクセス制御同期",
-    "xpack.enterpriseSearch.content.syncJobs.lastSync.tableSelector.content.label": "コンテンツ同期",
-    "xpack.enterpriseSearch.content.syncJobs.lastSync.tableSelector.legend": "表示する同期ジョブタイプを選択します。",
-    "xpack.enterpriseSearch.content.syncJobs.lastSync.tableSelector.name": "同期ジョブタイプ",
     "xpack.enterpriseSearch.crawler.action.deleteDomain.confirmationPopupMessage": "ドメイン\"{domainUrl}\"とすべての設定を削除しますか？",
     "xpack.enterpriseSearch.crawler.addDomainFlyout.description": "複数のドメインをこのインデックスのWebクローラーに追加できます。ここで別のドメインを追加して、[管理]ページからエントリポイントとクロールルールを変更します。",
     "xpack.enterpriseSearch.crawler.addDomainFlyout.openButtonLabel": "ドメインを追加",
@@ -17056,7 +17051,6 @@
     "xpack.enterpriseSearch.index.connector.syncRules.invalidTitle": "ドラフト同期ルールが無効です",
     "xpack.enterpriseSearch.index.connector.syncRules.successCallout.applyDraftRulesTitle": "ドラフトルールをアクティブ化",
     "xpack.enterpriseSearch.index.connector.syncRules.syncRulesLabel": "同期ルールの詳細",
-    "xpack.enterpriseSearch.index.connector.syncRules.title": "同期ルール ",
     "xpack.enterpriseSearch.index.connector.syncRules.unsavedChanges": "変更は保存されていません。終了してよろしいですか？",
     "xpack.enterpriseSearch.index.connector.syncRules.validatedDescription": "ドラフトルールをアクティブ化し、次回の同期で有効にします。",
     "xpack.enterpriseSearch.index.connector.syncRules.validateDraftTitle": "ドラフトを保存して検証",

x-pack/plugins/translations/translations/zh-CN.json

@@ -6691,7 +6691,6 @@
     "searchIndexDocuments.documentList.resultLimit": "仅前 {number} 个结果可用于分页。请使用搜索栏筛选结果。",
     "searchIndexDocuments.documentList.resultLimitTitle": "结果仅限于 {number} 个文档",
     "searchIndexDocuments.documents.searchField.placeholder": "在此索引中搜索文档",
-    "searchIndexDocuments.documents.title": "浏览文档",
     "searchIndexDocuments.result.expandTooltip.allVisible": "所有字段均可见",
     "searchIndexDocuments.result.expandTooltip.showFewer": "显示少于 {amount} 个字段",
     "searchIndexDocuments.result.expandTooltip.showMore": "显示多于 {amount} 个字段",
@@ -16807,10 +16806,6 @@
     "xpack.enterpriseSearch.content.supportedLanguages.spanishLabel": "西班牙语",
     "xpack.enterpriseSearch.content.supportedLanguages.thaiLabel": "泰语",
     "xpack.enterpriseSearch.content.supportedLanguages.universalLabel": "通用",
-    "xpack.enterpriseSearch.content.syncJobs.lastSync.tableSelector.accessControl.label": "访问控制同步",
-    "xpack.enterpriseSearch.content.syncJobs.lastSync.tableSelector.content.label": "内容同步",
-    "xpack.enterpriseSearch.content.syncJobs.lastSync.tableSelector.legend": "选择要显示的同步作业类型。",
-    "xpack.enterpriseSearch.content.syncJobs.lastSync.tableSelector.name": "同步作业类型",
     "xpack.enterpriseSearch.crawler.action.deleteDomain.confirmationPopupMessage": "确定要移除域“{domainUrl}”和其所有设置？",
     "xpack.enterpriseSearch.crawler.addDomainFlyout.description": "可以将多个域添加到此索引的网络爬虫。在此添加其他域并从“管理”页面修改入口点和爬网规则。",
     "xpack.enterpriseSearch.crawler.addDomainFlyout.openButtonLabel": "添加域",
@@ -17085,7 +17080,6 @@
     "xpack.enterpriseSearch.index.connector.syncRules.invalidTitle": "同步规则草案无效",
     "xpack.enterpriseSearch.index.connector.syncRules.successCallout.applyDraftRulesTitle": "激活规则草案",
     "xpack.enterpriseSearch.index.connector.syncRules.syncRulesLabel": "详细了解同步规则",
-    "xpack.enterpriseSearch.index.connector.syncRules.title": "同步规则 ",
     "xpack.enterpriseSearch.index.connector.syncRules.unsavedChanges": "您的更改尚未更改。是否确定要离开？",
     "xpack.enterpriseSearch.index.connector.syncRules.validatedDescription": "激活规则草案以在下次同步时生效。",
     "xpack.enterpriseSearch.index.connector.syncRules.validateDraftTitle": "保存并验证草案",