Use new feature client for dynamic feature toggling

Our first attempt at integrating feature flags with the frontend
required a rebuild and redeploy of the extension, which somewhat
defeats the purpose of feature flags. This commit wires up the new
feature client introduced in the preceding commits, allowing feature
toggles to update behaviour of already-deployed clients.

h/static/scripts/app-controller.coffee

@@ -5,19 +5,24 @@ module.exports = class AppController
   this.$inject = [
     '$controller', '$document', '$location', '$rootScope', '$route', '$scope',
     '$window',
-    'auth', 'drafts', 'identity',
+    'auth', 'drafts', 'features', 'identity',
     'permissions', 'streamer', 'annotationUI',
     'annotationMapper', 'threading'
   ]
   constructor: (
      $controller,   $document,   $location,   $rootScope,   $route,   $scope,
      $window,
-     auth,   drafts,   identity,
+     auth,   drafts,   features,   identity,
      permissions,   streamer,   annotationUI,
      annotationMapper, threading
   ) ->
     $controller('AnnotationUIController', {$scope})
 
+    # Allow all child scopes to look up feature flags as:
+    #
+    #     if ($scope.feature('foo')) { ... }
+    $scope.feature = features.flagEnabled
+
     $scope.auth = auth
     isFirstRun = $location.search().hasOwnProperty('firstrun')
 

h/static/scripts/app.coffee

@@ -78,6 +78,8 @@ setupStreamer = [
     $http.defaults.headers.common['X-Client-Id'] = clientId
 ]
 
+setupFeatures = ['features', (features) -> features.fetch()]
+
 module.exports = angular.module('h', [
   'angulartics'
   'angulartics.google.analytics'
@@ -128,6 +130,7 @@ module.exports = angular.module('h', [
 .service('bridge', require('./bridge'))
 .service('crossframe', require('./cross-frame'))
 .service('drafts', require('./drafts'))
+.service('features', require('./features'))
 .service('flash', require('./flash'))
 .service('formRespond', require('./form-respond'))
 .service('host', require('./host'))
@@ -155,6 +158,7 @@ module.exports = angular.module('h', [
 .config(configureRoutes)
 .config(configureTemplates)
 
+.run(setupFeatures)
 .run(setupCrossFrame)
 .run(setupStreamer)
 .run(setupHost)

h/static/scripts/test/app-controller-test.coffee

@@ -11,6 +11,7 @@ describe 'AppController', ->
   fakeAnnotationUI = null
   fakeAuth = null
   fakeDrafts = null
+  fakeFeatures = null
   fakeIdentity = null
   fakeLocation = null
   fakeParams = null
@@ -54,6 +55,11 @@ describe 'AppController', ->
       discard: sandbox.spy()
     }
 
+    fakeFeatures = {
+      fetch: sandbox.spy()
+      flagEnabled: sandbox.stub().returns(false)
+    }
+
     fakeIdentity = {
       watch: sandbox.spy()
       request: sandbox.spy()
@@ -97,6 +103,7 @@ describe 'AppController', ->
     $provide.value 'annotationUI', fakeAnnotationUI
     $provide.value 'auth', fakeAuth
     $provide.value 'drafts', fakeDrafts
+    $provide.value 'features', fakeFeatures
     $provide.value 'identity', fakeIdentity
     $provide.value '$location', fakeLocation
     $provide.value '$routeParams', fakeParams

h/templates/client/settings/notifications.html

-<div class="tab-pane" title="Notifications">
+<div ng-if="feature('notification')" class="tab-pane" title="Notifications">
   <form class="account-form form" name="notificationsForm">
     <p class="form-description">Receive notification emails when:</p>
     <div class="form-field form-checkbox-list">