Tempo: Rewrite styles using objects (#81038)

.betterer.results

@@ -5224,9 +5224,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Styles should be written using objects.", "0"],
       [0, 0, 0, "Styles should be written using objects.", "1"]
     ],
-    "public/app/plugins/datasource/jaeger/components/QueryEditor.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
     "public/app/plugins/datasource/jaeger/configuration/ConfigEditor.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"]
     ],
@@ -5678,25 +5675,8 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
-    "public/app/plugins/datasource/tempo/NativeSearch/TagsField/TagsField.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
-    "public/app/plugins/datasource/tempo/SearchTraceQLEditor/DurationInput.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
-    "public/app/plugins/datasource/tempo/SearchTraceQLEditor/TagsInput.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
-    "public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
     "public/app/plugins/datasource/tempo/ServiceGraphSection.tsx:5381": [
-      [0, 0, 0, "Do not use any type assertions.", "0"],
+      [0, 0, 0, "Do not use any type assertions.", "0"]
-      [0, 0, 0, "Styles should be written using objects.", "1"],
-      [0, 0, 0, "Styles should be written using objects.", "2"]
     ],
     "public/app/plugins/datasource/tempo/_importedDependencies/components/AdHocFilter/AdHocFilterRenderer.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
@@ -5741,14 +5721,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "0"],
       [0, 0, 0, "Do not use any type assertions.", "1"]
     ],
-    "public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
-    "public/app/plugins/datasource/tempo/configuration/QuerySettings.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"]
-    ],
     "public/app/plugins/datasource/tempo/configuration/TraceQLSearchSettings.tsx:5381": [
       [0, 0, 0, "Do not use any type assertions.", "0"]
     ],
@@ -5799,10 +5771,6 @@ exports[`better eslint`] = {
     "public/app/plugins/datasource/tempo/traceql/QueryEditor.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"]
     ],
-    "public/app/plugins/datasource/tempo/traceql/TraceQLEditor.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
     "public/app/plugins/datasource/zipkin/ConfigEditor.tsx:5381": [
       [0, 0, 0, "Styles should be written using objects.", "0"]
     ],

public/app/plugins/datasource/jaeger/components/QueryEditor.tsx

@@ -111,7 +111,7 @@ export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props)
 }
 
 const getStyles = () => ({
-  container: css`
+  container: css({
-    width: 100%;
+    width: '100%',
-  `,
+  }),
 });

public/app/plugins/datasource/tempo/NativeSearch/TagsField/TagsField.tsx

@@ -166,17 +166,17 @@ interface EditorStyles {
 
 const getStyles = (theme: GrafanaTheme2, placeholder: string): EditorStyles => {
   return {
-    queryField: css`
+    queryField: css({
-      border-radius: ${theme.shape.radius.default};
+      borderRadius: theme.shape.radius.default,
-      border: 1px solid ${theme.components.input.borderColor};
+      border: `1px solid ${theme.components.input.borderColor}`,
-      flex: 1;
+      flex: 1,
-    `,
+    }),
-    placeholder: css`
+    placeholder: css({
-      ::after {
+      '::after': {
-        content: '${placeholder}';
+        content: `'${placeholder}'`,
-        font-family: ${theme.typography.fontFamilyMonospace};
+        fontFamily: theme.typography.fontFamilyMonospace,
-        opacity: 0.3;
+        opacity: 0.3,
-      }
+      },
-    `,
+    }),
   };
 };

public/app/plugins/datasource/tempo/SearchTraceQLEditor/DurationInput.tsx

