From 65d5265f868258920c65e6537c05a2655407dc48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= Date: Fri, 29 Aug 2025 12:33:14 +0200 Subject: [PATCH] Chore: Move `Deprecated layout components` rule from Betterer to ESlint (#110279) --- .betterer.eslint.config.js | 5 ---- .betterer.results | 27 ++----------------- eslint.config.js | 5 ++++ .../ConfigPublicDashboard.tsx | 17 +++--------- .../ConfigPublicDashboard/Configuration.tsx | 6 ++--- .../AcknowledgeCheckboxes.tsx | 10 +++---- .../plugins/loader/sharedDependencies.ts | 1 + .../QueryEditor/QueryEditor.test.tsx | 1 + .../VariableEditor/VariableEditor.test.tsx | 1 + .../MetricsQueryEditor.test.tsx | 1 + .../app/plugins/panel/logs/LogsPanel.test.tsx | 1 + 11 files changed, 23 insertions(+), 52 deletions(-) diff --git a/.betterer.eslint.config.js b/.betterer.eslint.config.js index 77a920179e5..5a68d6134a4 100644 --- a/.betterer.eslint.config.js +++ b/.betterer.eslint.config.js @@ -85,11 +85,6 @@ module.exports = [ 'error', { patterns: [ - { - group: ['@grafana/ui*', '*/Layout/*'], - importNames: ['Layout', 'HorizontalGroup', 'VerticalGroup'], - message: 'Use Stack component instead.', - }, { group: ['@grafana/ui/src/*', '@grafana/runtime/src/*', '@grafana/data/src/*'], message: 'Import from the public export instead.', diff --git a/.betterer.results b/.betterer.results index 181f71742b4..dbdaa216916 100644 --- a/.betterer.results +++ b/.betterer.results @@ -2151,22 +2151,14 @@ exports[`better eslint`] = { [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "2"] ], "public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/ConfigPublicDashboard.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, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "0"], [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "1"], - [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "2"], - [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "3"] - ], - "public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/Configuration.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, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "2"] ], "public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/EmailSharingConfiguration.tsx:5381": [ [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "0"], [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "1"] ], - "public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/AcknowledgeCheckboxes.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"] - ], "public/app/features/dashboard/components/ShareModal/ShareSnapshot.tsx:5381": [ [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "0"], [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "1"], @@ -2709,9 +2701,6 @@ exports[`better eslint`] = { "public/app/features/plugins/extensions/usePluginFunctions.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], - "public/app/features/plugins/loader/sharedDependencies.ts: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"] - ], "public/app/features/plugins/sandbox/distortions.ts:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], @@ -3153,9 +3142,6 @@ exports[`better eslint`] = { "public/app/plugins/datasource/azuremonitor/components/LogsQueryEditor/index.tsx:5381": [ [0, 0, 0, "Do not re-export imported variable (\`./LogsQueryEditor\`)", "0"] ], - "public/app/plugins/datasource/azuremonitor/components/QueryEditor/QueryEditor.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"] - ], "public/app/plugins/datasource/azuremonitor/components/QueryEditor/QueryEditor.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], @@ -3174,9 +3160,6 @@ exports[`better eslint`] = { "public/app/plugins/datasource/azuremonitor/components/TracesQueryEditor/index.tsx:5381": [ [0, 0, 0, "Do not re-export imported variable (\`./TracesQueryEditor\`)", "0"] ], - "public/app/plugins/datasource/azuremonitor/components/VariableEditor/VariableEditor.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"] - ], "public/app/plugins/datasource/azuremonitor/components/VariableEditor/VariableEditor.tsx:5381": [ [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "0"], [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "1"], @@ -3247,9 +3230,6 @@ exports[`better eslint`] = { "public/app/plugins/datasource/cloudwatch/components/ConfigEditor/XrayLinkConfig.tsx:5381": [ [0, 0, 0, "Add noMargin prop to Field components to remove built-in margins. Use layout components like Stack or Grid with the gap prop instead for consistent spacing.", "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"] - ], "public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/SQLBuilderEditor/index.tsx:5381": [ [0, 0, 0, "Do not re-export imported variable (\`./SQLBuilderEditor\`)", "0"] ], @@ -3920,9 +3900,6 @@ exports[`better eslint`] = { "public/app/plugins/panel/live/LivePanel.tsx:5381": [ [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"] - ], "public/app/plugins/panel/logs/types.ts:5381": [ [0, 0, 0, "Do not re-export imported variable (\`./panelcfg.gen\`)", "0"] ], diff --git a/eslint.config.js b/eslint.config.js index 3b3209f20a6..52766949795 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -39,6 +39,11 @@ const baseImportConfig = { importNames: ['Trans'], message: 'Please import from @grafana/i18n instead', }, + { + group: ['@grafana/ui*', '*/Layout/*'], + importNames: ['Layout', 'HorizontalGroup', 'VerticalGroup'], + message: 'Use Stack component instead.', + }, { regex: '\\.test$', message: diff --git a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/ConfigPublicDashboard.tsx b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/ConfigPublicDashboard.tsx index ae88d932140..be257dc5042 100644 --- a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/ConfigPublicDashboard.tsx +++ b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/ConfigPublicDashboard.tsx @@ -4,18 +4,7 @@ import { useForm } from 'react-hook-form'; import { GrafanaTheme2, TimeRange } from '@grafana/data'; import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src'; import { Trans, t } from '@grafana/i18n'; -import { - Button, - ClipboardButton, - Field, - HorizontalGroup, - Input, - Stack, - Label, - ModalsController, - Switch, - useStyles2, -} from '@grafana/ui'; +import { Button, ClipboardButton, Field, Input, Stack, Label, ModalsController, Switch, useStyles2 } from '@grafana/ui'; import { useDeletePublicDashboardMutation, usePauseOrResumePublicDashboardMutation, @@ -213,7 +202,7 @@ export function ConfigPublicDashboardBase({ justifyContent={isDesktop ? 'flex-end' : 'flex-start'} alignItems={isDesktop ? 'center' : 'stretch'} > - + - + ); diff --git a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/Configuration.tsx b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/Configuration.tsx index 965ad1512ac..6cb97b9ac47 100644 --- a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/Configuration.tsx +++ b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/ConfigPublicDashboard/Configuration.tsx @@ -3,7 +3,7 @@ import { UseFormRegister } from 'react-hook-form'; import { TimeRange } from '@grafana/data'; import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src'; import { Trans, t } from '@grafana/i18n'; -import { FieldSet, Label, Switch, TimeRangeInput, Stack, VerticalGroup } from '@grafana/ui'; +import { FieldSet, Label, Switch, TimeRangeInput, Stack } from '@grafana/ui'; import { DashboardInteractions } from 'app/features/dashboard-scene/utils/interactions'; import { ConfigPublicDashboardForm } from './ConfigPublicDashboard'; @@ -24,7 +24,7 @@ export const Configuration = ({ return ( <>
- + - +
); 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 ac812ed1be9..76bed8c8d94 100644 --- a/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/AcknowledgeCheckboxes.tsx +++ b/public/app/features/dashboard/components/ShareModal/SharePublicDashboard/CreatePublicDashboard/AcknowledgeCheckboxes.tsx @@ -4,7 +4,7 @@ import { UseFormRegister } from 'react-hook-form'; import { GrafanaTheme2 } from '@grafana/data'; import { selectors as e2eSelectors } from '@grafana/e2e-selectors/src'; import { Trans, t } from '@grafana/i18n'; -import { Checkbox, FieldSet, HorizontalGroup, LinkButton, useStyles2, VerticalGroup } from '@grafana/ui'; +import { Checkbox, FieldSet, LinkButton, useStyles2, Stack } from '@grafana/ui'; import { SharePublicDashboardAcknowledgmentInputs } from './CreatePublicDashboard'; @@ -84,9 +84,9 @@ export const AcknowledgeCheckboxes = ({

- + {ACKNOWLEDGES.map((acknowledge) => ( - + - + ))} - +
); diff --git a/public/app/features/plugins/loader/sharedDependencies.ts b/public/app/features/plugins/loader/sharedDependencies.ts index 572224fdd44..1bd903b2fde 100644 --- a/public/app/features/plugins/loader/sharedDependencies.ts +++ b/public/app/features/plugins/loader/sharedDependencies.ts @@ -11,6 +11,7 @@ import 'vendor/flot/jquery.flot.gauge'; import * as grafanaData from '@grafana/data'; import * as grafanaRuntime from '@grafana/runtime'; +// eslint-disable-next-line no-restricted-imports import * as grafanaUIraw from '@grafana/ui'; import TableModel from 'app/core/TableModel'; import config from 'app/core/config'; diff --git a/public/app/plugins/datasource/azuremonitor/components/QueryEditor/QueryEditor.test.tsx b/public/app/plugins/datasource/azuremonitor/components/QueryEditor/QueryEditor.test.tsx index 0749943498c..17ccab9ea64 100644 --- a/public/app/plugins/datasource/azuremonitor/components/QueryEditor/QueryEditor.test.tsx +++ b/public/app/plugins/datasource/azuremonitor/components/QueryEditor/QueryEditor.test.tsx @@ -2,6 +2,7 @@ import { render, screen, waitFor, cleanup } from '@testing-library/react'; import { CoreApp } from '@grafana/data'; import { config } from '@grafana/runtime'; +// eslint-disable-next-line no-restricted-imports import * as ui from '@grafana/ui'; import { selectors } from '../../e2e/selectors'; diff --git a/public/app/plugins/datasource/azuremonitor/components/VariableEditor/VariableEditor.test.tsx b/public/app/plugins/datasource/azuremonitor/components/VariableEditor/VariableEditor.test.tsx index f14bb609a37..c400eb35a7c 100644 --- a/public/app/plugins/datasource/azuremonitor/components/VariableEditor/VariableEditor.test.tsx +++ b/public/app/plugins/datasource/azuremonitor/components/VariableEditor/VariableEditor.test.tsx @@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event'; import * as React from 'react'; import { select, openMenu } from 'react-select-event'; +// eslint-disable-next-line no-restricted-imports import * as ui from '@grafana/ui'; import createMockDatasource from '../../mocks/datasource'; diff --git a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MetricsQueryEditor.test.tsx b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MetricsQueryEditor.test.tsx index ee9255a4fde..bca545ec45f 100644 --- a/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MetricsQueryEditor.test.tsx +++ b/public/app/plugins/datasource/cloudwatch/components/QueryEditor/MetricsQueryEditor/MetricsQueryEditor.test.tsx @@ -2,6 +2,7 @@ import { render, screen, waitFor } from '@testing-library/react'; import selectEvent from 'react-select-event'; import { CustomVariableModel, DataSourceInstanceSettings } from '@grafana/data'; +// eslint-disable-next-line no-restricted-imports import * as ui from '@grafana/ui'; import { CloudWatchDatasource } from '../../../datasource'; diff --git a/public/app/plugins/panel/logs/LogsPanel.test.tsx b/public/app/plugins/panel/logs/LogsPanel.test.tsx index 64ef4a60a44..bd879def92a 100644 --- a/public/app/plugins/panel/logs/LogsPanel.test.tsx +++ b/public/app/plugins/panel/logs/LogsPanel.test.tsx @@ -16,6 +16,7 @@ import { LogSortOrderChangeEvent, } from '@grafana/data'; import { getAppEvents } from '@grafana/runtime'; +// eslint-disable-next-line no-restricted-imports import * as grafanaUI from '@grafana/ui'; import * as styles from 'app/features/logs/components/getLogRowStyles'; import { LogRowContextModal } from 'app/features/logs/components/log-context/LogRowContextModal';