From 750b90e756fc084624a5bf30de202d0eba21453d Mon Sep 17 00:00:00 2001 From: Fahad Siddiqui <56387313+fahad-git@users.noreply.github.com> Date: Wed, 7 May 2025 16:14:10 +0200 Subject: [PATCH] chore: Deprecate Layout components - Replace Horizontal/VerticalGroup with Stack (#86874) (#104227) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * chore: Deprecate Layout components - Replace Horizontal/VerticalGroup with Stack (#86874) * chore: Deprecate Layout components - Replace Horizontal/VerticalGroup with Stack (#86874) * Update public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx Co-authored-by: Zoltán Bedi * Update public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx Co-authored-by: Zoltán Bedi * Update public/app/plugins/datasource/jaeger/components/QueryEditor.tsx Co-authored-by: Zoltán Bedi * Update public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx Co-authored-by: Zoltán Bedi * Update public/app/plugins/datasource/tempo/QueryField.tsx Co-authored-by: Zoltán Bedi * Update public/app/plugins/datasource/tempo/SearchTraceQLEditor/DurationInput.tsx Co-authored-by: Zoltán Bedi * Update public/app/plugins/panel/nodeGraph/ViewControls.tsx Co-authored-by: Zoltán Bedi * Update public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx Co-authored-by: Zoltán Bedi * Update public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx Co-authored-by: Zoltán Bedi * Update public/app/plugins/panel/nodeGraph/ViewControls.tsx Co-authored-by: Zoltán Bedi * Update public/app/plugins/datasource/zipkin/QueryField.tsx Co-authored-by: Zoltán Bedi * Fixed linting issue - spacing problem in different import groups. * Updated betterer results with improved 1 test. --------- Co-authored-by: Zoltán Bedi --- .betterer.results | 27 +++---------------- .../SpanFilters/SpanFilters.tsx | 14 +++++----- .../jaeger/components/QueryEditor.tsx | 6 ++--- .../plugins/datasource/tempo/QueryField.tsx | 6 ++--- .../SearchTraceQLEditor/DurationInput.tsx | 6 ++--- .../tempo/SearchTraceQLEditor/SearchField.tsx | 6 ++--- .../SearchTraceQLEditor/TraceQLSearch.tsx | 6 ++--- .../plugins/datasource/zipkin/QueryField.tsx | 6 ++--- .../plugins/panel/nodeGraph/ViewControls.tsx | 10 +++---- 9 files changed, 33 insertions(+), 54 deletions(-) diff --git a/.betterer.results b/.betterer.results index 4c68a7f939a..71a3864b644 100644 --- a/.betterer.results +++ b/.betterer.results @@ -1718,9 +1718,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/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.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/explore/TraceView/components/TracePageHeader/index.tsx:5381": [ [0, 0, 0, "Do not re-export imported variable (\`./TracePageHeader\`)", "0"] ], @@ -2835,9 +2832,6 @@ exports[`better eslint`] = { "public/app/plugins/datasource/jaeger/_importedDependencies/types/index.tsx:5381": [ [0, 0, 0, "Do not re-export imported variable (\`./trace\`)", "0"] ], - "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/datasource.ts:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"], [0, 0, 0, "Unexpected any. Specify a different type.", "1"] @@ -2915,18 +2909,6 @@ exports[`better eslint`] = { "public/app/plugins/datasource/parca/webpack.config.ts:5381": [ [0, 0, 0, "Do not re-export imported variable (\`config\`)", "0"] ], - "public/app/plugins/datasource/tempo/QueryField.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/tempo/SearchTraceQLEditor/DurationInput.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/tempo/SearchTraceQLEditor/SearchField.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/tempo/SearchTraceQLEditor/TraceQLSearch.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/tempo/ServiceGraphSection.tsx:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] ], @@ -2962,9 +2944,8 @@ exports[`better eslint`] = { [0, 0, 0, "Do not re-export imported variable (\`config\`)", "0"] ], "public/app/plugins/datasource/zipkin/QueryField.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, "Unexpected any. Specify a different type.", "2"] + [0, 0, 0, "Do not use any type assertions.", "0"], + [0, 0, 0, "Unexpected any. Specify a different type.", "1"] ], "public/app/plugins/datasource/zipkin/datasource.ts:5381": [ [0, 0, 0, "Do not use any type assertions.", "0"] @@ -3126,9 +3107,7 @@ exports[`better eslint`] = { [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, "Unexpected any. Specify a different type.", "2"] + [0, 0, 0, "Unexpected any. Specify a different type.", "0"] ], "public/app/plugins/panel/nodeGraph/index.ts:5381": [ [0, 0, 0, "Do not re-export imported variable (\`./NodeGraph\`)", "0"] diff --git a/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx b/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx index 1fd4b3b2e02..9e70be284c2 100644 --- a/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx +++ b/public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx @@ -17,7 +17,7 @@ import React, { useState, useEffect, memo, useCallback } from 'react'; import { GrafanaTheme2, SelectableValue, toOption } from '@grafana/data'; import { IntervalInput } from '@grafana/o11y-ds-frontend'; -import { Collapse, HorizontalGroup, Icon, InlineField, InlineFieldRow, Select, Tooltip, useStyles2 } from '@grafana/ui'; +import { Collapse, Icon, InlineField, InlineFieldRow, Select, Stack, Tooltip, useStyles2 } from '@grafana/ui'; import { t, Trans } from 'app/core/internationalization'; import { defaultFilters, SearchProps } from '../../../useSearch'; @@ -144,7 +144,7 @@ export const SpanFilters = memo((props: SpanFilterProps) => { - + setSpanFiltersSearch({ ...search, spanNameOperator: v.value! })} @@ -191,7 +191,7 @@ export const SpanFilters = memo((props: SpanFilterProps) => { placeholder={t('explore.span-filters.placeholder-all-span-names', 'All span names')} value={search.spanName || null} /> - + @@ -202,7 +202,7 @@ export const SpanFilters = memo((props: SpanFilterProps) => { units: 'ns, us, ms, s, m, h', })} > - + { invalid={invalid} width={18} /> - + ); }; diff --git a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx index 18ef602b003..b461c0d0b9a 100644 --- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx +++ b/public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx @@ -6,7 +6,7 @@ import useAsync from 'react-use/lib/useAsync'; import { SelectableValue } from '@grafana/data'; import { TemporaryAlert } from '@grafana/o11y-ds-frontend'; import { FetchError, getTemplateSrv, isFetchError } from '@grafana/runtime'; -import { Select, HorizontalGroup, useStyles2, InputActionMeta } from '@grafana/ui'; +import { Select, Stack, useStyles2, InputActionMeta } from '@grafana/ui'; import { TraceqlFilter, TraceqlSearchScope } from '../dataquery.gen'; import { TempoDatasource } from '../datasource'; @@ -144,7 +144,7 @@ const SearchField = ({ return ( <> - + {!hideScope && ( - + options={[{ value: 'traceID', label: 'TraceID' }]} value={query.queryType || 'traceID'} @@ -111,7 +111,7 @@ export const ZipkinQueryField = ({ query, onChange, onRunQuery, datasource }: Pr > Import trace - + {query.queryType === 'traceID' && ( diff --git a/public/app/plugins/panel/nodeGraph/ViewControls.tsx b/public/app/plugins/panel/nodeGraph/ViewControls.tsx index 2977cc6ab4a..b0e041ce3ea 100644 --- a/public/app/plugins/panel/nodeGraph/ViewControls.tsx +++ b/public/app/plugins/panel/nodeGraph/ViewControls.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/css'; import { useState } from 'react'; -import { Button, HorizontalGroup, useStyles2, VerticalGroup } from '@grafana/ui'; +import { Button, Stack, useStyles2 } from '@grafana/ui'; function getStyles() { return { @@ -35,8 +35,8 @@ export function ViewControls>(props: Props - - + +