Tempo: Rewrite styles using objects (#81038)

2025-02-25 18:55:37 -06:00 · 2024-01-23 16:33:08 +01:00
parent 85b9edcd28
commit 51c19afcb2
10 changed files with 77 additions and 109 deletions
--- a/.betterer.results
+++ b/.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, "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/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"]
    ],
--- a/public/app/plugins/datasource/jaeger/components/QueryEditor.tsx
+++ b/public/app/plugins/datasource/jaeger/components/QueryEditor.tsx
@@ -111,7 +111,7 @@ export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props)
 }

 const getStyles = () => ({
-  container: css`
-    width: 100%;
-  `,
+  container: css({
+    width: '100%',
+  }),
 });
--- a/public/app/plugins/datasource/tempo/NativeSearch/TagsField/TagsField.tsx
+++ b/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`
-      border-radius: ${theme.shape.radius.default};
-      border: 1px solid ${theme.components.input.borderColor};
-      flex: 1;
-    `,
-    placeholder: css`
-      ::after {
-        content: '${placeholder}';
-        font-family: ${theme.typography.fontFamilyMonospace};
-        opacity: 0.3;
-      }
-    `,
+    queryField: css({
+      borderRadius: theme.shape.radius.default,
+      border: `1px solid ${theme.components.input.borderColor}`,
+      flex: 1,
+    }),
+    placeholder: css({
+      '::after': {
+        content: `'${placeholder}'`,
+        fontFamily: theme.typography.fontFamilyMonospace,
+        opacity: 0.3,
+      },
+    }),
  };
 };
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/DurationInput.tsx
+++ b/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`
-    box-shadow: none;
-    *:focus {
-      box-shadow: none;
-    }
-  `,
+  noBoxShadow: css({
+    boxShadow: 'none',
+    '*:focus': {
+      boxShadow: 'none',
+    },
+  }),
 });

 const DurationInput = ({ filter, operators, updateFilter }: Props) => {
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TagsInput.tsx
+++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TagsInput.tsx
@@ -13,16 +13,16 @@ import SearchField from './SearchField';
 import { getFilteredTags } from './utils';

 const getStyles = () => ({
-  vertical: css`
-    display: flex;
-    flex-direction: column;
-    gap: 0.25rem;
-  `,
-  horizontal: css`
-    display: flex;
-    flex-direction: row;
-    gap: 1rem;
-  `,
+  vertical: css({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '0.25rem',
+  }),
+  horizontal: css({
+    display: 'flex',
+    flexDirection: 'row',
+    gap: '1rem',
+  }),
 });

 interface Props {
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx
+++ b/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`
-    max-width: 75ch;
-    margin-top: ${theme.spacing(2)};
-  `,
-  container: css`
-    display: flex;
-    gap: 4px;
-    flex-wrap: wrap;
-    flex-direction: column;
-  `,
+  alert: css({
+    maxWidth: '75ch',
+    marginTop: theme.spacing(2),
+  }),
+  container: css({
+    display: 'flex',
+    gap: '4px',
+    flexWrap: 'wrap',
+    flexDirection: 'column',
+  }),
  rawQueryContainer: css({
    alignItems: 'center',
    backgroundColor: theme.colors.background.secondary,
--- a/public/app/plugins/datasource/tempo/ServiceGraphSection.tsx
+++ b/public/app/plugins/datasource/tempo/ServiceGraphSection.tsx
@@ -151,12 +151,12 @@ function filtersToQuery(filters: AdHocVariableFilter[]): string {
 }

 const getStyles = (theme: GrafanaTheme2) => ({
-  alert: css`
-    max-width: 75ch;
-    margin-top: ${theme.spacing(2)};
-  `,
-  link: css`
-    color: ${theme.colors.text.link};
-    text-decoration: underline;
-  `,
+  alert: css({
+    maxWidth: '75ch',
+    marginTop: theme.spacing(2),
+  }),
+  link: css({
+    color: theme.colors.text.link,
+    textDecoration: 'underline',
+  }),
 });
--- a/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx
+++ b/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx
@@ -142,9 +142,9 @@ export const ConfigEditor = ({ options, onOptionsChange }: Props) => {
 };

 const getStyles = (theme: GrafanaTheme2) => ({
-  container: css`
-    label: container;
-    margin-bottom: ${theme.spacing(2)};
-    max-width: 900px;
-  `,
+  container: css({
+    label: 'container',
+    marginBottom: theme.spacing(2),
+    maxWidth: '900px',
+  }),
 });
--- a/public/app/plugins/datasource/tempo/configuration/QuerySettings.tsx
+++ b/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`
-    padding-bottom: ${theme.spacing(2)};
-    color: ${theme.colors.text.secondary};
-  `,
-  container: css`
-    width: 100%;
-  `,
-  row: css`
-    align-items: baseline;
-  `,
+  infoText: css({
+    paddingBottom: theme.spacing(2),
+    color: theme.colors.text.secondary,
+  }),
+  container: css({
+    width: '100%',
+  }),
+  row: css({
+    alignItems: 'baseline',
+  }),
 });
--- a/public/app/plugins/datasource/tempo/traceql/TraceQLEditor.tsx
+++ b/public/app/plugins/datasource/tempo/traceql/TraceQLEditor.tsx
@@ -243,17 +243,17 @@ interface EditorStyles {

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