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

Closes #84521 Signed-off-by: Tyler Smalley <tyler.smalley@elastic.co>
2025-04-24 17:59:23 -04:00 · 2020-12-02 19:29:16 -08:00 · 2020-12-02 19:29:16 -08:00 · 874df03153
commit 874df03153
parent b8b889c644
6 changed files with 56 additions and 98 deletions
--- a/package.json
+++ b/package.json
@ -522,7 +522,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",
@ -779,7 +778,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",
--- a/x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx
+++ b/x-pack/plugins/apm/public/components/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}
--- 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();
  });
--- 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 },
-                }}
-              />
-
-              {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>
-        );
+    <div
+      style={{
+        position: 'sticky',
+        top: 0,
+        borderBottom: `1px solid ${theme.eui.euiColorMediumShade}`,
+        height: px(margins.top),
+        zIndex: 2,
+        width: '100%',
      }}
-    </Sticky>
+    >
+      <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}
+          />
+        )}
+
+        {marks.map((mark) => (
+          <Marker key={mark.id} mark={mark} x={xScale(mark.offset)} />
+        ))}
+      </XYPlot>
+    </div>
  );
 }
--- a/x-pack/plugins/apm/public/components/shared/charts/Timeline/snapshots/Timeline.test.tsx.snap
+++ b/x-pack/plugins/apm/public/components/shared/charts/Timeline/snapshots/Timeline.test.tsx.snap
@ -2,18 +2,11 @@

 exports[`Timeline should render with data 1`] = `
 <div
-  onScroll={[Function]}
-  onTouchEnd={[Function]}
-  onTouchMove={[Function]}
-  onTouchStart={[Function]}
->
-  <div
-    style={
-      Object {
-        "height": "100%",
-        "width": "100%",
-      }
+  style={
+    Object {
+      "height": "100%",
+      "width": "100%",
    }
-  />
-</div>
+  }
+/>
 `;
--- a/yarn.lock
+++ b/yarn.lock
@ -5591,13 +5591,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"
@ -23026,7 +23019,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==
@ -23704,14 +23697,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"