[APM] Removes react-sticky dependency in favor of using CSS (#84589)

Closes #84521 Signed-off-by: Tyler Smalley <tyler.smalley@elastic.co>
elastic · Dec 3, 2020 · 401047e · 401047e
1 parent 65cbe4c
commit 401047e
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 97 deletions.
diff --git a/package.json b/package.json
@@ -525,7 +525,6 @@
     "@types/react-resize-detector": "^4.0.1",
     "@types/react-router": "^5.1.7",
     "@types/react-router-dom": "^5.1.5",
-    "@types/react-sticky": "^6.0.3",
     "@types/react-test-renderer": "^16.9.1",
     "@types/react-virtualized": "^9.18.7",
     "@types/read-pkg": "^4.0.0",
@@ -782,7 +781,6 @@
     "react-router-redux": "^4.0.8",
     "react-shortcuts": "^2.0.0",
     "react-sizeme": "^2.3.6",
-    "react-sticky": "^6.0.3",
     "react-syntax-highlighter": "^5.7.0",
     "react-test-renderer": "^16.12.0",
     "react-tiny-virtual-list": "^2.2.0",

diff --git a/...nents/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx b/...nents/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx
@@ -9,7 +9,6 @@ import { i18n } from '@kbn/i18n';
 import { History, Location } from 'history';
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import { StickyContainer } from 'react-sticky';
 import styled from 'styled-components';
 import { px } from '../../../../../../style/variables';
 import { Timeline } from '../../../../../shared/charts/Timeline';
@@ -128,7 +127,7 @@ export function Waterfall({
             })}
           />
         )}
-        <StickyContainer>
+        <div>
           <div style={{ display: 'flex' }}>
             <EuiButtonEmpty
               style={{ zIndex: 3, position: 'absolute' }}
@@ -147,7 +146,7 @@ export function Waterfall({
           <WaterfallItemsContainer paddingTop={TIMELINE_MARGINS.top}>
             {renderItems(waterfall.childrenByParentId)}
           </WaterfallItemsContainer>
-        </StickyContainer>
+        </div>
 
         <WaterfallFlyout
           waterfallItemId={waterfallItemId}

diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/Timeline.test.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/Timeline.test.tsx
@@ -5,7 +5,6 @@
  */
 
 import React from 'react';
-import { StickyContainer } from 'react-sticky';
 import {
   disableConsoleWarning,
   mountWithTheme,
@@ -61,11 +60,7 @@ describe('Timeline', () => {
       ],
     };
 
-    const wrapper = mountWithTheme(
-      <StickyContainer>
-        <Timeline {...props} />
-      </StickyContainer>
-    );
+    const wrapper = mountWithTheme(<Timeline {...props} />);
 
     expect(toJson(wrapper)).toMatchSnapshot();
   });
@@ -84,12 +79,7 @@ describe('Timeline', () => {
       },
     };
 
-    const mountTimeline = () =>
-      mountWithTheme(
-        <StickyContainer>
-          <Timeline {...props} />
-        </StickyContainer>
-      );
+    const mountTimeline = () => mountWithTheme(<Timeline {...props} />);
 
     expect(mountTimeline).not.toThrow();
   });

diff --git a/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.tsx b/x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.tsx
@@ -6,7 +6,6 @@
 
 import React, { ReactNode } from 'react';
 import { inRange } from 'lodash';
-import { Sticky } from 'react-sticky';
 import { XAxis, XYPlot } from 'react-vis';
 import { getDurationFormatter } from '../../../../../common/utils/formatters';
 import { useTheme } from '../../../../hooks/use_theme';
