From 714dd0ec47daeccc4f9d38684ac18d79458dc95b Mon Sep 17 00:00:00 2001
From: Daniel Benjamin <benjamindaniel706@gmail.com>
Date: Wed, 8 Nov 2023 14:31:01 +0100
Subject: [PATCH] Tempo: remove gf-form from TagMappingInput in trace to logs
 config section (#77835)

ref: remove gf-form from TagMappingInput
---
 .betterer.results                             |  4 +-
 .../TraceToLogs/TagMappingInput.tsx           | 69 ++++++++++---------
 2 files changed, 39 insertions(+), 34 deletions(-)

diff --git a/.betterer.results b/.betterer.results
index bde83922bc5..fc74334c08f 100644
--- a/.betterer.results
+++ b/.betterer.results
@@ -1442,9 +1442,7 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
     ],
     "public/app/core/components/TraceToLogs/TagMappingInput.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
+      [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
     "public/app/core/components/TraceToMetrics/TraceToMetricsSettings.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"],
diff --git a/public/app/core/components/TraceToLogs/TagMappingInput.tsx b/public/app/core/components/TraceToLogs/TagMappingInput.tsx
index e1c34f99d49..2dea321ab02 100644
--- a/public/app/core/components/TraceToLogs/TagMappingInput.tsx
+++ b/public/app/core/components/TraceToLogs/TagMappingInput.tsx
@@ -1,8 +1,9 @@
-import { css } from '@emotion/css';
+import { css, cx } from '@emotion/css';
 import React from 'react';
 
 import { GrafanaTheme2 } from '@grafana/data';
-import { SegmentInput, useStyles2, InlineLabel, Icon } from '@grafana/ui';
+import { InlineLabel, SegmentInput, ToolbarButton, useStyles2 } from '@grafana/ui';
+import { ToolbarButtonVariant } from '@grafana/ui/src/components/ToolbarButton';
 
 import { TraceToLogsTag } from './TraceToLogsSettings';
 
@@ -12,6 +13,8 @@ interface Props {
   id?: string;
 }
 
+const VARIANT = 'none' as ToolbarButtonVariant;
+
 export const TagMappingInput = ({ values, onChange, id }: Props) => {
   const styles = useStyles2(getStyles);
 
@@ -53,53 +56,57 @@ export const TagMappingInput = ({ values, onChange, id }: Props) => {
                 );
               }}
             />
-            <button
+            <ToolbarButton
               onClick={() => onChange([...values.slice(0, idx), ...values.slice(idx + 1)])}
-              className="gf-form-label query-part"
+              className={cx(styles.removeTag, 'query-part')}
               aria-label="Remove tag"
+              variant={VARIANT}
               type="button"
-            >
-              <Icon name="times" />
-            </button>
+              icon="times"
+            />
+
             {idx === values.length - 1 ? (
-              <button
+              <ToolbarButton
                 onClick={() => onChange([...values, { key: '', value: '' }])}
-                className="gf-form-label query-part"
+                className="query-part"
                 aria-label="Add tag"
                 type="button"
-              >
-                <Icon name="plus" />
-              </button>
+                variant={VARIANT}
+                icon="plus"
+              />
             ) : null}
           </div>
         ))
       ) : (
-        <button
+        <ToolbarButton
+          icon="plus"
           onClick={() => onChange([...values, { key: '', value: '' }])}
-          className="gf-form-label query-part"
+          className="query-part"
           aria-label="Add tag"
           type="button"
-        >
-          <Icon name="plus" />
-        </button>
+          variant={VARIANT}
+        />
       )}
     </div>
   );
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  wrapper: css`
-    display: flex;
-    flex-direction: column;
-    gap: ${theme.spacing(0.5)} 0;
-  `,
-  pair: css`
-    display: flex;
-    justify-content: start;
-    align-items: center;
-  `,
-  operator: css`
-    color: ${theme.v1.palette.orange};
-    width: auto;
-  `,
+  wrapper: css({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: `${theme.spacing(0.5)} 0`,
+  }),
+  pair: css({
+    display: 'flex',
+    justifyContent: 'start',
+    alignItems: 'center',
+  }),
+  operator: css({
+    color: theme.v1.palette.orange,
+    width: 'auto',
+  }),
+  removeTag: css({
+    marginRight: theme.spacing(0.5),
+  }),
 });