From 8ac6ad586fd66ceecae3686ccc5f9a68505d4c20 Mon Sep 17 00:00:00 2001 From: Hannah Mudge Date: Fri, 14 Jul 2023 16:41:29 -0600 Subject: [PATCH 01/11] Use `...other` so focus impacts owning form row --- .../controls/public/control_group/editor/control_editor.tsx | 4 ++-- .../public/components/data_view_picker/data_view_picker.tsx | 2 ++ .../public/components/field_picker/field_picker.tsx | 2 ++ 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/plugins/controls/public/control_group/editor/control_editor.tsx b/src/plugins/controls/public/control_group/editor/control_editor.tsx index 525fd03964226..0860f19e506e3 100644 --- a/src/plugins/controls/public/control_group/editor/control_editor.tsx +++ b/src/plugins/controls/public/control_group/editor/control_editor.tsx @@ -259,7 +259,7 @@ export const ControlEditor = ({ - <> +
setCurrentGrow(!currentGrow)} data-test-subj="control-editor-grow-switch" /> - +
)} diff --git a/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx b/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx index fae805cd49ebc..230aa68600df7 100644 --- a/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx +++ b/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx @@ -26,6 +26,7 @@ export function DataViewPicker({ onChangeDataViewId, trigger, selectableProps, + ...other }: { dataViews: DataViewListItem[]; selectedDataViewId?: string; @@ -62,6 +63,7 @@ export function DataViewPicker({ return ( setPopoverIsOpen(false)} diff --git a/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx b/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx index 20605d374d0fc..776f87a1d77ba 100644 --- a/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx +++ b/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx @@ -39,6 +39,7 @@ export const FieldPicker = ({ filterPredicate, selectedFieldName, selectableProps, + ...other }: FieldPickerProps) => { const [typesFilter, setTypesFilter] = useState([]); const [fieldSelectableOptions, setFieldSelectableOptions] = useState([]); @@ -102,6 +103,7 @@ export const FieldPicker = ({ return ( Date: Mon, 17 Jul 2023 09:23:55 -0600 Subject: [PATCH 02/11] Switch to `EuiInputPopover` --- .../data_view_picker/data_view_picker.scss | 6 ------ .../components/data_view_picker/data_view_picker.tsx | 12 +++++------- .../components/field_picker/field_type_filter.scss | 7 ------- .../components/field_picker/field_type_filter.tsx | 12 +++++------- 4 files changed, 10 insertions(+), 27 deletions(-) delete mode 100644 src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.scss delete mode 100644 src/plugins/presentation_util/public/components/field_picker/field_type_filter.scss diff --git a/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.scss b/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.scss deleted file mode 100644 index 0d79a59a42fc7..0000000000000 --- a/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.scss +++ /dev/null @@ -1,6 +0,0 @@ -.presDataViewPicker__panel { - min-width: $euiSizeXXL * 8; - @include euiBreakpoint('l', 'xl') { - width: $euiFormMaxWidth; - } -} \ No newline at end of file diff --git a/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx b/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx index 230aa68600df7..ab7225466ed05 100644 --- a/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx +++ b/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx @@ -8,13 +8,11 @@ import { i18n } from '@kbn/i18n'; import React, { useState } from 'react'; -import { EuiPopover, EuiPopoverTitle, EuiSelectable, EuiSelectableProps } from '@elastic/eui'; +import { EuiSelectable, EuiPopoverTitle, EuiInputPopover, EuiSelectableProps } from '@elastic/eui'; import { DataViewListItem } from '@kbn/data-views-plugin/common'; import { ToolbarButton, ToolbarButtonProps } from '@kbn/kibana-react-plugin/public'; -import './data_view_picker.scss'; - export type DataViewTriggerProps = ToolbarButtonProps & { label: string; title?: string; @@ -62,15 +60,15 @@ export function DataViewPicker({ }; return ( - setPopoverIsOpen(false)} display="block" panelPaddingSize="s" ownFocus - panelClassName="presDataViewPicker__panel" + fullWidth > {i18n.translate('presentationUtil.dataViewPicker.changeDataViewTitle', { @@ -112,7 +110,7 @@ export function DataViewPicker({ )} - + ); } diff --git a/src/plugins/presentation_util/public/components/field_picker/field_type_filter.scss b/src/plugins/presentation_util/public/components/field_picker/field_type_filter.scss deleted file mode 100644 index f993a2a0a065c..0000000000000 --- a/src/plugins/presentation_util/public/components/field_picker/field_type_filter.scss +++ /dev/null @@ -1,7 +0,0 @@ -.presFilterByType__panel { - width: $euiSize * 18; - min-width: $euiSizeXXL * 8; - @include euiBreakpoint('l', 'xl') { - width: $euiFormMaxWidth; - } -} \ No newline at end of file diff --git a/src/plugins/presentation_util/public/components/field_picker/field_type_filter.tsx b/src/plugins/presentation_util/public/components/field_picker/field_type_filter.tsx index d6fa9827f0af1..429e53ab4f077 100644 --- a/src/plugins/presentation_util/public/components/field_picker/field_type_filter.tsx +++ b/src/plugins/presentation_util/public/components/field_picker/field_type_filter.tsx @@ -12,7 +12,7 @@ import { EuiFilterGroup, EuiFlexGroup, EuiFlexItem, - EuiPopover, + EuiInputPopover, EuiContextMenuPanel, EuiContextMenuItem, EuiOutsideClickDetector, @@ -23,8 +23,6 @@ import { import { FieldIcon } from '@kbn/react-field'; import { FormattedMessage } from '@kbn/i18n-react'; -import './field_type_filter.scss'; - export interface Props { onFieldTypesChange: (value: string[]) => void; fieldTypesValue: string[]; @@ -65,15 +63,15 @@ export function FieldTypeFilter({ return ( {}} isDisabled={!isPopoverOpen}> - { setPopoverOpen(false); }} - button={buttonContent} + fullWidth + input={buttonContent} > {i18n.translate('presentationUtil.fieldSearch.filterByTypeLabel', { @@ -103,7 +101,7 @@ export function FieldTypeFilter({ ))} /> - + ); From 2e07d31108907f41d4ff51633fb05ee3bd1f015c Mon Sep 17 00:00:00 2001 From: Hannah Mudge Date: Mon, 17 Jul 2023 15:56:54 -0600 Subject: [PATCH 03/11] Switch focus back to search on filter popover close --- .../components/field_picker/field_picker.tsx | 9 +- .../field_picker/field_type_filter.tsx | 99 ++++++++++--------- 2 files changed, 60 insertions(+), 48 deletions(-) diff --git a/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx b/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx index 776f87a1d77ba..bde1a5a0c8d64 100644 --- a/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx +++ b/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx @@ -8,7 +8,7 @@ import classNames from 'classnames'; import { sortBy, uniq } from 'lodash'; -import React, { useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useState } from 'react'; import { i18n } from '@kbn/i18n'; import { FieldIcon } from '@kbn/react-field'; @@ -41,6 +41,7 @@ export const FieldPicker = ({ selectableProps, ...other }: FieldPickerProps) => { + const [searchRef, setSearchRef] = useState(null); const [typesFilter, setTypesFilter] = useState([]); const [fieldSelectableOptions, setFieldSelectableOptions] = useState([]); @@ -90,9 +91,14 @@ export const FieldPicker = ({ [dataView, filterPredicate] ); + const setFocusToSearch = useCallback(() => { + searchRef?.focus(); + }, [searchRef]); + const fieldTypeFilter = ( setTypesFilter(types)} fieldTypesValue={typesFilter} availableFieldTypes={uniqueTypes} @@ -128,6 +134,7 @@ export const FieldPicker = ({ defaultMessage: 'Search field names', }), disabled: Boolean(selectableProps?.isLoading), + inputRef: setSearchRef, }} listProps={{ isVirtualized: true, diff --git a/src/plugins/presentation_util/public/components/field_picker/field_type_filter.tsx b/src/plugins/presentation_util/public/components/field_picker/field_type_filter.tsx index 429e53ab4f077..a26899fb3bcb1 100644 --- a/src/plugins/presentation_util/public/components/field_picker/field_type_filter.tsx +++ b/src/plugins/presentation_util/public/components/field_picker/field_type_filter.tsx @@ -7,6 +7,7 @@ */ import React, { useState } from 'react'; + import { i18n } from '@kbn/i18n'; import { EuiFilterGroup, @@ -15,7 +16,6 @@ import { EuiInputPopover, EuiContextMenuPanel, EuiContextMenuItem, - EuiOutsideClickDetector, EuiFilterButton, EuiPopoverTitle, EuiFilterButtonProps, @@ -25,15 +25,17 @@ import { FormattedMessage } from '@kbn/i18n-react'; export interface Props { onFieldTypesChange: (value: string[]) => void; - fieldTypesValue: string[]; - availableFieldTypes: string[]; buttonProps?: Partial; + setFocusToSearch: () => void; + availableFieldTypes: string[]; + fieldTypesValue: string[]; } export function FieldTypeFilter({ + availableFieldTypes, onFieldTypesChange, + setFocusToSearch, fieldTypesValue, - availableFieldTypes, buttonProps, }: Props) { const [isPopoverOpen, setPopoverOpen] = useState(false); @@ -61,48 +63,51 @@ export function FieldTypeFilter({ ); return ( - {}} isDisabled={!isPopoverOpen}> - - { - setPopoverOpen(false); - }} - fullWidth - input={buttonContent} - > - - {i18n.translate('presentationUtil.fieldSearch.filterByTypeLabel', { - defaultMessage: 'Filter by type', - })} - - ( - { - if (fieldTypesValue.includes(type)) { - onFieldTypesChange(fieldTypesValue.filter((f) => f !== type)); - } else { - onFieldTypesChange([...fieldTypesValue, type]); - } - }} - > - - - - - {type} - - - ))} - /> - - - + + { + setPopoverOpen(false); + }} + fullWidth + input={buttonContent} + // BLOCKED BY: https://github.com/elastic/eui/pull/6955 + focusTrapProps={{ + returnFocus: false, // we will be manually returning the focus to the search + onDeactivation: setFocusToSearch, + }} + > + + {i18n.translate('presentationUtil.fieldSearch.filterByTypeLabel', { + defaultMessage: 'Filter by type', + })} + + ( + { + if (fieldTypesValue.includes(type)) { + onFieldTypesChange(fieldTypesValue.filter((f) => f !== type)); + } else { + onFieldTypesChange([...fieldTypesValue, type]); + } + }} + > + + + + + {type} + + + ))} + /> + + ); } From 332e87defbcd405eb7d52aba761d39943045108c Mon Sep 17 00:00:00 2001 From: Hannah Mudge Date: Fri, 28 Jul 2023 09:59:17 -0600 Subject: [PATCH 04/11] Commit before rebase --- .../public/components/field_picker/field_type_filter.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/plugins/presentation_util/public/components/field_picker/field_type_filter.tsx b/src/plugins/presentation_util/public/components/field_picker/field_type_filter.tsx index a26899fb3bcb1..0374b916f7496 100644 --- a/src/plugins/presentation_util/public/components/field_picker/field_type_filter.tsx +++ b/src/plugins/presentation_util/public/components/field_picker/field_type_filter.tsx @@ -73,7 +73,6 @@ export function FieldTypeFilter({ }} fullWidth input={buttonContent} - // BLOCKED BY: https://github.com/elastic/eui/pull/6955 focusTrapProps={{ returnFocus: false, // we will be manually returning the focus to the search onDeactivation: setFocusToSearch, From 8ff957e7b523a28f0ea83ebb3024bd368bcac9a3 Mon Sep 17 00:00:00 2001 From: Hannah Mudge Date: Fri, 28 Jul 2023 11:22:58 -0600 Subject: [PATCH 05/11] Remove redundant titles from popovers --- .../components/data_view_picker/data_view_picker.tsx | 8 +------- .../public/components/field_picker/field_type_filter.tsx | 7 ------- 2 files changed, 1 insertion(+), 14 deletions(-) diff --git a/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx b/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx index ab7225466ed05..2b55f25eb869b 100644 --- a/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx +++ b/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx @@ -6,9 +6,8 @@ * Side Public License, v 1. */ -import { i18n } from '@kbn/i18n'; import React, { useState } from 'react'; -import { EuiSelectable, EuiPopoverTitle, EuiInputPopover, EuiSelectableProps } from '@elastic/eui'; +import { EuiSelectable, EuiInputPopover, EuiSelectableProps } from '@elastic/eui'; import { DataViewListItem } from '@kbn/data-views-plugin/common'; import { ToolbarButton, ToolbarButtonProps } from '@kbn/kibana-react-plugin/public'; @@ -70,11 +69,6 @@ export function DataViewPicker({ ownFocus fullWidth > - - {i18n.translate('presentationUtil.dataViewPicker.changeDataViewTitle', { - defaultMessage: 'Data view', - })} - - - {i18n.translate('presentationUtil.fieldSearch.filterByTypeLabel', { - defaultMessage: 'Filter by type', - })} - ( Date: Fri, 28 Jul 2023 13:51:49 -0600 Subject: [PATCH 06/11] Bring selected field to the top of the list --- .../components/field_picker/field_picker.scss | 7 ++++--- .../components/field_picker/field_picker.tsx | 14 ++++++++------ 2 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/plugins/presentation_util/public/components/field_picker/field_picker.scss b/src/plugins/presentation_util/public/components/field_picker/field_picker.scss index 74e29b409b5f4..40793e7f3f84e 100644 --- a/src/plugins/presentation_util/public/components/field_picker/field_picker.scss +++ b/src/plugins/presentation_util/public/components/field_picker/field_picker.scss @@ -1,11 +1,12 @@ -.presFieldPickerFieldButtonActive { - background-color: transparentize($euiColorPrimary, .9); -} .fieldPickerSelectable { height: $euiSizeXXL * 9; // 40 * 9 = 360px + .presFieldPicker__fieldButton[aria-checked="true"] { + background-color: transparentize($euiColorPrimary, .9); + } + .euiSelectableMessage { height: 100%; } diff --git a/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx b/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx index bde1a5a0c8d64..17397683bef04 100644 --- a/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx +++ b/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx @@ -8,7 +8,8 @@ import classNames from 'classnames'; import { sortBy, uniq } from 'lodash'; -import React, { useCallback, useEffect, useMemo, useState } from 'react'; +import useMount from 'react-use/lib/useMount'; +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { i18n } from '@kbn/i18n'; import { FieldIcon } from '@kbn/react-field'; @@ -41,8 +42,10 @@ export const FieldPicker = ({ selectableProps, ...other }: FieldPickerProps) => { - const [searchRef, setSearchRef] = useState(null); + const initialSelection = useRef(selectedFieldName); + const [typesFilter, setTypesFilter] = useState([]); + const [searchRef, setSearchRef] = useState(null); const [fieldSelectableOptions, setFieldSelectableOptions] = useState([]); const availableFields = useMemo( @@ -52,7 +55,7 @@ export const FieldPicker = ({ .filter((f) => typesFilter.length === 0 || typesFilter.includes(f.type as string)) .filter((f) => (filterPredicate ? filterPredicate(f) : true)), ['name'] - ), + ).sort((f) => (f.name === initialSelection.current ? -1 : 1)), [dataView, filterPredicate, typesFilter] ); @@ -62,9 +65,8 @@ export const FieldPicker = ({ return { key: field.name, label: field.displayName ?? field.name, - className: classNames('presFieldPicker__fieldButton', { - presFieldPickerFieldButtonActive: field.name === selectedFieldName, - }), + className: 'presFieldPicker__fieldButton', + checked: field.name === selectedFieldName ? 'on' : undefined, 'data-test-subj': `field-picker-select-${field.name}`, prepend: ( Date: Fri, 28 Jul 2023 14:58:25 -0600 Subject: [PATCH 07/11] Fix linting + failing tests --- .../data_view_picker/data_view_picker.tsx | 13 ++++++++----- .../components/field_picker/field_picker.scss | 4 +--- .../page_objects/dashboard_page_controls.ts | 2 +- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx b/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx index 2b55f25eb869b..a7ee475cfa5d3 100644 --- a/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx +++ b/src/plugins/presentation_util/public/components/data_view_picker/data_view_picker.tsx @@ -61,13 +61,16 @@ export function DataViewPicker({ return ( setPopoverIsOpen(false)} - display="block" - panelPaddingSize="s" ownFocus fullWidth + display="block" + panelPaddingSize="s" + isOpen={isPopoverOpen} + input={createTrigger()} + closePopover={() => setPopoverIsOpen(false)} + panelProps={{ + 'data-test-subj': 'data-view-picker-popover', + }} > { - await this.testSubjects.existOrFail('data-view-picker-title'); + await this.testSubjects.existOrFail('data-view-picker-popover'); }); await this.testSubjects.click(`data-view-picker-${dataViewTitle}`); } From bb9c0c4153868172cfcd8e388b40c5e6274ce493 Mon Sep 17 00:00:00 2001 From: Hannah Mudge Date: Fri, 28 Jul 2023 15:22:33 -0600 Subject: [PATCH 08/11] Remove unused translations + clean up --- .../components/options_list_popover.test.tsx | 11 ----------- .../public/components/field_picker/field_picker.tsx | 1 - x-pack/plugins/translations/translations/fr-FR.json | 2 -- x-pack/plugins/translations/translations/ja-JP.json | 2 -- x-pack/plugins/translations/translations/zh-CN.json | 2 -- 5 files changed, 18 deletions(-) diff --git a/src/plugins/controls/public/options_list/components/options_list_popover.test.tsx b/src/plugins/controls/public/options_list/components/options_list_popover.test.tsx index 67c78b64f6066..c78e2086a3684 100644 --- a/src/plugins/controls/public/options_list/components/options_list_popover.test.tsx +++ b/src/plugins/controls/public/options_list/components/options_list_popover.test.tsx @@ -58,17 +58,6 @@ describe('Options list popover', () => { showOnlySelectedButton.simulate('click'); }; - test('available options list width responds to container size', async () => { - let popover = await mountComponent({ popoverProps: { width: 301 } }); - let popoverDiv = findTestSubject(popover, 'optionsList-control-popover'); - expect(popoverDiv.getDOMNode().getAttribute('style')).toBe('width: 301px; min-width: 300px;'); - - // the div cannot be smaller than 301 pixels wide - popover = await mountComponent({ popoverProps: { width: 300 } }); - popoverDiv = findTestSubject(popover, 'optionsList-control-available-options'); - expect(popoverDiv.getDOMNode().getAttribute('style')).toBe('width: 100%; height: 100%;'); - }); - test('no available options', async () => { const popover = await mountComponent({ componentState: { availableOptions: [] } }); const availableOptionsDiv = findTestSubject(popover, 'optionsList-control-available-options'); diff --git a/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx b/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx index 17397683bef04..d5789284b4131 100644 --- a/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx +++ b/src/plugins/presentation_util/public/components/field_picker/field_picker.tsx @@ -8,7 +8,6 @@ import classNames from 'classnames'; import { sortBy, uniq } from 'lodash'; -import useMount from 'react-use/lib/useMount'; import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { i18n } from '@kbn/i18n'; diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index 06cdb53ff99b6..0d25baa04e650 100644 --- a/x-pack/plugins/translations/translations/fr-FR.json +++ b/x-pack/plugins/translations/translations/fr-FR.json @@ -4793,11 +4793,9 @@ "presentationUtil.labs.components.enabledStatusMessage": "Par défaut : {status}", "presentationUtil.labs.components.noProjectsinSolutionMessage": "Aucun atelier actuellement dans {solutionName}.", "presentationUtil.dashboardPicker.searchDashboardPlaceholder": "Recherche dans les tableaux de bord…", - "presentationUtil.dataViewPicker.changeDataViewTitle": "Vue de données", "presentationUtil.fieldPicker.noFieldsLabel": "Aucun champ correspondant", "presentationUtil.fieldPicker.selectableAriaLabel": "Sélectionner un champ", "presentationUtil.fieldSearch.fieldFilterButtonLabel": "Filtrer par type", - "presentationUtil.fieldSearch.filterByTypeLabel": "Filtrer par type", "presentationUtil.fieldSearch.searchPlaceHolder": "Rechercher les noms de champs", "presentationUtil.labs.components.browserSwitchHelp": "Active l'atelier pour ce navigateur et persiste après sa fermeture.", "presentationUtil.labs.components.browserSwitchName": "Navigateur", diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 238e3ddd9bc95..a884c2bc376a7 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -4809,11 +4809,9 @@ "presentationUtil.labs.components.enabledStatusMessage": "デフォルト：{status}", "presentationUtil.labs.components.noProjectsinSolutionMessage": "現在{solutionName}にラボはありません。", "presentationUtil.dashboardPicker.searchDashboardPlaceholder": "ダッシュボードを検索...", - "presentationUtil.dataViewPicker.changeDataViewTitle": "データビュー", "presentationUtil.fieldPicker.noFieldsLabel": "一致するがフィールドがありません", "presentationUtil.fieldPicker.selectableAriaLabel": "フィールドを選択", "presentationUtil.fieldSearch.fieldFilterButtonLabel": "タイプでフィルタリング", - "presentationUtil.fieldSearch.filterByTypeLabel": "タイプでフィルタリング", "presentationUtil.fieldSearch.searchPlaceHolder": "検索フィールド名", "presentationUtil.labs.components.browserSwitchHelp": "このブラウザーでラボを有効にします。ブラウザーを閉じた後も永続します。", "presentationUtil.labs.components.browserSwitchName": "ブラウザー", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 07f98bc7b2635..8dd40536606cb 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -4808,11 +4808,9 @@ "presentationUtil.labs.components.enabledStatusMessage": "默认值：{status}", "presentationUtil.labs.components.noProjectsinSolutionMessage": "{solutionName} 中当前没有实验。", "presentationUtil.dashboardPicker.searchDashboardPlaceholder": "搜索仪表板......", - "presentationUtil.dataViewPicker.changeDataViewTitle": "数据视图", "presentationUtil.fieldPicker.noFieldsLabel": "无匹配字段", "presentationUtil.fieldPicker.selectableAriaLabel": "选择字段", "presentationUtil.fieldSearch.fieldFilterButtonLabel": "按类型筛选", - "presentationUtil.fieldSearch.filterByTypeLabel": "按类型筛选", "presentationUtil.fieldSearch.searchPlaceHolder": "搜索字段名称", "presentationUtil.labs.components.browserSwitchHelp": "启用此浏览器的实验并在其关闭后继续保持。", "presentationUtil.labs.components.browserSwitchName": "浏览器", From 52d4e2602d1be55ca18c5d2b2bec67c5e745c094 Mon Sep 17 00:00:00 2001 From: Hannah Mudge Date: Mon, 31 Jul 2023 08:43:39 -0600 Subject: [PATCH 09/11] Undo removed test --- .../components/options_list_popover.test.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/src/plugins/controls/public/options_list/components/options_list_popover.test.tsx b/src/plugins/controls/public/options_list/components/options_list_popover.test.tsx index c78e2086a3684..67c78b64f6066 100644 --- a/src/plugins/controls/public/options_list/components/options_list_popover.test.tsx +++ b/src/plugins/controls/public/options_list/components/options_list_popover.test.tsx @@ -58,6 +58,17 @@ describe('Options list popover', () => { showOnlySelectedButton.simulate('click'); }; + test('available options list width responds to container size', async () => { + let popover = await mountComponent({ popoverProps: { width: 301 } }); + let popoverDiv = findTestSubject(popover, 'optionsList-control-popover'); + expect(popoverDiv.getDOMNode().getAttribute('style')).toBe('width: 301px; min-width: 300px;'); + + // the div cannot be smaller than 301 pixels wide + popover = await mountComponent({ popoverProps: { width: 300 } }); + popoverDiv = findTestSubject(popover, 'optionsList-control-available-options'); + expect(popoverDiv.getDOMNode().getAttribute('style')).toBe('width: 100%; height: 100%;'); + }); + test('no available options', async () => { const popover = await mountComponent({ componentState: { availableOptions: [] } }); const availableOptionsDiv = findTestSubject(popover, 'optionsList-control-available-options'); From 5711793c159d8e1487a38684b27988d6a82814e9 Mon Sep 17 00:00:00 2001 From: Hannah Mudge Date: Wed, 2 Aug 2023 10:05:18 -0600 Subject: [PATCH 10/11] Fix radius on options list again --- .../controls/public/options_list/components/options_list.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/plugins/controls/public/options_list/components/options_list.scss b/src/plugins/controls/public/options_list/components/options_list.scss index 0309437b8c9b3..548bd9a125cfc 100644 --- a/src/plugins/controls/public/options_list/components/options_list.scss +++ b/src/plugins/controls/public/options_list/components/options_list.scss @@ -68,6 +68,8 @@ } .optionsList--filterBtn { + border-radius: 0 !important; + .euiFilterButton__text-hasNotification { flex-grow: 1; justify-content: space-between; From cdbef0a992d00d10fa80f83b7931a71a700fd194 Mon Sep 17 00:00:00 2001 From: Hannah Mudge Date: Wed, 2 Aug 2023 10:11:06 -0600 Subject: [PATCH 11/11] Undo fix - done in https://github.com/elastic/kibana/pull/162651 instead --- .../controls/public/options_list/components/options_list.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/plugins/controls/public/options_list/components/options_list.scss b/src/plugins/controls/public/options_list/components/options_list.scss index 548bd9a125cfc..0309437b8c9b3 100644 --- a/src/plugins/controls/public/options_list/components/options_list.scss +++ b/src/plugins/controls/public/options_list/components/options_list.scss @@ -68,8 +68,6 @@ } .optionsList--filterBtn { - border-radius: 0 !important; - .euiFilterButton__text-hasNotification { flex-grow: 1; justify-content: space-between;