From c9b11bfc7ae1ce89d737c938993db5fa0e421fdb Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Fri, 18 Oct 2019 12:09:53 +0200
Subject: [PATCH] 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
---
 .../DataSourceSettings/BasicAuthSettings.tsx  |  61 +++++
 .../DataSourceSettings/CertificationKey.tsx   |  40 ++++
 .../DataSourceHttpSettings.story.tsx          |  51 +++++
 .../DataSourceHttpSettings.tsx                | 208 ++++++++++++++++++
 .../DataSourceSettings/HttpProxySettings.tsx  |  45 ++++
 .../DataSourceSettings/TLSAuthSettings.tsx    |  87 ++++++++
 .../components/DataSourceSettings/types.ts    |  11 +
 .../components/FormField/FormField.story.tsx  |  29 +++
 .../src/components/TagsInput/TagItem.tsx      |  48 ++++
 .../components/TagsInput/TagsInput.story.tsx  |  25 +++
 .../src/components/TagsInput/TagsInput.tsx    | 121 ++++++++++
 packages/grafana-ui/src/components/index.ts   |   3 +-
 packages/grafana-ui/src/types/datasource.ts   |   2 +
 packages/grafana-ui/src/utils/index.ts        |   1 +
 .../src/utils/storybook/UseState.tsx          |   5 +
 .../grafana-ui/src}/utils/tags.ts             |   0
 public/app/core/angular_wrappers.ts           |  14 +-
 .../core/components/TagFilter/TagBadge.tsx    |   4 +-
 public/app/core/directives/tags.ts            |   4 +-
 .../app/features/admin/AdminListUsersCtrl.ts  |   4 +-
 .../datasources/partials/http_settings.html   | 114 ----------
 .../partials/http_settings_next.html          |   1 +
 .../partials/tls_auth_settings.html           |  62 ------
 .../datasources/settings/HttpSettingsCtrl.ts  |  17 +-
 24 files changed, 760 insertions(+), 197 deletions(-)
 create mode 100644 packages/grafana-ui/src/components/DataSourceSettings/BasicAuthSettings.tsx
 create mode 100644 packages/grafana-ui/src/components/DataSourceSettings/CertificationKey.tsx
 create mode 100644 packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx
 create mode 100644 packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
 create mode 100644 packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx
 create mode 100644 packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx
 create mode 100644 packages/grafana-ui/src/components/DataSourceSettings/types.ts
 create mode 100644 packages/grafana-ui/src/components/FormField/FormField.story.tsx
 create mode 100644 packages/grafana-ui/src/components/TagsInput/TagItem.tsx
 create mode 100644 packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx
 create mode 100644 packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
 rename {public/app/core => packages/grafana-ui/src}/utils/tags.ts (100%)
 delete mode 100644 public/app/features/datasources/partials/http_settings.html
 create mode 100644 public/app/features/datasources/partials/http_settings_next.html
 delete mode 100644 public/app/features/datasources/partials/tls_auth_settings.html

