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