From 31a69a9f7f2414ad349bfc5edeaa19b7d727a002 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Patryk=20Kopycin=CC=81ski?= <contact@patrykkopycinski.com>
Date: Mon, 13 Jan 2020 15:33:47 +0100
Subject: [PATCH] PR comments

---
 .../components/events_viewer/index.test.tsx   |  30 +---
 .../public/components/inspect/index.test.tsx  |  32 ++++-
 .../__snapshots__/index.test.tsx.snap         | 128 +++++++++++-------
 x-pack/package.json                           |   2 +-
 yarn.lock                                     |   9 +-
 5 files changed, 115 insertions(+), 86 deletions(-)

diff --git a/x-pack/legacy/plugins/siem/public/components/events_viewer/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/events_viewer/index.test.tsx
index 7b32ef4b8cae..ec8d329f1dfe 100644
--- a/x-pack/legacy/plugins/siem/public/components/events_viewer/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/events_viewer/index.test.tsx
@@ -16,7 +16,6 @@ import { StatefulEventsViewer } from '.';
 import { useFetchIndexPatterns } from '../../containers/detection_engine/rules/fetch_index_patterns';
 import { mockBrowserFields } from '../../containers/source/mock';
 import { eventsDefaultModel } from './default_model';
-import { BUTTON_CLASS } from '../inspect';
 
 const mockUseFetchIndexPatterns: jest.Mock = useFetchIndexPatterns as jest.Mock;
 jest.mock('../../containers/detection_engine/rules/fetch_index_patterns');
@@ -58,7 +57,8 @@ describe('StatefulEventsViewer', () => {
     ).toBe(true);
   });
 
