Correlations: Add transformations to Explore Editor (#75930)

* Add transformation add modal and use it

* Hook up saving

* Add transformation vars to var list, show added transformations

* Form validation

* Remove type assertion, start building out transformation data in helper (WIP)

* Style expression better, add delete logic

* Add ability to edit, additional styling on transformation card in helper

* simplify styling, conditionally run edit set up logic

* Keep more field information in function, integrate it with new editor

* Show default label on collapsed section, use deleteButton for confirmation of deleting transformations

* Change transformation add calculations from function to hook, add label to collapsed header, add transformation tooltip

* Make correlation and editor dirty state distinctive and integrate, WIP

* Track action pane for more detailed messaging/actions

* Better cancel modal logic

* Remove changes to adminsitration transformation editor

* Remove debugging line

* Remove unneeded comment

* Add in logic for closing editor mode

* Add tests for modal logic

* Use state to build vars list for helper

* WIP

* Fix labels and dirty state

* Fix bad message and stop exiting mode if discard action is performed

* Fix tests

* Update to not use unstable component and tweak default label

packages/grafana-data/src/types/explore.ts

@@ -33,10 +33,13 @@ export interface ExplorePanelsState extends Partial<Record<PreferredVisualisatio
 
 /**
  * Keep a list of vars the correlations editor / helper in explore will use
+ *
+ * vars can be modified by transformation variables, origVars is so we can rebuild the original list
  */
 /** @internal */
 export interface ExploreCorrelationHelperData {
   resultField: string;
+  origVars: Record<string, string>;
   vars: Record<string, string>;
 }
 

packages/grafana-data/src/valueFormats/valueFormats.test.ts

@@ -72,7 +72,7 @@ describe('valueFormats', () => {
     ${'dtdurationms'}     | ${undefined} | ${100000}                                   | ${'1 minute'}
     ${'dtdurationms'}     | ${undefined} | ${150000}                                   | ${'2 minutes'}
   `(
-    'With format=$format decimals=$decimals and value=$value then result shoudl be = $expected',
+    'With format=$format decimals=$decimals and value=$value then result should be = $expected',
     async ({ format, value, decimals, expected }) => {
       const result = getValueFormat(format)(value, decimals, undefined, undefined);
       const full = formattedValueToString(result);