IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* remove some gf-form

* couple more transformations

* clean up Playlists

* review comments

* fix unit tests
This commit is contained in:
Ashley Harrison 2023-11-24 12:09:09 +00:00 committed by GitHub
parent 8a7eb4b484
commit 441d24f955
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 87 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
.betterer.results
View File

@ -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.", "6"],
[0, 0, 0, "Styles should be written using objects.", "7"] [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": [ "public/app/core/navigation/types.ts:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"] [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": [ "public/app/features/transformers/editors/ReduceTransformerEditor.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"] [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": [ "public/app/features/transformers/editors/SortByTransformerEditor.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"] [0, 0, 0, "Do not use any type assertions.", "0"]
], ],

24
public/app/core/navigation/GrafanaRouteError.tsx
View File

@ -2,7 +2,7 @@ import { css } from '@emotion/css';
import React, { ErrorInfo, useEffect } from 'react'; import React, { ErrorInfo, useEffect } from 'react';
import { useLocation } from 'react-router-dom'; 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 { Button, ErrorWithStack, useStyles2 } from '@grafana/ui';
import { Page } from '../components/Page/Page'; import { Page } from '../components/Page/Page';
@ -15,7 +15,7 @@ interface Props {
export function GrafanaRouteError({ error, errorInfo }: Props) { export function GrafanaRouteError({ error, errorInfo }: Props) {
const location = useLocation(); const location = useLocation();
const isChunkLoadingError = error?.name === 'ChunkLoadError'; const isChunkLoadingError = error?.name === 'ChunkLoadError';
const style = useStyles2(getStyles); const styles = useStyles2(getStyles);
useEffect(() => { useEffect(() => {
// Auto reload page 1 time if we have a chunk load error // Auto reload page 1 time if we have a chunk load error
@ -28,18 +28,16 @@ export function GrafanaRouteError({ error, errorInfo }: Props) {
return ( return (
<Page navId="error" layout={PageLayoutType.Canvas}> <Page navId="error" layout={PageLayoutType.Canvas}>
<div className={style}> <div className={styles.container}>
{isChunkLoadingError && ( {isChunkLoadingError && (
<div> <div>
<h2>Unable to find application file</h2> <h2>Unable to find application file</h2>
<br /> <br />
<h2 className="page-heading">Grafana has likely been updated. Please try reloading the page.</h2> <h2 className="page-heading">Grafana has likely been updated. Please try reloading the page.</h2>
<br /> <br />
<div className="gf-form-group"> <Button size="md" variant="secondary" icon="repeat" onClick={() => window.location.reload()}>
<Button size="md" variant="secondary" icon="repeat" onClick={() => window.location.reload()}> Reload
Reload </Button>
</Button>
</div>
<ErrorWithStack title={'Error details'} error={error} errorInfo={errorInfo} /> <ErrorWithStack title={'Error details'} error={error} errorInfo={errorInfo} />
</div> </div>
)} )}
@ -51,7 +49,9 @@ export function GrafanaRouteError({ error, errorInfo }: Props) {
); );
} }
const getStyles = () => css` const getStyles = (theme: GrafanaTheme2) => ({
width: 500px; container: css({
margin: 64px auto; width: '500px',
`; margin: theme.spacing(8, 'auto'),
}),
});

13
public/app/features/dashboard/components/ShareModal/ShareLink.test.tsx
View File

@ -104,7 +104,7 @@ describe('ShareModal', () => {
mockLocationHref('http://dashboards.grafana.com/d/abcdefghi/my-dash'); mockLocationHref('http://dashboards.grafana.com/d/abcdefghi/my-dash');
render(<ShareLink {...props} />); 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'; const params = '?from=1000&to=2000&orgId=1&panelId=22&width=1000&height=500&tz=UTC';
expect( expect(
await screen.findByRole('link', { name: selectors.pages.SharePanelModal.linkToRenderedImage }) 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'); mockLocationHref('http://dashboards.grafana.com/dashboard/script/my-dash.js');
render(<ShareLink {...props} />); 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'; const params = '?from=1000&to=2000&orgId=1&panelId=22&width=1000&height=500&tz=UTC';
expect( expect(
await screen.findByRole('link', { name: selectors.pages.SharePanelModal.linkToRenderedImage }) await screen.findByRole('link', { name: selectors.pages.SharePanelModal.linkToRenderedImage })
@ -144,13 +144,14 @@ describe('ShareModal', () => {
mockLocationHref('http://server/#!/test?editPanel=1'); mockLocationHref('http://server/#!/test?editPanel=1');
render(<ShareLink {...props} />); render(<ShareLink {...props} />);
const base = 'http://server/#!/test'; const base = 'http://server';
const path = '/#!/test';
expect(await screen.findByRole('textbox', { name: 'Link URL' })).toHaveValue( 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( expect(
await screen.findByRole('link', { name: selectors.pages.SharePanelModal.linkToRenderedImage }) 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 () => { 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 }) await screen.findByRole('link', { name: selectors.pages.SharePanelModal.linkToRenderedImage })
).toHaveAttribute( ).toHaveAttribute(
'href', '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`
); );
}); });
}); });

21
public/app/features/dashboard/components/ShareModal/ShareLink.tsx
View File

@ -1,7 +1,7 @@
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { selectors as e2eSelectors } from '@grafana/e2e-selectors'; 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 config from 'app/core/config';
import { t, Trans } from 'app/core/internationalization'; import { t, Trans } from 'app/core/internationalization';
@ -137,13 +137,9 @@ export class ShareLink extends PureComponent<Props, State> {
{panel && config.rendererAvailable && ( {panel && config.rendererAvailable && (
<> <>
{isDashboardSaved && ( {isDashboardSaved && (
<div className="gf-form"> <TextLink href={imageUrl} external icon={'camera'} aria-label={selectors.linkToRenderedImage}>
<a href={imageUrl} target="_blank" rel="noreferrer" aria-label={selectors.linkToRenderedImage}> {t('share-modal.link.rendered-image', 'Direct link rendered image')}
<Icon name="camera" /> </TextLink>
&nbsp;
<Trans i18nKey="share-modal.link.rendered-image">Direct link rendered image</Trans>
</a>
</div>
)} )}
{!isDashboardSaved && ( {!isDashboardSaved && (
@ -168,14 +164,9 @@ export class ShareLink extends PureComponent<Props, State> {
> >
<Trans i18nKey="share-modal.link.render-instructions"> <Trans i18nKey="share-modal.link.render-instructions">
To render a panel image, you must install the To render a panel image, you must install the
<a <TextLink href="https://grafana.com/grafana/plugins/grafana-image-renderer" external>
href="https://grafana.com/grafana/plugins/grafana-image-renderer"
target="_blank"
rel="noopener noreferrer"
className="external-link"
>
Grafana image renderer plugin Grafana image renderer plugin
</a> </TextLink>
. Please contact your Grafana administrator to install the plugin. . Please contact your Grafana administrator to install the plugin.
</Trans> </Trans>
</Alert> </Alert>

10
public/app/features/playlist/PlaylistForm.tsx
View File

@ -2,7 +2,7 @@ import React, { useMemo, useState } from 'react';
import { selectors } from '@grafana/e2e-selectors'; import { selectors } from '@grafana/e2e-selectors';
import { config } from '@grafana/runtime'; 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 { DashboardPicker } from 'app/core/components/Select/DashboardPicker';
import { TagFilter } from 'app/core/components/TagFilter/TagFilter'; import { TagFilter } from 'app/core/components/TagFilter/TagFilter';
import { Trans, t } from 'app/core/internationalization'; import { Trans, t } from 'app/core/internationalization';
@ -70,11 +70,7 @@ export const PlaylistForm = ({ onSubmit, playlist }: Props) => {
<PlaylistTable items={items} deleteItem={deleteItem} moveItem={moveItem} /> <PlaylistTable items={items} deleteItem={deleteItem} moveItem={moveItem} />
<div className="gf-form-group"> <FieldSet label={t('playlist-edit.form.heading', 'Add dashboards')}>
<h3 className="page-headering">
<Trans i18nKey="playlist-edit.form.heading">Add dashboards</Trans>
</h3>
<Field label={t('playlist-edit.form.add-title-label', 'Add by title')}> <Field label={t('playlist-edit.form.add-title-label', 'Add by title')}>
<DashboardPicker id="dashboard-picker" onChange={addByUID} key={items.length} /> <DashboardPicker id="dashboard-picker" onChange={addByUID} key={items.length} />
</Field> </Field>
@ -89,7 +85,7 @@ export const PlaylistForm = ({ onSubmit, playlist }: Props) => {
placeholder={t('playlist-edit.form.add-tag-placeholder', 'Select a tag')} placeholder={t('playlist-edit.form.add-tag-placeholder', 'Select a tag')}
/> />
</Field> </Field>
</div> </FieldSet>
<HorizontalGroup> <HorizontalGroup>
<Button type="submit" variant="primary" disabled={isDisabled} icon={saving ? 'spinner' : undefined}> <Button type="submit" variant="primary" disabled={isDisabled} icon={saving ? 'spinner' : undefined}>

11
public/app/features/playlist/PlaylistTable.tsx
View File

@ -1,7 +1,8 @@
import React from 'react'; import React from 'react';
import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd'; 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 { PlaylistTableRows } from './PlaylistTableRows';
import { PlaylistItem } from './types'; import { PlaylistItem } from './types';
@ -20,11 +21,7 @@ export const PlaylistTable = ({ items, deleteItem, moveItem }: Props) => {
}; };
return ( return (
<div className="gf-form-group"> <FieldSet label={t('playlist-edit.form.table-heading', 'Dashboards')}>
<h3 className="page-headering">
<Trans i18nKey="playlist-edit.form.table-heading">Dashboards</Trans>
</h3>
<DragDropContext onDragEnd={onDragEnd}> <DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="playlist-list" direction="vertical"> <Droppable droppableId="playlist-list" direction="vertical">
{(provided) => { {(provided) => {
@ -37,6 +34,6 @@ export const PlaylistTable = ({ items, deleteItem, moveItem }: Props) => {
}} }}
</Droppable> </Droppable>
</DragDropContext> </DragDropContext>
</div> </FieldSet>
); );
}; };

35
public/app/features/transformers/editors/ConcatenateTransformerEditor.tsx
View File

@ -12,7 +12,7 @@ import {
ConcatenateFrameNameMode, ConcatenateFrameNameMode,
ConcatenateTransformerOptions, ConcatenateTransformerOptions,
} from '@grafana/data/src/transformations/transformers/concat'; } 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'; import { getTransformationContent } from '../docs/getTransformationContent';
@ -57,29 +57,18 @@ export class ConcatenateTransformerEditor extends React.PureComponent<Concatenat
return ( return (
<div> <div>
<div className="gf-form-inline"> <InlineField label="Name" labelWidth={16} grow>
<div className="gf-form"> <Select
<div className="gf-form-label width-8">Name</div> width={36}
<Select options={nameModes}
className="width-18" value={nameModes.find((v) => v.value === frameNameMode)}
options={nameModes} onChange={this.onModeChanged}
value={nameModes.find((v) => v.value === frameNameMode)} />
onChange={this.onModeChanged} </InlineField>
/>
</div>
</div>
{frameNameMode === ConcatenateFrameNameMode.Label && ( {frameNameMode === ConcatenateFrameNameMode.Label && (
<div className="gf-form-inline"> <InlineField label="Label" labelWidth={16} grow>
<div className="gf-form"> <Input width={36} value={options.frameNameLabel ?? ''} placeholder="frame" onChange={this.onLabelChanged} />
<div className="gf-form-label width-8">Label</div> </InlineField>
<Input
className="width-18"
value={options.frameNameLabel ?? ''}
placeholder="frame"
onChange={this.onLabelChanged}
/>
</div>
</div>
)} )}
</div> </div>
); );

41
public/app/features/transformers/editors/FilterByRefIdTransformerEditor.tsx
View File

@ -9,7 +9,7 @@ import {
TransformerCategory, TransformerCategory,
} from '@grafana/data'; } from '@grafana/data';
import { FilterFramesByRefIdTransformerOptions } from '@grafana/data/src/transformations/transformers/filterByRefId'; 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'; 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> <FieldValidationMessage>Filter data by query expects multiple queries in the input.</FieldValidationMessage>
</div> </div>
)} )}
<div className="gf-form-inline"> <InlineField label="Series refId" labelWidth={16} shrink>
<div className="gf-form gf-form--grow"> <HorizontalGroup spacing="xs" align="flex-start" wrap>
<div className="gf-form-label width-8">Series refId</div> {options.map((o, i) => {
<HorizontalGroup spacing="xs" align="flex-start" wrap> const label = `${o.refId}${o.count > 1 ? ' (' + o.count + ')' : ''}`;
{options.map((o, i) => { const isSelected = selected.indexOf(o.refId) > -1;
const label = `${o.refId}${o.count > 1 ? ' (' + o.count + ')' : ''}`; return (
const isSelected = selected.indexOf(o.refId) > -1; <FilterPill
return ( key={`${o.refId}/${i}`}
<FilterPill onClick={() => {
key={`${o.refId}/${i}`} this.onFieldToggle(o.refId);
onClick={() => { }}
this.onFieldToggle(o.refId); label={label}
}} selected={isSelected}
label={label} />
selected={isSelected} );
/> })}
); </HorizontalGroup>
})} </InlineField>
</HorizontalGroup>
</div>
</div>
</> </>
); );
} }

64
public/app/features/transformers/editors/RenameByRegexTransformer.tsx
View File

@ -1,4 +1,3 @@
import { css } from '@emotion/css';
import React from 'react'; import React from 'react';
import { import {
@ -10,7 +9,7 @@ import {
TransformerCategory, TransformerCategory,
} from '@grafana/data'; } from '@grafana/data';
import { RenameByRegexTransformerOptions } from '@grafana/data/src/transformations/transformers/renameByRegex'; 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'; import { getTransformationContent } from '../docs/getTransformationContent';
@ -83,44 +82,29 @@ export class RenameByRegexTransformerEditor extends React.PureComponent<
const { regex, renamePattern, isRegexValid } = this.state; const { regex, renamePattern, isRegexValid } = this.state;
return ( return (
<> <>
<div className="gf-form-inline"> <InlineField
<div className="gf-form gf-form--grow"> label="Match"
<div className="gf-form-label width-8">Match</div> labelWidth={16}
<Field invalid={!isRegexValid}
invalid={!isRegexValid} error={!isRegexValid ? 'Invalid pattern' : undefined}
error={!isRegexValid ? 'Invalid pattern' : undefined} >
className={css` <Input
margin-bottom: 0; placeholder="Regular expression pattern"
`} value={regex || ''}
> onChange={this.handleRegexChange}
<Input onBlur={this.handleRegexBlur}
placeholder="Regular expression pattern" width={25}
value={regex || ''} />
onChange={this.handleRegexChange} </InlineField>
onBlur={this.handleRegexBlur} <InlineField label="Replace" labelWidth={16}>
width={25} <Input
/> placeholder="Replacement pattern"
</Field> value={renamePattern || ''}
</div> onChange={this.handleRenameChange}
</div> onBlur={this.handleRenameBlur}
<div className="gf-form-inline"> width={25}
<div className="gf-form gf-form--grow"> />
<div className="gf-form-label width-8">Replace</div> </InlineField>
<Field
className={css`
margin-bottom: 0;
`}
>
<Input
placeholder="Replacement pattern"
value={renamePattern || ''}
onChange={this.handleRenameChange}
onBlur={this.handleRenameBlur}
width={25}
/>
</Field>
</div>
</div>
</> </>
); );
} }