-  test('it renders a transparent inspect button when it does NOT have mouse focus', async () => {
+  // InspectButtonContainer controls displaying InspectButton components
+  test('it renders InspectButtonContainer', async () => {
     const wrapper = mount(
       <TestProviders>
         <MockedProvider mocks={mockEventViewerResponse} addTypename={false}>
@@ -75,30 +75,6 @@ describe('StatefulEventsViewer', () => {
     await wait();
     wrapper.update();
 
-    expect(wrapper.find(`InspectButtonContainer`)).toHaveStyleRule('opacity', '0', {
-      modifier: `.${BUTTON_CLASS}`,
-    });
-  });
-
-  test('it renders an opaque inspect button when it has mouse focus', async () => {
-    const wrapper = mount(
-      <TestProviders>
-        <MockedProvider mocks={mockEventViewerResponse} addTypename={false}>
-          <StatefulEventsViewer
-            defaultModel={eventsDefaultModel}
-            end={to}
-            id={'test-stateful-events-viewer'}
-            start={from}
-          />
-        </MockedProvider>
-      </TestProviders>
-    );
-
-    await wait();
-    wrapper.update();
-
-    expect(wrapper.find(`InspectButtonContainer`)).toHaveStyleRule('opacity', '1', {
-      modifier: `:hover .${BUTTON_CLASS}`,
-    });
+    expect(wrapper.find(`InspectButtonContainer`).exists()).toBe(true);
   });
 });
diff --git a/x-pack/legacy/plugins/siem/public/components/inspect/index.test.tsx b/x-pack/legacy/plugins/siem/public/components/inspect/index.test.tsx
index c4a6ce7a6590..9492002717e2 100644
--- a/x-pack/legacy/plugins/siem/public/components/inspect/index.test.tsx
+++ b/x-pack/legacy/plugins/siem/public/components/inspect/index.test.tsx
@@ -17,7 +17,7 @@ import {
 import { createStore, State } from '../../store';
 import { UpdateQueryParams, upsertQuery } from '../../store/inputs/helpers';
 
-import { InspectButton } from '.';
+import { InspectButton, InspectButtonContainer, BUTTON_CLASS } from '.';
 import { cloneDeep } from 'lodash/fp';
 
 describe('Inspect Button', () => {
@@ -114,6 +114,36 @@ describe('Inspect Button', () => {
       );
       expect(wrapper.find('.euiButtonIcon').get(0).props.disabled).toBe(true);
     });
+
+    describe('InspectButtonContainer', () => {
+      test('it renders a transparent inspect button by default', async () => {
+        const wrapper = mount(
+          <TestProviderWithoutDragAndDrop store={store}>
+            <InspectButtonContainer>
+              <InspectButton queryId={newQuery.id} title="My title" />
+            </InspectButtonContainer>
+          </TestProviderWithoutDragAndDrop>
+        );
+
+        expect(wrapper.find(`InspectButtonContainer`)).toHaveStyleRule('opacity', '0', {
+          modifier: `.${BUTTON_CLASS}`,
+        });
+      });
+
+      test('it renders an opaque inspect button when it has mouse focus', async () => {
+        const wrapper = mount(
+          <TestProviderWithoutDragAndDrop store={store}>
+            <InspectButtonContainer>
+              <InspectButton queryId={newQuery.id} title="My title" />
+            </InspectButtonContainer>
+          </TestProviderWithoutDragAndDrop>
+        );
+
+        expect(wrapper.find(`InspectButtonContainer`)).toHaveStyleRule('opacity', '1', {
+          modifier: `:hover .${BUTTON_CLASS}`,
+        });
+      });
+    });
   });
 
   describe('Modal Inspect - happy path', () => {
diff --git a/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap b/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap
index 1c1a28f31902..ca06c484dc8a 100644
--- a/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap
+++ b/x-pack/legacy/plugins/siem/public/components/stat_items/__snapshots__/index.test.tsx.snap
@@ -38,18 +38,18 @@ exports[`Stat Items Component disable charts it renders the default widget 1`] =
         data-test-subj="stat-item"
       >
         <EuiFlexItem
-          className="sc-AykKG dLVTBE"
+          className="sc-AykKG krmHWP"
           data-test-subj="stat-item"
         >
           <div
-            className="euiFlexItem sc-AykKG dLVTBE"
+            className="euiFlexItem sc-AykKG krmHWP"
             data-test-subj="stat-item"
           >
             <InspectButtonContainer
               show={true}
             >
               <div
-                className="sc-AykKF iWeiGa"
+                className="sc-AykKF jsEnvB"
               >
                 <EuiPanel>
                   <div
@@ -87,9 +87,17 @@ exports[`Stat Items Component disable charts it renders the default widget 1`] =
                               queryId="statItems"
                               title="KPI HOSTS"
                             >
-                              <div
-                                className="sc-AykKF kJqrPG"
-                                data-test-subj="transparent-inspect-container"
+                              <Memo(InspectButtonComponent)
+                                id=""
+                                inspect={null}
+                                inspectIndex={0}
+                                isInspected={false}
+                                loading={false}
+                                queryId="statItems"
+                                refetch={null}
+                                selectedInspectIndex={0}
+                                setIsInspected={[Function]}
+                                title="KPI HOSTS"
                               >
                                 <EuiButtonIcon
                                   aria-label="Inspect"
@@ -158,10 +166,10 @@ exports[`Stat Items Component disable charts it renders the default widget 1`] =
                           key="stat-items-field-hosts"
                         >
                           <EuiFlexItem
-                            className="sc-AykKG dLVTBE"
+                            className="sc-AykKG krmHWP"
                           >
                             <div
-                              className="euiFlexItem sc-AykKG dLVTBE"
+                              className="euiFlexItem sc-AykKG krmHWP"
                             >
                               <EuiFlexGroup
                                 alignItems="center"
@@ -173,22 +181,22 @@ exports[`Stat Items Component disable charts it renders the default widget 1`] =
                                 >
                                   <FlexItem>
                                     <EuiFlexItem
-                                      className="sc-AykKG dLVTBE"
+                                      className="sc-AykKG krmHWP"
                                     >
                                       <div
-                                        className="euiFlexItem sc-AykKG dLVTBE"
+                                        className="euiFlexItem sc-AykKG krmHWP"
                                       >
                                         <StatValue>
                                           <EuiTitle
-                                            className="sc-AykKH eFqnYS"
+                                            className="sc-AykKH eSsePF"
                                           >
                                             <p
-                                              className="euiTitle euiTitle--medium sc-AykKH eFqnYS"
+                                              className="euiTitle euiTitle--medium sc-AykKH eSsePF"
                                               data-test-subj="stat-title"
                                             >
                                               <EmptyWrapper>
                                                 <span
-                                                  className="sc-AykKC inVqby"
+                                                  className="sc-AykKC bGtoQZ"
                                                 >
                                                   —
                                                 </span>
@@ -264,18 +272,18 @@ exports[`Stat Items Component disable charts it renders the default widget 2`] =
         data-test-subj="stat-item"
       >
         <EuiFlexItem
-          className="sc-AykKG dLVTBE"
+          className="sc-AykKG krmHWP"
           data-test-subj="stat-item"
         >
           <div
-            className="euiFlexItem sc-AykKG dLVTBE"
+            className="euiFlexItem sc-AykKG krmHWP"
             data-test-subj="stat-item"
           >
             <InspectButtonContainer
               show={true}
             >
               <div
-                className="sc-AykKF iWeiGa"
+                className="sc-AykKF jsEnvB"
               >
                 <EuiPanel>
                   <div
@@ -313,9 +321,17 @@ exports[`Stat Items Component disable charts it renders the default widget 2`] =
                               queryId="statItems"
                               title="KPI HOSTS"
                             >
-                              <div
-                                className="sc-AykKF kJqrPG"
-                                data-test-subj="transparent-inspect-container"
+                              <Memo(InspectButtonComponent)
+                                id=""
+                                inspect={null}
+                                inspectIndex={0}
+                                isInspected={false}
+                                loading={false}
+                                queryId="statItems"
+                                refetch={null}
+                                selectedInspectIndex={0}
+                                setIsInspected={[Function]}
+                                title="KPI HOSTS"
                               >
                                 <EuiButtonIcon
                                   aria-label="Inspect"
@@ -384,10 +400,10 @@ exports[`Stat Items Component disable charts it renders the default widget 2`] =
                           key="stat-items-field-hosts"
                         >
                           <EuiFlexItem
-                            className="sc-AykKG dLVTBE"
+                            className="sc-AykKG krmHWP"
                           >
                             <div
-                              className="euiFlexItem sc-AykKG dLVTBE"
+                              className="euiFlexItem sc-AykKG krmHWP"
                             >
                               <EuiFlexGroup
                                 alignItems="center"
@@ -400,22 +416,22 @@ exports[`Stat Items Component disable charts it renders the default widget 2`] =
                                   0
                                   <FlexItem>
                                     <EuiFlexItem
-                                      className="sc-AykKG dLVTBE"
+                                      className="sc-AykKG krmHWP"
                                     >
                                       <div
-                                        className="euiFlexItem sc-AykKG dLVTBE"
+                                        className="euiFlexItem sc-AykKG krmHWP"
                                       >
                                         <StatValue>
                                           <EuiTitle
-                                            className="sc-AykKH eFqnYS"
+                                            className="sc-AykKH eSsePF"
                                           >
                                             <p
-                                              className="euiTitle euiTitle--medium sc-AykKH eFqnYS"
+                                              className="euiTitle euiTitle--medium sc-AykKH eSsePF"
                                               data-test-subj="stat-title"
                                             >
                                               <EmptyWrapper>
                                                 <span
-                                                  className="sc-AykKC inVqby"
+                                                  className="sc-AykKC bGtoQZ"
                                                 >
                                                   —
                                                 </span>
@@ -560,18 +576,18 @@ exports[`Stat Items Component rendering kpis with charts it renders the default
       data-test-subj="stat-item"
     >
       <EuiFlexItem
-        className="sc-AykKG dLVTBE"
+        className="sc-AykKG krmHWP"
         data-test-subj="stat-item"
       >
         <div
-          className="euiFlexItem sc-AykKG dLVTBE"
+          className="euiFlexItem sc-AykKG krmHWP"
           data-test-subj="stat-item"
         >
           <InspectButtonContainer
             show={true}
           >
             <div
-              className="sc-AykKF bIbcmW"
+              className="sc-AykKF kHKSBZ"
             >
               <EuiPanel>
                 <div
@@ -609,9 +625,17 @@ exports[`Stat Items Component rendering kpis with charts it renders the default
                             queryId="statItems"
                             title="KPI UNIQUE_PRIVATE_IPS"
                           >
-                            <div
-                              className="sc-AykKF gblzeK"
-                              data-test-subj="transparent-inspect-container"
+                            <Memo(InspectButtonComponent)
+                              id=""
+                              inspect={null}
+                              inspectIndex={0}
+                              isInspected={false}
+                              loading={false}
+                              queryId="statItems"
+                              refetch={null}
+                              selectedInspectIndex={0}
+                              setIsInspected={[Function]}
+                              title="KPI UNIQUE_PRIVATE_IPS"
                             >
                               <EuiButtonIcon
                                 aria-label="Inspect"
@@ -680,10 +704,10 @@ exports[`Stat Items Component rendering kpis with charts it renders the default
                         key="stat-items-field-uniqueSourceIps"
                       >
                         <EuiFlexItem
-                          className="sc-AykKG dLVTBE"
+                          className="sc-AykKG krmHWP"
                         >
                           <div
-                            className="euiFlexItem sc-AykKG dLVTBE"
+                            className="euiFlexItem sc-AykKG krmHWP"
                           >
                             <EuiFlexGroup
                               alignItems="center"
@@ -697,11 +721,11 @@ exports[`Stat Items Component rendering kpis with charts it renders the default
                                   grow={false}
                                 >
                                   <EuiFlexItem
-                                    className="sc-AykKG dLVTBE"
+                                    className="sc-AykKG krmHWP"
                                     grow={false}
                                   >
                                     <div
-                                      className="euiFlexItem euiFlexItem--flexGrowZero sc-AykKG dLVTBE"
+                                      className="euiFlexItem euiFlexItem--flexGrowZero sc-AykKG krmHWP"
                                     >
                                       <EuiIcon
                                         color="#DB1374"
@@ -744,17 +768,17 @@ exports[`Stat Items Component rendering kpis with charts it renders the default
                                 </FlexItem>
                                 <FlexItem>
                                   <EuiFlexItem
-                                    className="sc-AykKG dLVTBE"
+                                    className="sc-AykKG krmHWP"
                                   >
                                     <div
-                                      className="euiFlexItem sc-AykKG dLVTBE"
+                                      className="euiFlexItem sc-AykKG krmHWP"
                                     >
                                       <StatValue>
                                         <EuiTitle
-                                          className="sc-AykKH eFqnYS"
+                                          className="sc-AykKH eSsePF"
                                         >
                                           <p
-                                            className="euiTitle euiTitle--medium sc-AykKH eFqnYS"
+                                            className="euiTitle euiTitle--medium sc-AykKH eSsePF"
                                             data-test-subj="stat-title"
                                           >
                                             1,714
@@ -775,10 +799,10 @@ exports[`Stat Items Component rendering kpis with charts it renders the default
                         key="stat-items-field-uniqueDestinationIps"
                       >
                         <EuiFlexItem
-                          className="sc-AykKG dLVTBE"
+                          className="sc-AykKG krmHWP"
                         >
                           <div
-                            className="euiFlexItem sc-AykKG dLVTBE"
+                            className="euiFlexItem sc-AykKG krmHWP"
                           >
                             <EuiFlexGroup
                               alignItems="center"
@@ -792,11 +816,11 @@ exports[`Stat Items Component rendering kpis with charts it renders the default
                                   grow={false}
                                 >
                                   <EuiFlexItem
-                                    className="sc-AykKG dLVTBE"
+                                    className="sc-AykKG krmHWP"
                                     grow={false}
                                   >
                                     <div
-                                      className="euiFlexItem euiFlexItem--flexGrowZero sc-AykKG dLVTBE"
+                                      className="euiFlexItem euiFlexItem--flexGrowZero sc-AykKG krmHWP"
                                     >
                                       <EuiIcon
                                         color="#490092"
@@ -839,17 +863,17 @@ exports[`Stat Items Component rendering kpis with charts it renders the default
                                 </FlexItem>
                                 <FlexItem>
                                   <EuiFlexItem
-                                    className="sc-AykKG dLVTBE"
+                                    className="sc-AykKG krmHWP"
                                   >
                                     <div
-                                      className="euiFlexItem sc-AykKG dLVTBE"
+                                      className="euiFlexItem sc-AykKG krmHWP"
                                     >
                                       <StatValue>
                                         <EuiTitle
-                                          className="sc-AykKH eFqnYS"
+                                          className="sc-AykKH eSsePF"
                                         >
                                           <p
-                                            className="euiTitle euiTitle--medium sc-AykKH eFqnYS"
+                                            className="euiTitle euiTitle--medium sc-AykKH eSsePF"
                                             data-test-subj="stat-title"
                                           >
                                             2,359
@@ -879,10 +903,10 @@ exports[`Stat Items Component rendering kpis with charts it renders the default
                     >
                       <FlexItem>
                         <EuiFlexItem
-                          className="sc-AykKG dLVTBE"
+                          className="sc-AykKG krmHWP"
                         >
                           <div
-                            className="euiFlexItem sc-AykKG dLVTBE"
+                            className="euiFlexItem sc-AykKG krmHWP"
                           >
                             <BarChart
                               barChart={
@@ -938,10 +962,10 @@ exports[`Stat Items Component rendering kpis with charts it renders the default
                       </FlexItem>
                       <FlexItem>
                         <EuiFlexItem
-                          className="sc-AykKG dLVTBE"
+                          className="sc-AykKG krmHWP"
                         >
                           <div
-                            className="euiFlexItem sc-AykKG dLVTBE"
+                            className="euiFlexItem sc-AykKG krmHWP"
                           >
                             <AreaChart
                               areaChart={
diff --git a/x-pack/package.json b/x-pack/package.json
index dc2490e598ff..1e20157831ba 100644
--- a/x-pack/package.json
+++ b/x-pack/package.json
@@ -329,7 +329,7 @@
     "squel": "^5.13.0",
     "stats-lite": "^2.2.0",
     "style-it": "^2.1.3",
-    "styled-components": "5.0.0-rc.3",
+    "styled-components": "beta",
     "suricata-sid-db": "^1.0.2",
     "tinycolor2": "1.4.1",
     "tinymath": "1.2.1",
diff --git a/yarn.lock b/yarn.lock
index 4d88580613a3..8e9bea248c4f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -26896,10 +26896,10 @@ style-loader@0.23.1, style-loader@^0.23.1:
     loader-utils "^1.1.0"
     schema-utils "^1.0.0"
 
-styled-components@5.0.0-rc.3:
-  version "5.0.0-rc.3"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.0.0-rc.3.tgz#f5916a1892c658887016a3c96f3c96e97e92021a"
-  integrity sha512-FPezIfX26DigdMspk4rtL2Z4KMtgHcUK56Zb/XTXfs4XXBPFZefTNpi+pQEOkWRmE5r5dO9vzT7Hd+b78NtMLA==
+styled-components@beta:
+  version "5.0.0-rc.2"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.0.0-rc.3.tgz#6c44570ff202f47a1a688d6f1249bc079b10a958"
+  integrity sha512-dRMU2Ka12F2qbJK6XMDVy1H6KOXpbf7nAKReV0uIikCdW/zbO2K3C+XUCL0EqTVeevugFBJUACZUoTc7ShKsTg==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/traverse" "^7.4.5"
@@ -26908,7 +26908,6 @@ styled-components@5.0.0-rc.3:
     "@emotion/unitless" "^0.7.4"
     babel-plugin-styled-components ">= 1"
     css-to-react-native "^3.0.0"
-    hoist-non-react-statics "^3.0.0"
     shallowequal "^1.1.0"
     stylis-rule-sheet "^0.0.10"
     supports-color "^5.5.0"