@@ -18,12 +18,12 @@ interface Props {
 const validationRegex = /^(\$\w+)|(\d+(?:\.\d)?\d*(?:us|µs|ns|ms|s|m|h))$/;
 
 const getStyles = () => ({
-  noBoxShadow: css`
+  noBoxShadow: css({
-    box-shadow: none;
+    boxShadow: 'none',
-    *:focus {
+    '*:focus': {
-      box-shadow: none;
+      boxShadow: 'none',
-    }
+    },
-  `,
+  }),
 });
 
 const DurationInput = ({ filter, operators, updateFilter }: Props) => {

public/app/plugins/datasource/tempo/SearchTraceQLEditor/TagsInput.tsx

@@ -13,16 +13,16 @@ import SearchField from './SearchField';
 import { getFilteredTags } from './utils';
 
 const getStyles = () => ({
-  vertical: css`
+  vertical: css({
-    display: flex;
+    display: 'flex',
-    flex-direction: column;
+    flexDirection: 'column',
-    gap: 0.25rem;
+    gap: '0.25rem',
-  `,
+  }),
-  horizontal: css`
+  horizontal: css({
-    display: flex;
+    display: 'flex',
-    flex-direction: row;
+    flexDirection: 'row',
-    gap: 1rem;
+    gap: '1rem',
-  `,
+  }),
 });
 
 interface Props {

public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx

@@ -254,16 +254,16 @@ const TraceQLSearch = ({ datasource, query, onChange, onClearResults, app }: Pro
 export default TraceQLSearch;
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  alert: css`
+  alert: css({
-    max-width: 75ch;
+    maxWidth: '75ch',
-    margin-top: ${theme.spacing(2)};
+    marginTop: theme.spacing(2),
-  `,
+  }),
-  container: css`
+  container: css({
-    display: flex;
+    display: 'flex',
-    gap: 4px;
+    gap: '4px',
-    flex-wrap: wrap;
+    flexWrap: 'wrap',
-    flex-direction: column;
+    flexDirection: 'column',
-  `,
+  }),
   rawQueryContainer: css({
     alignItems: 'center',
     backgroundColor: theme.colors.background.secondary,

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

@@ -151,12 +151,12 @@ function filtersToQuery(filters: AdHocVariableFilter[]): string {
 }
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  alert: css`
+  alert: css({
-    max-width: 75ch;
+    maxWidth: '75ch',
-    margin-top: ${theme.spacing(2)};
+    marginTop: theme.spacing(2),
-  `,
+  }),
-  link: css`
+  link: css({
-    color: ${theme.colors.text.link};
+    color: theme.colors.text.link,
-    text-decoration: underline;
+    textDecoration: 'underline',
-  `,
+  }),
 });

public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx

@@ -142,9 +142,9 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
 };
 
 const getStyles = (theme: GrafanaTheme2) => ({
-  container: css`
+  container: css({
-    label: container;
+    label: 'container',
-    margin-bottom: ${theme.spacing(2)};
+    marginBottom: theme.spacing(2),
-    max-width: 900px;
+    maxWidth: '900px',
-  `,
+  }),
 });

public/app/plugins/datasource/tempo/configuration/QuerySettings.tsx

@@ -71,14 +71,14 @@ export function QuerySettings({ options, onOptionsChange }: Props) {
 }
 
 export const getStyles = (theme: GrafanaTheme2) => ({
-  infoText: css`
+  infoText: css({
-    padding-bottom: ${theme.spacing(2)};
+    paddingBottom: theme.spacing(2),
-    color: ${theme.colors.text.secondary};
+    color: theme.colors.text.secondary,
-  `,
+  }),
-  container: css`
+  container: css({
-    width: 100%;
+    width: '100%',
-  `,
+  }),
-  row: css`
+  row: css({
-    align-items: baseline;
+    alignItems: 'baseline',
-  `,
+  }),
 });

public/app/plugins/datasource/tempo/traceql/TraceQLEditor.tsx

@@ -243,17 +243,17 @@ interface EditorStyles {
 
 const getStyles = (theme: GrafanaTheme2, placeholder: string): EditorStyles => {
   return {
-    queryField: css`
+    queryField: css({
-      border-radius: ${theme.shape.radius.default};
+      borderRadius: theme.shape.radius.default,
-      border: 1px solid ${theme.components.input.borderColor};
+      border: `1px solid ${theme.components.input.borderColor}`,
-      flex: 1;
+      flex: 1,
-    `,
+    }),
-    placeholder: css`
+    placeholder: css({
-      ::after {
+      '::after': {
-        content: '${placeholder}';
+        content: `'${placeholder}'`,
-        font-family: ${theme.typography.fontFamilyMonospace};
+        fontFamily: theme.typography.fontFamilyMonospace,
-        opacity: 0.3;
+        opacity: 0.3,
-      }
+      },
-    `,
+    }),
   };
 };