From 584f4eebc5421e96404e4aaca89d0bf152b8780d Mon Sep 17 00:00:00 2001
From: Jatin Kathuria <jatin.kathuria@elastic.co>
Date: Thu, 13 Jun 2024 17:52:27 +0200
Subject: [PATCH] [Security Solution ] Fix - Inspect not working in Unified
 Timeline (#185924)

## Summary

Fixes

- https://github.com/elastic/security-team/issues/9598.
- https://github.com/elastic/kibana/issues/181882

This PR fixes 2 issues.

### Inspect button not working
1. Inspect button was not working with Unified Timeline changes.
2. This PR Fixes that and adds test as well for same.

### Inspect Performance

Since in unified timeline we fetch 500 records at a time, the inspect
tab was facing performance issues as can be seen below:

|Before|After|
|---|---|
|<video
src="https://github.com/elastic/kibana/assets/7485038/1f3a938b-06ab-4146-b76e-06b4c3712d47"/>|<video
src="https://github.com/elastic/kibana/assets/7485038/77833673-d904-4cb6-98ff-a67e78185520"
/>|

As a solution, `EuiCodeBlock` is being replaced with `MonacoCodeEditor`
which loads the code in lazily.





### Checklist

Delete any items that are not applicable to this PR.

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed

---------

Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
---
 .../common/components/inspect/modal.test.tsx  | 153 +++++-----
 .../common/components/inspect/modal.tsx       | 285 ++++++++++--------
 .../components/timeline/tabs/query/index.tsx  |  81 ++---
 .../plugins/security_solution/tsconfig.json   |   6 +-
 .../unified_components/query_tab.cy.ts        |  61 ++--
 .../cypress/screens/common.ts                 |   2 +
 .../cypress/screens/inspect.ts                |   4 +
 .../cypress/screens/unified_timeline.ts       |   2 +-
 .../cypress/tasks/inspect.ts                  |   3 +-
 9 files changed, 327 insertions(+), 270 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/common/components/inspect/modal.test.tsx b/x-pack/plugins/security_solution/public/common/components/inspect/modal.test.tsx
index 31c417294e7f8..b101410dd6c26 100644
--- a/x-pack/plugins/security_solution/public/common/components/inspect/modal.test.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/inspect/modal.test.tsx
@@ -5,7 +5,6 @@
  * 2.0.
  */
 
-import { mount } from 'enzyme';
 import React from 'react';
 import { TestProviders } from '../../mock';
 
@@ -13,6 +12,7 @@ import { NO_ALERT_INDEX } from '../../../../common/constants';
 import type { ModalInspectProps } from './modal';
 import { ModalInspectQuery, formatIndexPatternRequested } from './modal';
 import { InputsModelId } from '../../store/inputs/constants';
+import { fireEvent, render, screen } from '@testing-library/react';
 
 jest.mock('react-router-dom', () => {
   const original = jest.requireActual('react-router-dom');
@@ -35,61 +35,55 @@ const request = getRequest();
 const response =
   '{"took": 880,"timed_out": false,"_shards": {"total": 26,"successful": 26,"skipped": 0,"failed": 0},"hits": {"max_score": null,"hits": []},"aggregations": {"hosts": {"value": 541},"hosts_histogram": {"buckets": [{"key_as_string": "2019 - 07 - 05T01: 00: 00.000Z", "key": 1562288400000, "doc_count": 1492321, "count": { "value": 105 }}, {"key_as_string": "2019 - 07 - 05T13: 00: 00.000Z", "key": 1562331600000, "doc_count": 2412761, "count": { "value": 453}},{"key_as_string": "2019 - 07 - 06T01: 00: 00.000Z", "key": 1562374800000, "doc_count": 111658, "count": { "value": 15}}],"interval": "12h"}},"status": 200}';
 
+const closeModal = jest.fn();
+
+const defaultProps: ModalInspectProps = {
+  closeModal,
+  inputId: InputsModelId.timeline,
+  request,
+  response,
+  title: 'My title',
+};
+const renderModal = (props: ModalInspectProps = defaultProps) => {
+  return render(
+    <TestProviders>
+      <ModalInspectQuery {...props} />
+    </TestProviders>
+  );
+};
+
 describe('Modal Inspect', () => {
-  const closeModal = jest.fn();
-  const defaultProps: ModalInspectProps = {
-    closeModal,
-    inputId: InputsModelId.timeline,
-    request,
-    response,
-    title: 'My title',
-  };
+  describe('functionality from tab statistics', () => {
+    test('should show statistics tab correctly', () => {
+      renderModal();
+
+      fireEvent.click(screen.getByTestId('modal-inspect-statistics-tab'));
+      expect(screen.getByTestId('modal-inspect-statistics-tab')).toHaveAttribute(
+        'aria-selected',
+        'true'
+      );
 
-  describe('functionality from tab statistics/request/response', () => {
-    test('Click on statistic Tab', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <ModalInspectQuery {...defaultProps} />
-        </TestProviders>
+      expect(screen.getByTestId('index-pattern-title')).toHaveTextContent('Index pattern');
+      expect(screen.getByTestId('index-pattern-description')).toHaveTextContent(
+        'auditbeat-*, filebeat-*, packetbeat-*, winlogbeat-*'
       );
+      expect(screen.getByTestId('query-time-title')).toHaveTextContent('Query time');
 
-      wrapper.find('button.euiTab').first().simulate('click');
-      wrapper.update();
-
-      expect(
-        wrapper.find('.euiDescriptionList__title span[data-test-subj="index-pattern-title"]').text()
-      ).toContain('Index pattern ');
-      expect(
-        wrapper
-          .find('.euiDescriptionList__description span[data-test-subj="index-pattern-description"]')
-          .text()
-      ).toBe('auditbeat-*, filebeat-*, packetbeat-*, winlogbeat-*');
-      expect(
-        wrapper.find('.euiDescriptionList__title span[data-test-subj="query-time-title"]').text()
-      ).toContain('Query time ');
-      expect(
-        wrapper
-          .find('.euiDescriptionList__description span[data-test-subj="query-time-description"]')
-          .text()
-      ).toBe('880ms');
-      expect(
-        wrapper
-          .find('.euiDescriptionList__title span[data-test-subj="request-timestamp-title"]')
-          .text()
-      ).toContain('Request timestamp ');
+      expect(screen.getByTestId('query-time-description')).toHaveTextContent('880ms');
+      expect(screen.getByTestId('request-timestamp-title')).toHaveTextContent('Request timestamp');
     });
 
-    test('Click on request Tab', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <ModalInspectQuery {...defaultProps} />
-        </TestProviders>
-      );
+    test('should show response Tab content correctly', () => {
+      renderModal();
 
-      wrapper.find('button.euiTab').at(2).simulate('click');
-      wrapper.update();
+      fireEvent.click(screen.getByTestId('modal-inspect-response-tab'));
+      expect(screen.getByTestId('modal-inspect-response-tab')).toHaveAttribute(
+        'aria-selected',
+        'true'
+      );
 
-      expect(JSON.parse(wrapper.find('EuiCodeBlock').text())).toEqual({
+      const responseTextContent = screen.getByRole('tabpanel').textContent ?? '';
+      expect(JSON.parse(responseTextContent)).toMatchObject({
         took: 880,
         timed_out: false,
         _shards: {
@@ -140,17 +134,18 @@ describe('Modal Inspect', () => {
       });
     });
 
-    test('Click on response Tab', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <ModalInspectQuery {...defaultProps} />
-        </TestProviders>
+    test('should show request tab correctly', () => {
+      renderModal();
+
+      fireEvent.click(screen.getByTestId('modal-inspect-request-tab'));
+      expect(screen.getByTestId('modal-inspect-request-tab')).toHaveAttribute(
+        'aria-selected',
+        'true'
       );
 
-      wrapper.find('button.euiTab').at(1).simulate('click');
-      wrapper.update();
+      const requestTextContent = screen.getByRole('tabpanel').textContent ?? '';
 
-      expect(JSON.parse(wrapper.find('EuiCodeBlock').text())).toEqual({
+      expect(JSON.parse(requestTextContent)).toMatchObject({
         aggregations: {
           hosts: { cardinality: { field: 'host.name' } },
           hosts_histogram: {
@@ -170,62 +165,56 @@ describe('Modal Inspect', () => {
   });
 
   describe('events', () => {
-    test('Make sure that toggle function has been called when you click on the close button', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <ModalInspectQuery {...defaultProps} />
-        </TestProviders>
-      );
+    test('should make sure that toggle function has been called when you click on the close button', () => {
+      renderModal();
 
-      wrapper.find('button[data-test-subj="modal-inspect-close"]').simulate('click');
-      wrapper.update();
+      fireEvent.click(screen.getByTestId('modal-inspect-close'));
       expect(closeModal).toHaveBeenCalled();
     });
   });
 
   describe('formatIndexPatternRequested', () => {
-    test('Return specific messages to NO_ALERT_INDEX if we only have one index and we match the index name `NO_ALERT_INDEX`', () => {
+    test('should return specific messages to NO_ALERT_INDEX if we only have one index and we match the index name `NO_ALERT_INDEX`', () => {
       const expected = formatIndexPatternRequested([NO_ALERT_INDEX]);
       expect(expected).toEqual(<i>{'No alert index found'}</i>);
     });
 
-    test('Ignore NO_ALERT_INDEX if you have more than one indices', () => {
+    test('should ignore NO_ALERT_INDEX if you have more than one indices', () => {
       const expected = formatIndexPatternRequested([NO_ALERT_INDEX, 'indice-1']);
       expect(expected).toEqual('indice-1');
     });
 
-    test('Happy path', () => {
+    test('should format indices correctly', () => {
       const expected = formatIndexPatternRequested(['indice-1, indice-2']);
       expect(expected).toEqual('indice-1, indice-2');
     });
 
-    test('Empty array with no indices', () => {
+    test('should show error when indices array is empty', () => {
       const expected = formatIndexPatternRequested([]);
       expect(expected).toEqual('Sorry about that, something went wrong.');
     });
 
-    test('Undefined indices', () => {
+    test('should show error when indices are Undefined', () => {
       const expected = formatIndexPatternRequested(undefined);
       expect(expected).toEqual('Sorry about that, something went wrong.');
     });
   });
 
   describe('index pattern messaging', () => {
-    test('no messaging when all patterns are in sourcerer selection', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <ModalInspectQuery {...defaultProps} />
-        </TestProviders>
-      );
-      expect(wrapper.find('i[data-test-subj="not-sourcerer-msg"]').first().exists()).toEqual(false);
+    test('should show no messaging when all patterns match sourcerer selection', () => {
+      renderModal();
+
+      expect(screen.queryByTestId('not-sourcerer-msg')).toBeNull();
     });
-    test('not-sourcerer-msg when not all patterns are in sourcerer selection', () => {
-      const wrapper = mount(
-        <TestProviders>
-          <ModalInspectQuery {...defaultProps} request={getRequest(['differentbeat-*'])} />
-        </TestProviders>
+    test('should show not-sourcerer-msg when not all patterns are in sourcerer selection', () => {
+      renderModal({
+        ...defaultProps,
+        request: getRequest(['differentbeat-*']),
+      });
+
+      expect(screen.getByTestId('not-sourcerer-msg')).toHaveTextContent(
+        'This element has a unique index pattern separate from the data view setting.'
       );
-      expect(wrapper.find('i[data-test-subj="not-sourcerer-msg"]').first().exists()).toEqual(true);
     });
   });
 });
diff --git a/x-pack/plugins/security_solution/public/common/components/inspect/modal.tsx b/x-pack/plugins/security_solution/public/common/components/inspect/modal.tsx
index 175c02dfdbed5..bb0a20b7736b0 100644
--- a/x-pack/plugins/security_solution/public/common/components/inspect/modal.tsx
+++ b/x-pack/plugins/security_solution/public/common/components/inspect/modal.tsx
@@ -59,13 +59,25 @@ interface Response {
 
 const MyEuiModal = styled(EuiModal)`
   width: min(768px, calc(100vw - 16px));
-  min-height: 41vh;
+  height: 41vh;
+
   .euiModal__flex {
     width: 60vw;
   }
-  .euiCodeBlock {
-    height: auto !important;
-    max-width: 718px;
+
+  [role='tabpanel'] {
+    /*
+    * Current tabpanel height is based on the content inside it and since we are using virtualized codeblock,
+    * which needs to have a fixed height of parent to render the codeblock properly, we will set tabpanel height
+    * to take up any remaining space after header, footer and tabs in the Modal.
+    *
+    * height of the tabPanel is calculated according to the Modal height of 41vh
+    * and then subtracting the height of the header, footer and the space between the tabs and the codeblock
+    *
+    * headerHeight + footerHeight + tabsHeight + paddingAroundCodeBlock = 208px
+    *
+    */
+    height: calc(41vh - 208px) !important;
   }
 `;
 
@@ -110,14 +122,18 @@ export const ModalInspectQuery = ({
     inputId === 'timeline' ? SourcererScopeName.timeline : getScopeFromPath(pathname)
   );
 
-  const requests: string[] = [request, ...(additionalRequests != null ? additionalRequests : [])];
-  const responses: string[] = [
-    response,
-    ...(additionalResponses != null ? additionalResponses : []),
-  ];
+  const requests: string[] = useMemo(
+    () => [request, ...(additionalRequests != null ? additionalRequests : [])],
+    [request, additionalRequests]
+  );
+
+  const responses: string[] = useMemo(
+    () => [response, ...(additionalResponses != null ? additionalResponses : [])],
+    [response, additionalResponses]
+  );
 
-  const inspectRequests: Request[] = parseInspectStrings(requests);
-  const inspectResponses: Response[] = parseInspectStrings(responses);
+  const inspectRequests: Request[] = useMemo(() => parseInspectStrings(requests), [requests]);
+  const inspectResponses: Response[] = useMemo(() => parseInspectStrings(responses), [responses]);
 
   const isSourcererPattern = useMemo(
     () =>
@@ -130,129 +146,142 @@ export const ModalInspectQuery = ({
   const statistics: Array<{
     title: NonNullable<ReactNode | string>;
     description: NonNullable<ReactNode | string>;
-  }> = [
-    {
-      title: (
-        <span data-test-subj="index-pattern-title">
-          {i18n.INDEX_PATTERN}{' '}
-          <EuiIconTip color="subdued" content={i18n.INDEX_PATTERN_DESC} type="iInCircle" />
-        </span>
-      ),
-      description: (
-        <span data-test-subj="index-pattern-description">
-          <p>
-            {formatIndexPatternRequested(
-              adHocDataViews != null && adHocDataViews.length > 0
-                ? adHocDataViews
-                : inspectRequests[0]?.index ?? []
-            )}
-          </p>
-
-          {!isSourcererPattern && (
+  }> = useMemo(
+    () => [
+      {
+        title: (
+          <span data-test-subj="index-pattern-title">
+            {i18n.INDEX_PATTERN}{' '}
+            <EuiIconTip color="subdued" content={i18n.INDEX_PATTERN_DESC} type="iInCircle" />
+          </span>
+        ),
+        description: (
+          <span data-test-subj="index-pattern-description">
             <p>
-              <small>
-                <i data-test-subj="not-sourcerer-msg">{i18n.INSPECT_PATTERN_DIFFERENT}</i>
-              </small>
+              {formatIndexPatternRequested(
+                adHocDataViews != null && adHocDataViews.length > 0
+                  ? adHocDataViews
+                  : inspectRequests[0]?.index ?? []
+              )}
             </p>
-          )}
-        </span>
-      ),
-    },
 
-    {
-      title: (
-        <span data-test-subj="query-time-title">
-          {i18n.QUERY_TIME}{' '}
-          <EuiIconTip color="subdued" content={i18n.QUERY_TIME_DESC} type="iInCircle" />
-        </span>
-      ),
-      description: (
-        <span data-test-subj="query-time-description">
-          {inspectResponses[0]?.took === 0
-            ? '0ms'
-            : inspectResponses[0]?.took
-            ? `${numeral(inspectResponses[0].took).format('0,0')}ms`
-            : i18n.SOMETHING_WENT_WRONG}
-        </span>
-      ),
-    },
-    {
-      title: (
-        <span data-test-subj="request-timestamp-title">
-          {i18n.REQUEST_TIMESTAMP}{' '}
-          <EuiIconTip color="subdued" content={i18n.REQUEST_TIMESTAMP_DESC} type="iInCircle" />
-        </span>
-      ),
-      description: (
-        <span data-test-subj="request-timestamp-description">{new Date().toISOString()}</span>
-      ),
-    },
-  ];
+            {!isSourcererPattern && (
+              <p>
+                <small>
+                  <i data-test-subj="not-sourcerer-msg">{i18n.INSPECT_PATTERN_DIFFERENT}</i>
+                </small>
+              </p>
+            )}
+          </span>
+        ),
+      },
 
-  const tabs = [
-    {
-      id: 'statistics',
-      name: 'Statistics',
-      content: (
-        <>
-          <EuiSpacer />
-          <EuiDescriptionList
-            listItems={statistics}
-            type="responsiveColumn"
-            columnWidths={[3, 7]}
-          />
-        </>
-      ),
-    },
-    {
-      id: 'request',
-      name: 'Request',
-      content:
-        inspectRequests.length > 0 ? (
-          inspectRequests.map((inspectRequest, index) => (
-            <Fragment key={index}>
-              <EuiSpacer />
-              <EuiCodeBlock
-                language="js"
-                fontSize="m"
-                paddingSize="m"
-                color="dark"
-                overflowHeight={300}
-                isCopyable
-              >
-                {manageStringify(inspectRequest.body)}
-              </EuiCodeBlock>
-            </Fragment>
-          ))
-        ) : (
-          <EuiCodeBlock>{i18n.SOMETHING_WENT_WRONG}</EuiCodeBlock>
+      {
+        title: (
+          <span data-test-subj="query-time-title">
+            {i18n.QUERY_TIME}{' '}
+            <EuiIconTip color="subdued" content={i18n.QUERY_TIME_DESC} type="iInCircle" />
+          </span>
+        ),
+        description: (
+          <span data-test-subj="query-time-description">
+            {inspectResponses[0]?.took === 0
+              ? '0ms'
+              : inspectResponses[0]?.took
+              ? `${numeral(inspectResponses[0].took).format('0,0')}ms`
+              : i18n.SOMETHING_WENT_WRONG}
+          </span>
         ),
-    },
-    {
-      id: 'response',
-      name: 'Response',
-      content:
-        inspectResponses.length > 0 ? (
-          responses.map((responseText, index) => (
-            <Fragment key={index}>
-              <EuiSpacer />
-              <EuiCodeBlock
-                language="js"
-                fontSize="m"
-                paddingSize="m"
-                color="dark"
-                overflowHeight={300}
-                isCopyable
-              >
-                {responseText}
-              </EuiCodeBlock>
-            </Fragment>
-          ))
-        ) : (
-          <EuiCodeBlock>{i18n.SOMETHING_WENT_WRONG}</EuiCodeBlock>
+      },
+      {
+        title: (
+          <span data-test-subj="request-timestamp-title">
+            {i18n.REQUEST_TIMESTAMP}{' '}
+            <EuiIconTip color="subdued" content={i18n.REQUEST_TIMESTAMP_DESC} type="iInCircle" />
+          </span>
         ),
-    },
-  ];
+        description: (
+          <span data-test-subj="request-timestamp-description">{new Date().toISOString()}</span>
+        ),
+      },
+    ],
+    [adHocDataViews, inspectRequests, inspectResponses, isSourcererPattern]
+  );
+
+  const tabs = useMemo(
+    () => [
+      {
+        id: 'statistics',
+        name: 'Statistics',
+        'data-test-subj': 'modal-inspect-statistics-tab',
+        content: (
+          <>
+            <EuiSpacer />
+            <EuiDescriptionList
+              listItems={statistics}
+              type="responsiveColumn"
+              columnWidths={[3, 7]}
+            />
+          </>
+        ),
+      },
+      {
+        id: 'request',
+        name: 'Request',
+        'data-test-subj': 'modal-inspect-request-tab',
+        content:
+          inspectRequests.length > 0 ? (
+            inspectRequests.map((inspectRequest, index) => (
+              <Fragment key={index}>
+                <EuiCodeBlock
+                  data-test-subj="modal-inspect-request-preview"
+                  language="json"
+                  fontSize="m"
+                  paddingSize="m"
+                  color="dark"
+                  overflowHeight="100%"
+                  isCopyable
+                  isVirtualized
+                  lineNumbers
+                >
+                  {manageStringify(inspectRequest.body)}
+                </EuiCodeBlock>
+              </Fragment>
+            ))
+          ) : (
+            <EuiCodeBlock>{i18n.SOMETHING_WENT_WRONG}</EuiCodeBlock>
+          ),
+      },
+      {
+        id: 'response',
+        name: 'Response',
+        'data-test-subj': 'modal-inspect-response-tab',
+        content:
+          inspectResponses.length > 0 ? (
+            responses.map((responseText, index) => (
+              <Fragment key={index}>
+                <EuiCodeBlock
+                  data-test-subj="modal-inspect-response-preview"
+                  language="json"
+                  fontSize="m"
+                  paddingSize="m"
+                  color="dark"
+                  overflowHeight="100%"
+                  isCopyable
+                  isVirtualized
+                  lineNumbers
+                >
+                  {responseText}
+                </EuiCodeBlock>
+              </Fragment>
+            ))
+          ) : (
+            <EuiCodeBlock>{i18n.SOMETHING_WENT_WRONG}</EuiCodeBlock>
+          ),
+      },
+    ],
+    [inspectRequests, inspectResponses, responses, statistics]
+  );
 
   return (
     <MyEuiModal onClose={closeModal} data-test-subj="modal-inspect-euiModal">
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/query/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/query/index.tsx
index 8a2c42998e3ec..21165080d3957 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/query/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/query/index.tsx
@@ -259,41 +259,52 @@ export const QueryTabContentComponent: React.FC<Props> = ({
 
   if (unifiedComponentsInTimelineEnabled) {
     return (
-      <UnifiedTimelineBody
-        header={
-          <QueryTabHeader
-            activeTab={activeTab}
-            filterManager={timelineFilterManager}
-            show={show && activeTab === TimelineTabs.query}
-            showCallOutUnauthorizedMsg={showCallOutUnauthorizedMsg}
-            status={status}
-            timelineId={timelineId}
-            showEventsCountBadge={showEventsCountBadge}
-            totalCount={totalCount}
-          />
-        }
-        columns={augmentedColumnHeaders}
-        rowRenderers={rowRenderers}
-        timelineId={timelineId}
-        itemsPerPage={itemsPerPage}
-        itemsPerPageOptions={itemsPerPageOptions}
-        sort={sort}
-        events={events}
-        refetch={refetch}
-        dataLoadingState={dataLoadingState}
-        totalCount={isBlankTimeline ? 0 : totalCount}
-        onEventClosed={onEventClosed}
-        expandedDetail={expandedDetail}
-        showExpandedDetails={showExpandedDetails}
-        leadingControlColumns={leadingControlColumns as EuiDataGridControlColumn[]}
-        eventIdToNoteIds={eventIdToNoteIds}
-        pinnedEventIds={pinnedEventIds}
-        onChangePage={loadPage}
-        activeTab={activeTab}
-        updatedAt={refreshedAt}
-        isTextBasedQuery={false}
-        pageInfo={pageInfo}
-      />
+      <>
+        <TimelineRefetch
+          id={`${timelineId}-${TimelineTabs.query}`}
+          inputId={InputsModelId.timeline}
+          inspect={inspect}
+          loading={isQueryLoading}
+          refetch={refetch}
+          skip={!canQueryTimeline}
+        />
+
+        <UnifiedTimelineBody
+          header={
+            <QueryTabHeader
+              activeTab={activeTab}
+              filterManager={timelineFilterManager}
+              show={show && activeTab === TimelineTabs.query}
+              showCallOutUnauthorizedMsg={showCallOutUnauthorizedMsg}
+              status={status}
+              timelineId={timelineId}
+              showEventsCountBadge={showEventsCountBadge}
+              totalCount={totalCount}
+            />
+          }
+          columns={augmentedColumnHeaders}
+          rowRenderers={rowRenderers}
+          timelineId={timelineId}
+          itemsPerPage={itemsPerPage}
+          itemsPerPageOptions={itemsPerPageOptions}
+          sort={sort}
+          events={events}
+          refetch={refetch}
+          dataLoadingState={dataLoadingState}
+          totalCount={isBlankTimeline ? 0 : totalCount}
+          onEventClosed={onEventClosed}
+          expandedDetail={expandedDetail}
+          showExpandedDetails={showExpandedDetails}
+          leadingControlColumns={leadingControlColumns as EuiDataGridControlColumn[]}
+          eventIdToNoteIds={eventIdToNoteIds}
+          pinnedEventIds={pinnedEventIds}
+          onChangePage={loadPage}
+          activeTab={activeTab}
+          updatedAt={refreshedAt}
+          isTextBasedQuery={false}
+          pageInfo={pageInfo}
+        />
+      </>
     );
   }
 
diff --git a/x-pack/plugins/security_solution/tsconfig.json b/x-pack/plugins/security_solution/tsconfig.json
index 9bc37db6612a0..610a76cd6f5ee 100644
--- a/x-pack/plugins/security_solution/tsconfig.json
+++ b/x-pack/plugins/security_solution/tsconfig.json
@@ -15,7 +15,11 @@
     "public/**/*.json",
     "../../../typings/**/*"
   ],
-  "exclude": ["target/**/*", "**/cypress/**", "public/management/cypress.config.ts"],
+  "exclude": [
+    "target/**/*",
+    "**/cypress/**",
+    "public/management/cypress.config.ts"
+  ],
   "kbn_references": [
     "@kbn/core",
     {
diff --git a/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/unified_components/query_tab.cy.ts b/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/unified_components/query_tab.cy.ts
index fcde7a791782c..0edb0b6e82e17 100644
--- a/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/unified_components/query_tab.cy.ts
+++ b/x-pack/test/security_solution_cypress/cypress/e2e/investigations/timelines/unified_components/query_tab.cy.ts
@@ -5,6 +5,11 @@
  * 2.0.
  */
 
+import {
+  INSPECT_MODAL,
+  INSPECT_MODAL_REQUEST_TAB,
+  INSPECT_MODAL_RESPONSE_TAB,
+} from '../../../../screens/inspect';
 import {
   closeTimelineFlyout,
   openEventDetailsFlyout,
@@ -17,22 +22,21 @@ import {
   TIMELINE_DETAILS_FLYOUT,
   USER_DETAILS_FLYOUT,
 } from '../../../../screens/unified_timeline';
-import {
-  ROW_ADD_NOTES_BUTTON,
-  ADD_NOTE_CONTAINER,
-  RESOLVER_GRAPH_CONTAINER,
-} from '../../../../screens/timeline';
-import { OPEN_ANALYZER_BTN } from '../../../../screens/alerts';
 import { GET_DISCOVER_DATA_GRID_CELL_HEADER } from '../../../../screens/discover';
 import { addFieldToTable, removeFieldFromTable } from '../../../../tasks/discover';
 import { login } from '../../../../tasks/login';
 import { visitWithTimeRange } from '../../../../tasks/navigation';
 import { openTimelineUsingToggle } from '../../../../tasks/security_main';
-import { createNewTimeline, executeTimelineSearch } from '../../../../tasks/timeline';
+import {
+  createNewTimeline,
+  executeTimelineSearch,
+  openTimelineInspectButton,
+} from '../../../../tasks/timeline';
 import { ALERTS_URL } from '../../../../urls/navigation';
+import { openTab } from '../../../../tasks/inspect';
+import { CODE_BLOCK } from '../../../../screens/common';
 
-// FLAKY: https://github.com/elastic/kibana/issues/181882
-describe.skip(
+describe(
   'Unsaved Timeline query tab',
   {
     tags: ['@ess', '@serverless', '@skipInServerlessMKI'],
@@ -55,6 +59,32 @@ describe.skip(
       executeTimelineSearch('*');
     });
 
+    it('should be able inspect without any issues', () => {
+      openTimelineInspectButton();
+      cy.get(INSPECT_MODAL).should('be.visible');
+      openTab(INSPECT_MODAL_REQUEST_TAB);
+      cy.get(INSPECT_MODAL_REQUEST_TAB).should('have.attr', 'aria-selected', 'true');
+      cy.get(INSPECT_MODAL).within(() => {
+        cy.get(CODE_BLOCK)
+          .should('be.visible')
+          .then(($codeEditor) => {
+            const { height } = $codeEditor[0].getBoundingClientRect();
+            expect(height).to.be.gt(100);
+          });
+      });
+
+      openTab(INSPECT_MODAL_RESPONSE_TAB);
+      cy.get(INSPECT_MODAL_RESPONSE_TAB).should('have.attr', 'aria-selected', 'true');
+      cy.get(INSPECT_MODAL).within(() => {
+        cy.get(CODE_BLOCK)
+          .should('be.visible')
+          .then(($codeEditor) => {
+            const { height } = $codeEditor[0].getBoundingClientRect();
+            expect(height).to.be.gt(100);
+          });
+      });
+    });
+
     it('should be able to add/remove columns correctly', () => {
       cy.get(GET_UNIFIED_DATA_GRID_CELL_HEADER('agent.type')).should('not.exist');
       addFieldToTable('agent.type');
@@ -63,19 +93,8 @@ describe.skip(
       cy.get(GET_DISCOVER_DATA_GRID_CELL_HEADER('agent.type')).should('not.exist');
     });
 
-    it('should render the add note button and display the markdown editor', () => {
-      cy.get(ROW_ADD_NOTES_BUTTON).should('be.visible').realClick();
-      cy.get(ADD_NOTE_CONTAINER).should('be.visible');
-    });
-
-    it('should render the analyze event button and display the process analyzer visualization', () => {
-      cy.get(OPEN_ANALYZER_BTN).should('be.visible').realClick();
-      cy.get(RESOLVER_GRAPH_CONTAINER).should('be.visible');
-    });
-
-    // these tests are skipped until we implement the expandable flyout in the unified table for timeline
     context('flyout', () => {
-      it.skip('should be able to open/close details details/host/user flyout', () => {
+      it('should be able to open/close details details/host/user flyout', () => {
         cy.log('Event Details Flyout');
         openEventDetailsFlyout(0);
         cy.get(TIMELINE_DETAILS_FLYOUT).should('be.visible');
diff --git a/x-pack/test/security_solution_cypress/cypress/screens/common.ts b/x-pack/test/security_solution_cypress/cypress/screens/common.ts
index b121badc9e20d..d59da7fabcbd6 100644
--- a/x-pack/test/security_solution_cypress/cypress/screens/common.ts
+++ b/x-pack/test/security_solution_cypress/cypress/screens/common.ts
@@ -10,3 +10,5 @@ export const TOOLTIP = '[role="tooltip"]';
 export const BASIC_TABLE_LOADING = '.euiBasicTable.euiBasicTable-loading';
 
 export const COMBO_BOX_OPTION = '.euiComboBoxOptionsList button[role="option"]';
+
+export const CODE_BLOCK = '.euiCodeBlock';
diff --git a/x-pack/test/security_solution_cypress/cypress/screens/inspect.ts b/x-pack/test/security_solution_cypress/cypress/screens/inspect.ts
index 083e9d2dd2517..057d79216caa6 100644
--- a/x-pack/test/security_solution_cypress/cypress/screens/inspect.ts
+++ b/x-pack/test/security_solution_cypress/cypress/screens/inspect.ts
@@ -35,9 +35,13 @@ import { EVENTS_HISTOGRAM, EVENTS_TAB } from './users/user_events';
 import { HTTP_TAB, HTTP_TABLE } from './network/http';
 import { TLS_TAB, TLS_TABLE } from './network/tls';
 import { RISK_SCORE_TAB, RISK_SCORE_TAB_CONTENT } from './users/user_risk_score';
+import { getDataTestSubjectSelector } from '../helpers/common';
 
 export const INSPECT_BUTTON_ICON = '[data-test-subj="inspect-icon-button"]';
 export const INSPECT_MODAL = '[data-test-subj="modal-inspect-euiModal"]';
+export const INSPECT_MODAL_REQUEST_TAB = getDataTestSubjectSelector('modal-inspect-request-tab');
+export const INSPECT_MODAL_RESPONSE_TAB = getDataTestSubjectSelector('modal-inspect-response-tab');
+export const INSPECT_MODAL_STATS_TAB = getDataTestSubjectSelector('modal-inspect-statistics-tab');
 export const INSPECT_MODAL_INDEX_PATTERN = '[data-test-subj="index-pattern-description"]';
 export const EMBEDDABLE_PANEL_TOGGLE_ICON = '[data-test-subj="embeddablePanelToggleMenuIcon"]';
 export const EMBEDDABLE_PANEL_INSPECT = '[data-test-subj="embeddablePanelAction-inspect"]';
diff --git a/x-pack/test/security_solution_cypress/cypress/screens/unified_timeline.ts b/x-pack/test/security_solution_cypress/cypress/screens/unified_timeline.ts
index 36aeb7d616128..afed0a9244542 100644
--- a/x-pack/test/security_solution_cypress/cypress/screens/unified_timeline.ts
+++ b/x-pack/test/security_solution_cypress/cypress/screens/unified_timeline.ts
@@ -13,7 +13,7 @@ export const HOST_DETAILS_LINK = getDataTestSubjectSelector('host-details-button
 
 export const USER_DETAILS_LINK = getDataTestSubjectSelector('users-link-anchor');
 
-export const TIMELINE_DETAILS_FLYOUT = getDataTestSubjectSelector('timeline:details-panel:flyout');
+export const TIMELINE_DETAILS_FLYOUT = getDataTestSubjectSelector('securitySolutionFlyoutBody');
 
 export const HOST_DETAILS_FLYOUT = getDataTestSubjectSelector('host-panel-header');
 
diff --git a/x-pack/test/security_solution_cypress/cypress/tasks/inspect.ts b/x-pack/test/security_solution_cypress/cypress/tasks/inspect.ts
index c100de3112606..5011410d8f480 100644
--- a/x-pack/test/security_solution_cypress/cypress/tasks/inspect.ts
+++ b/x-pack/test/security_solution_cypress/cypress/tasks/inspect.ts
@@ -57,6 +57,5 @@ export const openLensVisualizationsInspectModal = (
 };
 
 export const openTab = (tab: string) => {
-  cy.get(tab).invoke('show');
-  cy.get(tab).click({ force: true });
+  cy.get(tab).click();
 };