Merge pull request #3216 from...

Merge pull request #3216 from hypothesis/sheetaluk/298-add-product-version-and-environment-info-to-the-tool

Show product version and environment info.

h/static/scripts/annotator/plugin/pdf.coffee

@@ -55,8 +55,9 @@ module.exports = class PDF extends Annotator.Plugin
       # as per http://tools.ietf.org/html/rfc3406#section-3.0
       urn = "urn:x-pdf:" + PDFViewerApplication.documentFingerprint
       link = [{href: urn}, {href: PDFViewerApplication.url}]
+      documentFingerprint = PDFViewerApplication.documentFingerprint
 
-      return {title, link}
+      return {title, link, documentFingerprint}
 
   # This method (re-)anchors annotations when pages are rendered and destroyed.
   _update: ->

h/static/scripts/app-controller.js

@@ -45,6 +45,7 @@ module.exports = function AppController(
   // App dialogs
   $scope.accountDialog = {visible: false};
   $scope.shareDialog = {visible: false};
+  $scope.aboutThisVersionDialog = {visible: false};
 
   // Check to see if we're in the sidebar, or on a standalone page such as
   // the stream page or an individual annotation page.

h/static/scripts/app.js

@@ -152,9 +152,11 @@ module.exports = angular.module('h', [
   .controller('StreamController', require('./stream-controller'))
   .controller('WidgetController', require('./widget-controller'))
 
+  .directive('aboutThisVersionDialog', require('./directive/about-this-version-dialog'))
   .directive('annotation', require('./directive/annotation').directive)
   .directive('deepCount', require('./directive/deep-count'))
   .directive('excerpt', require('./directive/excerpt').directive)
+  .directive('feedbackLink', require('./directive/feedback-link'))
   .directive('formInput', require('./directive/form-input'))
   .directive('formValidate', require('./directive/form-validate'))
   .directive('groupList', require('./directive/group-list').directive)

h/static/scripts/cross-frame.coffee

@@ -46,8 +46,11 @@ module.exports = class CrossFrame
         if err
           channel.destroy()
         else
+          documentFingerprint = null
+          if info.metadata and info.metadata.documentFingerprint
+            documentFingerprint = info.metadata.documentFingerprint
           $rootScope.$apply =>
-            @frames.push({channel: channel, uri: info.uri})
+            @frames.push({channel: channel, uri: info.uri, documentFingerprint: documentFingerprint})
 
     this.connect = ->
       discovery = createDiscovery()

h/static/scripts/directive/about-this-version-dialog.js

+'use strict';
+
+/**
+ * @ngdoc directive
+ * @name aboutThisVersionDialog
+ * @description Displays product version and environment info
+ */
+// @ngInject
+module.exports = function () {
+  return {
+    bindToController: true,
+    controllerAs: 'vm',
+    // @ngInject
+    controller: function ($scope, $window, settings, crossframe) {
+      this.userAgent = $window.navigator.userAgent;
+      this.version = settings.release;
+      this.dateTime = new Date();
+
+      $scope.$watchCollection(
+        function () {
+          return crossframe.frames;
+        },
+        function (frames) {
+          if (frames.length === 0) {
+            return;
+          }
+          this.url = frames[0].uri;
+          this.documentFingerprint = frames[0].documentFingerprint;
+        }.bind(this)
+      );
+    },
+    restrict: 'E',
+    template: require('../../../templates/client/about_this_version_dialog.html'),
+    scope: {
+      auth: '<',
+      onClose: '&',
+    }
+  };
+};

h/static/scripts/directive/feedback-link.js

+'use strict';
+
+module.exports = function () {
+  return {
+    bindToController: true,
+    controllerAs: 'vm',
+    restrict: 'E',
+    template: require('../../../templates/client/feedback_link.html'),
+    controller: function () {},
+    scope: {
+      version: '<',
+      userAgent: '<',
+      url: '<',
+      documentFingerprint: '<',
+      auth: '<',
+      dateTime: '<',
+    },
+  };
+};

h/static/scripts/directive/signin-control.js

@@ -14,6 +14,10 @@ module.exports = function () {
        * An object representing the current authentication status.
        */
       auth: '<',
+      /**
+       * Called when the user clicks on the "About this version" text.
+       */
+      onShowAboutVersionDialog: '&',
       /**
        * Called when the user clicks on the "Sign in" text.
        */

h/static/scripts/directive/top-bar.js

@@ -6,6 +6,7 @@ module.exports = function () {
     scope: {
       auth: '<',
       isSidebar: '<',
+      onShowAboutVersionDialog: '&',
       onLogin: '&',
       onLogout: '&',
       searchController: '<',

h/static/scripts/test/cross-frame-test.coffee

@@ -72,5 +72,5 @@ describe 'CrossFrame', ->
       fakeBridge.onConnect.yields(channel)
       crossframe.connect()
       assert.deepEqual(crossframe.frames, [
-        {channel: channel, uri: uri}
+        {channel: channel, uri: uri, documentFingerprint: null}
       ])

h/static/styles/about-this-version-dialog.scss

+.about-this-version__key {
+  width: 100px;
+  float: left;
+  color: $gray-light;
+}
+
+.about-this-version__val {
+  margin-left: 100px;
+  word-wrap: break-word;
+}
+
+.about-this-version-feedback {
+  margin-top: 10px;
+}
+
+.about-this-version-feedback__link {
+  text-decoration: underline;
+  color: $dg-4;
+
+  &:hover {
+    color: $dg-1;
+  }
+}

h/static/styles/app.scss

@@ -10,11 +10,13 @@ $base-line-height: 20px;
 
 // Components
 // ----------
+@import './about-this-version-dialog';
 @import './annotation';
 @import './api-token-input';
 @import './dropdown-menu-btn';
 @import './excerpt';
 @import './group-list';
+@import './loggedout-message';
 @import './markdown';
 @import './primary-action-btn';
 @import './publish-annotation-btn';
@@ -27,7 +29,6 @@ $base-line-height: 20px;
 @import './tags-input';
 @import './thread';
 @import './top-bar';
-@import './loggedout-message';
 
 // Top-level styles
 // ----------------

h/static/styles/common.scss

@@ -177,6 +177,7 @@ html {
     line-height: 1;
     white-space: nowrap;
     font-size: $body2-font-size;
+    cursor: pointer;
 
     &:hover {
       color: $brand-color;

h/templates/client/about_this_version_dialog.html

+<div class="sheet">
+  <i class="close h-icon-close"
+    role="button"
+    title="Close"
+    ng-click="vm.onClose()"></i>
+  <div class="about-this-version">
+    <ul class="nav nav-tabs">
+      <li class="active"><a href="">About this version</a></li>
+    </ul>
+    <dl class="tab-content">
+      <dt class="about-this-version__key">Version: </dt>
+      <dd class="about-this-version__val">{{ vm.version }}</dd>
+      <dt class="about-this-version__key">User agent: </dt>
+      <dd class="about-this-version__val">{{ vm.userAgent }}</dd>
+      <dt class="about-this-version__key">URL: </dt>
+      <dd class="about-this-version__val">{{ vm.url }}</dd>
+      <div ng-if="vm.documentFingerprint">
+        <dt class="about-this-version__key">PDF fingerprint: </dt>
+        <dd class="about-this-version__val">{{ vm.documentFingerprint }}</dd>
+      </div>
+      <div ng-if="vm.auth.userid">
+        <dt class="about-this-version__key">Username: </dt>
+        <dd class="about-this-version__val">{{ vm.auth.username }}</dd>
+      </div>
+      <dt class="about-this-version__key">Date: </dt>
+      <dd class="about-this-version__val">{{ vm.dateTime | date:'dd MMM yyyy HH:mm:ss Z' }}</dd>
+      <feedback-link
+        version="vm.version"
+        user-agent="vm.userAgent"
+        url="vm.url"
+        document-fingerprint="vm.documentFingerprint"
+        auth="vm.auth"
+        date-time="vm.dateTime">
+      </feedback-link>
+    </div>
+  </div>
+</div>

h/templates/client/feedback_link.html

+<div class="about-this-version-feedback">
+  <a class="about-this-version-feedback__link" href="mailto:support@hypothes.is?subject=Hypothesis%20feedback&amp;body=Version:%20{{ vm.version }}%0D%0AUser%20Agent:%20{{vm.userAgent}}%0D%0AURL:%20{{ vm.url }}%0D%0APDF%20fingerprint:%20{{ vm.documentFingerprint ? vm.documentFingerprint : '-' }}%0D%0AUsername:%20{{ vm.auth.username ? vm.auth.username : '-' }}%0D%0ADate:%20{{ vm.dateTime | date:'dd MMM yyyy HH:mm:ss Z' }} ">
+    Send us feedback
+  </a>
+</div>

h/templates/client/signin_control.html

@@ -34,6 +34,9 @@
     <li class="dropdown-menu__row">
       <a class="dropdown-menu__link" href="mailto:support@hypothes.is">Feedback</a>
     </li>
+    <li class="dropdown-menu__row">
+      <a class="dropdown-menu__link" ng-click="vm.onShowAboutVersionDialog()">About this version</a>
+    </li>
     <li class="dropdown-menu__row" ng-if="vm.auth.status === 'signed-in'">
       <a class="dropdown-menu__link dropdown-menu__link--subtle"
          href="" ng-click="vm.onLogout()">Sign out</a>

h/templates/client/top_bar.html

@@ -14,6 +14,7 @@
     <signin-control
       auth="auth"
       new-style="false"
+      on-show-about-version-dialog="vm.onShowAboutVersionDialog()"
       on-login="onLogin()"
       on-logout="onLogout()">
     </signin-control>
@@ -47,6 +48,7 @@
     <signin-control
       auth="auth"
       new-style="true"
+      on-show-about-version-dialog="onShowAboutVersionDialog()"
       on-login="onLogin()"
       on-logout="onLogout()">
     </signin-control>