TraceView: Remove unnecessary code from header (#63114)

* Remove unecessary code

* Update tests

* Remove import

* Remove unused import

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

@@ -1,5 +1,5 @@
 import { css } from '@emotion/css';
-import React, { RefObject, useCallback, useMemo, useState } from 'react';
+import React, { RefObject, useMemo, useState } from 'react';
 
 import {
   DataFrame,
@@ -90,10 +90,6 @@ export function TraceView(props: Props) {
    * Keeps state of resizable name column width
    */
   const [spanNameColumnWidth, setSpanNameColumnWidth] = useState(0.25);
-  /**
-   * State of the top minimap, slim means it is collapsed.
-   */
-  const [slim, setSlim] = useState(false);
 
   const [focusedSpanId, createFocusSpanLink] = useFocusSpanLink({
     refId: props.dataFrames[0]?.refId,
@@ -131,7 +127,6 @@ export function TraceView(props: Props) {
       }),
     [props.splitOpenFn, traceToLogsOptions, traceToMetricsOptions, props.dataFrames, createFocusSpanLink, traceProp]
   );
-  const onSlimViewClicked = useCallback(() => setSlim(!slim), [slim]);
   const timeZone = useSelector((state) => getTimeZone(state.user));
   const datasourceType = datasource ? datasource?.type : 'unknown';
 
@@ -140,12 +135,6 @@ export function TraceView(props: Props) {
       {props.dataFrames?.length && props.dataFrames[0]?.meta?.preferredVisualisationType === 'trace' && traceProp ? (
         <>
           <TracePageHeader
-            canCollapse={false}
-            hideMap={false}
-            hideSummary={false}
-            onSlimViewClicked={onSlimViewClicked}
-            onTraceGraphViewClicked={noop}
-            slimView={slim}
             trace={traceProp}
             updateNextViewRangeTime={updateNextViewRangeTime}
             updateViewRangeTime={updateViewRangeTime}

public/app/features/explore/TraceView/components/TracePageHeader/TracePageHeader.test.tsx

@@ -82,42 +82,17 @@ describe('TracePageHeader test', () => {
     expect(screen.getByText(/Reset Selection/)).toBeInTheDocument();
   });
 
-  describe('observes the visibility toggles for various UX elements', () => {
+  it('shows the summary', () => {
-    it('hides the minimap when hideMap === true', () => {
+    const { rerender } = setup();
-      setup({ hideMap: true } as TracePageHeaderEmbedProps);
-      expect(screen.queryByText(/Reset Selection/)).not.toBeInTheDocument();
-    });
 
-    it('hides the summary when hideSummary === true', () => {
+    rerender(
-      const { rerender } = setup({ hideSummary: false } as TracePageHeaderEmbedProps);
+      <TracePageHeader
-      expect(screen.queryAllByRole('listitem')).toHaveLength(5);
+        {...({
-
+          trace: trace,
-      rerender(<TracePageHeader {...({ hideSummary: false, trace: null } as TracePageHeaderEmbedProps)} />);
+          viewRange: { time: { current: [10, 20] } },
-      expect(screen.queryAllByRole('listitem')).toHaveLength(0);
+        } as TracePageHeaderEmbedProps)}
-
+      />
-      rerender(
+    );
-        <TracePageHeader
+    expect(screen.queryAllByRole('listitem')).toHaveLength(5);
-          {...({
-            trace: trace,
-            hideSummary: true,
-            hideMap: false,
-            viewRange: { time: { current: [10, 20] } },
-          } as TracePageHeaderEmbedProps)}
-        />
-      );
-      expect(screen.queryAllByRole('listitem')).toHaveLength(0);
-
-      rerender(
-        <TracePageHeader
-          {...({
-            trace: trace,
-            hideSummary: false,
-            hideMap: false,
-            viewRange: { time: { current: [10, 20] } },
-          } as TracePageHeaderEmbedProps)}
-        />
-      );
-      expect(screen.queryAllByRole('listitem')).toHaveLength(5);
-    });
   });
 });

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

@@ -18,7 +18,7 @@ import { get as _get, maxBy as _maxBy, values as _values } from 'lodash';
 import * as React from 'react';
 
 import { dateTimeFormat, GrafanaTheme2, TimeZone } from '@grafana/data';
-import { Icon, useStyles2 } from '@grafana/ui';
+import { useStyles2 } from '@grafana/ui';
 
 import ExternalLinks from '../common/ExternalLinks';
 import LabeledList from '../common/LabeledList';
@@ -69,33 +69,6 @@ const getStyles = (theme: GrafanaTheme2) => {
         border-color: #ccc;
       }
     `,
-    TracePageHeaderTitleLink: css`
-      label: TracePageHeaderTitleLink;
-      align-items: center;
-      display: flex;
-      flex: 1;
-
-      &:hover * {
-        text-decoration: underline;
-      }
-      &:hover > *,
-      &:hover small {
-        text-decoration: none;
-      }
-      /* Adapt styles when changing from a element into button */
-      background: transparent;
-      text-align: left;
-      border: none;
-    `,
-    TracePageHeaderDetailToggle: css`
-      label: TracePageHeaderDetailToggle;
-      font-size: 2.5rem;
-      transition: transform 0.07s ease-out;
-    `,
-    TracePageHeaderDetailToggleExpanded: css`
-      label: TracePageHeaderDetailToggleExpanded;
-      transform: rotate(90deg);
-    `,
     TracePageHeaderTitle: css`
       label: TracePageHeaderTitle;
       color: inherit;
@@ -105,10 +78,6 @@ const getStyles = (theme: GrafanaTheme2) => {
       margin: 0 0 0 0.5em;
       padding-bottom: 0.5em;
     `,
-    TracePageHeaderTitleCollapsible: css`
-      label: TracePageHeaderTitleCollapsible;
-      margin-left: 0;
-    `,
     TracePageHeaderOverviewItems: css`
       label: TracePageHeaderOverviewItems;
       border-bottom: 1px solid #e4e4e4;
@@ -140,12 +109,6 @@ const getStyles = (theme: GrafanaTheme2) => {
 };
 
 export type TracePageHeaderEmbedProps = {
-  canCollapse: boolean;
-  hideMap: boolean;
-  hideSummary: boolean;
-  onSlimViewClicked: () => void;
-  onTraceGraphViewClicked: () => void;
-  slimView: boolean;
   trace: Trace | null;
   updateNextViewRangeTime: (update: ViewRangeTimeUpdate) => void;
   updateViewRangeTime: TUpdateViewRangeTimeFunction;
@@ -194,18 +157,7 @@ export const HEADER_ITEMS = [
 ];
 
 export default function TracePageHeader(props: TracePageHeaderEmbedProps) {
-  const {
+  const { trace, updateNextViewRangeTime, updateViewRangeTime, viewRange, timeZone } = props;
-    canCollapse,
-    hideMap,
-    hideSummary,
-    onSlimViewClicked,
-    slimView,
-    trace,
-    updateNextViewRangeTime,
-    updateViewRangeTime,
-    viewRange,
-    timeZone,
-  } = props;
 
   const styles = useStyles2(getStyles);
   const links = React.useMemo(() => {
@@ -219,16 +171,13 @@ export default function TracePageHeader(props: TracePageHeaderEmbedProps) {
     return null;
   }
 
-  const summaryItems =
+  const summaryItems = HEADER_ITEMS.map((item) => {
-    !hideSummary &&
+    const { renderer, ...rest } = item;
-    !slimView &&
+    return { ...rest, value: renderer(trace, timeZone, styles) };
-    HEADER_ITEMS.map((item) => {
+  });
-      const { renderer, ...rest } = item;
-      return { ...rest, value: renderer(trace, timeZone, styles) };
-    });
 
   const title = (
-    <h1 className={cx(styles.TracePageHeaderTitle, canCollapse && styles.TracePageHeaderTitleCollapsible)}>
+    <h1 className={styles.TracePageHeaderTitle}>
       <TraceName traceName={getTraceName(trace.spans)} />{' '}
       <small className={cx(styles.TracePageHeaderTraceId, uTxMuted)}>{trace.traceID}</small>
     </h1>
@@ -238,36 +187,16 @@ export default function TracePageHeader(props: TracePageHeaderEmbedProps) {
     <header className={styles.TracePageHeader}>
       <div className={styles.TracePageHeaderTitleRow}>
         {links && links.length > 0 && <ExternalLinks links={links} className={styles.TracePageHeaderBack} />}
-        {canCollapse ? (
+        {title}
-          <button
-            type="button"
-            className={styles.TracePageHeaderTitleLink}
-            onClick={onSlimViewClicked}
-            role="switch"
-            aria-checked={!slimView}
-          >
-            <Icon
-              name={'angle-right'}
-              className={cx(
-                styles.TracePageHeaderDetailToggle,
-                !slimView && styles.TracePageHeaderDetailToggleExpanded
-              )}
-            />
-            {title}
-          </button>
-        ) : (
-          title
-        )}
       </div>
       {summaryItems && <LabeledList className={styles.TracePageHeaderOverviewItems} items={summaryItems} />}
-      {!hideMap && !slimView && (
+
-        <SpanGraph
+      <SpanGraph
-          trace={trace}
+        trace={trace}
-          viewRange={viewRange}
+        viewRange={viewRange}
-          updateNextViewRangeTime={updateNextViewRangeTime}
+        updateNextViewRangeTime={updateNextViewRangeTime}
-          updateViewRangeTime={updateViewRangeTime}
+        updateViewRangeTime={updateViewRangeTime}
-        />
+      />
-      )}
     </header>
   );
 }