From 51c19afcb25281d0aec84283623fcdf466794bdb Mon Sep 17 00:00:00 2001 From: Fabrizio <135109076+fabrizio-grafana@users.noreply.github.com> Date: Tue, 23 Jan 2024 16:33:08 +0100 Subject: [PATCH] Tempo: Rewrite styles using objects (#81038) --- .betterer.results | 34 +------------------ .../jaeger/components/QueryEditor.tsx | 6 ++-- .../NativeSearch/TagsField/TagsField.tsx | 24 ++++++------- .../SearchTraceQLEditor/DurationInput.tsx | 12 +++---- .../tempo/SearchTraceQLEditor/TagsInput.tsx | 20 +++++------ .../SearchTraceQLEditor/TraceQLSearch.tsx | 20 +++++------ .../datasource/tempo/ServiceGraphSection.tsx | 16 ++++----- .../tempo/configuration/ConfigEditor.tsx | 10 +++--- .../tempo/configuration/QuerySettings.tsx | 20 +++++------ .../tempo/traceql/TraceQLEditor.tsx | 24 ++++++------- 10 files changed, 77 insertions(+), 109 deletions(-) diff --git a/.betterer.results b/.betterer.results index 4bb4a77a5b9..edef07473db 100644 --- 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"] ], diff --git a/public/app/plugins/datasource/jaeger/components/QueryEditor.tsx b/public/app/plugins/datasource/jaeger/components/QueryEditor.tsx index ed9c9e0f084..22c98352296 100644 --- 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%', + }), }); diff --git a/public/app/plugins/datasource/tempo/NativeSearch/TagsField/TagsField.tsx b/public/app/plugins/datasource/tempo/NativeSearch/TagsField/TagsField.tsx index 45cf7066c7e..3869c3fcb3c 100644 --- 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, + }, + }), }; }; diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/DurationInput.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/DurationInput.tsx index 528099ca86c..deea6014dab 100644 --- 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) => { diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TagsInput.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TagsInput.tsx index 6439fbbfb57..63a703ac8b4 100644 --- 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 { diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx index 0136b15d9ea..852c290ba46 100644 --- 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, diff --git a/public/app/plugins/datasource/tempo/ServiceGraphSection.tsx b/public/app/plugins/datasource/tempo/ServiceGraphSection.tsx index ca667e59430..f3a25ac6c87 100644 --- 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', + }), }); diff --git a/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx b/public/app/plugins/datasource/tempo/configuration/ConfigEditor.tsx index d11be997235..94e7a22cecd 100644 --- 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', + }), }); diff --git a/public/app/plugins/datasource/tempo/configuration/QuerySettings.tsx b/public/app/plugins/datasource/tempo/configuration/QuerySettings.tsx index 45d6bb969bc..85adf08d72d 100644 --- 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', + }), }); diff --git a/public/app/plugins/datasource/tempo/traceql/TraceQLEditor.tsx b/public/app/plugins/datasource/tempo/traceql/TraceQLEditor.tsx index 427133fd2cc..4b85b0d3960 100644 --- 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, + }, + }), }; };