From 0f98bd3b7bed7687fe07df88fe55f986d4302daa Mon Sep 17 00:00:00 2001 From: kay delaney <45561153+kaydelaney@users.noreply.github.com> Date: Thu, 25 Apr 2024 20:18:02 +0100 Subject: [PATCH] Chore: Rewrite dashboard component css using object styles (#86930) --- .betterer.results | 170 ++---------------- .../AddWidgetModal/AddWidgetModal.tsx | 29 ++- .../AnnotationSettingsEdit.tsx | 6 +- .../AnnotationSettingsList.tsx | 8 +- .../components/DashNav/DashNavButton.tsx | 8 +- .../DashboardLoading/DashboardFailed.tsx | 12 +- .../DashboardLoading/DashboardLoading.tsx | 22 +-- .../DashboardSettings/ListNewButton.tsx | 6 +- .../DeleteDashboard/DeleteDashboardModal.tsx | 6 +- .../components/HelpWizard/HelpWizard.tsx | 38 ++-- .../PanelEditor/DynamicConfigValueEditor.tsx | 26 ++- .../components/PanelEditor/OptionsPane.tsx | 72 ++++---- .../PanelEditor/OptionsPaneItemDescriptor.tsx | 8 +- .../PanelEditor/OptionsPaneOptions.tsx | 100 +++++------ .../PanelEditor/OverrideCategoryTitle.tsx | 36 ++-- .../components/PanelEditor/PanelEditor.tsx | 116 ++++++------ .../PanelEditor/PanelEditorTabs.tsx | 40 ++--- .../PanelEditor/VisualizationButton.tsx | 14 +- .../PanelEditor/VisualizationSelectPane.tsx | 82 ++++----- .../PublicDashboardNotAvailable.tsx | 58 +++--- .../components/RowOptions/RowOptionsModal.tsx | 8 +- .../SaveDashboard/SaveDashboardErrorProxy.tsx | 31 ++-- .../SaveDashboard/UnsavedChangesModal.tsx | 6 +- .../SaveDashboard/forms/SaveDashboardForm.tsx | 12 +- .../forms/SaveProvisionedDashboardForm.tsx | 14 +- .../ConfigPublicDashboard.tsx | 30 ++-- .../EmailSharingConfiguration.tsx | 92 +++++----- .../ConfigPublicDashboard/SettingsSummary.tsx | 12 +- .../AcknowledgeCheckboxes.tsx | 6 +- .../CreatePublicDashboard.tsx | 46 ++--- .../UnsupportedDataSourcesAlert.tsx | 8 +- .../components/SubMenu/AnnotationPicker.tsx | 32 ++-- .../dashboard/components/SubMenu/SubMenu.tsx | 27 ++- .../TransformationEditor.tsx | 143 ++++++++------- .../TransformationPickerNg.tsx | 20 +-- 35 files changed, 593 insertions(+), 751 deletions(-) diff --git a/.betterer.results b/.betterer.results index ac9529357cb..acb169c5f64 100644 --- a/.betterer.results +++ b/.betterer.results @@ -2495,17 +2495,8 @@ exports[`better eslint`] = { "public/app/features/dashboard/components/AddLibraryPanelWidget/index.ts:5381": [ [0, 0, 0, "Do not re-export imported variable (\`./AddLibraryPanelWidget\`)", "0"] ], - "public/app/features/dashboard/components/AddWidgetModal/AddWidgetModal.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/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.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"] - ], - "public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] + [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"] ], "public/app/features/dashboard/components/AnnotationSettings/index.tsx:5381": [ [0, 0, 0, "Do not re-export imported variable (\`./AnnotationSettingsEdit\`)", "0"], @@ -2534,20 +2525,12 @@ exports[`better eslint`] = { "public/app/features/dashboard/components/DashExportModal/index.ts:5381": [ [0, 0, 0, "Do not re-export imported variable (\`./DashboardExporter\`)", "0"] ], - "public/app/features/dashboard/components/DashNav/DashNavButton.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/features/dashboard/components/DashNav/index.ts:5381": [ [0, 0, 0, "Do not re-export imported variable (\`DashNav\`)", "0"] ], - "public/app/features/dashboard/components/DashboardLoading/DashboardFailed.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/features/dashboard/components/DashboardLoading/DashboardLoading.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, "Styles should be written using objects.", "3"] + [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "1"] ], "public/app/features/dashboard/components/DashboardPrompt/DashboardPrompt.test.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] @@ -2569,23 +2552,14 @@ exports[`better eslint`] = { "public/app/features/dashboard/components/DashboardRow/index.ts:5381": [ [0, 0, 0, "Do not re-export imported variable (\`./DashboardRow\`)", "0"] ], - "public/app/features/dashboard/components/DashboardSettings/ListNewButton.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/features/dashboard/components/DashboardSettings/VersionsSettings.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/features/dashboard/components/DashboardSettings/index.ts:5381": [ [0, 0, 0, "Do not re-export imported variable (\`./DashboardSettings\`)", "0"] ], - "public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/features/dashboard/components/HelpWizard/HelpWizard.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, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"] ], "public/app/features/dashboard/components/Inspector/PanelInspector.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] @@ -2595,81 +2569,26 @@ exports[`better eslint`] = { [0, 0, 0, "Do not re-export imported variable (\`./LinkSettingsList\`)", "1"] ], "public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.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"] - ], - "public/app/features/dashboard/components/PanelEditor/OptionsPane.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, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"] ], "public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"], - [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "1"], - [0, 0, 0, "Styles should be written using objects.", "2"] - ], - "public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.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, "Use data-testid for E2E selectors instead of aria-label", "1"] ], "public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.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, "Unexpected any. Specify a different type.", "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, "Unexpected any. Specify a different type.", "1"] ], "public/app/features/dashboard/components/PanelEditor/PanelEditor.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, "Do not use any type assertions.", "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"] - ], - "public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"], - [0, 0, 0, "Styles should be written using objects.", "1"], - [0, 0, 0, "Styles should be written using objects.", "2"] + [0, 0, 0, "Do not use any type assertions.", "1"] ], "public/app/features/dashboard/components/PanelEditor/PanelNotSupported.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, "\'Layout\' import from \'@grafana/ui/src/components/Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "1"] ], - "public/app/features/dashboard/components/PanelEditor/VisualizationButton.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/dashboard/components/PanelEditor/VisualizationSelectPane.tsx:5381": [ - [0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "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, "Use data-testid for E2E selectors instead of aria-label", "0"] ], "public/app/features/dashboard/components/PanelEditor/getFieldOverrideElements.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] @@ -2687,27 +2606,10 @@ exports[`better eslint`] = { [0, 0, 0, "Do not use any type assertions.", "4"], [0, 0, 0, "Unexpected any. Specify a different type.", "5"] ], - "public/app/features/dashboard/components/PublicDashboardNotAvailable/PublicDashboardNotAvailable.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/features/dashboard/components/RowOptions/RowOptionsModal.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/features/dashboard/components/SaveDashboard/SaveDashboardButton.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"] ], - "public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.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/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardAsForm.test.tsx:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], @@ -2715,12 +2617,10 @@ exports[`better eslint`] = { [0, 0, 0, "Unexpected any. Specify a different type.", "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, "Use data-testid for E2E selectors instead of aria-label", "3"] ], "public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.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, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"] ], "public/app/features/dashboard/components/SaveDashboard/types.ts:5381": [ [0, 0, 0, "Unexpected any. Specify a different type.", "0"] @@ -2733,70 +2633,26 @@ exports[`better eslint`] = { ], "public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/ConfigPublicDashboard.tsx:5381": [ [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui/src\' is restricted from being used by a pattern. Use Stack component instead.", "0"], - [0, 0, 0, "\'Layout\' import from \'@grafana/ui/src/components/Layout/Layout\' 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, "Styles should be written using objects.", "3"], - [0, 0, 0, "Styles should be written using objects.", "4"] + [0, 0, 0, "\'Layout\' import from \'@grafana/ui/src/components/Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "1"] ], "public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/Configuration.tsx:5381": [ [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui/src\' is restricted from being used by a pattern. Use Stack component instead.", "0"], [0, 0, 0, "\'Layout\' import from \'@grafana/ui/src/components/Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "1"] ], - "public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/EmailSharingConfiguration.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/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/SettingsSummary.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] - ], "public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/AcknowledgeCheckboxes.tsx:5381": [ [0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui/src\' is restricted from being used by a pattern. Use Stack component instead.", "0"], - [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui/src\' is restricted from being used by a pattern. Use Stack component instead.", "1"], - [0, 0, 0, "Styles should be written using objects.", "2"] - ], - "public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/CreatePublicDashboard.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/features/dashboard/components/ShareModal/SharePublicDashboard/ModalAlerts/UnsupportedDataSourcesAlert.tsx:5381": [ - [0, 0, 0, "Styles should be written using objects.", "0"] + [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui/src\' is restricted from being used by a pattern. Use Stack component instead.", "1"] ], "public/app/features/dashboard/components/ShareModal/index.ts:5381": [ [0, 0, 0, "Do not re-export imported variable (\`./ShareModal\`)", "0"], [0, 0, 0, "Do not use export all (\`export * from ...\`)", "1"] ], - "public/app/features/dashboard/components/SubMenu/AnnotationPicker.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/dashboard/components/SubMenu/DashboardLinksDashboard.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] ], - "public/app/features/dashboard/components/SubMenu/SubMenu.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/dashboard/components/TransformationsEditor/TransformationEditor.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, "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, "Unexpected any. Specify a different type.", "0"] ], "public/app/features/dashboard/components/TransformationsEditor/TransformationPicker.tsx:5381": [ [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"] diff --git a/public/app/features/dashboard/components/AddWidgetModal/AddWidgetModal.tsx b/public/app/features/dashboard/components/AddWidgetModal/AddWidgetModal.tsx index fc7cbc81780..2dc2e392dbe 100644 --- a/public/app/features/dashboard/components/AddWidgetModal/AddWidgetModal.tsx +++ b/public/app/features/dashboard/components/AddWidgetModal/AddWidgetModal.tsx @@ -68,19 +68,18 @@ export const AddWidgetModal = () => { }; const getStyles = (theme: GrafanaTheme2) => ({ - modal: css` - width: 65%; - max-width: 960px; - - ${theme.breakpoints.down('md')} { - width: 100%; - } - `, - searchInput: css` - margin-bottom: ${theme.spacing(2)}; - `, - grid: css` - display: grid; - grid-gap: ${theme.spacing(1)}; - `, + modal: css({ + width: '65%', + maxWidth: '960px', + [theme.breakpoints.down('md')]: { + width: '100%', + }, + }), + searchInput: css({ + marginBottom: theme.spacing(2), + }), + grid: css({ + display: 'grid', + gridGap: theme.spacing(1), + }), }); diff --git a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx index 5ebc23acdd3..acd171bb47b 100644 --- a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx +++ b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsEdit.tsx @@ -265,9 +265,9 @@ const getStyles = (theme: GrafanaTheme2) => { maxWidth: theme.spacing(60), marginBottom: theme.spacing(2), }), - select: css` - margin-top: 8px; - `, + select: css({ + marginTop: '8px', + }), }; }; diff --git a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx index 6a5579ee843..937fb188daa 100644 --- a/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx +++ b/public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx @@ -154,8 +154,8 @@ export const AnnotationSettingsList = ({ dashboard, onNew, onEdit }: Props) => { }; const getStyles = () => ({ - table: css` - width: 100%; - overflow-x: scroll; - `, + table: css({ + width: '100%', + overflowX: 'scroll', + }), }); diff --git a/public/app/features/dashboard/components/DashNav/DashNavButton.tsx b/public/app/features/dashboard/components/DashNav/DashNavButton.tsx index 86e48b6a173..df71687f1b7 100644 --- a/public/app/features/dashboard/components/DashNav/DashNavButton.tsx +++ b/public/app/features/dashboard/components/DashNav/DashNavButton.tsx @@ -37,8 +37,8 @@ export const DashNavButton = ({ icon, iconType, iconSize, tooltip, onClick, chil }; const getStyles = (theme: GrafanaTheme2) => ({ - noBorderContainer: css` - padding: 0 ${theme.spacing(0.5)}; - display: flex; - `, + noBorderContainer: css({ + padding: `0 ${theme.spacing(0.5)}`, + display: 'flex', + }), }); diff --git a/public/app/features/dashboard/components/DashboardLoading/DashboardFailed.tsx b/public/app/features/dashboard/components/DashboardLoading/DashboardFailed.tsx index 8d9cde4f8b6..7cbc204729b 100644 --- a/public/app/features/dashboard/components/DashboardLoading/DashboardFailed.tsx +++ b/public/app/features/dashboard/components/DashboardLoading/DashboardFailed.tsx @@ -24,10 +24,10 @@ export const DashboardFailed = ({ initError }: Props) => { }; export const styles = { - dashboardLoading: css` - height: 60vh; - display: flex; - align-items: center; - justify-content: center; - `, + dashboardLoading: css({ + height: '60vh', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }), }; diff --git a/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx b/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx index 2d71a85ccc0..a93406e4a39 100644 --- a/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx +++ b/public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx @@ -44,16 +44,16 @@ export const getStyles = (theme: GrafanaTheme2) => { `; return { - dashboardLoading: css` - height: 60vh; - display: flex; - opacity: 0%; - align-items: center; - justify-content: center; - animation: ${invisibleToVisible} 0s step-end ${slowStartThreshold} 1 normal forwards; - `, - dashboardLoadingText: css` - font-size: ${theme.typography.h4.fontSize}; - `, + dashboardLoading: css({ + height: '60vh', + display: 'flex', + opacity: '0%', + alignItems: 'center', + justifyContent: 'center', + animation: `${invisibleToVisible} 0s step-end ${slowStartThreshold} 1 normal forwards`, + }), + dashboardLoadingText: css({ + fontSize: theme.typography.h4.fontSize, + }), }; }; diff --git a/public/app/features/dashboard/components/DashboardSettings/ListNewButton.tsx b/public/app/features/dashboard/components/DashboardSettings/ListNewButton.tsx index eafdcb04e2e..582a9fcc2f0 100644 --- a/public/app/features/dashboard/components/DashboardSettings/ListNewButton.tsx +++ b/public/app/features/dashboard/components/DashboardSettings/ListNewButton.tsx @@ -18,7 +18,7 @@ export const ListNewButton = ({ children, ...restProps }: Props) => { }; const getStyles = (theme: GrafanaTheme2) => ({ - buttonWrapper: css` - padding: ${theme.spacing(3)} 0; - `, + buttonWrapper: css({ + padding: `${theme.spacing(3)} 0`, + }), }); diff --git a/public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx b/public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx index 1b9fb0088d4..0cd44c3ccb2 100644 --- a/public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx +++ b/public/app/features/dashboard/components/DeleteDashboard/DeleteDashboardModal.tsx @@ -60,9 +60,9 @@ const ProvisionedDeleteModal = ({ hideModal, provisionedId }: { hideModal(): voi title="Cannot delete provisioned dashboard" icon="trash-alt" onDismiss={hideModal} - className={css` - width: 500px; - `} + className={css({ + width: '500px', + })} >

This dashboard is managed by Grafana provisioning and cannot be deleted. Remove the dashboard from the config file diff --git a/public/app/features/dashboard/components/HelpWizard/HelpWizard.tsx b/public/app/features/dashboard/components/HelpWizard/HelpWizard.tsx index cb94d8c67b4..ed2176b1644 100644 --- a/public/app/features/dashboard/components/HelpWizard/HelpWizard.tsx +++ b/public/app/features/dashboard/components/HelpWizard/HelpWizard.tsx @@ -212,24 +212,22 @@ export function HelpWizard({ panel, plugin, onClose }: Props) { } const getStyles = (theme: GrafanaTheme2) => ({ - code: css` - flex-grow: 1; - height: 100%; - overflow: scroll; - `, - field: css` - width: 100%; - `, - opts: css` - display: flex; - display: flex; - width: 100%; - flex-grow: 0; - align-items: center; - justify-content: flex-end; - - button { - margin-left: 8px; - } - `, + code: css({ + flexGrow: 1, + height: '100%', + overflow: 'scroll', + }), + field: css({ + width: '100%', + }), + opts: css({ + display: 'flex', + width: '100%', + flexGrow: 0, + alignItems: 'center', + justifyContent: 'flex-end', + button: { + marginLeft: '8px', + }, + }), }); diff --git a/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx b/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx index bd31fb439a8..e6dbd47bf01 100644 --- a/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx +++ b/public/app/features/dashboard/components/PanelEditor/DynamicConfigValueEditor.tsx @@ -83,10 +83,10 @@ export const DynamicConfigValueEditor = ({ @@ -130,13 +130,11 @@ export const DynamicConfigValueEditor = ({ ); }; -const getStyles = (theme: GrafanaTheme2) => { - return { - collapsibleOverrideEditor: css` - label: collapsibleOverrideEditor; - & + .dynamicConfigValueEditor--nonCollapsible { - margin-top: ${theme.spacing(1)}; - } - `, - }; -}; +const getStyles = (theme: GrafanaTheme2) => ({ + collapsibleOverrideEditor: css({ + label: 'collapsibleOverrideEditor', + '& + .dynamicConfigValueEditor--nonCollapsible': { + marginTop: theme.spacing(1), + }, + }), +}); diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx index 099ef61d065..32a7d658271 100644 --- a/public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx +++ b/public/app/features/dashboard/components/PanelEditor/OptionsPane.tsx @@ -53,42 +53,40 @@ export const OptionsPane = ({ const getStyles = (theme: GrafanaTheme2) => { return { - wrapper: css` - height: 100%; - width: 100%; - display: flex; - flex: 1 1 0; - flex-direction: column; - padding: 0; - `, - optionsWrapper: css` - flex-grow: 1; - min-height: 0; - `, - vizButtonWrapper: css` - padding: 0 ${theme.spacing(2, 2)} 0; - `, - legacyOptions: css` - label: legacy-options; - .panel-options-grid { - display: flex; - flex-direction: column; - } - .panel-options-group { - margin-bottom: 0; - } - .panel-options-group__body { - padding: ${theme.spacing(2)} 0; - } - - .section { - display: block; - margin: ${theme.spacing(2)} 0; - - &:first-child { - margin-top: 0; - } - } - `, + wrapper: css({ + height: '100%', + width: '100%', + display: 'flex', + flex: '1 1 0', + flexDirection: 'column', + padding: 0, + }), + optionsWrapper: css({ + flexGrow: 1, + minHeight: 0, + }), + vizButtonWrapper: css({ + padding: `0 ${theme.spacing(2, 2)} 0`, + }), + legacyOptions: css({ + label: 'legacy-options', + '.panel-options-grid': { + display: 'flex', + flexDirection: 'column', + }, + '.panel-options-group': { + marginBottom: 0, + }, + '.panel-options-group__body': { + padding: `${theme.spacing(2)} 0`, + }, + '.section': { + display: 'block', + margin: `${theme.spacing(2)} 0`, + '&:first-child': { + marginTop: 0, + }, + }, + }), }; }; diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx index 125bb6fc8d9..c8b67b5e8ce 100644 --- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx +++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor.tsx @@ -120,9 +120,9 @@ function OptionPaneLabel({ title, description, overrides, addon }: OptionPanelLa function getLabelStyles(theme: GrafanaTheme2) { return { - container: css` - display: flex; - justify-content: space-between; - `, + container: css({ + display: 'flex', + justifyContent: 'space-between', + }), }; } diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx index db9039bb24d..c27378cb556 100644 --- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx +++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx @@ -174,55 +174,55 @@ export function renderSearchHits( } const getStyles = (theme: GrafanaTheme2) => ({ - wrapper: css` - height: 100%; - display: flex; - flex-direction: column; - flex: 1 1 0; + wrapper: css({ + height: '100%', + display: 'flex', + flexDirection: 'column', + flex: '1 1 0', - .search-fragment-highlight { - color: ${theme.colors.warning.text}; - background: transparent; - } - `, - searchBox: css` - display: flex; - flex-direction: column; - min-height: 0; - `, - formRow: css` - margin-bottom: ${theme.spacing(1)}; - `, - formBox: css` - padding: ${theme.spacing(1)}; - background: ${theme.colors.background.primary}; - border: 1px solid ${theme.components.panel.borderColor}; - border-top-left-radius: ${theme.shape.borderRadius(1.5)}; - border-bottom: none; - `, - closeButton: css` - margin-left: ${theme.spacing(1)}; - `, - searchHits: css` - padding: ${theme.spacing(1, 1, 0, 1)}; - `, - scrollWrapper: css` - flex-grow: 1; - min-height: 0; - `, - searchNotice: css` - font-size: ${theme.typography.size.sm}; - color: ${theme.colors.text.secondary}; - padding: ${theme.spacing(1)}; - text-align: center; - `, - mainBox: css` - background: ${theme.colors.background.primary}; - border: 1px solid ${theme.components.panel.borderColor}; - border-top: none; - flex-grow: 1; - `, - angularDeprecationWrapper: css` - padding: ${theme.spacing(1)}; - `, + '.search-fragment-highlight': { + color: theme.colors.warning.text, + background: 'transparent', + }, + }), + searchBox: css({ + display: 'flex', + flexDirection: 'column', + minHeight: 0, + }), + formRow: css({ + marginBottom: theme.spacing(1), + }), + formBox: css({ + padding: theme.spacing(1), + background: theme.colors.background.primary, + border: `1px solid ${theme.components.panel.borderColor}`, + borderTopLeftRadius: theme.shape.borderRadius(1.5), + borderBottom: 'none', + }), + closeButton: css({ + marginLeft: theme.spacing(1), + }), + searchHits: css({ + padding: theme.spacing(1, 1, 0, 1), + }), + scrollWrapper: css({ + flexGrow: 1, + minHeight: 0, + }), + searchNotice: css({ + fontSize: theme.typography.size.sm, + color: theme.colors.text.secondary, + padding: theme.spacing(1), + textAlign: 'center', + }), + mainBox: css({ + background: theme.colors.background.primary, + border: `1px solid ${theme.components.panel.borderColor}`, + borderTop: 'none', + flexGrow: 1, + }), + angularDeprecationWrapper: css({ + padding: theme.spacing(1), + }), }); diff --git a/public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx b/public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx index 27e5c9768ec..1474507224b 100644 --- a/public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx +++ b/public/app/features/dashboard/components/PanelEditor/OverrideCategoryTitle.tsx @@ -47,23 +47,23 @@ OverrideCategoryTitle.displayName = 'OverrideTitle'; const getStyles = (theme: GrafanaTheme2) => { return { - matcherUi: css` - padding: ${theme.spacing(1)}; - `, - propertyPickerWrapper: css` - margin-top: ${theme.spacing(2)}; - `, - overrideDetails: css` - font-size: ${theme.typography.bodySmall.fontSize}; - color: ${theme.colors.text.secondary}; - font-weight: ${theme.typography.fontWeightRegular}; - `, - options: css` - overflow: hidden; - padding-right: ${theme.spacing(4)}; - `, - unknownLabel: css` - margin-bottom: 0; - `, + matcherUi: css({ + padding: theme.spacing(1), + }), + propertyPickerWrapper: css({ + marginTop: theme.spacing(2), + }), + overrideDetails: css({ + fontSize: theme.typography.bodySmall.fontSize, + color: theme.colors.text.secondary, + fontWeight: theme.typography.fontWeightRegular, + }), + options: css({ + overflow: 'hidden', + paddingRight: theme.spacing(4), + }), + unknownLabel: css({ + marginBottom: 0, + }), }; }; diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx index 7360ac615cc..ee32162851c 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx @@ -502,64 +502,64 @@ export const getStyles = stylesFactory((theme: GrafanaTheme2, props: Props) => { display: 'flex', paddingTop: theme.spacing(2), }), - verticalSplitPanesWrapper: css` - display: flex; - flex-direction: column; - height: 100%; - width: 100%; - position: relative; - `, - mainPaneWrapper: css` - display: flex; - flex-direction: column; - height: 100%; - width: 100%; - padding-right: ${uiState.isPanelOptionsVisible ? 0 : paneSpacing}; - `, - variablesWrapper: css` - label: variablesWrapper; - display: flex; - flex-grow: 1; - flex-wrap: wrap; - gap: ${theme.spacing(1, 2)}; - `, - panelWrapper: css` - flex: 1 1 0; - min-height: 0; - width: 100%; - padding-left: ${paneSpacing}; - `, - tabsWrapper: css` - height: 100%; - width: 100%; - `, - panelToolbar: css` - display: flex; - padding: 0 0 ${paneSpacing} ${paneSpacing}; - justify-content: space-between; - flex-wrap: wrap; - `, - angularWarning: css` - display: flex; - height: theme.spacing(4); - align-items: center; - `, - toolbarLeft: css` - padding-left: ${theme.spacing(1)}; - `, - centeringContainer: css` - display: flex; - justify-content: center; - align-items: center; - position: relative; - flex-direction: column; - `, - onlyPanel: css` - height: 100%; - position: absolute; - overflow: hidden; - width: 100%; - `, + verticalSplitPanesWrapper: css({ + display: 'flex', + flexDirection: 'column', + height: '100%', + width: '100%', + position: 'relative', + }), + mainPaneWrapper: css({ + display: 'flex', + flexDirection: 'column', + height: '100%', + width: '100%', + paddingRight: `${uiState.isPanelOptionsVisible ? 0 : paneSpacing}`, + }), + variablesWrapper: css({ + label: 'variablesWrapper', + display: 'flex', + flexGrow: 1, + flexWrap: 'wrap', + gap: theme.spacing(1, 2), + }), + panelWrapper: css({ + flex: '1 1 0', + minHeight: 0, + width: '100%', + paddingLeft: paneSpacing, + }), + tabsWrapper: css({ + height: '100%', + width: '100%', + }), + panelToolbar: css({ + display: 'flex', + padding: `0 0 ${paneSpacing} ${paneSpacing}`, + justifyContent: 'space-between', + flexWrap: 'wrap', + }), + angularWarning: css({ + display: 'flex', + height: theme.spacing(4), + alignItems: 'center', + }), + toolbarLeft: css({ + paddingLeft: theme.spacing(1), + }), + centeringContainer: css({ + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + position: 'relative', + flexDirection: 'column', + }), + onlyPanel: css({ + height: '100%', + position: 'absolute', + overflow: 'hidden', + width: '100%', + }), }; }); diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx index a60f5bd5483..5c7769d7654 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelEditorTabs.tsx @@ -113,25 +113,25 @@ function getCounter(panel: PanelModel, tab: PanelEditorTab) { const getStyles = (theme: GrafanaTheme2) => { return { - wrapper: css` - display: flex; - flex-direction: column; - height: 100%; - `, - tabBar: css` - padding-left: ${theme.spacing(2)}; - `, - tabContent: css` - padding: 0; - display: flex; - flex-direction: column; - flex: 1; - min-height: 0; - background: ${theme.colors.background.primary}; - border: 1px solid ${theme.components.panel.borderColor}; - border-left: none; - border-bottom: none; - border-top-right-radius: ${theme.shape.borderRadius(1.5)}; - `, + wrapper: css({ + display: 'flex', + flexDirection: 'column', + height: '100%', + }), + tabBar: css({ + paddingLeft: theme.spacing(2), + }), + tabContent: css({ + padding: 0, + display: 'flex', + flexDirection: 'column', + flex: 1, + minHeight: 0, + background: theme.colors.background.primary, + border: `1px solid ${theme.components.panel.borderColor}`, + borderLeft: 'none', + borderBottom: 'none', + borderTopRightRadius: theme.shape.borderRadius(1.5), + }), }; }; diff --git a/public/app/features/dashboard/components/PanelEditor/VisualizationButton.tsx b/public/app/features/dashboard/components/PanelEditor/VisualizationButton.tsx index 9a89428415a..87c8453bafb 100644 --- a/public/app/features/dashboard/components/PanelEditor/VisualizationButton.tsx +++ b/public/app/features/dashboard/components/PanelEditor/VisualizationButton.tsx @@ -65,11 +65,11 @@ export const VisualizationButton = ({ panel }: Props) => { VisualizationButton.displayName = 'VisualizationTab'; const styles = { - wrapper: css` - display: flex; - flex-direction: column; - `, - vizButton: css` - text-align: left; - `, + wrapper: css({ + display: 'flex', + flexDirection: 'column', + }), + vizButton: css({ + textAlign: 'left', + }), }; diff --git a/public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx b/public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx index 972e6f82edb..372734eb211 100644 --- a/public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx +++ b/public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx @@ -143,46 +143,46 @@ VisualizationSelectPane.displayName = 'VisualizationSelectPane'; const getStyles = (theme: GrafanaTheme2) => { return { - icon: css` - color: ${theme.v1.palette.gray33}; - `, - wrapper: css` - display: flex; - flex-direction: column; - flex: 1 1 0; - height: 100%; - `, - vizButton: css` - text-align: left; - `, - scrollWrapper: css` - flex-grow: 1; - min-height: 0; - `, - scrollContent: css` - padding: ${theme.spacing(1)}; - `, - openWrapper: css` - display: flex; - flex-direction: column; - flex: 1 1 100%; - height: 100%; - background: ${theme.colors.background.primary}; - border: 1px solid ${theme.colors.border.weak}; - `, - searchRow: css` - display: flex; - margin-bottom: ${theme.spacing(1)}; - `, - closeButton: css` - margin-left: ${theme.spacing(1)}; - `, - customFieldMargin: css` - margin-bottom: ${theme.spacing(1)}; - `, - formBox: css` - padding: ${theme.spacing(1)}; - padding-bottom: 0; - `, + icon: css({ + color: theme.v1.palette.gray33, + }), + wrapper: css({ + display: 'flex', + flexDirection: 'column', + flex: '1 1 0', + height: '100%', + }), + vizButton: css({ + textAlign: 'left', + }), + scrollWrapper: css({ + flexGrow: 1, + minHeight: 0, + }), + scrollContent: css({ + padding: theme.spacing(1), + }), + openWrapper: css({ + display: 'flex', + flexDirection: 'column', + flex: '1 1 100%', + height: '100%', + background: theme.colors.background.primary, + border: `1px solid ${theme.colors.border.weak}`, + }), + searchRow: css({ + display: 'flex', + marginBottom: theme.spacing(1), + }), + closeButton: css({ + marginLeft: theme.spacing(1), + }), + customFieldMargin: css({ + marginBottom: theme.spacing(1), + }), + formBox: css({ + padding: theme.spacing(1), + paddingBottom: 0, + }), }; }; diff --git a/public/app/features/dashboard/components/PublicDashboardNotAvailable/PublicDashboardNotAvailable.tsx b/public/app/features/dashboard/components/PublicDashboardNotAvailable/PublicDashboardNotAvailable.tsx index 9e493da1eb7..6e4bf939f95 100644 --- a/public/app/features/dashboard/components/PublicDashboardNotAvailable/PublicDashboardNotAvailable.tsx +++ b/public/app/features/dashboard/components/PublicDashboardNotAvailable/PublicDashboardNotAvailable.tsx @@ -35,34 +35,34 @@ export const PublicDashboardNotAvailable = ({ paused }: { paused?: boolean }) => }; const getStyles = (theme: GrafanaTheme2) => ({ - container: css` - display: flex; - justify-content: center; - align-items: center; - height: 100%; + container: css({ + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + height: '100%', - :before { - opacity: 1; - } - `, - box: css` - width: 608px; - display: flex; - align-items: center; - flex-direction: column; - gap: ${theme.spacing(4)}; - z-index: 1; - border-radius: ${theme.shape.borderRadius(4)}; - padding: ${theme.spacing(6, 8)}; - opacity: 1; - `, - title: css` - font-size: ${theme.typography.h3.fontSize}; - text-align: center; - margin: 0; - `, - description: css` - font-size: ${theme.typography.h5.fontSize}; - margin: 0; - `, + ':before': { + opacity: 1, + }, + }), + box: css({ + width: '608px', + display: 'flex', + alignItems: 'center', + flexDirection: 'column', + gap: theme.spacing(4), + zIndex: 1, + borderRadius: theme.shape.borderRadius(4), + padding: theme.spacing(6, 8), + opacity: 1, + }), + title: css({ + fontSize: theme.typography.h3.fontSize, + textAlign: 'center', + margin: 0, + }), + description: css({ + fontSize: theme.typography.h5.fontSize, + margin: 0, + }), }); diff --git a/public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx b/public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx index d4c3979663f..68a7070551a 100644 --- a/public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx +++ b/public/app/features/dashboard/components/RowOptions/RowOptionsModal.tsx @@ -24,8 +24,8 @@ export const RowOptionsModal = ({ repeat, title, onDismiss, onUpdate, warning }: }; const getStyles = () => ({ - modal: css` - label: RowOptionsModal; - width: 500px; - `, + modal: css({ + label: 'RowOptionsModal', + width: '500px', + }), }); diff --git a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx index 60d5533e153..0049a8a2caf 100644 --- a/public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx +++ b/public/app/features/dashboard/components/SaveDashboard/SaveDashboardErrorProxy.tsx @@ -126,20 +126,19 @@ export const proxyHandlesError = (errorStatus: string) => { }; const getConfirmPluginDashboardSaveModalStyles = (theme: GrafanaTheme2) => ({ - modal: css` - width: 500px; - `, - modalText: css` - font-size: ${theme.typography.h4.fontSize}; - color: ${theme.colors.text.primary}; - margin-bottom: ${theme.spacing(4)} - padding-top: ${theme.spacing(2)}; - `, - modalButtonRow: css` - margin-bottom: 14px; - a, - button { - margin-right: ${theme.spacing(2)}; - } - `, + modal: css({ + width: '500px', + }), + modalText: css({ + fontSize: theme.typography.h4.fontSize, + color: theme.colors.text.primary, + marginBottom: theme.spacing(4), + paddingTop: theme.spacing(2), + }), + modalButtonRow: css({ + marginBottom: '14px', + 'a, button': { + marginRight: theme.spacing(2), + }, + }), }); diff --git a/public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx b/public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx index 42f0dc9bdd0..5fe3bdfe1cf 100644 --- a/public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx +++ b/public/app/features/dashboard/components/SaveDashboard/UnsavedChangesModal.tsx @@ -21,9 +21,9 @@ export const UnsavedChangesModal = ({ dashboard, onSaveSuccess, onDiscard, onDis title="Unsaved changes" onDismiss={onDismiss} icon="exclamation-triangle" - className={css` - width: 500px; - `} + className={css({ + width: '500px', + })} >

Do you want to save your changes?
diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx index d742c75550e..492863b5c9a 100644 --- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx +++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveDashboardForm.tsx @@ -135,11 +135,11 @@ export const SaveDashboardForm = ({ function getStyles(theme: GrafanaTheme2) { return { - message: css` - display: flex; - align-items: end; - flex-direction: column; - width: 100%; - `, + message: css({ + display: 'flex', + alignItems: 'end', + flexDirection: 'column', + width: '100%', + }), }; } diff --git a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx b/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx index 785b568528c..d8c3cb4b720 100644 --- a/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx +++ b/public/app/features/dashboard/components/SaveDashboard/forms/SaveProvisionedDashboardForm.tsx @@ -67,11 +67,11 @@ export const SaveProvisionedDashboardForm = ({ dashboard, onCancel }: Omit @@ -265,18 +265,18 @@ export function ConfigPublicDashboard({ publicDashboard, unsupportedDatasources } const getStyles = (theme: GrafanaTheme2) => ({ - configContainer: css` - label: config container; - display: flex; - flex-direction: column; - flex-wrap: wrap; - gap: ${theme.spacing(3)}; - `, - fieldSpace: css` - label: field space; - width: 100%; - margin-bottom: 0; - `, + configContainer: css({ + label: 'config container', + display: 'flex', + flexDirection: 'column', + flexWrap: 'wrap', + gap: theme.spacing(3), + }), + fieldSpace: css({ + label: 'field space', + width: '100%', + marginBottom: 0, + }), timeRange: css({ display: 'inline-block', }), diff --git a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/EmailSharingConfiguration.tsx b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/EmailSharingConfiguration.tsx index 891531b4eda..95d2280c41b 100644 --- a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/EmailSharingConfiguration.tsx +++ b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/EmailSharingConfiguration.tsx @@ -228,52 +228,50 @@ export const EmailSharingConfiguration = ({ dashboard }: { dashboard: DashboardM }; const getStyles = (theme: GrafanaTheme2) => ({ - container: css` - label: emailConfigContainer; - display: flex; - flex-direction: column; - flex-wrap: wrap; - gap: ${theme.spacing(3)}; - `, - field: css` - label: field-noMargin; - margin-bottom: 0; - `, - emailContainer: css` - label: emailContainer; - display: flex; - gap: ${theme.spacing(1)}; - `, - emailInput: css` - label: emailInput; - flex-grow: 1; - `, - table: css` - label: table; - display: flex; - max-height: 220px; - overflow-y: scroll; + container: css({ + label: 'emailConfigContainer', + display: 'flex', + flexDirection: 'column', + flexWrap: 'wrap', + gap: theme.spacing(3), + }), + field: css({ + label: 'field-noMargin', + marginBottom: 0, + }), + emailContainer: css({ + label: 'emailContainer', + display: 'flex', + gap: theme.spacing(1), + }), + emailInput: css({ + label: 'emailInput', + flexGrow: 1, + }), + table: css({ + label: 'table', + display: 'flex', + maxHeight: '220px', + overflowY: 'scroll', + '& tbody': { + display: 'flex', + flexDirection: 'column', + flexGrow: 1, + }, + '& tr': { + minHeight: '40px', + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + padding: theme.spacing(0.5, 1), - & tbody { - display: flex; - flex-direction: column; - flex-grow: 1; - } - - & tr { - min-height: 40px; - display: flex; - align-items: center; - justify-content: space-between; - padding: ${theme.spacing(0.5, 1)}; - - :nth-child(odd) { - background: ${theme.colors.background.secondary}; - } - } - `, - tableButtonsContainer: css` - display: flex; - justify-content: end; - `, + ':nth-child(odd)': { + background: theme.colors.background.secondary, + }, + }, + }), + tableButtonsContainer: css({ + display: 'flex', + justifyContent: 'end', + }), }); diff --git a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/SettingsSummary.tsx b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/SettingsSummary.tsx index f8fb436d042..d907ba78bb4 100644 --- a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/SettingsSummary.tsx +++ b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/SettingsSummary.tsx @@ -66,12 +66,12 @@ const getStyles = (theme: GrafanaTheme2) => { summaryWrapper: css({ display: 'flex', }), - summary: css` - label: collapsedText; - margin-left: ${theme.spacing.gridSize * 2}px; - font-size: ${theme.typography.bodySmall.fontSize}; - color: ${theme.colors.text.secondary}; - `, + summary: css({ + label: 'collapsedText', + marginLeft: `${theme.spacing.gridSize * 2}px`, + fontSize: theme.typography.bodySmall.fontSize, + color: theme.colors.text.secondary, + }), timeRange: css({ display: 'inline-block', }), diff --git a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/AcknowledgeCheckboxes.tsx b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/AcknowledgeCheckboxes.tsx index a00e20809e1..27766f87131 100644 --- a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/AcknowledgeCheckboxes.tsx +++ b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/AcknowledgeCheckboxes.tsx @@ -110,7 +110,7 @@ export const AcknowledgeCheckboxes = ({ }; const getStyles = (theme: GrafanaTheme2) => ({ - title: css` - font-weight: ${theme.typography.fontWeightBold}; - `, + title: css({ + fontWeight: theme.typography.fontWeightBold, + }), }); diff --git a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/CreatePublicDashboard.tsx b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/CreatePublicDashboard.tsx index 241949ae6ea..14fc23a0afb 100644 --- a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/CreatePublicDashboard.tsx +++ b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/CreatePublicDashboard.tsx @@ -110,27 +110,27 @@ export function CreatePublicDashboard({ hasError }: { hasError?: boolean }) { } const getStyles = (theme: GrafanaTheme2) => ({ - container: css` - display: flex; - flex-direction: column; - gap: ${theme.spacing(4)}; - `, - title: css` - font-size: ${theme.typography.h4.fontSize}; - margin: ${theme.spacing(0, 0, 2)}; - `, - description: css` - color: ${theme.colors.text.secondary}; - margin-bottom: ${theme.spacing(0)}; - `, - checkboxes: css` - margin: ${theme.spacing(0, 0, 4)}; - `, - buttonContainer: css` - display: flex; - justify-content: end; - `, - loadingSpinner: css` - margin-left: ${theme.spacing(1)}; - `, + container: css({ + display: 'flex', + flexDirection: 'column', + gap: theme.spacing(4), + }), + title: css({ + fontSize: theme.typography.h4.fontSize, + margin: theme.spacing(0, 0, 2), + }), + description: css({ + color: theme.colors.text.secondary, + marginBottom: theme.spacing(0), + }), + checkboxes: css({ + margin: theme.spacing(0, 0, 4), + }), + buttonContainer: css({ + display: 'flex', + justifyContent: 'end', + }), + loadingSpinner: css({ + marginLeft: theme.spacing(1), + }), }); diff --git a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ModalAlerts/UnsupportedDataSourcesAlert.tsx b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ModalAlerts/UnsupportedDataSourcesAlert.tsx index 20edf398316..0db873e5e29 100644 --- a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ModalAlerts/UnsupportedDataSourcesAlert.tsx +++ b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ModalAlerts/UnsupportedDataSourcesAlert.tsx @@ -38,8 +38,8 @@ export const UnsupportedDataSourcesAlert = ({ unsupportedDataSources }: { unsupp }; const getStyles = (theme: GrafanaTheme2) => ({ - unsupportedDataSourceDescription: css` - color: ${theme.colors.text.secondary}; - margin-bottom: ${theme.spacing(1)}; - `, + unsupportedDataSourceDescription: css({ + color: theme.colors.text.secondary, + marginBottom: theme.spacing(1), + }), }); diff --git a/public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx b/public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx index cb2fceb8d00..db810281b99 100644 --- a/public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx +++ b/public/app/features/dashboard/components/SubMenu/AnnotationPicker.tsx @@ -68,22 +68,20 @@ export const AnnotationPicker = ({ annotation, events, onEnabledChanged }: Annot function getStyles(theme: GrafanaTheme2) { return { - annotation: css` - display: inline-block; - margin-right: ${theme.spacing(1)}; - - .fa-caret-down { - font-size: 75%; - padding-left: ${theme.spacing(1)}; - } - - .gf-form-inline .gf-form { - margin-bottom: 0; - } - `, - indicator: css` - align-self: center; - padding: 0 ${theme.spacing(0.5)}; - `, + annotation: css({ + display: 'inline-block', + marginRight: theme.spacing(1), + '.fa-caret-down': { + fontSize: '75%', + paddingLeft: theme.spacing(1), + }, + '.gf-form-inline .gf-form': { + marginBottom: 0, + }, + }), + indicator: css({ + alignSelf: 'center', + padding: `0 ${theme.spacing(0.5)}`, + }), }; } diff --git a/public/app/features/dashboard/components/SubMenu/SubMenu.tsx b/public/app/features/dashboard/components/SubMenu/SubMenu.tsx index 85e77fc787a..6b1eea31d6a 100644 --- a/public/app/features/dashboard/components/SubMenu/SubMenu.tsx +++ b/public/app/features/dashboard/components/SubMenu/SubMenu.tsx @@ -80,20 +80,19 @@ const mapStateToProps: MapStateToProps = ( const getStyles = stylesFactory((theme: GrafanaTheme2) => { return { - formStyles: css` - display: flex; - flex-wrap: wrap; - display: contents; - `, - submenu: css` - display: flex; - flex-direction: row; - flex-wrap: wrap; - align-content: flex-start; - align-items: flex-start; - gap: ${theme.spacing(1)} ${theme.spacing(2)}; - padding: 0 0 ${theme.spacing(1)} 0; - `, + formStyles: css({ + display: 'contents', + flexWrap: 'wrap', + }), + submenu: css({ + display: 'flex', + flexDirection: 'row', + flexWrap: 'wrap', + alignContent: 'flex-start', + alignItems: 'flex-start', + gap: `${theme.spacing(1)} ${theme.spacing(2)}`, + padding: `0 0 ${theme.spacing(1)} 0`, + }), spacer: css({ flexGrow: 1, }), diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx index 671bbdaf5b5..fa092978cda 100644 --- a/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx +++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationEditor.tsx @@ -83,7 +83,7 @@ export const TransformationEditor = ({ ); return ( -
+
{editor} {debugMode && ( @@ -113,76 +113,75 @@ export const TransformationEditor = ({ const getStyles = (theme: GrafanaTheme2) => { return { - title: css` - display: flex; - padding: 4px 8px 4px 8px; - position: relative; - height: 35px; - border-radius: 4px 4px 0 0; - flex-wrap: nowrap; - justify-content: space-between; - align-items: center; - `, - name: css` - font-weight: ${theme.typography.fontWeightMedium}; - color: ${theme.colors.primary.text}; - `, - iconRow: css` - display: flex; - `, - icon: css` - background: transparent; - border: none; - box-shadow: none; - cursor: pointer; - color: ${theme.colors.text.secondary}; - margin-left: ${theme.spacing(1)}; - &:hover { - color: ${theme.colors.text}; - } - `, - editor: css``, - debugWrapper: css` - display: flex; - flex-direction: row; - `, - debugSeparator: css` - width: 48px; - min-height: 300px; - display: flex; - align-items: center; - align-self: stretch; - justify-content: center; - margin: 0 ${theme.spacing(0.5)}; - color: ${theme.colors.primary.text}; - `, - debugTitle: css` - padding: ${theme.spacing(1)} ${theme.spacing(0.25)}; - font-family: ${theme.typography.fontFamilyMonospace}; - font-size: ${theme.typography.bodySmall.fontSize}; - color: ${theme.colors.text}; - border-bottom: 1px solid ${theme.colors.border.weak}; - flex-grow: 0; - flex-shrink: 1; - `, - - debug: css` - margin-top: ${theme.spacing(1)}; - padding: 0 ${theme.spacing(1, 1, 1)}; - border: 1px solid ${theme.colors.border.weak}; - background: ${theme.isLight ? theme.v1.palette.white : theme.v1.palette.gray05}; - border-radius: ${theme.shape.radius.default}; - width: 100%; - min-height: 300px; - display: flex; - flex-direction: column; - align-self: stretch; - `, - debugJson: css` - flex-grow: 1; - height: 100%; - overflow: hidden; - padding: ${theme.spacing(0.5)}; - `, + title: css({ + display: 'flex', + padding: '4px 8px 4px 8px', + position: 'relative', + height: '35px', + // eslint-disable-next-line @grafana/no-border-radius-literal + borderRadius: '4px 4px 0 0', + flexWrap: 'nowrap', + justifyContent: 'space-between', + alignItems: 'center', + }), + name: css({ + fontWeight: theme.typography.fontWeightMedium, + color: theme.colors.primary.text, + }), + iconRow: css({ + display: 'flex', + }), + icon: css({ + background: 'transparent', + border: 'none', + boxShadow: 'none', + cursor: 'pointer', + color: theme.colors.text.secondary, + marginLeft: theme.spacing(1), + '&:hover': { + color: theme.colors.text.primary, + }, + }), + debugWrapper: css({ + display: 'flex', + flexDirection: 'row', + }), + debugSeparator: css({ + width: '48px', + minHeight: '300px', + display: 'flex', + alignItems: 'center', + alignSelf: 'stretch', + justifyContent: 'center', + margin: `0 ${theme.spacing(0.5)}`, + color: theme.colors.primary.text, + }), + debugTitle: css({ + padding: `${theme.spacing(1)} ${theme.spacing(0.25)}`, + fontFamily: theme.typography.fontFamilyMonospace, + fontSize: theme.typography.bodySmall.fontSize, + color: theme.colors.text.primary, + borderBottom: `1px solid ${theme.colors.border.weak}`, + flexGrow: 0, + flexShrink: 1, + }), + debug: css({ + marginTop: theme.spacing(1), + padding: `0 ${theme.spacing(1, 1, 1)}`, + border: `1px solid ${theme.colors.border.weak}`, + background: `${theme.isLight ? theme.v1.palette.white : theme.v1.palette.gray05}`, + borderRadius: theme.shape.radius.default, + width: '100%', + minHeight: '300px', + display: 'flex', + flexDirection: 'column', + alignSelf: 'stretch', + }), + debugJson: css({ + flexGrow: 1, + height: '100%', + overflow: 'hidden', + padding: theme.spacing(0.5), + }), }; }; diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationPickerNg.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationPickerNg.tsx index 52b0c0ab2ba..2acc57372e9 100644 --- a/public/app/features/dashboard/components/TransformationsEditor/TransformationPickerNg.tsx +++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationPickerNg.tsx @@ -232,16 +232,16 @@ function TransformationsGrid({ showIllustrations, transformations, onClick, data function getTransformationGridStyles(theme: GrafanaTheme2) { return { - // eslint-disable-next-line @emotion/syntax-preference - heading: css` - font-weight: 400, - > button: { - width: '100%', - display: 'flex', - justify-content: 'space-between', - align-items: 'center', - flex-wrap: 'no-wrap', - },`, + heading: css({ + fontWeight: 400, + '> button': { + width: '100%', + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + flexWrap: 'nowrap', + }, + }), description: css({ fontSize: '12px', display: 'flex',