[Bug][Investigations] - Fix eql tab scrolling (#181763)

## Summary This issue only affects 8.14. Some wrappers were added unnecessarily to the correlations tab in Timeline preventing users from scrolling in this PR: #179832 This PR fixes it by placing the structure more in line with how it was prior here: https://github.com/elastic/kibana/pull/179832/files#diff-a11ba69be2253bc1c3183eb6589e3f30b9ec6e77353364208e906526712562fe The fix: https://github.com/elastic/kibana/assets/17211684/fc288ab8-3cbf-4f4d-8303-4fb5e970dfcd
elastic · Apr 26, 2024 · 11eb39b · 11eb39b
1 parent d2a1fd9
commit 11eb39b
Show file tree

Hide file tree

Showing 3 changed files with 79 additions and 85 deletions.
diff --git a/.../plugins/security_solution/public/timelines/components/timeline/tabs/eql/header/index.tsx b/.../plugins/security_solution/public/timelines/components/timeline/tabs/eql/header/index.tsx
@@ -29,38 +29,34 @@ export const EqlTabHeader = memo(
     <>
       <EuiFlexItem grow={false}>
         <StyledEuiFlyoutHeader data-test-subj={`${activeTab}-tab-flyout-header`} hasBorder={false}>
-          <TabHeaderContainer data-test-subj="timelineHeader">
-            <EuiFlexGroup
-              className="euiScrollBar"
-              alignItems="flexStart"
-              gutterSize="s"
-              data-test-subj="timeline-date-picker-container"
-              responsive={false}
-            >
-              {timelineFullScreen && setTimelineFullScreen != null && (
-                <ExitFullScreen
-                  fullScreen={timelineFullScreen}
-                  setFullScreen={setTimelineFullScreen}
-                />
-              )}
-              <EuiFlexItem grow={false}>
-                {activeTab === TimelineTabs.eql && (
-                  <Sourcerer scope={SourcererScopeName.timeline} />
-                )}
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <SuperDatePicker width="auto" id={InputsModelId.timeline} timelineId={timelineId} />
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <TimelineDatePickerLock />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </TabHeaderContainer>
+          <EuiFlexGroup
+            className="euiScrollBar"
+            alignItems="flexStart"
+            gutterSize="s"
+            data-test-subj="timeline-date-picker-container"
+            responsive={false}
+          >
+            {timelineFullScreen && setTimelineFullScreen != null && (
+              <ExitFullScreen
+                fullScreen={timelineFullScreen}
+                setFullScreen={setTimelineFullScreen}
+              />
+            )}
+            <EuiFlexItem grow={false}>
+              {activeTab === TimelineTabs.eql && <Sourcerer scope={SourcererScopeName.timeline} />}
+            </EuiFlexItem>
+            <EuiFlexItem>
+              <SuperDatePicker width="auto" id={InputsModelId.timeline} timelineId={timelineId} />
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <TimelineDatePickerLock />
+            </EuiFlexItem>
+          </EuiFlexGroup>
         </StyledEuiFlyoutHeader>
       </EuiFlexItem>
-      <EuiFlexItem grow={false}>
+      <TabHeaderContainer data-test-subj="timelineHeader">
         <EqlQueryBarTimeline timelineId={timelineId} />
-      </EuiFlexItem>
+      </TabHeaderContainer>
     </>
   )
 );

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/eql/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/eql/index.tsx
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
+import { EuiFlexGroup } from '@elastic/eui';
 import { isEmpty } from 'lodash/fp';
 import React, { useCallback, useEffect, useMemo } from 'react';
 import type { Dispatch } from 'redux';
