From c6e732fcdd3d8869463e542a54b2c0ecbcc17bcf Mon Sep 17 00:00:00 2001
From: Michael Olorunnisola <michael.olorunnisola@elastic.co>
Date: Thu, 15 Sep 2022 11:18:07 -0400
Subject: [PATCH] fix tests

---
 .../flyout/__snapshots__/index.test.tsx.snap  | 283 +-----------------
 .../flyout/bottom_bar/index.test.tsx          |  19 +-
 .../timelines/components/flyout/index.tsx     |   1 -
 3 files changed, 4 insertions(+), 299 deletions(-)

diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/flyout/__snapshots__/index.test.tsx.snap
index a6a846110f72c..df6539a20c74e 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/flyout/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/flyout/__snapshots__/index.test.tsx.snap
@@ -18,171 +18,7 @@ exports[`Flyout rendering it renders correctly against snapshot 1`] = `
       </div>
     </div>
   </div>
-  .c7 {
-  -webkit-transition: background-color 0.7s ease;
-  transition: background-color 0.7s ease;
-  width: 100%;
-  height: 100%;
-}
-
-.c7 .flyout-overlay .euiPanel {
-  background-color: #16171c;
-}
-
-.c7 > div.timeline-drop-area .drop-and-provider-timeline {
-  display: none;
-}
-
-.c7 > div.timeline-drop-area + div {
-  display: none !important;
-}
-
-.c13 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  border-radius: 100%;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  font-size: 9px;
-  height: 34px;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  margin: 0 5px 0 5px;
-  padding: 7px 6px 4px 6px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  width: 34px;
-}
-
-.c13 .euiBadge__content {
-  position: relative;
-  top: -1px;
-}
-
-.c13 .euiBadge__text {
-  text-overflow: clip;
-}
-
-.c10 {
-  overflow: hidden;
-  margin: 5px 0 5px 0;
-  padding: 3px;
-  white-space: nowrap;
-}
-
-.c12 {
-  height: 20px;
-  margin: 0 5px 0 5px;
-  maxwidth: 85px;
-  minwidth: 85px;
-}
-
-.c11 {
-  background-color: #343741;
-}
-
-.c8 {
-  width: auto;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-flex-wrap: wrap;
-  -ms-flex-wrap: wrap;
-  flex-wrap: wrap;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-align-content: center;
-  -ms-flex-line-pack: center;
-  align-content: center;
-  min-height: 100px;
-}
-
-.c8 + div {
-  display: none !important;
-}
-
-.c9 {
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-  -webkit-flex-wrap: no-wrap;
-  -ms-flex-wrap: no-wrap;
-  flex-wrap: no-wrap;
-}
-
-.c5 {
-  padding: 2px 0 4px 0;
-}
-
-.is-dragging .c5 .drop-target-data-providers {
-  background: rgba(125,222,216,0.1);
-  border: 0.2rem dashed #7dded8;
-}
-
-.is-dragging .c5 .drop-target-data-providers .timeline-drop-area-empty__text {
-  color: #7dded8;
-}
-
-.is-dragging .c5 .drop-target-data-providers .euiFormHelpText {
-  color: #7dded8;
-}
-
-.c6 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  padding-bottom: 2px;
-  position: relative;
-  border: 0.2rem dashed #535966;
-  border-radius: 5px;
-  padding: 4px 0;
-  margin: 2px 0 2px 0;
-  max-height: 33vh;
-  min-height: 100px;
-  overflow: auto;
-  resize: vertical;
-  background-color: #16171c;
-}
-
-.c2 {
+  .c2 {
   display: block;
 }
 
@@ -200,16 +36,6 @@ exports[`Flyout rendering it renders correctly against snapshot 1`] = `
   overflow: hidden;
 }
 
-.c4 {
-  border-radius: 0;
-  padding: 0 4px 0 4px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  z-index: 9000;
-}
-
 <div
     class="timeline-flyout-button-bar"
     data-test-subj="flyoutBottomBar"
