WIP: Plugable NavTabs implementation candidate

.gitignore

@@ -2,6 +2,8 @@
 .DS_Store
 *.iml
 .idea/*
+*.sw[o|p]
+~*
 
 # npm
 node_modules/

src/js/components/AppsAndGroupsListComponent.jsx

@@ -0,0 +1,115 @@
+import React from "react/addons";
+
+import QueryParamsMixin from "../mixins/QueryParamsMixin";
+import {Link} from "react-router";
+import SidebarComponent from "../components/SidebarComponent";
+import AppListComponent from "../components/AppListComponent";
+import BreadcrumbComponent from "../components/BreadcrumbComponent";
+import FilterTypes from "../constants/FilterTypes";
+import Util from "../helpers/Util";
+
+var AppsAndGroupsListComponent = React.createClass({
+  displayName: "AppsAndGroupsListComponent",
+
+  mixins: [QueryParamsMixin],
+
+  getInitialState: function () {
+    return {
+      currentGroup: "/"
+    };
+  },
+
+  componentWillReceiveProps: function () {
+    this.updateCurrentGroup();
+  },
+
+  componentWillMount: function () {
+    this.updateCurrentGroup();
+  },
+
+  updateCurrentGroup: function () {
+    var {groupId} = this.context.router.getCurrentParams();
+    if (groupId == null) {
+      groupId = "/";
+    }
+    groupId = decodeURIComponent(groupId);
+    if (!groupId.endsWith("/")) {
+      groupId += "/";
+    }
+
+    this.setState({
+      currentGroup: groupId
+    });
+  },
+
+  getContextualBar: function () {
+    var groupId = "/";
+    var filters = this.getQueryParamObject();
+
+    if (filters[FilterTypes.TEXT] == null ||
+        Util.isStringAndEmpty(filters[FilterTypes.TEXT])) {
+      return <BreadcrumbComponent groupId={groupId} />;
+    }
+
+    return (
+        <p className="breadcrumb">
+          <span>
+            {`Search results for "${filters[FilterTypes.TEXT]}"`}
+          </span>
+          {this.getClearLinkForFilter(FilterTypes.TEXT,
+            "Clear search",
+            "clear")}
+        </p>
+    );
+  },
+
+  render: function () {
+    var path = this.getCurrentPathname();
+    var groupId = this.state.currentGroup;
+
+    var newAppModalQuery = {
+      modal: "new-app"
+    };
+
+    var newGroupModalQuery = {
+      modal: "new-group"
+    };
+
+    if (groupId != null && groupId !== "/") {
+      newAppModalQuery.groupId = groupId;
+      newGroupModalQuery.groupId = groupId;
+    }
+    return (
+          <div className="app-list-wrapper">
+            <SidebarComponent groupId={groupId} />
+            <main>
+              <div className="contextual-bar">
+                {this.getContextualBar()}
+                <ul className="list-unstyled list-inline">
+                  <li>
+                    <Link to={path}
+                        query={newGroupModalQuery}
+                        className="btn btn-default create-group"
+                        activeClassName="create-group-active">
+                      Create Group
+                    </Link>
+                  </li>
+                  <li>
+                    <Link to={path}
+                        query={newAppModalQuery}
+                        className="btn btn-success create-app"
+                        activeClassName="create-app-active">
+                      Create Application
+                    </Link>
+                  </li>
+                </ul>
+              </div>
+              <AppListComponent currentGroup={groupId} />
+            </main>
+          </div>
+    );
+  }
+
+});
+
+export default AppsAndGroupsListComponent;

src/js/components/Marathon.jsx

@@ -27,7 +27,7 @@ import PluginStore from "../stores/PluginStore";
 import PluginEvents from "../events/PluginEvents";
 import PluginMountPoints from "../plugin/shared/PluginMountPoints";
 
-import tabs from "../constants/tabs";
+import NavTabStore from "../stores/NavTabStore";
 
 var Marathon = React.createClass({
   displayName: "Marathon",
@@ -105,10 +105,10 @@ var Marathon = React.createClass({
     }
 
     var activeTabId = !this.context.router.isActive("404")
-      ? tabs[0].id
+      ? NavTabStore.getTabs()[0].id
       : null;
 
-    if (tabs.find(function (tab) {
+    if (NavTabStore.getTabs().find(function (tab) {
       return tab.id === path;
     })) {
       activeTabId = path;
@@ -298,7 +298,7 @@ var Marathon = React.createClass({
             </div>
             <NavTabsComponent activeTabId={state.activeTabId}
               className="navbar-nav nav-tabs-unbordered"
-              tabs={tabs} />
+              tabs={NavTabStore.getTabs()} />
             <div className="nav navbar-nav navbar-right">
               <AppListFilterComponent />
               <HelpMenuComponent />

src/js/components/TabPanesComponent.jsx

@@ -1,15 +1,9 @@
-import {Link} from "react-router";
 import React from "react/addons";
 
-import AppListComponent from "../components/AppListComponent";
-import BreadcrumbComponent from "../components/BreadcrumbComponent";
-import DeploymentsListComponent from "../components/DeploymentsListComponent";
-import FilterTypes from "../constants/FilterTypes";
-import SidebarComponent from "../components/SidebarComponent";
 import TabPaneComponent from "../components/TabPaneComponent";
 import TogglableTabsComponent from "../components/TogglableTabsComponent";
-import Util from "../helpers/Util";
-import tabs from "../constants/tabs";
+import NavTabStore from "../stores/NavTabStore";
+import NavTabEvents from "../events/NavTabEvents";
 
 import QueryParamsMixin from "../mixins/QueryParamsMixin";
 
@@ -24,58 +18,24 @@ var TabPanesComponent = React.createClass({
 
   getInitialState: function () {
     return {
-      currentGroup: "/"
+      tabs: NavTabStore.getTabs()
     };
   },
 
-  componentWillReceiveProps: function () {
-    this.updateCurrentGroup();
-  },
-
   componentWillMount: function () {
-    this.updateCurrentGroup();
+    NavTabStore.on(NavTabEvents.CHANGE, this.onNavTabChange);
   },
 
-  getContextualBar: function () {
-    var state = this.state;
-    var filters = this.getQueryParamObject();
-
-    if (filters[FilterTypes.TEXT] == null ||
-        Util.isStringAndEmpty(filters[FilterTypes.TEXT])) {
-      return <BreadcrumbComponent groupId={state.currentGroup} />;
-    }
-
-    return (
-        <p className="breadcrumb">
-          <span>
-            {`Search results for "${filters[FilterTypes.TEXT]}"`}
-          </span>
-          {this.getClearLinkForFilter(FilterTypes.TEXT,
-            "Clear search",
-            "clear")}
-        </p>
-    );
-  },
-
-  updateCurrentGroup: function () {
-    var {groupId} = this.context.router.getCurrentParams();
-    if (groupId == null) {
-      groupId = "/";
-    }
-    groupId = decodeURIComponent(groupId);
-    if (!groupId.endsWith("/")) {
-      groupId += "/";
-    }
-
+  onNavTabChange: function () {
     this.setState({
-      currentGroup: groupId
+      tabs: NavTabStore.getTabs()
     });
   },
 
   getTabId: function () {
     var path = this.getCurrentPathname();
 
-    var hasTab = tabs.find(tab => tab.id === path);
+    var hasTab = NavTabStore.getTabs().find(tab => tab.id === path);
 
     if (hasTab) {
       return path;
@@ -85,58 +45,17 @@ var TabPanesComponent = React.createClass({
   },
 
   render: function () {
-    var path = this.getCurrentPathname();
-    var state = this.state;
-    var groupId = state.currentGroup;
-
-    var newAppModalQuery = {
-      modal: "new-app"
-    };
-
-    var newGroupModalQuery = {
-      modal: "new-group"
-    };
-
-    if (groupId != null && groupId !== "/") {
-      newAppModalQuery.groupId = groupId;
-      newGroupModalQuery.groupId = groupId;
-    }
-
+    var renderedNavTabComponents = this.state.tabs.map(tab => {
+      return (
+          <TabPaneComponent id={tab.id} key={tab.id}>
+            {React.createElement(tab.component)}
+          </TabPaneComponent>
+      );
+    });
     return (
       <TogglableTabsComponent activeTabId={this.getTabId()}
           className="container-fluid content">
-        <TabPaneComponent id={tabs[0].id}>
-          <div className="app-list-wrapper">
-            <SidebarComponent groupId={state.currentGroup} />
-            <main>
-              <div className="contextual-bar">
-                {this.getContextualBar()}
-                <ul className="list-unstyled list-inline">
-                  <li>
-                    <Link to={path}
-                        query={newGroupModalQuery}
-                        className="btn btn-default create-group"
-                        activeClassName="create-group-active">
-                      Create Group
-                    </Link>
-                  </li>
-                  <li>
-                    <Link to={path}
-                        query={newAppModalQuery}
-                        className="btn btn-success create-app"
-                        activeClassName="create-app-active">
-                      Create Application
-                    </Link>
-                  </li>
-                </ul>
-              </div>
-              <AppListComponent currentGroup={state.currentGroup} />
-            </main>
-          </div>
-        </TabPaneComponent>
-        <TabPaneComponent id={tabs[1].id}>
-          <DeploymentsListComponent />
-        </TabPaneComponent>
+          {renderedNavTabComponents}
       </TogglableTabsComponent>
     );
   }

src/js/events/NavTabEvents.js

@@ -0,0 +1,5 @@
+const NavTabEvents = {
+  CHANGE: "NAV_TAB_EVENTS_CHANGE"
+};
+
+export default Object.freeze(NavTabEvents);

src/js/plugin/shared/PluginEvents.js

@@ -5,7 +5,8 @@ const PluginEvents = {
   "INJECT_COMPONENT": "INJECT_COMPONENT",
   "APPS_STORE_CHANGE": "APPS_STORE_CHANGE",
   "APP_FORM_STORE_CHANGE": "APP_FORM_STORE_CHANGE",
-  "APP_FORM_STORE_VALIDATION_ERROR": "APP_FORM_STORE_VALIDATION_ERROR"
+  "APP_FORM_STORE_VALIDATION_ERROR": "APP_FORM_STORE_VALIDATION_ERROR",
+  "APPEND_NAVTAB": "NAV_TAB_EVENTS_APPEND_NAVTAB"
 };
 
 export default Util.fixObject(PluginEvents, "PLUGIN_EVENTS_");

src/js/stores/NavTabStore.js

@@ -0,0 +1,43 @@
+import {EventEmitter} from "events";
+import React from "react/addons";
+import PluginDispatcher from "../plugin/shared/PluginDispatcher";
+import Util from "../helpers/Util";
+import NavTabEvents from "../events/NavTabEvents";
+import PluginEvents from "../plugin/shared/PluginEvents";
+
+import DeploymentsListComponent
+  from "../components/DeploymentsListComponent";
+import AppsAndGroupsListComponent
+  from "../components/AppsAndGroupsListComponent";
+
+var tabs = [
+  {
+    id: "/apps",
+    text: "Applications",
+    component: AppsAndGroupsListComponent
+  },
+  {
+    id: "/deployments",
+    text: "Deployments",
+    component: DeploymentsListComponent
+  }
+];
+
+function appendTab(tab) {
+  tabs.push(tab);
+}
+
+var NavTabStore = Util.extendObject(EventEmitter.prototype, {
+  getTabs: function () {
+    return tabs;
+  }
+});
+
+PluginDispatcher.register(event => {
+  if (event.eventType === PluginEvents.APPEND_NAVTAB) {
+    event.data.map(appendTab);
+    NavTabStore.emit(NavTabEvents.CHANGE);
+  }
+});
+
+export default NavTabStore;

src/test/units/NavTabsComponent.test.js

@@ -7,7 +7,7 @@ import NavTabsComponent from "../../js/components/NavTabsComponent";
 import DeploymentEvents from "../../js/events/DeploymentEvents";
 import DeploymentStore from "../../js/stores/DeploymentStore";
 
-import tabs from "../../js/constants/tabs";
+import NavTabStore from "../../js/stores/NavTabStore";
 
 describe("Deployments navigation badge", function () {
 
@@ -19,7 +19,7 @@ describe("Deployments navigation badge", function () {
 
     var props = {
       activeTabId: "/deployments",
-      tabs: tabs
+      tabs: NavTabStore.getTabs()
     };
 
     DeploymentStore.once(DeploymentEvents.CHANGE, () => {