add feedback link

public/app/plugins/datasource/prometheus/querybuilder/components/FeedbackLink.tsx

@@ -0,0 +1,40 @@
+import { css } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+import { Stack } from '@grafana/experimental';
+import { Icon, useStyles2 } from '@grafana/ui';
+
+export interface Props {
+  feedbackUrl?: string;
+}
+
+export function FeedbackLink({ feedbackUrl }: Props) {
+  const styles = useStyles2(getStyles);
+
+  return (
+    <Stack gap={1}>
+      <a
+        href={feedbackUrl}
+        className={styles.link}
+        title="The Metric Encyclopedia 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,
+      },
+    }),
+  };
+}

public/app/plugins/datasource/prometheus/querybuilder/components/MetricEncyclopediaModal.tsx

@@ -27,6 +27,8 @@ import { promQueryModeller } from '../PromQueryModeller';
 import { regexifyLabelValuesQueryString } from '../shared/parsingUtils';
 import { PromVisualQuery } from '../types';
 
+import { FeedbackLink } from './FeedbackLink';
+
 type Props = {
   datasource: PrometheusDatasource;
   isOpen: boolean;
@@ -347,6 +349,7 @@ export const MetricEncyclopediaModal = (props: Props) => {
       onDismiss={onClose}
       aria-label="Metric Encyclopedia"
     >
+      <FeedbackLink feedbackUrl="https://forms.gle/DEMAJHoAMpe3e54CA" />
       <div className={styles.spacing}>
         Browse {totalMetricCount} metric{totalMetricCount > 1 ? 's' : ''} by text, by type, alphabetically or select a
         variable.