Tempo: Add cheat sheet to query editor (#33272)

public/app/plugins/datasource/tempo/CheatSheet.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+export default function CheatSheet() {
+  return (
+    <div>
+      <h2 id="tempo-cheat-sheet">Tempo Cheat Sheet</h2>
+      <p>
+        Tempo is a trace id lookup store. Enter a trace id in the above field and hit “Run Query” to retrieve your
+        trace. Tempo is generally paired with other datasources such as Loki or Prometheus to find traces.
+      </p>
+      <p>
+        Here are some{' '}
+        <a href="https://grafana.com/docs/tempo/latest/guides/instrumentation/" target="blank">
+          instrumentation examples
+        </a>{' '}
+        to get you started with trace discovery through logs and metrics (exemplars).
+      </p>
+    </div>
+  );
+}

public/app/plugins/datasource/tempo/module.ts

@@ -1,8 +1,10 @@
 import { DataSourcePlugin } from '@grafana/data';
+import CheatSheet from './CheatSheet';
+import { ConfigEditor } from './ConfigEditor';
 import { TempoDatasource } from './datasource';
 import { TempoQueryField } from './QueryField';
-import { ConfigEditor } from './ConfigEditor';
 
 export const plugin = new DataSourcePlugin(TempoDatasource)
   .setConfigEditor(ConfigEditor)
+  .setQueryEditorHelp(CheatSheet)
   .setExploreQueryField(TempoQueryField);