diff --git a/packages/grafana-ui/src/components/DataSourceSettings/BasicAuthSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/BasicAuthSettings.tsx
new file mode 100644
index 00000000000..9fcf126fec4
--- /dev/null
+++ b/packages/grafana-ui/src/components/DataSourceSettings/BasicAuthSettings.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import { HttpSettingsProps } from './types';
+import { FormField } from '../FormField/FormField';
+import { SecretFormField } from '../SecretFormFied/SecretFormField';
+
+export const BasicAuthSettings: React.FC<HttpSettingsProps> = ({ dataSourceConfig, onChange }) => {
+  const password = dataSourceConfig.secureJsonData ? dataSourceConfig.secureJsonData.basicAuthPassword : '';
+
+  const onPasswordReset = () => {
+    onChange({
+      ...dataSourceConfig,
+      basicAuthPassword: '',
+      secureJsonData: {
+        ...dataSourceConfig.secureJsonData,
+        basicAuthPassword: '',
+      },
+      secureJsonFields: {
+        ...dataSourceConfig.secureJsonFields,
+        basicAuthPassword: false,
+      },
+    });
+  };
+
+  const onPasswordChange = (event: React.SyntheticEvent<HTMLInputElement>) => {
+    onChange({
+      ...dataSourceConfig,
+      secureJsonData: {
+        ...dataSourceConfig.secureJsonData,
+        basicAuthPassword: event.currentTarget.value,
+      },
+    });
+  };
+
+  return (
+    <>
+      <div className="gf-form">
+        <FormField
+          label="User"
+          labelWidth={10}
+          inputWidth={18}
+          placeholder="user"
+          value={dataSourceConfig.basicAuthUser}
+          onChange={event => onChange({ ...dataSourceConfig, basicAuthUser: event.currentTarget.value })}
+        />
+      </div>
+      <div className="gf-form">
+        <SecretFormField
+          isConfigured={
+            !!dataSourceConfig.basicAuthPassword ||
+            !!(dataSourceConfig.secureJsonFields && dataSourceConfig.secureJsonFields.basicAuthPassword)
+          }
+          value={password || ''}
+          inputWidth={18}
+          labelWidth={10}
+          onReset={onPasswordReset}
+          onChange={onPasswordChange}
+        />
+      </div>
+    </>
+  );
+};
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/CertificationKey.tsx b/packages/grafana-ui/src/components/DataSourceSettings/CertificationKey.tsx
new file mode 100644
index 00000000000..5ed9a27cb76
--- /dev/null
+++ b/packages/grafana-ui/src/components/DataSourceSettings/CertificationKey.tsx
@@ -0,0 +1,40 @@
+import React, { ChangeEvent, MouseEvent, FC } from 'react';
+
+interface Props {
+  label: string;
+  hasCert: boolean;
+  placeholder: string;
+
+  onChange: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+  onClick: (event: MouseEvent<HTMLAnchorElement>) => void;
+}
+
+export const CertificationKey: FC<Props> = ({ hasCert, label, onChange, onClick, placeholder }) => {
+  return (
+    <div className="gf-form-inline">
+      <div className="gf-form gf-form--v-stretch">
+        <label className="gf-form-label width-7">{label}</label>
+      </div>
+      {!hasCert && (
+        <div className="gf-form gf-form--grow">
+          <textarea
+            rows={7}
+            className="gf-form-input gf-form-textarea"
+            onChange={onChange}
+            placeholder={placeholder}
+            required
+          />
+        </div>
+      )}
+
+      {hasCert && (
+        <div className="gf-form">
+          <input type="text" className="gf-form-input max-width-12" disabled value="configured" />
+          <a className="btn btn-secondary gf-form-btn" onClick={onClick}>
+            reset
+          </a>
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx
new file mode 100644
index 00000000000..79ac03c1165
--- /dev/null
+++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.story.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { DataSourceHttpSettings } from './DataSourceHttpSettings';
+import { DataSourceSettings } from '../../types';
+import { UseState } from '../../utils/storybook/UseState';
+
+const settingsMock: DataSourceSettings<any, any> = {
+  id: 4,
+  orgId: 1,
+  name: 'gdev-influxdb',
+  type: 'influxdb',
+  typeLogoUrl: '',
+  access: 'direct',
+  url: 'http://localhost:8086',
+  password: '',
+  user: 'grafana',
+  database: 'site',
+  basicAuth: false,
+  basicAuthUser: '',
+  basicAuthPassword: '',
+  withCredentials: false,
+  isDefault: false,
+  jsonData: {
+    timeInterval: '15s',
+    httpMode: 'GET',
+    keepCookies: ['cookie1', 'cookie2'],
+  },
+  secureJsonData: {
+    password: true,
+  },
+  readOnly: true,
+};
+
+const DataSourceHttpSettingsStories = storiesOf('UI/DataSource/DataSourceHttpSettings', module);
+
+DataSourceHttpSettingsStories.add('default', () => {
+  return (
+    <UseState initialState={settingsMock} logState>
+      {(dataSourceSettings, updateDataSourceSettings) => {
+        return (
+          <DataSourceHttpSettings
+            defaultUrl="http://localhost:9999"
+            dataSourceConfig={dataSourceSettings}
+            onChange={updateDataSourceSettings}
+            showAccessOptions={true}
+          />
+        );
+      }}
+    </UseState>
+  );
+});
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
new file mode 100644
index 00000000000..0373fe03db1
--- /dev/null
+++ b/packages/grafana-ui/src/components/DataSourceSettings/DataSourceHttpSettings.tsx
@@ -0,0 +1,208 @@
+import React, { useState, useCallback } from 'react';
+import { SelectableValue } from '@grafana/data';
+import { css, cx } from 'emotion';
+import { FormField, FormLabel, Input, Select, Switch, TagsInput } from '..';
+import { useTheme } from '../../themes';
+import { BasicAuthSettings } from './BasicAuthSettings';
+import { HttpProxySettings } from './HttpProxySettings';
+import { TLSAuthSettings } from './TLSAuthSettings';
+import { DataSourceSettings } from '../../types';
+import { HttpSettingsProps } from './types';
+
+const ACCESS_OPTIONS: Array<SelectableValue<string>> = [
+  {
+    label: 'Server (default)',
+    value: 'proxy',
+  },
+  {
+    label: 'Browser',
+    value: 'direct',
+  },
+];
+
+const DEFAULT_ACCESS_OPTION = {
+  label: 'Server (default)',
+  value: 'proxy',
+};
+
+const HttpAccessHelp = () => (
+  <div className="grafana-info-box m-t-2">
+    <p>
+      Access mode controls how requests to the data source will be handled.
+      <strong>
+        <i>Server</i>
+      </strong>{' '}
+      should be the preferred way if nothing else stated.
+    </p>
+    <div className="alert-title">Server access mode (Default):</div>
+    <p>
+      All requests will be made from the browser to Grafana backend/server which in turn will forward the requests to
+      the data source and by that circumvent possible Cross-Origin Resource Sharing (CORS) requirements. The URL needs
+      to be accessible from the grafana backend/server if you select this access mode.
+    </p>
+    <div className="alert-title">Browser access mode:</div>
+    <p>
+      All requests will be made from the browser directly to the data source and may be subject to Cross-Origin Resource
+      Sharing (CORS) requirements. The URL needs to be accessible from the browser if you select this access mode.
+    </p>
+  </div>
+);
+
+export const DataSourceHttpSettings: React.FC<HttpSettingsProps> = props => {
+  const { defaultUrl, dataSourceConfig, onChange, showAccessOptions } = props;
+  let urlTooltip;
+  const [isAccessHelpVisible, setIsAccessHelpVisible] = useState(false);
+  const theme = useTheme();
+
+  const onSettingsChange = useCallback(
+    (change: Partial<DataSourceSettings<any, any>>) => {
+      onChange({
+        ...dataSourceConfig,
+        ...change,
+      });
+    },
+    [dataSourceConfig]
+  );
+
+  switch (dataSourceConfig.access) {
+    case 'direct':
+      urlTooltip = (
+        <>
+          Your access method is <em>Browser</em>, this means the URL needs to be accessible from the browser.
+        </>
+      );
+      break;
+    case 'proxy':
+      urlTooltip = (
+        <>
+          Your access method is <em>Server</em>, this means the URL needs to be accessible from the grafana
+          backend/server.
+        </>
+      );
+      break;
+    default:
+      urlTooltip = 'Specify a complete HTTP URL (for example http://your_server:8080)';
+  }
+
+  const accessSelect = (
+    <Select
+      width={20}
+      options={ACCESS_OPTIONS}
+      value={ACCESS_OPTIONS.filter(o => o.value === dataSourceConfig.access)[0] || DEFAULT_ACCESS_OPTION}
+      onChange={selectedValue => onSettingsChange({ access: selectedValue.value })}
+    />
+  );
+
+  const isValidUrl = /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/.test(
+    dataSourceConfig.url
+  );
+
+  const notValidStyle = css`
+    box-shadow: inset 0 0px 5px ${theme.colors.red};
+  `;
+
+  const inputStyle = cx({ [`width-20`]: true, [notValidStyle]: !isValidUrl });
+
+  const urlInput = (
+    <Input
+      className={inputStyle}
+      placeholder={defaultUrl}
+      value={dataSourceConfig.url}
+      onChange={event => onSettingsChange({ url: event.currentTarget.value })}
+    />
+  );
+
+  return (
+    <div className="gf-form-group">
+      <>
+        <h3 className="page-heading">HTTP</h3>
+        <div className="gf-form-group">
+          <div className="gf-form">
+            <FormField label="URL" labelWidth={11} tooltip={urlTooltip} inputEl={urlInput} />
+          </div>
+
+          {showAccessOptions && (
+            <>
+              <div className="gf-form-inline">
+                <div className="gf-form">
+                  <FormField label="Access" labelWidth={11} inputWidth={20} inputEl={accessSelect} />
+                </div>
+                <div className="gf-form">
+                  <label
+                    className="gf-form-label query-keyword pointer"
+                    onClick={() => setIsAccessHelpVisible(isVisible => !isVisible)}
+                  >
+                    Help&nbsp;
+                    <i className={`fa fa-caret-${isAccessHelpVisible ? 'down' : 'right'}`} />
+                  </label>
+                </div>
+              </div>
+              {isAccessHelpVisible && <HttpAccessHelp />}
+            </>
+          )}
+          {dataSourceConfig.access === 'proxy' && (
+            <div className="gf-form">
+              <FormLabel
+                width={11}
+                tooltip="Grafana Proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source."
+              >
+                Whitelisted Cookies
+              </FormLabel>
+              <TagsInput
+                tags={dataSourceConfig.jsonData.keepCookies}
+                onChange={cookies =>
+                  onSettingsChange({ jsonData: { ...dataSourceConfig.jsonData, keepCookies: cookies } })
+                }
+                width={20}
+              />
+            </div>
+          )}
+        </div>
+      </>
+
+      <>
+        <h3 className="page-heading">Auth</h3>
+        <div className="gf-form-group">
+          <div className="gf-form-inline">
+            <Switch
+              label="Basic auth"
+              labelClass="width-13"
+              checked={dataSourceConfig.basicAuth}
+              onChange={event => {
+                onSettingsChange({ basicAuth: event!.currentTarget.checked });
+              }}
+            />
+            <Switch
+              label="With Credentials"
+              labelClass="width-13"
+              checked={dataSourceConfig.withCredentials}
+              onChange={event => {
+                onSettingsChange({ withCredentials: event!.currentTarget.checked });
+              }}
+              tooltip="Whether credentials such as cookies or auth headers should be sent with cross-site requests."
+            />
+          </div>
+
+          {dataSourceConfig.access === 'proxy' && (
+            <HttpProxySettings
+              dataSourceConfig={dataSourceConfig}
+              onChange={jsonData => onSettingsChange({ jsonData })}
+            />
+          )}
+        </div>
+        {dataSourceConfig.basicAuth && (
+          <>
+            <h6>Basic Auth Details</h6>
+            <div className="gf-form-group">
+              <BasicAuthSettings {...props} />
+            </div>
+          </>
+        )}
+
+        {(dataSourceConfig.jsonData.tlsAuth || dataSourceConfig.jsonData.tlsAuthWithCACert) && (
+          <TLSAuthSettings dataSourceConfig={dataSourceConfig} onChange={onChange} />
+        )}
+      </>
+    </div>
+  );
+};
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx
new file mode 100644
index 00000000000..bb09064a78a
--- /dev/null
+++ b/packages/grafana-ui/src/components/DataSourceSettings/HttpProxySettings.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { HttpSettingsBaseProps } from './types';
+import { Switch } from '../Switch/Switch';
+
+export const HttpProxySettings: React.FC<HttpSettingsBaseProps> = ({ dataSourceConfig, onChange }) => {
+  return (
+    <>
+      <div className="gf-form-inline">
+        <Switch
+          label="TLS Client Auth"
+          labelClass="width-13"
+          checked={dataSourceConfig.jsonData.tlsAuth || false}
+          onChange={event => onChange({ ...dataSourceConfig.jsonData, tlsAuth: event!.currentTarget.checked })}
+        />
+
+        <Switch
+          label="With CA Cert"
+          labelClass="width-13"
+          checked={dataSourceConfig.jsonData.tlsAuthWithCACert || false}
+          onChange={event =>
+            onChange({ ...dataSourceConfig.jsonData, tlsAuthWithCACert: event!.currentTarget.checked })
+          }
+          tooltip="Needed for verifying self-signed TLS Certs"
+        />
+      </div>
+      <div className="gf-form-inline">
+        <Switch
+          label="Skip TLS Verify"
+          labelClass="width-13"
+          checked={dataSourceConfig.jsonData.tlsSkipVerify || false}
+          onChange={event => onChange({ ...dataSourceConfig.jsonData, tlsSkipVerify: event!.currentTarget.checked })}
+        />
+      </div>
+      <div className="gf-form-inline">
+        <Switch
+          label="Forward OAuth Identity"
+          labelClass="width-13"
+          checked={dataSourceConfig.jsonData.oauthPassThru || false}
+          onChange={event => onChange({ ...dataSourceConfig.jsonData, oauthPassThru: event!.currentTarget.checked })}
+          tooltip="Forward the user's upstream OAuth identity to the data source (Their access token gets passed along)."
+        />
+      </div>
+    </>
+  );
+};
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx b/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx
new file mode 100644
index 00000000000..aeaa4880c7c
--- /dev/null
+++ b/packages/grafana-ui/src/components/DataSourceSettings/TLSAuthSettings.tsx
@@ -0,0 +1,87 @@
+import React from 'react';
+import { KeyValue } from '@grafana/data';
+import { css, cx } from 'emotion';
+import { Tooltip } from '..';
+import { CertificationKey } from './CertificationKey';
+import { HttpSettingsBaseProps } from './types';
+
+export const TLSAuthSettings: React.FC<HttpSettingsBaseProps> = ({ dataSourceConfig, onChange }) => {
+  const hasTLSCACert = dataSourceConfig.secureJsonFields && dataSourceConfig.secureJsonFields.tlsCACert;
+  const hasTLSClientCert = dataSourceConfig.secureJsonFields && dataSourceConfig.secureJsonFields.tlsClientCert;
+  const hasTLSClientKey = dataSourceConfig.secureJsonFields && dataSourceConfig.secureJsonFields.tlsClientKey;
+
+  const onResetClickFactory = (field: string) => (event: React.MouseEvent<HTMLAnchorElement>) => {
+    event.preventDefault();
+    const newSecureJsonFields: KeyValue<boolean> = { ...dataSourceConfig.secureJsonFields };
+    newSecureJsonFields[field] = false;
+    onChange({
+      ...dataSourceConfig,
+      secureJsonFields: newSecureJsonFields,
+    });
+  };
+
+  const onCertificateChangeFactory = (field: string) => (event: React.SyntheticEvent<HTMLTextAreaElement>) => {
+    const newSecureJsonData = { ...dataSourceConfig.secureJsonData };
+    newSecureJsonData[field] = event.currentTarget.value;
+
+    onChange({
+      ...dataSourceConfig,
+      secureJsonData: newSecureJsonData,
+    });
+  };
+
+  return (
+    <div className="gf-form-group">
+      <div
+        className={cx(
+          'gf-form',
+          css`
+            align-items: baseline;
+          `
+        )}
+      >
+        <h6>TLS Auth Details</h6>
+        <Tooltip
+          placement="right-end"
+          content="TLS Certs are encrypted and stored in the Grafana database."
+          theme="info"
+        >
+          <div className="gf-form-help-icon gf-form-help-icon--right-normal">
+            <i className="fa fa-info-circle" />
+          </div>
+        </Tooltip>
+      </div>
+      <div>
+        {dataSourceConfig.jsonData.tlsAuthWithCACert && (
+          <CertificationKey
+            hasCert={!!hasTLSCACert}
+            onChange={onCertificateChangeFactory('tlsCACert')}
+            placeholder="Begins with -----BEGIN CERTIFICATE-----"
+            label="CA Cert"
+            onClick={onResetClickFactory('tlsCACert')}
+          />
+        )}
+
+        {dataSourceConfig.jsonData.tlsAuth && (
+          <>
+            <CertificationKey
+              hasCert={!!hasTLSClientCert}
+              label="Client Cert"
+              onChange={onCertificateChangeFactory('tlsClientCert')}
+              placeholder="Begins with -----BEGIN CERTIFICATE-----"
+              onClick={onResetClickFactory('tlsClientCert')}
+            />
+
+            <CertificationKey
+              hasCert={!!hasTLSClientKey}
+              label="Client Key"
+              placeholder="Begins with -----BEGIN RSA PRIVATE KEY-----"
+              onChange={onCertificateChangeFactory('tlsClientKey')}
+              onClick={onResetClickFactory('tlsClientKey')}
+            />
+          </>
+        )}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/grafana-ui/src/components/DataSourceSettings/types.ts b/packages/grafana-ui/src/components/DataSourceSettings/types.ts
new file mode 100644
index 00000000000..a2d61443c95
--- /dev/null
+++ b/packages/grafana-ui/src/components/DataSourceSettings/types.ts
@@ -0,0 +1,11 @@
+import { DataSourceSettings } from '../../types';
+
+export interface HttpSettingsBaseProps {
+  dataSourceConfig: DataSourceSettings<any, any>;
+  onChange: (config: DataSourceSettings) => void;
+}
+
+export interface HttpSettingsProps extends HttpSettingsBaseProps {
+  defaultUrl: string;
+  showAccessOptions?: boolean;
+}
diff --git a/packages/grafana-ui/src/components/FormField/FormField.story.tsx b/packages/grafana-ui/src/components/FormField/FormField.story.tsx
new file mode 100644
index 00000000000..f63305ce0c3
--- /dev/null
+++ b/packages/grafana-ui/src/components/FormField/FormField.story.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { number, text } from '@storybook/addon-knobs';
+
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { FormField } from './FormField';
+
+const getKnobs = () => {
+  return {
+    label: text('label', 'Test'),
+    tooltip: text('tooltip', 'This is a tooltip with information about this FormField'),
+    labelWidth: number('labelWidth', 10),
+    inputWidth: number('inputWidth', 20),
+  };
+};
+
+const FormFieldStories = storiesOf('UI/FormField', module);
+
+FormFieldStories.addDecorator(withCenteredStory);
+
+FormFieldStories.add('default', () => {
+  const { inputWidth, label, labelWidth } = getKnobs();
+  return <FormField label={label} labelWidth={labelWidth} inputWidth={inputWidth} />;
+});
+
+FormFieldStories.add('with tooltip', () => {
+  const { inputWidth, label, labelWidth, tooltip } = getKnobs();
+  return <FormField label={label} labelWidth={labelWidth} inputWidth={inputWidth} tooltip={tooltip} />;
+});
diff --git a/packages/grafana-ui/src/components/TagsInput/TagItem.tsx b/packages/grafana-ui/src/components/TagsInput/TagItem.tsx
new file mode 100644
index 00000000000..d71387d5a36
--- /dev/null
+++ b/packages/grafana-ui/src/components/TagsInput/TagItem.tsx
@@ -0,0 +1,48 @@
+import React, { FC } from 'react';
+import { css, cx } from 'emotion';
+import { getTagColorsFromName } from '../../utils';
+import { stylesFactory } from '../../themes';
+
+interface Props {
+  name: string;
+
+  onRemove: (tag: string) => void;
+}
+
+export const TagItem: FC<Props> = ({ name, onRemove }) => {
+  const { color, borderColor } = getTagColorsFromName(name);
+
+  const getStyles = stylesFactory(() => ({
+    itemStyle: css`
+      background-color: ${color};
+      border: 1px solid ${borderColor};
+      border-radius: 3px;
+      padding: 3px 6px;
+      margin: 3px;
+      white-space: nowrap;
+      text-shadow: none;
+      font-weight: 500;
+      line-height: 14px;
+      display: flex;
+      align-items: center;
+    `,
+
+    nameStyle: css`
+      margin-right: 3px;
+    `,
+
+    removeStyle: cx([
+      'fa fa-times',
+      css`
+        cursor: pointer;
+      `,
+    ]),
+  }));
+
+  return (
+    <div className={getStyles().itemStyle}>
+      <span className={getStyles().nameStyle}>{name}</span>
+      <i className={getStyles().removeStyle} onClick={() => onRemove(name)} />
+    </div>
+  );
+};
diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx b/packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx
new file mode 100644
index 00000000000..93ce8c546a7
--- /dev/null
+++ b/packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import { UseState } from '../../utils/storybook/UseState';
+import { TagsInput } from './TagsInput';
+
+const TagsInputStories = storiesOf('UI/TagsInput', module);
+const mockTags = ['Some', 'Tags', 'With', 'This', 'New', 'Component'];
+
+TagsInputStories.addDecorator(withCenteredStory);
+
+TagsInputStories.add('default', () => {
+  return <TagsInput tags={[]} onChange={tags => action('tags updated')(tags)} />;
+});
+
+TagsInputStories.add('with mock tags', () => {
+  return (
+    <UseState initialState={mockTags}>
+      {tags => {
+        return <TagsInput tags={tags} onChange={tags => action('tags updated')(tags)} />;
+      }}
+    </UseState>
+  );
+});
diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
new file mode 100644
index 00000000000..aaa6b54cbd3
--- /dev/null
+++ b/packages/grafana-ui/src/components/TagsInput/TagsInput.tsx
@@ -0,0 +1,121 @@
+import React, { ChangeEvent, KeyboardEvent, PureComponent } from 'react';
+import { css, cx } from 'emotion';
+import { stylesFactory } from '../../themes/stylesFactory';
+import { Button, Input } from '..';
+import { TagItem } from './TagItem';
+
+interface Props {
+  tags?: string[];
+  width?: number;
+
+  onChange: (tags: string[]) => void;
+}
+
+interface State {
+  newTag: string;
+  tags: string[];
+}
+
+export class TagsInput extends PureComponent<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      newTag: '',
+      tags: this.props.tags || [],
+    };
+  }
+
+  onNameChange = (event: ChangeEvent<HTMLInputElement>) => {
+    this.setState({
+      newTag: event.target.value,
+    });
+  };
+
+  onRemove = (tagToRemove: string) => {
+    this.setState(
+      (prevState: State) => ({
+        ...prevState,
+        tags: prevState.tags.filter(tag => tagToRemove !== tag),
+      }),
+      () => this.onChange()
+    );
+  };
+
+  // Using React.MouseEvent to avoid tslint error
+  onAdd = (event: React.MouseEvent) => {
+    event.preventDefault();
+    if (this.state.newTag !== '') {
+      this.setNewTags();
+    }
+  };
+
+  onKeyboardAdd = (event: KeyboardEvent) => {
+    event.preventDefault();
+    if (event.key === 'Enter' && this.state.newTag !== '') {
+      this.setNewTags();
+    }
+  };
+
+  setNewTags = () => {
+    // We don't want to duplicate tags, clearing the input if
+    // the user is trying to add the same tag.
+    if (!this.state.tags.includes(this.state.newTag)) {
+      this.setState(
+        (prevState: State) => ({
+          ...prevState,
+          tags: [...prevState.tags, prevState.newTag],
+          newTag: '',
+        }),
+        () => this.onChange()
+      );
+    } else {
+      this.setState({ newTag: '' });
+    }
+  };
+
+  onChange = () => {
+    this.props.onChange(this.state.tags);
+  };
+
+  render() {
+    const { tags, newTag } = this.state;
+
+    const getStyles = stylesFactory(() => ({
+      tagsCloudStyle: css`
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+      `,
+
+      addButtonStyle: css`
+        margin-left: 8px;
+        margin-top: 2px;
+      `,
+    }));
+
+    return (
+      <div className="width-20">
+        <div
+          className={cx(
+            ['gf-form-inline'],
+            css`
+              margin-bottom: 4px;
+            `
+          )}
+        >
+          <Input placeholder="Add Name" onChange={this.onNameChange} value={newTag} onKeyUp={this.onKeyboardAdd} />
+          <Button className={getStyles().addButtonStyle} onClick={this.onAdd} variant="secondary" size="md">
+            Add
+          </Button>
+        </div>
+        <div className={getStyles().tagsCloudStyle}>
+          {tags &&
+            tags.map((tag: string, index: number) => {
+              return <TagItem key={`${tag}-${index}`} name={tag} onRemove={this.onRemove} />;
+            })}
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index 46bf84c4fc9..42c528210f0 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/packages/grafana-ui/src/components/index.ts
@@ -37,6 +37,7 @@ export { RefreshPicker } from './RefreshPicker/RefreshPicker';
 export { TimePicker } from './TimePicker/TimePicker';
 export { TimeOfDayPicker } from './TimePicker/TimeOfDayPicker';
 export { List } from './List/List';
+export { TagsInput } from './TagsInput/TagsInput';
 export { Modal } from './Modal/Modal';
 
 // Renderless
@@ -87,8 +88,8 @@ export { JSONFormatter } from './JSONFormatter/JSONFormatter';
 export { JsonExplorer } from './JSONFormatter/json_explorer/json_explorer';
 export { ErrorBoundary, ErrorBoundaryAlert } from './ErrorBoundary/ErrorBoundary';
 export { AlphaNotice } from './AlphaNotice/AlphaNotice';
+export { DataSourceHttpSettings } from './DataSourceSettings/DataSourceHttpSettings';
 export { Spinner } from './Spinner/Spinner';
 export { FadeTransition } from './transitions/FadeTransition';
 export { SlideOutTransition } from './transitions/SlideOutTransition';
-// Segment
 export { Segment, SegmentAsync, SegmentSelect } from './Segment/';
diff --git a/packages/grafana-ui/src/types/datasource.ts b/packages/grafana-ui/src/types/datasource.ts
index 4d0780e4336..2003a4f62fe 100644
--- a/packages/grafana-ui/src/types/datasource.ts
+++ b/packages/grafana-ui/src/types/datasource.ts
@@ -10,6 +10,7 @@ import {
   DataFrameDTO,
   AnnotationEvent,
   ScopedVars,
+  KeyValue,
 } from '@grafana/data';
 import { PluginMeta, GrafanaPlugin } from './plugin';
 import { PanelData } from './panel';
@@ -504,6 +505,7 @@ export interface DataSourceSettings<T extends DataSourceJsonData = DataSourceJso
   isDefault: boolean;
   jsonData: T;
   secureJsonData?: S;
+  secureJsonFields?: KeyValue<boolean>;
   readOnly: boolean;
   withCredentials: boolean;
 }
diff --git a/packages/grafana-ui/src/utils/index.ts b/packages/grafana-ui/src/utils/index.ts
index 3684832000e..d387661f2cc 100644
--- a/packages/grafana-ui/src/utils/index.ts
+++ b/packages/grafana-ui/src/utils/index.ts
@@ -7,6 +7,7 @@ export * from './validate';
 export { getFlotPairs, getFlotPairsConstant } from './flotPairs';
 export * from './slate';
 export * from './dataLinks';
+export * from './tags';
 export { default as ansicolor } from './ansicolor';
 
 // Export with a namespace
diff --git a/packages/grafana-ui/src/utils/storybook/UseState.tsx b/packages/grafana-ui/src/utils/storybook/UseState.tsx
index 6dc3ff342f7..7e8340b979e 100644
--- a/packages/grafana-ui/src/utils/storybook/UseState.tsx
+++ b/packages/grafana-ui/src/utils/storybook/UseState.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
+import { action } from '@storybook/addon-actions';
 
 interface StateHolderProps<T> {
+  logState?: boolean;
   initialState: T;
   children: (currentState: T, updateState: (nextState: T) => void) => React.ReactNode;
 }
@@ -32,6 +34,9 @@ export class UseState<T> extends React.Component<StateHolderProps<T>, { value: T
   };
 
   render() {
+    if (this.props.logState) {
+      action('UseState current state')(this.state.value);
+    }
     return this.props.children(this.state.value, this.handleStateUpdate);
   }
 }
diff --git a/public/app/core/utils/tags.ts b/packages/grafana-ui/src/utils/tags.ts
similarity index 100%
rename from public/app/core/utils/tags.ts
rename to packages/grafana-ui/src/utils/tags.ts
diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts
index 7d7fa8c7dba..4267a799832 100644
--- a/public/app/core/angular_wrappers.ts
+++ b/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 }],
+  ]);
 }
