Skip to content

Commit b281e38

Browse files
author
Tyler Smalley
committed
[APM] Removes react-sticky dependency in favor of using CSS (#84589)
Closes #84521 Signed-off-by: Tyler Smalley <tyler.smalley@elastic.co>
1 parent c75ea04 commit b281e38

File tree

6 files changed

+55
-97
lines changed

6 files changed

+55
-97
lines changed

‎package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -522,7 +522,6 @@
522522
"@types/react-resize-detector": "^4.0.1",
523523
"@types/react-router": "^5.1.7",
524524
"@types/react-router-dom": "^5.1.5",
525-
"@types/react-sticky": "^6.0.3",
526525
"@types/react-test-renderer": "^16.9.1",
527526
"@types/react-virtualized": "^9.18.7",
528527
"@types/read-pkg": "^4.0.0",
@@ -779,7 +778,6 @@
779778
"react-router-redux": "^4.0.8",
780779
"react-shortcuts": "^2.0.0",
781780
"react-sizeme": "^2.3.6",
782-
"react-sticky": "^6.0.3",
783781
"react-syntax-highlighter": "^5.7.0",
784782
"react-test-renderer": "^16.12.0",
785783
"react-tiny-virtual-list": "^2.2.0",

‎x-pack/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/index.tsx‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ import { i18n } from '@kbn/i18n';
99
import { History, Location } from 'history';
1010
import React, { useState } from 'react';
1111
import { useHistory } from 'react-router-dom';
12-
import { StickyContainer } from 'react-sticky';
1312
import styled from 'styled-components';
1413
import { px } from '../../../../../../style/variables';
1514
import { Timeline } from '../../../../../shared/charts/Timeline';
@@ -128,7 +127,7 @@ export function Waterfall({
128127
})}
129128
/>
130129
)}
131-
<StickyContainer>
130+
<div>
132131
<div style={{ display: 'flex' }}>
133132
<EuiButtonEmpty
134133
style={{ zIndex: 3, position: 'absolute' }}
@@ -147,7 +146,7 @@ export function Waterfall({
147146
<WaterfallItemsContainer paddingTop={TIMELINE_MARGINS.top}>
148147
{renderItems(waterfall.childrenByParentId)}
149148
</WaterfallItemsContainer>
150-
</StickyContainer>
149+
</div>
151150

152151
<WaterfallFlyout
153152
waterfallItemId={waterfallItemId}

‎x-pack/plugins/apm/public/components/shared/charts/Timeline/Timeline.test.tsx‎

Lines changed: 2 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@
55
*/
66

77
import React from 'react';
8-
import { StickyContainer } from 'react-sticky';
98
import {
109
disableConsoleWarning,
1110
mountWithTheme,
@@ -61,11 +60,7 @@ describe('Timeline', () => {
6160
],
6261
};
6362

64-
const wrapper = mountWithTheme(
65-
<StickyContainer>
66-
<Timeline {...props} />
67-
</StickyContainer>
68-
);
63+
const wrapper = mountWithTheme(<Timeline {...props} />);
6964

7065
expect(toJson(wrapper)).toMatchSnapshot();
7166
});
@@ -84,12 +79,7 @@ describe('Timeline', () => {
8479
},
8580
};
8681

87-
const mountTimeline = () =>
88-
mountWithTheme(
89-
<StickyContainer>
90-
<Timeline {...props} />
91-
</StickyContainer>
92-
);
82+
const mountTimeline = () => mountWithTheme(<Timeline {...props} />);
9383

9484
expect(mountTimeline).not.toThrow();
9585
});

‎x-pack/plugins/apm/public/components/shared/charts/Timeline/TimelineAxis.tsx‎

Lines changed: 44 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66

