diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx index 3d453cd078b7..b1fe9174d6d6 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/config_panel.tsx @@ -94,7 +94,7 @@ function LayerPanels( {...props} key={layerId} layerId={layerId} - dataTestSubj={`lns-layerPanel-${index}`} + index={index} visualizationState={visualizationState} updateVisualization={setVisualizationState} updateDatasource={updateDatasource} diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss index bd2789cf645c..5947d62540a0 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.scss @@ -13,7 +13,39 @@ animation: euiFlyout $euiAnimSpeedNormal $euiAnimSlightResistance; } -.lnsDimensionContainer__footer, -.lnsDimensionContainer__header { +.lnsDimensionContainer__footer { padding: $euiSizeS; } + +.lnsDimensionContainer__header { + padding: $euiSizeS $euiSizeXS; +} + +.lnsDimensionContainer__headerTitle { + padding: $euiSizeS $euiSizeXS; + cursor: pointer; + + &:hover { + text-decoration: underline; + } +} + +.lnsDimensionContainer__headerLink { + &:focus-within { + background-color: transparentize($euiColorVis1, .9); + + .lnsDimensionContainer__headerTitle { + text-decoration: underline; + } + } +} + +.lnsDimensionContainer__backIcon { + &:hover { + transform: none !important; // sass-lint:disable-line no-important + } + + &:focus { + background-color: transparent; + } +} diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx index 8f1b441d1d28..748079cc7a40 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/dimension_container.tsx @@ -10,7 +10,9 @@ import { EuiFlyoutHeader, EuiFlyoutFooter, EuiTitle, + EuiButtonIcon, EuiButtonEmpty, + EuiFlexGroup, EuiFlexItem, EuiFocusTrap, EuiOutsideClickDetector, @@ -54,24 +56,42 @@ export function DimensionContainer({ className="lnsDimensionContainer" > - - - - {i18n.translate('xpack.lens.configure.configurePanelTitle', { - defaultMessage: '{groupLabel} configuration', - values: { - groupLabel, - }, + + + - - + /> + + + +

+ + {i18n.translate('xpack.lens.configure.configurePanelTitle', { + defaultMessage: '{groupLabel} configuration', + values: { + groupLabel, + }, + })} + +

+
+
+
{panel} diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx index 37dc039df498..f6cba87e9c6c 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.test.tsx @@ -58,7 +58,7 @@ describe('LayerPanel', () => { onRemoveLayer: jest.fn(), dispatch: jest.fn(), core: coreMock.createStart(), - dataTestSubj: 'lns_layerPanel-0', + index: 0, }; } diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx index cc456e843bb6..4231f4b53997 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx @@ -29,6 +29,12 @@ import { DimensionContainer } from './dimension_container'; import { ColorIndicator } from './color_indicator'; import { PaletteIndicator } from './palette_indicator'; +const triggerLinkA11yText = (label: string) => + i18n.translate('xpack.lens.configure.editConfig', { + defaultMessage: 'Click to edit configuration for {label} or drag to move', + values: { label }, + }); + const initialActiveDimensionState = { isNew: false, }; @@ -58,7 +64,7 @@ function isSameConfiguration(config1: unknown, config2: unknown) { export function LayerPanel( props: Exclude & { layerId: string; - dataTestSubj: string; + index: number; isOnlyLayer: boolean; updateVisualization: StateSetter; updateDatasource: (datasourceId: string, newState: unknown) => void; @@ -75,7 +81,7 @@ export function LayerPanel( initialActiveDimensionState ); - const { framePublicAPI, layerId, isOnlyLayer, onRemoveLayer, dataTestSubj } = props; + const { framePublicAPI, layerId, isOnlyLayer, onRemoveLayer, index } = props; const datasourcePublicAPI = framePublicAPI.datasourceLayers[layerId]; useEffect(() => { @@ -125,7 +131,11 @@ export function LayerPanel( const columnLabelMap = layerDatasource.uniqueLabels(layerDatasourceConfigProps.state); return ( - + - {groups.map((group, index) => { + {groups.map((group, groupIndex) => { const newId = generateId(); const isMissing = !isEmptyLayer && group.required && group.accessors.length === 0; - const triggerLinkA11yText = i18n.translate('xpack.lens.configure.editConfig', { - defaultMessage: 'Click to edit configuration or drag to move', - }); - return ( {group.groupLabel}} labelType="legend" - key={index} + key={groupIndex} isInvalid={isMissing} error={ isMissing ? ( @@ -327,8 +333,8 @@ export function LayerPanel( }); } }} - aria-label={triggerLinkA11yText} - title={triggerLinkA11yText} + aria-label={triggerLinkA11yText(columnLabelMap[accessor])} + title={triggerLinkA11yText(columnLabelMap[accessor])} > { trackUiEvent('indexpattern_dimension_removed'); @@ -435,6 +443,13 @@ export function LayerPanel( contentProps={{ className: 'lnsLayerPanel__triggerTextContent', }} + aria-label={i18n.translate( + 'xpack.lens.indexPattern.removeColumnAriaLabel', + { + defaultMessage: 'Drop a field or click to add to {groupLabel}', + values: { groupLabel: group.groupLabel }, + } + )} data-test-subj="lns-empty-dimension" onClick={() => { if (activeId) { @@ -535,6 +550,17 @@ export function LayerPanel( iconType="trash" color="danger" data-test-subj="lnsLayerRemove" + aria-label={ + isOnlyLayer + ? i18n.translate('xpack.lens.resetLayerAriaLabel', { + defaultMessage: 'Reset layer {index}', + values: { index: index + 1 }, + }) + : i18n.translate('xpack.lens.deleteLayerAriaLabel', { + defaultMessage: `Delete layer {index}`, + values: { index: index + 1 }, + }) + } onClick={() => { // If we don't blur the remove / clear button, it remains focused // which is a strange UX in this case. e.target.blur doesn't work @@ -554,7 +580,7 @@ export function LayerPanel( defaultMessage: 'Reset layer', }) : i18n.translate('xpack.lens.deleteLayer', { - defaultMessage: 'Delete layer', + defaultMessage: `Delete layer`, })} diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx index 046bebb33a57..97a842f9e024 100644 --- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx +++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.tsx @@ -124,7 +124,9 @@ export function WorkspacePanelWrapper({

{title || - i18n.translate('xpack.lens.chartTitle.unsaved', { defaultMessage: 'Unsaved' })} + i18n.translate('xpack.lens.chartTitle.unsaved', { + defaultMessage: 'Unsaved visualization', + })}

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx index fa4b5637f11f..d070a01240b2 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx @@ -181,49 +181,56 @@ export const InnerFieldItem = function InnerFieldItem(props: FieldItemProps) { /> ); return ( - ('.application') || undefined} - button={ - - - {wrapOnDot(field.displayName)} - - } - fieldInfoIcon={lensInfoIcon} - /> - - } - isOpen={infoIsOpen} - closePopover={() => setOpen(false)} - anchorPosition="rightUp" - panelClassName="lnsFieldItem__fieldPanel" - > - - +
  • + ('.application') || undefined} + button={ + + + {wrapOnDot(field.displayName)} + + } + fieldInfoIcon={lensInfoIcon} + /> + + } + isOpen={infoIsOpen} + closePopover={() => setOpen(false)} + anchorPosition="rightUp" + panelClassName="lnsFieldItem__fieldPanel" + > + + +
  • ); }; diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/field_list.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/field_list.tsx index 9e89468200e2..16d1ecbf3296 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/field_list.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/field_list.tsx @@ -125,19 +125,21 @@ export function FieldList({ onScroll={throttle(lazyScroll, 100)} >
    - {Object.entries(fieldGroups) - .filter(([, { showInAccordion }]) => !showInAccordion) - .flatMap(([, { fields }]) => - fields.map((field) => ( - - )) - )} +
      + {Object.entries(fieldGroups) + .filter(([, { showInAccordion }]) => !showInAccordion) + .flatMap(([, { fields }]) => + fields.map((field) => ( + + )) + )} +
    {Object.entries(fieldGroups) .filter(([, { showInAccordion }]) => showInAccordion) diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/fields_accordion.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/fields_accordion.tsx index e531eb72f94c..19f478c33578 100644 --- a/x-pack/plugins/lens/public/indexpattern_datasource/fields_accordion.tsx +++ b/x-pack/plugins/lens/public/indexpattern_datasource/fields_accordion.tsx @@ -113,9 +113,9 @@ export const InnerFieldsAccordion = function InnerFieldsAccordion({ {hasLoaded && (!!fieldsCount ? ( -
    +
      {paginatedFields && paginatedFields.map(renderField)} -
    + ) : ( renderCallout ))} diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json index 297ed96a6e49..43f18a2040da 100644 --- a/x-pack/plugins/translations/translations/ja-JP.json +++ b/x-pack/plugins/translations/translations/ja-JP.json @@ -10579,14 +10579,12 @@ "xpack.lens.chartSwitch.dataLossDescription": "このチャートに切り替えると構成の一部が失われます", "xpack.lens.chartSwitch.dataLossLabel": "データ喪失", "xpack.lens.chartSwitch.noResults": "{term}の結果が見つかりませんでした。", - "xpack.lens.chartTitle.unsaved": "未保存", "xpack.lens.configPanel.chartType": "チャートタイプ", "xpack.lens.configPanel.color.tooltip.auto": "カスタム色を指定しない場合、Lensは自動的に色を選択します。", "xpack.lens.configPanel.color.tooltip.custom": "[自動]モードに戻すには、カスタム色をオフにしてください。", "xpack.lens.configPanel.color.tooltip.disabled": "レイヤーに「内訳条件」が含まれている場合は、個別の系列をカスタム色にできません。", "xpack.lens.configPanel.selectVisualization": "ビジュアライゼーションを選択してください", "xpack.lens.configure.configurePanelTitle": "{groupLabel}構成", - "xpack.lens.configure.editConfig": "クリックして構成を編集するか、ドラッグして移動", "xpack.lens.configure.emptyConfig": "フィールドを破棄、またはクリックして追加", "xpack.lens.configure.invalidConfigTooltip": "無効な構成です。", "xpack.lens.configure.invalidConfigTooltipClick": "詳細はクリックしてください。", @@ -10725,7 +10723,6 @@ "xpack.lens.indexPattern.ranges.lessThanPrepend": "<", "xpack.lens.indexPattern.ranges.lessThanTooltip": "より小さい", "xpack.lens.indexPattern.records": "記録", - "xpack.lens.indexPattern.removeColumnLabel": "構成を削除", "xpack.lens.indexpattern.suggestions.nestingChangeLabel": "各 {outerOperation} の {innerOperation}", "xpack.lens.indexpattern.suggestions.overallLabel": "全体の {operation}", "xpack.lens.indexpattern.suggestions.overTimeLabel": "一定時間", diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json index 3e8b5d0996ee..f11c9c8b39db 100644 --- a/x-pack/plugins/translations/translations/zh-CN.json +++ b/x-pack/plugins/translations/translations/zh-CN.json @@ -10592,14 +10592,12 @@ "xpack.lens.chartSwitch.dataLossDescription": "切换到此图表将会丢失部分配置", "xpack.lens.chartSwitch.dataLossLabel": "数据丢失", "xpack.lens.chartSwitch.noResults": "找不到 {term} 的结果。", - "xpack.lens.chartTitle.unsaved": "未保存", "xpack.lens.configPanel.chartType": "图表类型", "xpack.lens.configPanel.color.tooltip.auto": "Lens 自动为您选取颜色,除非您指定定制颜色。", "xpack.lens.configPanel.color.tooltip.custom": "清除定制颜色以返回到“自动”模式。", "xpack.lens.configPanel.color.tooltip.disabled": "当图层包括“细分依据”,各个系列无法定制颜色。", "xpack.lens.configPanel.selectVisualization": "选择可视化", "xpack.lens.configure.configurePanelTitle": "{groupLabel} 配置", - "xpack.lens.configure.editConfig": "单击以编辑配置或进行拖移", "xpack.lens.configure.emptyConfig": "放置字段或单击以添加", "xpack.lens.configure.invalidConfigTooltip": "配置无效。", "xpack.lens.configure.invalidConfigTooltipClick": "单击了解更多详情。", @@ -10738,7 +10736,6 @@ "xpack.lens.indexPattern.ranges.lessThanPrepend": "<", "xpack.lens.indexPattern.ranges.lessThanTooltip": "小于", "xpack.lens.indexPattern.records": "记录", - "xpack.lens.indexPattern.removeColumnLabel": "移除配置", "xpack.lens.indexpattern.suggestions.nestingChangeLabel": "每个 {outerOperation} 的 {innerOperation}", "xpack.lens.indexpattern.suggestions.overallLabel": "{operation} - 总体", "xpack.lens.indexpattern.suggestions.overTimeLabel": "时移", diff --git a/x-pack/test/functional/page_objects/lens_page.ts b/x-pack/test/functional/page_objects/lens_page.ts index c22c3db0e434..1f8ded1716ea 100644 --- a/x-pack/test/functional/page_objects/lens_page.ts +++ b/x-pack/test/functional/page_objects/lens_page.ts @@ -204,7 +204,7 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont // closes the dimension editor flyout async closeDimensionEditor() { - await testSubjects.click('lns-indexPattern-dimensionContainerTitle'); + await testSubjects.click('lns-indexPattern-dimensionContainerBack'); }, /**