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>
2 months ago · 750b90e756
parent d05b2862b6
commit 750b90e756
9 changed files with 33 additions and 54 deletions
--- 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"]
--- 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) => {
      <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}>
--- a/public/app/plugins/datasource/jaeger/components/QueryEditor.tsx
+++ b/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()}
--- a/public/app/plugins/datasource/tempo/QueryField.tsx
+++ b/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' && (
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/DurationInput.tsx
+++ b/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>
  );
 };

--- 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 (
    <>
-      <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} />}
    </>
  );
--- a/public/app/plugins/datasource/tempo/SearchTraceQLEditor/TraceQLSearch.tsx
+++ b/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
--- a/public/app/plugins/datasource/zipkin/QueryField.tsx
+++ b/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' && (
--- 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<Config extends Record<string, any>>(props: Props<Co

  return (
    <div className={styles.wrapper}>
-      <VerticalGroup spacing="sm">
-        <HorizontalGroup spacing="xs">
+      <Stack direction="column" gap={1}>
+        <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>
-      </VerticalGroup>
+        </Stack>
+      </Stack>

      {allowConfiguration && (
        <Button size={'xs'} fill="text" onClick={() => setShowConfig((showConfig) => !showConfig)}>