@@ -213,62 +213,58 @@ export const EqlTabContentComponent: React.FC<Props> = ({
           />
           <FullWidthFlexGroup>
             <ScrollableFlexItem grow={2}>
-              <EuiFlexGroup gutterSize="s" direction="column">
-                <EqlTabHeader
-                  activeTab={activeTab}
-                  setTimelineFullScreen={setTimelineFullScreen}
-                  timelineFullScreen={timelineFullScreen}
-                  timelineId={timelineId}
-                />
-                <EuiFlexItem grow={true}>
-                  <EventDetailsWidthProvider>
-                    <StyledEuiFlyoutBody
-                      data-test-subj={`${TimelineTabs.eql}-tab-flyout-body`}
-                      className="timeline-flyout-body"
-                    >
-                      <StatefulBody
-                        activePage={pageInfo.activePage}
-                        browserFields={browserFields}
-                        data={isBlankTimeline ? TIMELINE_EMPTY_EVENTS : events}
-                        id={timelineId}
-                        refetch={refetch}
-                        renderCellValue={renderCellValue}
-                        rowRenderers={rowRenderers}
-                        sort={TIMELINE_NO_SORTING}
-                        tabType={TimelineTabs.eql}
-                        totalPages={calculateTotalPages({
-                          itemsCount: totalCount,
-                          itemsPerPage,
-                        })}
-                        leadingControlColumns={leadingControlColumns}
-                        trailingControlColumns={timelineEmptyTrailingControlColumns}
-                      />
-                    </StyledEuiFlyoutBody>
+              <EqlTabHeader
+                activeTab={activeTab}
+                setTimelineFullScreen={setTimelineFullScreen}
+                timelineFullScreen={timelineFullScreen}
+                timelineId={timelineId}
+              />
+              <EventDetailsWidthProvider>
+                <StyledEuiFlyoutBody
+                  data-test-subj={`${TimelineTabs.eql}-tab-flyout-body`}
+                  className="timeline-flyout-body"
+                >
+                  <StatefulBody
+                    activePage={pageInfo.activePage}
+                    browserFields={browserFields}
+                    data={isBlankTimeline ? TIMELINE_EMPTY_EVENTS : events}
+                    id={timelineId}
+                    refetch={refetch}
+                    renderCellValue={renderCellValue}
+                    rowRenderers={rowRenderers}
+                    sort={TIMELINE_NO_SORTING}
+                    tabType={TimelineTabs.eql}
+                    totalPages={calculateTotalPages({
+                      itemsCount: totalCount,
+                      itemsPerPage,
+                    })}
+                    leadingControlColumns={leadingControlColumns}
+                    trailingControlColumns={timelineEmptyTrailingControlColumns}
+                  />
+                </StyledEuiFlyoutBody>
 
-                    <StyledEuiFlyoutFooter
-                      data-test-subj={`${TimelineTabs.eql}-tab-flyout-footer`}
-                      className="timeline-flyout-footer"
-                    >
-                      {!isBlankTimeline && (
-                        <Footer
-                          activePage={pageInfo?.activePage ?? 0}
-                          data-test-subj="timeline-footer"
-                          updatedAt={refreshedAt}
-                          height={footerHeight}
-                          id={timelineId}
-                          isLive={isLive}
-                          isLoading={isQueryLoading || loadingSourcerer}
-                          itemsCount={isBlankTimeline ? 0 : events.length}
-                          itemsPerPage={itemsPerPage}
-                          itemsPerPageOptions={itemsPerPageOptions}
-                          onChangePage={loadPage}
-                          totalCount={isBlankTimeline ? 0 : totalCount}
-                        />
-                      )}
-                    </StyledEuiFlyoutFooter>
-                  </EventDetailsWidthProvider>
-                </EuiFlexItem>
-              </EuiFlexGroup>
+                <StyledEuiFlyoutFooter
+                  data-test-subj={`${TimelineTabs.eql}-tab-flyout-footer`}
+                  className="timeline-flyout-footer"
+                >
+                  {!isBlankTimeline && (
+                    <Footer
+                      activePage={pageInfo?.activePage ?? 0}
+                      data-test-subj="timeline-footer"
+                      updatedAt={refreshedAt}
+                      height={footerHeight}
+                      id={timelineId}
+                      isLive={isLive}
+                      isLoading={isQueryLoading || loadingSourcerer}
+                      itemsCount={isBlankTimeline ? 0 : events.length}
+                      itemsPerPage={itemsPerPage}
+                      itemsPerPageOptions={itemsPerPageOptions}
+                      onChangePage={loadPage}
+                      totalCount={isBlankTimeline ? 0 : totalCount}
+                    />
+                  )}
+                </StyledEuiFlyoutFooter>
+              </EventDetailsWidthProvider>
             </ScrollableFlexItem>
             {showExpandedDetails && (
               <>

diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/shared/layout.tsx b/x-pack/plugins/security_solution/public/timelines/components/timeline/tabs/shared/layout.tsx
@@ -16,6 +16,7 @@ import {
 import styled from 'styled-components';
 
 export const TabHeaderContainer = styled.div`
+  margin-top: ${(props) => props.theme.eui.euiSizeS};
   width: 100%;
 `;
 
@@ -26,6 +27,7 @@ export const StyledEuiFlyoutHeader = styled(EuiFlyoutHeader)`
   box-shadow: none;
   display: flex;
   flex-direction: column;
+  padding: 0;
 
   &.euiFlyoutHeader {
     ${({ theme }) => `padding: ${theme.eui.euiSizeS} 0 0 0;`}