[Search][DLS] UX improvements (elastic#193945)

## Summary This PR add several changes ir order to bring more consistency and better UX managing _Content Indices_ and _Access Control Indices_: - The `AccessControlIndexSelector ` will have always a `min-width` to display without line breaks the content for better reading - Remove ~~_Browse documents_~~ title in Documents section and ~~_Sync rules_~~. - Same gutter and space for each tab section content using a more condensed design - _~~Index~~ Mappings_ tabbed name section has been renamed simple _Mappings_ - The Overview table sync now is managed by the same `<AccessControlIndexSelector/>` as it is in _Documents_ and _Mappings_ sections - The `<AccessControlIndexSelector/>` componen now can be more cusomized, passing custom title and description, error status, _fullWidth_ and some more. - The `search_index.tsx` file for rendering indices was fixed to use same spacing and tabs size ![CleanShot 2024-09-24 at 15 41 47](https://github.com/user-attachments/assets/02bf764d-672a-4b7b-b861-23d98502b912) --------- Co-authored-by: Elastic Machine <[email protected]>
e40pud · Oct 4, 2024 · 4e65fd2 · 4e65fd2
1 parent aae8c50
commit 4e65fd2
Show file tree

Hide file tree

Showing 16 changed files with 213 additions and 134 deletions.
diff --git 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<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>

diff --git 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<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>

diff --git 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', () => {
       </I18nProvider>
     );
 
-    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
@@ -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`}

diff --git a/...c/applications/enterprise_search_content/components/connector_detail/connector_detail.tsx b/...c/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: () =>

diff --git a/...s/search_index/components/access_control_index_selector/access_control_index_selector.tsx b/...s/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,

diff --git a/...nterprise_search_content/components/search_index/connector/sync_rules/connector_rules.tsx b/...nterprise_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', {

diff --git a/...earch/public/applications/enterprise_search_content/components/search_index/documents.tsx b/...earch/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}
           />

diff --git a/...public/applications/enterprise_search_content/components/search_index/index_mappings.scss b/...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/.../public/applications/enterprise_search_content/components/search_index/index_mappings.tsx b/.../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}
                 />

diff --git a/...ic/applications/enterprise_search_content/components/search_index/pipelines/pipelines.tsx b/...ic/applications/enterprise_search_content/components/search_index/pipelines/pipelines.tsx
@@ -110,7 +110,6 @@ export const SearchIndexPipelines: React.FC = () => {
 
   return (
     <>
-      <EuiSpacer />
       {showMissingPipelineCallout && (
         <>
           <EuiCallOut