[Exploratory View] series name enter duplicate series (elastic#120528) (

elastic#120602) * save series name on enter key * change copy series to duplicate series * adjust types Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Dominique Clarke <[email protected]>
kibanamachine · Dec 7, 2021 · 618069a · 618069a
1 parent 0d43cb9
commit 618069a
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 7 deletions.
diff --git a/...bility/public/components/shared/exploratory_view/series_editor/columns/series_actions.tsx b/...bility/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/...lity/public/components/shared/exploratory_view/series_editor/columns/series_name.test.tsx b/...lity/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(<SeriesName seriesId={0} series={mockUxSeries} />);
 
@@ -20,7 +27,7 @@ describe.skip('SeriesChartTypesSelect', function () {
   it('should display input when editing name', async function () {
     render(<SeriesName seriesId={0} series={mockUxSeries} />);
 
-    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(<SeriesName seriesId={0} series={mockUxSeries} />);
+
+    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/...rvability/public/components/shared/exploratory_view/series_editor/columns/series_name.tsx b/...rvability/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<HTMLInputElement> = (event) => {
+    if (event.key === 'Enter') {
+      setIsEditingEnabled(false);
+    }
+  };
+
   useEffect(() => {
     setValue(series.name);
   }, [series.name]);
@@ -75,12 +81,14 @@ export function SeriesName({ series, seriesId }: Props) {
             <EuiFieldText
               value={value}
               onChange={onChange}
-              fullWidth
               onBlur={onSave}
+              onKeyDown={onKeyDown}
+              fullWidth
               inputRef={inputRef}
               aria-label={i18n.translate('xpack.observability.expView.seriesEditor.seriesName', {
                 defaultMessage: 'Series name',
               })}
+              data-test-subj="exploratoryViewSeriesNameInput"
             />
           </EuiOutsideClickDetector>
         </EuiFlexItem>