Chore: Remove some gf-form classes (#78601)

* remove some gf-form * couple more transformations * clean up Playlists * review comments * fix unit tests
2025-02-25 18:55:37 -06:00 · 2023-11-24 12:09:09 +00:00 · 2023-11-24 12:09:09 +00:00 · 441d24f955
commit 441d24f955
parent 8a7eb4b484
9 changed files with 87 additions and 139 deletions
--- a/.betterer.results
+++ b/.betterer.results
@ -1437,9 +1437,6 @@ exports[`better eslint`] = {
      [0, 0, 0, "Styles should be written using objects.", "6"],
      [0, 0, 0, "Styles should be written using objects.", "7"]
    ],
-    "public/app/core/navigation/GrafanaRouteError.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"]
-    ],
    "public/app/core/navigation/types.ts:5381": [
      [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
    ],
@ -4881,10 +4878,6 @@ exports[`better eslint`] = {
    "public/app/features/transformers/editors/ReduceTransformerEditor.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
-    "public/app/features/transformers/editors/RenameByRegexTransformer.tsx:5381": [
-      [0, 0, 0, "Styles should be written using objects.", "0"],
-      [0, 0, 0, "Styles should be written using objects.", "1"]
-    ],
    "public/app/features/transformers/editors/SortByTransformerEditor.tsx:5381": [
      [0, 0, 0, "Do not use any type assertions.", "0"]
    ],
--- a/public/app/core/navigation/GrafanaRouteError.tsx
+++ b/public/app/core/navigation/GrafanaRouteError.tsx
@ -2,7 +2,7 @@ import { css } from '@emotion/css';
 import React, { ErrorInfo, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';

-import { locationUtil, PageLayoutType } from '@grafana/data';
+import { GrafanaTheme2, locationUtil, PageLayoutType } from '@grafana/data';
 import { Button, ErrorWithStack, useStyles2 } from '@grafana/ui';

 import { Page } from '../components/Page/Page';
@ -15,7 +15,7 @@ interface Props {
 export function GrafanaRouteError({ error, errorInfo }: Props) {
  const location = useLocation();
  const isChunkLoadingError = error?.name === 'ChunkLoadError';
-  const style = useStyles2(getStyles);
+  const styles = useStyles2(getStyles);

  useEffect(() => {
    // Auto reload page 1 time if we have a chunk load error
@ -28,18 +28,16 @@ export function GrafanaRouteError({ error, errorInfo }: Props) {

  return (
    <Page navId="error" layout={PageLayoutType.Canvas}>
-      <div className={style}>
+      <div className={styles.container}>
        {isChunkLoadingError && (
          <div>
            <h2>Unable to find application file</h2>
            <br />
            <h2 className="page-heading">Grafana has likely been updated. Please try reloading the page.</h2>
            <br />
-            <div className="gf-form-group">
-              <Button size="md" variant="secondary" icon="repeat" onClick={() => window.location.reload()}>
-                Reload
-              </Button>
-            </div>
+            <Button size="md" variant="secondary" icon="repeat" onClick={() => window.location.reload()}>
+              Reload
+            </Button>
            <ErrorWithStack title={'Error details'} error={error} errorInfo={errorInfo} />
          </div>
        )}
@ -51,7 +49,9 @@ export function GrafanaRouteError({ error, errorInfo }: Props) {
  );
 }

-const getStyles = () => css`
-  width: 500px;
-  margin: 64px auto;
-`;
+const getStyles = (theme: GrafanaTheme2) => ({
+  container: css({
+    width: '500px',
+    margin: theme.spacing(8, 'auto'),
+  }),
+});
--- a/public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx
@ -104,7 +104,7 @@ describe('ShareModal', () => {
      mockLocationHref('http://dashboards.grafana.com/d/abcdefghi/my-dash');
      render(<ShareLink {...props} />);

-      const base = 'http://dashboards.grafana.com/render/d-solo/abcdefghi/my-dash';
+      const base = '/render/d-solo/abcdefghi/my-dash';
      const params = '?from=1000&to=2000&orgId=1&panelId=22&width=1000&height=500&tz=UTC';
      expect(
        await screen.findByRole('link', { name: selectors.pages.SharePanelModal.linkToRenderedImage })
@ -115,7 +115,7 @@ describe('ShareModal', () => {
      mockLocationHref('http://dashboards.grafana.com/dashboard/script/my-dash.js');
      render(<ShareLink {...props} />);

-      const base = 'http://dashboards.grafana.com/render/dashboard-solo/script/my-dash.js';
+      const base = '/render/dashboard-solo/script/my-dash.js';
      const params = '?from=1000&to=2000&orgId=1&panelId=22&width=1000&height=500&tz=UTC';
      expect(
        await screen.findByRole('link', { name: selectors.pages.SharePanelModal.linkToRenderedImage })
@ -144,13 +144,14 @@ describe('ShareModal', () => {
      mockLocationHref('http://server/#!/test?editPanel=1');
      render(<ShareLink {...props} />);

-      const base = 'http://server/#!/test';
+      const base = 'http://server';
+      const path = '/#!/test';
      expect(await screen.findByRole('textbox', { name: 'Link URL' })).toHaveValue(
-        base + '?editPanel=1&from=1000&to=2000&orgId=1'
+        base + path + '?editPanel=1&from=1000&to=2000&orgId=1'
      );
      expect(
        await screen.findByRole('link', { name: selectors.pages.SharePanelModal.linkToRenderedImage })
-      ).toHaveAttribute('href', base + '?from=1000&to=2000&orgId=1&panelId=1&width=1000&height=500&tz=UTC');
+      ).toHaveAttribute('href', path + '?from=1000&to=2000&orgId=1&panelId=1&width=1000&height=500&tz=UTC');
    });

    it('should shorten url', async () => {
@ -197,7 +198,7 @@ describe('when appUrl is set in the grafana config', () => {
      await screen.findByRole('link', { name: selectors.pages.SharePanelModal.linkToRenderedImage })
    ).toHaveAttribute(
      'href',
-      `http://dashboards.grafana.com/render/d-solo/${mockDashboard.uid}?orgId=1&from=1000&to=2000&panelId=${mockPanel.id}&width=1000&height=500&tz=UTC`
+      `/render/d-solo/${mockDashboard.uid}?orgId=1&from=1000&to=2000&panelId=${mockPanel.id}&width=1000&height=500&tz=UTC`
    );
  });
 });
--- a/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
+++ b/public/app/features/dashboard/components/ShareModal/ShareLink.tsx
@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';

 import { selectors as e2eSelectors } from '@grafana/e2e-selectors';
-import { Alert, ClipboardButton, Field, FieldSet, Icon, Input, Switch } from '@grafana/ui';
+import { Alert, ClipboardButton, Field, FieldSet, Input, Switch, TextLink } from '@grafana/ui';
 import config from 'app/core/config';
 import { t, Trans } from 'app/core/internationalization';

@ -137,13 +137,9 @@ export class ShareLink extends PureComponent<Props, State> {
        {panel && config.rendererAvailable && (
          <>
            {isDashboardSaved && (
-              <div className="gf-form">
-                <a href={imageUrl} target="_blank" rel="noreferrer" aria-label={selectors.linkToRenderedImage}>
-                  <Icon name="camera" />
-                  &nbsp;
-                  <Trans i18nKey="share-modal.link.rendered-image">Direct link rendered image</Trans>
-                </a>
-              </div>
+              <TextLink href={imageUrl} external icon={'camera'} aria-label={selectors.linkToRenderedImage}>
+                {t('share-modal.link.rendered-image', 'Direct link rendered image')}
+              </TextLink>
            )}

            {!isDashboardSaved && (
@ -168,14 +164,9 @@ export class ShareLink extends PureComponent<Props, State> {
          >
            <Trans i18nKey="share-modal.link.render-instructions">
              To render a panel image, you must install the
-              <a
-                href="https://grafana.com/grafana/plugins/grafana-image-renderer"
-                target="_blank"
-                rel="noopener noreferrer"
-                className="external-link"
-              >
+              <TextLink href="https://grafana.com/grafana/plugins/grafana-image-renderer" external>
                Grafana image renderer plugin
-              </a>
+              </TextLink>
              . Please contact your Grafana administrator to install the plugin.
            </Trans>
          </Alert>
--- a/public/app/features/playlist/PlaylistForm.tsx
+++ b/public/app/features/playlist/PlaylistForm.tsx
@ -2,7 +2,7 @@ import React, { useMemo, useState } from 'react';

 import { selectors } from '@grafana/e2e-selectors';
 import { config } from '@grafana/runtime';
-import { Button, Field, Form, HorizontalGroup, Input, LinkButton } from '@grafana/ui';
+import { Button, Field, FieldSet, Form, HorizontalGroup, Input, LinkButton } from '@grafana/ui';
 import { DashboardPicker } from 'app/core/components/Select/DashboardPicker';
 import { TagFilter } from 'app/core/components/TagFilter/TagFilter';
 import { Trans, t } from 'app/core/internationalization';
@ -70,11 +70,7 @@ export const PlaylistForm = ({ onSubmit, playlist }: Props) => {

              <PlaylistTable items={items} deleteItem={deleteItem} moveItem={moveItem} />

-              <div className="gf-form-group">
-                <h3 className="page-headering">
-                  <Trans i18nKey="playlist-edit.form.heading">Add dashboards</Trans>
-                </h3>
-
+              <FieldSet label={t('playlist-edit.form.heading', 'Add dashboards')}>
                <Field label={t('playlist-edit.form.add-title-label', 'Add by title')}>
                  <DashboardPicker id="dashboard-picker" onChange={addByUID} key={items.length} />
                </Field>
@ -89,7 +85,7 @@ export const PlaylistForm = ({ onSubmit, playlist }: Props) => {
                    placeholder={t('playlist-edit.form.add-tag-placeholder', 'Select a tag')}
                  />
                </Field>
-              </div>
+              </FieldSet>

              <HorizontalGroup>
                <Button type="submit" variant="primary" disabled={isDisabled} icon={saving ? 'spinner' : undefined}>
--- a/public/app/features/playlist/PlaylistTable.tsx
+++ b/public/app/features/playlist/PlaylistTable.tsx
@ -1,7 +1,8 @@
 import React from 'react';
 import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';

-import { Trans } from 'app/core/internationalization';
+import { FieldSet } from '@grafana/ui';
+import { t } from 'app/core/internationalization';

 import { PlaylistTableRows } from './PlaylistTableRows';
 import { PlaylistItem } from './types';
@ -20,11 +21,7 @@ export const PlaylistTable = ({ items, deleteItem, moveItem }: Props) => {
  };

  return (
-    <div className="gf-form-group">
-      <h3 className="page-headering">
-        <Trans i18nKey="playlist-edit.form.table-heading">Dashboards</Trans>
-      </h3>
-
+    <FieldSet label={t('playlist-edit.form.table-heading', 'Dashboards')}>
      <DragDropContext onDragEnd={onDragEnd}>
        <Droppable droppableId="playlist-list" direction="vertical">
          {(provided) => {
@ -37,6 +34,6 @@ export const PlaylistTable = ({ items, deleteItem, moveItem }: Props) => {
          }}
        </Droppable>
      </DragDropContext>
-    </div>
+    </FieldSet>
  );
 };
--- a/public/app/features/transformers/editors/ConcatenateTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/ConcatenateTransformerEditor.tsx
@ -12,7 +12,7 @@ import {
  ConcatenateFrameNameMode,
  ConcatenateTransformerOptions,
 } from '@grafana/data/src/transformations/transformers/concat';
-import { Input, Select } from '@grafana/ui';
+import { InlineField, Input, Select } from '@grafana/ui';

 import { getTransformationContent } from '../docs/getTransformationContent';

@ -57,29 +57,18 @@ export class ConcatenateTransformerEditor extends React.PureComponent<Concatenat

    return (
      <div>
-        <div className="gf-form-inline">
-          <div className="gf-form">
-            <div className="gf-form-label width-8">Name</div>
-            <Select
-              className="width-18"
-              options={nameModes}
-              value={nameModes.find((v) => v.value === frameNameMode)}
-              onChange={this.onModeChanged}
-            />
-          </div>
-        </div>
+        <InlineField label="Name" labelWidth={16} grow>
+          <Select
+            width={36}
+            options={nameModes}
+            value={nameModes.find((v) => v.value === frameNameMode)}
+            onChange={this.onModeChanged}
+          />
+        </InlineField>
        {frameNameMode === ConcatenateFrameNameMode.Label && (
-          <div className="gf-form-inline">
-            <div className="gf-form">
-              <div className="gf-form-label width-8">Label</div>
-              <Input
-                className="width-18"
-                value={options.frameNameLabel ?? ''}
-                placeholder="frame"
-                onChange={this.onLabelChanged}
-              />
-            </div>
-          </div>
+          <InlineField label="Label" labelWidth={16} grow>
+            <Input width={36} value={options.frameNameLabel ?? ''} placeholder="frame" onChange={this.onLabelChanged} />
+          </InlineField>
        )}
      </div>
    );
--- a/public/app/features/transformers/editors/FilterByRefIdTransformerEditor.tsx
+++ b/public/app/features/transformers/editors/FilterByRefIdTransformerEditor.tsx
@ -9,7 +9,7 @@ import {
  TransformerCategory,
 } from '@grafana/data';
 import { FilterFramesByRefIdTransformerOptions } from '@grafana/data/src/transformations/transformers/filterByRefId';
-import { HorizontalGroup, FilterPill, FieldValidationMessage } from '@grafana/ui';
+import { HorizontalGroup, FilterPill, FieldValidationMessage, InlineField } from '@grafana/ui';

 import { getTransformationContent } from '../docs/getTransformationContent';

@ -114,27 +114,24 @@ export class FilterByRefIdTransformerEditor extends React.PureComponent<
            <FieldValidationMessage>Filter data by query expects multiple queries in the input.</FieldValidationMessage>
          </div>
        )}
-        <div className="gf-form-inline">
-          <div className="gf-form gf-form--grow">
-            <div className="gf-form-label width-8">Series refId</div>
-            <HorizontalGroup spacing="xs" align="flex-start" wrap>
-              {options.map((o, i) => {
-                const label = `${o.refId}${o.count > 1 ? ' (' + o.count + ')' : ''}`;
-                const isSelected = selected.indexOf(o.refId) > -1;
-                return (
-                  <FilterPill
-                    key={`${o.refId}/${i}`}
-                    onClick={() => {
-                      this.onFieldToggle(o.refId);
-                    }}
-                    label={label}
-                    selected={isSelected}
-                  />
-                );
-              })}
-            </HorizontalGroup>
-          </div>
-        </div>
+        <InlineField label="Series refId" labelWidth={16} shrink>
+          <HorizontalGroup spacing="xs" align="flex-start" wrap>
+            {options.map((o, i) => {
+              const label = `${o.refId}${o.count > 1 ? ' (' + o.count + ')' : ''}`;
+              const isSelected = selected.indexOf(o.refId) > -1;
+              return (
+                <FilterPill
+                  key={`${o.refId}/${i}`}
+                  onClick={() => {
+                    this.onFieldToggle(o.refId);
+                  }}
+                  label={label}
+                  selected={isSelected}
+                />
+              );
+            })}
+          </HorizontalGroup>
+        </InlineField>
      </>
    );
  }
--- a/public/app/features/transformers/editors/RenameByRegexTransformer.tsx
+++ b/public/app/features/transformers/editors/RenameByRegexTransformer.tsx
@ -1,4 +1,3 @@
-import { css } from '@emotion/css';
 import React from 'react';

 import {
@ -10,7 +9,7 @@ import {
  TransformerCategory,
 } from '@grafana/data';
 import { RenameByRegexTransformerOptions } from '@grafana/data/src/transformations/transformers/renameByRegex';
-import { Field, Input } from '@grafana/ui';
+import { InlineField, Input } from '@grafana/ui';

 import { getTransformationContent } from '../docs/getTransformationContent';

@ -83,44 +82,29 @@ export class RenameByRegexTransformerEditor extends React.PureComponent<
    const { regex, renamePattern, isRegexValid } = this.state;
    return (
      <>
-        <div className="gf-form-inline">
-          <div className="gf-form gf-form--grow">
-            <div className="gf-form-label width-8">Match</div>
-            <Field
-              invalid={!isRegexValid}
-              error={!isRegexValid ? 'Invalid pattern' : undefined}
-              className={css`
-                margin-bottom: 0;
-              `}
-            >
-              <Input
-                placeholder="Regular expression pattern"
-                value={regex || ''}
-                onChange={this.handleRegexChange}
-                onBlur={this.handleRegexBlur}
-                width={25}
-              />
-            </Field>
-          </div>
-        </div>
-        <div className="gf-form-inline">
-          <div className="gf-form gf-form--grow">
-            <div className="gf-form-label width-8">Replace</div>
-            <Field
-              className={css`
-                margin-bottom: 0;
-              `}
-            >
-              <Input
-                placeholder="Replacement pattern"
-                value={renamePattern || ''}
-                onChange={this.handleRenameChange}
-                onBlur={this.handleRenameBlur}
-                width={25}
-              />
-            </Field>
-          </div>
-        </div>
+        <InlineField
+          label="Match"
+          labelWidth={16}
+          invalid={!isRegexValid}
+          error={!isRegexValid ? 'Invalid pattern' : undefined}
+        >
+          <Input
+            placeholder="Regular expression pattern"
+            value={regex || ''}
+            onChange={this.handleRegexChange}
+            onBlur={this.handleRegexBlur}
+            width={25}
+          />
+        </InlineField>
+        <InlineField label="Replace" labelWidth={16}>
+          <Input
+            placeholder="Replacement pattern"
+            value={renamePattern || ''}
+            onChange={this.handleRenameChange}
+            onBlur={this.handleRenameBlur}
+            width={25}
+          />
+        </InlineField>
      </>
    );
  }