Explore TraceView: Remove 'Scroll to top' button (#77158)

* Remove button from Explore but keep in plugins

* Remove topOfViewRef from trace view container

public/app/features/explore/Explore.tsx

@@ -501,7 +501,6 @@ export class Explore extends React.PureComponent<Props, ExploreState> {
             splitOpenFn={this.onSplitOpen('traceView')}
             scrollElement={this.scrollElement}
             queryResponse={queryResponse}
-            topOfViewRef={this.topOfViewRef}
           />
         </ContentOutlineItem>
       )

public/app/features/explore/TraceView/TraceView.tsx

@@ -64,8 +64,8 @@ type Props = {
   traceProp: Trace;
   queryResponse: PanelData;
   datasource: DataSourceApi<DataQuery, DataSourceJsonData, {}> | undefined;
-  topOfViewRef: RefObject<HTMLDivElement>;
-  topOfViewRefType: TopOfViewRefType;
+  topOfViewRef?: RefObject<HTMLDivElement>;
+  topOfViewRefType?: TopOfViewRefType;
   createSpanLink?: SpanLinkFunc;
 };
 

public/app/features/explore/TraceView/TraceViewContainer.test.tsx

@@ -1,6 +1,6 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import React, { createRef } from 'react';
+import React from 'react';
 import { Provider } from 'react-redux';
 
 import { getDefaultTimeRange, LoadingState } from '@grafana/data';
@@ -24,17 +24,10 @@ function renderTraceViewContainer(frames = [frameOld]) {
     series: [],
     timeRange: getDefaultTimeRange(),
   };
-  const topOfViewRef = createRef<HTMLDivElement>();
 
   const { container, baseElement } = render(
     <Provider store={store}>
-      <TraceViewContainer
-        exploreId="left"
-        dataFrames={frames}
-        splitOpenFn={() => {}}
-        queryResponse={mockPanelData}
-        topOfViewRef={topOfViewRef}
-      />
+      <TraceViewContainer exploreId="left" dataFrames={frames} splitOpenFn={() => {}} queryResponse={mockPanelData} />
     </Provider>
   );
   return {

public/app/features/explore/TraceView/TraceViewContainer.tsx

@@ -1,11 +1,10 @@
-import React, { RefObject, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { DataFrame, SplitOpen, PanelData } from '@grafana/data';
 import { PanelChrome } from '@grafana/ui/src/components/PanelChrome/PanelChrome';
 import { StoreState, useSelector } from 'app/types';
 
 import { TraceView } from './TraceView';
-import { TopOfViewRefType } from './components/TraceTimelineViewer/VirtualizedTraceView';
 import { transformDataFrames } from './utils/transform';
 
 interface Props {
@@ -14,13 +13,12 @@ interface Props {
   exploreId: string;
   scrollElement?: Element;
   queryResponse: PanelData;
-  topOfViewRef: RefObject<HTMLDivElement>;
 }
 
 export function TraceViewContainer(props: Props) {
   // At this point we only show single trace
   const frame = props.dataFrames[0];
-  const { dataFrames, splitOpenFn, exploreId, scrollElement, topOfViewRef, queryResponse } = props;
+  const { dataFrames, splitOpenFn, exploreId, scrollElement, queryResponse } = props;
   const traceProp = useMemo(() => transformDataFrames(frame), [frame]);
   const datasource = useSelector(
     (state: StoreState) => state.explore.panes[props.exploreId]?.datasourceInstance ?? undefined
@@ -40,8 +38,6 @@ export function TraceViewContainer(props: Props) {
         traceProp={traceProp}
         queryResponse={queryResponse}
         datasource={datasource}
-        topOfViewRef={topOfViewRef}
-        topOfViewRefType={TopOfViewRefType.Explore}
       />
     </PanelChrome>
   );

public/app/features/explore/TraceView/components/TraceTimelineViewer/VirtualizedTraceView.test.tsx

@@ -25,7 +25,7 @@ import VirtualizedTraceView, { VirtualizedTraceViewProps } from './VirtualizedTr
 jest.mock('./SpanTreeOffset');
 
 const trace = transformTraceData(traceGenerator.trace({ numberOfSpans: 2 }))!;
-const topOfExploreViewRef = jest.fn();
+
 let props = {
   childrenHiddenIDs: new Set(),
   childrenToggle: jest.fn(),
@@ -41,7 +41,7 @@ let props = {
   spanNameColumnWidth: 0.5,
   trace,
   uiFind: 'uiFind',
-  topOfExploreViewRef,
+  topOfViewRef: jest.fn(),
 } as unknown as VirtualizedTraceViewProps;
 
 describe('<VirtualizedTraceViewImpl>', () => {

public/app/features/explore/TraceView/components/TraceTimelineViewer/VirtualizedTraceView.tsx

@@ -566,12 +566,14 @@ export class UnthemedVirtualizedTraceView extends React.Component<VirtualizedTra
           windowScroller={false}
           scrollElement={scrollElement}
         />
-        <ToolbarButton
-          className={styles.scrollToTopButton}
-          onClick={this.scrollToTop}
-          title="Scroll to top"
-          icon="arrow-up"
-        ></ToolbarButton>
+        {this.props.topOfViewRef && (
+          <ToolbarButton
+            className={styles.scrollToTopButton}
+            onClick={this.scrollToTop}
+            title="Scroll to top"
+            icon="arrow-up"
+          ></ToolbarButton>
+        )}
       </>
     );
   }