diff --git a/public/app/core/components/TagFilter/TagBadge.tsx b/public/app/core/components/TagFilter/TagBadge.tsx
index d7a0c897795..5897947331f 100644
--- a/public/app/core/components/TagFilter/TagBadge.tsx
+++ b/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,
diff --git a/public/app/core/directives/tags.ts b/public/app/core/directives/tags.ts
index fb4420f4f2c..18b1955ea52 100644
--- a/public/app/core/directives/tags.ts
+++ b/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);
 }
diff --git a/public/app/features/admin/AdminListUsersCtrl.ts b/public/app/features/admin/AdminListUsersCtrl.ts
index 3e4ba2e37a3..87571d39cc9 100644
--- a/public/app/features/admin/AdminListUsersCtrl.ts
+++ b/public/app/features/admin/AdminListUsersCtrl.ts
@@ -1,6 +1,6 @@
+import { getTagColorsFromName } from '@grafana/ui';
 import { BackendSrv } from 'app/core/services/backend_srv';
 import { NavModelSrv } from 'app/core/core';
-import tags from 'app/core/utils/tags';
 
 export default class AdminListUsersCtrl {
   users: any;
@@ -63,7 +63,7 @@ function getAuthLabelStyle(label: string) {
     return {};
   }
 
-  const { color, borderColor } = tags.getTagColorsFromName(label);
+  const { color, borderColor } = getTagColorsFromName(label);
   return {
     'background-color': color,
     'border-color': borderColor,
diff --git a/public/app/features/datasources/partials/http_settings.html b/public/app/features/datasources/partials/http_settings.html
deleted file mode 100644
index 3c078f4befe..00000000000
--- a/public/app/features/datasources/partials/http_settings.html
+++ /dev/null
@@ -1,114 +0,0 @@
-<div class="gf-form-group">
-	<h3 class="page-heading">HTTP</h3>
-  <div class="gf-form-group">
-    <div class="gf-form-inline">
-      <div class="gf-form max-width-30">
-        <span class="gf-form-label width-10">URL</span>
-        <input class="gf-form-input gf-form-input--has-help-icon" type="text"
-              ng-model='current.url' placeholder="{{suggestUrl}}"
-              bs-typeahead="getSuggestUrls"  min-length="0"
-              ng-pattern="/^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/" required></input>
-        <info-popover mode="right-absolute">
-          <p>Specify a complete HTTP URL (for example http://your_server:8080)</p>
-          <span ng-show="current.access === 'direct'">
-            Your access method is <em>Browser</em>, this means the URL
-            needs to be accessible from the browser.
-          </span>
-          <span ng-show="current.access === 'proxy'">
-            Your access method is <em>Server</em>, this means the URL
-            needs to be accessible from the grafana backend/server.
-          </span>
-        </info-popover>
-      </div>
-		</div>
-
-		<div class="gf-form-inline" ng-if="showAccessOption">
-			<div class="gf-form max-width-30">
-				<span class="gf-form-label width-10">Access</span>
-				<div class="gf-form-select-wrapper max-width-24">
-					<select class="gf-form-input" ng-model="current.access" ng-options="f.key as f.value for f in [{key: 'proxy', value: 'Server (Default)'}, { key: 'direct', value: 'Browser'}]"></select>
-				</div>
-			</div>
-			<div class="gf-form">
-				<label class="gf-form-label query-keyword pointer" ng-click="toggleAccessHelp()">
-					Help&nbsp;
-					<i class="fa fa-caret-down" ng-show="showAccessHelp"></i>
-					<i class="fa fa-caret-right" ng-hide="showAccessHelp">&nbsp;</i>
-				</label>
-			</div>
-		</div>
-
-		<div class="grafana-info-box m-t-2" ng-show="showAccessHelp">
-			<p>
-			Access mode controls how requests to the data source will be handled.
-			<strong><i>Server</i></strong> should be the preferred way if nothing else stated.
-			</p>
-			<div class="alert-title">Server access mode (Default):</div>
-			<p>
-			All requests will be made from the browser to Grafana backend/server which in turn will forward the requests to the data source
-			and by that circumvent possible Cross-Origin Resource Sharing (CORS) requirements.
-			The URL needs to be accessible from the grafana backend/server if you select this access mode.
-			</p>
-			<div class="alert-title">Browser access mode:</div>
-			<p>
-			All requests will be made from the browser directly to the data source and may be subject to
-			Cross-Origin Resource Sharing (CORS) requirements. The URL needs to be accessible from the browser if you select this
-			access mode.
-		</div>
-
-		<div class="gf-form-inline" ng-if="current.access=='proxy'">
-			<div class="gf-form">
-				<span class="gf-form-label width-10">Whitelisted Cookies</span>
-				<bootstrap-tagsinput ng-model="current.jsonData.keepCookies" width-class="width-20 gf-form-input--has-help-icon" tagclass="label label-tag" placeholder="Add Name">
-				</bootstrap-tagsinput>
-				<info-popover mode="right-absolute">
-					Grafana Proxy deletes forwarded cookies by default. Specify cookies by name that should be forwarded to the data source.
-				</info-popover>
-			</div>
-		</div>
-	</div>
-
-	<h3 class="page-heading">Auth</h3>
-	<div class="gf-form-group">
-		<div class="gf-form-inline">
-			<gf-form-checkbox class="gf-form" label="Basic Auth" checked="current.basicAuth" label-class="width-13" switch-class="max-width-6"></gf-form-checkbox>
-			<gf-form-checkbox class="gf-form" label="With Credentials" tooltip="Whether credentials such as cookies or auth
-			  headers should be sent with cross-site requests." checked="current.withCredentials" label-class="width-13"
-			  switch-class="max-width-6"></gf-form-checkbox>
-		</div>
-		<div class="gf-form-inline">
-			<gf-form-checkbox class="gf-form" ng-if="current.access=='proxy'" label="TLS Client Auth" label-class="width-13"
-			  checked="current.jsonData.tlsAuth" switch-class="max-width-6"></gf-form-checkbox>
-			<gf-form-checkbox class="gf-form" ng-if="current.access=='proxy'" label="With CA Cert" tooltip="Needed for
-			  verifing self-signed TLS Certs" checked="current.jsonData.tlsAuthWithCACert" label-class="width-13"
-			  switch-class="max-width-6"></gf-form-checkbox>
-		</div>
-		<div class="gf-form-inline">
-			<gf-form-checkbox class="gf-form" ng-if="current.access=='proxy'" label="Skip TLS Verify" label-class="width-13"
-			  checked="current.jsonData.tlsSkipVerify" switch-class="max-width-6"></gf-form-checkbox>
-		</div>
-		<div class="gf-form-inline">
-			<gf-form-checkbox class="gf-form" ng-if="current.access=='proxy'" label="Forward OAuth Identity" label-class="width-13" tooltip="Forward the user's upstream OAuth identity to the datasource (Their access token gets passed along)." checked="current.jsonData.oauthPassThru" switch-class="max-width-6"></gf-form-checkbox>
-		</div>
-	</div>
-
-	<div class="gf-form-group" ng-if="current.basicAuth">
-		<h6>Basic Auth Details</h6>
-		<div class="gf-form" ng-if="current.basicAuth">
-			<span class="gf-form-label width-10">User</span>
-			<input class="gf-form-input max-width-21" type="text"  ng-model='current.basicAuthUser' placeholder="user" required></input>
-		</div>
-		<div class="gf-form">
-      <secret-form-field
-        isConfigured="current.basicAuthPassword || current.secureJsonFields.basicAuthPassword"
-        value="current.secureJsonData.basicAuthPassword || ''"
-        on-reset="onBasicAuthPasswordReset"
-        on-change="onBasicAuthPasswordChange"
-        inputWidth="18"
-        labelWidth="10"
-      />
-		</div>
-	</div>
-
-<datasource-tls-auth-settings current="current" ng-if="(current.jsonData.tlsAuth || current.jsonData.tlsAuthWithCACert) && current.access=='proxy'">
-</datasource-tls-auth-settings>
diff --git a/public/app/features/datasources/partials/http_settings_next.html b/public/app/features/datasources/partials/http_settings_next.html
new file mode 100644
index 00000000000..57df2b526ba
--- /dev/null
+++ b/public/app/features/datasources/partials/http_settings_next.html
@@ -0,0 +1 @@
+<datasource-http-settings-next on-change="onChange" dataSourceConfig="current" showAccessOptions="showAccessOption" defaultUrl="suggestUrl" />
diff --git a/public/app/features/datasources/partials/tls_auth_settings.html b/public/app/features/datasources/partials/tls_auth_settings.html
deleted file mode 100644
index c852e8ec70c..00000000000
--- a/public/app/features/datasources/partials/tls_auth_settings.html
+++ /dev/null
@@ -1,62 +0,0 @@
-<div class="gf-form-group">
-  <div class="gf-form">
-    <h6>TLS Auth Details</h6>
-    <info-popover mode="header">TLS Certs are encrypted and stored in the Grafana database.</info-popover>
-  </div>
-  <div ng-if="current.jsonData.tlsAuthWithCACert">
-    <div class="gf-form-inline">
-      <div class="gf-form gf-form--v-stretch"><label class="gf-form-label width-7">CA Cert</label></div>
-      <div class="gf-form gf-form--grow" ng-if="!current.secureJsonFields.tlsCACert">
-        <textarea
-          rows="7"
-          class="gf-form-input gf-form-textarea"
-          ng-model="current.secureJsonData.tlsCACert"
-          placeholder="Begins with -----BEGIN CERTIFICATE-----"
-        ></textarea>
-      </div>
-
-      <div class="gf-form" ng-if="current.secureJsonFields.tlsCACert">
-        <input type="text" class="gf-form-input max-width-12" disabled="disabled" value="configured" />
-        <a class="btn btn-secondary gf-form-btn" href="#" ng-click="current.secureJsonFields.tlsCACert = false">reset</a>
-      </div>
-    </div>
-  </div>
-
-  <div ng-if="current.jsonData.tlsAuth">
-    <div class="gf-form-inline">
-      <div class="gf-form gf-form--v-stretch"><label class="gf-form-label width-7">Client Cert</label></div>
-      <div class="gf-form gf-form--grow" ng-if="!current.secureJsonFields.tlsClientCert">
-        <textarea
-          rows="7"
-          class="gf-form-input gf-form-textarea"
-          ng-model="current.secureJsonData.tlsClientCert"
-          placeholder="Begins with -----BEGIN CERTIFICATE-----"
-          required
-        ></textarea>
-      </div>
-      <div class="gf-form" ng-if="current.secureJsonFields.tlsClientCert">
-        <input type="text" class="gf-form-input max-width-12" disabled="disabled" value="configured" />
-        <a class="btn btn-secondary gf-form-btn" href="#" ng-click="current.secureJsonFields.tlsClientCert = false"
-          >reset</a
-        >
-      </div>
-    </div>
-
-    <div class="gf-form-inline">
-      <div class="gf-form gf-form--v-stretch"><label class="gf-form-label width-7">Client Key</label></div>
-      <div class="gf-form gf-form--grow" ng-if="!current.secureJsonFields.tlsClientKey">
-        <textarea
-          rows="7"
-          class="gf-form-input gf-form-textarea"
-          ng-model="current.secureJsonData.tlsClientKey"
-          placeholder="Begins with -----BEGIN RSA PRIVATE KEY-----"
-          required
-        ></textarea>
-      </div>
-      <div class="gf-form" ng-if="current.secureJsonFields.tlsClientKey">
-        <input type="text" class="gf-form-input max-width-12" disabled="disabled" value="configured" />
-        <a class="btn btn-secondary gf-form-btn" href="#" ng-click="current.secureJsonFields.tlsClientKey = false">reset</a>
-      </div>
-    </div>
-  </div>
-</div>
diff --git a/public/app/features/datasources/settings/HttpSettingsCtrl.ts b/public/app/features/datasources/settings/HttpSettingsCtrl.ts
index 5b233118057..59b664a3272 100644
--- a/public/app/features/datasources/settings/HttpSettingsCtrl.ts
+++ b/public/app/features/datasources/settings/HttpSettingsCtrl.ts
@@ -1,5 +1,4 @@
 import { coreModule } from 'app/core/core';
-import { createChangeHandler, createResetHandler, PasswordFieldEnum } from '../utils/passwordHandlers';
 
 coreModule.directive('datasourceHttpSettings', () => {
   return {
@@ -8,22 +7,14 @@ coreModule.directive('datasourceHttpSettings', () => {
       suggestUrl: '@',
       noDirectAccess: '@',
     },
-    templateUrl: 'public/app/features/datasources/partials/http_settings.html',
+    templateUrl: 'public/app/features/datasources/partials/http_settings_next.html',
     link: {
-      pre: ($scope: any, elem, attrs) => {
+      pre: ($scope: any) => {
         // do not show access option if direct access is disabled
         $scope.showAccessOption = $scope.noDirectAccess !== 'true';
-        $scope.showAccessHelp = false;
-        $scope.toggleAccessHelp = () => {
-          $scope.showAccessHelp = !$scope.showAccessHelp;
+        $scope.onChange = (datasourceSetting: any) => {
+          $scope.current = datasourceSetting;
         };
-
-        $scope.getSuggestUrls = () => {
-          return [$scope.suggestUrl];
-        };
-
-        $scope.onBasicAuthPasswordReset = createResetHandler($scope, PasswordFieldEnum.BasicAuthPassword);
-        $scope.onBasicAuthPasswordChange = createChangeHandler($scope, PasswordFieldEnum.BasicAuthPassword);
       },
     },
   };