From 084b9f060cc5e43cdfcd877d987a690a3a77fcc1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Mon, 15 Jan 2024 17:13:22 +0100
Subject: [PATCH] SharePanelQuery: Improve query editor UI (#80535)

* SharePanelQuery: Improve query editor UI

* tweak

* Update
---
 .../dashboard/DashboardQueryEditor.tsx        | 109 ++++++++----------
 1 file changed, 49 insertions(+), 60 deletions(-)

diff --git a/public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx b/public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx
index 6fc9e91593d..b43d0363169 100644
--- a/public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx
+++ b/public/app/plugins/datasource/dashboard/DashboardQueryEditor.tsx
@@ -5,23 +5,15 @@ import React, { useCallback, useMemo } from 'react';
 import { useAsync } from 'react-use';
 
 import { DataQuery, GrafanaTheme2, SelectableValue, DataTopic, QueryEditorProps } from '@grafana/data';
-import {
-  Card,
-  Field,
-  Select,
-  useStyles2,
-  VerticalGroup,
-  HorizontalGroup,
-  Spinner,
-  Switch,
-  RadioButtonGroup,
-} from '@grafana/ui';
+import { Field, Select, useStyles2, Spinner, RadioButtonGroup, Stack, InlineSwitch } from '@grafana/ui';
 import config from 'app/core/config';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 import { PanelModel } from 'app/features/dashboard/state';
 import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
 import { filterPanelDataToQuery } from 'app/features/query/components/QueryEditorRow';
 
+import { OperationsEditorRow } from '../prometheus/querybuilder/shared/OperationsEditorRow';
+
 import { DashboardDatasource } from './datasource';
 import { DashboardQuery, ResultInfo, SHARED_DASHBOARD_QUERY } from './types';
 
@@ -150,64 +142,61 @@ export function DashboardQueryEditor({ data, query, onChange, onRunQuery }: Prop
   const selected = panels.find((panel) => panel.value === query.panelId);
 
   return (
-    <>
-      <Field label="Source" description="Use the same results as panel">
-        <Select
-          inputId={selectId}
-          placeholder="Choose panel"
-          isSearchable={true}
-          options={panels}
-          value={selected}
-          onChange={(item) => onPanelChanged(item.value!)}
-        />
-      </Field>
-
-      <HorizontalGroup height="auto" wrap={true} align="flex-start">
-        <Field
-          label="Data Source"
-          description="Use data or annotations from the panel"
-          className={styles.horizontalField}
-        >
-          <RadioButtonGroup options={topics} value={query.topic === DataTopic.Annotations} onChange={onTopicChanged} />
-        </Field>
-
-        {showTransforms && (
-          <Field label="Transform" description="Apply panel transformations from the source panel">
-            <Switch value={Boolean(query.withTransforms)} onChange={onTransformToggle} />
+    <OperationsEditorRow>
+      <Stack direction="column">
+        <Stack gap={3}>
+          <Field label="Source panel" description="Use query results from another panel">
+            <Select
+              inputId={selectId}
+              placeholder="Choose panel"
+              isSearchable={true}
+              options={panels}
+              value={selected}
+              onChange={(item) => onPanelChanged(item.value!)}
+            />
           </Field>
-        )}
-      </HorizontalGroup>
 
-      {loadingResults ? (
-        <Spinner />
-      ) : (
-        <>
-          {results && Boolean(results.length) && (
-            <Field label="Queries from panel">
-              <VerticalGroup spacing="sm">
-                {results.map((target, i) => (
-                  <Card key={`DashboardQueryRow-${i}`}>
-                    <Card.Heading>{target.refId}</Card.Heading>
-                    <Card.Figure>
-                      <img src={target.img} alt={target.name} title={target.name} width={40} />
-                    </Card.Figure>
-                    <Card.Meta>{target.query}</Card.Meta>
-                  </Card>
-                ))}
-              </VerticalGroup>
+          <Field label="Data" description="Use data or annotations from the panel">
+            <RadioButtonGroup
+              options={topics}
+              value={query.topic === DataTopic.Annotations}
+              onChange={onTopicChanged}
+            />
+          </Field>
+
+          {showTransforms && (
+            <Field label="Transform" description="Apply transformations from the source panel">
+              <InlineSwitch value={Boolean(query.withTransforms)} onChange={onTransformToggle} />
             </Field>
           )}
-        </>
-      )}
-    </>
+        </Stack>
+
+        {loadingResults ? (
+          <Spinner />
+        ) : (
+          <>
+            {results && Boolean(results.length) && (
+              <Field label="Queries from panel">
+                <Stack direction="column">
+                  {results.map((target, i) => (
+                    <Stack key={i} alignItems="center" gap={1}>
+                      <div>{target.refId}</div>
+                      <img src={target.img} alt={target.name} title={target.name} width={16} />
+                      <div>{target.query}</div>
+                    </Stack>
+                  ))}
+                </Stack>
+              </Field>
+            )}
+          </>
+        )}
+      </Stack>
+    </OperationsEditorRow>
   );
 }
 
 function getStyles(theme: GrafanaTheme2) {
   return {
-    horizontalField: css({
-      marginRight: theme.spacing(2),
-    }),
     noQueriesText: css({
       padding: theme.spacing(1.25),
     }),