Forms: Remove usage of gf-form textarea and help icons (#70561)

This commit is contained in:
Joao Silva 2023-06-23 19:07:28 +09:00 committed by GitHub
parent 24efcc54d2
commit cebc180e5b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 21 additions and 47 deletions

View File

@ -64,9 +64,7 @@ export const TLSAuthSettings = ({ dataSourceConfig, onChange }: HttpSettingsBase
content="TLS/SSL Certs are encrypted and stored in the Grafana database."
theme="info"
>
<div className="gf-form-help-icon gf-form-help-icon--right-normal">
<Icon name="info-circle" size="xs" style={{ marginLeft: '10px' }} />
</div>
<Icon name="info-circle" size="xs" style={{ marginLeft: '10px' }} />
</Tooltip>
</div>
<div>

View File

@ -57,9 +57,7 @@ export class Switch extends PureComponent<Props, State> {
{label}
{tooltip && (
<Tooltip placement={tooltipPlacement ? tooltipPlacement : 'auto'} content={tooltip} theme={'info'}>
<div className="gf-form-help-icon gf-form-help-icon--right-normal">
<Icon name="info-circle" size="sm" style={{ marginLeft: '10px' }} />
</div>
<Icon name="info-circle" size="sm" style={{ marginLeft: '10px' }} />
</Tooltip>
)}
</div>

View File

@ -21,9 +21,7 @@ export const LdapUserGroups = ({ groups, showAttributeMapping }: Props) => {
<th>
Organization
<Tooltip placement="top" content="Only the first match for an Organization will be used" theme={'info'}>
<span className="gf-form-help-icon">
<Icon name="info-circle" />
</span>
<Icon name="info-circle" />
</Tooltip>
</th>
<th>Role</th>
@ -39,14 +37,10 @@ export const LdapUserGroups = ({ groups, showAttributeMapping }: Props) => {
<td>{group.orgRole}</td>
) : (
<td>
<span className="text-warning">
No match
<Tooltip placement="top" content="No matching groups found" theme={'info'}>
<span className="gf-form-help-icon">
<Icon name="info-circle" />
</span>
</Tooltip>
</span>
<span className="text-warning">No match</span>
<Tooltip placement="top" content="No matching groups found" theme={'info'}>
<Icon name="info-circle" />
</Tooltip>
</td>
)}
</tr>

View File

@ -33,14 +33,10 @@ export const LdapUserTeams = ({ teams, showAttributeMapping }: Props) => {
<>
<td />
<td>
<div className="text-warning">
No match
<Tooltip placement="top" content="No matching teams found" theme={'info'}>
<span className="gf-form-help-icon">
<Icon name="info-circle" />
</span>
</Tooltip>
</div>
<span className="text-warning">No match</span>
<Tooltip placement="top" content="No matching teams found" theme={'info'}>
<Icon name="info-circle" />
</Tooltip>
</td>
</>
)}

View File

@ -1,15 +1,11 @@
import { css } from '@emotion/css';
import cx from 'classnames';
import React, { ReactNode, useState } from 'react';
import { Field, FieldType, LinkModel } from '@grafana/data';
import { LegacyForms } from '@grafana/ui';
import { InlineField, TextArea } from '@grafana/ui';
import { getFieldLinksForExplore } from '../../../../features/explore/utils/links';
import { DerivedFieldConfig } from '../types';
const { FormField } = LegacyForms;
type Props = {
derivedFields?: DerivedFieldConfig[];
className?: string;
@ -25,23 +21,15 @@ export const DebugSection = (props: Props) => {
return (
<div className={className}>
<FormField
labelWidth={12}
label={'Debug log message'}
inputEl={
<textarea
placeholder={'Paste an example log line here to test the regular expressions of your derived fields'}
className={cx(
'gf-form-input gf-form-textarea',
css`
width: 100%;
`
)}
value={debugText}
onChange={(event) => setDebugText(event.currentTarget.value)}
/>
}
/>
<InlineField label="Debug log message" labelWidth={24} grow>
<TextArea
type="text"
aria-label="Prometheus Query"
placeholder="Paste an example log line here to test the regular expressions of your derived fields"
value={debugText}
onChange={(event) => setDebugText(event.currentTarget.value)}
/>
</InlineField>
{!!debugFields.length && <DebugFields fields={debugFields} />}
</div>
);