From 7451f41967853dc3a689fce9887469e105e4a126 Mon Sep 17 00:00:00 2001
From: Joey <90795735+joey-grafana@users.noreply.github.com>
Date: Fri, 15 Dec 2023 12:46:32 +0000
Subject: [PATCH] Tempo: Carry over query from Search tab to TraceQL tab
 (#79442)

* Carry over query from Search tab to TraceQL tab

* Update tracking

* Update flow

* Updates to logic
---
 .../plugins/datasource/tempo/QueryField.tsx   |  3 +-
 .../datasource/tempo/traceql/QueryEditor.tsx  | 44 +++++++++++++++++--
 2 files changed, 43 insertions(+), 4 deletions(-)

diff --git a/public/app/plugins/datasource/tempo/QueryField.tsx b/public/app/plugins/datasource/tempo/QueryField.tsx
index 60ce8bc2a27..252975076f3 100644
--- a/public/app/plugins/datasource/tempo/QueryField.tsx
+++ b/public/app/plugins/datasource/tempo/QueryField.tsx
@@ -151,7 +151,6 @@ class TempoQueryFieldComponent extends React.PureComponent<Props, State> {
                   });
 
                   this.onClearResults();
-
                   onChange({
                     ...query,
                     queryType: v,
@@ -205,6 +204,8 @@ class TempoQueryFieldComponent extends React.PureComponent<Props, State> {
             query={query}
             onRunQuery={this.props.onRunQuery}
             onChange={onChange}
+            app={app}
+            onClearResults={this.onClearResults}
           />
         )}
       </>
diff --git a/public/app/plugins/datasource/tempo/traceql/QueryEditor.tsx b/public/app/plugins/datasource/tempo/traceql/QueryEditor.tsx
index 0108d2fcc05..2a75c84a33b 100644
--- a/public/app/plugins/datasource/tempo/traceql/QueryEditor.tsx
+++ b/public/app/plugins/datasource/tempo/traceql/QueryEditor.tsx
@@ -1,21 +1,31 @@
 import { css } from '@emotion/css';
 import { defaults } from 'lodash';
-import React from 'react';
+import React, { useState } from 'react';
 
 import { QueryEditorProps } from '@grafana/data';
-import { InlineLabel, useStyles2 } from '@grafana/ui';
+import { config, reportInteraction } from '@grafana/runtime';
+import { Button, InlineLabel, useStyles2 } from '@grafana/ui';
 
+import { generateQueryFromFilters } from '../SearchTraceQLEditor/utils';
 import { TempoDatasource } from '../datasource';
 import { defaultQuery, MyDataSourceOptions, TempoQuery } from '../types';
 
 import { TempoQueryBuilderOptions } from './TempoQueryBuilderOptions';
 import { TraceQLEditor } from './TraceQLEditor';
 
-type Props = QueryEditorProps<TempoDatasource, TempoQuery, MyDataSourceOptions>;
+type EditorProps = {
+  onClearResults: () => void;
+};
+
+type Props = EditorProps & QueryEditorProps<TempoDatasource, TempoQuery, MyDataSourceOptions>;
 
 export function QueryEditor(props: Props) {
   const styles = useStyles2(getStyles);
   const query = defaults(props.query, defaultQuery);
+  const [showCopyFromSearchButton, setShowCopyFromSearchButton] = useState(() => {
+    const genQuery = generateQueryFromFilters(query.filters || []);
+    return genQuery === query.query || genQuery === '{}';
+  });
 
   const onEditorChange = (value: string) => {
     props.onChange({ ...query, query: value });
@@ -29,6 +39,34 @@ export function QueryEditor(props: Props) {
           Documentation
         </a>
       </InlineLabel>
+      {!showCopyFromSearchButton && (
+        <InlineLabel>
+          <div>
+            Continue editing the query from the Search tab?
+            <Button
+              variant="secondary"
+              size="sm"
+              onClick={() => {
+                reportInteraction('grafana_traces_copy_to_traceql_clicked', {
+                  datasourceType: 'tempo',
+                  app: props.app ?? '',
+                  grafana_version: config.buildInfo.version,
+                });
+
+                props.onClearResults();
+                props.onChange({
+                  ...query,
+                  query: generateQueryFromFilters(query.filters || []),
+                });
+                setShowCopyFromSearchButton(true);
+              }}
+              style={{ marginLeft: '10px' }}
+            >
+              Copy query from Search
+            </Button>
+          </div>
+        </InlineLabel>
+      )}
       <TraceQLEditor
         placeholder="Enter a TraceQL query or trace ID (run with Shift+Enter)"
         value={query.query || ''}