Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Search][DLS] UX improvements #193945

Merged
merged 19 commits into from
Oct 4, 2024
Merged

[Search][DLS] UX improvements #193945

Show file tree
Hide file tree
Changes from 13 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
8f8be5c
AccessControlIndexSelector component can be more customized
JoseLuisGJ Sep 25, 2024
280957a
Consuming always AccessControlIndexSelector with new props
JoseLuisGJ Sep 25, 2024
18ae24e
Index mappings becomes simple Mappings and index spaces fix
JoseLuisGJ Sep 25, 2024
44bd704
Removing Sync rules tabs section title
JoseLuisGJ Sep 25, 2024
fe47e7a
Better text hierarchy treatment
JoseLuisGJ Sep 25, 2024
e7c84d8
Using emotion for min-width accessControlSwitch container
JoseLuisGJ Sep 27, 2024
0d4e41c
Using euiTheme.base for accessControlSwitch container
JoseLuisGJ Sep 27, 2024
a193a2d
Passing indexSelectorOptions to the AccessControlIndexSelector component
JoseLuisGJ Sep 27, 2024
04a4bd5
errorOnAccessSync and errorOContentSync more simple prop pass
JoseLuisGJ Sep 27, 2024
846c80a
AccessControlIndexSelector text content reviwed
JoseLuisGJ Oct 1, 2024
cd55edc
Tooltip connecting access control syncs to DLS
JoseLuisGJ Oct 1, 2024
121f874
i18n issue fix
JoseLuisGJ Oct 1, 2024
12200c9
i18n issue fix
JoseLuisGJ Oct 2, 2024
1e33334
i18n fix using different Message ids
JoseLuisGJ Oct 2, 2024
1127c48
Fixing i18n issue with unussed trtanslations
JoseLuisGJ Oct 2, 2024
c69bdb1
Content fix and using EuiIconTip tooltip rather than regular Tooltip
JoseLuisGJ Oct 2, 2024
860e332
Fixing unit test for documents overview when is empty
JoseLuisGJ Oct 2, 2024
eb5bf9f
Fixing unit test DocumentsOverview
JoseLuisGJ Oct 3, 2024
cb8af11
Merge branch 'main' into DLS-UX-improvements
elasticmachine Oct 4, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 2 additions & 3 deletions packages/kbn-search-connectors/components/scheduling/connector_scheduling.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -115,7 +115,6 @@ export const ConnectorSchedulingComponent: React.FC<ConnectorContentSchedulingPr
}
return (
<>
<EuiSpacer size="l" />
{hasIngestionError ? <ConnectorError /> : <></>}
{children}
<EuiFlexGroup>
Expand Down
6 changes: 3 additions & 3 deletions packages/kbn-search-connectors/components/scheduling/full_content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
34 changes: 14 additions & 20 deletions packages/kbn-search-index-documents/components/documents_overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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`}
Expand Down
2 changes: 1 addition & 1 deletion ...c/applications/enterprise_search_content/components/connector_detail/connector_detail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ export const ConnectorDetail: React.FC = () => {
label: i18n.translate(
'xpack.enterpriseSearch.content.connectors.connectorDetail.indexMappingsTabLabel',
{
defaultMessage: 'Index mappings',
defaultMessage: 'Mappings',
}
),
onClick: () =>
Expand Down
69 changes: 47 additions & 22 deletions ...s/search_index/components/access_control_index_selector/access_control_index_selector.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 your content syncs',
}
),
title: i18n.translate(
Expand All @@ -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 your access control syncs',
}
),
title: i18n.translate(
Expand All @@ -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,
Expand Down
13 changes: 0 additions & 13 deletions ...nterprise_search_content/components/search_index/connector/sync_rules/connector_rules.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@ export const ConnectorSyncRules: React.FC = () => {
setIsEditing={setIsEditing}
/>
)}
<EuiSpacer />
<EuiFlexGroup direction="column">
{hasDraft && (
<EuiFlexItem>
Expand All @@ -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', {
Expand Down
1 change: 1 addition & 0 deletions ...earch/public/applications/enterprise_search_content/components/search_index/documents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,7 @@ export const SearchIndexDocuments: React.FC = () => {
accessControlSwitch={
shouldShowAccessControlSwitcher ? (
<AccessControlIndexSelector
fullWidth
onChange={setSelectedIndexType}
valueOfSelected={selectedIndexType}
/>
Expand Down
2 changes: 1 addition & 1 deletion ...public/applications/enterprise_search_content/components/search_index/index_mappings.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
.enterpriseSearchMappingsSelector {
max-width: $euiSizeXXL * 6;
width: 100%;
}
2 changes: 1 addition & 1 deletion .../public/applications/enterprise_search_content/components/search_index/index_mappings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
/>
Expand Down
1 change: 0 additions & 1 deletion ...ic/applications/enterprise_search_content/components/search_index/pipelines/pipelines.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,6 @@ export const SearchIndexPipelines: React.FC = () => {

return (
<>
<EuiSpacer />
{showMissingPipelineCallout && (
<>
<EuiCallOut
Expand Down
Loading