ux: misc react migration fixes and info box style improvement

public/app/core/components/OrgActionBar/OrgActionBar.test.tsx

@@ -6,6 +6,7 @@ const setup = (propOverrides?: object) => {
   const props: Props = {
     searchQuery: '',
     setSearchQuery: jest.fn(),
+    target: '_blank',
     linkButton: { href: 'some/url', title: 'test' },
   };
 

public/app/core/components/OrgActionBar/OrgActionBar.tsx

@@ -7,11 +7,17 @@ export interface Props {
   onSetLayoutMode?: (mode: LayoutMode) => {};
   setSearchQuery: (value: string) => {};
   linkButton: { href: string; title: string };
+  target?: string;
 }
 
 export default class OrgActionBar extends PureComponent<Props> {
   render() {
-    const { searchQuery, layoutMode, onSetLayoutMode, linkButton, setSearchQuery } = this.props;
+    const { searchQuery, layoutMode, onSetLayoutMode, linkButton, setSearchQuery, target } = this.props;
+    const linkProps = { href: linkButton.href, target: undefined };
+
+    if (target) {
+      linkProps.target = target;
+    }
 
     return (
       <div className="page-action-bar">
@@ -29,7 +35,7 @@ export default class OrgActionBar extends PureComponent<Props> {
           <LayoutSelector mode={layoutMode} onLayoutModeChanged={(mode: LayoutMode) => onSetLayoutMode(mode)} />
         </div>
         <div className="page-action-bar__spacer" />
-        <a className="btn btn-success" href={linkButton.href} target="_blank">
+        <a className="btn btn-success" {...linkProps}>
           {linkButton.title}
         </a>
       </div>

public/app/features/users/UsersActionBar.tsx

@@ -71,8 +71,7 @@ export class UsersActionBar extends PureComponent<Props> {
           )}
           {externalUserMngLinkUrl && (
             <a className="btn btn-success" href={externalUserMngLinkUrl} target="_blank">
-              <i className="fa fa-external-link-square" />
-              {externalUserMngLinkName}
+              <i className="fa fa-external-link-square" /> {externalUserMngLinkName}
             </a>
           )}
         </div>

public/app/features/users/UsersListPage.tsx

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
+import Remarkable from 'remarkable';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
 import UsersActionBar from './UsersActionBar';
 import UsersTable from 'app/features/users/UsersTable';
@@ -30,9 +31,20 @@ export interface State {
 }
 
 export class UsersListPage extends PureComponent<Props, State> {
-  state = {
-    showInvites: false,
-  };
+  externalUserMngInfoHtml: string;
+
+  constructor(props) {
+    super(props);
+
+    if (this.props.externalUserMngInfo) {
+      const markdownRenderer = new Remarkable();
+      this.externalUserMngInfoHtml = markdownRenderer.render(this.props.externalUserMngInfo);
+    }
+
+    this.state = {
+      showInvites: false,
+    };
+  }
 
   componentDidMount() {
     this.fetchUsers();
@@ -76,17 +88,16 @@ export class UsersListPage extends PureComponent<Props, State> {
   };
 
   render() {
-    const { externalUserMngInfo, invitees, navModel, users } = this.props;
+    const { invitees, navModel, users } = this.props;
+    const externalUserMngInfoHtml = this.externalUserMngInfoHtml;
 
     return (
       <div>
         <PageHeader model={navModel} />
         <div className="page-container page-body">
           <UsersActionBar onShowInvites={this.onShowInvites} showInvites={this.state.showInvites} />
-          {externalUserMngInfo && (
-            <div className="grafana-info-box">
-              <span>{externalUserMngInfo}</span>
-            </div>
+          {externalUserMngInfoHtml && (
+            <div className="grafana-info-box" dangerouslySetInnerHTML={{ __html: externalUserMngInfoHtml }} />
           )}
           {this.state.showInvites ? (
             <InviteesTable invitees={invitees} onRevokeInvite={code => this.onRevokeInvite(code)} />

public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap

@@ -112,6 +112,7 @@ exports[`Render should show external user management button 1`] = `
       <i
         className="fa fa-external-link-square"
       />
+       
     </a>
   </div>
 </div>

public/sass/_variables.dark.scss

@@ -304,8 +304,7 @@ $graph-tooltip-bg: $dark-1;
 $checkboxImageUrl: '../img/checkbox.png';
 
 // info box
-$info-box-background: linear-gradient(100deg, $blue-dark, darken($blue-dark, 5%));
-$info-box-color: $gray-4;
+$info-box-border-color: darken($blue, 12%);
 
 // footer
 $footer-link-color: $gray-2;

public/sass/_variables.light.scss

@@ -309,8 +309,7 @@ $graph-tooltip-bg: $gray-5;
 $checkboxImageUrl: '../img/checkbox_white.png';
 
 // info box
-$info-box-background: linear-gradient(100deg, $blue, darken($blue, 5%));
-$info-box-color: $gray-7;
+$info-box-border-color: lighten($blue, 20%);
 
 // footer
 $footer-link-color: $gray-3;

public/sass/components/_infobox.scss

@@ -1,16 +1,13 @@
 .grafana-info-box {
   position: relative;
-  background: $info-box-background;
-  box-shadow: $card-shadow;
-  padding: 1rem;
-  border-radius: 4px;
+  padding: 1.5rem;
+  background-color: $empty-list-cta-bg;
+  margin-bottom: 2rem;
+  border-top: 3px solid $info-box-border-color;
   margin-bottom: $spacer;
   margin-right: $gf-form-margin;
+  box-shadow: $card-shadow;
   flex-grow: 1;
-  color: $info-box-color;
-  h5 {
-    color: $info-box-color;
-  }
 
   h5 {
     margin-bottom: $spacer;
@@ -28,6 +25,10 @@
     border-radius: 4px;
   }
 
+  p:last-child {
+    margin-bottom: 0;
+  }
+
   a {
     @extend .external-link;
   }