Update ppl editor readonly property (#248)

* update ppl editor readonly property & fix flaky test

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* lint update

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

* lint fixes for test file

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>

---------

Signed-off-by: Shenoy Pratik <sgguruda@amazon.com>
(cherry picked from commit 0709b43)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

public/components/PPLPage/PPLPage.tsx

@@ -21,16 +21,16 @@ import {
   EuiText,
 } from '@elastic/eui';
 import React from 'react';
-import { ResponseDetail, TranslateResult } from '../Main/main';
 import { SAMPLE_PPL_QUERY } from '../../../common/constants';
+import { ResponseDetail, TranslateResult } from '../Main/main';
 
 interface PPLPageProps {
   onRun: (query: string) => void;
   onTranslate: (query: string) => void;
   onClear: () => void;
   updatePPLQueries: (query: string) => void;
   pplQuery: string;
-  pplTranslations: ResponseDetail<TranslateResult>[];
+  pplTranslations: Array<ResponseDetail<TranslateResult>>;
   selectedDatasource: EuiComboBoxOptionOption[];
   asyncLoading: boolean;
 }
@@ -122,7 +122,6 @@ export class PPLPage extends React.Component<PPLPageProps, PPLPageState> {
             showGutter: false,
           }}
           aria-label="Code Editor"
-          isReadOnly={this.props.asyncLoading}
         />
         <EuiSpacer />
         <EuiFlexGroup className="action-container" gutterSize="m">

public/components/QueryResults/QueryResultsBody.test.tsx

@@ -4,7 +4,7 @@
  */
 
 import '@testing-library/jest-dom/extend-expect';
-import { cleanup, fireEvent, render } from '@testing-library/react';
+import { act, cleanup, fireEvent, render, waitFor } from '@testing-library/react';
 import React from 'react';
 import QueryResultsBody from './QueryResultsBody';
 // @ts-ignore
@@ -72,7 +72,7 @@ function renderSQLQueryResultsBody(
   };
 }
 
-describe('<QueryResultsBody /> spec', () => {
+describe('<QueryResultsBody with SQL language/> spec', () => {
   afterEach(cleanup);
   const onQueryChange = jest.fn();
   const updateExpandedMap = jest.fn();
@@ -87,7 +87,7 @@ describe('<QueryResultsBody /> spec', () => {
       [
         {
           name: '',
-          getValue: (item: any) => '',
+          getValue: () => '',
           isAscending: true,
         },
       ],
@@ -128,7 +128,6 @@ describe('<QueryResultsBody /> spec', () => {
 
     const {
       getAllByText,
-      getAllByTestId,
       getAllByLabelText,
       getByText,
       getByPlaceholderText,
@@ -154,10 +153,10 @@ describe('<QueryResultsBody /> spec', () => {
 
     // Test pagination
     await fireEvent.click(getAllByText('Rows per page', { exact: false })[0]);
-    expect(getByText('10 rows'));
-    expect(getByText('20 rows'));
-    expect(getByText('50 rows'));
-    expect(getByText('100 rows'));
+    expect(getByText('10 rows')).toBeInTheDocument();
+    expect(getByText('20 rows')).toBeInTheDocument();
+    expect(getByText('50 rows')).toBeInTheDocument();
+    expect(getByText('100 rows')).toBeInTheDocument();
     await fireEvent.click(getByText('20 rows'));
     expect(onChangeItemsPerPage).toHaveBeenCalled();
 
@@ -174,20 +173,24 @@ describe('<QueryResultsBody /> spec', () => {
     const downloadButton = getAllByText('Download')[0];
     expect(downloadButton).not.toBe(null);
     await fireEvent.click(downloadButton);
-    expect(getByText('Download JSON'));
-    expect(getByText('Download JDBC'));
-    expect(getByText('Download CSV'));
-    expect(getByText('Download Text'));
+    expect(getByText('Download JSON')).toBeInTheDocument();
+    expect(getByText('Download JDBC')).toBeInTheDocument();
+    expect(getByText('Download CSV')).toBeInTheDocument();
+    expect(getByText('Download Text')).toBeInTheDocument();
     await fireEvent.click(getByText('Download JSON'));
     await fireEvent.click(getByText('Download JDBC'));
     await fireEvent.click(getByText('Download CSV'));
     await fireEvent.click(getByText('Download Text'));
 
     // Test search field
     const searchField = getByPlaceholderText('Search keyword');
-    expect(searchField).not.toBe(null);
-    await userEvent.type(searchField, 'Test');
-    expect(onQueryChange).toHaveBeenCalled();
+    expect(searchField).toBeInTheDocument();
+    act(() => {
+      userEvent.type(searchField, 'Test');
+    });
+    waitFor(() => {
+      expect(onQueryChange).toHaveBeenCalled();
+    });
 
     // Test collapse button
     expect(document.body.children[0]).toMatchSnapshot();
@@ -246,7 +249,7 @@ function renderPPLQueryResultsBody(
   };
 }
 
-describe('<QueryResultsBody /> spec', () => {
+describe('<QueryResultsBody with PPL language/> spec', () => {
   afterEach(cleanup);
   const onQueryChange = jest.fn();
   const updateExpandedMap = jest.fn();
@@ -261,7 +264,7 @@ describe('<QueryResultsBody /> spec', () => {
       [
         {
           name: '',
-          getValue: (item: any) => '',
+          getValue: () => '',
           isAscending: true,
         },
       ],
@@ -300,13 +303,7 @@ describe('<QueryResultsBody /> spec', () => {
 
     (window as any).HTMLElement.prototype.scrollIntoView = function () {};
 
-    const {
-      getAllByText,
-      getAllByTestId,
-      getAllByLabelText,
-      getByText,
-      getByPlaceholderText,
-    } = renderPPLQueryResultsBody(
+    const { getAllByText, getAllByLabelText, getByText } = renderPPLQueryResultsBody(
       undefined,
       mockQueryResults[0].data,
       mockQueryResultJDBCResponse.data.resp,
@@ -328,10 +325,10 @@ describe('<QueryResultsBody /> spec', () => {
 
     // Test pagination
     await fireEvent.click(getAllByText('Rows per page', { exact: false })[0]);
-    expect(getByText('10 rows'));
-    expect(getByText('20 rows'));
-    expect(getByText('50 rows'));
-    expect(getByText('100 rows'));
+    expect(getByText('10 rows')).toBeInTheDocument();
+    expect(getByText('20 rows')).toBeInTheDocument();
+    expect(getByText('50 rows')).toBeInTheDocument();
+    expect(getByText('100 rows')).toBeInTheDocument();
     await fireEvent.click(getByText('20 rows'));
     expect(onChangeItemsPerPage).toHaveBeenCalled();