namespace-browser: Adding "Delete" functionality for mountpoint and

also changing the reload action not to reload the whole page and just clear cache and refresh current view. Closes #63 Change-Id: I2c93212808ea248819df6206bcbc2492f265007a
vanadium-archive · May 15, 2015 · b922a7f · b922a7f
1 parent 79ee97b
commit b922a7f
Show file tree

Hide file tree

Showing 14 changed files with 1,156 additions and 819 deletions.
diff --git a/src/app.js b/src/app.js
@@ -9,12 +9,13 @@ var addDelegatedEvents = require('./lib/mercury/add-delegated-events');
 var onboarding = require('./onboarding');
 var router = require('./router');
 var registerItemPlugins = require('./item-plugins/register-plugins');
-var debug = require('./components/debug/index');
-var browse = require('./components/browse/index');
-var error = require('./components/error/index');
-var help = require('./components/help/index');
-var viewport = require('./components/viewport/index');
-var userAccount = require('./components/user-account/index');
+var debug = require('./components/debug');
+var browse = require('./components/browse');
+var error = require('./components/error');
+var help = require('./components/help');
+var viewport = require('./components/viewport');
+var views = require('./components/browse/views');
+var userAccount = require('./components/user-account');
 var namespaceService = require('./services/namespace/service');
 var sampleWorld = require('./services/sample-world');
 var stateService = require('./services/state/service');
@@ -120,7 +121,13 @@ events.navigation = mercury.input([
    * }
    * is expected as data for the event
    */
-  'navigate'
+  'navigate',
+
+  /*
+   * Event indicating a request to reload the current namespace
+   * The current namespace will be passed as data into the handlers.
+   */
+  'reload'
 ]);
 events.browse = browseComponent.events;
 events.help = helpComponent.events;
@@ -161,11 +168,38 @@ function wireEvents() {
   events.browse.error(onError);
   events.browse.toast(onToast);
 
+  events.navigation.reload(onReload);
+
   // Hook up external help events.
   events.help.navigate = events.navigation.navigate;
   events.help.error(onError);
 }
 
+/*
+ * Reload the views for the current namespace
+ */
+function onReload() {
+  var namespace = state.browse.namespace();
+  log.debug('reloading', namespace);
+
+  // clear the service cache
+  namespaceService.clearCache(namespace);
+
+  // tell views to clear their caches
+  views.clearCache(state.browse.views, namespace);
+
+  // navigate to the namespace again
+  // TODO(aghassemi) Ideally we only reset the selected item if the old one
+  // no longer is in the view, but that's a bit tricky and depends on
+  // https://github.com/vanadium/browser/issues/81
+  state.browse.selectedItemName.set(namespace);
+  events.navigation.navigate({
+    path: browseRoute.createUrl(state.browse(), {
+      namespace: namespace
+    })
+  });
+}
+
 /*
  * Given an error, navigate to the error page and display that error.
  */
@@ -291,5 +325,4 @@ function initVanadium() {
  */
 function onVanadiumCrash(crashErr) {
   events.browse.error(crashErr);
-}
-
+}
diff --git a/src/components/browse/index.css b/src/components/browse/index.css
@@ -137,6 +137,7 @@
 
 .namespace-box core-tooltip.icontooltip {
   margin-top: var(--size-space-xxsmall);
+  align-self: center;
 }
 
 .namespace-box core-tooltip.nstooltip {

diff --git a/src/components/browse/index.js b/src/components/browse/index.js
@@ -351,8 +351,10 @@ function render(browseState, browseEvents, navEvents) {
       }, [
         h('div.resize-handle', {
           'ev-mousedown': function(e) {
-            browseEvents.slideSidePanel({ rawEvent: e,
-                collapsed: browseState.sidePanelCollapsed });
+            browseEvents.slideSidePanel({
+              rawEvent: e,
+              collapsed: browseState.sidePanelCollapsed
+            });
           }
         }),
         sideView
@@ -433,9 +435,7 @@ function renderNamespaceBox(browseState, browseEvents, navEvents) {
             'icon': 'refresh',
             'label': 'Reload'
           },
-          'ev-click': function() {
-            location.reload();
-          }
+          'ev-click': mercury.send(navEvents.reload)
         })
       ),
       h('core-tooltip.nstooltip', {
@@ -621,17 +621,17 @@ function renderBreadcrumbs(browseState, navEvents) {
     });
     breadCrumbs.push(h('li.breadcrumb-item.relative-name' +
       (parentParts.length ? '.breadcrumb-item-prefix' : ''), [
-      //TODO(aghassemi) refactor link generation code
-      h('a', {
-        'href': rootUrl,
-        'ev-click': mercury.event(navEvents.navigate, {
-          path: rootUrl
-        })
-      }, '<Home>')
-    ]));
+        //TODO(aghassemi) refactor link generation code
+        h('a', {
+          'href': rootUrl,
+          'ev-click': mercury.event(navEvents.navigate, {
+            path: rootUrl
+          })
+        }, '<Home>')
+      ]));
   }
 
