chore: Deprecate Layout components - Replace Horizontal/VerticalGroup with Stack (#86874) (#104227)

* 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 <zoltan.bedi@gmail.com>

* Update public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

* Update public/app/plugins/datasource/jaeger/components/QueryEditor.tsx

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

* Update public/app/features/explore/TraceView/components/TracePageHeader/SpanFilters/SpanFilters.tsx

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

* Update public/app/plugins/datasource/tempo/QueryField.tsx

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

* Update public/app/plugins/datasource/tempo/SearchTraceQLEditor/DurationInput.tsx

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

* Update public/app/plugins/panel/nodeGraph/ViewControls.tsx

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

* Update public/app/plugins/datasource/tempo/SearchTraceQLEditor/SearchField.tsx

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

* Update public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

* Update public/app/plugins/panel/nodeGraph/ViewControls.tsx

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

* Update public/app/plugins/datasource/zipkin/QueryField.tsx

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

* Fixed linting issue - spacing problem in different import groups.

* Updated betterer results with improved 1 test.

---------

Co-authored-by: Zoltán Bedi <zoltan.bedi@gmail.com>

.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.", "0"],
-      [0, 0, 0, "Do not use any type assertions.", "1"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
     ],
     "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, "Unexpected any. Specify a different type.", "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"]
     ],
     "public/app/plugins/panel/nodeGraph/index.ts:5381": [
       [0, 0, 0, "Do not re-export imported variable (\`./NodeGraph\`)", "0"]

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) => {
       <Collapse label={collapseLabel} collapsible={true} isOpen={showSpanFilters} onToggle={setShowSpanFilters}>
         <InlineFieldRow className={styles.flexContainer}>
           <InlineField label={t('explore.span-filters.label-service-name', 'Service name')} labelWidth={16}>
-            <HorizontalGroup spacing={'xs'}>
+            <Stack gap={0.5}>
               <Select
                 aria-label={t(
                   'explore.span-filters.aria-label-select-service-name-operator',
@@ -164,7 +164,7 @@ export const SpanFilters = memo((props: SpanFilterProps) => {
                 value={search.serviceName || null}
                 defaultValue={search.serviceName || null}
               />
-            </HorizontalGroup>
+            </Stack>
           </InlineField>
           <SearchBarInput
             onChange={(v) => {
@@ -175,7 +175,7 @@ export const SpanFilters = memo((props: SpanFilterProps) => {
         </InlineFieldRow>
         <InlineFieldRow>
           <InlineField label={t('explore.span-filters.label-span-name', 'Span name')} labelWidth={16}>
-            <HorizontalGroup spacing={'xs'}>
+            <Stack gap={0.5}>
               <Select
                 aria-label={t('explore.span-filters.aria-label-select-span-name-operator', 'Select span name operator')}
                 onChange={(v) => 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}
               />
-            </HorizontalGroup>
+            </Stack>
           </InlineField>
         </InlineFieldRow>
         <InlineFieldRow>
@@ -202,7 +202,7 @@ export const SpanFilters = memo((props: SpanFilterProps) => {
               units: 'ns, us, ms, s, m, h',
             })}
           >
-            <HorizontalGroup spacing="xs" align="flex-start">
+            <Stack alignItems="flex-start" gap={0.5}>
               <Select
                 aria-label={t('explore.span-filters.aria-label-select-min-span-operator', 'Select min span operator')}
                 onChange={(v) => setSpanFiltersSearch({ ...search, fromOperator: v.value! })}
@@ -237,7 +237,7 @@ export const SpanFilters = memo((props: SpanFilterProps) => {
                 value={search.to || ''}
                 validationRegex={durationRegex}
               />
-            </HorizontalGroup>
+            </Stack>
           </InlineField>
         </InlineFieldRow>
         <InlineFieldRow className={styles.tagsRow}>

public/app/plugins/datasource/jaeger/components/QueryEditor.tsx

@@ -5,9 +5,9 @@ import { QueryEditorProps } from '@grafana/data';
 import {
   Button,
   FileDropzone,
-  HorizontalGroup,
   InlineField,
   InlineFieldRow,
+  Stack,
   Modal,
   QueryField,
   RadioButtonGroup,
@@ -76,7 +76,7 @@ export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props)
       <div className={styles.container}>
         <InlineFieldRow>
           <InlineField label="Query type" grow={true}>
-            <HorizontalGroup spacing={'sm'} align={'center'} justify={'space-between'}>
+            <Stack gap={1} alignItems="center" justifyContent="space-between">
               <RadioButtonGroup<JaegerQueryType>
                 options={[
                   { value: 'search', label: 'Search' },
@@ -101,7 +101,7 @@ export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props)
               >
                 Import trace
               </Button>
-            </HorizontalGroup>
+            </Stack>
           </InlineField>
         </InlineFieldRow>
         {renderEditorBody()}

public/app/plugins/datasource/tempo/QueryField.tsx

@@ -6,7 +6,7 @@ import { config, reportInteraction } from '@grafana/runtime';
 import {
   Button,
   FileDropzone,
-  HorizontalGroup,
+  Stack,
   InlineField,
   InlineFieldRow,
   Modal,
@@ -116,7 +116,7 @@ class TempoQueryFieldComponent extends PureComponent<Props, State> {
         </Modal>
         <InlineFieldRow>
           <InlineField label="Query type" grow={true}>
-            <HorizontalGroup spacing={'sm'} align={'center'} justify={'space-between'}>
+            <Stack gap={1} alignItems="center" justifyContent="space-between">
               <RadioButtonGroup<TempoQueryType>
                 options={queryTypeOptions}
                 value={query.queryType}
@@ -146,7 +146,7 @@ class TempoQueryFieldComponent extends PureComponent<Props, State> {
               >
                 Import trace
               </Button>
-            </HorizontalGroup>
+            </Stack>
           </InlineField>
         </InlineFieldRow>
         {query.queryType === 'traceqlSearch' && (

public/app/plugins/datasource/tempo/SearchTraceQLEditor/DurationInput.tsx

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 
-import { Select, HorizontalGroup, Input, useStyles2 } from '@grafana/ui';
+import { Select, Stack, Input, useStyles2 } from '@grafana/ui';
 
 import { TraceqlFilter } from '../dataquery.gen';
 
@@ -34,7 +34,7 @@ const DurationInput = ({ filter, operators, updateFilter }: Props) => {
   }
 
   return (
-    <HorizontalGroup spacing={'none'}>
+    <Stack gap={0}>
       <Select
         className={styles.noBoxShadow}
         inputId={`${filter.id}-operator`}
@@ -59,7 +59,7 @@ const DurationInput = ({ filter, operators, updateFilter }: Props) => {
         invalid={invalid}
         width={18}
       />
-    </HorizontalGroup>
+    </Stack>
   );
 };
 

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 (
     <>
-      <HorizontalGroup spacing={'none'} width={'auto'}>
+      <Stack gap={0} width="auto">
         {!hideScope && (
           <Select
             className={styles.dropdown}
@@ -228,7 +228,7 @@ const SearchField = ({
             allowCreateWhileLoading
           />
         )}
-      </HorizontalGroup>
+      </Stack>
       {alertText && <TemporaryAlert severity="error" text={alertText} />}
     </>
   );

public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx

@@ -4,7 +4,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { CoreApp, GrafanaTheme2 } from '@grafana/data';
 import { TemporaryAlert } from '@grafana/o11y-ds-frontend';
 import { config, FetchError, getTemplateSrv, reportInteraction } from '@grafana/runtime';
-import { Alert, Button, HorizontalGroup, Select, useStyles2 } from '@grafana/ui';
+import { Alert, Button, Stack, Select, useStyles2 } from '@grafana/ui';
 
 import { RawQuery } from '../_importedDependencies/datasources/prometheus/RawQuery';
 import { TraceqlFilter, TraceqlSearchScope } from '../dataquery.gen';
@@ -185,7 +185,7 @@ const TraceQLSearch = ({ datasource, query, onChange, onClearResults, app, addVa
             label={'Duration'}
             tooltip="The trace or span duration, i.e. end - start time of the trace/span. Accepted units are ns, ms, s, m, h"
           >
-            <HorizontalGroup spacing={'none'}>
+            <Stack gap={0}>
               <Select
                 options={[
                   { label: 'span', value: 'span' },
@@ -225,7 +225,7 @@ const TraceQLSearch = ({ datasource, query, onChange, onClearResults, app, addVa
                 operators={['<', '<=']}
                 updateFilter={updateFilter}
               />
-            </HorizontalGroup>
+            </Stack>
           </InlineSearchField>
           <InlineSearchField label={'Tags'}>
             <TagsInput

public/app/plugins/datasource/zipkin/QueryField.tsx

@@ -17,7 +17,7 @@ import {
   QueryField,
   useStyles2,
   Modal,
-  HorizontalGroup,
+  Stack,
   Button,
 } from '@grafana/ui';
 
@@ -90,7 +90,7 @@ export const ZipkinQueryField = ({ query, onChange, onRunQuery, datasource }: Pr
       </Modal>
       <InlineFieldRow>
         <InlineField label="Query type" grow={true}>
-          <HorizontalGroup spacing={'sm'} align={'center'} justify={'space-between'}>
+          <Stack gap={1} alignItems="center" justifyContent="space-between">
             <RadioButtonGroup<ZipkinQueryType>
               options={[{ value: 'traceID', label: 'TraceID' }]}
               value={query.queryType || 'traceID'}
@@ -111,7 +111,7 @@ export const ZipkinQueryField = ({ query, onChange, onRunQuery, datasource }: Pr
             >
               Import trace
             </Button>
-          </HorizontalGroup>
+          </Stack>
         </InlineField>
       </InlineFieldRow>
       {query.queryType === 'traceID' && (

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<Config extends Record<string, any>>(props: Props<Co
 
   return (
     <div className={styles.wrapper}>
-      <VerticalGroup spacing="sm">
+      <Stack direction="column" gap={1}>
-        <HorizontalGroup spacing="xs">
+        <Stack gap={0.5}>
           <Button
             icon={'plus-circle'}
             onClick={onPlus}
@@ -53,8 +53,8 @@ export function ViewControls<Config extends Record<string, any>>(props: Props<Co
             variant="secondary"
             disabled={disableZoomOut}
           />
-        </HorizontalGroup>
+        </Stack>
-      </VerticalGroup>
+      </Stack>
 
       {allowConfiguration && (
         <Button size={'xs'} fill="text" onClick={() => setShowConfig((showConfig) => !showConfig)}>