From 7448427739f894200c2c6cda7d4b5707ba710eaa Mon Sep 17 00:00:00 2001
From: Joey <90795735+joey-grafana@users.noreply.github.com>
Date: Fri, 28 Apr 2023 16:27:07 +0100
Subject: [PATCH] Tracing: Feedback button (#67398)

* Feedback button

* Hide button

* Make gen-cue
---
 .../Actions/TracePageActions.tsx              | 28 ++++++++++++++++---
 .../TracePageHeader/NewTracePageHeader.tsx    |  3 +-
 2 files changed, 26 insertions(+), 5 deletions(-)

diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/Actions/TracePageActions.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/Actions/TracePageActions.tsx
index 120843333ea..926388534fe 100644
--- a/public/app/features/explore/TraceView/components/TracePageHeader/Actions/TracePageActions.tsx
+++ b/public/app/features/explore/TraceView/components/TracePageHeader/Actions/TracePageActions.tsx
@@ -1,21 +1,30 @@
 import { css } from '@emotion/css';
 import React, { useState } from 'react';
 
-import { CoreApp, DataFrame } from '@grafana/data';
+import { GrafanaTheme2, CoreApp, DataFrame } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime';
-import { useStyles2 } from '@grafana/ui';
+import { Icon, useTheme2 } from '@grafana/ui';
 
 import { config } from '../../../../../../core/config';
 import { downloadTraceAsJson } from '../../../../../inspector/utils/download';
 
 import ActionButton from './ActionButton';
 
-export const getStyles = () => {
+export const getStyles = (theme: GrafanaTheme2) => {
   return {
     TracePageActions: css`
       label: TracePageActions;
       display: flex;
       gap: 4px;
+      margin-top: 2px;
+    `,
+    feedback: css`
+      margin: 6px;
+      color: ${theme.colors.text.secondary};
+      font-size: ${theme.typography.bodySmall.fontSize};
+      &:hover {
+        color: ${theme.colors.text.link};
+      }
     `,
   };
 };
@@ -28,7 +37,8 @@ export type TracePageActionsProps = {
 
 export default function TracePageActions(props: TracePageActionsProps) {
   const { traceId, data, app } = props;
-  const styles = useStyles2(getStyles);
+  const theme = useTheme2();
+  const styles = getStyles(theme);
   const [copyTraceIdClicked, setCopyTraceIdClicked] = useState(false);
 
   const copyTraceId = () => {
@@ -51,6 +61,16 @@ export default function TracePageActions(props: TracePageActionsProps) {
 
   return (
     <div className={styles.TracePageActions}>
+      <a
+        href="https://forms.gle/RZDEx8ScyZNguDoC8"
+        className={styles.feedback}
+        title="Share your thoughts about tracing in Grafana."
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        <Icon name="comment-alt-message" /> Give feedback
+      </a>
+
       <ActionButton
         onClick={copyTraceId}
         ariaLabel={'Copy Trace ID'}
diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/NewTracePageHeader.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/NewTracePageHeader.tsx
index e9f663851de..5dd3d3ecac1 100644
--- a/public/app/features/explore/TraceView/components/TracePageHeader/NewTracePageHeader.tsx
+++ b/public/app/features/explore/TraceView/components/TracePageHeader/NewTracePageHeader.tsx
@@ -162,7 +162,7 @@ const getNewStyles = (theme: GrafanaTheme2) => {
       z-index: 5;
     `,
     titleRow: css`
-      align-items: center;
+      align-items: flex-start;
       display: flex;
       padding: 0 8px;
     `,
@@ -193,6 +193,7 @@ const getNewStyles = (theme: GrafanaTheme2) => {
     `,
     url: css`
       margin: -2.5px 0.3em;
+      height: 15px;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;