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 gf-form from OrganizeFieldsTransformerEditor (#88240)

Browse Source
This commit is contained in:
Joao Silva 2024-05-27 10:26:47 +01:00 committed by GitHub
parent f77f47ff00
commit 3014103f41
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 34 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
.betterer.results
View File

@ -3238,11 +3238,6 @@ exports[`better eslint`] = {
[0, 0, 0, "Styles should be written using objects.", "2"],
[0, 0, 0, "Styles should be written using objects.", "3"]
],
"public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"],
[0, 0, 0, "Styles should be written using objects.", "2"]
],
"public/app/features/transformers/editors/ReduceTransformerEditor.tsx:5381": [
[0, 0, 0, "Do not use any type assertions.", "0"]
],
@ -5417,13 +5412,6 @@ exports[`no gf-form usage`] = {
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
],
"public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx:5381": [
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"],
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
],
"public/app/features/variables/adhoc/picker/AdHocFilter.tsx:5381": [
[0, 0, 0, "gf-form usage has been deprecated. Use a component from @grafana/ui or custom CSS instead.", "5381"]
],

66
public/app/features/transformers/editors/OrganizeFieldsTransformerEditor.tsx
View File

@ -12,7 +12,17 @@ import {
} from '@grafana/data';
import { createOrderFieldsComparer } from '@grafana/data/src/transformations/transformers/order';
import { OrganizeFieldsTransformerOptions } from '@grafana/data/src/transformations/transformers/organize';
import { Input, IconButton, Icon, FieldValidationMessage, useStyles2 } from '@grafana/ui';
import {
Input,
IconButton,
Icon,
FieldValidationMessage,
useStyles2,
Stack,
InlineLabel,
Text,
Box,
} from '@grafana/ui';
import { getTransformationContent } from '../docs/getTransformationContent';
import { useAllFieldNamesFromDataFrames } from '../utils';
@ -151,9 +161,9 @@ const DraggableFieldName = ({
return (
<Draggable draggableId={fieldName} index={index}>
{(provided) => (
<div className="gf-form-inline" ref={provided.innerRef} {...provided.draggableProps}>
<div className="gf-form gf-form--grow">
<div className="gf-form-label gf-form-label--justify-left width-30">
<Box marginBottom={0.5} display="flex" gap={0} ref={provided.innerRef} {...provided.draggableProps}>
<InlineLabel width={60} as="div">
<Stack gap={0} justifyContent="flex-start" alignItems="center" width="100%">
<span {...provided.dragHandleProps}>
<Icon name="draggabledots" title="Drag and drop to reorder" size="lg" className={styles.draggable} />
</span>
@ -164,18 +174,17 @@ const DraggableFieldName = ({
onClick={() => onToggleVisibility(fieldName, visible)}
tooltip={visible ? 'Disable' : 'Enable'}
/>
<span className={styles.name} title={fieldName}>
<Text truncate={true} element="p" variant="bodySmall" weight="bold">
{fieldName}
</span>
</div>
<Input
className="flex-grow-1"
defaultValue={renamedFieldName || ''}
placeholder={`Rename ${fieldName}`}
onBlur={(event) => onRenameField(fieldName, event.currentTarget.value)}
/>
</div>
</div>
</Text>
</Stack>
</InlineLabel>
<Input
defaultValue={renamedFieldName || ''}
placeholder={`Rename ${fieldName}`}
onBlur={(event) => onRenameField(fieldName, event.currentTarget.value)}
/>
</Box>
)}
</Draggable>
);
@ -184,23 +193,16 @@ const DraggableFieldName = ({
DraggableFieldName.displayName = 'DraggableFieldName';
const getFieldNameStyles = (theme: GrafanaTheme2) => ({
toggle: css`
margin: 0 8px;
color: ${theme.colors.text.secondary};
`,
draggable: css`
opacity: 0.4;
&:hover {
color: ${theme.colors.text.maxContrast};
}
`,
name: css`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: ${theme.typography.bodySmall.fontSize};
font-weight: ${theme.typography.fontWeightMedium};
`,
toggle: css({
margin: theme.spacing(0, 1),
color: theme.colors.text.secondary,
}),
draggable: css({
opacity: 0.4,
'&:hover': {
color: theme.colors.text.maxContrast,
},
}),
});
const reorderToIndex = (fieldNames: string[], startIndex: number, endIndex: number) => {