diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/columns/series_actions.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/columns/series_actions.tsx index 640e928b8ab98..074a9e1ca6780 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/columns/series_actions.tsx +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/columns/series_actions.tsx @@ -112,7 +112,7 @@ const HIDE_SERIES_LABEL = i18n.translate('xpack.observability.seriesEditor.hide' }); const COPY_SERIES_LABEL = i18n.translate('xpack.observability.seriesEditor.clone', { - defaultMessage: 'Copy series', + defaultMessage: 'Duplicate series', }); const VIEW_SAMPLE_DOCUMENTS_LABEL = i18n.translate( diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/columns/series_name.test.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/columns/series_name.test.tsx index ccad461209313..cbd7efc42d964 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/columns/series_name.test.tsx +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/columns/series_name.test.tsx @@ -7,10 +7,17 @@ import React from 'react'; import { fireEvent, screen, waitFor } from '@testing-library/react'; +import userEvent from '@testing-library/user-event'; import { mockUxSeries, render } from '../../rtl_helpers'; import { SeriesName } from './series_name'; -describe.skip('SeriesChartTypesSelect', function () { +// ensures that fields appropriately match to their label +jest.mock('@elastic/eui/lib/services/accessibility/html_id_generator', () => ({ + ...jest.requireActual('@elastic/eui/lib/services/accessibility/html_id_generator'), + htmlIdGenerator: () => () => `id-${Math.random()}`, +})); + +describe('SeriesName', function () { it('should render properly', async function () { render(); @@ -20,7 +27,7 @@ describe.skip('SeriesChartTypesSelect', function () { it('should display input when editing name', async function () { render(); - let input = screen.queryByLabelText(mockUxSeries.name); + let input = screen.queryByTestId('exploratoryViewSeriesNameInput') as HTMLInputElement; // read only expect(input).not.toBeInTheDocument(); @@ -30,17 +37,52 @@ describe.skip('SeriesChartTypesSelect', function () { fireEvent.click(editButton); await waitFor(() => { - input = screen.getByLabelText(mockUxSeries.name); + input = screen.getByTestId('exploratoryViewSeriesNameInput') as HTMLInputElement; expect(input).toBeInTheDocument(); + expect(input.value).toBe(mockUxSeries.name); }); // toggle readonly fireEvent.click(editButton); await waitFor(() => { - input = screen.getByLabelText(mockUxSeries.name); + input = screen.queryByTestId('exploratoryViewSeriesNameInput') as HTMLInputElement; + + expect(screen.getByText(mockUxSeries.name)).toBeInTheDocument(); + expect(input).not.toBeInTheDocument(); + }); + }); + + it('should save name on enter key', async function () { + const newName = '-test-new-name'; + render(); + + let input = screen.queryByTestId('exploratoryViewSeriesNameInput') as HTMLInputElement; + + // read only + expect(input).not.toBeInTheDocument(); + + const editButton = screen.getByRole('button'); + // toggle editing + userEvent.click(editButton); + + await waitFor(() => { + input = screen.getByTestId('exploratoryViewSeriesNameInput') as HTMLInputElement; + + expect(input).toBeInTheDocument(); + }); + + userEvent.click(input); + userEvent.type(input, newName); + + // submit + userEvent.keyboard('{enter}'); + + await waitFor(() => { + input = screen.queryByTestId('exploratoryViewSeriesNameInput') as HTMLInputElement; + expect(screen.getByText(`${mockUxSeries.name}${newName}`)).toBeInTheDocument(); expect(input).not.toBeInTheDocument(); }); }); diff --git a/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/columns/series_name.tsx b/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/columns/series_name.tsx index cff30a2b35059..68a628e23292c 100644 --- a/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/columns/series_name.tsx +++ b/x-pack/plugins/observability/public/components/shared/exploratory_view/series_editor/columns/series_name.tsx @@ -5,7 +5,7 @@ * 2.0. */ -import React, { useState, ChangeEvent, useEffect, useRef } from 'react'; +import React, { useState, ChangeEvent, useEffect, useRef, KeyboardEventHandler } from 'react'; import styled from 'styled-components'; import { i18n } from '@kbn/i18n'; import { @@ -57,6 +57,12 @@ export function SeriesName({ series, seriesId }: Props) { } }; + const onKeyDown: KeyboardEventHandler = (event) => { + if (event.key === 'Enter') { + setIsEditingEnabled(false); + } + }; + useEffect(() => { setValue(series.name); }, [series.name]); @@ -75,12 +81,14 @@ export function SeriesName({ series, seriesId }: Props) {