From f7ace22285bdec711a06dcd99f8d3c744171b3e5 Mon Sep 17 00:00:00 2001
From: Galen Kistler <109082771+gtk-grafana@users.noreply.github.com>
Date: Wed, 29 Nov 2023 11:28:55 -0600
Subject: [PATCH] Logs Panel: Table UI - feedback link (#78354)

* Adds google form link to let users submit feedback on logs table UI

Co-authored-by: Ivana Huckova <30407135+ivanahuckova@users.noreply.github.com>
---
 public/app/features/explore/Logs/Logs.tsx     | 26 ++++++++-----
 .../features/explore/Logs/LogsFeedback.tsx    | 38 +++++++++++++++++++
 2 files changed, 54 insertions(+), 10 deletions(-)
 create mode 100644 public/app/features/explore/Logs/LogsFeedback.tsx

diff --git a/public/app/features/explore/Logs/Logs.tsx b/public/app/features/explore/Logs/Logs.tsx
index c1864d4a30a..589da7b1a37 100644
--- a/public/app/features/explore/Logs/Logs.tsx
+++ b/public/app/features/explore/Logs/Logs.tsx
@@ -57,6 +57,7 @@ import { dedupLogRows, filterLogLevels } from '../../logs/logsModel';
 import { getUrlStateFromPaneState } from '../hooks/useStateSync';
 import { changePanelState } from '../state/explorePane';
 
+import { LogsFeedback } from './LogsFeedback';
 import { LogsMetaRow } from './LogsMetaRow';
 import LogsNavigation from './LogsNavigation';
 import { getLogsTableHeight, LogsTableWrap } from './LogsTableWrap';
@@ -602,16 +603,21 @@ class UnthemedLogs extends PureComponent<Props, State> {
         </PanelChrome>
         <PanelChrome
           titleItems={[
-            config.featureToggles.logsExploreTableVisualisation ? (
-              this.state.visualisationType === 'logs' ? null : (
-                <PanelChrome.TitleItem title="Experimental" key="A">
-                  <FeatureBadge
-                    featureState={FeatureState.beta}
-                    tooltip="This feature is experimental and may change in future versions"
-                  />
-                </PanelChrome.TitleItem>
-              )
-            ) : null,
+            config.featureToggles.logsExploreTableVisualisation
+              ? this.state.visualisationType === 'logs'
+                ? null
+                : [
+                    <PanelChrome.TitleItem title="Experimental" key="A">
+                      <FeatureBadge
+                        featureState={FeatureState.beta}
+                        tooltip="Table view is experimental and may change in future versions"
+                      />
+                    </PanelChrome.TitleItem>,
+                    <PanelChrome.TitleItem title="Feedback" key="B">
+                      <LogsFeedback feedbackUrl="https://forms.gle/5YyKdRQJ5hzq4c289" />
+                    </PanelChrome.TitleItem>,
+                  ]
+              : null,
           ]}
           title={'Logs'}
           actions={
diff --git a/public/app/features/explore/Logs/LogsFeedback.tsx b/public/app/features/explore/Logs/LogsFeedback.tsx
new file mode 100644
index 00000000000..91b3e1aa0a1
--- /dev/null
+++ b/public/app/features/explore/Logs/LogsFeedback.tsx
@@ -0,0 +1,38 @@
+import { css } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { Icon, Stack, useStyles2 } from '@grafana/ui';
+
+interface Props {
+  feedbackUrl?: string;
+}
+
+export function LogsFeedback({ feedbackUrl }: Props) {
+  const styles = useStyles2(getStyles);
+  return (
+    <Stack>
+      <a
+        href={feedbackUrl}
+        className={styles.link}
+        title="The logs table is new, please let us know how we can improve it"
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        <Icon name="comment-alt-message" /> Give feedback
+      </a>
+    </Stack>
+  );
+}
+
+function getStyles(theme: GrafanaTheme2) {
+  return {
+    link: css({
+      color: theme.colors.text.secondary,
+      fontSize: theme.typography.bodySmall.fontSize,
+      ':hover': {
+        color: theme.colors.text.link,
+      },
+    }),
+  };
+}