diff --git a/public/app/core/components/OrgActionBar/OrgActionBar.test.tsx b/public/app/core/components/OrgActionBar/OrgActionBar.test.tsx index d838a2d5c34..9faf07f18d1 100644 --- a/public/app/core/components/OrgActionBar/OrgActionBar.test.tsx +++ b/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' }, }; diff --git a/public/app/core/components/OrgActionBar/OrgActionBar.tsx b/public/app/core/components/OrgActionBar/OrgActionBar.tsx index 9596a27acad..8fc34a018e1 100644 --- a/public/app/core/components/OrgActionBar/OrgActionBar.tsx +++ b/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 { 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 (
@@ -29,7 +35,7 @@ export default class OrgActionBar extends PureComponent { onSetLayoutMode(mode)} />
- + {linkButton.title}
diff --git a/public/app/features/users/UsersActionBar.tsx b/public/app/features/users/UsersActionBar.tsx index aa8b36d6452..82fae2ed059 100644 --- a/public/app/features/users/UsersActionBar.tsx +++ b/public/app/features/users/UsersActionBar.tsx @@ -71,8 +71,7 @@ export class UsersActionBar extends PureComponent { )} {externalUserMngLinkUrl && ( - - {externalUserMngLinkName} + {externalUserMngLinkName} )} diff --git a/public/app/features/users/UsersListPage.tsx b/public/app/features/users/UsersListPage.tsx index f163ede77a7..8ca65221f4c 100644 --- a/public/app/features/users/UsersListPage.tsx +++ b/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 { - 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 { }; render() { - const { externalUserMngInfo, invitees, navModel, users } = this.props; + const { invitees, navModel, users } = this.props; + const externalUserMngInfoHtml = this.externalUserMngInfoHtml; return (
- {externalUserMngInfo && ( -
- {externalUserMngInfo} -
+ {externalUserMngInfoHtml && ( +
)} {this.state.showInvites ? ( this.onRevokeInvite(code)} /> diff --git a/public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap b/public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap index 6aafcfe9188..e69accb011b 100644 --- a/public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap +++ b/public/app/features/users/__snapshots__/UsersActionBar.test.tsx.snap @@ -112,6 +112,7 @@ exports[`Render should show external user management button 1`] = ` +
diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 01590ace585..a878db0d9f4 100644 --- a/public/sass/_variables.dark.scss +++ b/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; diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index b6248da6a00..e908f7d4157 100644 --- a/public/sass/_variables.light.scss +++ b/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; diff --git a/public/sass/components/_infobox.scss b/public/sass/components/_infobox.scss index 52be4b4737c..fb2222dd9db 100644 --- a/public/sass/components/_infobox.scss +++ b/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; }