Graphite: Migrate to React (part 2: migrate smaller AngularJS directives) (#36797)

* Add UMLs

* Add rendered diagrams

* Move QueryCtrl to flux

* Remove redundant param in the reducer

* Use named imports for lodash and fix typing for GraphiteTagOperator

* Add missing async/await

* Extract providers to a separate file

* Clean up async await

* Rename controller functions back to main

* Simplify creating actions

* Re-order controller functions

* Separate helpers from actions

* Rename vars

* Simplify helpers

* Move controller methods to state reducers

* Remove docs (they are added in design doc)

* Move actions.ts to state folder

* Add docs

* Add old methods stubs for easier review

* Check how state dependencies will be mapped

* Rename state to store

* Rename state to store

* Rewrite spec tests for Graphite Query Controller

* Update docs

* Update docs

* Add GraphiteTextEditor

* Add play button

* Add AddGraphiteFunction

* Use Segment to simplify AddGraphiteFunction

* Memoize function defs

* Fix useCallback deps

* Update public/app/plugins/datasource/graphite/state/helpers.ts

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

* Update public/app/plugins/datasource/graphite/state/helpers.ts

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

* Update public/app/plugins/datasource/graphite/state/helpers.ts

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

* Update public/app/plugins/datasource/graphite/state/providers.ts

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

* Update public/app/plugins/datasource/graphite/state/providers.ts

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

* Update public/app/plugins/datasource/graphite/state/providers.ts

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

* Update public/app/plugins/datasource/graphite/state/providers.ts

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

* Update public/app/plugins/datasource/graphite/state/providers.ts

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

* Update public/app/plugins/datasource/graphite/state/providers.ts

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

* Add more type definitions

* Remove submitOnClickAwayOption

This behavior is actually needed to remove parameters in functions

* Load function definitions before parsing the target on initial load

* Add button padding

* Fix loading function definitions

* Change targetChanged to updateQuery to avoid mutating state directly

It's also needed for extra refresh/runQuery execution as handleTargetChanged doesn't handle changing the raw query

* Fix updating query after adding a function

* Simplify updating function params

* Simplify setting Segment Select min width

* Extract view logic to a helper and update types definitions

* Clean up types

* Update FuncDef types and add tests

Co-authored-by: Giordano Ricci <me@giordanoricci.com>

public/app/plugins/datasource/graphite/FunctionEditor.test.tsx

@@ -1,28 +1,25 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { FunctionEditor } from './FunctionEditor';
-import { FunctionDescriptor } from './FunctionEditorControls';
+import { FuncInstance } from './gfunc';
 
-function mockFunctionDescriptor(name: string, unknown?: boolean): FunctionDescriptor {
-  return {
-    text: '',
+function mockFunctionInstance(name: string, unknown?: boolean): FuncInstance {
+  const def = {
+    category: 'category',
+    defaultParams: [],
+    fake: false,
+    name: name,
     params: [],
-    def: {
-      category: 'category',
-      defaultParams: [],
-      fake: false,
-      name: name,
-      params: [],
-      unknown: unknown,
-    },
+    unknown: unknown,
   };
+  return new FuncInstance(def);
 }
 
 describe('FunctionEditor', () => {
   it('should display a defined function with name and no icon', () => {
     render(
       <FunctionEditor
-        func={mockFunctionDescriptor('foo')}
+        func={mockFunctionInstance('foo')}
         onMoveLeft={() => {}}
         onMoveRight={() => {}}
         onRemove={() => {}}
@@ -36,7 +33,7 @@ describe('FunctionEditor', () => {
   it('should display an unknown function with name and warning icon', () => {
     render(
       <FunctionEditor
-        func={mockFunctionDescriptor('bar', true)}
+        func={mockFunctionInstance('bar', true)}
         onMoveLeft={jest.fn()}
         onMoveRight={jest.fn()}
         onRemove={jest.fn()}