Chore: Remove deprecated Layout components (#89376)

* Removed depricated HorizontalLayout from PrometheusMetricsBrowser

* Removed commented import

* typo fix

* Removed depricated HorizontalLayout from RawInfluxQLEditor

* Replaced InlineFormLabel to InlineField in RawInlfuxEditor.tsx

* Removed depricated HorizontalLayout from GraphiteFunctionEditor

* Changed div to instead use stack

* Changed htmlFor attribute from selectElementId to aliasElementId

* Updated the betterer results

* Updated prettier write to the updated files

* Changed htmlFor label to fix the text
This commit is contained in:
Chirag Gomber
2024-06-25 00:29:41 +05:30
committed by GitHub
parent 07389d1030
commit ca1afff886
4 changed files with 44 additions and 45 deletions

View File

@@ -2,7 +2,7 @@ import { css, cx } from '@emotion/css';
import React, { useState } from 'react';
import { GrafanaTheme2 } from '@grafana/data';
import { HorizontalGroup, InlineLabel, useStyles2 } from '@grafana/ui';
import { Stack, InlineLabel, useStyles2 } from '@grafana/ui';
import { FuncInstance } from '../gfunc';
import { actions } from '../state/actions';
@@ -42,7 +42,7 @@ export function GraphiteFunctionEditor({ func }: FunctionEditorProps) {
onMouseOver={() => setIsMouseOver(true)}
onMouseOut={() => setIsMouseOver(false)}
>
<HorizontalGroup spacing="none">
<Stack gap={0} alignItems={'baseline'}>
<FunctionEditor
func={func}
onMoveLeft={() => {
@@ -55,7 +55,9 @@ export function GraphiteFunctionEditor({ func }: FunctionEditorProps) {
dispatch(actions.removeFunction({ func }));
}}
/>
<InlineLabel className={styles.label}>(</InlineLabel>
<InlineLabel className={styles.label} width={'auto'}>
(
</InlineLabel>
{params.map((editableParam: EditableParam, index: number) => {
return (
<React.Fragment key={index}>
@@ -75,8 +77,10 @@ export function GraphiteFunctionEditor({ func }: FunctionEditorProps) {
</React.Fragment>
);
})}
<InlineLabel className={styles.label}>)</InlineLabel>
</HorizontalGroup>
<InlineLabel className={styles.label} width={'auto'}>
)
</InlineLabel>
</Stack>
</div>
);
}

View File

@@ -1,6 +1,6 @@
import React, { useId } from 'react';
import { HorizontalGroup, InlineFormLabel, Input, Select, TextArea } from '@grafana/ui';
import { Stack, InlineField, Input, Select, TextArea } from '@grafana/ui';
import { InfluxQuery } from '../../../../../types';
import { DEFAULT_RESULT_FORMAT, RESULT_FORMATS } from '../../../constants';
@@ -34,7 +34,7 @@ export const RawInfluxQLEditor = ({ query, onChange, onRunQuery }: Props): JSX.E
};
return (
<div>
<Stack direction={'column'}>
<TextArea
aria-label="query"
rows={3}
@@ -46,30 +46,32 @@ export const RawInfluxQLEditor = ({ query, onChange, onRunQuery }: Props): JSX.E
}}
value={currentQuery ?? ''}
/>
<HorizontalGroup>
<InlineFormLabel htmlFor={selectElementId}>Format as</InlineFormLabel>
<Select
inputId={selectElementId}
onChange={(v) => {
onChange({ ...query, resultFormat: v.value });
onRunQuery();
}}
value={resultFormat}
options={RESULT_FORMATS}
/>
<InlineFormLabel htmlFor={aliasElementId}>Alias by</InlineFormLabel>
<Input
id={aliasElementId}
type="text"
spellCheck={false}
placeholder="Naming pattern"
onBlur={applyDelayedChangesAndRunQuery}
onChange={(e) => {
setCurrentAlias(e.currentTarget.value);
}}
value={currentAlias ?? ''}
/>
</HorizontalGroup>
</div>
<Stack>
<InlineField htmlFor={selectElementId} label="Format as">
<Select
inputId={selectElementId}
onChange={(v) => {
onChange({ ...query, resultFormat: v.value });
onRunQuery();
}}
value={resultFormat}
options={RESULT_FORMATS}
/>
</InlineField>
<InlineField htmlFor={aliasElementId} label="Alias by">
<Input
id={aliasElementId}
type="text"
spellCheck={false}
placeholder="Naming pattern"
onBlur={applyDelayedChangesAndRunQuery}
onChange={(e) => {
setCurrentAlias(e.currentTarget.value);
}}
value={currentAlias ?? ''}
/>
</InlineField>
</Stack>
</Stack>
);
};