- Added disabledMessage and disabledTitle property to services.js

- Alerts are cleared before every new selection
- disabledMessage triggers alert and TryIt disabled state
- A few bugfixes, including issue running grunt after running grunt build-prod

Author: ianmstew

Gruntfile.js

@@ -29,6 +29,10 @@ module.exports = function (grunt) {
         '<%- path.dist %>',
         '<%- path.temp %>',
         '<%- path.bower %>'
+      ],
+
+      dist: [
+        '<%- path.dist %>'
       ]
     },
 
@@ -113,8 +117,8 @@ module.exports = function (grunt) {
           'cd <%- path.app %>',
           'rsync . $cwd/<%- path.dist %> ' +
               '--update --delete --verbose --recursive ' +
-              '--exclude ./less --exclude ./style' 
-        ].join('&&') 
+              '--exclude less --exclude style' 
+        ].join('&&')
       },
 
       sourcemap_links: {
@@ -209,6 +213,7 @@ module.exports = function (grunt) {
   });
 
   grunt.registerTask('build-dev', [
+    'clean:dist',
     'bower',
     'shell:sync_dev',
     'less',
@@ -217,7 +222,7 @@ module.exports = function (grunt) {
 
   grunt.registerTask('build-prod', [
     'set-prod',
-    'clean',
+    'clean:all',
     'bower',
     'copy',
     'less',

app/app-js/app-start.js

@@ -7,9 +7,9 @@ define(function (require) {
   var Marionette = require('marionette'),
       app = require('app'),
 
-      api = require('entities/api/api.module'),
-      service = require('entities/service/service.module'),
-      alert = require('entities/alert/alert.module'),
+      apiEntity = require('entities/api/api.module'),
+      serviceEntity = require('entities/service/service.module'),
+      alertEntity = require('entities/alert/alert.module'),
 
       header = require('modules/header/header.module'),
       menu = require('modules/menu/menu.module'),
@@ -26,9 +26,9 @@ define(function (require) {
   };
 
   // start entity modules
-  api.start();
-  service.start();
-  alert.start();
+  apiEntity.start();
+  serviceEntity.start();
+  alertEntity.start();
 
   // start rendering modules
   header.start();

app/app-js/entities/alert/alert.controller.js

@@ -50,11 +50,14 @@ define(function (require) {
     },
 
     removeAlert: function (alert) {
-      this.alerts.remove(alert);
-      this.alertRegistry[alert.hash()] = false;
+      var alert = this.alertRegistry[alert.hash()];
+      if (alert) {
+        this.alerts.remove(alert);
+        delete this.alertRegistry[alert.hash()];
+      }
     },
 
-    clearAlerts: function (alert) {
+    clearAlerts: function () {
       this.alertRegistry = {};
       this.alerts.reset();
     },

app/app-js/entities/alert/alert.model.js

@@ -7,7 +7,9 @@ define(function (require) {
   	defaults: {
       title: 'Alert Title',
   		message: 'Alert message',
-  		state: 'danger'  // {danger|warn|info|success}
+  		state: 'danger',  // {danger|warn|info|success}
+      uniqueGroup: null,
+      uniqueValue: null
   	},
 
     hash: function () {

app/app-js/entities/api/call/genericOutput.model.js

@@ -13,8 +13,13 @@ define(function (require) {
     },
 
     fetch: function (options) {
+      var self = this;
+
       options = options || {};
       options.url = this.urlRoot + '/' + this.get('serviceKey') + '/' + this.get('endpointKey');
+      options.error = function () {
+        self.set('output', null);
+      };
 
       return GenericOutputModel.__super__.fetch.call(this, options);
     },

app/app-js/entities/api/call/genericUri.model.js

@@ -13,8 +13,13 @@ define(function (require) {
     },
 
     fetch: function (options) {
+      var self = this;
+
       options = options || {};
       options.url = this.urlRoot + '/' + this.get('serviceKey') + '/' + this.get('endpointKey');
+      options.error = function () {
+        self.set('uri', null);
+      };
 
       return GenericUriModel.__super__.fetch.call(this, options);
     }

app/app-js/entities/api/call/sampleUri.model.js

@@ -14,23 +14,14 @@ define(function (require) {
     },
 
     fetch: function (options) {
-      var serviceName = appChannel.reqres.request('lookup:serviceName', this.get('serviceKey'));
+      var self = this;
+          serviceName = appChannel.reqres.request('lookup:serviceName', this.get('serviceKey'));
 
       options = options || {};
-      
-      _.extend(options, {
-        url: this.urlRoot + '/' + this.get('serviceKey') + '/' + this.get('endpointKey'),
-
-        error: function () {
-          var alert = {
-            title: 'You haven\'t authenticated with the ' + serviceName + ' API.',
-            message: 'Connect with a data source on the left to begin',
-            state: 'danger'
-          };
-
-          appChannel.commands.execute('add:alert', alert);
-        }
-      });
+      options.url = this.urlRoot + '/' + this.get('serviceKey') + '/' + this.get('endpointKey');
+      options.error = function () {
+        self.set('uri', null);
+      };
 
       return SampleUriModel.__super__.fetch.call(this, options);
     }

app/app-js/entities/api/call/tryUri.model.js

@@ -10,6 +10,17 @@ define(function (require) {
       output: null
     },
 
+    fetch: function (options) {
+      var self = this;
+      
+      options = options || {};
+      options.error = function () {
+        self.set('output', null);
+      };
+
+      TryUriModel.__super__.fetch.apply(this, arguments);
+    },
+
     parse: function (response) {
       return {
         output: JSON.stringify(response, null, 2)

app/app-js/entities/service/endpoint/endpoint.model.js

@@ -6,7 +6,8 @@ define(function (require) {
 
     defaults: {
       endpointName: null,
-      endpointKey: null
+      endpointKey: null,
+      disabledMessage: null
     }
   });
 

app/app-js/entities/service/service.controller.js

@@ -13,7 +13,8 @@ define(function (require) {
       reqres: {
         'get:serviceCollection': 'getServiceCollection',
         'lookup:serviceName': 'lookupServiceName',
-        'lookup:endpointName': 'lookupEndpointName'
+        'lookup:endpointName': 'lookupEndpointName',
+        'is:endpointDisabled': 'isEndpointDisabled'
       },
 
       commands: {
@@ -56,6 +57,10 @@ define(function (require) {
 
     lookupEndpointName: function (serviceKey, endpointKey) {
       return services.lookupEndpointName(serviceKey, endpointKey);
+    },
+
+    isEndpointDisabled: function (serviceKey, endpointKey) {
+      return services.isEndpointDisabled(serviceKey, endpointKey);
     }
   });
 

app/app-js/entities/service/services.js

@@ -9,10 +9,18 @@ define(function (require) {
       'endpointKey': 'userprofile'
     }, {
       'endpointName': 'User\'s friends list',
-      'endpointKey': 'ownerfriends'
+      'endpointKey': 'ownerfriends',
+      'disabledTitle': 'Our Apologies!',
+      'disabledMessage':
+          'Live demonstration of some Facebook features is currently disabled, ' +
+          'pending approval from Facebook.'
     }, {
       'endpointName': 'User\'s news feed',
-      'endpointKey': 'ownernews'
+      'endpointKey': 'ownernews',
+      'disabledTitle': 'Our Apologies!',
+      'disabledMessage':
+          'Live demonstration of some Facebook features is currently disabled, ' +
+          'pending approval from Facebook.'
     }, {
       'endpointName': 'User\'s status feed',
       'endpointKey': 'ownerstatus'
@@ -133,6 +141,12 @@ define(function (require) {
     return endpoint.length && endpoint[0].endpointName;
   };
 
+  services.isEndpointDisabled = function (serviceKey, endpointKey) {
+    var service = _.where(this, { serviceKey: serviceKey }),
+        endpoint = service.length && _.where(service[0].endpoints, { endpointKey: endpointKey });
+    return endpoint.length && endpoint[0].disabledMessage;
+  };
+
   services.clone = function () {
     var _services = _.clone(this);
 

app/app-js/modules/alert/alert.view.html

@@ -1,2 +1,2 @@
 <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
-{{#title}}<p><strong>{{title}}</strong>&nbsp;{{message}}</p>{{/title}}
+{{#title}}<p><strong>{{title}}&nbsp;</strong>{{/title}}{{message}}</p>

app/app-js/modules/alert/alert.view.js

@@ -6,7 +6,7 @@ define(function (require) {
 
   AlertView = Marionette.ItemView.extend({
     template: template,
-    className: 'alert alert-danger fade',
+    className: 'alert fade',
 
     events: {
       'click .close': 'closeClicked'
@@ -16,21 +16,16 @@ define(function (require) {
       moduleChannel.vent.trigger('close:alert', this.model);
     },
 
+    onRender: function () {
+      this.$el.addClass('alert-' + this.model.get('state'));
+    },
+
     onShow: function () {
       var self = this;
 
       _.delay(function () {
         self.$el.addClass('in');
       }, 100);
-    },
-
-    remove: function () {
-      var self = this,
-          args = arguments;
-
-      _.delay(function () {
-        AlertView.__super__.remove.apply(self, args);
-      }, 500);
     }
   });
 

app/app-js/modules/menu/menu.controller.js

@@ -24,6 +24,9 @@ define(function (require) {
     },
 
     showMenu: function (serviceKey, endpointKey) {
+      // Clear all alerts before each selection
+      appChannel.commands.execute('clear:alerts');
+
       if (!this.menuView || this.menuView.isClosed) {        
         this.menuView = new MenuView({
           collection: this.services
@@ -37,7 +40,7 @@ define(function (require) {
       }
 
       if (endpointKey) {
-        moduleChannel.vent.trigger('select:endpoint', serviceKey, endpointKey);
+        moduleChannel.vent.trigger('select:endpoint', serviceKey, endpointKey);  
       }
     }
   });

app/app-js/modules/menu/menuItem/menuItem.view.js

@@ -1,6 +1,7 @@
 define(function (require) {
   var Marionette = require('marionette'),
       template = require('hgn!modules/menu/menuItem/menuItem.view'),
+      appChannel = require('app.channel'),
       MenuItemView;
 
   MenuItemView = Marionette.ItemView.extend({
@@ -23,7 +24,20 @@ define(function (require) {
     },
 
     onSelect: function () {
+      var disabledMessage;
       this.ui.link.addClass('types-selected');
+
+      if (disabledMessage = this.model.get('disabledMessage')) {
+        var alert = {
+          title: this.model.get('disabledTitle'),
+          message: disabledMessage,
+          state: 'info',
+          uniqueGroup: 'endpoint',
+          uniqueValue: this.model.get('endpointKey')
+        };
+
+        appChannel.commands.execute('add:alert', alert);
+      }
     }
   });
 

app/app-js/modules/tryUri/tryUri.controller.js

@@ -31,6 +31,8 @@ define(function (require) {
     authorizedServices: null,
 
     showTryUri: function (serviceKey, endpointKey) {
+      var endpointDisabled;
+
       this.currentService = serviceKey;
       appChannel.vent.trigger('show:menu', serviceKey, endpointKey);
 
@@ -48,6 +50,9 @@ define(function (require) {
         });
       }
 
+      endpointDisabled = appChannel.reqres.request('is:endpointDisabled', serviceKey, endpointKey);
+      this.tryUriView.triggerMethod('endpointDisabled', endpointDisabled);
+
       this.api.fetchSampleUri();
       this.api.fetchGenericUri();
       this.api.fetchGenericOutput();

app/app-js/modules/tryUri/tryUri.view.html

@@ -15,6 +15,6 @@ <h3>URI Format: <code class="js-generic-uri tryuri-generic-uri">{{genericUri.uri
 </div>
 
 <h3>Sample Output:</h3>
-<pre>
-  <code class="js-output tryuri-output">{{tryUri.output}}{{^tryUri.output}}{{genericOutput.output}}{{/tryUri.output}}</code>
+<pre class="tryuri-output">
+  <code class="js-output">{{tryUri.output}}{{^tryUri.output}}{{genericOutput.output}}{{/tryUri.output}}</code>
 </pre>