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) {