77
import React, { ReactNode } from 'react';
88
import { inRange } from 'lodash';
9-
import { Sticky } from 'react-sticky';
109
import { XAxis, XYPlot } from 'react-vis';
1110
import { getDurationFormatter } from '../../../../../common/utils/formatters';
1211
import { useTheme } from '../../../../hooks/use_theme';
@@ -54,57 +53,51 @@ export function TimelineAxis({
5453
const topTraceDurationFormatted = tickFormatter(topTraceDuration).formatted;
5554

5655
return (
57-
<Sticky disableCompensation>
58-
{({ style }) => {
59-
return (
60-
<div
61-
style={{
62-
position: 'absolute',
63-
borderBottom: `1px solid ${theme.eui.euiColorMediumShade}`,
64-
height: px(margins.top),
65-
zIndex: 2,
66-
width: '100%',
67-
...style,
68-
}}
69-
>
70-
<XYPlot
71-
dontCheckIfEmpty
72-
width={width}
73-
height={margins.top}
74-
margin={{
75-
top: margins.top,
76-
left: margins.left,
77-
right: margins.right,
78-
}}
79-
xDomain={xDomain}
80-
>
81-
<XAxis
82-
hideLine
83-
orientation="top"
84-
tickSize={0}
85-
tickValues={xAxisTickValues}
86-
tickFormat={(time?: number) => tickFormatter(time).formatted}
87-
tickPadding={20}
88-
style={{
89-
text: { fill: theme.eui.euiColorDarkShade },
90-
}}
91-
/>
56+
<div
57+
style={{
58+
position: 'sticky',
59+
top: 0,
60+
borderBottom: `1px solid ${theme.eui.euiColorMediumShade}`,
61+
height: px(margins.top),
62+
zIndex: 2,
63+
width: '100%',
64+
}}
65+
>
66+
<XYPlot
67+
dontCheckIfEmpty
68+
width={width}
69+
height={margins.top}
70+
margin={{
71+
top: margins.top,
72+
left: margins.left,
73+
right: margins.right,
74+
}}
75+
xDomain={xDomain}
76+
>
77+
<XAxis
78+
hideLine
79+
orientation="top"
80+
tickSize={0}
81+
tickValues={xAxisTickValues}
82+
tickFormat={(time?: number) => tickFormatter(time).formatted}
83+
tickPadding={20}
84+
style={{
85+
text: { fill: theme.eui.euiColorDarkShade },
86+
}}
87+
/>
9288

93-
{topTraceDuration > 0 && (
94-
<LastTickValue
95-
x={xScale(topTraceDuration)}
96-
value={topTraceDurationFormatted}
97-
marginTop={28}
98-
/>
99-
)}
89+
{topTraceDuration > 0 && (
90+
<LastTickValue
91+
x={xScale(topTraceDuration)}
92+
value={topTraceDurationFormatted}
93+
marginTop={28}
94+
/>
95+
)}
10096

101-
{marks.map((mark) => (
102-
<Marker key={mark.id} mark={mark} x={xScale(mark.offset)} />
103-
))}
104-
</XYPlot>
105-
</div>
106-
);
107-
}}
108-
</Sticky>
97+
{marks.map((mark) => (
98+
<Marker key={mark.id} mark={mark} x={xScale(mark.offset)} />
99+
))}
100+
</XYPlot>
101+
</div>
109102
);
110103
}

‎x-pack/plugins/apm/public/components/shared/charts/Timeline/__snapshots__/Timeline.test.tsx.snap‎

Lines changed: 6 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎yarn.lock‎

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5591,13 +5591,6 @@
55915591
"@types/history" "*"
55925592
"@types/react" "*"
55935593

5594-
"@types/react-sticky@^6.0.3":
5595-
version "6.0.3"
5596-
resolved "https://registry.yarnpkg.com/@types/react-sticky/-/react-sticky-6.0.3.tgz#94d16a951467b29ad44c224081d9503e7e590434"
5597-
integrity sha512-tW0Y1hTr2Tao4yX58iKl0i7BaqrdObGXAzsyzd8VGVrWVEgbQuV6P6QKVd/kFC7FroXyelftiVNJ09pnfkcjww==
5598-
dependencies:
5599-
"@types/react" "*"
5600-
56015594
"@types/react-syntax-highlighter@11.0.4":
56025595
version "11.0.4"
56035596
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:
2302623019
resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.2.tgz#bd44c708188f2e84c810bf55fcea9231bcaed8a0"
2302723020
integrity sha512-VhlMZmGy6A6hrkJWHLNTGl5gtgMUm+xfGza6wbwnE914yeQ5Ybm18vgM734RZhMgfw4tacUrWseGZlpUrrakEQ==
2302823021

23029-
raf@^3.1.0, raf@^3.3.0, raf@^3.4.1:
23022+
raf@^3.1.0, raf@^3.4.1:
2303023023
version "3.4.1"
2303123024
resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
2303223025
integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
@@ -23704,14 +23697,6 @@ react-sizeme@^2.6.7:
2370423697
shallowequal "^1.1.0"
2370523698
throttle-debounce "^2.1.0"
2370623699

23707-
react-sticky@^6.0.3:
23708-
version "6.0.3"
23709-
resolved "https://registry.yarnpkg.com/react-sticky/-/react-sticky-6.0.3.tgz#7a18b643e1863da113d7f7036118d2a75d9ecde4"
23710-
integrity sha512-LNH4UJlRatOqo29/VHxDZOf6fwbgfgcHO4mkEFvrie5FuaZCSTGtug5R8NGqJ0kSnX8gHw8qZN37FcvnFBJpTQ==
23711-
dependencies:
23712-
prop-types "^15.5.8"
23713-
raf "^3.3.0"
23714-
2371523700
react-style-singleton@^2.1.0:
2371623701
version "2.1.0"
2371723702
resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.0.tgz#7396885332e9729957f9df51f08cadbfc164e1c4"

0 commit comments

Comments
 (0)