@@ -311,113 +137,6 @@ exports[`Flyout rendering it renders correctly against snapshot 1`] = `
         </div>
       </div>
     </div>
-    <div
-      class="euiPanel euiPanel--plain c4 emotion-euiPanel-grow-m-plain-hasShadow"
-    >
-      <div
-        aria-label="You are in the timeline query area, which contains groups of data providers that query for events"
-        class="c5 drop-target-data-providers-container"
-      >
-        <div
-          class="c6 drop-target-data-providers"
-          data-test-subj="dataProviders"
-        >
-          <div
-            class="c7"
-            data-rbd-droppable-context-id="123"
-            data-rbd-droppable-id="123"
-            height="100%"
-          >
-            <div
-              class="c8 timeline-drop-area-empty"
-              data-test-subj="empty"
-            >
-              <div
-                class="c9"
-              >
-                <div
-                  class="euiText c10 timeline-drop-area-empty__text emotion-euiText-s-euiTextColor-subdued"
-                >
-                  Drop anything
-                </div>
-                <span
-                  class="c11"
-                >
-                  <span
-                    class="euiBadge euiBadge--iconLeft c12 highlighted-drop-target"
-                    style="background-color: rgb(211, 218, 230); color: rgb(0, 0, 0);"
-                    title="highlighted"
-                  >
-                    <span
-                      class="euiBadge__content"
-                    >
-                      <span
-                        class="euiBadge__text"
-                      >
-                        highlighted
-                      </span>
-                    </span>
-                  </span>
-                </span>
-                <div
-                  class="euiText c10 timeline-drop-area-empty__text emotion-euiText-s-euiTextColor-subdued"
-                >
-                  here to build an
-                </div>
-                <span
-                  class="euiBadge euiBadge--hollow euiBadge--iconLeft c13"
-                  data-test-subj="and-or-badge"
-                  title="OR"
-                >
-                  <span
-                    class="euiBadge__content"
-                  >
-                    <span
-                      class="euiBadge__text"
-                    >
-                      OR
-                    </span>
-                  </span>
-                </span>
-                <div
-                  class="euiText c10 timeline-drop-area-empty__text emotion-euiText-s-euiTextColor-subdued"
-                >
-                  query
-                </div>
-              </div>
-              <div
-                class="euiPopover emotion-euiPopover"
-                id="addFieldsPopover"
-              >
-                <div
-                  class="euiPopover__anchor css-16vtueo-render"
-                >
-                  <button
-                    class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
-                    data-test-subj="addField"
-                    type="button"
-                  >
-                    <span
-                      class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
-                    >
-                      <span
-                        class="euiButtonEmpty__text"
-                      >
-                        <div
-                          class="euiText emotion-euiText-s"
-                        >
-                          + Add field
-                        </div>
-                      </span>
-                    </span>
-                  </button>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
   </div>
 </DocumentFragment>
 `;
diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/bottom_bar/index.test.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/bottom_bar/index.test.tsx
index ec73602921048..3d739a8b63afe 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/flyout/bottom_bar/index.test.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/flyout/bottom_bar/index.test.tsx
@@ -9,18 +9,13 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import { TestProviders } from '../../../../common/mock/test_providers';
-import { TimelineTabs } from '../../../../../common/types/timeline';
 import { FlyoutBottomBar } from '.';
 
 describe('FlyoutBottomBar', () => {
   test('it renders the expected bottom bar', () => {
     render(
       <TestProviders>
-        <FlyoutBottomBar
-          timelineId="test"
-          showDataproviders={true}
-          activeTab={TimelineTabs.query}
-        />
+        <FlyoutBottomBar timelineId="test" showDataproviders={true} />
       </TestProviders>
     );
 
@@ -30,11 +25,7 @@ describe('FlyoutBottomBar', () => {
   test('it renders the flyout header panel', () => {
     render(
       <TestProviders>
-        <FlyoutBottomBar
-          timelineId="test"
-          showDataproviders={true}
-          activeTab={TimelineTabs.query}
-        />
+        <FlyoutBottomBar timelineId="test" showDataproviders={true} />
       </TestProviders>
     );
 
@@ -44,11 +35,7 @@ describe('FlyoutBottomBar', () => {
   test('it hides the flyout header panel', () => {
     render(
       <TestProviders>
-        <FlyoutBottomBar
-          timelineId="test"
-          showDataproviders={false}
-          activeTab={TimelineTabs.query}
-        />
+        <FlyoutBottomBar timelineId="test" showDataproviders={false} />
       </TestProviders>
     );
 
diff --git a/x-pack/plugins/security_solution/public/timelines/components/flyout/index.tsx b/x-pack/plugins/security_solution/public/timelines/components/flyout/index.tsx
index db1207cc4c540..a781378ff4234 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/flyout/index.tsx
+++ b/x-pack/plugins/security_solution/public/timelines/components/flyout/index.tsx
@@ -29,7 +29,6 @@ const FlyoutComponent: React.FC<OwnProps> = ({ timelineId, onAppLeave }) => {
   const dispatch = useDispatch();
   const getTimelineShowStatus = useMemo(() => getTimelineShowStatusByIdSelector(), []);
   const {
-    activeTab,
     show,
     status: timelineStatus,
     updated,