feat: more work on #8768

pkg/api/frontendsettings.go

@@ -142,6 +142,9 @@ func getFrontendSettingsMap(c *middleware.Context) (map[string]interface{}, erro
 		"googleAnalyticsId":       setting.GoogleAnalyticsId,
 		"disableLoginForm":        setting.DisableLoginForm,
 		"disableSignoutMenu":      setting.DisableSignoutMenu,
+		"externalUserMngInfo":     setting.ExternalUserMngInfo,
+		"externalUserMngLinkUrl":  setting.ExternalUserMngLinkUrl,
+		"externalUserMngLinkName": setting.ExternalUserMngLinkName,
 		"buildInfo": map[string]interface{}{
 			"version":       setting.BuildVersion,
 			"commit":        setting.BuildCommit,

pkg/setting/setting.go

@@ -99,9 +99,9 @@ var (
 	DefaultTheme            string
 	DisableLoginForm        bool
 	DisableSignoutMenu      bool
-	ManageUsersLinkUrl  string
-	ManageUsersLinkName string
-	ManageUsersInfo     string
+	ExternalUserMngLinkUrl  string
+	ExternalUserMngLinkName string
+	ExternalUserMngInfo     string
 
 	// Http auth
 	AdminUser     string
@@ -534,9 +534,9 @@ func NewConfigContext(args *CommandLineArgs) error {
 	VerifyEmailEnabled = users.Key("verify_email_enabled").MustBool(false)
 	LoginHint = users.Key("login_hint").String()
 	DefaultTheme = users.Key("default_theme").String()
-	ManageUsersLinkUrl = users.Key("external_manage_link_url").String()
-	ManageUsersLinkName = users.Key("external_manage_link_name").String()
-	ManageUsersInfo = users.Key("external_manage_info").String()
+	ExternalUserMngLinkUrl = users.Key("external_manage_link_url").String()
+	ExternalUserMngLinkName = users.Key("external_manage_link_name").String()
+	ExternalUserMngInfo = users.Key("external_manage_info").String()
 
 	// auth
 	auth := Cfg.Section("auth")

public/app/features/org/org_users_ctrl.ts

@@ -3,6 +3,7 @@
 import config from 'app/core/config';
 import _ from 'lodash';
 import coreModule from 'app/core/core_module';
+import Remarkable from 'remarkable';
 
 export class OrgUsersCtrl {
 
@@ -10,11 +11,14 @@ export class OrgUsersCtrl {
   users: any;
   pendingInvites: any;
   editor: any;
-  showInviteUI: boolean;
   navModel: any;
+  externalUserMngLinkUrl: string;
+  externalUserMngLinkName: string;
+  externalUserMngInfo: string;
+  addUsersBtnName: string;
 
   /** @ngInject */
-  constructor(private $scope, private $http, private backendSrv, navModelSrv) {
+  constructor(private $scope, private $http, private backendSrv, navModelSrv, $sce) {
     this.user = {
       loginOrEmail: '',
       role: 'Viewer',
@@ -23,7 +27,27 @@ export class OrgUsersCtrl {
 
     this.get();
     this.editor = { index: 0 };
-    this.showInviteUI = config.disableLoginForm === false;
+    this.externalUserMngLinkUrl = config.externalUserMngLinkUrl;
+    this.externalUserMngLinkName = config.externalUserMngLinkName;
+
+    // render external user management info markdown
+    if (config.externalUserMngInfo) {
+      this.externalUserMngInfo = new Remarkable({
+        linkTarget: '__blank',
+      }).render(config.externalUserMngInfo);
+    }
+
+    this.addUsersBtnName = this.getAddUserBtnName();
+  }
+
+  getAddUserBtnName(): string {
+    if (this.externalUserMngLinkName) {
+      return this.externalUserMngLinkName;
+    } else if (config.disableLoginForm) {
+      return "Add Users";
+    } else {
+      return "Add or Invite";
+    }
   }
 
   get() {
@@ -68,13 +92,13 @@ export class OrgUsersCtrl {
     evt.stopPropagation();
   }
 
-  openInviteModal() {
+  openAddUsersView() {
     var modalScope = this.$scope.$new();
     modalScope.invitesSent = this.get.bind(this);
 
-    var src = this.showInviteUI
-      ? 'public/app/features/org/partials/invite.html'
-      : 'public/app/features/org/partials/add_user.html';
+    var src = config.disableLoginForm
+      ? 'public/app/features/org/partials/add_user.html'
+      : 'public/app/features/org/partials/invite.html';
 
     this.$scope.appEvent('show-modal', {
       src: src,

public/app/features/org/partials/orgUsers.html

@@ -5,11 +5,17 @@
 		<h1>Organization users</h1>
 
 		<div class="page-header-tabs">
-			<button class="btn btn-success" ng-click="ctrl.openInviteModal()">
+
+			<button class="btn btn-success" ng-click="ctrl.openAddUsersView()" ng-hide="ctrl.externalUserMngLinkUrl">
 				<i class="fa fa-plus"></i>
-        Add <span ng-show="ctrl.showInviteUI"> or Invite</span>
+        <span>{{ctrl.addUsersBtnName}}</span>
 			</button>
 
+      <a class="btn btn-inverse" ng-href="{{ctrl.externalUserMngLinkUrl}}" target="_blank" ng-if="ctrl.externalUserMngLinkUrl">
+				<i class="fa fa-external-link-square"></i>
+        {{ctrl.addUsersBtnName}}
+      </a>
+
 			<ul class="gf-tabs">
 				<li class="gf-tabs-item">
 					<a class="gf-tabs-link" ng-click="ctrl.editor.index = 0" ng-class="{active: ctrl.editor.index === 0}">
@@ -25,6 +31,10 @@
 		</div>
 	</div>
 
+  <div class="grafana-info-box" ng-if="ctrl.externalUserMngInfo">
+    <span ng-bind-html="ctrl.externalUserMngInfo"></span>
+  </div>
+
   <div ng-if="ctrl.editor.index === 0" class="tab-content">
     <table class="filter-table form-inline">
       <thead>

public/app/plugins/datasource/graphite/partials/query.options.html

@@ -63,8 +63,6 @@
 </section>
 
 <div class="editor-row">
-	<div class="pull-left">
-
 	<div class="grafana-info-box span8" ng-if="ctrl.panelCtrl.editorHelpIndex === 1">
 		<h5>Shorter legend names</h5>
 		<ul>
@@ -123,4 +121,3 @@
 		</ul>
 	</div>
 </div>
-</div>

public/app/plugins/datasource/influxdb/partials/query.options.html

@@ -37,8 +37,6 @@
 </section>
 
 <div class="editor-row">
-	<div class="pull-left">
-
 	<div class="grafana-info-box span6" ng-if="ctrl.panelCtrl.editorHelpIndex === 1">
 		<h5>Alias patterns</h5>
 		<ul>
@@ -74,6 +72,5 @@
 		</ul>
 	</div>
 </div>
-</div>
 
 

public/sass/_variables.dark.scss

@@ -258,7 +258,6 @@ $popover-border-color:    $gray-1;
 $popover-help-bg:         $btn-secondary-bg;
 $popover-help-color:      $text-color;
 
-
 // Tooltips and popovers
 // -------------------------
 $tooltipColor:            $popover-help-color;
@@ -276,6 +275,9 @@ $card-background: linear-gradient(135deg, #2f2f2f, #262626);
 $card-background-hover: linear-gradient(135deg, #343434, #262626);
 $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .3);
 
+// info box
+$info-box-background: linear-gradient(120deg, #142749, #0e203e);
+
 // footer
 $footer-link-color:   $gray-1;
 $footer-link-hover:   $gray-4;

public/sass/_variables.light.scss

@@ -300,6 +300,9 @@ $card-background: linear-gradient(135deg, $gray-5, $gray-6);
 $card-background-hover: linear-gradient(135deg, $gray-6, $gray-7);
 $card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
 
+// info box
+$info-box-background: linear-gradient(135deg, #f1fbff, #d7ebff);
+
 // footer
 $footer-link-color:   $gray-3;
 $footer-link-hover:   $dark-5;

public/sass/components/_infobox.scss

@@ -5,15 +5,16 @@
   top: -13px;
   left: -8px;
   font-size: 20px;
-  color: $blue;
+  color: $text-color;
 }
 
 .grafana-info-box {
   position: relative;
-  background: $card-background;
+  background: $info-box-background;
   box-shadow: $card-shadow;
   padding: 1rem;
   border-radius: 4px;
+  margin-bottom: $spacer;
 
   h5 {
     margin-bottom: $spacer;
@@ -21,5 +22,9 @@
   ul {
     padding-left: $spacer;
   }
+
+  a {
+    @extend .external-link;
+  }
 }