public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Chore: Remove deprecated VerticalGroup in Dashboards area (#109675)

Browse Source
This commit is contained in:
Laura Fernández
2025-08-19 15:07:21 +03:00
committed by GitHub
parent ee6a61490a
commit b27af4186c
7 changed files with 32 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.betterer.results
+3 -22
View File
@@ -1915,10 +1915,6 @@ exports[`better eslint`] = {
"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/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"]
],
"public/app/features/dashboard/components/DashboardPrompt/DashboardPrompt.test.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"]
],
@@ -1957,9 +1953,6 @@ 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.", "3"],
[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.", "4"]
],
"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"]
],
@@ -2400,13 +2393,11 @@ exports[`better eslint`] = {
[0, 0, 0, "Do not use any type assertions.", "0"]
],
"public/app/features/inspector/InspectDataOptions.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, "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"],
[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.", "4"],
[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.", "5"],
[0, 0, 0, "Do not use any type assertions.", "6"]
[0, 0, 0, "Do not use any type assertions.", "4"]
],
"public/app/features/inspector/InspectDataTab.tsx:5381": [
[0, 0, 0, "Use data-testid for E2E selectors instead of aria-label", "0"]
@@ -2432,12 +2423,6 @@ 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.", "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/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.tsx:5381": [
[0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
],
"public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx:5381": [
[0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
],
"public/app/features/live/centrifuge/LiveDataStream.ts:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
@@ -2892,10 +2877,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/variables/inspect/VariablesUnknownTable.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/variables/inspect/utils.ts:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"],
[0, 0, 0, "Do not use any type assertions.", "1"],
public/app/features/dashboard/components/DashboardLoading/DashboardLoading.tsx
+7 -7
View File
@@ -3,7 +3,7 @@ import { css, keyframes } from '@emotion/css';
import { GrafanaTheme2 } from '@grafana/data';
import { Trans } from '@grafana/i18n';
import { locationService } from '@grafana/runtime';
import { Button, HorizontalGroup, Spinner, useStyles2, VerticalGroup } from '@grafana/ui';
import { Button, Spinner, Stack, useStyles2 } from '@grafana/ui';
import { DashboardInitPhase } from 'app/types/dashboard';
export interface Props {
@@ -19,16 +19,16 @@ export const DashboardLoading = ({ initPhase }: Props) => {
return (
<div className={styles.dashboardLoading}>
<div className={styles.dashboardLoadingText}>
<VerticalGroup spacing="md">
<HorizontalGroup align="center" justify="center" spacing="xs">
<Stack direction="column" gap={2}>
<Stack alignItems="center" justifyContent="center" gap={0.5}>
<Spinner inline={true} /> {initPhase}
</HorizontalGroup>{' '}
<HorizontalGroup align="center" justify="center">
</Stack>{' '}
<Stack alignItems="center" justifyContent="center">
<Button variant="secondary" size="md" icon="repeat" onClick={cancelVariables}>
<Trans i18nKey="dashboard.dashboard-loading.cancel-loading-dashboard">Cancel loading dashboard</Trans>
</Button>
</HorizontalGroup>
</VerticalGroup>
</Stack>
</Stack>
</div>
</div>
);
public/app/features/dashboard/components/DashboardSettings/VersionsSettings.tsx
+3 -3
View File
@@ -1,7 +1,7 @@
import { PureComponent } from 'react';
import * as React from 'react';
import { Spinner, HorizontalGroup } from '@grafana/ui';
import { Spinner, Stack } from '@grafana/ui';
import { Page } from 'app/core/components/Page/Page';
import { historySrv, RevisionsModel } from 'app/features/dashboard-scene/settings/version-history/HistorySrv';
import { VersionsHistoryButtons } from 'app/features/dashboard-scene/settings/version-history/VersionHistoryButtons';
@@ -198,8 +198,8 @@ export class VersionsSettings extends PureComponent<Props, State> {
}
export const VersionsHistorySpinner = ({ msg }: { msg: string }) => (
<HorizontalGroup>
<Stack>
<Spinner />
<em>{msg}</em>
</HorizontalGroup>
</Stack>
);
public/app/features/inspector/InspectDataOptions.tsx
+5 -5
View File
@@ -2,7 +2,7 @@ import * as React from 'react';
import { DataFrame, DataTransformerID, getFrameDisplayName, SelectableValue } from '@grafana/data';
import { t } from '@grafana/i18n';
import { Field, HorizontalGroup, Select, Switch, VerticalGroup, useStyles2 } from '@grafana/ui';
import { Field, Select, Stack, Switch, useStyles2 } from '@grafana/ui';
import { QueryOperationRow } from 'app/core/components/QueryOperationRow/QueryOperationRow';
import { DetailText } from 'app/features/inspector/DetailText';
import { GetDataOptions } from 'app/features/query/state/PanelQueryRunner';
@@ -100,7 +100,7 @@ export const InspectDataOptions = ({
actions={actions}
>
<div className={styles.options} data-testid="dataOptions">
<VerticalGroup spacing="none">
<Stack direction="column" gap={0}>
{data!.length > 1 && (
<Field label={t('dashboard.inspect-data.dataframe-label', 'Show data frame')}>
<Select
@@ -113,7 +113,7 @@ export const InspectDataOptions = ({
</Field>
)}
<HorizontalGroup>
<Stack>
{hasTransformations && onOptionsChange && (
<Field
label={t('dashboard.inspect-data.transformations-label', 'Apply panel transformations')}
@@ -155,8 +155,8 @@ export const InspectDataOptions = ({
>
<Switch id="excel-toggle" value={downloadForExcel} onChange={toggleDownloadForExcel} />
</Field>
</HorizontalGroup>
</VerticalGroup>
</Stack>
</Stack>
</div>
</QueryOperationRow>
</div>
public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.tsx
+4 -4
View File
@@ -4,7 +4,7 @@ import { useDebounce } from 'react-use';
import { GrafanaTheme2, PanelPluginMeta, SelectableValue } from '@grafana/data';
import { t } from '@grafana/i18n';
import { useStyles2, VerticalGroup, FilterInput } from '@grafana/ui';
import { useStyles2, Stack, FilterInput } from '@grafana/ui';
import { FolderInfo } from 'app/types/folders';
import { FolderFilter } from '../../../../core/components/FolderFilter/FolderFilter';
@@ -53,11 +53,11 @@ export const LibraryPanelsSearch = ({
const [panelFilter, setPanelFilter] = useState<string[]>([]);
const sortOrFiltersVisible = showSort || showPanelFilter || showFolderFilter;
const verticalGroupSpacing = variant === LibraryPanelsSearchVariant.Tight ? 'lg' : 'xs';
const verticalGroupSpacing = variant === LibraryPanelsSearchVariant.Tight ? 3 : 0.5;
return (
<div className={styles.container}>
<VerticalGroup spacing={verticalGroupSpacing}>
<Stack direction="column" gap={verticalGroupSpacing}>
<div
className={cx(styles.gridContainer, {
[styles.tightLayout]: variant === LibraryPanelsSearchVariant.Tight,
@@ -101,7 +101,7 @@ export const LibraryPanelsSearch = ({
perPage={perPage}
/>
</div>
</VerticalGroup>
</Stack>
</div>
);
};
public/app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup.tsx
+5 -5
View File
@@ -3,7 +3,7 @@ import { useCallback, useState } from 'react';
import { PanelPluginMeta } from '@grafana/data';
import { Trans } from '@grafana/i18n';
import { Button, VerticalGroup } from '@grafana/ui';
import { Button, Stack } from '@grafana/ui';
import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
import { PanelModel } from 'app/features/dashboard/state/PanelModel';
import { changeToLibraryPanel } from 'app/features/panel/state/actions';
@@ -45,15 +45,15 @@ export const PanelLibraryOptionsGroup = ({ panel, searchQuery }: Props) => {
const onAddToPanelLibrary = () => setShowingAddPanelModal(true);
const onDismissChangeToPanel = () => setChangeToPanel(undefined);
return (
<VerticalGroup spacing="md">
<Stack direction="column" gap={2}>
{!panel.libraryPanel && (
<VerticalGroup align="center">
<Stack alignItems="center">
<Button icon="plus" onClick={onAddToPanelLibrary} variant="secondary" fullWidth>
<Trans i18nKey="library-panels.panel-library-options-group.create-new-library-panel">
Create new library panel
</Trans>
</Button>
</VerticalGroup>
</Stack>
)}
<PanelTypeFilter onChange={onPanelFilterChange} />
@@ -80,7 +80,7 @@ export const PanelLibraryOptionsGroup = ({ panel, searchQuery }: Props) => {
{changeToPanel && (
<ChangeLibraryPanelModal panel={panel} onDismiss={onDismissChangeToPanel} onConfirm={useLibraryPanel} />
)}
</VerticalGroup>
</Stack>
);
};
public/app/features/variables/inspect/VariablesUnknownTable.tsx
+5 -5
View File
@@ -5,7 +5,7 @@ import { useAsync } from 'react-use';
import { GrafanaTheme2 } from '@grafana/data';
import { Trans, t } from '@grafana/i18n';
import { reportInteraction } from '@grafana/runtime';
import { CollapsableSection, HorizontalGroup, Icon, Spinner, Tooltip, useStyles2, VerticalGroup } from '@grafana/ui';
import { CollapsableSection, Icon, Spinner, Stack, Tooltip, useStyles2 } from '@grafana/ui';
import { DashboardModel } from '../../dashboard/state/DashboardModel';
import { VariableModel } from '../types';
@@ -56,14 +56,14 @@ export function VariablesUnknownTable({ variables, dashboard }: VariablesUnknown
<div className={style.container}>
<CollapsableSection label={<CollapseLabel />} isOpen={open} onToggle={onToggle}>
{loading && (
<VerticalGroup justify="center">
<HorizontalGroup justify="center">
<Stack direction="column" justifyContent="center">
<Stack justifyContent="center">
<span>
<Trans i18nKey="variables.variables-unknown-table.loading">Loading...</Trans>
</span>
<Spinner />
</HorizontalGroup>
</VerticalGroup>
</Stack>
</Stack>
)}
{!loading && usages && (
<>