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

fix unified search for long field inputs #166024

Merged
merged 16 commits into from
Sep 11, 2023
Merged

fix unified search for long field inputs #166024

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
886731b
fix unified search for long field inputs
timductive Sep 7, 2023
3963550
fix: ref naming, simplification and typings
nickofthyme Sep 8, 2023
d20ef3e
fix: blur input when selection in made
nickofthyme Sep 8, 2023
6155757
feat: animate input width changes
nickofthyme Sep 8, 2023
d910bbf
fix: ref type in jest tests
nickofthyme Sep 8, 2023
dcd3f37
[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…
kibanamachine Sep 8, 2023
e8895bf
feat: add blur after single selection
nickofthyme Sep 8, 2023
547a851
[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…
kibanamachine Sep 8, 2023
196f68a
Merge branch 'main' into fix-long-input-166019
stratoula Sep 8, 2023
11c65d7
removing animation
timductive Sep 8, 2023
83ea902
Merge branch 'main' into fix-long-input-166019
timductive Sep 8, 2023
2a7acc3
[CI] Auto-commit changed files from 'node scripts/eslint --no-cache -…
kibanamachine Sep 8, 2023
4fc58c5
fix: focus state on icon click
nickofthyme Sep 8, 2023
ab6a537
[CI] Auto-commit changed files from 'node scripts/precommit_hook.js -…
kibanamachine Sep 8, 2023
2be4ba0
Merge branch 'main' into fix-long-input-166019
nickofthyme Sep 8, 2023
bc20d01
Merge branch 'main' into fix-long-input-166019
stratoula Sep 11, 2023
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
1 change: 1 addition & 0 deletions src/plugins/unified_search/public/filter_bar/filter_editor/generic_combo_box.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@ export interface GenericComboBoxProps<T> {
searchValue: string,
OPTION_CONTENT_CLASSNAME: string
) => React.ReactNode;
inputRef?: ((instance: HTMLInputElement | null) => void) | undefined;
[propName: string]: any;
}

Expand Down
23 changes: 14 additions & 9 deletions src/plugins/unified_search/public/filter_bar/filter_editor/phrase_value_input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,12 +31,8 @@ const COMBOBOX_PADDINGS = 10;
const DEFAULT_FONT = '14px Inter';

class PhraseValueInputUI extends PhraseSuggestorUI<PhraseValueInputProps> {
comboBoxRef: React.RefObject<HTMLInputElement>;

constructor(props: PhraseValueInputProps) {
super(props);
this.comboBoxRef = React.createRef();
}
comboBoxWrapperRef = React.createRef<HTMLDivElement>();
inputRef: HTMLInputElement | null = null;

public render() {
return (
Expand Down Expand Up @@ -69,8 +65,11 @@ class PhraseValueInputUI extends PhraseSuggestorUI<PhraseValueInputProps> {
const valueAsStr = String(value);
const options = value ? uniq([valueAsStr, ...suggestions]) : suggestions;
return (
<div ref={this.comboBoxRef}>
<div ref={this.comboBoxWrapperRef}>
<StringComboBox
inputRef={(ref) => {
this.inputRef = ref;
}}
isDisabled={this.props.disabled}
fullWidth={fullWidth}
compressed={this.props.compressed}
Expand All @@ -85,7 +84,13 @@ class PhraseValueInputUI extends PhraseSuggestorUI<PhraseValueInputProps> {
options={options}
getLabel={(option) => option}
selectedOptions={value ? [valueAsStr] : []}
onChange={([newValue = '']) => onChange(newValue)}
onChange={([newValue = '']) => {
onChange(newValue);
setTimeout(() => {
// Note: requires a tick skip to correctly blur element focus
this.inputRef?.blur();
});
}}
onSearchChange={this.onSearchChange}
singleSelection={{ asPlainText: true }}
onCreateOption={onChange}
Expand All @@ -98,7 +103,7 @@ class PhraseValueInputUI extends PhraseSuggestorUI<PhraseValueInputProps> {
defaultComboboxWidth={DEFAULT_COMBOBOX_WIDTH}
defaultFont={DEFAULT_FONT}
comboboxPaddings={COMBOBOX_PADDINGS}
comboBoxRef={this.comboBoxRef}
comboBoxWrapperRef={this.comboBoxWrapperRef}
label={option.label}
search={searchValue}
/>
Expand Down
11 changes: 3 additions & 8 deletions src/plugins/unified_search/public/filter_bar/filter_editor/phrases_values_input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,20 +33,15 @@ const COMBOBOX_PADDINGS = 20;
const DEFAULT_FONT = '14px Inter';

class PhrasesValuesInputUI extends PhraseSuggestorUI<PhrasesValuesInputProps> {
comboBoxRef: React.RefObject<HTMLInputElement>;

constructor(props: PhrasesValuesInputProps) {
super(props);
this.comboBoxRef = React.createRef();
}
comboBoxWrapperRef = React.createRef<HTMLDivElement>();
nickofthyme marked this conversation as resolved.
Show resolved Hide resolved

public render() {
const { suggestions } = this.state;
const { values, intl, onChange, fullWidth, onParamsUpdate, compressed, disabled } = this.props;
const options = values ? uniq([...values, ...suggestions]) : suggestions;

return (
<div ref={this.comboBoxRef}>
<div ref={this.comboBoxWrapperRef}>
<StringComboBox
fullWidth={fullWidth}
compressed={compressed}
Expand Down Expand Up @@ -79,7 +74,7 @@ class PhrasesValuesInputUI extends PhraseSuggestorUI<PhrasesValuesInputProps> {
defaultComboboxWidth={DEFAULT_COMBOBOX_WIDTH}
defaultFont={DEFAULT_FONT}
comboboxPaddings={COMBOBOX_PADDINGS}
comboBoxRef={this.comboBoxRef}
comboBoxWrapperRef={this.comboBoxWrapperRef}
label={option.label}
search={searchValue}
/>
Expand Down
8 changes: 3 additions & 5 deletions src/plugins/unified_search/public/filter_bar/filter_editor/truncated_label.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,16 @@
* Side Public License, v 1.
*/

import React from 'react';
import React, { ComponentProps } from 'react';
import { mount } from 'enzyme';
import { TruncatedLabel } from './truncated_label';

describe('truncated_label', () => {
const defaultProps = {
const defaultProps: ComponentProps<typeof TruncatedLabel> = {
defaultFont: '14px Inter',
// jest-canvas-mock mocks measureText as the number of string characters, thats why the width is so low
width: 30,
defaultComboboxWidth: 130,
comboboxPaddings: 100,
comboBoxRef: React.createRef<HTMLInputElement>(),
comboBoxWrapperRef: React.createRef<HTMLDivElement>(),
search: '',
label: 'example_field',
};
Expand Down
13 changes: 6 additions & 7 deletions src/plugins/unified_search/public/filter_bar/filter_editor/truncated_label.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { throttle } from 'lodash';
interface TruncatedLabelProps {
label: string;
search: string;
comboBoxRef: RefObject<HTMLInputElement>;
comboBoxWrapperRef: RefObject<HTMLDivElement | null>;
nickofthyme marked this conversation as resolved.
Show resolved Hide resolved
defaultFont: string;
defaultComboboxWidth: number;
comboboxPaddings: number;
Expand Down Expand Up @@ -56,7 +56,7 @@ const truncateLabel = (

export const TruncatedLabel = React.memo(function TruncatedLabel({
label,
comboBoxRef,
comboBoxWrapperRef,
search,
defaultFont,
defaultComboboxWidth,
Expand All @@ -69,15 +69,14 @@ export const TruncatedLabel = React.memo(function TruncatedLabel({
width: defaultComboboxWidth - comboboxPaddings,
font: defaultFont,
});

const computeStyles = (_e: UIEvent | undefined, shouldRecomputeAll = false) => {
if (comboBoxRef.current) {
if (comboBoxWrapperRef.current) {
const current = {
...labelProps,
width: comboBoxRef.current?.clientWidth - comboboxPaddings,
width: comboBoxWrapperRef.current.clientWidth - comboboxPaddings,
};
if (shouldRecomputeAll) {
current.font = window.getComputedStyle(comboBoxRef.current).font;
current.font = window.getComputedStyle(comboBoxWrapperRef.current).font;
}
setLabelProps(current);
}
Expand All @@ -88,7 +87,7 @@ export const TruncatedLabel = React.memo(function TruncatedLabel({
}, 50);

useEffectOnce(() => {
if (comboBoxRef.current) {
if (comboBoxWrapperRef.current) {
handleResize(undefined, true);
}

Expand Down
21 changes: 18 additions & 3 deletions src/plugins/unified_search/public/filters_builder/filter_item/field_input.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@ export function FieldInput({ field, dataView, onHandleField }: FieldInputProps)
const { disabled, suggestionsAbstraction } = useContext(FiltersBuilderContextType);
const fields = dataView ? getFilterableFields(dataView) : [];
const id = useGeneratedHtmlId({ prefix: 'fieldInput' });
const comboBoxRef = useRef<HTMLInputElement>(null);
const comboBoxWrapperRef = useRef<HTMLDivElement | null>(null);
nickofthyme marked this conversation as resolved.
Show resolved Hide resolved
const inputRef = useRef<HTMLInputElement | null>(null);

const onFieldChange = useCallback(
([selectedField]: DataViewField[]) => {
Expand Down Expand Up @@ -77,12 +78,25 @@ export function FieldInput({ field, dataView, onHandleField }: FieldInputProps)
({ label }) => fields[optionFields.findIndex((optionField) => optionField.label === label)]
);
onFieldChange(newValues);

setTimeout(() => {
// Note: requires a tick skip to correctly blur element focus
inputRef?.current?.blur();
});
};

const handleFocus: React.FocusEventHandler<HTMLDivElement> = () => {
// Force focus on input due to https://github.com/elastic/eui/issues/7170
inputRef?.current?.focus();
};

return (
<div ref={comboBoxRef}>
<div ref={comboBoxWrapperRef}>
nickofthyme marked this conversation as resolved.
Show resolved Hide resolved
<EuiComboBox
id={id}
inputRef={(ref) => {
inputRef.current = ref;
}}
options={euiOptions}
selectedOptions={selectedEuiOptions}
onChange={onComboBoxChange}
Expand All @@ -94,6 +108,7 @@ export function FieldInput({ field, dataView, onHandleField }: FieldInputProps)
isClearable={false}
compressed
fullWidth
onFocus={handleFocus}
data-test-subj="filterFieldSuggestionList"
renderOption={(option, searchValue) => (
<EuiFlexGroup gutterSize="s" alignItems="center" responsive={false}>
Expand All @@ -105,7 +120,7 @@ export function FieldInput({ field, dataView, onHandleField }: FieldInputProps)
defaultComboboxWidth={DEFAULT_COMBOBOX_WIDTH}
defaultFont={DEFAULT_FONT}
comboboxPaddings={COMBOBOX_PADDINGS}
comboBoxRef={comboBoxRef}
comboBoxWrapperRef={comboBoxWrapperRef}
label={option.label}
search={searchValue}
/>
Expand Down
7 changes: 7 additions & 0 deletions src/plugins/unified_search/public/filters_builder/filter_item/filter_item.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,13 @@ export const cursorOrCss = css`

export const fieldAndParamCss = (euiTheme: EuiThemeComputed) => css`
min-width: calc(${euiTheme.size.xl} * 5);
flex-grow: 1;
.euiFormRow {
max-width: 800px;
}
&:focus-within {
flex-grow: 4;
}
`;

export const operationCss = (euiTheme: EuiThemeComputed) => css`
Expand Down