mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Grafana-UI: Fix use of Fragments as children of InlineField (#46326)
This commit is contained in:
parent
b8fba41d74
commit
00c93fff8c
@ -3,6 +3,7 @@ import { Input } from '../Input/Input';
|
||||
import { Button } from '../Button';
|
||||
import { TextArea } from '../TextArea/TextArea';
|
||||
import { InlineField } from '../Forms/InlineField';
|
||||
import { InlineFieldRow } from '../Forms/InlineFieldRow';
|
||||
|
||||
interface Props {
|
||||
label: string;
|
||||
@ -15,17 +16,19 @@ interface Props {
|
||||
|
||||
export const CertificationKey: FC<Props> = ({ hasCert, label, onChange, onClick, placeholder }) => {
|
||||
return (
|
||||
<InlineField label={label} labelWidth={14}>
|
||||
{hasCert ? (
|
||||
<>
|
||||
<Input type="text" disabled value="configured" width={24} />
|
||||
<Button variant="secondary" onClick={onClick} style={{ marginLeft: 4 }}>
|
||||
Reset
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<TextArea rows={7} onChange={onChange} placeholder={placeholder} required />
|
||||
<InlineFieldRow>
|
||||
<InlineField label={label} labelWidth={14} disabled={hasCert}>
|
||||
{hasCert ? (
|
||||
<Input type="text" value="configured" width={24} />
|
||||
) : (
|
||||
<TextArea rows={7} onChange={onChange} placeholder={placeholder} required />
|
||||
)}
|
||||
</InlineField>
|
||||
{hasCert && (
|
||||
<Button variant="secondary" onClick={onClick} style={{ marginLeft: 4 }}>
|
||||
Reset
|
||||
</Button>
|
||||
)}
|
||||
</InlineField>
|
||||
</InlineFieldRow>
|
||||
);
|
||||
};
|
||||
|
@ -2,7 +2,7 @@ import { AnnotationQuery, EventBus, GrafanaTheme2 } from '@grafana/data';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { getDashboardQueryRunner } from '../../../query/state/DashboardQueryRunner/DashboardQueryRunner';
|
||||
import { AnnotationQueryFinished, AnnotationQueryStarted } from '../../../../types/events';
|
||||
import { InlineField, InlineSwitch, useStyles2 } from '@grafana/ui';
|
||||
import { InlineField, InlineFieldRow, InlineSwitch, useStyles2 } from '@grafana/ui';
|
||||
import { LoadingIndicator } from '@grafana/ui/src/components/PanelChrome/LoadingIndicator';
|
||||
import { css } from '@emotion/css';
|
||||
|
||||
@ -41,14 +41,14 @@ export const AnnotationPicker = ({ annotation, events, onEnabledChanged }: Annot
|
||||
|
||||
return (
|
||||
<div key={annotation.name} className={styles.annotation}>
|
||||
<InlineField label={annotation.name} disabled={loading}>
|
||||
<>
|
||||
<InlineFieldRow>
|
||||
<InlineField label={annotation.name} disabled={loading}>
|
||||
<InlineSwitch value={annotation.enable} onChange={() => onEnabledChanged(annotation)} disabled={loading} />
|
||||
<div className={styles.indicator}>
|
||||
<LoadingIndicator loading={loading} onCancel={onCancel} />
|
||||
</div>
|
||||
</>
|
||||
</InlineField>
|
||||
</InlineField>
|
||||
<div className={styles.indicator}>
|
||||
<LoadingIndicator loading={true} onCancel={onCancel} />
|
||||
</div>
|
||||
</InlineFieldRow>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
@ -156,7 +156,7 @@ export const StyleRuleEditor: FC<StandardEditorProps<FeatureStyleConfig, any, an
|
||||
/>
|
||||
</InlineField>
|
||||
<InlineField className={styles.inline} grow={true}>
|
||||
<>
|
||||
<div className={styles.flexRow}>
|
||||
{(check.operation === ComparisonOperation.EQ || check.operation === ComparisonOperation.NEQ) && (
|
||||
<Select
|
||||
menuShouldPortal
|
||||
@ -177,7 +177,7 @@ export const StyleRuleEditor: FC<StandardEditorProps<FeatureStyleConfig, any, an
|
||||
onChange={onChangeNumericValue}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
</div>
|
||||
</InlineField>
|
||||
<Button
|
||||
size="md"
|
||||
@ -222,4 +222,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
|
||||
button: css`
|
||||
margin-left: 4px;
|
||||
`,
|
||||
flexRow: css`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
`,
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user