Skip to content

Commit

Permalink
adjust add filter/edit filter box
Browse files Browse the repository at this point in the history 
Signed-off-by: Adam Tackett <[email protected]>
  • Loading branch information
Adam Tackett committed Jan 30, 2025
1 parent 2a78631 commit b9f5706
Show file tree
Hide file tree
Showing 6 changed files with 131 additions and 114 deletions.
47 changes: 24 additions & 23 deletions ...ytics/components/common/filters/__tests__/__snapshots__/filter_edit_popover.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ exports[`Filter popover component renders filter popover 1`] = `
<div
style={
Object {
"width": 500,
"width": 600,
}
}
>
Expand All @@ -44,28 +44,29 @@ exports[`Filter popover component renders filter popover 1`] = `
}
/>
<EuiFlexGroup
gutterSize="s"
direction="column"
gutterSize="m"
>
<div
className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
className="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--directionColumn euiFlexGroup--responsive"
>
<EuiFlexItem
grow={6}
grow={true}
>
<div
className="euiFlexItem euiFlexItem--flexGrow6"
className="euiFlexItem"
>
<EuiCompressedFormRow
describedByIds={Array []}
display="rowCompressed"
fullWidth={false}
fullWidth={true}
hasChildLabel={true}
hasEmptyLabelSpace={false}
label="Field"
labelType="label"
>
<div
className="euiFormRow euiFormRow--compressed"
className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
id="random_html_id-row"
>
<div
Expand All @@ -92,7 +93,7 @@ exports[`Filter popover component renders filter popover 1`] = `
async={false}
compressed={true}
data-test-subj="field-selector-filter-panel"
fullWidth={false}
fullWidth={true}
id="random_html_id"
isClearable={false}
onBlur={[Function]}
Expand Down Expand Up @@ -129,15 +130,15 @@ exports[`Filter popover component renders filter popover 1`] = `
<div
aria-expanded={false}
aria-haspopup="listbox"
className="euiComboBox euiComboBox--compressed"
className="euiComboBox euiComboBox--compressed euiComboBox--fullWidth"
data-test-subj="field-selector-filter-panel"
onKeyDown={[Function]}
role="combobox"
>
<EuiComboBoxInput
autoSizeInputRef={[Function]}
compressed={true}
fullWidth={false}
fullWidth={true}
hasSelectedOptions={false}
id="random_html_id"
inputRef={[Function]}
Expand All @@ -164,7 +165,7 @@ exports[`Filter popover component renders filter popover 1`] = `
>
<EuiFormControlLayout
compressed={true}
fullWidth={false}
fullWidth={true}
icon={
Object {
"aria-label": "Open list of options",
Expand All @@ -178,13 +179,13 @@ exports[`Filter popover component renders filter popover 1`] = `
}
>
<div
className="euiFormControlLayout euiFormControlLayout--compressed"
className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
>
<div
className="euiFormControlLayout__childrenWrapper"
>
<div
className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap"
data-test-subj="comboBoxInput"
onClick={[Function]}
tabIndex={-1}
Expand Down Expand Up @@ -332,22 +333,22 @@ exports[`Filter popover component renders filter popover 1`] = `
</div>
</EuiFlexItem>
<EuiFlexItem
grow={5}
grow={true}
>
<div
className="euiFlexItem euiFlexItem--flexGrow5"
className="euiFlexItem"
>
<EuiCompressedFormRow
describedByIds={Array []}
display="rowCompressed"
fullWidth={false}
fullWidth={true}
hasChildLabel={true}
hasEmptyLabelSpace={false}
label="Operator"
labelType="label"
>
<div
className="euiFormRow euiFormRow--compressed"
className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
id="random_html_id-row"
>
<div
Expand All @@ -374,7 +375,7 @@ exports[`Filter popover component renders filter popover 1`] = `
async={false}
compressed={true}
data-test-subj="operator-selector-filter-panel"
fullWidth={false}
fullWidth={true}
id="random_html_id"
isClearable={false}
isDisabled={true}
Expand All @@ -394,15 +395,15 @@ exports[`Filter popover component renders filter popover 1`] = `
<div
aria-expanded={false}
aria-haspopup="listbox"
className="euiComboBox euiComboBox--compressed euiComboBox-isDisabled"
className="euiComboBox euiComboBox--compressed euiComboBox--fullWidth euiComboBox-isDisabled"
data-test-subj="operator-selector-filter-panel"
onKeyDown={[Function]}
role="combobox"
>
<EuiComboBoxInput
autoSizeInputRef={[Function]}
compressed={true}
fullWidth={false}
fullWidth={true}
hasSelectedOptions={false}
id="random_html_id"
inputRef={[Function]}
Expand Down Expand Up @@ -430,7 +431,7 @@ exports[`Filter popover component renders filter popover 1`] = `
>
<EuiFormControlLayout
compressed={true}
fullWidth={false}
fullWidth={true}
icon={
Object {
"aria-label": "Open list of options",
Expand All @@ -444,13 +445,13 @@ exports[`Filter popover component renders filter popover 1`] = `
}
>
<div
className="euiFormControlLayout euiFormControlLayout--compressed"
className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
>
<div
className="euiFormControlLayout__childrenWrapper"
>
<div
className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap"
className="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap--noWrap"
data-test-subj="comboBoxInput"
onClick={[Function]}
tabIndex={-1}
Expand Down
156 changes: 83 additions & 73 deletions ..._analytics/components/common/filters/__tests__/__snapshots__/filter_helpers.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,89 +134,99 @@ Array [
className="euiSpacer euiSpacer--s"
/>
</EuiSpacer>,
<EuiCompressedFormRow
describedByIds={Array []}
display="rowCompressed"
fullWidth={false}
hasChildLabel={true}
hasEmptyLabelSpace={false}
label="Value"
labelType="label"
<EuiFlexItem
grow={true}
>
<div
className="euiFormRow euiFormRow--compressed"
id="random_html_id-row"
className="euiFlexItem"
>
<div
className="euiFormRow__labelWrapper"
<EuiCompressedFormRow
describedByIds={Array []}
display="rowCompressed"
fullWidth={true}
hasChildLabel={true}
hasEmptyLabelSpace={false}
label="Value"
labelType="label"
>
<EuiFormLabel
className="euiFormRow__label"
htmlFor="random_html_id"
isFocused={false}
type="label"
<div
className="euiFormRow euiFormRow--fullWidth euiFormRow--compressed"
id="random_html_id-row"
>
<label
className="euiFormLabel euiFormRow__label"
htmlFor="random_html_id"
<div
className="euiFormRow__labelWrapper"
>
Value
</label>
</EuiFormLabel>
</div>
<div
className="euiFormRow__fieldWrapper"
>
<EuiCompressedFieldText
id="random_html_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Enter a value"
value={0}
>
<EuiFieldText
compressed={true}
id="random_html_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Enter a value"
value={0}
<EuiFormLabel
className="euiFormRow__label"
htmlFor="random_html_id"
isFocused={false}
type="label"
>
<label
className="euiFormLabel euiFormRow__label"
htmlFor="random_html_id"
>
Value
</label>
</EuiFormLabel>
</div>
<div
className="euiFormRow__fieldWrapper"
>
<EuiFormControlLayout
compressed={true}
fullWidth={false}
inputId="random_html_id"
<EuiCompressedFieldText
fullWidth={true}
id="random_html_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Enter a value"
value={0}
>
<div
className="euiFormControlLayout euiFormControlLayout--compressed"
<EuiFieldText
compressed={true}
fullWidth={true}
id="random_html_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Enter a value"
value={0}
>
<div
className="euiFormControlLayout__childrenWrapper"
<EuiFormControlLayout
compressed={true}
fullWidth={true}
inputId="random_html_id"
>
<EuiValidatableControl>
<input
className="euiFieldText euiFieldText--compressed"
id="random_html_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Enter a value"
type="text"
value={0}
/>
</EuiValidatableControl>
<EuiFormControlLayoutIcons
compressed={true}
/>
</div>
</div>
</EuiFormControlLayout>
</EuiFieldText>
</EuiCompressedFieldText>
</div>
<div
className="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--compressed"
>
<div
className="euiFormControlLayout__childrenWrapper"
>
<EuiValidatableControl>
<input
className="euiFieldText euiFieldText--fullWidth euiFieldText--compressed"
id="random_html_id"
onBlur={[Function]}
onChange={[Function]}
onFocus={[Function]}
placeholder="Enter a value"
type="text"
value={0}
/>
</EuiValidatableControl>
<EuiFormControlLayoutIcons
compressed={true}
/>
</div>
</div>
</EuiFormControlLayout>
</EuiFieldText>
</EuiCompressedFieldText>
</div>
</div>
</EuiCompressedFormRow>
</div>
</EuiCompressedFormRow>,
</EuiFlexItem>,
]
`;
14 changes: 8 additions & 6 deletions public/components/trace_analytics/components/common/filters/filter_edit_popover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,12 @@ export function FilterEditPopover(props: {
const [filterValue, setFilterValue] = useState(props.filter?.value || '');

return (
<div style={{ width: 500 }}>
<div style={{ width: 600 }}>
{/* invisible button workaround to prevent auto focus on context menu panel switch */}
<button style={{ width: 0, height: 0, position: 'fixed', marginLeft: -1000, bottom: 0 }} />
<EuiFlexGroup gutterSize="s">
<EuiFlexItem grow={6}>
<EuiCompressedFormRow label={'Field'}>
<EuiFlexGroup gutterSize="m" direction="column">
<EuiFlexItem grow={true}>
<EuiCompressedFormRow label={'Field'} fullWidth>
<EuiCompressedComboBox
placeholder="Select a field first"
data-test-subj="field-selector-filter-panel"
Expand All @@ -55,11 +55,12 @@ export function FilterEditPopover(props: {
setFilterValue('');
}}
singleSelection={{ asPlainText: true }}
fullWidth
/>
</EuiCompressedFormRow>
</EuiFlexItem>
<EuiFlexItem grow={5}>
<EuiCompressedFormRow label={'Operator'}>
<EuiFlexItem grow={true}>
<EuiCompressedFormRow label={'Operator'} fullWidth>
<EuiCompressedComboBox
placeholder={selectedFieldOptions.length === 0 ? 'Waiting' : 'Select'}
data-test-subj="operator-selector-filter-panel"
Expand All @@ -76,6 +77,7 @@ export function FilterEditPopover(props: {
setFilterValue('');
}}
singleSelection={{ asPlainText: true }}
fullWidth
/>
</EuiCompressedFormRow>
</EuiFlexItem>
Expand Down
Loading

0 comments on commit b9f5706

Please sign in to comment.