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;">
+    <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,44 +1,20 @@
-<!-- <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 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="sidebar-container">
+
+    <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 class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Config'">
+    <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>
 
@@ -50,7 +26,7 @@
       </div>
     </div>
 
-  <div class="tab-content page-content-with-sidebar" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Dashboards'">
+    <div class="tab-content sidebar.content" ng-if="ctrl.tabs[ctrl.tabIndex] === 'Dashboards'">
       <dashboard-import-list plugin="ctrl.model"></dashboard-import-list>
     </div>
 
@@ -93,4 +69,5 @@
         </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;