-  parentParts.pop();  // remove last part (current view root)
+  parentParts.pop(); // remove last part (current view root)
 
   for (var i = 0; i < namespaceParts.length; i++) {
     var namePart = namespaceParts[i].trim();
@@ -707,19 +707,19 @@ function wireUpEvents(state, events) {
     }
 
     function slideEnd(e) { // release
-      window.removeEventListener('mouseup', slideEnd);
-      window.removeEventListener('mousemove', slideMove);
-      drawer.querySelector('::shadow core-selector').
-      classList.add('transition');
-      var drawerWidth = drawer.getAttribute('drawerWidth');
-
-      // async call to persist the drawer width
-      stateService.saveSidePanelWidth(drawerWidth);
-
-      state.sidePanelWidth.set(drawerWidth);
-      state.sidePanelCollapsed.set(false);
-      fireResizeEvent(null);
-    } // end slideEnd
+        window.removeEventListener('mouseup', slideEnd);
+        window.removeEventListener('mousemove', slideMove);
+        drawer.querySelector('::shadow core-selector').
+        classList.add('transition');
+        var drawerWidth = drawer.getAttribute('drawerWidth');
+
+        // async call to persist the drawer width
+        stateService.saveSidePanelWidth(drawerWidth);
+
+        state.sidePanelWidth.set(drawerWidth);
+        state.sidePanelCollapsed.set(false);
+        fireResizeEvent(null);
+      } // end slideEnd
   }); // end events.slideSidePanel
 
   function fireResizeEvent(e) { // resize on end animation
@@ -733,4 +733,4 @@ function wireUpEvents(state, events) {
     }
   }
 
-}
+}
diff --git a/src/components/browse/item-details/display-item-details.js b/src/components/browse/item-details/display-item-details.js
@@ -29,11 +29,6 @@ var lastRequestedName;
 function displayItemDetails(state, events, data) {
   var name = data.name;
 
-  // Return if we are already on that item.
-  if (isCurrentlySelected()) {
-    return;
-  }
-
   lastRequestedName = name;
 
   state.put('plugins', mercury.array([]));

diff --git a/src/components/browse/item-details/index.js b/src/components/browse/item-details/index.js
@@ -102,8 +102,6 @@ function create() {
 
   events.serverDetails = serverDetailsComponent.events;
   events.mountPointDetails = mountPointDetailsComponent.events;
-  events.serverDetails.toast = events.toast;
-  events.mountPointDetails.toast = events.toast;
   wireUpEvents(state, events);
 
   return {
@@ -347,19 +345,18 @@ function renderTabTitle(state, events, tabKey, icon, title) {
       'tabkey': tabKey
     },
     'ev-click': new polymerEvent(function(data) {
-        events.tabSelected({
-          tabKey: tabKey
-        });
-      })
-    }, [
-      h('core-icon.tab-icon', {
-        attributes: {
-          'icon': icon,
-          'alt': '' // because we have the title beside it
-        }
-      }), title
-    ]
-  );
+      events.tabSelected({
+        tabKey: tabKey
+      });
+    })
+  }, [
+    h('core-icon.tab-icon', {
+      attributes: {
+        'icon': icon,
+        'alt': '' // because we have the title beside it
+      }
+    }), title
+  ]);
 }
 
 /*
@@ -386,9 +383,15 @@ function getSelectedTabKey(state) {
 
 // Wire up events that we know how to handle
 function wireUpEvents(state, events) {
+  events.serverDetails.toast = function(data) {
+    events.toast(data);
+  };
+  events.mountPointDetails.toast = function(data) {
+    events.toast(data);
+  };
   events.bookmark(bookmark.bind(null, state, events));
   events.displayItemDetails(displayItemDetails.bind(null, state, events));
   events.tabSelected(function(data) {
     state.selectedTabKey.set(data.tabKey);
   });
-}
+}
diff --git a/src/components/browse/item-details/mount-point-details/display-mountpoint-details.js b/src/components/browse/item-details/mount-point-details/display-mountpoint-details.js
@@ -22,11 +22,6 @@ function displayMountPointDetails(state, events, data) {
   var itemObs = data.itemObs;
   var name = itemObs().objectName;
 
-  // Return if we are already on that item.
-  if (isCurrentlySelected()) {
-    return;
-  }
-
   lastRequestedName = name;
 
   state.put('item', itemObs);