ReactMigration: Migrate DataSource HTTP Settings to React (#19452)

* Basic components for HTTP settings migration WIP

* Add secureJsonFields to DataSourceSettings

* Introduce datasource-http-settings-next directive for backward compatibility

* fix lint

* renames

* rename fix

* TagsInput component

* move tags from app to grafana/ui

* implement tagsinput on datasourcesettings

* capitalize

* new file for react directive for testing

* some layout touch ups

* FormField story

* Minor touch ups

* add url validation

* using prevent default to prevent updating datasource when adding tag

* using Stylefactory and fix tslint issue on MouseEvent

* only show tlsauthsettings if tls or ca cert

* fix url input length

* fix for showAccessOptions

* Implemented CertTextArea, removed commented code

* removed commented / not used code

* Rename and add more elements to Certification component

* fixing newSecureJsonData

* spelling

* Fix issue with checkboxes being undefined

* Removed old partials and minor fix

* removed unused props from story

public/app/core/angular_wrappers.ts

@@ -7,7 +7,13 @@ import { TagFilter } from './components/TagFilter/TagFilter';
 import { SideMenu } from './components/sidemenu/SideMenu';
 import { MetricSelect } from './components/Select/MetricSelect';
 import AppNotificationList from './components/AppNotifications/AppNotificationList';
-import { ColorPicker, SeriesColorPickerPopoverWithTheme, SecretFormField, DataLinksEditor } from '@grafana/ui';
+import {
+  ColorPicker,
+  SeriesColorPickerPopoverWithTheme,
+  SecretFormField,
+  DataLinksEditor,
+  DataSourceHttpSettings,
+} from '@grafana/ui';
 import { FunctionEditor } from 'app/plugins/datasource/graphite/FunctionEditor';
 import { SearchField } from './components/search/SearchField';
 import { GraphContextMenu } from 'app/plugins/panel/graph/GraphContextMenu';
@@ -111,4 +117,10 @@ export function registerAngularDirectives() {
     'onChange',
     ['datasource', { watchDepth: 'reference' }],
   ]);
+  react2AngularDirective('datasourceHttpSettingsNext', DataSourceHttpSettings, [
+    'defaultUrl',
+    'showAccessOptions',
+    'dataSourceConfig',
+    ['onChange', { watchDepth: 'reference', wrapApply: true }],
+  ]);
 }

public/app/core/components/TagFilter/TagBadge.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import tags from 'app/core/utils/tags';
+import { getTagColorsFromName } from '@grafana/ui';
 
 export interface Props {
   label: string;
@@ -15,7 +15,7 @@ export class TagBadge extends React.Component<Props, any> {
 
   render() {
     const { label, removeIcon, count } = this.props;
-    const { color, borderColor } = tags.getTagColorsFromName(label);
+    const { color, borderColor } = getTagColorsFromName(label);
     const tagStyle = {
       backgroundColor: color,
       borderColor: borderColor,

public/app/core/directives/tags.ts

@@ -1,11 +1,11 @@
 import angular from 'angular';
+import { getTagColorsFromName } from '@grafana/ui';
 import $ from 'jquery';
 import coreModule from '../core_module';
-import tags from 'app/core/utils/tags';
 import 'vendor/tagsinput/bootstrap-tagsinput.js';
 
 function setColor(name: string, element: JQuery) {
-  const { color, borderColor } = tags.getTagColorsFromName(name);
+  const { color, borderColor } = getTagColorsFromName(name);
   element.css('background-color', color);
   element.css('border-color', borderColor);
 }

public/app/core/utils/tags.ts

@@ -1,86 +0,0 @@
-const TAG_COLORS = [
-  '#E24D42',
-  '#1F78C1',
-  '#BA43A9',
-  '#705DA0',
-  '#466803',
-  '#508642',
-  '#447EBC',
-  '#C15C17',
-  '#890F02',
-  '#757575',
-  '#0A437C',
-  '#6D1F62',
-  '#584477',
-  '#629E51',
-  '#2F4F4F',
-  '#BF1B00',
-  '#806EB7',
-  '#8a2eb8',
-  '#699e00',
-  '#000000',
-  '#3F6833',
-  '#2F575E',
-  '#99440A',
-  '#E0752D',
-  '#0E4AB4',
-  '#58140C',
-  '#052B51',
-  '#511749',
-  '#3F2B5B',
-];
-
-const TAG_BORDER_COLORS = [
-  '#FF7368',
-  '#459EE7',
-  '#E069CF',
-  '#9683C6',
-  '#6C8E29',
-  '#76AC68',
-  '#6AA4E2',
-  '#E7823D',
-  '#AF3528',
-  '#9B9B9B',
-  '#3069A2',
-  '#934588',
-  '#7E6A9D',
-  '#88C477',
-  '#557575',
-  '#E54126',
-  '#A694DD',
-  '#B054DE',
-  '#8FC426',
-  '#262626',
-  '#658E59',
-  '#557D84',
-  '#BF6A30',
-  '#FF9B53',
-  '#3470DA',
-  '#7E3A32',
-  '#2B5177',
-  '#773D6F',
-  '#655181',
-];
-
-/**
- * Returns tag badge background and border colors based on hashed tag name.
- * @param name tag name
- */
-export function getTagColorsFromName(name: string): { color: string; borderColor: string } {
-  const hash = djb2(name.toLowerCase());
-  const color = TAG_COLORS[Math.abs(hash % TAG_COLORS.length)];
-  const borderColor = TAG_BORDER_COLORS[Math.abs(hash % TAG_BORDER_COLORS.length)];
-  return { color, borderColor };
-}
-
-function djb2(str: string) {
-  let hash = 5381;
-  for (let i = 0; i < str.length; i++) {
-    hash = (hash << 5) + hash + str.charCodeAt(i); /* hash * 33 + c */
-  }
-  return hash;
-}
-
-export default {
-  getTagColorsFromName,
-};