remove and edit transformations works

public/app/features/dashboard-scene/panel-edit/PanelDataPane/PanelDataTransformations/PanelDataTransformationsTab.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import { DragDropContext, Droppable } from 'react-beautiful-dnd';
 
-import { IconName } from '@grafana/data';
+import { DataTransformerConfig, IconName } from '@grafana/data';
 import { SceneObjectBase, SceneComponentProps, SceneDataTransformer } from '@grafana/scenes';
 import { Container, CustomScrollbar } from '@grafana/ui';
 import { TransformationOperationRows } from 'app/features/dashboard/components/TransformationsEditor/TransformationOperationRows';
-import { TransformationsEditorTransformation } from 'app/features/dashboard/components/TransformationsEditor/types';
 
 import { VizPanelManager } from '../../VizPanelManager';
 import { PanelDataPaneTabState, PanelDataPaneTab } from '../types';
@@ -28,7 +27,12 @@ export class PanelDataTransformationsTab
   }
 
   getItemsCount() {
-    return null;
+    const dataProvider = this._panelManager.state.panel.state.$data;
+    if (dataProvider instanceof SceneDataTransformer) {
+      return dataProvider.state.transformations.length;
+    } else {
+      return 0;
+    }
   }
 
   constructor(panelManager: VizPanelManager) {
@@ -44,20 +48,23 @@ export class PanelDataTransformationsTab
 
 interface TransformationEditorProps {
   sceneDataTransformer: SceneDataTransformer;
+  onChange: (transformations: DataTransformerConfig[]) => void;
 }
 
 function TransformationsEditor(props: TransformationEditorProps) {
+  const { onChange } = props;
   const dataState = props.sceneDataTransformer.useState();
-  const transformationEditorRows: TransformationsEditorTransformation[] = [];
 
-  let i = 0; // Ids need to be unique for drag to change order to work
+  const transformations: DataTransformerConfig[] = [];
+
   for (const t of dataState.transformations) {
     if ('id' in t) {
-      transformationEditorRows.push({ id: `${i} - ${t.id}`, transformation: t });
-      i++;
+      transformations.push(t);
     }
   }
 
+  const transformationEditorRows = transformations.map((t, i) => ({ id: `${i} - ${t.id}`, transformation: t }));
+
   return (
     <DragDropContext onDragEnd={() => {}}>
       <Droppable droppableId="transformations-list" direction="vertical">
@@ -65,8 +72,16 @@ function TransformationsEditor(props: TransformationEditorProps) {
           return (
             <div ref={provided.innerRef} {...provided.droppableProps}>
               <TransformationOperationRows
-                onChange={() => {}}
-                onRemove={() => {}}
+                onChange={(index, transformation) => {
+                  const newTransformations = transformations.slice();
+                  newTransformations[index] = transformation;
+                  onChange(newTransformations);
+                }}
+                onRemove={(index) => {
+                  const newTransformations = transformations.slice();
+                  newTransformations.splice(index);
+                  onChange(newTransformations);
+                }}
                 configs={transformationEditorRows}
                 data={{
                   series: dataState.data?.series || [],
@@ -98,7 +113,12 @@ export function PanelDataTransformationsTabRendered({ model }: SceneComponentPro
         {dataState.transformations.length < 1 ? (
           <EmptyTransformationsMessage onShowPicker={() => {}}></EmptyTransformationsMessage>
         ) : (
-          <TransformationsEditor sceneDataTransformer={panelState.$data}></TransformationsEditor>
+          <TransformationsEditor
+            onChange={(transformations) => {
+              model.panelManager.changeTransformations(transformations);
+            }}
+            sceneDataTransformer={panelState.$data}
+          ></TransformationsEditor>
         )}
       </Container>
     </CustomScrollbar>

public/app/features/dashboard-scene/panel-edit/VizPanelManager.tsx

@@ -20,8 +20,9 @@ import {
   SceneQueryRunner,
   sceneGraph,
   SceneDataProvider,
+  SceneDataTransformer,
 } from '@grafana/scenes';
-import { DataQuery } from '@grafana/schema';
+import { DataQuery, DataTransformerConfig } from '@grafana/schema';
 import { getPluginVersion } from 'app/features/dashboard/state/PanelModel';
 import { storeLastUsedDataSourceInLocalStorage } from 'app/features/datasources/components/picker/utils';
 import { updateQueries } from 'app/features/query/state/updateQueries';
@@ -217,6 +218,14 @@ export class VizPanelManager extends SceneObjectBase<VizPanelManagerState> {
     runner.setState({ queries });
   }
 
+  public changeTransformations(transformations: DataTransformerConfig[]) {
+    const dataProvider = this.state.panel.state.$data;
+    if (dataProvider instanceof SceneDataTransformer) {
+      dataProvider.setState({ transformations });
+      dataProvider.reprocessTransformations();
+    }
+  }
+
   public inspectPanel() {
     const panel = this.state.panel;
     const panelId = getPanelIdForVizPanel(panel);