using label component

public/app/core/components/Label/Label.tsx

@@ -5,11 +5,12 @@ interface Props {
   tooltip?: string;
   tooltip?: string;
   for?: string;
   for?: string;
   children: ReactNode;
   children: ReactNode;
+  width?: number;
 }
 }
 
 
 export const Label: SFC<Props> = props => {
 export const Label: SFC<Props> = props => {
   return (
   return (
-    <span className="gf-form-label width-10">
+    <span className={`gf-form-label width-${props.width ? props.width : '10'}`}>
       <span>{props.children}</span>
       <span>{props.children}</span>
       {props.tooltip && (
       {props.tooltip && (
         <Tooltip className="gf-form-help-icon--right-normal" placement="auto" content={props.tooltip}>
         <Tooltip className="gf-form-help-icon--right-normal" placement="auto" content={props.tooltip}>
@@ -19,4 +20,3 @@ export const Label: SFC<Props> = props => {
     </span>
     </span>
   );
   );
 };
 };
-

public/app/features/org/OrgPreferences.tsx

 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { connect } from 'react-redux';
-import Tooltip from '../../core/components/Tooltip/Tooltip';
+import { Label } from '../../core/components/Label/Label';
 import SimplePicker from '../../core/components/Picker/SimplePicker';
 import SimplePicker from '../../core/components/Picker/SimplePicker';
 import { Dashboard, OrganizationPreferences } from 'app/types';
 import { Dashboard, OrganizationPreferences } from 'app/types';
 import {
 import {
@@ -59,16 +59,12 @@ export class OrgPreferences extends PureComponent<Props> {
           />
           />
         </div>
         </div>
         <div className="gf-form">
         <div className="gf-form">
-          <span className="gf-form-label width-11">
-            Home Dashboard
-            <Tooltip
-              className="gf-form-help-icon gf-form-help-icon--right-normal"
-              placement="right"
-              content="Not finding dashboard you want? Star it first, then it should appear in this select box."
+          <Label
+            width={11}
+            tooltip="Not finding dashboard you want? Star it first, then it should appear in this select box."
           >
           >
-              <i className="fa fa-info-circle" />
-            </Tooltip>
-          </span>
+            Home Dashboard
+          </Label>
           <SimplePicker
           <SimplePicker
             defaultValue={starredDashboards.find(dashboard => dashboard.id === preferences.homeDashboardId)}
             defaultValue={starredDashboards.find(dashboard => dashboard.id === preferences.homeDashboardId)}
             getOptionValue={i => i.id}
             getOptionValue={i => i.id}

public/app/features/org/__snapshots__/OrgPreferences.test.tsx.snap

@@ -44,20 +44,12 @@ exports[`Render should render component 1`] = `
   <div
   <div
     className="gf-form"
     className="gf-form"
   >
   >
-    <span
-      className="gf-form-label width-11"
+    <Component
+      tooltip="Not finding dashboard you want? Star it first, then it should appear in this select box."
+      width={11}
     >
     >
       Home Dashboard
       Home Dashboard
-      <class_1
-        className="gf-form-help-icon gf-form-help-icon--right-normal"
-        content="Not finding dashboard you want? Star it first, then it should appear in this select box."
-        placement="right"
-      >
-        <i
-          className="fa fa-info-circle"
-        />
-      </class_1>
-    </span>
+    </Component>
     <SimplePicker
     <SimplePicker
       defaultValue={
       defaultValue={
         Object {
         Object {