From 9962f6961ec68a0eafa60945af947f85bed19b20 Mon Sep 17 00:00:00 2001
From: Andrej Ocenas <mr.ocenas@gmail.com>
Date: Tue, 5 May 2020 12:30:16 +0200
Subject: [PATCH] Tracing: Remove collapsing of header (#24153)

---
 .../grafana-ui/src/themes/ThemeContext.tsx    |  2 +-
 packages/jaeger-ui-components/src/Theme.tsx   | 21 +++++++++++++++++++
 .../src/common/TraceName.tsx                  | 14 +++++++++----
 .../features/explore/TraceView/TraceView.tsx  | 13 ++++++++++--
 4 files changed, 43 insertions(+), 7 deletions(-)

diff --git a/packages/grafana-ui/src/themes/ThemeContext.tsx b/packages/grafana-ui/src/themes/ThemeContext.tsx
index 5e308ec73e4..0ba6f23e9a0 100644
--- a/packages/grafana-ui/src/themes/ThemeContext.tsx
+++ b/packages/grafana-ui/src/themes/ThemeContext.tsx
@@ -35,7 +35,7 @@ export const withTheme = <P extends Themeable, S extends {} = {}>(Component: Rea
   return WithTheme as Hoisted;
 };
 
-export function useTheme() {
+export function useTheme(): GrafanaTheme {
   return useContext(ThemeContextMock || ThemeContext);
 }
 /** Hook for using memoized styles with access to the theme. */
diff --git a/packages/jaeger-ui-components/src/Theme.tsx b/packages/jaeger-ui-components/src/Theme.tsx
index 4efce28223b..0663c1f85f0 100644
--- a/packages/jaeger-ui-components/src/Theme.tsx
+++ b/packages/jaeger-ui-components/src/Theme.tsx
@@ -72,6 +72,11 @@ export type Theme = {
   type: ThemeType;
   servicesColorPalette: string[];
   borderStyle: string;
+  components?: {
+    TraceName?: {
+      fontSize?: number | string;
+    };
+  };
 };
 
 export const defaultTheme: Theme = {
@@ -199,3 +204,19 @@ export function autoColor(theme: Theme, hex: string, base?: string) {
     return newColor.isLight() ? newColor.darken(5).toHex8String() : newColor.lighten(5).toHex8String();
   }
 }
+
+/**
+ * With theme overrides you can use both number or string (for things like rem units) so this makes sure we convert
+ * the value accordingly or use fallback if not set
+ */
+export function safeSize(size: number | string | undefined, fallback: string): string {
+  if (!size) {
+    return fallback;
+  }
+
+  if (typeof size === 'string') {
+    return size;
+  } else {
+    return `${size}px`;
+  }
+}
diff --git a/packages/jaeger-ui-components/src/common/TraceName.tsx b/packages/jaeger-ui-components/src/common/TraceName.tsx
index ba8918a15c2..b22237e7099 100644
--- a/packages/jaeger-ui-components/src/common/TraceName.tsx
+++ b/packages/jaeger-ui-components/src/common/TraceName.tsx
@@ -14,6 +14,7 @@
 
 import * as React from 'react';
 import { css } from 'emotion';
+import cx from 'classnames';
 
 import BreakableText from './BreakableText';
 import LoadingIndicator from './LoadingIndicator';
@@ -21,11 +22,16 @@ import { fetchedState, FALLBACK_TRACE_NAME } from '../constants';
 
 import { FetchedState, TNil } from '../types';
 import { ApiError } from '../types/api-error';
-import { createStyle } from '../Theme';
+import { createStyle, safeSize, Theme, useTheme } from '../Theme';
 
-const getStyles = createStyle(() => {
+const getStyles = createStyle((theme: Theme) => {
   return {
+    TraceName: css`
+      label: TraceName;
+      font-size: ${safeSize(theme.components?.TraceName?.fontSize, 'unset')};
+    `,
     TraceNameError: css`
+      label: TraceNameError;
       color: #c00;
     `,
   };
@@ -42,7 +48,7 @@ export default function TraceName(props: Props) {
   const { className, error, state, traceName } = props;
   const isErred = state === fetchedState.ERROR;
   let title: string | React.ReactNode = traceName || FALLBACK_TRACE_NAME;
-  const styles = getStyles();
+  const styles = getStyles(useTheme());
   let errorCssClass = '';
   if (isErred) {
     errorCssClass = styles.TraceNameError;
@@ -61,5 +67,5 @@ export default function TraceName(props: Props) {
     const text = String(traceName || FALLBACK_TRACE_NAME);
     title = <BreakableText text={text} />;
   }
-  return <span className={`TraceName ${errorCssClass} ${className || ''}`}>{title}</span>;
+  return <span className={cx(styles.TraceName, errorCssClass, className)}>{title}</span>;
 }
diff --git a/public/app/features/explore/TraceView/TraceView.tsx b/public/app/features/explore/TraceView/TraceView.tsx
index fd21fa8eb0f..3c2dba39178 100644
--- a/public/app/features/explore/TraceView/TraceView.tsx
+++ b/public/app/features/explore/TraceView/TraceView.tsx
@@ -56,7 +56,16 @@ export function TraceView(props: Props) {
 
   const theme = useTheme();
   const traceTheme = useMemo(
-    () => ({ type: theme.isDark ? ThemeType.Dark : ThemeType.Light, servicesColorPalette: colors } as ThemeOptions),
+    () =>
+      ({
+        type: theme.isDark ? ThemeType.Dark : ThemeType.Light,
+        servicesColorPalette: colors,
+        components: {
+          TraceName: {
+            fontSize: theme.typography.size.lg,
+          },
+        },
+      } as ThemeOptions),
     [theme]
   );
   const traceTimeline: TTraceTimeline = useMemo(
@@ -75,7 +84,7 @@ export function TraceView(props: Props) {
     <ThemeProvider value={traceTheme}>
       <UIElementsContext.Provider value={UIElements}>
         <TracePageHeader
-          canCollapse={true}
+          canCollapse={false}
           clearSearch={useCallback(() => {}, [])}
           focusUiFindMatches={useCallback(() => {}, [])}
           hideMap={false}