From b38dd05102719d5328a9e5f6a9a4928034d4b4ff Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Fri, 19 Jan 2024 16:02:18 +0000
Subject: [PATCH] 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 0709b434dd8750ac704759eee9269bccf1fe2a64)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 public/components/PPLPage/PPLPage.tsx         |    5 +-
 .../QueryResults/QueryResultsBody.test.tsx    |   53 +-
 .../QueryResultsBody.test.tsx.snap            | 1499 ++++++++---------
 3 files changed, 745 insertions(+), 812 deletions(-)

diff --git a/public/components/PPLPage/PPLPage.tsx b/public/components/PPLPage/PPLPage.tsx
index 58f39dd7..db244fea 100644
--- a/public/components/PPLPage/PPLPage.tsx
+++ b/public/components/PPLPage/PPLPage.tsx
@@ -21,8 +21,8 @@ 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;
@@ -30,7 +30,7 @@ interface PPLPageProps {
   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">
diff --git a/public/components/QueryResults/QueryResultsBody.test.tsx b/public/components/QueryResults/QueryResultsBody.test.tsx
index b9f5aa1c..34e4ddb6 100644
--- a/public/components/QueryResults/QueryResultsBody.test.tsx
+++ b/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,10 +173,10 @@ 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'));
@@ -185,9 +184,13 @@ describe('<QueryResultsBody /> spec', () => {
 
     // 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();
 
diff --git a/public/components/QueryResults/__snapshots__/QueryResultsBody.test.tsx.snap b/public/components/QueryResults/__snapshots__/QueryResultsBody.test.tsx.snap
index c2a1fd09..d75233d4 100644
--- a/public/components/QueryResults/__snapshots__/QueryResultsBody.test.tsx.snap
+++ b/public/components/QueryResults/__snapshots__/QueryResultsBody.test.tsx.snap
@@ -1,127 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<QueryResultsBody /> spec renders component with mock QueryResults data 1`] = `
+exports[`<QueryResultsBody with PPL language/> spec renders component with mock QueryResults data 1`] = `
 <div>
   <div>
     <div
       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionRow euiFlexGroup--responsive"
       style="padding: 20px 20px 0px 20px;"
-    >
-      <div
-        class="euiFlexItem"
-      >
-        <div
-          class="euiText euiText--medium table-name"
-        >
-          <h4>
-            Messages
-            <span
-              class="table-item-count"
-            >
-               (13)
-            </span>
-          </h4>
-        </div>
-        <div
-          class="search-panel"
-        >
-          <div
-            class="search-bar"
-          >
-            <div
-              class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
-            >
-              <div
-                class="euiFlexItem euiSearchBar__searchHolder"
-              >
-                <div
-                  class="euiFormControlLayout euiFormControlLayout--fullWidth"
-                >
-                  <div
-                    class="euiFormControlLayout__childrenWrapper"
-                  >
-                    <input
-                      aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
-                      class="euiFieldSearch euiFieldSearch--fullWidth"
-                      placeholder="Search keyword"
-                      type="search"
-                      value=""
-                    />
-                    <div
-                      class="euiFormControlLayoutIcons"
-                    >
-                      <span
-                        class="euiFormControlLayoutCustomIcon"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                          focusable="false"
-                          height="16"
-                          role="img"
-                          viewBox="0 0 16 16"
-                          width="16"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                          />
-                        </svg>
-                      </span>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div
-        class="euiFlexItem euiFlexItem--flexGrowZero"
-      >
-        <div
-          class="download-container"
-        >
-          <div
-            class="euiPopover euiPopover--anchorDownLeft download-button-container"
-            id="singlePanel"
-          >
-            <div
-              class="euiPopover__anchor"
-            >
-              <button
-                class="euiButton euiButton--primary euiButton--small"
-                type="button"
-              >
-                <span
-                  class="euiButtonContent euiButtonContent--iconRight euiButton__content"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
-                    focusable="false"
-                    height="16"
-                    role="img"
-                    viewBox="0 0 16 16"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                    />
-                  </svg>
-                  <span
-                    class="euiButton__text"
-                  >
-                    Download
-                  </span>
-                </span>
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    />
     <div
       class="sql-console-results-container"
     >
@@ -177,7 +62,6 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="category"
                         >
                           category
                         </span>
@@ -194,7 +78,6 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="currency"
                         >
                           currency
                         </span>
@@ -211,7 +94,6 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="customer_first_name"
                         >
                           customer_first_name
                         </span>
@@ -228,7 +110,6 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="customer_full_name"
                         >
                           customer_full_name
                         </span>
@@ -245,7 +126,6 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="customer_gender"
                         >
                           customer_gender
                         </span>
@@ -262,7 +142,6 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="customer_id"
                         >
                           customer_id
                         </span>
@@ -279,7 +158,6 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="customer_last_name"
                         >
                           customer_last_name
                         </span>
@@ -296,7 +174,6 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="customer_phone"
                         >
                           customer_phone
                         </span>
@@ -313,7 +190,6 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="day_of_week"
                         >
                           day_of_week
                         </span>
@@ -330,7 +206,6 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="day_of_week_i"
                         >
                           day_of_week_i
                         </span>
@@ -347,7 +222,6 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="email"
                         >
                           email
                         </span>
@@ -364,7 +238,6 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="manufacturer"
                         >
                           manufacturer
                         </span>
@@ -381,7 +254,6 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="order_date"
                         >
                           order_date
                         </span>
@@ -398,7 +270,6 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="order_id"
                         >
                           order_id
                         </span>
@@ -415,7 +286,6 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="products"
                         >
                           products
                         </span>
@@ -432,7 +302,6 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="sku"
                         >
                           sku
                         </span>
@@ -449,7 +318,6 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="taxful_total_price"
                         >
                           taxful_total_price
                         </span>
@@ -466,7 +334,6 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="taxless_total_price"
                         >
                           taxless_total_price
                         </span>
@@ -483,7 +350,6 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="total_quantity"
                         >
                           total_quantity
                         </span>
@@ -500,7 +366,6 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="total_unique_products"
                         >
                           total_unique_products
                         </span>
@@ -517,7 +382,6 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="type"
                         >
                           type
                         </span>
@@ -534,7 +398,6 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="user"
                         >
                           user
                         </span>
@@ -551,7 +414,6 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                       >
                         <span
                           class="euiTableCellContent__text"
-                          title="geoip"
                         >
                           geoip
                         </span>
@@ -582,7 +444,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -591,7 +453,8 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
+                                fill-rule="evenodd"
                               />
                             </svg>
                           </button>
@@ -963,7 +826,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -972,7 +835,8 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
+                                fill-rule="evenodd"
                               />
                             </svg>
                           </button>
@@ -1344,7 +1208,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -1353,7 +1217,8 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
+                                fill-rule="evenodd"
                               />
                             </svg>
                           </button>
@@ -1725,7 +1590,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -1734,7 +1599,8 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
+                                fill-rule="evenodd"
                               />
                             </svg>
                           </button>
@@ -2106,7 +1972,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -2115,7 +1981,8 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
+                                fill-rule="evenodd"
                               />
                             </svg>
                           </button>
@@ -2487,7 +2354,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -2496,7 +2363,8 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
+                                fill-rule="evenodd"
                               />
                             </svg>
                           </button>
@@ -2868,7 +2736,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -2877,7 +2745,8 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
+                                fill-rule="evenodd"
                               />
                             </svg>
                           </button>
@@ -3249,7 +3118,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -3258,7 +3127,8 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
+                                fill-rule="evenodd"
                               />
                             </svg>
                           </button>
@@ -3630,7 +3500,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -3639,7 +3509,8 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
+                                fill-rule="evenodd"
                               />
                             </svg>
                           </button>
@@ -4011,7 +3882,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -4020,7 +3891,8 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
+                                fill-rule="evenodd"
                               />
                             </svg>
                           </button>
@@ -4392,7 +4264,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -4401,7 +4273,8 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
+                                fill-rule="evenodd"
                               />
                             </svg>
                           </button>
@@ -4783,7 +4656,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                 >
                   <svg
                     aria-hidden="true"
-                    class="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                    class="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
                     focusable="false"
                     height="16"
                     role="img"
@@ -4792,7 +4665,8 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                      d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
+                      fill-rule="non-zero"
                     />
                   </svg>
                   <span
@@ -4822,7 +4696,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
             >
               <svg
                 aria-hidden="true"
-                class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
                 focusable="false"
                 height="16"
                 role="img"
@@ -4831,7 +4705,8 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                  d="M10.843 13.069 6.232 8.384a.546.546 0 0 1 0-.768l4.61-4.685a.552.552 0 0 0 0-.771.53.53 0 0 0-.759 0l-4.61 4.684a1.65 1.65 0 0 0 0 2.312l4.61 4.684a.53.53 0 0 0 .76 0 .552.552 0 0 0 0-.771Z"
+                  fill-rule="nonzero"
                 />
               </svg>
             </button>
@@ -4846,7 +4721,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
             >
               <svg
                 aria-hidden="true"
-                class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
                 focusable="false"
                 height="16"
                 role="img"
@@ -4855,7 +4730,8 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                  d="m5.157 13.069 4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.552.552 0 0 1 0-.771.53.53 0 0 1 .759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0 .552.552 0 0 1 0-.771Z"
+                  fill-rule="nonzero"
                 />
               </svg>
             </button>
@@ -4867,23 +4743,145 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
 </div>
 `;
 
-exports[`<QueryResultsBody /> spec renders component with mock QueryResults data 2`] = `
+exports[`<QueryResultsBody with PPL language/> spec renders the component 1`] = `
 <div>
-  <div>
+  <div
+    class="coreSystemRootDomElement"
+  >
     <div
-      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionRow euiFlexGroup--responsive"
-      style="padding: 20px 20px 0px 20px;"
+      class="euiCodeEditorWrapper"
+      data-test-subj="codeEditorContainer"
+      style="width: 100%;"
     >
+      <button
+        class="euiCodeEditorKeyboardHint"
+        data-test-subj="codeEditorHint"
+        id="some_html_id"
+      >
+        <p
+          class="euiText"
+        >
+          Press Enter to start editing.
+        </p>
+        <p
+          class="euiText"
+        >
+          When you're done, press Escape to stop editing.
+        </p>
+      </button>
       <div
-        class="euiFlexItem"
+        class=" ace_editor ace-tm successful-message"
+        id="some_html_id"
+        style="width: 100%; height: 500px; font-size: 14px;"
       >
+        <textarea
+          aria-label="Code Editor"
+          autocapitalize="off"
+          autocorrect="off"
+          class="ace_text-input"
+          spellcheck="false"
+          style="opacity: 0;"
+          tabindex="-1"
+          wrap="off"
+        />
         <div
-          class="euiText euiText--medium table-name"
+          aria-hidden="true"
+          class="ace_gutter"
         >
-          <h4>
-            Messages
-            <span
-              class="table-item-count"
+          <div
+            class="ace_layer ace_gutter-layer ace_folding-enabled"
+          />
+          <div
+            class="ace_gutter-active-line"
+            style="display: none;"
+          />
+        </div>
+        <div
+          class="ace_scroller"
+        >
+          <div
+            class="ace_content"
+          >
+            <div
+              class="ace_layer ace_print-margin-layer"
+            >
+              <div
+                class="ace_print-margin"
+                style="left: 4px; visibility: hidden;"
+              />
+            </div>
+            <div
+              class="ace_layer ace_marker-layer"
+            />
+            <div
+              class="ace_layer ace_text-layer"
+              style="padding: 0px 4px;"
+            />
+            <div
+              class="ace_layer ace_marker-layer"
+            />
+            <div
+              class="ace_layer ace_cursor-layer ace_hidden-cursors"
+            >
+              <div
+                class="ace_cursor"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          class="ace_scrollbar ace_scrollbar-v"
+          style="display: none; width: 20px;"
+        >
+          <div
+            class="ace_scrollbar-inner"
+            style="width: 20px;"
+          />
+        </div>
+        <div
+          class="ace_scrollbar ace_scrollbar-h"
+          style="display: none; height: 20px;"
+        >
+          <div
+            class="ace_scrollbar-inner"
+            style="height: 20px;"
+          />
+        </div>
+        <div
+          style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
+        >
+          <div
+            style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+          />
+          <div
+            style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
+          >
+            XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<QueryResultsBody with SQL language/> spec renders component with mock QueryResults data 1`] = `
+<div>
+  <div>
+    <div
+      class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionRow euiFlexGroup--responsive"
+      style="padding: 20px 20px 0px 20px;"
+    >
+      <div
+        class="euiFlexItem"
+      >
+        <div
+          class="euiText euiText--medium table-name"
+        >
+          <h4>
+            Messages
+            <span
+              class="table-item-count"
             >
                (13)
             </span>
@@ -4909,7 +4907,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                   >
                     <input
                       aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
-                      class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch-isClearable"
+                      class="euiFieldSearch euiFieldSearch--fullWidth"
                       placeholder="Search keyword"
                       type="search"
                       value=""
@@ -4922,7 +4920,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                       >
                         <svg
                           aria-hidden="true"
-                          class="euiIcon euiIcon--medium euiIcon-isLoaded euiFormControlLayoutCustomIcon__icon"
+                          class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                           focusable="false"
                           height="16"
                           role="img"
@@ -4931,35 +4929,11 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           xmlns="http://www.w3.org/2000/svg"
                         >
                           <path
-                            d="m11.271 11.978 3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738Z"
+                            d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                           />
                         </svg>
                       </span>
                     </div>
-                    <div
-                      class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-                    >
-                      <button
-                        aria-label="Clear input"
-                        class="euiFormControlLayoutClearButton"
-                        type="button"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="euiIcon euiIcon--medium euiIcon-isLoaded euiFormControlLayoutClearButton__icon"
-                          focusable="false"
-                          height="16"
-                          role="img"
-                          viewBox="0 0 16 16"
-                          width="16"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M7.293 8 3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8Z"
-                          />
-                        </svg>
-                      </button>
-                    </div>
                   </div>
                 </div>
               </div>
@@ -4989,7 +4963,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                 >
                   <svg
                     aria-hidden="true"
-                    class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoaded euiButtonContent__icon"
+                    class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                     focusable="false"
                     height="16"
                     role="img"
@@ -4998,8 +4972,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                      fill-rule="non-zero"
+                      d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                     />
                   </svg>
                   <span
@@ -5453,7 +5426,8 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                 </thead>
                 <tbody>
                   <tr
-                    class="euiTableRow expanded-row"
+                    class="euiTableRow"
+                    data-test-subj="tableRow"
                   >
                     <td
                       class="euiTableRowCell"
@@ -5466,14 +5440,14 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           class="euiTableCellContent__text"
                         >
                           <button
-                            aria-label="Collapse"
+                            aria-label="Expand"
                             class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
                             style="margin-left: -4px;"
                             type="button"
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoaded euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -5482,8 +5456,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M7.5 0C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882ZM3.5 7h8a.5.5 0 1 1 0 1h-8a.5.5 0 0 1 0-1Z"
-                                fill-rule="evenodd"
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                               />
                             </svg>
                           </button>
@@ -5832,378 +5805,62 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         </span>
                       </div>
                     </td>
-                     
                   </tr>
                   <tr
                     class="euiTableRow"
+                    data-test-subj="tableRow"
                   >
-                    <div
-                      id="0"
-                      style="padding: 0px 0px 20px 19px;"
+                    <td
+                      class="euiTableRowCell"
+                      id="1"
                     >
-                      <nav
-                        class="euiSideNav sideNavItem__items"
-                        style="width: 300px; padding: 0px 0px 20px 9px;"
+                      <div
+                        class="euiTableCellContent"
                       >
-                        <div
-                          class="euiSideNav__content euiSideNav__contentMobile-xs euiSideNav__contentMobile-s"
-                          id="some_html_id"
+                        <span
+                          class="euiTableCellContent__text"
                         >
-                          <div
-                            class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems"
+                          <button
+                            aria-label="Expand"
+                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+                            style="margin-left: -4px;"
+                            type="button"
                           >
+                            <svg
+                              aria-hidden="true"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                              focusable="false"
+                              height="16"
+                              role="img"
+                              viewBox="0 0 16 16"
+                              width="16"
+                              xmlns="http://www.w3.org/2000/svg"
+                            >
+                              <path
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                              />
+                            </svg>
+                          </button>
+                        </span>
+                      </div>
+                    </td>
+                    <td
+                      class="euiTableRowCell"
+                    >
+                      <div
+                        class="euiTableCellContent"
+                      >
+                        <span
+                          class="euiTableCellContent__text"
+                        >
+                          <span>
+                             
+                            
                             <button
-                              class="euiSideNavItemButton euiSideNavItemButton--isClickable"
+                              class="euiLink euiLink--primary"
                               type="button"
                             >
-                              <span
-                                class="euiSideNavItemButton__content"
-                              >
-                                <span
-                                  class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
-                                />
-                              </span>
-                            </button>
-                            <div
-                              class="euiSideNavItem__items"
-                            >
-                              <div
-                                class="euiSideNavItem euiSideNavItem--trunk"
-                              >
-                                <button
-                                  class="euiSideNavItemButton euiSideNavItemButton--isClickable"
-                                  type="button"
-                                >
-                                  <span
-                                    class="euiSideNavItemButton__content"
-                                  >
-                                    <button
-                                      aria-label="Expand"
-                                      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiSideNavItemButton__icon"
-                                      type="button"
-                                    >
-                                      <svg
-                                        aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
-                                        focusable="false"
-                                        height="16"
-                                        role="img"
-                                        viewBox="0 0 16 16"
-                                        width="16"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                          fill-rule="evenodd"
-                                        />
-                                      </svg>
-                                    </button>
-                                    <span
-                                      class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
-                                      title="category"
-                                    >
-                                      category
-                                    </span>
-                                  </span>
-                                </button>
-                              </div>
-                              <div
-                                class="euiSideNavItem euiSideNavItem--trunk euiSideNavItem--hasChildItems"
-                              >
-                                <button
-                                  class="euiSideNavItemButton euiSideNavItemButton--isClickable euiSideNavItemButton-isSelected"
-                                  type="button"
-                                >
-                                  <span
-                                    class="euiSideNavItemButton__content"
-                                  >
-                                    <button
-                                      aria-label="Collapse"
-                                      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiSideNavItemButton__icon"
-                                      type="button"
-                                    >
-                                      <svg
-                                        aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoaded euiButtonIcon__icon"
-                                        focusable="false"
-                                        height="16"
-                                        role="img"
-                                        viewBox="0 0 16 16"
-                                        width="16"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M7.5 0C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882ZM3.5 7h8a.5.5 0 1 1 0 1h-8a.5.5 0 0 1 0-1Z"
-                                          fill-rule="evenodd"
-                                        />
-                                      </svg>
-                                    </button>
-                                    <span
-                                      class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
-                                      title="manufacturer"
-                                    >
-                                      manufacturer
-                                    </span>
-                                  </span>
-                                </button>
-                                <div
-                                  class="euiSideNavItem__items"
-                                >
-                                  <div
-                                    class="euiSideNavItem euiSideNavItem--branch euiSideNavItem--hasChildItems"
-                                  >
-                                    <button
-                                      class="euiSideNavItemButton euiSideNavItemButton--isClickable euiSideNavItemButton-isSelected"
-                                      type="button"
-                                    >
-                                      <span
-                                        class="euiSideNavItemButton__content"
-                                      >
-                                        <span
-                                          class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
-                                          title="ElitelligenceOceanavigations"
-                                        >
-                                          <div>
-                                            <table
-                                              class="euiTable sideNav-table euiTable--responsive"
-                                              tabindex="-1"
-                                            >
-                                              <thead
-                                                class="table-header"
-                                              >
-                                                <tr />
-                                              </thead>
-                                              <tbody>
-                                                <tr
-                                                  class="euiTableRow"
-                                                  data-test-subj="tableRow"
-                                                >
-                                                  <td
-                                                    class="euiTableRowCell"
-                                                  >
-                                                    <div
-                                                      class="euiTableCellContent"
-                                                    >
-                                                      <span
-                                                        class="euiTableCellContent__text"
-                                                      >
-                                                        Elitelligence
-                                                      </span>
-                                                    </div>
-                                                  </td>
-                                                </tr>
-                                                <tr
-                                                  class="euiTableRow"
-                                                  data-test-subj="tableRow"
-                                                >
-                                                  <td
-                                                    class="euiTableRowCell"
-                                                  >
-                                                    <div
-                                                      class="euiTableCellContent"
-                                                    >
-                                                      <span
-                                                        class="euiTableCellContent__text"
-                                                      >
-                                                        Oceanavigations
-                                                      </span>
-                                                    </div>
-                                                  </td>
-                                                </tr>
-                                              </tbody>
-                                            </table>
-                                          </div>
-                                        </span>
-                                      </span>
-                                    </button>
-                                    <div
-                                      class="euiSideNavItem__items"
-                                    />
-                                  </div>
-                                </div>
-                              </div>
-                              <div
-                                class="euiSideNavItem euiSideNavItem--trunk"
-                              >
-                                <button
-                                  class="euiSideNavItemButton euiSideNavItemButton--isClickable"
-                                  type="button"
-                                >
-                                  <span
-                                    class="euiSideNavItemButton__content"
-                                  >
-                                    <button
-                                      aria-label="Expand"
-                                      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiSideNavItemButton__icon"
-                                      type="button"
-                                    >
-                                      <svg
-                                        aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
-                                        focusable="false"
-                                        height="16"
-                                        role="img"
-                                        viewBox="0 0 16 16"
-                                        width="16"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                          fill-rule="evenodd"
-                                        />
-                                      </svg>
-                                    </button>
-                                    <span
-                                      class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
-                                      title="products"
-                                    >
-                                      products
-                                    </span>
-                                  </span>
-                                </button>
-                              </div>
-                              <div
-                                class="euiSideNavItem euiSideNavItem--trunk"
-                              >
-                                <button
-                                  class="euiSideNavItemButton euiSideNavItemButton--isClickable"
-                                  type="button"
-                                >
-                                  <span
-                                    class="euiSideNavItemButton__content"
-                                  >
-                                    <button
-                                      aria-label="Expand"
-                                      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiSideNavItemButton__icon"
-                                      type="button"
-                                    >
-                                      <svg
-                                        aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
-                                        focusable="false"
-                                        height="16"
-                                        role="img"
-                                        viewBox="0 0 16 16"
-                                        width="16"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                          fill-rule="evenodd"
-                                        />
-                                      </svg>
-                                    </button>
-                                    <span
-                                      class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
-                                      title="sku"
-                                    >
-                                      sku
-                                    </span>
-                                  </span>
-                                </button>
-                              </div>
-                              <div
-                                class="euiSideNavItem euiSideNavItem--trunk"
-                              >
-                                <button
-                                  class="euiSideNavItemButton euiSideNavItemButton--isClickable"
-                                  type="button"
-                                >
-                                  <span
-                                    class="euiSideNavItemButton__content"
-                                  >
-                                    <button
-                                      aria-label="Expand"
-                                      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiSideNavItemButton__icon"
-                                      type="button"
-                                    >
-                                      <svg
-                                        aria-hidden="true"
-                                        class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
-                                        focusable="false"
-                                        height="16"
-                                        role="img"
-                                        viewBox="0 0 16 16"
-                                        width="16"
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                          fill-rule="evenodd"
-                                        />
-                                      </svg>
-                                    </button>
-                                    <span
-                                      class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
-                                      title="geoip"
-                                    >
-                                      geoip
-                                    </span>
-                                  </span>
-                                </button>
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </nav>
-                    </div>
-                  </tr>
-                  <tr
-                    class="euiTableRow"
-                    data-test-subj="tableRow"
-                  >
-                    <td
-                      class="euiTableRowCell"
-                      id="1"
-                    >
-                      <div
-                        class="euiTableCellContent"
-                      >
-                        <span
-                          class="euiTableCellContent__text"
-                        >
-                          <button
-                            aria-label="Expand"
-                            class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
-                            style="margin-left: -4px;"
-                            type="button"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoaded euiButtonIcon__icon"
-                              focusable="false"
-                              height="16"
-                              role="img"
-                              viewBox="0 0 16 16"
-                              width="16"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                fill-rule="evenodd"
-                              />
-                            </svg>
-                          </button>
-                        </span>
-                      </div>
-                    </td>
-                    <td
-                      class="euiTableRowCell"
-                    >
-                      <div
-                        class="euiTableCellContent"
-                      >
-                        <span
-                          class="euiTableCellContent__text"
-                        >
-                          <span>
-                             
-                            
-                            <button
-                              class="euiLink euiLink--primary"
-                              type="button"
-                            >
-                              category: [1]
+                              category: [1]
                             </button>
                           </span>
                         </span>
@@ -6552,7 +6209,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoaded euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -6561,8 +6218,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                fill-rule="evenodd"
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                               />
                             </svg>
                           </button>
@@ -6934,7 +6590,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoaded euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -6943,8 +6599,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                fill-rule="evenodd"
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                               />
                             </svg>
                           </button>
@@ -7316,7 +6971,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoaded euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -7325,8 +6980,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                fill-rule="evenodd"
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                               />
                             </svg>
                           </button>
@@ -7698,7 +7352,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoaded euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -7707,8 +7361,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                fill-rule="evenodd"
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                               />
                             </svg>
                           </button>
@@ -8080,7 +7733,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoaded euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -8089,8 +7742,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                fill-rule="evenodd"
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                               />
                             </svg>
                           </button>
@@ -8462,7 +8114,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoaded euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -8471,8 +8123,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                fill-rule="evenodd"
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                               />
                             </svg>
                           </button>
@@ -8844,7 +8495,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoaded euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -8853,8 +8504,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                fill-rule="evenodd"
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                               />
                             </svg>
                           </button>
@@ -9226,7 +8876,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoaded euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -9235,8 +8885,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                fill-rule="evenodd"
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                               />
                             </svg>
                           </button>
@@ -9608,7 +9257,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoaded euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -9617,8 +9266,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                fill-rule="evenodd"
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                               />
                             </svg>
                           </button>
@@ -9985,7 +9633,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
           class="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <div
-            class="euiPopover euiPopover--anchorUpRight euiPopover-isOpen"
+            class="euiPopover euiPopover--anchorUpRight"
           >
             <div
               class="euiPopover__anchor"
@@ -10000,7 +9648,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                 >
                   <svg
                     aria-hidden="true"
-                    class="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoaded euiButtonContent__icon"
+                    class="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                     focusable="false"
                     height="16"
                     role="img"
@@ -10009,8 +9657,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                      fill-rule="non-zero"
+                      d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                     />
                   </svg>
                   <span
@@ -10040,7 +9687,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
             >
               <svg
                 aria-hidden="true"
-                class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoaded euiButtonIcon__icon"
+                class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                 focusable="false"
                 height="16"
                 role="img"
@@ -10049,8 +9696,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M10.843 13.069 6.232 8.384a.546.546 0 0 1 0-.768l4.61-4.685a.552.552 0 0 0 0-.771.53.53 0 0 0-.759 0l-4.61 4.684a1.65 1.65 0 0 0 0 2.312l4.61 4.684a.53.53 0 0 0 .76 0 .552.552 0 0 0 0-.771Z"
-                  fill-rule="nonzero"
+                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                 />
               </svg>
             </button>
@@ -10065,7 +9711,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
             >
               <svg
                 aria-hidden="true"
-                class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoaded euiButtonIcon__icon"
+                class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                 focusable="false"
                 height="16"
                 role="img"
@@ -10074,8 +9720,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="m5.157 13.069 4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.552.552 0 0 1 0-.771.53.53 0 0 1 .759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0 .552.552 0 0 1 0-.771Z"
-                  fill-rule="nonzero"
+                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                 />
               </svg>
             </button>
@@ -10087,13 +9732,128 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
 </div>
 `;
 
-exports[`<QueryResultsBody /> spec renders component with mock QueryResults data 3`] = `
+exports[`<QueryResultsBody with SQL language/> spec renders component with mock QueryResults data 2`] = `
 <div>
   <div>
     <div
       class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsFlexStart euiFlexGroup--directionRow euiFlexGroup--responsive"
       style="padding: 20px 20px 0px 20px;"
-    />
+    >
+      <div
+        class="euiFlexItem"
+      >
+        <div
+          class="euiText euiText--medium table-name"
+        >
+          <h4>
+            Messages
+            <span
+              class="table-item-count"
+            >
+               (13)
+            </span>
+          </h4>
+        </div>
+        <div
+          class="search-panel"
+        >
+          <div
+            class="search-bar"
+          >
+            <div
+              class="euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive euiFlexGroup--wrap"
+            >
+              <div
+                class="euiFlexItem euiSearchBar__searchHolder"
+              >
+                <div
+                  class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                >
+                  <div
+                    class="euiFormControlLayout__childrenWrapper"
+                  >
+                    <input
+                      aria-label="This is a search bar. As you type, the results lower in the page will automatically filter."
+                      class="euiFieldSearch euiFieldSearch--fullWidth"
+                      placeholder="Search keyword"
+                      type="search"
+                      value=""
+                    />
+                    <div
+                      class="euiFormControlLayoutIcons"
+                    >
+                      <span
+                        class="euiFormControlLayoutCustomIcon"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                          focusable="false"
+                          height="16"
+                          role="img"
+                          viewBox="0 0 16 16"
+                          width="16"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <path
+                            d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                          />
+                        </svg>
+                      </span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem euiFlexItem--flexGrowZero"
+      >
+        <div
+          class="download-container"
+        >
+          <div
+            class="euiPopover euiPopover--anchorDownLeft download-button-container"
+            id="singlePanel"
+          >
+            <div
+              class="euiPopover__anchor"
+            >
+              <button
+                class="euiButton euiButton--primary euiButton--small"
+                type="button"
+              >
+                <span
+                  class="euiButtonContent euiButtonContent--iconRight euiButton__content"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
+                    focusable="false"
+                    height="16"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                    />
+                  </svg>
+                  <span
+                    class="euiButton__text"
+                  >
+                    Download
+                  </span>
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
     <div
       class="sql-console-results-container"
     >
@@ -10533,8 +10293,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                 </thead>
                 <tbody>
                   <tr
-                    class="euiTableRow"
-                    data-test-subj="tableRow"
+                    class="euiTableRow expanded-row"
                   >
                     <td
                       class="euiTableRowCell"
@@ -10547,14 +10306,14 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           class="euiTableCellContent__text"
                         >
                           <button
-                            aria-label="Expand"
+                            aria-label="Collapse"
                             class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
                             style="margin-left: -4px;"
                             type="button"
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -10563,8 +10322,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                fill-rule="evenodd"
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                               />
                             </svg>
                           </button>
@@ -10913,6 +10671,320 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                         </span>
                       </div>
                     </td>
+                     
+                  </tr>
+                  <tr
+                    class="euiTableRow"
+                  >
+                    <div
+                      id="0"
+                      style="padding: 0px 0px 20px 19px;"
+                    >
+                      <nav
+                        class="euiSideNav sideNavItem__items"
+                        style="width: 300px; padding: 0px 0px 20px 9px;"
+                      >
+                        <div
+                          class="euiSideNav__content euiSideNav__contentMobile-xs euiSideNav__contentMobile-s"
+                          id="some_html_id"
+                        >
+                          <div
+                            class="euiSideNavItem euiSideNavItem--root euiSideNavItem--hasChildItems"
+                          >
+                            <button
+                              class="euiSideNavItemButton euiSideNavItemButton--isClickable"
+                              type="button"
+                            >
+                              <span
+                                class="euiSideNavItemButton__content"
+                              >
+                                <span
+                                  class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
+                                />
+                              </span>
+                            </button>
+                            <div
+                              class="euiSideNavItem__items"
+                            >
+                              <div
+                                class="euiSideNavItem euiSideNavItem--trunk"
+                              >
+                                <button
+                                  class="euiSideNavItemButton euiSideNavItemButton--isClickable"
+                                  type="button"
+                                >
+                                  <span
+                                    class="euiSideNavItemButton__content"
+                                  >
+                                    <button
+                                      aria-label="Expand"
+                                      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiSideNavItemButton__icon"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
+                                          fill-rule="evenodd"
+                                        />
+                                      </svg>
+                                    </button>
+                                    <span
+                                      class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
+                                      title="category"
+                                    >
+                                      category
+                                    </span>
+                                  </span>
+                                </button>
+                              </div>
+                              <div
+                                class="euiSideNavItem euiSideNavItem--trunk euiSideNavItem--hasChildItems"
+                              >
+                                <button
+                                  class="euiSideNavItemButton euiSideNavItemButton--isClickable euiSideNavItemButton-isSelected"
+                                  type="button"
+                                >
+                                  <span
+                                    class="euiSideNavItemButton__content"
+                                  >
+                                    <button
+                                      aria-label="Collapse"
+                                      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiSideNavItemButton__icon"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
+                                        />
+                                      </svg>
+                                    </button>
+                                    <span
+                                      class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
+                                      title="manufacturer"
+                                    >
+                                      manufacturer
+                                    </span>
+                                  </span>
+                                </button>
+                                <div
+                                  class="euiSideNavItem__items"
+                                >
+                                  <div
+                                    class="euiSideNavItem euiSideNavItem--branch euiSideNavItem--hasChildItems"
+                                  >
+                                    <button
+                                      class="euiSideNavItemButton euiSideNavItemButton--isClickable euiSideNavItemButton-isSelected"
+                                      type="button"
+                                    >
+                                      <span
+                                        class="euiSideNavItemButton__content"
+                                      >
+                                        <span
+                                          class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
+                                          title="ElitelligenceOceanavigations"
+                                        >
+                                          <div>
+                                            <table
+                                              class="euiTable sideNav-table euiTable--responsive"
+                                              tabindex="-1"
+                                            >
+                                              <thead
+                                                class="table-header"
+                                              >
+                                                <tr />
+                                              </thead>
+                                              <tbody>
+                                                <tr
+                                                  class="euiTableRow"
+                                                  data-test-subj="tableRow"
+                                                >
+                                                  <td
+                                                    class="euiTableRowCell"
+                                                  >
+                                                    <div
+                                                      class="euiTableCellContent"
+                                                    >
+                                                      <span
+                                                        class="euiTableCellContent__text"
+                                                      >
+                                                        Elitelligence
+                                                      </span>
+                                                    </div>
+                                                  </td>
+                                                </tr>
+                                                <tr
+                                                  class="euiTableRow"
+                                                  data-test-subj="tableRow"
+                                                >
+                                                  <td
+                                                    class="euiTableRowCell"
+                                                  >
+                                                    <div
+                                                      class="euiTableCellContent"
+                                                    >
+                                                      <span
+                                                        class="euiTableCellContent__text"
+                                                      >
+                                                        Oceanavigations
+                                                      </span>
+                                                    </div>
+                                                  </td>
+                                                </tr>
+                                              </tbody>
+                                            </table>
+                                          </div>
+                                        </span>
+                                      </span>
+                                    </button>
+                                    <div
+                                      class="euiSideNavItem__items"
+                                    />
+                                  </div>
+                                </div>
+                              </div>
+                              <div
+                                class="euiSideNavItem euiSideNavItem--trunk"
+                              >
+                                <button
+                                  class="euiSideNavItemButton euiSideNavItemButton--isClickable"
+                                  type="button"
+                                >
+                                  <span
+                                    class="euiSideNavItemButton__content"
+                                  >
+                                    <button
+                                      aria-label="Expand"
+                                      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiSideNavItemButton__icon"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
+                                          fill-rule="evenodd"
+                                        />
+                                      </svg>
+                                    </button>
+                                    <span
+                                      class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
+                                      title="products"
+                                    >
+                                      products
+                                    </span>
+                                  </span>
+                                </button>
+                              </div>
+                              <div
+                                class="euiSideNavItem euiSideNavItem--trunk"
+                              >
+                                <button
+                                  class="euiSideNavItemButton euiSideNavItemButton--isClickable"
+                                  type="button"
+                                >
+                                  <span
+                                    class="euiSideNavItemButton__content"
+                                  >
+                                    <button
+                                      aria-label="Expand"
+                                      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiSideNavItemButton__icon"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
+                                          fill-rule="evenodd"
+                                        />
+                                      </svg>
+                                    </button>
+                                    <span
+                                      class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
+                                      title="sku"
+                                    >
+                                      sku
+                                    </span>
+                                  </span>
+                                </button>
+                              </div>
+                              <div
+                                class="euiSideNavItem euiSideNavItem--trunk"
+                              >
+                                <button
+                                  class="euiSideNavItemButton euiSideNavItemButton--isClickable"
+                                  type="button"
+                                >
+                                  <span
+                                    class="euiSideNavItemButton__content"
+                                  >
+                                    <button
+                                      aria-label="Expand"
+                                      class="euiButtonIcon euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall euiSideNavItemButton__icon"
+                                      type="button"
+                                    >
+                                      <svg
+                                        aria-hidden="true"
+                                        class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                                        focusable="false"
+                                        height="16"
+                                        role="img"
+                                        viewBox="0 0 16 16"
+                                        width="16"
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
+                                          fill-rule="evenodd"
+                                        />
+                                      </svg>
+                                    </button>
+                                    <span
+                                      class="euiSideNavItemButton__label euiSideNavItemButton__label--truncated"
+                                      title="geoip"
+                                    >
+                                      geoip
+                                    </span>
+                                  </span>
+                                </button>
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                      </nav>
+                    </div>
                   </tr>
                   <tr
                     class="euiTableRow"
@@ -10936,7 +11008,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -10945,8 +11017,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                fill-rule="evenodd"
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                               />
                             </svg>
                           </button>
@@ -11318,7 +11389,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -11327,8 +11398,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                fill-rule="evenodd"
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                               />
                             </svg>
                           </button>
@@ -11700,7 +11770,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -11709,8 +11779,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                fill-rule="evenodd"
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                               />
                             </svg>
                           </button>
@@ -12082,7 +12151,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -12091,8 +12160,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                fill-rule="evenodd"
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                               />
                             </svg>
                           </button>
@@ -12464,7 +12532,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -12473,8 +12541,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                fill-rule="evenodd"
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                               />
                             </svg>
                           </button>
@@ -12846,7 +12913,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -12855,8 +12922,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                fill-rule="evenodd"
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                               />
                             </svg>
                           </button>
@@ -13228,7 +13294,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -13237,8 +13303,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                fill-rule="evenodd"
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                               />
                             </svg>
                           </button>
@@ -13610,7 +13675,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -13619,8 +13684,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                fill-rule="evenodd"
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                               />
                             </svg>
                           </button>
@@ -13992,7 +14056,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -14001,8 +14065,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                fill-rule="evenodd"
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                               />
                             </svg>
                           </button>
@@ -14374,7 +14437,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                           >
                             <svg
                               aria-hidden="true"
-                              class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                              class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                               focusable="false"
                               height="16"
                               role="img"
@@ -14383,8 +14446,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                               xmlns="http://www.w3.org/2000/svg"
                             >
                               <path
-                                d="M8 7h3.5a.5.5 0 1 1 0 1H8v3.5a.5.5 0 1 1-1 0V8H3.5a.5.5 0 0 1 0-1H7V3.5a.5.5 0 0 1 1 0V7Zm-.5-7C11.636 0 15 3.364 15 7.5S11.636 15 7.5 15 0 11.636 0 7.5 3.364 0 7.5 0Zm0 .882a6.618 6.618 0 1 0 0 13.236A6.618 6.618 0 0 0 7.5.882Z"
-                                fill-rule="evenodd"
+                                d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                               />
                             </svg>
                           </button>
@@ -14766,7 +14828,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                 >
                   <svg
                     aria-hidden="true"
-                    class="euiIcon euiIcon--small euiIcon--inherit euiButtonContent__icon"
+                    class="euiIcon euiIcon--small euiIcon--inherit euiIcon-isLoading euiButtonContent__icon"
                     focusable="false"
                     height="16"
                     role="img"
@@ -14775,8 +14837,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                     xmlns="http://www.w3.org/2000/svg"
                   >
                     <path
-                      d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z"
-                      fill-rule="non-zero"
+                      d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                     />
                   </svg>
                   <span
@@ -14806,7 +14867,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
             >
               <svg
                 aria-hidden="true"
-                class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                 focusable="false"
                 height="16"
                 role="img"
@@ -14815,8 +14876,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="M10.843 13.069 6.232 8.384a.546.546 0 0 1 0-.768l4.61-4.685a.552.552 0 0 0 0-.771.53.53 0 0 0-.759 0l-4.61 4.684a1.65 1.65 0 0 0 0 2.312l4.61 4.684a.53.53 0 0 0 .76 0 .552.552 0 0 0 0-.771Z"
-                  fill-rule="nonzero"
+                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                 />
               </svg>
             </button>
@@ -14831,7 +14891,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
             >
               <svg
                 aria-hidden="true"
-                class="euiIcon euiIcon--medium euiIcon--inherit euiButtonIcon__icon"
+                class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonIcon__icon"
                 focusable="false"
                 height="16"
                 role="img"
@@ -14840,8 +14900,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
                 xmlns="http://www.w3.org/2000/svg"
               >
                 <path
-                  d="m5.157 13.069 4.611-4.685a.546.546 0 0 0 0-.768L5.158 2.93a.552.552 0 0 1 0-.771.53.53 0 0 1 .759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 0 1-.76 0 .552.552 0 0 1 0-.771Z"
-                  fill-rule="nonzero"
+                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
                 />
               </svg>
             </button>
@@ -14853,129 +14912,7 @@ exports[`<QueryResultsBody /> spec renders component with mock QueryResults data
 </div>
 `;
 
-exports[`<QueryResultsBody /> spec renders the component 1`] = `
-<div>
-  <div
-    class="coreSystemRootDomElement"
-  >
-    <div
-      class="euiCodeEditorWrapper"
-      data-test-subj="codeEditorContainer"
-      style="width: 100%;"
-    >
-      <button
-        class="euiCodeEditorKeyboardHint"
-        data-test-subj="codeEditorHint"
-        id="some_html_id"
-      >
-        <p
-          class="euiText"
-        >
-          Press Enter to start editing.
-        </p>
-        <p
-          class="euiText"
-        >
-          When you're done, press Escape to stop editing.
-        </p>
-      </button>
-      <div
-        class=" ace_editor ace-tm successful-message"
-        id="some_html_id"
-        style="width: 100%; height: 500px; font-size: 14px;"
-      >
-        <textarea
-          aria-label="Code Editor"
-          autocapitalize="off"
-          autocorrect="off"
-          class="ace_text-input"
-          spellcheck="false"
-          style="opacity: 0;"
-          tabindex="-1"
-          wrap="off"
-        />
-        <div
-          aria-hidden="true"
-          class="ace_gutter"
-        >
-          <div
-            class="ace_layer ace_gutter-layer ace_folding-enabled"
-          />
-          <div
-            class="ace_gutter-active-line"
-            style="display: none;"
-          />
-        </div>
-        <div
-          class="ace_scroller"
-        >
-          <div
-            class="ace_content"
-          >
-            <div
-              class="ace_layer ace_print-margin-layer"
-            >
-              <div
-                class="ace_print-margin"
-                style="left: 4px; visibility: hidden;"
-              />
-            </div>
-            <div
-              class="ace_layer ace_marker-layer"
-            />
-            <div
-              class="ace_layer ace_text-layer"
-              style="padding: 0px 4px;"
-            />
-            <div
-              class="ace_layer ace_marker-layer"
-            />
-            <div
-              class="ace_layer ace_cursor-layer ace_hidden-cursors"
-            >
-              <div
-                class="ace_cursor"
-              />
-            </div>
-          </div>
-        </div>
-        <div
-          class="ace_scrollbar ace_scrollbar-v"
-          style="display: none; width: 20px;"
-        >
-          <div
-            class="ace_scrollbar-inner"
-            style="width: 20px;"
-          />
-        </div>
-        <div
-          class="ace_scrollbar ace_scrollbar-h"
-          style="display: none; height: 20px;"
-        >
-          <div
-            class="ace_scrollbar-inner"
-            style="height: 20px;"
-          />
-        </div>
-        <div
-          style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: hidden;"
-        >
-          <div
-            style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
-          />
-          <div
-            style="height: auto; width: auto; top: 0px; left: 0px; visibility: hidden; position: absolute; white-space: pre; overflow: visible;"
-          >
-            XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`<QueryResultsBody /> spec renders the component 2`] = `
+exports[`<QueryResultsBody with SQL language/> spec renders the component 1`] = `
 <div>
   <div
     class="coreSystemRootDomElement"