IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-14 01:23:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

Transformation: keep collapsed states (#72601)

Browse Source 
* Transformation: keep collapsed states

* Update
This commit is contained in:
Ludovic Viaud 2023-08-07 14:20:12 +02:00 committed by GitHub
parent 6b8580ca8d
commit 867162b64a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 27 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
View File

@ -1,4 +1,4 @@
import { css } from '@emotion/css';
import { cx, css } from '@emotion/css';
import React, { ChangeEvent } from 'react';
import { DragDropContext, Droppable, DropResult } from 'react-beautiful-dnd';
import { Unsubscribable } from 'rxjs';
@ -270,26 +270,30 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
};
renderTransformationEditors = () => {
const { data, transformations } = this.state;
const styles = getStyles(config.theme2);
const { data, transformations, showPicker } = this.state;
const hide = config.featureToggles.transformationsRedesign && showPicker;
return (
<DragDropContext onDragEnd={this.onDragEnd}>
<Droppable droppableId="transformations-list" direction="vertical">
{(provided) => {
return (
<div ref={provided.innerRef} {...provided.droppableProps}>
<TransformationOperationRows
configs={transformations}
data={data}
onRemove={this.onTransformationRemove}
onChange={this.onTransformationChange}
/>
{provided.placeholder}
</div>
);
}}
</Droppable>
</DragDropContext>
<div className={cx({ [styles.hide]: hide })}>
<DragDropContext onDragEnd={this.onDragEnd}>
<Droppable droppableId="transformations-list" direction="vertical">
{(provided) => {
return (
<div ref={provided.innerRef} {...provided.droppableProps}>
<TransformationOperationRows
configs={transformations}
data={data}
onRemove={this.onTransformationRemove}
onChange={this.onTransformationChange}
/>
{provided.placeholder}
</div>
);
}}
</Droppable>
</DragDropContext>
</div>
);
};
@ -550,9 +554,7 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
/>
</div>
)}
{hasTransforms &&
(!config.featureToggles.transformationsRedesign || !this.state.showPicker) &&
this.renderTransformationEditors()}
{hasTransforms && this.renderTransformationEditors()}
{this.renderTransformsPicker()}
</div>
</Container>
@ -587,6 +589,9 @@ function TransformationCard({ transform, onClick }: TransformationCardProps) {
const getStyles = (theme: GrafanaTheme2) => {
return {
hide: css`
display: none;
`,
card: css`
margin: 0;
padding: ${theme.spacing(1)};