Merge pull request #42 from eapearson/master

update integration layer to comply with updated kbase-ui preact-based integration; repo cleanup

.gitignore

@@ -2,3 +2,4 @@
 node_modules/
 bower_components/
 /dist/
+vendor/

bower.json

@@ -1,11 +1,18 @@
 {
     "name": "kbase-ui-plugin-dashboard",
     "description": "A primary view (panel) for the KBase UI to provide a user with a summary of their Narratives, relationships, and status",
-    "keywords": ["kbase", "widget"],
-    "author": ["[email protected]"],
+    "keywords": [
+        "kbase",
+        "widget"
+    ],
+    "author": [
+        "[email protected]"
+    ],
     "moduleType": "kbase-ui-plugin",
     "main": "src/plugin/config.yml",
-    "ignore": [".gitignore"],
+    "ignore": [
+        ".gitignore"
+    ],
     "repository": {
         "type": "git",
         "url": "git://github.com/kbase/kbase-ui-plugin-dashboard"
@@ -17,8 +24,8 @@
         "jquery": "^2.2.4",
         "kbase-service-clients-js": "^3.3.5",
         "kbase-common-js": "^2.18.1",
-        "kbase-common-es6": "^0.10.14"
+        "kbase-common-es6": "^0.11.11"
     },
     "devDependencies": {},
     "license": "SEE LICENSE IN LICENSE.md"
-}
+}

build/bower.json

@@ -28,6 +28,7 @@
             "kbase-common-es6": "bower_components/kbase-common-es6/src/**",
             "kbase-common-js": "bower_components/kbase-common-js/dist/kb_common/**",
             "kbase-service-clients-js": "bower_components/kbase-service-clients-js/dist/kb_service/**",
