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.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 fae805cd49ebc..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 @@ -6,15 +6,12 @@ * Side Public License, v 1. */ -import { i18n } from '@kbn/i18n'; import React, { useState } from 'react'; -import { EuiPopover, EuiPopoverTitle, EuiSelectable, 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'; -import './data_view_picker.scss'; - export type DataViewTriggerProps = ToolbarButtonProps & { label: string; title?: string; @@ -26,6 +23,7 @@ export function DataViewPicker({ onChangeDataViewId, trigger, selectableProps, + ...other }: { dataViews: DataViewListItem[]; selectedDataViewId?: string; @@ -61,20 +59,19 @@ export function DataViewPicker({ }; return ( - setPopoverIsOpen(false)} + setPopoverIsOpen(false)} + panelProps={{ + 'data-test-subj': 'data-view-picker-popover', + }} > - - {i18n.translate('presentationUtil.dataViewPicker.changeDataViewTitle', { - defaultMessage: 'Data view', - })} - )} - + ); } 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..8013882b8297a 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,10 @@ - -.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 20605d374d0fc..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,7 @@ import classNames from 'classnames'; import { sortBy, uniq } from 'lodash'; -import React, { useEffect, useMemo, useState } from 'react'; +import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; import { i18n } from '@kbn/i18n'; import { FieldIcon } from '@kbn/react-field'; @@ -39,8 +39,12 @@ export const FieldPicker = ({ filterPredicate, selectedFieldName, selectableProps, + ...other }: FieldPickerProps) => { + const initialSelection = useRef(selectedFieldName); + const [typesFilter, setTypesFilter] = useState([]); + const [searchRef, setSearchRef] = useState(null); const [fieldSelectableOptions, setFieldSelectableOptions] = useState([]); const availableFields = useMemo( @@ -50,7 +54,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] ); @@ -60,9 +64,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: ( { + searchRef?.focus(); + }, [searchRef]); + const fieldTypeFilter = ( setTypesFilter(types)} fieldTypesValue={typesFilter} availableFieldTypes={uniqueTypes} @@ -102,6 +110,7 @@ export const FieldPicker = ({ return ( 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); @@ -63,48 +61,45 @@ export function FieldTypeFilter({ ); return ( - {}} isDisabled={!isPopoverOpen}> - - { - setPopoverOpen(false); - }} - button={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} + focusTrapProps={{ + returnFocus: false, // we will be manually returning the focus to the search + onDeactivation: setFocusToSearch, + }} + > + ( + { + if (fieldTypesValue.includes(type)) { + onFieldTypesChange(fieldTypesValue.filter((f) => f !== type)); + } else { + onFieldTypesChange([...fieldTypesValue, type]); + } + }} + > + + + + + {type} + + + ))} + /> + + ); } diff --git a/test/functional/page_objects/dashboard_page_controls.ts b/test/functional/page_objects/dashboard_page_controls.ts index 8023765109d04..ff910de1a3fd6 100644 --- a/test/functional/page_objects/dashboard_page_controls.ts +++ b/test/functional/page_objects/dashboard_page_controls.ts @@ -599,7 +599,7 @@ export class DashboardPageControls extends FtrService { this.log.debug(`Setting control data view to ${dataViewTitle}`); await this.testSubjects.click('open-data-view-picker'); await this.retry.try(async () => { - await this.testSubjects.existOrFail('data-view-picker-title'); + await this.testSubjects.existOrFail('data-view-picker-popover'); }); await this.testSubjects.click(`data-view-picker-${dataViewTitle}`); } diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json index 45101f9bc6ed8..21994debe692a 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 b3503b6020b49..a02424df553fa 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 5c725f1b1571b..4de8d257a615e 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": "浏览器",