@@ -54,57 +53,51 @@ export function TimelineAxis({
   const topTraceDurationFormatted = tickFormatter(topTraceDuration).formatted;
 
   return (
-    <Sticky disableCompensation>
-      {({ style }) => {
-        return (
-          <div
-            style={{
-              position: 'absolute',
-              borderBottom: `1px solid ${theme.eui.euiColorMediumShade}`,
-              height: px(margins.top),
-              zIndex: 2,
-              width: '100%',
-              ...style,
-            }}
-          >
-            <XYPlot
-              dontCheckIfEmpty
-              width={width}
-              height={margins.top}
-              margin={{
-                top: margins.top,
-                left: margins.left,
-                right: margins.right,
-              }}
-              xDomain={xDomain}
-            >
-              <XAxis
-                hideLine
-                orientation="top"
-                tickSize={0}
-                tickValues={xAxisTickValues}
-                tickFormat={(time?: number) => tickFormatter(time).formatted}
-                tickPadding={20}
-                style={{
-                  text: { fill: theme.eui.euiColorDarkShade },
-                }}
-              />
+    <div
+      style={{
+        position: 'sticky',
+        top: 0,
+        borderBottom: `1px solid ${theme.eui.euiColorMediumShade}`,
+        height: px(margins.top),
+        zIndex: 2,
+        width: '100%',
+      }}
+    >
+      <XYPlot
+        dontCheckIfEmpty
+        width={width}
+        height={margins.top}
+        margin={{
+          top: margins.top,
+          left: margins.left,
+          right: margins.right,
+        }}
+        xDomain={xDomain}
+      >
+        <XAxis
+          hideLine
+          orientation="top"
+          tickSize={0}
+          tickValues={xAxisTickValues}
+          tickFormat={(time?: number) => tickFormatter(time).formatted}
+          tickPadding={20}
+          style={{
+            text: { fill: theme.eui.euiColorDarkShade },
+          }}
+        />
 
-              {topTraceDuration > 0 && (
-                <LastTickValue
-                  x={xScale(topTraceDuration)}
-                  value={topTraceDurationFormatted}
-                  marginTop={28}
-                />
-              )}
+        {topTraceDuration > 0 && (
+          <LastTickValue
+            x={xScale(topTraceDuration)}
+            value={topTraceDurationFormatted}
+            marginTop={28}
+          />
+        )}
 
-              {marks.map((mark) => (
-                <Marker key={mark.id} mark={mark} x={xScale(mark.offset)} />
-              ))}
-            </XYPlot>
-          </div>
-        );
-      }}
-    </Sticky>
+        {marks.map((mark) => (
+          <Marker key={mark.id} mark={mark} x={xScale(mark.offset)} />
+        ))}
+      </XYPlot>
+    </div>
   );
 }
diff --git a/...plugins/apm/public/components/shared/charts/Timeline/__snapshots__/Timeline.test.tsx.snap b/...plugins/apm/public/components/shared/charts/Timeline/__snapshots__/Timeline.test.tsx.snap
diff --git a/yarn.lock b/yarn.lock
@@ -5537,13 +5537,6 @@
     "@types/history" "*"
     "@types/react" "*"
 
-"@types/react-sticky@^6.0.3":
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/@types/react-sticky/-/react-sticky-6.0.3.tgz#94d16a951467b29ad44c224081d9503e7e590434"
-  integrity sha512-tW0Y1hTr2Tao4yX58iKl0i7BaqrdObGXAzsyzd8VGVrWVEgbQuV6P6QKVd/kFC7FroXyelftiVNJ09pnfkcjww==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-syntax-highlighter@11.0.4":
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.4.tgz#d86d17697db62f98046874f62fdb3e53a0bbc4cd"
@@ -22892,7 +22885,7 @@ raf-schd@^4.0.0, raf-schd@^4.0.2:
   resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.2.tgz#bd44c708188f2e84c810bf55fcea9231bcaed8a0"
   integrity sha512-VhlMZmGy6A6hrkJWHLNTGl5gtgMUm+xfGza6wbwnE914yeQ5Ybm18vgM734RZhMgfw4tacUrWseGZlpUrrakEQ==
 
-raf@^3.1.0, raf@^3.3.0, raf@^3.4.1:
+raf@^3.1.0, raf@^3.4.1:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
   integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
@@ -23570,14 +23563,6 @@ react-sizeme@^2.6.7:
     shallowequal "^1.1.0"
     throttle-debounce "^2.1.0"
 
-react-sticky@^6.0.3:
-  version "6.0.3"
-  resolved "https://registry.yarnpkg.com/react-sticky/-/react-sticky-6.0.3.tgz#7a18b643e1863da113d7f7036118d2a75d9ecde4"
-  integrity sha512-LNH4UJlRatOqo29/VHxDZOf6fwbgfgcHO4mkEFvrie5FuaZCSTGtug5R8NGqJ0kSnX8gHw8qZN37FcvnFBJpTQ==
-  dependencies:
-    prop-types "^15.5.8"
-    raf "^3.3.0"
-
 react-style-singleton@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.0.tgz#7396885332e9729957f9df51f08cadbfc164e1c4"