ux: made plugins page work

pkg/api/index.go

@@ -226,7 +226,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 				},
 				{
 					Text:        "Teams",
-					Id:          "users",
+					Id:          "teams",
 					Description: "Manage org groups",
 					Icon:        "gicon gicon-user-group",
 					Url:         setting.AppSubUrl + "/org/user-groups",

public/app/features/org/all.ts

@@ -5,6 +5,7 @@ import './select_org_ctrl';
 import './change_password_ctrl';
 import './new_org_ctrl';
 import './user_invite_ctrl';
+import './user_groups_ctrl';
 import './org_api_keys_ctrl';
 import './org_details_ctrl';
 import './prefs_control';

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

@@ -3,14 +3,13 @@
 <div class="page-container page-body">
 	<div class="page-action-bar">
 
-    <div class="gf-form width-15 gf-form-group">
-      <span style="position: relative;">
-        <input type="text" class="gf-form-input" placeholder="Find User Group by name" tabindex="1" give-focus="true"
+    <div class="gf-form width-15">
+      <label class="gf-form-label">Search</label>
+      <input type="text" class="gf-form-input" placeholder="Find User Group by name" tabindex="1" give-focus="true"
           ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.get()" />
-      </span>
     </div>
 
-    <div class="page-action-bar__spacer">
+    <div class="page-action-bar__spacer"></div>
 
     <a class="btn btn-success" ng-click="ctrl.openUserGroupModal()">
       <i class="fa fa-plus"></i>

public/app/features/org/user_groups_ctrl.ts

@@ -15,7 +15,7 @@ export class UserGroupsCtrl {
 
   /** @ngInject */
   constructor(private backendSrv, navModelSrv) {
-    this.navModel = navModelSrv.getNav('cfg', 'users', 0);
+    this.navModel = navModelSrv.getNav('cfg', 'teams', 0);
     this.get();
   }
 

public/app/features/plugins/partials/plugin_edit.html

@@ -1,96 +1,73 @@
-<!-- <div class="page&#45;header&#45;canvas"> -->
-<!--   <div class="page&#45;container" ng&#45;init="ctrl.init()"> -->
-<!--     <navbar model="ctrl.navModel"></navbar> -->
-<!--  -->
-<!--     <div class="page&#45;header"> -->
-<!--       <div class="plugin&#45;header"> -->
-<!--         <span class="plugin&#45;header&#45;logo"> -->
-<!--           <img ng&#45;src="{{ctrl.model.info.logos.large}}"> -->
-<!--         </span> -->
-<!--  -->
-<!--         <div class="plugin&#45;header&#45;info&#45;block"> -->
-<!--           <h1 class="plugin&#45;header&#45;name">{{ctrl.model.name}}</h1> -->
-<!--           <div class="plugin&#45;header&#45;author">By {{ctrl.model.info.author.name}}</div> -->
-<!--           <div class="plugin&#45;header&#45;stamps"> -->
-<!--             <span class="plugin&#45;header&#45;stamps&#45;type"> -->
-<!--               <i class="{{ctrl.pluginIcon}}"></i> {{ctrl.model.type}} -->
-<!--             </span> -->
-<!--           </div> -->
-<!--         </div> -->
-<!--       </div> -->
-<!--  -->
-<!--       <ul class="gf&#45;tabs"> -->
-<!--         <li class="gf&#45;tabs&#45;item" ng&#45;repeat="tab in ctrl.tabs"> -->
-<!--           <a class="gf&#45;tabs&#45;link" ng&#45;click="ctrl.tabIndex = $index" ng&#45;class="{active: ctrl.tabIndex === $index}"> -->
-<!--             {{::tab}} -->
-<!--           </a> -->
-<!--         </li> -->
-<!--       </ul> -->
-<!--     </div> -->
-<!--   </div> -->
-<!-- </div> -->
-
 <page-header model="ctrl.navModel"></page-header>
 
-<div class="page-container page-body page-body--with-sidebar">
-  <div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Readme'">
-    <div ng-bind-html="ctrl.readmeHtml" class="markdown-html">
-    </div>
+<div class="page-container page-body" ng-init="ctrl.init()">
+  <div class="page-action-bar">
+    <button class="btn" ng-repeat="tab in ctrl.tabs" ng-class="{'btn-secondary': ctrl.tabIndex === $index, 'btn-inverse': ctrl.tabIndex !== $index}" ng-click="ctrl.tabIndex = $index">
+      {{tab}}
+    </button>
   </div>
 
-  <div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Config'">
-    <div ng-if="ctrl.model.id">
-      <plugin-component type="app-config-ctrl"></plugin-component>
+  <div class="sidebar-container">
 
-      <div class="gf-form-button-row">
-        <button type="submit" class="btn btn-success" ng-click="ctrl.enable()" ng-show="!ctrl.model.enabled">Enable</button>
-        <button type="submit" class="btn btn-success" ng-click="ctrl.update()" ng-show="ctrl.model.enabled">Update</button>
-        <button type="submit" class="btn btn-danger" ng-click="ctrl.disable()" ng-show="ctrl.model.enabled">Disable</button>
+    <div class="tab-content sidebar-content" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Readme'">
+      <div ng-bind-html="ctrl.readmeHtml" class="markdown-html">
       </div>
     </div>
-  </div>
 
-  <div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Dashboards'">
-    <dashboard-import-list plugin="ctrl.model"></dashboard-import-list>
-  </div>
+    <div class="tab-content sidebar-content" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Config'">
+      <div ng-if="ctrl.model.id">
+        <plugin-component type="app-config-ctrl"></plugin-component>
 
-  <aside class="page-sidebar">
-    <section class="page-sidebar-section">
-      <h4>Version</h4>
-      <span>{{ctrl.model.info.version}}</span>
-      <div ng-show="ctrl.model.hasUpdate">
-        <a ng-click="ctrl.updateAvailable()" bs-tooltip="ctrl.model.latestVersion">Update Available!</a>
+        <div class="gf-form-button-row">
+          <button type="submit" class="btn btn-success" ng-click="ctrl.enable()" ng-show="!ctrl.model.enabled">Enable</button>
+          <button type="submit" class="btn btn-success" ng-click="ctrl.update()" ng-show="ctrl.model.enabled">Update</button>
+          <button type="submit" class="btn btn-danger" ng-click="ctrl.disable()" ng-show="ctrl.model.enabled">Disable</button>
+        </div>
       </div>
-    </section>
-    <section class="page-sidebar-section" ng-show="ctrl.model.type === 'app'">
-      <h5>Includes</h4>
-      <ul class="ui-list plugin-info-list">
-        <li ng-repeat="plug in ctrl.includes" class="plugin-info-list-item">
-          <i class="{{plug.icon}}"></i>
-          {{plug.name}}
-        </li>
-      </ul>
-    </section>
-    <section class="page-sidebar-section">
-      <h5>Dependencies</h4>
-      <ul class="ui-list plugin-info-list">
-        <li class="plugin-info-list-item">
-          <img src="public/img/grafana_icon.svg"></img>
-          Grafana {{ctrl.model.dependencies.grafanaVersion}}
-        </li>
-        <li ng-repeat="plugDep in ctrl.model.dependencies.plugins" class="plugin-info-list-item">
-          <i class="{{plugDep.icon}}"></i>
-          {{plugDep.name}} {{plugDep.version}}
-        </li>
-      </ul>
-    </section>
-    <section class="page-sidebar-section">
-      <h5>Links</h4>
-      <ul class="ui-list">
-        <li ng-repeat="link in ctrl.model.info.links">
-          <a href="{{link.url}}" class="external-link" target="_blank">{{link.name}}</a>
-        </li>
-      </ul>
-    </section>
-  </aside>
+    </div>
+
+    <div class="tab-content sidebar.content" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Dashboards'">
+      <dashboard-import-list plugin="ctrl.model"></dashboard-import-list>
+    </div>
+
+    <aside class="page-sidebar">
+      <section class="page-sidebar-section">
+        <h4>Version</h4>
+        <span>{{ctrl.model.info.version}}</span>
+        <div ng-show="ctrl.model.hasUpdate">
+          <a ng-click="ctrl.updateAvailable()" bs-tooltip="ctrl.model.latestVersion">Update Available!</a>
+        </div>
+      </section>
+      <section class="page-sidebar-section" ng-show="ctrl.model.type === 'app'">
+        <h5>Includes</h4>
+        <ul class="ui-list plugin-info-list">
+          <li ng-repeat="plug in ctrl.includes" class="plugin-info-list-item">
+            <i class="{{plug.icon}}"></i>
+            {{plug.name}}
+          </li>
+        </ul>
+      </section>
+      <section class="page-sidebar-section">
+        <h5>Dependencies</h4>
+        <ul class="ui-list plugin-info-list">
+          <li class="plugin-info-list-item">
+            <img src="public/img/grafana_icon.svg"></img>
+            Grafana {{ctrl.model.dependencies.grafanaVersion}}
+          </li>
+          <li ng-repeat="plugDep in ctrl.model.dependencies.plugins" class="plugin-info-list-item">
+            <i class="{{plugDep.icon}}"></i>
+            {{plugDep.name}} {{plugDep.version}}
+          </li>
+        </ul>
+      </section>
+      <section class="page-sidebar-section">
+        <h5>Links</h4>
+        <ul class="ui-list">
+          <li ng-repeat="link in ctrl.model.info.links">
+            <a href="{{link.url}}" class="external-link" target="_blank">{{link.name}}</a>
+          </li>
+        </ul>
+      </section>
+    </aside>
+  </div>
 </div>

public/app/features/plugins/plugin_edit_ctrl.ts

@@ -27,7 +27,7 @@ export class PluginEditCtrl {
     $routeParams,
     navModelSrv,
   ) {
-    this.navModel = navModelSrv.getNav('cfg', 'plugins');
+    this.navModel = navModelSrv.getNav('cfg', 'plugins', 0);
     this.model = {};
     this.pluginId = $routeParams.pluginId;
     this.tabIndex = 0;

public/sass/layout/_page.scss

@@ -32,14 +32,6 @@
 
 .page-body {
   padding-top: $spacer*2;
-
-  &--with-sidebar {
-    @include media-breakpoint-up(md) {
-      display: flex;
-      flex-direction: row;
-      flex-wrap: wrap;
-    }
-  }
 }
 
 .page-heading {
@@ -63,10 +55,18 @@
   flex-grow: 1;
 }
 
-.page-content-with-sidebar {
+.sidebar-content {
   width: calc(100% - #{$page-sidebar-width + $page-sidebar-margin}); // sidebar width + margin
 }
 
+.sidebar-container {
+  @include media-breakpoint-up(md) {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+  }
+}
+
 .page-sidebar {
   @include media-breakpoint-up(md) {
     width: $page-sidebar-width;