+            "kbase-common-ts": "bower_components/kbase-common-ts/dist/*.js",
             "font-awesome": [
                 {
                     "bower_components/font-awesome/css/font-awesome.css": "css/font-awesome.css"
@@ -47,6 +48,7 @@
         "require-css": "0.1.10",
         "kbase-common-js": "2.18.1",
         "kbase-common-es6": "0.11.1",
+        "kbase-common-ts": "0.19.0",
         "js-yaml": "3.13.1",
         "requirejs-text": "2.0.16",
         "requirejs-yaml": "eapearson/requirejs-yaml#1.0.5",

build/package.json

@@ -6,6 +6,7 @@
         "install-npm": "grunt copy",
         "remove-source-maps": "node scripts/remove-source-maps.js",
         "install-dist": "node scripts/install-dist.js",
+        "install-dev": "node scripts/install-dev.js",
         "update": "node scripts/install-dev.js"
     },
     "author": "KBase Developers",

package.json

@@ -4,7 +4,8 @@
     "description": "A ui plugin for the UI",
     "main": "index.js",
     "scripts": {
-        "build-plugin": "bash scripts/build-plugin.bash"
+        "build": "bash scripts/build-plugin.bash",
+        "build-dev": "bash scripts/build-plugin-dev.bash"
     },
     "repository": {
         "type": "git",

scripts/build-plugin-dev.bash

@@ -0,0 +1,9 @@
+cd build
+yarn install && \
+yarn clean && \
+yarn install && \
+yarn install-bower && \
+yarn install-npm && \
+yarn remove-source-maps && \
+yarn install-dev
+cd ..

scripts/build-plugin.bash

@@ -1,3 +1,9 @@
 cd build
-yarn install && yarn clean && yarn install && yarn install-bower && yarn install-npm &&yarn remove-source-maps && yarn install-dist
+yarn install && \
+yarn clean && \
+yarn install && \
+yarn install-bower && \
+yarn install-npm && \
+yarn remove-source-maps && \
+yarn install-dist
 cd ..

scripts/install-plugin.bash

@@ -0,0 +1,3 @@
+cd build
+yarn install && yarn clean && yarn install && yarn install-bower && yarn install-npm &&yarn remove-source-maps && yarn install-dist
+cd ..

src/plugin/config.yml

@@ -1,26 +1,19 @@
 ## YAML Template.
 ---
 package:
-  author: Erik Pearson
   name: dashboard
   description: The dashboard panel and associated widgets
-  date: August 6, 2015
-  version: 0.0.1
-source:
-  ## sources are relative to build/plugins/PACKAGE/source/javascript
-  ## NB: need to quote file names, otherwise
-  modules:
-  styles:
-    # - file: styles.css
+  type: iframe
 install:
-  widgets:
-    - module: ./panel
-      id: kb_plugin_dashboard
-      type: es6
   routes:
-    - path: ["dashboard"]
-      widget: kb_plugin_dashboard
+    - path: ["dashboard", {type: "rest", name: "path"}]
+      view: main
+      component: /pluginSupport/Plugin
       authorization: true
+      # TODO: get rid of this!!
+      params:
+        view: main
+        plugin: dashboard
   menu:
     - name: dashboard
       definition:

src/plugin/iframe_root/config.yml

@@ -1,48 +1,48 @@
 ## YAML Template.
 ---
 package:
-    author: Erik Pearson
-    name: dashboard
-    description: The dashboard panel and associated widgets
-    date: August 6, 2015
-    version: 0.0.1
+  author: Erik Pearson
+  name: dashboard
+  description: The dashboard panel and associated widgets
+  date: August 6, 2015
+  version: 0.0.1
 source:
-    ## sources are relative to build/plugins/PACKAGE/source/javascript
-    ## NB: need to quote file names, otherwise
-    modules:
-    styles:
-        - file: styles.css
+  ## sources are relative to build/plugins/PACKAGE/source/javascript
+  ## NB: need to quote file names, otherwise
+  modules:
+  styles:
+    - file: styles.css
 install:
-    widgets:
-        - module: ./dashboardPanel
-          id: dashboardPanel
-          type: factory
-        - module: ./widgets/CollaboratorsWidget
-          id: dashboardCollaborators
-          type: object
-        - module: ./widgets/MetricsWidget
-          id: dashboardMetrics
-          type: object
-        - module: ./widgets/NarrativesWidget
-          id: dashboardNarratives
-          type: object
-        - module: ./widgets/PublicNarrativesWidget
-          id: dashboardPublicNarratives
-          type: object
-        - module: ./widgets/NarratorialsWidget
-          id: dashboardNarratorials
-          type: object
-        - module: ./widgets/SharedNarrativesWidget
-          id: dashboardSharedNarratives
-          type: object
-    routes:
-        - path: ["dashboard"]
-          widget: dashboardPanel
-          authorization: true
-    menu:
-        - name: dashboard
-          menus: ["authenticated"]
-          definition:
-              path: ["dashboard"]
-              label: Dashboard
-              icon: dashboard
+  widgets:
+    - module: ./dashboardPanel
+      id: dashboardPanel
+      type: factory
+    - module: ./widgets/CollaboratorsWidget
+      id: dashboardCollaborators
+      type: object
+    - module: ./widgets/MetricsWidget
+      id: dashboardMetrics
+      type: object
+    - module: ./widgets/NarrativesWidget
+      id: dashboardNarratives
+      type: object
+    - module: ./widgets/PublicNarrativesWidget
+      id: dashboardPublicNarratives
+      type: object
+    - module: ./widgets/NarratorialsWidget
+      id: dashboardNarratorials
+      type: object
+    - module: ./widgets/SharedNarrativesWidget
+      id: dashboardSharedNarratives
+      type: object
+  routes:
+    - path: ["dashboard"]
+      widget: dashboardPanel
+      authorization: true
+  menu:
+    - name: dashboard
+      menus: ["authenticated"]
+      definition:
+        path: ["dashboard"]
+        label: Dashboard
+        icon: dashboard

src/plugin/iframe_root/loader.js

@@ -0,0 +1,33 @@
+define([], function () {
+    'use strict';
+    require.config({
+        baseUrl: './modules',
+        paths: {
+            bluebird: 'vendor/bluebird/bluebird',
+            bootstrap: 'vendor/bootstrap/bootstrap',
+            bootstrap_css: 'vendor/bootstrap/css/bootstrap',
+            css: 'vendor/require-css/css',
+            datatables: 'vendor/datatables/jquery.dataTables',
+            datatables_css: 'vendor/datatables/jquery.dataTables',
+            datatables_bootstrap_css: 'vendor/datatables-bootstrap3-plugin/datatables-bootstrap3',
+            datatables_bootstrap: 'vendor/datatables-bootstrap3-plugin/datatables-bootstrap3',
+            font_awesome: 'vendor/font-awesome/css/font-awesome',
+            jquery: 'vendor/jquery/jquery',
+            'js-yaml': 'vendor/js-yaml/js-yaml',
+            kb_common: 'vendor/kbase-common-js',
+            kb_common_ts: 'vendor/kbase-common-ts',
+            kb_lib: 'vendor/kbase-common-es6',
+            kb_service: 'vendor/kbase-service-clients-js',
+            nunjucks: 'vendor/nunjucks/nunjucks',
+            md5: 'vendor/spark-md5/spark-md5',
+            text: 'vendor/requirejs-text/text',
+            yaml: 'vendor/requirejs-yaml/yaml',
+            uuid: 'vendor/pure-uuid/uuid'
+        },
+        shim: {
+            bootstrap: {
+                deps: ['jquery', 'css!bootstrap_css']
+            }
+        }
+    });
+});

src/plugin/iframe_root/main.js

@@ -1,86 +1,66 @@
-(() => {
+require(['loader'], function () {
     'use strict';
-    // TODO: needs to not be hard coded here.
-    const pluginPath = '/modules/plugins/dashboard/iframe_root';
-    require.config({
-        baseUrl: pluginPath + '/modules',
-        paths: {
-            bluebird: 'vendor/bluebird/bluebird',
-            bootstrap: 'vendor/bootstrap/bootstrap',
-            bootstrap_css: 'vendor/bootstrap/css/bootstrap',
-            css: 'vendor/require-css/css',
-            datatables: 'vendor/datatables/jquery.dataTables',
-            datatables_css: 'vendor/datatables/jquery.dataTables',
-            datatables_bootstrap_css: 'vendor/datatables-bootstrap3-plugin/datatables-bootstrap3',
-            datatables_bootstrap: 'vendor/datatables-bootstrap3-plugin/datatables-bootstrap3',
-            font_awesome: 'vendor/font-awesome/css/font-awesome',
-            jquery: 'vendor/jquery/jquery',
-            'js-yaml': 'vendor/js-yaml/js-yaml',
-            kb_common: 'vendor/kbase-common-js',
-            kb_lib: 'vendor/kbase-common-es6',
-            kb_service: 'vendor/kbase-service-clients-js',
-            nunjucks: 'vendor/nunjucks/nunjucks',
-            md5: 'vendor/spark-md5/spark-md5',
-            text: 'vendor/requirejs-text/text',
-            yaml: 'vendor/requirejs-yaml/yaml',
-            uuid: 'vendor/pure-uuid/uuid'
-        },
-        shim: {
-            bootstrap: {
-                deps: ['jquery', 'css!bootstrap_css']
-            }
-        }
-    });
-
     require([
         'bluebird',
-        'lib/runtime',
-        'lib/integration',
+        'kbaseUI/integration',
+        'kbaseUI/dispatcher',
+        'kb_lib/props',
         'yaml!./config.yml',
-        'dashboardPanel',
         'bootstrap',
         'css!font_awesome'
-    ], (Promise, Runtime, Integration, pluginConfig, dashboardPanel) => {
+    ], (Promise, Integration, Dispatcher, props, pluginConfig) => {
+        const pluginConfigDB = new props.Props({ data: pluginConfig });
         Promise.try(() => {
             const integration = new Integration({
-                rootWindow: window
-            });
-            try {
-                integration.start();
-            } catch (ex) {
-                console.error('Error starting main: ', ex.message);
-            }
-
-            const {
-                params: { config, token, username }
-            } = integration.getParamsFromIFrame();
-
-            const runtime = new Runtime({
-                config,
-                token,
-                username
+                rootWindow: window,
+                pluginConfigDB
             });
-
-            const widgets = pluginConfig.install.widgets;
-            widgets.forEach((widgetDef) => {
-                runtime.widgetManager.addWidget(widgetDef);
-            });
-
-            // Now start the one and only panel.
             const rootNode = document.getElementById('root');
 
-            const panel = dashboardPanel.make({ runtime });
+            // NOW -- we need to implement widget dispatch here
+            // based on the navigation received from the parent context.
+            let dispatcher = null;
 
-            runtime
-                .start()
+            return integration.start()
                 .then(() => {
-                    return panel.attach(rootNode);
+                    // // This installs all widgets from the config file.
+                    const widgets = pluginConfigDB.getItem('install.widgets', []);
+                    widgets.forEach((widgetDef) => {
+                        integration.runtime
+                            .service('widget')
+                            .getWidgetManager()
+                            .addWidget(widgetDef);
+                    });
                 })
                 .then(() => {
-                    panel.start();
+                    // Add routes to panels here
+                    dispatcher = new Dispatcher({
+                        runtime: integration.runtime,
+                        node: rootNode,
+                        views: pluginConfigDB.getItem('views', [])
+                    });
+                    return dispatcher.start();
+                })
+                .then((dispatcher) => {
+                    integration.onNavigate(({ path, params }) => {
+                        // TODO: ever
+                        let view;
+                        if (params.view) {
+                            view = params.view;
+                        } else {
+                            view = path[0];
+                        }
+                        dispatcher.dispatch({ view, path, params })
+                            .catch((ex) => {
+                                // TODO: this should trigger an error display
+                                console.error('Dispatch Error', ex.message);
+                            });
+                    });
+                    integration.started();
+                    // TODO: more channel listeners.
                 });
         }).catch((err) => {
-            console.error('ERROR', err);
+            console.error('ERROR2', err);
         });
     });
-})();
+});