From 94bbc081c8a7d3a6f3ce656716b765f9ac1f0c7e Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Fri, 25 Oct 2024 14:50:28 +0100 Subject: [PATCH] Chore: Finish converting emotion styles to object syntax (#95399) * convert some emotion styles to object syntax * convert more styles to object syntax * fix placeholder content --- .betterer.results | 608 ++---------------- .../log-context/LogRowContextModal.tsx | 166 ++--- .../manage-dashboards/DashboardImportPage.tsx | 20 +- .../ImportDashboardLibraryPanelsList.tsx | 12 +- .../DeletePublicDashboardModal.tsx | 12 +- .../PublicDashboardListTable.tsx | 80 +-- .../VisualizationSuggestionCard.tsx | 91 +-- .../Badges/PluginUpdateAvailableBadge.tsx | 10 +- .../admin/components/Badges/sharedStyles.ts | 11 +- .../admin/components/HorizontalGroup.tsx | 24 +- .../admin/components/PluginActions.tsx | 6 +- .../PluginDetailsHeaderDependencies.tsx | 22 +- .../PluginDetailsHeaderSignature.tsx | 18 +- .../PluginSignatureDetailsBadge.tsx | 32 +- .../admin/components/PluginSubtitle.tsx | 10 +- .../plugins/admin/components/PluginUsage.tsx | 14 +- .../plugins/admin/components/VersionList.tsx | 33 +- .../plugins/admin/hooks/usePluginInfo.tsx | 10 +- .../query/components/QueryEditorRowHeader.tsx | 135 ++-- .../features/query/components/QueryGroup.tsx | 46 +- .../page/components/SearchResultsTable.tsx | 152 ++--- .../components/ServiceAccountProfile.tsx | 6 +- .../components/ServiceAccountProfileRow.tsx | 6 +- .../components/ServiceAccountTokensTable.tsx | 43 +- public/app/features/storage/Breadcrumb.tsx | 32 +- public/app/features/storage/FileView.tsx | 58 +- public/app/features/storage/FolderView.tsx | 44 +- public/app/features/storage/StoragePage.tsx | 50 +- public/app/features/storage/UploadButton.tsx | 6 +- .../ConfigFromQueryTransformerEditor.tsx | 6 +- .../editors/GroupByTransformerEditor.tsx | 26 +- .../components/JSONPathEditor.tsx | 14 +- .../FieldToConfigMappingEditor.tsx | 53 +- .../PrepareTimeSeriesEditor.tsx | 6 +- .../spatial/SpatialTransformerEditor.tsx | 14 +- .../app/features/users/TokenRevokedModal.tsx | 20 +- .../variables/editor/VariableEditorList.tsx | 8 +- .../editor/VariableEditorListRow.tsx | 66 +- .../inspect/VariablesUnknownTable.tsx | 44 +- .../data-hover/DataHoverRows.tsx | 6 +- .../components/CloudMonitoringCheatSheet.tsx | 6 +- .../components/VisualMetricQueryEditor.tsx | 13 +- .../ConfigEditor/XrayLinkConfig.tsx | 8 +- .../LogsQueryEditor/LogsQueryEditor.tsx | 8 +- .../MetricsQueryEditor/DynamicLabelsField.tsx | 12 +- .../LegacyLogGroupNamesSelection.tsx | 6 +- .../elasticsearch/components/AddRemove.tsx | 6 +- .../elasticsearch/components/MetricPicker.tsx | 6 +- .../FiltersSettingsEditor/index.tsx | 20 +- .../BucketScriptSettingsEditor/index.tsx | 28 +- .../TopMetricsSettingsEditor.tsx | 16 +- .../MetricAggregationsEditor/styles.ts | 13 +- .../components/QueryEditor/QueryEditorRow.tsx | 14 +- .../QueryEditor/SettingsEditorContainer.tsx | 37 +- .../components/QueryEditor/index.tsx | 14 +- .../components/QueryEditor/styles.ts | 6 +- .../elasticsearch/configuration/DataLink.tsx | 40 +- .../elasticsearch/configuration/DataLinks.tsx | 18 +- .../QueryEditor/LabelsEditor.tsx | 27 +- .../components/SimulationSchemaForm.tsx | 6 +- .../grafana/components/QueryEditor.tsx | 22 +- .../grafana/components/TimePickerInput.tsx | 157 +++-- .../grafana/components/TimeRegionEditor.tsx | 22 +- .../components/AddGraphiteFunction.tsx | 6 +- .../components/FunctionParamEditor.tsx | 12 +- .../components/GraphiteFunctionEditor.tsx | 6 +- .../components/GraphiteQueryEditor.tsx | 18 +- .../components/MetricTankMetaInspector.tsx | 96 +-- .../graphite/components/TagsSection.tsx | 6 +- .../editor/query/flux/FluxQueryEditor.tsx | 30 +- .../editor/query/fsql/FSQLEditor.tsx | 22 +- .../influxql/visual/VisualInfluxQLEditor.tsx | 6 +- .../plugins/datasource/jaeger/CheatSheet.tsx | 12 +- .../configuration/TraceIdTimeParams.tsx | 16 +- .../loki/components/LokiContextUi.tsx | 118 ++-- .../loki/components/LokiLabelBrowser.tsx | 152 ++--- .../monaco-query-field/MonacoQueryField.tsx | 30 +- .../loki/configuration/DerivedField.tsx | 46 +- .../loki/configuration/DerivedFields.tsx | 30 +- .../components/LabelBrowserModal.tsx | 12 +- .../components/LokiQueryCodeEditor.tsx | 42 +- .../querybuilder/components/QueryPattern.tsx | 32 +- .../components/QueryPatternsModal.tsx | 30 +- .../components/OpenTsdbQueryEditor.tsx | 12 +- .../parca/QueryEditor/LabelsEditor.tsx | 23 +- .../panel/alertlist/AlertInstances.tsx | 22 +- .../panel/alertlist/UnifiedAlertList.tsx | 186 +++--- .../unified-alerting/UngroupedView.tsx | 55 +- public/app/plugins/panel/datagrid/utils.ts | 112 ++-- .../gettingstarted/components/DocsCard.tsx | 50 +- .../components/TutorialCard.tsx | 60 +- .../gettingstarted/components/sharedStyles.ts | 50 +- .../plugins/panel/live/LiveChannelEditor.tsx | 6 +- public/app/plugins/panel/live/LivePanel.tsx | 54 +- .../app/plugins/panel/nodeGraph/EdgeLabel.tsx | 20 +- public/app/plugins/panel/nodeGraph/Legend.tsx | 16 +- public/app/plugins/panel/nodeGraph/Marker.tsx | 32 +- public/app/plugins/panel/nodeGraph/Node.tsx | 96 +-- .../app/plugins/panel/nodeGraph/NodeGraph.tsx | 144 ++--- .../plugins/panel/nodeGraph/ViewControls.tsx | 8 +- .../nodeGraph/editor/ArcOptionsEditor.tsx | 18 +- .../panel/nodeGraph/useContextMenu.tsx | 28 +- .../app/plugins/panel/piechart/PieChart.tsx | 46 +- public/app/plugins/panel/table/TablePanel.tsx | 18 +- .../cells/SparklineCellOptionsEditor.tsx | 12 +- public/app/plugins/panel/text/TextPanel.tsx | 17 +- .../plugins/panel/text/TextPanelEditor.tsx | 14 +- .../plugins/ThresholdDragHandle.tsx | 120 ++-- .../app/plugins/panel/traces/TracesPanel.tsx | 8 +- public/app/plugins/panel/welcome/Welcome.tsx | 112 ++-- .../app/plugins/panel/xychart/AutoEditor.tsx | 40 +- 111 files changed, 2044 insertions(+), 2582 deletions(-) diff --git a/.betterer.results b/.betterer.results index 2b1bffc5496..00955bb243f 100644 --- a/.betterer.results +++ b/.betterer.results @@ -3709,33 +3709,17 @@ exports[`better eslint`] = { [0, 0, 0, "No untranslated strings. Wrap text with ", "0"] ], "public/app/features/logs/components/log-context/LogRowContextModal.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, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"], - [0, 0, 0, "Styles should be written using objects.", "6"], - [0, 0, 0, "Styles should be written using objects.", "7"], - [0, 0, 0, "Styles should be written using objects.", "8"], - [0, 0, 0, "Styles should be written using objects.", "9"], - [0, 0, 0, "Styles should be written using objects.", "10"], - [0, 0, 0, "Styles should be written using objects.", "11"], - [0, 0, 0, "Styles should be written using objects.", "12"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "13"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "14"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "15"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "16"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "17"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], + [0, 0, 0, "No untranslated strings. Wrap text with ", "1"], + [0, 0, 0, "No untranslated strings. Wrap text with ", "2"], + [0, 0, 0, "No untranslated strings. Wrap text with ", "3"], + [0, 0, 0, "No untranslated strings. Wrap text with ", "4"] ], "public/app/features/logs/utils.ts:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], "public/app/features/manage-dashboards/DashboardImportPage.tsx:5381": [ - [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"], - [0, 0, 0, "Styles should be written using objects.", "2"], - [0, 0, 0, "Styles should be written using objects.", "3"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "0"] ], "public/app/features/manage-dashboards/components/ImportDashboardForm.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], @@ -3743,9 +3727,7 @@ exports[`better eslint`] = { [0, 0, 0, "No untranslated strings. Wrap text with ", "2"] ], "public/app/features/manage-dashboards/components/ImportDashboardLibraryPanelsList.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/features/manage-dashboards/components/ImportDashboardOverview.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], @@ -3753,18 +3735,8 @@ exports[`better eslint`] = { [0, 0, 0, "No untranslated strings. Wrap text with ", "2"], [0, 0, 0, "No untranslated strings. Wrap text with ", "3"] ], - "public/app/features/manage-dashboards/components/PublicDashboardListTable/DeletePublicDashboardModal.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"] - ], "public/app/features/manage-dashboards/components/PublicDashboardListTable/PublicDashboardListTable.tsx:5381": [ - [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"], - [0, 0, 0, "Styles should be written using objects.", "2"], - [0, 0, 0, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"], - [0, 0, 0, "Styles should be written using objects.", "6"] + [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"] ], "public/app/features/manage-dashboards/state/actions.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], @@ -3839,13 +3811,6 @@ exports[`better eslint`] = { "public/app/features/panel/components/VizTypePicker/PanelTypeCard.tsx:5381": [ [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"] ], - "public/app/features/panel/components/VizTypePicker/VisualizationSuggestionCard.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, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"] - ], "public/app/features/panel/components/VizTypePicker/VisualizationSuggestions.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], [0, 0, 0, "No untranslated strings. Wrap text with ", "1"] @@ -3882,8 +3847,7 @@ exports[`better eslint`] = { [0, 0, 0, "No untranslated strings. Wrap text with ", "2"] ], "public/app/features/plugins/admin/components/Badges/PluginUpdateAvailableBadge.tsx:5381": [ - [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "0"] ], "public/app/features/plugins/admin/components/Badges/index.ts:5381": [ [0, 0, 0, "Do not re-export imported variable (\`./PluginDisabledBadge\`)", "0"], @@ -3893,9 +3857,6 @@ exports[`better eslint`] = { [0, 0, 0, "Do not re-export imported variable (\`./PluginAngularBadge\`)", "4"], [0, 0, 0, "Do not re-export imported variable (\`./PluginDeprecatedBadge\`)", "5"] ], - "public/app/features/plugins/admin/components/Badges/sharedStyles.ts:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/features/plugins/admin/components/GetStartedWithPlugin/GetStartedWithApp.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], [0, 0, 0, "No untranslated strings. Wrap text with ", "1"] @@ -3907,9 +3868,6 @@ exports[`better eslint`] = { "public/app/features/plugins/admin/components/GetStartedWithPlugin/index.ts:5381": [ [0, 0, 0, "Do not re-export imported variable (\`./GetStartedWithPlugin\`)", "0"] ], - "public/app/features/plugins/admin/components/HorizontalGroup.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/features/plugins/admin/components/InstallControls/ExternallyManagedButton.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], [0, 0, 0, "No untranslated strings. Wrap text with ", "1"], @@ -3929,8 +3887,7 @@ exports[`better eslint`] = { [0, 0, 0, "Do not re-export imported variable (\`./InstallControlsButton\`)", "1"] ], "public/app/features/plugins/admin/components/PluginActions.tsx:5381": [ - [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "0"] ], "public/app/features/plugins/admin/components/PluginDashboards.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], @@ -3958,13 +3915,7 @@ exports[`better eslint`] = { [0, 0, 0, "No untranslated strings. Wrap text with ", "6"] ], "public/app/features/plugins/admin/components/PluginDetailsHeaderDependencies.tsx:5381": [ - [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"], - [0, 0, 0, "Styles should be written using objects.", "2"] - ], - "public/app/features/plugins/admin/components/PluginDetailsHeaderSignature.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, "No untranslated strings. Wrap text with ", "0"] ], "public/app/features/plugins/admin/components/PluginDetailsPage.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], @@ -3982,21 +3933,12 @@ exports[`better eslint`] = { ], "public/app/features/plugins/admin/components/PluginSignatureDetailsBadge.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "1"], - [0, 0, 0, "Styles should be written using objects.", "2"], - [0, 0, 0, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"] - ], - "public/app/features/plugins/admin/components/PluginSubtitle.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "1"] ], "public/app/features/plugins/admin/components/PluginUsage.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], [0, 0, 0, "No untranslated strings. Wrap text with ", "1"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "2"], - [0, 0, 0, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "2"] ], "public/app/features/plugins/admin/components/VersionList.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], @@ -4004,13 +3946,7 @@ exports[`better eslint`] = { [0, 0, 0, "No untranslated strings. Wrap text with ", "2"], [0, 0, 0, "No untranslated strings. Wrap text with ", "3"], [0, 0, 0, "No untranslated strings. Wrap text with ", "4"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "5"], - [0, 0, 0, "Styles should be written using objects.", "6"], - [0, 0, 0, "Styles should be written using objects.", "7"], - [0, 0, 0, "Styles should be written using objects.", "8"] - ], - "public/app/features/plugins/admin/hooks/usePluginInfo.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "5"] ], "public/app/features/plugins/admin/pages/Browse.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], @@ -4105,15 +4041,7 @@ exports[`better eslint`] = { [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"], [0, 0, 0, "No untranslated strings. Wrap text with ", "1"], [0, 0, 0, "No untranslated strings. Wrap text with ", "2"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"], - [0, 0, 0, "Styles should be written using objects.", "6"], - [0, 0, 0, "Styles should be written using objects.", "7"], - [0, 0, 0, "Styles should be written using objects.", "8"], - [0, 0, 0, "Styles should be written using objects.", "9"], - [0, 0, 0, "Styles should be written using objects.", "10"], - [0, 0, 0, "Styles should be written using objects.", "11"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "3"] ], "public/app/features/query/components/QueryErrorAlert.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], @@ -4124,16 +4052,9 @@ exports[`better eslint`] = { [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "1"], [0, 0, 0, "No untranslated strings. Wrap text with ", "2"], [0, 0, 0, "No untranslated strings. Wrap text with ", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"], - [0, 0, 0, "Styles should be written using objects.", "6"], - [0, 0, 0, "Styles should be written using objects.", "7"], - [0, 0, 0, "Styles should be written using objects.", "8"], - [0, 0, 0, "Styles should be written using objects.", "9"], - [0, 0, 0, "Styles should be written using objects.", "10"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "11"], - [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "12"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "13"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "4"], + [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "5"], + [0, 0, 0, "No untranslated strings. Wrap text with ", "6"] ], "public/app/features/query/components/QueryGroupOptions.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], @@ -4227,20 +4148,7 @@ exports[`better eslint`] = { [0, 0, 0, "No untranslated strings. Wrap text with ", "0"] ], "public/app/features/search/page/components/SearchResultsTable.tsx:5381": [ - [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"], - [0, 0, 0, "Styles should be written using objects.", "2"], - [0, 0, 0, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"], - [0, 0, 0, "Styles should be written using objects.", "6"], - [0, 0, 0, "Styles should be written using objects.", "7"], - [0, 0, 0, "Styles should be written using objects.", "8"], - [0, 0, 0, "Styles should be written using objects.", "9"], - [0, 0, 0, "Styles should be written using objects.", "10"], - [0, 0, 0, "Styles should be written using objects.", "11"], - [0, 0, 0, "Styles should be written using objects.", "12"], - [0, 0, 0, "Styles should be written using objects.", "13"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "0"] ], "public/app/features/search/page/components/columns.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], @@ -4294,12 +4202,10 @@ exports[`better eslint`] = { ], "public/app/features/serviceaccounts/components/ServiceAccountProfile.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "1"], - [0, 0, 0, "Styles should be written using objects.", "2"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "1"] ], "public/app/features/serviceaccounts/components/ServiceAccountProfileRow.tsx:5381": [ - [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "0"] ], "public/app/features/serviceaccounts/components/ServiceAccountTokensTable.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], @@ -4308,14 +4214,7 @@ exports[`better eslint`] = { [0, 0, 0, "No untranslated strings. Wrap text with ", "3"], [0, 0, 0, "No untranslated strings. Wrap text with ", "4"], [0, 0, 0, "No untranslated strings. Wrap text with ", "5"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "6"], - [0, 0, 0, "Styles should be written using objects.", "7"], - [0, 0, 0, "Styles should be written using objects.", "8"], - [0, 0, 0, "Styles should be written using objects.", "9"], - [0, 0, 0, "Styles should be written using objects.", "10"], - [0, 0, 0, "Styles should be written using objects.", "11"], - [0, 0, 0, "Styles should be written using objects.", "12"], - [0, 0, 0, "Styles should be written using objects.", "13"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "6"] ], "public/app/features/serviceaccounts/components/ServiceAccountsListItem.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], @@ -4329,9 +4228,6 @@ exports[`better eslint`] = { [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], [0, 0, 0, "No untranslated strings. Wrap text with ", "1"] ], - "public/app/features/storage/Breadcrumb.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/features/storage/CreateNewFolderModal.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"] ], @@ -4339,23 +4235,11 @@ exports[`better eslint`] = { [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], [0, 0, 0, "No untranslated strings. Wrap text with ", "1"], [0, 0, 0, "No untranslated strings. Wrap text with ", "2"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"], - [0, 0, 0, "Styles should be written using objects.", "6"], - [0, 0, 0, "Styles should be written using objects.", "7"], - [0, 0, 0, "Styles should be written using objects.", "8"], - [0, 0, 0, "Styles should be written using objects.", "9"], - [0, 0, 0, "Styles should be written using objects.", "10"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "3"] ], "public/app/features/storage/FolderView.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "1"], - [0, 0, 0, "Styles should be written using objects.", "2"], - [0, 0, 0, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"], - [0, 0, 0, "Styles should be written using objects.", "6"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "1"] ], "public/app/features/storage/RootView.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], @@ -4366,19 +4250,12 @@ exports[`better eslint`] = { ], "public/app/features/storage/StoragePage.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "1"], - [0, 0, 0, "Styles should be written using objects.", "2"], - [0, 0, 0, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"], - [0, 0, 0, "Styles should be written using objects.", "6"], - [0, 0, 0, "Styles should be written using objects.", "7"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "1"] ], "public/app/features/storage/UploadButton.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], [0, 0, 0, "No untranslated strings. Wrap text with ", "1"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "2"], - [0, 0, 0, "Styles should be written using objects.", "3"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "2"] ], "public/app/features/storage/storage.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], @@ -4526,9 +4403,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/features/transformers/configFromQuery/ConfigFromQueryTransformerEditor.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/features/transformers/editors/CalculateFieldTransformerEditor/CumulativeOptionsEditor.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], @@ -4568,10 +4442,7 @@ exports[`better eslint`] = { [0, 0, 0, "No untranslated strings. Wrap text with ", "2"] ], "public/app/features/transformers/editors/GroupByTransformerEditor.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, "Styles should be written using objects.", "3"] + [0, 0, 0, "Do not use any type assertions.", "0"] ], "public/app/features/transformers/editors/MergeTransformerEditor.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"] @@ -4595,9 +4466,7 @@ exports[`better eslint`] = { [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], [0, 0, 0, "No untranslated strings. Wrap text with ", "1"], [0, 0, 0, "No untranslated strings. Wrap text with ", "2"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "3"] ], "public/app/features/transformers/extractFields/extractFields.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], @@ -4612,10 +4481,7 @@ exports[`better eslint`] = { [0, 0, 0, "No untranslated strings. Wrap text with ", "2"], [0, 0, 0, "No untranslated strings. Wrap text with ", "3"], [0, 0, 0, "No untranslated strings. Wrap text with ", "4"], - [0, 0, 0, "Do not use any type assertions.", "5"], - [0, 0, 0, "Styles should be written using objects.", "6"], - [0, 0, 0, "Styles should be written using objects.", "7"], - [0, 0, 0, "Styles should be written using objects.", "8"] + [0, 0, 0, "Do not use any type assertions.", "5"] ], "public/app/features/transformers/fieldToConfigMapping/fieldToConfigMapping.ts:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], @@ -4653,8 +4519,7 @@ exports[`better eslint`] = { [0, 0, 0, "No untranslated strings. Wrap text with ", "10"], [0, 0, 0, "No untranslated strings. Wrap text with ", "11"], [0, 0, 0, "No untranslated strings. Wrap text with ", "12"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "13"], - [0, 0, 0, "Styles should be written using objects.", "14"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "13"] ], "public/app/features/transformers/prepareTimeSeries/prepareTimeSeries.test.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] @@ -4663,10 +4528,6 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] ], - "public/app/features/transformers/spatial/SpatialTransformerEditor.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"] - ], "public/app/features/transformers/spatial/optionsHelper.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Do not use any type assertions.", "1"], @@ -4689,10 +4550,7 @@ exports[`better eslint`] = { [0, 0, 0, "No untranslated strings. Wrap text with ", "1"], [0, 0, 0, "No untranslated strings. Wrap text with ", "2"], [0, 0, 0, "No untranslated strings. Wrap text with ", "3"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"], - [0, 0, 0, "Styles should be written using objects.", "6"], - [0, 0, 0, "Styles should be written using objects.", "7"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "4"] ], "public/app/features/users/UsersActionBar.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"] @@ -4731,21 +4589,13 @@ exports[`better eslint`] = { [0, 0, 0, "No untranslated strings. Wrap text with ", "1"], [0, 0, 0, "No untranslated strings. Wrap text with ", "2"], [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "3"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "4"] ], "public/app/features/variables/editor/VariableEditorListRow.tsx:5381": [ [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"], [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "1"], [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "2"], - [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"], - [0, 0, 0, "Styles should be written using objects.", "6"], - [0, 0, 0, "Styles should be written using objects.", "7"], - [0, 0, 0, "Styles should be written using objects.", "8"], - [0, 0, 0, "Styles should be written using objects.", "9"], - [0, 0, 0, "Styles should be written using objects.", "10"] + [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "3"] ], "public/app/features/variables/editor/getVariableQueryEditor.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], @@ -4779,12 +4629,7 @@ exports[`better eslint`] = { [0, 0, 0, "No untranslated strings. Wrap text with ", "2"], [0, 0, 0, "No untranslated strings. Wrap text with ", "3"], [0, 0, 0, "No untranslated strings. Wrap text with ", "4"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "5"], - [0, 0, 0, "Styles should be written using objects.", "6"], - [0, 0, 0, "Styles should be written using objects.", "7"], - [0, 0, 0, "Styles should be written using objects.", "8"], - [0, 0, 0, "Styles should be written using objects.", "9"], - [0, 0, 0, "Styles should be written using objects.", "10"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "5"] ], "public/app/features/variables/inspect/utils.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], @@ -4917,8 +4762,7 @@ exports[`better eslint`] = { ], "public/app/features/visualization/data-hover/DataHoverRows.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"], - [0, 0, 0, "No untranslated strings. Wrap text with ", "1"], - [0, 0, 0, "Styles should be written using objects.", "2"] + [0, 0, 0, "No untranslated strings. Wrap text with ", "1"] ], "public/app/features/visualization/data-hover/DataHoverView.tsx:5381": [ [0, 0, 0, "No untranslated strings. Wrap text with ", "0"] @@ -4997,9 +4841,6 @@ exports[`better eslint`] = { "public/app/plugins/datasource/cloud-monitoring/components/Aggregation.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], - "public/app/plugins/datasource/cloud-monitoring/components/CloudMonitoringCheatSheet.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/plugins/datasource/cloud-monitoring/components/GraphPeriod.tsx:5381": [ [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"] ], @@ -5009,9 +4850,6 @@ exports[`better eslint`] = { "public/app/plugins/datasource/cloud-monitoring/components/VariableQueryEditor.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], - "public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/plugins/datasource/cloud-monitoring/components/index.ts:5381": [ [0, 0, 0, "Do not re-export imported variable (\`./Project\`)", "0"], [0, 0, 0, "Do not re-export imported variable (\`./GroupBy\`)", "1"], @@ -5080,15 +4918,6 @@ exports[`better eslint`] = { [0, 0, 0, "Do not re-export imported variable (\`./thirdArgAfterSearchQuery\`)", "4"], [0, 0, 0, "Do not re-export imported variable (\`./withinStringQuery\`)", "5"] ], - "public/app/plugins/datasource/cloudwatch/components/ConfigEditor/XrayLinkConfig.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], - "public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryEditor.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], - "public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/DynamicLabelsField.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MetricsQueryEditor.test.tsx:5381": [ [0, 0, 0, "* import is invalid because \'Layout,HorizontalGroup,VerticalGroup\' from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"] ], @@ -5098,9 +4927,6 @@ exports[`better eslint`] = { "public/app/plugins/datasource/cloudwatch/components/QueryEditor/QueryEditor.test.tsx:5381": [ [0, 0, 0, "Do not re-export imported variable (\`./MetricsQueryEditor/SQLCodeEditor\`)", "0"] ], - "public/app/plugins/datasource/cloudwatch/components/shared/LogGroups/LegacyLogGroupNamesSelection.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/plugins/datasource/cloudwatch/components/shared/MetricStatEditor/index.ts:5381": [ [0, 0, 0, "Do not re-export imported variable (\`./MetricStatEditor\`)", "0"] ], @@ -5195,23 +5021,12 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "7"], [0, 0, 0, "Unexpected any. Specify a different type.", "8"] ], - "public/app/plugins/datasource/elasticsearch/components/AddRemove.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], - "public/app/plugins/datasource/elasticsearch/components/MetricPicker.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/BucketAggregationEditor.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], "public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/DateHistogramSettingsEditor.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], - "public/app/plugins/datasource/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/FiltersSettingsEditor/index.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/elasticsearch/components/QueryEditor/BucketAggregationsEditor/SettingsEditor/TermsSettingsEditor.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], @@ -5224,59 +5039,16 @@ exports[`better eslint`] = { "public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/MetricEditor.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], - "public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/BucketScriptSettingsEditor/index.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/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/SettingField.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Do not use any type assertions.", "1"] ], - "public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/SettingsEditor/TopMetricsSettingsEditor.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/elasticsearch/components/QueryEditor/MetricAggregationsEditor/aggregations.ts:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], "public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/state/reducer.ts:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], - "public/app/plugins/datasource/elasticsearch/components/QueryEditor/MetricAggregationsEditor/styles.ts:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], - "public/app/plugins/datasource/elasticsearch/components/QueryEditor/QueryEditorRow.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/elasticsearch/components/QueryEditor/SettingsEditorContainer.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, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"] - ], - "public/app/plugins/datasource/elasticsearch/components/QueryEditor/index.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/elasticsearch/components/QueryEditor/styles.ts:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], - "public/app/plugins/datasource/elasticsearch/configuration/DataLink.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, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"] - ], - "public/app/plugins/datasource/elasticsearch/configuration/DataLinks.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/elasticsearch/datasource.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"], @@ -5295,10 +5067,6 @@ exports[`better eslint`] = { [0, 0, 0, "Do not re-export imported variable (\`./dataquery.gen\`)", "1"], [0, 0, 0, "Do not re-export imported variable (\`ElasticsearchQuery\`)", "2"] ], - "public/app/plugins/datasource/grafana-pyroscope-datasource/QueryEditor/LabelsEditor.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/grafana-pyroscope-datasource/utils.ts:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], @@ -5320,8 +5088,7 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "2"] ], "public/app/plugins/datasource/grafana-testdata-datasource/components/SimulationSchemaForm.tsx:5381": [ - [0, 0, 0, "Unexpected any. Specify a different type.", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"] + [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], "public/app/plugins/datasource/grafana-testdata-datasource/components/index.ts:5381": [ [0, 0, 0, "Do not re-export imported variable (\`./StreamingClientEditor\`)", "0"], @@ -5340,18 +5107,7 @@ exports[`better eslint`] = { "public/app/plugins/datasource/grafana/components/QueryEditor.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"], - [0, 0, 0, "Do not use any type assertions.", "2"], - [0, 0, 0, "Styles should be written using objects.", "3"] - ], - "public/app/plugins/datasource/grafana/components/TimePickerInput.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, "Styles should be written using objects.", "3"] - ], - "public/app/plugins/datasource/grafana/components/TimeRegionEditor.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, "Do not use any type assertions.", "2"] ], "public/app/plugins/datasource/grafana/datasource.ts:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], @@ -5364,35 +5120,6 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "7"], [0, 0, 0, "Do not use any type assertions.", "8"] ], - "public/app/plugins/datasource/graphite/components/AddGraphiteFunction.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], - "public/app/plugins/datasource/graphite/components/FunctionParamEditor.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], - "public/app/plugins/datasource/graphite/components/GraphiteFunctionEditor.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], - "public/app/plugins/datasource/graphite/components/GraphiteQueryEditor.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/graphite/components/MetricTankMetaInspector.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, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"], - [0, 0, 0, "Styles should be written using objects.", "6"], - [0, 0, 0, "Styles should be written using objects.", "7"], - [0, 0, 0, "Styles should be written using objects.", "8"], - [0, 0, 0, "Styles should be written using objects.", "9"] - ], - "public/app/plugins/datasource/graphite/components/TagsSection.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/plugins/datasource/graphite/components/helpers.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], @@ -5497,18 +5224,6 @@ exports[`better eslint`] = { "public/app/plugins/datasource/influxdb/components/editor/config/ConfigEditor.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], - "public/app/plugins/datasource/influxdb/components/editor/query/flux/FluxQueryEditor.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/influxdb/components/editor/query/fsql/FSQLEditor.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/influxdb/components/editor/query/influxql/visual/VisualInfluxQLEditor.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/plugins/datasource/influxdb/datasource.ts:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"], @@ -5562,10 +5277,6 @@ exports[`better eslint`] = { "public/app/plugins/datasource/influxdb/response_parser.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], - "public/app/plugins/datasource/jaeger/CheatSheet.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/jaeger/_importedDependencies/model/transform-trace-data.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], @@ -5575,10 +5286,6 @@ exports[`better eslint`] = { "public/app/plugins/datasource/jaeger/components/QueryEditor.tsx:5381": [ [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"] ], - "public/app/plugins/datasource/jaeger/configuration/TraceIdTimeParams.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/jaeger/datasource.ts:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] @@ -5586,84 +5293,16 @@ exports[`better eslint`] = { "public/app/plugins/datasource/loki/LanguageProvider.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], - "public/app/plugins/datasource/loki/components/LokiContextUi.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, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"], - [0, 0, 0, "Styles should be written using objects.", "6"], - [0, 0, 0, "Styles should be written using objects.", "7"], - [0, 0, 0, "Styles should be written using objects.", "8"], - [0, 0, 0, "Styles should be written using objects.", "9"], - [0, 0, 0, "Styles should be written using objects.", "10"] - ], - "public/app/plugins/datasource/loki/components/LokiLabelBrowser.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, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"], - [0, 0, 0, "Styles should be written using objects.", "6"], - [0, 0, 0, "Styles should be written using objects.", "7"], - [0, 0, 0, "Styles should be written using objects.", "8"], - [0, 0, 0, "Styles should be written using objects.", "9"], - [0, 0, 0, "Styles should be written using objects.", "10"], - [0, 0, 0, "Styles should be written using objects.", "11"], - [0, 0, 0, "Styles should be written using objects.", "12"], - [0, 0, 0, "Styles should be written using objects.", "13"] - ], - "public/app/plugins/datasource/loki/components/monaco-query-field/MonacoQueryField.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/loki/configuration/ConfigEditor.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], - "public/app/plugins/datasource/loki/configuration/DerivedField.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, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"], - [0, 0, 0, "Styles should be written using objects.", "6"] - ], - "public/app/plugins/datasource/loki/configuration/DerivedFields.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, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"] - ], "public/app/plugins/datasource/loki/datasource.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] ], - "public/app/plugins/datasource/loki/querybuilder/components/LabelBrowserModal.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/plugins/datasource/loki/querybuilder/components/LokiQueryBuilder.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], - "public/app/plugins/datasource/loki/querybuilder/components/LokiQueryCodeEditor.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/loki/querybuilder/components/QueryPattern.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, "Styles should be written using objects.", "3"] - ], - "public/app/plugins/datasource/loki/querybuilder/components/QueryPatternsModal.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/loki/types.ts:5381": [ [0, 0, 0, "Do not re-export imported variable (\`LokiQueryDirection\`)", "0"], [0, 0, 0, "Do not re-export imported variable (\`LokiQueryType\`)", "1"], @@ -5673,10 +5312,6 @@ exports[`better eslint`] = { [0, 0, 0, "Do not re-export imported variable (\`MixedDatasource\`)", "0"], [0, 0, 0, "Do not re-export imported variable (\`Datasource\`)", "1"] ], - "public/app/plugins/datasource/opentsdb/components/OpenTsdbQueryEditor.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/opentsdb/datasource.d.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], @@ -5700,10 +5335,6 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "16"], [0, 0, 0, "Unexpected any. Specify a different type.", "17"] ], - "public/app/plugins/datasource/parca/QueryEditor/LabelsEditor.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/parca/webpack.config.ts:5381": [ [0, 0, 0, "Do not re-export imported variable (\`config\`)", "0"] ], @@ -5792,38 +5423,6 @@ exports[`better eslint`] = { "public/app/plugins/datasource/zipkin/webpack.config.ts:5381": [ [0, 0, 0, "Do not re-export imported variable (\`config\`)", "0"] ], - "public/app/plugins/panel/alertlist/AlertInstances.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/panel/alertlist/UnifiedAlertList.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, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"], - [0, 0, 0, "Styles should be written using objects.", "6"], - [0, 0, 0, "Styles should be written using objects.", "7"], - [0, 0, 0, "Styles should be written using objects.", "8"], - [0, 0, 0, "Styles should be written using objects.", "9"], - [0, 0, 0, "Styles should be written using objects.", "10"], - [0, 0, 0, "Styles should be written using objects.", "11"], - [0, 0, 0, "Styles should be written using objects.", "12"], - [0, 0, 0, "Styles should be written using objects.", "13"], - [0, 0, 0, "Styles should be written using objects.", "14"], - [0, 0, 0, "Styles should be written using objects.", "15"], - [0, 0, 0, "Styles should be written using objects.", "16"] - ], - "public/app/plugins/panel/alertlist/unified-alerting/UngroupedView.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, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"], - [0, 0, 0, "Styles should be written using objects.", "6"] - ], "public/app/plugins/panel/annolist/AnnoListPanel.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], @@ -5850,11 +5449,6 @@ exports[`better eslint`] = { [0, 0, 0, "Do not re-export imported variable (\`CandlestickFieldMap\`)", "6"], [0, 0, 0, "Do not re-export imported variable (\`FieldConfig\`)", "7"] ], - "public/app/plugins/panel/datagrid/utils.ts: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/panel/debug/CursorView.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] @@ -5921,24 +5515,6 @@ exports[`better eslint`] = { "public/app/plugins/panel/geomap/utils/tooltip.ts:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], - "public/app/plugins/panel/gettingstarted/components/DocsCard.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, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"] - ], - "public/app/plugins/panel/gettingstarted/components/TutorialCard.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, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"] - ], - "public/app/plugins/panel/gettingstarted/components/sharedStyles.ts:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/plugins/panel/heatmap/HeatmapPanel.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] @@ -5973,18 +5549,8 @@ exports[`better eslint`] = { [0, 0, 0, "Do not use any type assertions.", "15"], [0, 0, 0, "Do not use any type assertions.", "16"] ], - "public/app/plugins/panel/live/LiveChannelEditor.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/plugins/panel/live/LivePanel.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, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"], - [0, 0, 0, "Styles should be written using objects.", "6"], - [0, 0, 0, "Styles should be written using objects.", "7"] + [0, 0, 0, "Do not use any type assertions.", "0"] ], "public/app/plugins/panel/logs/LogsPanel.test.tsx:5381": [ [0, 0, 0, "* import is invalid because \'Layout,HorizontalGroup,VerticalGroup\' from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"] @@ -5995,55 +5561,16 @@ exports[`better eslint`] = { "public/app/plugins/panel/nodeGraph/Edge.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], - "public/app/plugins/panel/nodeGraph/EdgeLabel.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/panel/nodeGraph/Legend.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/panel/nodeGraph/Marker.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/panel/nodeGraph/Node.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, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"], - [0, 0, 0, "Styles should be written using objects.", "6"], - [0, 0, 0, "Styles should be written using objects.", "7"], - [0, 0, 0, "Styles should be written using objects.", "8"] - ], "public/app/plugins/panel/nodeGraph/NodeGraph.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, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"], - [0, 0, 0, "Styles should be written using objects.", "6"], - [0, 0, 0, "Styles should be written using objects.", "7"], - [0, 0, 0, "Styles should be written using objects.", "8"], - [0, 0, 0, "Styles should be written using objects.", "9"], - [0, 0, 0, "Do not use any type assertions.", "10"], - [0, 0, 0, "Do not use any type assertions.", "11"], - [0, 0, 0, "Do not use any type assertions.", "12"], - [0, 0, 0, "Do not use any type assertions.", "13"] + [0, 0, 0, "Do not use any type assertions.", "0"], + [0, 0, 0, "Do not use any type assertions.", "1"], + [0, 0, 0, "Do not use any type assertions.", "2"], + [0, 0, 0, "Do not use any type assertions.", "3"] ], "public/app/plugins/panel/nodeGraph/ViewControls.tsx:5381": [ [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"], [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "1"], - [0, 0, 0, "Styles should be written using objects.", "2"], - [0, 0, 0, "Unexpected any. Specify a different type.", "3"] - ], - "public/app/plugins/panel/nodeGraph/editor/ArcOptionsEditor.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] + [0, 0, 0, "Unexpected any. Specify a different type.", "2"] ], "public/app/plugins/panel/nodeGraph/index.ts:5381": [ [0, 0, 0, "Do not re-export imported variable (\`./NodeGraph\`)", "0"] @@ -6054,17 +5581,6 @@ exports[`better eslint`] = { "public/app/plugins/panel/nodeGraph/types.ts:5381": [ [0, 0, 0, "Do not re-export imported variable (\`./panelcfg.gen\`)", "0"] ], - "public/app/plugins/panel/nodeGraph/useContextMenu.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/panel/piechart/PieChart.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, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"] - ], "public/app/plugins/panel/piechart/migrations.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] @@ -6076,13 +5592,8 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] ], - "public/app/plugins/panel/table/TablePanel.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/panel/table/cells/SparklineCellOptionsEditor.tsx:5381": [ - [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"] + [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"] ], "public/app/plugins/panel/table/migrations.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], @@ -6090,13 +5601,6 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "2"], [0, 0, 0, "Unexpected any. Specify a different type.", "3"] ], - "public/app/plugins/panel/text/TextPanel.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/panel/text/TextPanelEditor.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/plugins/panel/text/textPanelMigrationHandler.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], @@ -6124,15 +5628,6 @@ exports[`better eslint`] = { "public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin2.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], - "public/app/plugins/panel/timeseries/plugins/ThresholdDragHandle.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, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"], - [0, 0, 0, "Styles should be written using objects.", "6"] - ], "public/app/plugins/panel/timeseries/plugins/annotations2/AnnotationEditor2.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], @@ -6143,21 +5638,6 @@ exports[`better eslint`] = { [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] ], - "public/app/plugins/panel/traces/TracesPanel.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], - "public/app/plugins/panel/welcome/Welcome.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, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"], - [0, 0, 0, "Styles should be written using objects.", "5"] - ], - "public/app/plugins/panel/xychart/AutoEditor.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/panel/xychart/ManualEditor.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], diff --git a/public/app/features/logs/components/log-context/LogRowContextModal.tsx b/public/app/features/logs/components/log-context/LogRowContextModal.tsx index e5a5d83f531..b1b3dcd36d9 100644 --- a/public/app/features/logs/components/log-context/LogRowContextModal.tsx +++ b/public/app/features/logs/components/log-context/LogRowContextModal.tsx @@ -34,91 +34,91 @@ import { LogContextButtons } from './LogContextButtons'; const getStyles = (theme: GrafanaTheme2) => { return { - modal: css` - width: 85vw; - ${theme.breakpoints.down('md')} { - width: 100%; - } - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - `, - sticky: css` - position: sticky; - z-index: 1; - top: -1px; - bottom: -1px; - `, - entry: css` - & > td { - padding: ${theme.spacing(1)} 0 ${theme.spacing(1)} 0; - } - background: ${theme.colors.emphasize(theme.colors.background.secondary)}; + modal: css({ + width: '85vw', + [theme.breakpoints.down('md')]: { + width: '100%', + }, + top: '50%', + left: '50%', + transform: 'translate(-50%, -50%)', + }), + sticky: css({ + position: 'sticky', + zIndex: 1, + top: '-1px', + bottom: '-1px', + }), + entry: css({ + '& > td': { + padding: theme.spacing(1, 0, 1, 0), + }, + background: theme.colors.emphasize(theme.colors.background.secondary), - & > table { - margin-bottom: 0; - } + '& > table': { + marginBottom: 0, + }, - & .log-row-menu { - margin-top: -6px; - } - `, - datasourceUi: css` - padding-bottom: ${theme.spacing(1.25)}; - display: flex; - align-items: center; - `, - logRowGroups: css` - overflow: auto; - max-height: 75%; - align-self: stretch; - display: inline-block; - border: 1px solid ${theme.colors.border.weak}; - border-radius: ${theme.shape.radius.default}; - & > table { - min-width: 100%; - } - `, - flexColumn: css` - display: flex; - flex-direction: column; - padding: 0 ${theme.spacing(3)} ${theme.spacing(3)} ${theme.spacing(3)}; - `, - flexRow: css` - display: flex; - flex-direction: row; - align-items: center; - & > div:last-child { - margin-left: auto; - } - `, - noMarginBottom: css` - & > table { - margin-bottom: 0; - } - `, - hidden: css` - display: none; - `, - paddingTop: css` - padding-top: ${theme.spacing(1)}; - `, - paddingBottom: css` - padding-bottom: ${theme.spacing(1)}; - `, - link: css` - color: ${theme.colors.text.secondary}; - font-size: ${theme.typography.bodySmall.fontSize}; - :hover { - color: ${theme.colors.text.link}; - } - `, - loadingCell: css` - position: sticky; - left: 50%; - display: inline-block; - transform: translateX(-50%); - `, + '& .log-row-menu': { + marginTop: '-6px', + }, + }), + datasourceUi: css({ + paddingBottom: theme.spacing(1.25), + display: 'flex', + alignItems: 'center', + }), + logRowGroups: css({ + overflow: 'auto', + maxHeight: '75%', + alignSelf: 'stretch', + display: 'inline-block', + border: `1px solid ${theme.colors.border.weak}`, + borderRadius: theme.shape.radius.default, + '& > table': { + minWidth: '100%', + }, + }), + flexColumn: css({ + display: 'flex', + flexDirection: 'column', + padding: theme.spacing(0, 3, 3, 3), + }), + flexRow: css({ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + '& > div:last-child': { + marginLeft: 'auto', + }, + }), + noMarginBottom: css({ + '& > table': { + marginBottom: 0, + }, + }), + hidden: css({ + display: 'none', + }), + paddingTop: css({ + paddingTop: theme.spacing(1), + }), + paddingBottom: css({ + paddingBottom: theme.spacing(1), + }), + link: css({ + color: theme.colors.text.secondary, + fontSize: theme.typography.bodySmall.fontSize, + ':hover': { + color: theme.colors.text.link, + }, + }), + loadingCell: css({ + position: 'sticky', + left: '50%', + display: 'inline-block', + transform: 'translateX(-50%)', + }), }; }; diff --git a/public/app/features/manage-dashboards/DashboardImportPage.tsx b/public/app/features/manage-dashboards/DashboardImportPage.tsx index 69a0f35f866..fa5a4285804 100644 --- a/public/app/features/manage-dashboards/DashboardImportPage.tsx +++ b/public/app/features/manage-dashboards/DashboardImportPage.tsx @@ -256,15 +256,15 @@ export default DashboardImport; const importStyles = stylesFactory((theme: GrafanaTheme2) => { return { - option: css` - margin-bottom: ${theme.spacing(4)}; - max-width: 600px; - `, - labelWithLink: css` - max-width: 100%; - `, - linkWithinLabel: css` - font-size: inherit; - `, + option: css({ + marginBottom: theme.spacing(4), + maxWidth: '600px', + }), + labelWithLink: css({ + maxWidth: '100%', + }), + linkWithinLabel: css({ + fontSize: 'inherit', + }), }; }); diff --git a/public/app/features/manage-dashboards/components/ImportDashboardLibraryPanelsList.tsx b/public/app/features/manage-dashboards/components/ImportDashboardLibraryPanelsList.tsx index 65cb03005c6..dace18c3de9 100644 --- a/public/app/features/manage-dashboards/components/ImportDashboardLibraryPanelsList.tsx +++ b/public/app/features/manage-dashboards/components/ImportDashboardLibraryPanelsList.tsx @@ -52,11 +52,11 @@ export function ImportDashboardLibraryPanelsList({ function getStyles(theme: GrafanaTheme2) { return { - spacer: css` - margin-bottom: ${theme.spacing(2)}; - `, - item: css` - margin-bottom: ${theme.spacing(1)}; - `, + spacer: css({ + marginBottom: theme.spacing(2), + }), + item: css({ + marginBottom: theme.spacing(1), + }), }; } diff --git a/public/app/features/manage-dashboards/components/PublicDashboardListTable/DeletePublicDashboardModal.tsx b/public/app/features/manage-dashboards/components/PublicDashboardListTable/DeletePublicDashboardModal.tsx index 6b433ee26cf..096937064e4 100644 --- a/public/app/features/manage-dashboards/components/PublicDashboardListTable/DeletePublicDashboardModal.tsx +++ b/public/app/features/manage-dashboards/components/PublicDashboardListTable/DeletePublicDashboardModal.tsx @@ -47,10 +47,10 @@ export const DeletePublicDashboardModal = ({ }; const getStyles = (theme: GrafanaTheme2) => ({ - title: css` - margin-bottom: ${theme.spacing(1)}; - `, - description: css` - font-size: ${theme.typography.body.fontSize}; - `, + title: css({ + marginBottom: theme.spacing(1), + }), + description: css({ + fontSize: theme.typography.body.fontSize, + }), }); diff --git a/public/app/features/manage-dashboards/components/PublicDashboardListTable/PublicDashboardListTable.tsx b/public/app/features/manage-dashboards/components/PublicDashboardListTable/PublicDashboardListTable.tsx index 171289c149a..fd7b46d4cb4 100644 --- a/public/app/features/manage-dashboards/components/PublicDashboardListTable/PublicDashboardListTable.tsx +++ b/public/app/features/manage-dashboards/components/PublicDashboardListTable/PublicDashboardListTable.tsx @@ -209,46 +209,46 @@ export const PublicDashboardListTable = () => { }; const getStyles = (theme: GrafanaTheme2) => ({ - list: css` - list-style-type: none; - margin-bottom: ${theme.spacing(2)}; - `, - card: css` - ${theme.breakpoints.up('sm')} { - display: flex; - } - `, - heading: css` - display: flex; - align-items: center; - gap: ${theme.spacing(1)}; - flex: 1; - `, - orphanedTitle: css` - display: flex; - align-items: center; - gap: ${theme.spacing(1)}; - `, - actions: css` - display: flex; - align-items: center; - position: relative; + list: css({ + listStyleType: 'none', + marginBottom: theme.spacing(2), + }), + card: css({ + [theme.breakpoints.up('sm')]: { + display: 'flex', + }, + }), + heading: css({ + display: 'flex', + alignItems: 'center', + gap: theme.spacing(1), + flex: 1, + }), + orphanedTitle: css({ + display: 'flex', + alignItems: 'center', + gap: theme.spacing(1), + }), + actions: css({ + display: 'flex', + alignItems: 'center', + position: 'relative', - gap: ${theme.spacing(0.5)}; - ${theme.breakpoints.up('sm')} { - gap: ${theme.spacing(1)}; - } - `, - pauseSwitch: css` - display: flex; - gap: ${theme.spacing(1)}; - align-items: center; - font-size: ${theme.typography.bodySmall.fontSize}; - margin-bottom: 0; - flex: 1; + gap: theme.spacing(0.5), + [theme.breakpoints.up('sm')]: { + gap: theme.spacing(1), + }, + }), + pauseSwitch: css({ + display: 'flex', + gap: theme.spacing(1), + alignItems: 'center', + fontSize: theme.typography.bodySmall.fontSize, + marginBottom: 0, + flex: 1, - ${theme.breakpoints.up('sm')} { - padding-right: ${theme.spacing(2)}; - } - `, + [theme.breakpoints.up('sm')]: { + paddingRight: theme.spacing(2), + }, + }), }); diff --git a/public/app/features/panel/components/VizTypePicker/VisualizationSuggestionCard.tsx b/public/app/features/panel/components/VizTypePicker/VisualizationSuggestionCard.tsx index 46559272fe5..5bf2e56e23f 100644 --- a/public/app/features/panel/components/VizTypePicker/VisualizationSuggestionCard.tsx +++ b/public/app/features/panel/components/VizTypePicker/VisualizationSuggestionCard.tsx @@ -83,55 +83,56 @@ const getStyles = (theme: GrafanaTheme2) => { borderRadius: theme.spacing(2), bottom: 0, }), - vizBox: css` - position: relative; - background: none; - border-radius: ${theme.shape.radius.default}; - cursor: pointer; - border: 1px solid ${theme.colors.border.medium}; + vizBox: css({ + position: 'relative', + background: 'none', + borderRadius: theme.shape.radius.default, + cursor: 'pointer', + border: `1px solid ${theme.colors.border.medium}`, - transition: ${theme.transitions.create(['background'], { - duration: theme.transitions.duration.short, - })}; + [theme.transitions.handleMotion('no-preference', 'reduce')]: { + transition: theme.transitions.create(['background'], { + duration: theme.transitions.duration.short, + }), + }, - &:hover { - background: ${theme.colors.background.secondary}; - } - `, - imgBox: css` - display: flex; - flex-direction: column; - height: 100%; + '&:hover': { + background: theme.colors.background.secondary, + }, + }), + imgBox: css({ + display: 'flex', + flexDirection: 'column', + height: '100%', - justify-self: center; - color: ${theme.colors.text.primary}; - width: 100%; - display: flex; + justifySelf: 'center', + color: theme.colors.text.primary, + width: '100%', - justify-content: center; - align-items: center; - text-align: center; - `, - name: css` - padding-bottom: ${theme.spacing(0.5)}; - margin-top: ${theme.spacing(-1)}; - font-size: ${theme.typography.bodySmall.fontSize}; - white-space: nowrap; - overflow: hidden; - color: ${theme.colors.text.secondary}; - font-weight: ${theme.typography.fontWeightMedium}; - text-overflow: ellipsis; - `, - img: css` - max-width: ${theme.spacing(8)}; - max-height: ${theme.spacing(8)}; - `, - renderContainer: css` - position: absolute; - transform-origin: left top; - top: 6px; - left: 6px; - `, + justifyContent: 'center', + alignItems: 'center', + textAlign: 'center', + }), + name: css({ + paddingBottom: theme.spacing(0.5), + marginTop: theme.spacing(-1), + fontSize: theme.typography.bodySmall.fontSize, + whiteSpace: 'nowrap', + overflow: 'hidden', + color: theme.colors.text.secondary, + fontWeight: theme.typography.fontWeightMedium, + textOverflow: 'ellipsis', + }), + img: css({ + maxWidth: theme.spacing(8), + maxHeight: theme.spacing(8), + }), + renderContainer: css({ + position: 'absolute', + transformOrigin: 'left top', + top: '6px', + left: '6px', + }), }; }; diff --git a/public/app/features/plugins/admin/components/Badges/PluginUpdateAvailableBadge.tsx b/public/app/features/plugins/admin/components/Badges/PluginUpdateAvailableBadge.tsx index e9d93c11655..1dfb63e38bb 100644 --- a/public/app/features/plugins/admin/components/Badges/PluginUpdateAvailableBadge.tsx +++ b/public/app/features/plugins/admin/components/Badges/PluginUpdateAvailableBadge.tsx @@ -17,10 +17,10 @@ export function PluginUpdateAvailableBadge({ plugin }: Props): React.ReactElemen export const getStyles = (theme: GrafanaTheme2) => { return { - hasUpdate: css` - color: ${theme.colors.text.secondary}; - font-size: ${theme.typography.bodySmall.fontSize}; - margin-bottom: 0; - `, + hasUpdate: css({ + color: theme.colors.text.secondary, + fontSize: theme.typography.bodySmall.fontSize, + marginBottom: 0, + }), }; }; diff --git a/public/app/features/plugins/admin/components/Badges/sharedStyles.ts b/public/app/features/plugins/admin/components/Badges/sharedStyles.ts index 9ad5e6521f4..091759e20a1 100644 --- a/public/app/features/plugins/admin/components/Badges/sharedStyles.ts +++ b/public/app/features/plugins/admin/components/Badges/sharedStyles.ts @@ -2,8 +2,9 @@ import { css } from '@emotion/css'; import { GrafanaTheme2 } from '@grafana/data'; -export const getBadgeColor = (theme: GrafanaTheme2) => css` - background: ${theme.colors.background.primary}; - border-color: ${theme.colors.border.strong}; - color: ${theme.colors.text.secondary}; -`; +export const getBadgeColor = (theme: GrafanaTheme2) => + css({ + background: theme.colors.background.primary, + borderColor: theme.colors.border.strong, + color: theme.colors.text.secondary, + }); diff --git a/public/app/features/plugins/admin/components/HorizontalGroup.tsx b/public/app/features/plugins/admin/components/HorizontalGroup.tsx index 6bdc6b2e790..9e6957ea5c1 100644 --- a/public/app/features/plugins/admin/components/HorizontalGroup.tsx +++ b/public/app/features/plugins/admin/components/HorizontalGroup.tsx @@ -18,16 +18,16 @@ export const HorizontalGroup = ({ children, wrap, className }: HorizontalGroupPr }; const getStyles = (theme: GrafanaTheme2, wrap?: boolean) => ({ - container: css` - display: flex; - flex-direction: row; - flex-wrap: ${wrap ? 'wrap' : 'no-wrap'}; - & > * { - margin-bottom: ${theme.spacing()}; - margin-right: ${theme.spacing()}; - } - & > *:last-child { - margin-right: 0; - } - `, + container: css({ + display: 'flex', + flexDirection: 'row', + flexWrap: wrap ? 'wrap' : 'nowrap', + '& > *': { + marginBottom: theme.spacing(), + marginRight: theme.spacing(), + }, + '& > *:last-child': { + marginRight: 0, + }, + }), }); diff --git a/public/app/features/plugins/admin/components/PluginActions.tsx b/public/app/features/plugins/admin/components/PluginActions.tsx index 220d3b93b45..ab81073ceda 100644 --- a/public/app/features/plugins/admin/components/PluginActions.tsx +++ b/public/app/features/plugins/admin/components/PluginActions.tsx @@ -73,8 +73,8 @@ export const PluginActions = ({ plugin }: Props) => { const getStyles = (theme: GrafanaTheme2) => { return { - message: css` - color: ${theme.colors.text.secondary}; - `, + message: css({ + color: theme.colors.text.secondary, + }), }; }; diff --git a/public/app/features/plugins/admin/components/PluginDetailsHeaderDependencies.tsx b/public/app/features/plugins/admin/components/PluginDetailsHeaderDependencies.tsx index 9d4756a8fb0..7b0a0f07625 100644 --- a/public/app/features/plugins/admin/components/PluginDetailsHeaderDependencies.tsx +++ b/public/app/features/plugins/admin/components/PluginDetailsHeaderDependencies.tsx @@ -50,21 +50,21 @@ export function PluginDetailsHeaderDependencies({ plugin, grafanaDependency }: P export const getStyles = (theme: GrafanaTheme2) => { return { - dependencyTitle: css` - margin-right: ${theme.spacing(0.5)}; + dependencyTitle: css({ + marginRight: theme.spacing(0.5), - &::after { - content: ''; - padding: 0; - } - `, + '&::after': { + content: "''", + padding: 0, + }, + }), depBadge: css({ display: 'flex', alignItems: 'flex-start', }), - icon: css` - color: ${theme.colors.text.secondary}; - margin-right: ${theme.spacing(0.5)}; - `, + icon: css({ + color: theme.colors.text.secondary, + marginRight: theme.spacing(0.5), + }), }; }; diff --git a/public/app/features/plugins/admin/components/PluginDetailsHeaderSignature.tsx b/public/app/features/plugins/admin/components/PluginDetailsHeaderSignature.tsx index 5314def26a6..86d7516fae4 100644 --- a/public/app/features/plugins/admin/components/PluginDetailsHeaderSignature.tsx +++ b/public/app/features/plugins/admin/components/PluginDetailsHeaderSignature.tsx @@ -34,14 +34,14 @@ export function PluginDetailsHeaderSignature({ plugin }: Props): React.ReactElem export const getStyles = (theme: GrafanaTheme2) => { return { - container: css` - display: flex; - flex-wrap: wrap; - gap: ${theme.spacing(0.5)}; - `, - link: css` - display: inline-flex; - align-items: center; - `, + container: css({ + display: 'flex', + flexWrap: 'wrap', + gap: theme.spacing(0.5), + }), + link: css({ + display: 'inline-flex', + alignItems: 'center', + }), }; }; diff --git a/public/app/features/plugins/admin/components/PluginSignatureDetailsBadge.tsx b/public/app/features/plugins/admin/components/PluginSignatureDetailsBadge.tsx index 56ed277517f..945d6c2ee41 100644 --- a/public/app/features/plugins/admin/components/PluginSignatureDetailsBadge.tsx +++ b/public/app/features/plugins/admin/components/PluginSignatureDetailsBadge.tsx @@ -53,20 +53,20 @@ export const DetailsBadge = ({ children }: React.PropsWithChildren<{}>) => { }; const getStyles = (theme: GrafanaTheme2) => ({ - badge: css` - background-color: ${theme.colors.background.canvas}; - border-color: ${theme.colors.border.strong}; - color: ${theme.colors.text.secondary}; - white-space: nowrap; - `, - detailsWrapper: css` - align-items: center; - display: flex; - `, - strong: css` - color: ${theme.colors.text.primary}; - `, - icon: css` - margin-right: ${theme.spacing(0.5)}; - `, + badge: css({ + backgroundColor: theme.colors.background.canvas, + borderColor: theme.colors.border.strong, + color: theme.colors.text.secondary, + whiteSpace: 'nowrap', + }), + detailsWrapper: css({ + alignItems: 'center', + display: 'flex', + }), + strong: css({ + color: theme.colors.text.primary, + }), + icon: css({ + marginRight: theme.spacing(0.5), + }), }); diff --git a/public/app/features/plugins/admin/components/PluginSubtitle.tsx b/public/app/features/plugins/admin/components/PluginSubtitle.tsx index 926d27ac198..6f8175908db 100644 --- a/public/app/features/plugins/admin/components/PluginSubtitle.tsx +++ b/public/app/features/plugins/admin/components/PluginSubtitle.tsx @@ -76,10 +76,10 @@ export const PluginSubtitle = ({ plugin }: Props) => { export const getStyles = (theme: GrafanaTheme2) => { return { - subtitle: css` - display: flex; - flex-direction: column; - gap: ${theme.spacing(1)}; - `, + subtitle: css({ + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(1), + }), }; }; diff --git a/public/app/features/plugins/admin/components/PluginUsage.tsx b/public/app/features/plugins/admin/components/PluginUsage.tsx index 734f35d14d7..5bee5f99d45 100644 --- a/public/app/features/plugins/admin/components/PluginUsage.tsx +++ b/public/app/features/plugins/admin/components/PluginUsage.tsx @@ -86,12 +86,12 @@ export function PluginUsage({ plugin }: Props) { export const getStyles = (theme: GrafanaTheme2) => { return { - wrap: css` - width: 100%; - height: 100%; - `, - info: css` - padding-bottom: 30px; - `, + wrap: css({ + width: '100%', + height: '100%', + }), + info: css({ + paddingBottom: '30px', + }), }; }; diff --git a/public/app/features/plugins/admin/components/VersionList.tsx b/public/app/features/plugins/admin/components/VersionList.tsx index 6b97c51c247..043490d5ff0 100644 --- a/public/app/features/plugins/admin/components/VersionList.tsx +++ b/public/app/features/plugins/admin/components/VersionList.tsx @@ -57,21 +57,20 @@ export const VersionList = ({ versions = [], installedVersion }: Props) => { }; const getStyles = (theme: GrafanaTheme2) => ({ - container: css` - padding: ${theme.spacing(2, 4, 3)}; - `, - table: css` - table-layout: fixed; - width: 100%; - td, - th { - padding: ${theme.spacing()} 0; - } - th { - font-size: ${theme.typography.h5.fontSize}; - } - `, - currentVersion: css` - font-weight: ${theme.typography.fontWeightBold}; - `, + container: css({ + padding: theme.spacing(2, 4, 3), + }), + table: css({ + tableLayout: 'fixed', + width: '100%', + 'td, th': { + padding: `${theme.spacing()} 0`, + }, + th: { + fontSize: theme.typography.h5.fontSize, + }, + }), + currentVersion: css({ + fontWeight: theme.typography.fontWeightBold, + }), }); diff --git a/public/app/features/plugins/admin/hooks/usePluginInfo.tsx b/public/app/features/plugins/admin/hooks/usePluginInfo.tsx index 0b4fca761a5..be9a6c2c9aa 100644 --- a/public/app/features/plugins/admin/hooks/usePluginInfo.tsx +++ b/public/app/features/plugins/admin/hooks/usePluginInfo.tsx @@ -88,10 +88,10 @@ export const usePluginInfo = (plugin?: CatalogPlugin): PageInfoItem[] => { export const getStyles = (theme: GrafanaTheme2) => { return { - subtitle: css` - display: flex; - flex-direction: column; - gap: ${theme.spacing(1)}; - `, + subtitle: css({ + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(1), + }), }; }; diff --git a/public/app/features/query/components/QueryEditorRowHeader.tsx b/public/app/features/query/components/QueryEditorRowHeader.tsx index be1ff4eeed9..76d6980bcf5 100644 --- a/public/app/features/query/components/QueryEditorRowHeader.tsx +++ b/public/app/features/query/components/QueryEditorRowHeader.tsx @@ -146,79 +146,78 @@ const renderDataSource = ( const getStyles = (theme: GrafanaTheme2) => { return { - wrapper: css` - label: Wrapper; - display: flex; - align-items: center; - margin-left: ${theme.spacing(0.5)}; - overflow: hidden; - `, - queryNameWrapper: css` - display: flex; - cursor: pointer; - border: 1px solid transparent; - border-radius: ${theme.shape.borderRadius(2)}; - align-items: center; - padding: 0 0 0 ${theme.spacing(0.5)}; - margin: 0; - background: transparent; - overflow: hidden; + wrapper: css({ + label: 'Wrapper', + display: 'flex', + alignItems: 'center', + marginLeft: theme.spacing(0.5), + overflow: 'hidden', + }), + queryNameWrapper: css({ + display: 'flex', + cursor: 'pointer', + border: '1px solid transparent', + borderRadius: theme.shape.radius.default, + alignItems: 'center', + padding: theme.spacing(0, 0, 0, 0.5), + margin: 0, + background: 'transparent', + overflow: 'hidden', - &:hover { - background: ${theme.colors.action.hover}; - border: 1px dashed ${theme.colors.border.strong}; - } + '&:hover': { + background: theme.colors.action.hover, + border: `1px dashed ${theme.colors.border.strong}`, + }, - &:focus { - border: 2px solid ${theme.colors.primary.border}; - } + '&:focus': { + border: `2px solid ${theme.colors.primary.border}`, + }, - &:hover, - &:focus { - .query-name-edit-icon { - visibility: visible; - } - } - `, - queryName: css` - font-weight: ${theme.typography.fontWeightMedium}; - color: ${theme.colors.primary.text}; - cursor: pointer; - overflow: hidden; - margin-left: ${theme.spacing(0.5)}; - `, + '&:hover, &:focus': { + '.query-name-edit-icon': { + visibility: 'visible', + }, + }, + }), + queryName: css({ + fontWeight: theme.typography.fontWeightMedium, + color: theme.colors.primary.text, + cursor: 'pointer', + overflow: 'hidden', + marginLeft: theme.spacing(0.5), + }), queryEditIcon: cx( - css` - margin-left: ${theme.spacing(2)}; - visibility: hidden; - `, + css({ + marginLeft: theme.spacing(2), + visibility: 'hidden', + }), 'query-name-edit-icon' ), - queryNameInput: css` - max-width: 300px; - margin: -4px 0; - `, - collapsedText: css` - font-weight: ${theme.typography.fontWeightRegular}; - font-size: ${theme.typography.bodySmall.fontSize}; - color: ${theme.colors.text.secondary}; - padding-left: ${theme.spacing(1)}; - align-items: center; - overflow: hidden; - font-style: italic; - white-space: nowrap; - text-overflow: ellipsis; - `, - contextInfo: css` - font-size: ${theme.typography.bodySmall.fontSize}; - font-style: italic; - color: ${theme.colors.text.secondary}; - padding-left: 10px; - padding-right: 10px; - `, - itemWrapper: css` - display: flex; - margin-left: 4px; - `, + queryNameInput: css({ + maxWidth: '300px', + margin: '-4px 0', + }), + collapsedText: css({ + fontWeight: theme.typography.fontWeightRegular, + fontSize: theme.typography.bodySmall.fontSize, + color: theme.colors.text.secondary, + paddingLeft: theme.spacing(1), + alignItems: 'center', + overflow: 'hidden', + fontStyle: 'italic', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + }), + contextInfo: css({ + fontSize: theme.typography.bodySmall.fontSize, + fontStyle: 'italic', + color: theme.colors.text.secondary, + paddingLeft: '10px', + paddingRight: '10px', + }), + itemWrapper: css({ + display: 'flex', + marginLeft: '4px', + }), }; }; diff --git a/public/app/features/query/components/QueryGroup.tsx b/public/app/features/query/components/QueryGroup.tsx index ffa97a3fce2..affb0328aaf 100644 --- a/public/app/features/query/components/QueryGroup.tsx +++ b/public/app/features/query/components/QueryGroup.tsx @@ -355,29 +355,29 @@ const getStyles = stylesFactory(() => { const { theme } = config; return { - innerWrapper: css` - display: flex; - flex-direction: column; - padding: ${theme.spacing.md}; - `, - dataSourceRow: css` - display: flex; - margin-bottom: ${theme.spacing.md}; - `, - dataSourceRowItem: css` - margin-right: ${theme.spacing.inlineFormMargin}; - `, - dataSourceRowItemOptions: css` - flex-grow: 1; - margin-right: ${theme.spacing.inlineFormMargin}; - `, - queriesWrapper: css` - padding-bottom: 16px; - `, - expressionWrapper: css``, - expressionButton: css` - margin-right: ${theme.spacing.sm}; - `, + innerWrapper: css({ + display: 'flex', + flexDirection: 'column', + padding: theme.spacing.md, + }), + dataSourceRow: css({ + display: 'flex', + marginBottom: theme.spacing.md, + }), + dataSourceRowItem: css({ + marginRight: theme.spacing.inlineFormMargin, + }), + dataSourceRowItemOptions: css({ + flexGrow: 1, + marginRight: theme.spacing.inlineFormMargin, + }), + queriesWrapper: css({ + paddingBottom: '16px', + }), + expressionWrapper: css({}), + expressionButton: css({ + marginRight: theme.spacing.sm, + }), }; }); diff --git a/public/app/features/search/page/components/SearchResultsTable.tsx b/public/app/features/search/page/components/SearchResultsTable.tsx index 20ae3c292ff..f2b105c3b69 100644 --- a/public/app/features/search/page/components/SearchResultsTable.tsx +++ b/public/app/features/search/page/components/SearchResultsTable.tsx @@ -228,44 +228,44 @@ const getStyles = (theme: GrafanaTheme2) => { const rowHoverBg = theme.colors.emphasize(theme.colors.background.primary, 0.03); return { - noData: css` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - height: 100%; - `, - headerCell: css` - align-items: center; - display: flex; - overflo: hidden; - padding: ${theme.spacing(1)}; - `, - headerRow: css` - background-color: ${theme.colors.background.secondary}; - display: flex; - gap: ${theme.spacing(1)}; - height: ${ROW_HEIGHT}px; - `, - selectedRow: css` - background-color: ${rowHoverBg}; - box-shadow: inset 3px 0px ${theme.colors.primary.border}; - `, - rowContainer: css` - display: flex; - gap: ${theme.spacing(1)}; - height: ${ROW_HEIGHT}px; - label: row; - &:hover { - background-color: ${rowHoverBg}; - } + noData: css({ + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + height: '100%', + }), + headerCell: css({ + alignItems: 'center', + display: 'flex', + overflo: 'hidden', + padding: theme.spacing(1), + }), + headerRow: css({ + backgroundColor: theme.colors.background.secondary, + display: 'flex', + gap: theme.spacing(1), + height: `${ROW_HEIGHT}px`, + }), + selectedRow: css({ + backgroundColor: rowHoverBg, + boxShadow: `inset 3px 0px ${theme.colors.primary.border}`, + }), + rowContainer: css({ + display: 'flex', + gap: theme.spacing(1), + height: `${ROW_HEIGHT}px`, + label: 'row', + '&:hover': { + backgroundColor: rowHoverBg, + }, - &:not(:hover) div[role='cell'] { - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - `, + "&:not(:hover) div[role='cell']": { + whiteSpace: 'nowrap', + overflow: 'hidden', + textOverflow: 'ellipsis', + }, + }), }; }; @@ -278,53 +278,53 @@ const getColumnStyles = (theme: GrafanaTheme2) => { display: 'flex', alignItems: 'center', }), - nameCellStyle: css` - overflow: hidden; - text-overflow: ellipsis; - user-select: text; - white-space: nowrap; - `, + nameCellStyle: css({ + overflow: 'hidden', + textOverflow: 'ellipsis', + userSelect: 'text', + whiteSpace: 'nowrap', + }), typeCell: css({ gap: theme.spacing(0.5), }), - typeIcon: css` - fill: ${theme.colors.text.secondary}; - `, - datasourceItem: css` - span { - &:hover { - color: ${theme.colors.text.link}; - } - } - `, - missingTitleText: css` - color: ${theme.colors.text.disabled}; - font-style: italic; - `, - invalidDatasourceItem: css` - color: ${theme.colors.error.main}; - text-decoration: line-through; - `, + typeIcon: css({ + fill: theme.colors.text.secondary, + }), + datasourceItem: css({ + span: { + '&:hover': { + color: theme.colors.text.link, + }, + }, + }), + missingTitleText: css({ + color: theme.colors.text.disabled, + fontStyle: 'italic', + }), + invalidDatasourceItem: css({ + color: theme.colors.error.main, + textDecoration: 'line-through', + }), locationContainer: css({ display: 'flex', flexWrap: 'nowrap', gap: theme.spacing(1), overflow: 'hidden', }), - locationItem: css` - align-items: center; - color: ${theme.colors.text.secondary}; - display: flex; - flex-wrap: nowrap; - gap: 4px; - overflow: hidden; - `, - explainItem: css` - cursor: pointer; - `, - tagList: css` - justify-content: flex-start; - flex-wrap: nowrap; - `, + locationItem: css({ + alignItems: 'center', + color: theme.colors.text.secondary, + display: 'flex', + flexWrap: 'nowrap', + gap: '4px', + overflow: 'hidden', + }), + explainItem: css({ + cursor: 'pointer', + }), + tagList: css({ + justifyContent: 'flex-start', + flexWrap: 'nowrap', + }), }; }; diff --git a/public/app/features/serviceaccounts/components/ServiceAccountProfile.tsx b/public/app/features/serviceaccounts/components/ServiceAccountProfile.tsx index 5aa5ff9bdc0..9cfa59a01f4 100644 --- a/public/app/features/serviceaccounts/components/ServiceAccountProfile.tsx +++ b/public/app/features/serviceaccounts/components/ServiceAccountProfile.tsx @@ -85,7 +85,7 @@ export function ServiceAccountProfile({ serviceAccount, timeZone, onChange }: Pr } export const getStyles = (theme: GrafanaTheme2) => ({ - section: css` - margin-bottom: ${theme.spacing(4)}; - `, + section: css({ + marginBottom: theme.spacing(4), + }), }); diff --git a/public/app/features/serviceaccounts/components/ServiceAccountProfileRow.tsx b/public/app/features/serviceaccounts/components/ServiceAccountProfileRow.tsx index 8fad7855b82..3688054b46d 100644 --- a/public/app/features/serviceaccounts/components/ServiceAccountProfileRow.tsx +++ b/public/app/features/serviceaccounts/components/ServiceAccountProfileRow.tsx @@ -100,8 +100,8 @@ export const ServiceAccountProfileRow = ({ label, value, inputType, disabled, on const getStyles = (theme: GrafanaTheme2) => { return { - disabled: css` - color: ${theme.colors.text.secondary}; - `, + disabled: css({ + color: theme.colors.text.secondary, + }), }; }; diff --git a/public/app/features/serviceaccounts/components/ServiceAccountTokensTable.tsx b/public/app/features/serviceaccounts/components/ServiceAccountTokensTable.tsx index f4463033f67..11c70a882e0 100644 --- a/public/app/features/serviceaccounts/components/ServiceAccountTokensTable.tsx +++ b/public/app/features/serviceaccounts/components/ServiceAccountTokensTable.tsx @@ -121,25 +121,26 @@ const TokenExpiration = ({ timeZone, token }: TokenExpirationProps) => { }; const getStyles = (theme: GrafanaTheme2) => ({ - tableRow: (hasExpired: boolean | undefined) => css` - color: ${hasExpired ? theme.colors.text.secondary : theme.colors.text.primary}; - `, - tooltipContainer: css` - margin-left: ${theme.spacing(1)}; - `, - toolTipIcon: css` - color: ${theme.colors.error.text}; - `, - secondsUntilExpiration: css` - color: ${theme.colors.warning.text}; - `, - hasExpired: css` - color: ${theme.colors.error.text}; - `, - neverExpire: css` - color: ${theme.colors.text.secondary}; - `, - section: css` - margin-bottom: ${theme.spacing(4)}; - `, + tableRow: (hasExpired: boolean | undefined) => + css({ + color: hasExpired ? theme.colors.text.secondary : theme.colors.text.primary, + }), + tooltipContainer: css({ + marginLeft: theme.spacing(1), + }), + toolTipIcon: css({ + color: theme.colors.error.text, + }), + secondsUntilExpiration: css({ + color: theme.colors.warning.text, + }), + hasExpired: css({ + color: theme.colors.error.text, + }), + neverExpire: css({ + color: theme.colors.text.secondary, + }), + section: css({ + marginBottom: theme.spacing(4), + }), }); diff --git a/public/app/features/storage/Breadcrumb.tsx b/public/app/features/storage/Breadcrumb.tsx index a221ce28f42..2242751782a 100644 --- a/public/app/features/storage/Breadcrumb.tsx +++ b/public/app/features/storage/Breadcrumb.tsx @@ -39,23 +39,23 @@ export function Breadcrumb({ pathName, onPathChange, rootIcon }: Props) { function getStyles(theme: GrafanaTheme2) { return { - breadCrumb: css` - list-style: none; - padding: ${theme.spacing(2, 1)}; + breadCrumb: css({ + listStyle: 'none', + padding: theme.spacing(2, 1), - li { - display: inline; + li: { + display: 'inline', - :not(:last-child) { - color: ${theme.colors.text.link}; - cursor: pointer; - } - + li:before { - content: '>'; - padding: ${theme.spacing(1)}; - color: ${theme.colors.text.secondary}; - } - } - `, + ':not(:last-child)': { + color: theme.colors.text.link, + cursor: 'pointer', + }, + '+ li:before': { + content: "'>'", + padding: theme.spacing(1), + color: theme.colors.text.secondary, + }, + }, + }), }; } diff --git a/public/app/features/storage/FileView.tsx b/public/app/features/storage/FileView.tsx index 653eff5717e..80059c6c76d 100644 --- a/public/app/features/storage/FileView.tsx +++ b/public/app/features/storage/FileView.tsx @@ -125,37 +125,31 @@ function getFileDisplayInfo(path: string): FileDisplayInfo { const getStyles = (theme: GrafanaTheme2) => ({ // TODO: remove `height: 90%` - wrapper: css` - display: flex; - flex-direction: column; - height: 100%; - `, - tableControlRowWrapper: css` - display: flex; - flex-direction: row; - align-items: center; - margin-bottom: ${theme.spacing(2)}; - `, + wrapper: css({ + display: 'flex', + flexDirection: 'column', + height: '100%', + }), + tableControlRowWrapper: css({ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + marginBottom: theme.spacing(2), + }), // TODO: remove `height: 100%` - tableWrapper: css` - border: 1px solid ${theme.colors.border.medium}; - height: 100%; - `, - uploadSpot: css` - margin-left: ${theme.spacing(2)}; - `, - border: css` - border: 1px solid ${theme.colors.border.medium}; - padding: ${theme.spacing(2)}; - `, - img: css` - max-width: 100%; - // max-height: 147px; - // fill: ${theme.colors.text.primary}; - `, - icon: css` - // max-width: 100%; - // max-height: 147px; - // fill: ${theme.colors.text.primary}; - `, + tableWrapper: css({ + border: `1px solid ${theme.colors.border.medium}`, + height: '100%', + }), + uploadSpot: css({ + marginLeft: theme.spacing(2), + }), + border: css({ + border: `1px solid ${theme.colors.border.medium}`, + padding: theme.spacing(2), + }), + img: css({ + maxWidth: '100%', + }), + icon: css({}), }); diff --git a/public/app/features/storage/FolderView.tsx b/public/app/features/storage/FolderView.tsx index bd956c94387..2ada5b0ae33 100644 --- a/public/app/features/storage/FolderView.tsx +++ b/public/app/features/storage/FolderView.tsx @@ -43,27 +43,27 @@ export function FolderView({ listing, view }: Props) { const getStyles = (theme: GrafanaTheme2) => ({ // TODO: remove `height: 90%` - wrapper: css` - display: flex; - flex-direction: column; - height: 100%; - `, - tableControlRowWrapper: css` - display: flex; - flex-direction: row; - align-items: center; - margin-bottom: ${theme.spacing(2)}; - `, + wrapper: css({ + display: 'flex', + flexDirection: 'column', + height: '100%', + }), + tableControlRowWrapper: css({ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + marginBottom: theme.spacing(2), + }), // TODO: remove `height: 100%` - tableWrapper: css` - border: 1px solid ${theme.colors.border.medium}; - height: 100%; - `, - uploadSpot: css` - margin-left: ${theme.spacing(2)}; - `, - border: css` - border: 1px solid ${theme.colors.border.medium}; - padding: ${theme.spacing(2)}; - `, + tableWrapper: css({ + border: `1px solid ${theme.colors.border.medium}`, + height: '100%', + }), + uploadSpot: css({ + marginLeft: theme.spacing(2), + }), + border: css({ + border: `1px solid ${theme.colors.border.medium}`, + padding: theme.spacing(2), + }), }); diff --git a/public/app/features/storage/StoragePage.tsx b/public/app/features/storage/StoragePage.tsx index 3217e58ccc3..94b597e77f4 100644 --- a/public/app/features/storage/StoragePage.tsx +++ b/public/app/features/storage/StoragePage.tsx @@ -267,30 +267,30 @@ export default function StoragePage(props: Props) { const getStyles = (theme: GrafanaTheme2) => ({ // TODO: remove `height: 90%` - wrapper: css` - display: flex; - flex-direction: column; - height: 100%; - `, - tableControlRowWrapper: css` - display: flex; - flex-direction: row; - align-items: center; - margin-bottom: ${theme.spacing(2)}; - `, + wrapper: css({ + display: 'flex', + flexDirection: 'column', + height: '100%', + }), + tableControlRowWrapper: css({ + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + marginBottom: theme.spacing(2), + }), // TODO: remove `height: 100%` - tableWrapper: css` - border: 1px solid ${theme.colors.border.medium}; - height: 100%; - `, - border: css` - border: 1px solid ${theme.colors.border.medium}; - padding: ${theme.spacing(2)}; - `, - errorAlert: css` - padding-top: 20px; - `, - uploadButton: css` - margin-right: ${theme.spacing(2)}; - `, + tableWrapper: css({ + border: `1px solid ${theme.colors.border.medium}`, + height: '100%', + }), + border: css({ + border: `1px solid ${theme.colors.border.medium}`, + padding: theme.spacing(2), + }), + errorAlert: css({ + paddingTop: '20px', + }), + uploadButton: css({ + marginRight: theme.spacing(2), + }), }); diff --git a/public/app/features/storage/UploadButton.tsx b/public/app/features/storage/UploadButton.tsx index 7d90427d1d2..989e3d49690 100644 --- a/public/app/features/storage/UploadButton.tsx +++ b/public/app/features/storage/UploadButton.tsx @@ -112,7 +112,7 @@ export function UploadButton({ setErrorMessages, setPath, path, fileNames }: Pro } const getStyles = (theme: GrafanaTheme2) => ({ - uploadButton: css` - margin-right: ${theme.spacing(2)}; - `, + uploadButton: css({ + marginRight: theme.spacing(2), + }), }); diff --git a/public/app/features/transformers/configFromQuery/ConfigFromQueryTransformerEditor.tsx b/public/app/features/transformers/configFromQuery/ConfigFromQueryTransformerEditor.tsx index 0b46b136dc4..87ffe52cbb3 100644 --- a/public/app/features/transformers/configFromQuery/ConfigFromQueryTransformerEditor.tsx +++ b/public/app/features/transformers/configFromQuery/ConfigFromQueryTransformerEditor.tsx @@ -99,7 +99,7 @@ export const configFromQueryTransformRegistryItem: TransformerRegistryItem ({ - matcherOptions: css` - min-width: 404px; - `, + matcherOptions: css({ + minWidth: '404px', + }), }); diff --git a/public/app/features/transformers/editors/GroupByTransformerEditor.tsx b/public/app/features/transformers/editors/GroupByTransformerEditor.tsx index 21a12c9585f..845d192250a 100644 --- a/public/app/features/transformers/editors/GroupByTransformerEditor.tsx +++ b/public/app/features/transformers/editors/GroupByTransformerEditor.tsx @@ -127,19 +127,19 @@ export const GroupByFieldConfiguration = ({ fieldName, config, onConfigChange }: const getStyles = (theme: GrafanaTheme2) => { return { - label: css` - label { - min-width: ${theme.spacing(32)}; - } - `, - operation: css` - flex-shrink: 0; - height: 100%; - width: ${theme.spacing(24)}; - `, - aggregations: css` - flex-grow: 1; - `, + label: css({ + label: { + minWidth: theme.spacing(32), + }, + }), + operation: css({ + flexShrink: 0, + height: '100%', + width: theme.spacing(24), + }), + aggregations: css({ + flexGrow: 1, + }), }; }; diff --git a/public/app/features/transformers/extractFields/components/JSONPathEditor.tsx b/public/app/features/transformers/extractFields/components/JSONPathEditor.tsx index 5d90d167bdb..a25ab5367e6 100644 --- a/public/app/features/transformers/extractFields/components/JSONPathEditor.tsx +++ b/public/app/features/transformers/extractFields/components/JSONPathEditor.tsx @@ -120,12 +120,12 @@ const getTooltips = () => { function getStyle() { return { - list: css` - margin-left: 20px; - `, - removeIcon: css` - margin: 0 0 0 4px; - align-items: center; - `, + list: css({ + marginLeft: '20px', + }), + removeIcon: css({ + margin: '0 0 0 4px', + alignItems: 'center', + }), }; } diff --git a/public/app/features/transformers/fieldToConfigMapping/FieldToConfigMappingEditor.tsx b/public/app/features/transformers/fieldToConfigMapping/FieldToConfigMappingEditor.tsx index 3dfa9b92838..be8edf7be09 100644 --- a/public/app/features/transformers/fieldToConfigMapping/FieldToConfigMappingEditor.tsx +++ b/public/app/features/transformers/fieldToConfigMapping/FieldToConfigMappingEditor.tsx @@ -202,32 +202,31 @@ function configHandlerToSelectOption( } const getStyles = (theme: GrafanaTheme2) => ({ - table: css` - margin-top: ${theme.spacing(1)}; + table: css({ + marginTop: theme.spacing(1), - td, - th { - border-right: 4px solid ${theme.colors.background.primary}; - border-bottom: 4px solid ${theme.colors.background.primary}; - white-space: nowrap; - } - th { - font-size: ${theme.typography.bodySmall.fontSize}; - line-height: ${theme.spacing(4)}; - padding: ${theme.spacing(0, 1)}; - } - `, - labelCell: css` - font-size: ${theme.typography.bodySmall.fontSize}; - background: ${theme.colors.background.secondary}; - padding: ${theme.spacing(0, 1)}; - max-width: 400px; - overflow: hidden; - text-overflow: ellipsis; - min-width: 140px; - `, - selectCell: css` - padding: 0; - min-width: 161px; - `, + 'td, th': { + borderRight: `4px solid ${theme.colors.background.primary}`, + borderBottom: `4px solid ${theme.colors.background.primary}`, + whiteSpace: 'nowrap', + }, + th: { + fontSize: theme.typography.bodySmall.fontSize, + lineHeight: theme.spacing(4), + padding: theme.spacing(0, 1), + }, + }), + labelCell: css({ + fontSize: theme.typography.bodySmall.fontSize, + background: theme.colors.background.secondary, + padding: theme.spacing(0, 1), + maxWidth: '400px', + overflow: 'hidden', + textOverflow: 'ellipsis', + minWidth: '140px', + }), + selectCell: css({ + padding: 0, + minWidth: '161px', + }), }); diff --git a/public/app/features/transformers/prepareTimeSeries/PrepareTimeSeriesEditor.tsx b/public/app/features/transformers/prepareTimeSeries/PrepareTimeSeriesEditor.tsx index 05c0b67a2de..2d608199c53 100644 --- a/public/app/features/transformers/prepareTimeSeries/PrepareTimeSeriesEditor.tsx +++ b/public/app/features/transformers/prepareTimeSeries/PrepareTimeSeriesEditor.tsx @@ -110,9 +110,9 @@ export function PrepareTimeSeriesEditor(props: TransformerUIProps ({ - info: css` - margin-left: 20px; - `, + info: css({ + marginLeft: '20px', + }), }); export const prepareTimeseriesTransformerRegistryItem: TransformerRegistryItem = { diff --git a/public/app/features/transformers/spatial/SpatialTransformerEditor.tsx b/public/app/features/transformers/spatial/SpatialTransformerEditor.tsx index 29d22fd4b8c..d24a3cd7ed4 100644 --- a/public/app/features/transformers/spatial/SpatialTransformerEditor.tsx +++ b/public/app/features/transformers/spatial/SpatialTransformerEditor.tsx @@ -149,13 +149,13 @@ export const SetGeometryTransformerEditor = (props: Props) => { const getStyles = (theme: GrafanaTheme2) => { return { - wrap: css` - margin-bottom: 20px; - `, - item: css` - border-left: 4px solid ${theme.colors.border.strong}; - padding-left: 10px; - `, + wrap: css({ + marginBottom: '20px', + }), + item: css({ + borderLeft: `4px solid ${theme.colors.border.strong}`, + paddingLeft: '10px', + }), }; }; diff --git a/public/app/features/users/TokenRevokedModal.tsx b/public/app/features/users/TokenRevokedModal.tsx index c48d7a9db04..c3d33be079b 100644 --- a/public/app/features/users/TokenRevokedModal.tsx +++ b/public/app/features/users/TokenRevokedModal.tsx @@ -50,14 +50,14 @@ export const TokenRevokedModal = (props: Props) => { }; const getStyles = (theme: GrafanaTheme2) => ({ - infobox: css` - margin-bottom: 0; - `, - text: css` - margin: ${theme.spacing(1, 0, 2)}; - `, - backdrop: css` - background-color: ${theme.colors.background.canvas}; - opacity: 0.8; - `, + infobox: css({ + marginBottom: 0, + }), + text: css({ + margin: theme.spacing(1, 0, 2), + }), + backdrop: css({ + backgroundColor: theme.colors.background.canvas, + opacity: 0.8, + }), }); diff --git a/public/app/features/variables/editor/VariableEditorList.tsx b/public/app/features/variables/editor/VariableEditorList.tsx index 38a09f1d081..51baebb56d8 100644 --- a/public/app/features/variables/editor/VariableEditorList.tsx +++ b/public/app/features/variables/editor/VariableEditorList.tsx @@ -143,8 +143,8 @@ function EmptyVariablesList({ onAdd }: { onAdd: () => void }): ReactElement { } const getStyles = () => ({ - tableContainer: css` - overflow: scroll; - width: 100%; - `, + tableContainer: css({ + overflow: 'scroll', + width: '100%', + }), }); diff --git a/public/app/features/variables/editor/VariableEditorListRow.tsx b/public/app/features/variables/editor/VariableEditorListRow.tsx index 6eb57615074..7c5b6490c57 100644 --- a/public/app/features/variables/editor/VariableEditorListRow.tsx +++ b/public/app/features/variables/editor/VariableEditorListRow.tsx @@ -154,38 +154,38 @@ function VariableCheckIndicator({ passed }: VariableCheckIndicatorProps): ReactE function getStyles(theme: GrafanaTheme2) { return { - dragHandle: css` - cursor: grab; - margin-left: ${theme.spacing(1)}; - `, - column: css` - width: 1%; - `, - nameLink: css` - cursor: pointer; - color: ${theme.colors.primary.text}; - `, - definitionColumn: css` - width: 100%; - max-width: 200px; - cursor: pointer; - overflow: hidden; - text-overflow: ellipsis; - -o-text-overflow: ellipsis; - white-space: nowrap; - `, - iconPassed: css` - color: ${theme.v1.palette.greenBase}; - margin-right: ${theme.spacing(2)}; - `, - iconFailed: css` - color: ${theme.v1.palette.orange}; - margin-right: ${theme.spacing(2)}; - `, - icons: css` - display: flex; - gap: ${theme.spacing(2)}; - align-items: center; - `, + dragHandle: css({ + cursor: 'grab', + marginLeft: theme.spacing(1), + }), + column: css({ + width: '1%', + }), + nameLink: css({ + cursor: 'pointer', + color: theme.colors.primary.text, + }), + definitionColumn: css({ + width: '100%', + maxWidth: '200px', + cursor: 'pointer', + overflow: 'hidden', + textOverflow: 'ellipsis', + OTextOverflow: 'ellipsis', + whiteSpace: 'nowrap', + }), + iconPassed: css({ + color: theme.v1.palette.greenBase, + marginRight: theme.spacing(2), + }), + iconFailed: css({ + color: theme.v1.palette.orange, + marginRight: theme.spacing(2), + }), + icons: css({ + display: 'flex', + gap: theme.spacing(2), + alignItems: 'center', + }), }; } diff --git a/public/app/features/variables/inspect/VariablesUnknownTable.tsx b/public/app/features/variables/inspect/VariablesUnknownTable.tsx index fa788237584..cd7196118bf 100644 --- a/public/app/features/variables/inspect/VariablesUnknownTable.tsx +++ b/public/app/features/variables/inspect/VariablesUnknownTable.tsx @@ -123,26 +123,26 @@ function UnknownTable({ usages }: { usages: UsagesToNetwork[] }): ReactElement { } const getStyles = (theme: GrafanaTheme2) => ({ - container: css` - margin-top: ${theme.spacing(4)}; - padding-top: ${theme.spacing(4)}; - `, - infoIcon: css` - margin-left: ${theme.spacing(1)}; - `, - defaultColumn: css` - width: 1%; - `, - firstColumn: css` - width: 1%; - vertical-align: top; - color: ${theme.colors.text.maxContrast}; - `, - lastColumn: css` - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - width: 100%; - text-align: right; - `, + container: css({ + marginTop: theme.spacing(4), + paddingTop: theme.spacing(4), + }), + infoIcon: css({ + marginLeft: theme.spacing(1), + }), + defaultColumn: css({ + width: '1%', + }), + firstColumn: css({ + width: '1%', + verticalAlign: 'top', + color: theme.colors.text.maxContrast, + }), + lastColumn: css({ + overflow: 'hidden', + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + width: '100%', + textAlign: 'right', + }), }); diff --git a/public/app/features/visualization/data-hover/DataHoverRows.tsx b/public/app/features/visualization/data-hover/DataHoverRows.tsx index 5d09dd5a206..d99fcfd04f9 100644 --- a/public/app/features/visualization/data-hover/DataHoverRows.tsx +++ b/public/app/features/visualization/data-hover/DataHoverRows.tsx @@ -108,7 +108,7 @@ export const generateLabel = (feature: FeatureLike, idx: number): string | React }; const getStyles = (theme: GrafanaTheme2) => ({ - collapsibleRow: css` - margin-bottom: 0; - `, + collapsibleRow: css({ + marginBottom: 0, + }), }); diff --git a/public/app/plugins/datasource/cloud-monitoring/components/CloudMonitoringCheatSheet.tsx b/public/app/plugins/datasource/cloud-monitoring/components/CloudMonitoringCheatSheet.tsx index 65f8d6e3a4c..d4d01d419e4 100644 --- a/public/app/plugins/datasource/cloud-monitoring/components/CloudMonitoringCheatSheet.tsx +++ b/public/app/plugins/datasource/cloud-monitoring/components/CloudMonitoringCheatSheet.tsx @@ -27,9 +27,9 @@ export default class CloudMonitoringCheatSheet extends PureComponent< Patterns:
  • {`${'{{metric.type}}'}`} = metric type e.g. compute.googleapis.com/instance/cpu/usage_time diff --git a/public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.tsx b/public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.tsx index 0c420bbc547..42397cf1205 100644 --- a/public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.tsx +++ b/public/app/plugins/datasource/cloud-monitoring/components/VisualMetricQueryEditor.tsx @@ -312,11 +312,12 @@ export function Editor({ ); } -const getStyles = (theme: GrafanaTheme2) => css` - label: grafana-select-option-description; - font-weight: normal; - font-style: italic; - color: ${theme.colors.text.secondary}; -`; +const getStyles = (theme: GrafanaTheme2) => + css({ + label: 'grafana-select-option-description', + fontWeight: 'normal', + fontStyle: 'italic', + color: theme.colors.text.secondary, + }); export const VisualMetricQueryEditor = React.memo(Editor); diff --git a/public/app/plugins/datasource/cloudwatch/components/ConfigEditor/XrayLinkConfig.tsx b/public/app/plugins/datasource/cloudwatch/components/ConfigEditor/XrayLinkConfig.tsx index c3c8bd677ea..a76ea416630 100644 --- a/public/app/plugins/datasource/cloudwatch/components/ConfigEditor/XrayLinkConfig.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/ConfigEditor/XrayLinkConfig.tsx @@ -6,10 +6,10 @@ import { DataSourcePicker, getDataSourceSrv } from '@grafana/runtime'; import { Alert, Field, InlineField, useStyles2 } from '@grafana/ui'; const getStyles = (theme: GrafanaTheme2) => ({ - infoText: css` - padding-bottom: ${theme.spacing(2)}; - color: ${theme.colors.text.secondary}; - `, + infoText: css({ + paddingBottom: theme.spacing(2), + color: theme.colors.text.secondary, + }), }); interface Props { diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryEditor.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryEditor.tsx index 2ed46ebd85e..d98522b8990 100644 --- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryEditor.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/LogsQueryEditor/LogsQueryEditor.tsx @@ -14,10 +14,10 @@ type Props = QueryEditorProps { return ( diff --git a/public/app/plugins/datasource/elasticsearch/components/AddRemove.tsx b/public/app/plugins/datasource/elasticsearch/components/AddRemove.tsx index a353e3e4edb..84ef224c45e 100644 --- a/public/app/plugins/datasource/elasticsearch/components/AddRemove.tsx +++ b/public/app/plugins/datasource/elasticsearch/components/AddRemove.tsx @@ -16,9 +16,9 @@ interface Props { export const AddRemove = ({ index, onAdd, onRemove, elements }: Props) => { return (
    {index === 0 && (