Refine SettingsMenu service and <settings-screen> component (#3339)

* Refine SettingsMenu service and <settings-screen> component * Rename services/settingsMenu file to match default export name * CR1
getredash · Jan 25, 2019 · 1fa5867 · 1fa5867
1 parent d204c15
commit 1fa5867
Show file tree

Hide file tree

Showing 11 changed files with 46 additions and 32 deletions.
diff --git a/client/app/components/settings-screen.html b/client/app/components/settings-screen.html
@@ -3,7 +3,11 @@
 
   <div class="bg-white tiled">
     <ul class="tab-nav">
-      <li ng-class="{'active': $ctrl.isActive(menuItem)}" ng-if="$ctrl.isAvailable(menuItem.permission)" ng-repeat="menuItem in $ctrl.settingsMenu.menus">
+      <li
+        ng-repeat="menuItem in $ctrl.settingsMenu.items"
+        ng-if="$ctrl.isAvailable(menuItem.permission)"
+        ng-class="{'active': $ctrl.isActive(menuItem)}"
+      >
         <a href="{{menuItem.path}}">{{menuItem.title}}</a>
       </li>
 

diff --git a/client/app/components/settings-screen.js b/client/app/components/settings-screen.js
@@ -1,5 +1,4 @@
-import settingsMenu from '@/lib/settings-menu';
-import { isFunction } from 'lodash';
+import settingsMenu from '@/services/settingsMenu';
 import template from './settings-screen.html';
 
 export default function init(ngModule) {
@@ -8,12 +7,7 @@ export default function init(ngModule) {
     template,
     controller($location, currentUser) {
       this.settingsMenu = settingsMenu;
-      this.isActive = (menuItem) => {
-        if (isFunction(menuItem.isActive)) {
-          return menuItem.isActive($location);
-        }
-        return $location.path().startsWith(menuItem.pathPrefix);
-      };
+      this.isActive = menuItem => menuItem.isActive($location.path());
       this.isAvailable = permission => permission === undefined || currentUser.hasPermission(permission);
     },
   });

diff --git a/client/app/lib/settings-menu.js b/client/app/lib/settings-menu.js
diff --git a/client/app/pages/data-sources/list.js b/client/app/pages/data-sources/list.js
@@ -1,4 +1,4 @@
-import settingsMenu from '@/lib/settings-menu';
+import settingsMenu from '@/services/settingsMenu';
 import template from './list.html';
 
 function DataSourcesCtrl(Policy, DataSource) {

diff --git a/client/app/pages/destinations/list.js b/client/app/pages/destinations/list.js
@@ -1,4 +1,4 @@
-import settingsMenu from '@/lib/settings-menu';
+import settingsMenu from '@/services/settingsMenu';
 import template from './list.html';
 
 function DestinationsCtrl($scope, $location, toastr, currentUser, Destination) {

diff --git a/client/app/pages/groups/list.js b/client/app/pages/groups/list.js
@@ -1,4 +1,4 @@
-import settingsMenu from '@/lib/settings-menu';
+import settingsMenu from '@/services/settingsMenu';
 import { Paginator } from '@/lib/pagination';
 import template from './list.html';
 

diff --git a/client/app/pages/query-snippets/list.js b/client/app/pages/query-snippets/list.js
@@ -1,4 +1,4 @@
-import settingsMenu from '@/lib/settings-menu';
+import settingsMenu from '@/services/settingsMenu';
 import { Paginator } from '@/lib/pagination';
 import template from './list.html';
 

diff --git a/client/app/pages/settings/organization.js b/client/app/pages/settings/organization.js
@@ -1,4 +1,4 @@
-import settingsMenu from '@/lib/settings-menu';
+import settingsMenu from '@/services/settingsMenu';
 import template from './organization.html';
 
 function OrganizationSettingsCtrl($http, toastr, clientConfig, Events) {

diff --git a/client/app/pages/users/list.js b/client/app/pages/users/list.js
@@ -1,6 +1,6 @@
 import { extend } from 'lodash';
 import ListCtrl from '@/lib/list-ctrl';
-import settingsMenu from '@/lib/settings-menu';
+import settingsMenu from '@/services/settingsMenu';
 import template from './list.html';
 
 class UsersListCtrl extends ListCtrl {
@@ -33,7 +33,7 @@ export default function init(ngModule) {
     permission: 'list_users',
     title: 'Users',
     path: 'users',
-    isActive: $location => $location.path().startsWith('/users') && $location.path() !== '/users/me',
+    isActive: path => path.startsWith('/users') && (path !== '/users/me'),
     order: 2,
   });
 

diff --git a/client/app/pages/users/show.js b/client/app/pages/users/show.js
@@ -1,5 +1,5 @@
 import { each } from 'lodash';
-import settingsMenu from '@/lib/settings-menu';
+import settingsMenu from '@/services/settingsMenu';
 import { absoluteUrl } from '@/services/utils';
 import template from './show.html';
 import './settings.less';

diff --git a/client/app/services/settingsMenu.js b/client/app/services/settingsMenu.js
@@ -0,0 +1,31 @@
+import { isFunction, extend, omit, sortBy } from 'lodash';
+
+class SettingsMenuItem {
+  constructor(menuItem) {
+    extend(
+      this,
+      { pathPrefix: `/${menuItem.path}` },
+      omit(menuItem, ['isActive']),
+    );
+    if (isFunction(menuItem.isActive)) {
+      this.isActive = menuItem.isActive;
+    }
+  }
+
+  isActive(path) {
+    return path.startsWith(this.pathPrefix);
+  }
+}
+
+class SettingsMenu {
+  constructor() {
+    this.items = [];
+  }
+
+  add(item) {
+    this.items.push(new SettingsMenuItem(item));
+    this.items = sortBy(this.items, 'order');
+  }
+}
+
+export default new SettingsMenu();