tech: add backward compatibility for <spectrum-picker> directive (#9510)

public/app/core/components/colorpicker/spectrum_picker.ts

+/**
+ * Wrapper for the new ngReact <color-picker> directive for backward compatibility.
+ * Allows remaining <spectrum-picker> untouched in outdated plugins.
+ * Technically, it's just a wrapper for react component with two-way data binding support.
+ */
+import coreModule from '../../core_module';
+
+export function spectrumPicker() {
+  return {
+    restrict: 'E',
+    require: 'ngModel',
+    scope: true,
+    replace: true,
+    template: '<color-picker color="ngModel.$viewValue" onChange="onColorChange"></color-picker>',
+    link: function(scope, element, attrs, ngModel) {
+      scope.ngModel = ngModel;
+      scope.onColorChange = (color) => {
+        ngModel.$setViewValue(color);
+      };
+    }
+  };
+}
+coreModule.directive('spectrumPicker', spectrumPicker);

public/app/core/core.ts

@@ -17,6 +17,7 @@ import './components/code_editor/code_editor';
 import './utils/outline';
 import './utils/outline';
 import './components/colorpicker/ColorPicker';
 import './components/colorpicker/ColorPicker';
 import './components/colorpicker/SeriesColorPicker';
 import './components/colorpicker/SeriesColorPicker';
+import './components/colorpicker/spectrum_picker';
 
 
 import {grafanaAppDirective} from './components/grafana_app';
 import {grafanaAppDirective} from './components/grafana_app';
 import {sideMenuDirective} from './components/sidemenu/sidemenu';
 import {sideMenuDirective} from './components/sidemenu/sidemenu';