Move version to menu and remove preview badge (#429)

* Move version to menu and remove preview badge

* Update test

Author: joey-grafana

e2e/components.spec.ts

@@ -16,7 +16,6 @@ test.describe('components', () => {
 
   test('in header are visible', async ({ page }) => {
     await expect(page.getByText('Data source')).toBeVisible();
-    await expect(page.getByText('Preview')).toBeVisible();
     await expect(page.getByRole('button', { name: 'Need help' })).toBeVisible();
     await expect(page.getByTestId('data-testid TimePicker Open Button')).toBeVisible();
     await expect(page.getByTestId('data-testid RefreshPicker run button')).toBeVisible();

src/pages/Explore/TraceExploration.tsx

@@ -20,7 +20,7 @@ import {
   SceneVariableSet,
 } from '@grafana/scenes';
 import { config } from '@grafana/runtime';
-import { Badge, Button, Drawer, Dropdown, Icon, IconButton, Menu, Stack, Tooltip, useStyles2 } from '@grafana/ui';
+import { Button, Drawer, Dropdown, Icon, IconButton, Menu, Stack, useStyles2 } from '@grafana/ui';
 
 import { TracesByServiceScene } from '../../components/Explore/TracesByService/TracesByServiceScene';
 import {
@@ -73,7 +73,7 @@ export interface TraceExplorationState extends SceneObjectState {
 const version = process.env.VERSION;
 const buildTime = process.env.BUILD_TIME;
 const commitSha = process.env.COMMIT_SHA;
-const compositeVersion = `v${version} - ${buildTime?.split('T')[0]} (${commitSha})`;
+const compositeVersion = `${buildTime?.split('T')[0]} (${commitSha})`;
 
 export class TraceExploration extends SceneObjectBase<TraceExplorationState> {
   protected _urlSync = new SceneObjectUrlSyncConfig(this, { keys: ['primarySignal', 'traceId', 'spanId', 'metric'] });
@@ -252,8 +252,19 @@ export class TraceExplorationScene extends SceneObjectBase {
     const filtersVariable = getFiltersVariable(traceExploration);
     const primarySignalVariable = getPrimarySignalVariable(traceExploration);
 
+    function VersionHeader() {
+      const styles = useStyles2(getStyles);
+    
+      return (
+        <div className={styles.menuHeader}>
+          <h5>Grafana Traces Drilldown v{version}</h5>
+          <div className={styles.menuHeaderSubtitle}>Last update: {compositeVersion}</div>
+        </div>
+      );
+    }
+
     const menu = (
-      <Menu>
+      <Menu header={<VersionHeader />}>
         <div className={styles.menu}>
           {config.feedbackLinksEnabled && (
             <Menu.Item
@@ -310,11 +321,6 @@ export class TraceExplorationScene extends SceneObjectBase {
               </Stack>
 
               <div className={styles.controls}>
-                <Tooltip content={<PreviewTooltip text={compositeVersion} />} interactive>
-                  <span className={styles.preview}>
-                    <Badge text="&nbsp;Preview" color="blue" icon="rocket" />
-                  </span>
-                </Tooltip>
                 <Dropdown overlay={menu} onVisibleChange={() => setMenuVisible(!menuVisible)}>
                   <Button variant="secondary" icon="info-circle">
                     Need help
@@ -371,16 +377,6 @@ export class TraceExplorationScene extends SceneObjectBase {
   };
 }
 
-const PreviewTooltip = ({ text }: { text: string }) => {
-  const styles = useStyles2(getStyles);
-
-  return (
-    <Stack direction={'column'} gap={2}>
-      <div className={styles.tooltip}>{text}</div>
-    </Stack>
-  );
-};
-
 function getTopScene() {
   return new TracesByServiceScene({});
 }
@@ -515,14 +511,14 @@ function getStyles(theme: GrafanaTheme2) {
         color: theme.colors.text.link,
       },
     }),
-    preview: css({
-      label: 'preview',
-      cursor: 'help',
-
-      '> div:first-child': {
-        padding: '5.5px',
-      },
-    }),
+    menuHeader: css`
+      padding: ${theme.spacing(0.5, 1)};
+      white-space: nowrap;
+    `,
+    menuHeaderSubtitle: css`
+      color: ${theme.colors.text.secondary};
+      font-size: ${theme.typography.bodySmall.fontSize};
+    `,
     tooltip: css({
       label: 'tooltip',
       fontSize: '14px',