Refine SettingsMenu service and <settings-screen> component

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>
 

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);
     },
   });

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) {

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) {

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';
 

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';
 

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) {

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,
   });
 

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';

client/app/services/settingsMenu.js

@@ -0,0 +1,40 @@
+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 = [];
+    this._dirty = false;
+  }
+
+  get items() {
+    if (this._dirty) {
+      this._items = sortBy(this._items, 'order');
+      this._dirty = false;
+    }
+    return this._items;
+  }
+
+  add(item) {
+    this._items.push(new SettingsMenuItem(item));
+    this._dirty = true;
+  }
+}
+
+export default new SettingsMenu();