Replace Canny with Nolt (closes #775)

app/components/nolt-feedback-script.js

@@ -0,0 +1,13 @@
+/* eslint no-undef: "off" */
+import Component from '@ember/component';
+
+export default Component.extend({
+  didInsertElement() {
+    this._super(...arguments);
+
+    nolt('init', {
+      selector: '.nolt-button',
+      url: 'https://kitsu.nolt.io/',
+    });
+  },
+});

app/gql/queries/noltToken.gql

@@ -0,0 +1,5 @@
+query noltToken {
+  session {
+    noltToken
+  }
+}

app/initializers/browser-scripts.js

@@ -13,15 +13,14 @@ function adwords() {
 }
 
 /**
- * Inject Canny's SDK script into the `head` on initialization.
+ * Inject Nolt's SDK script into the `head` on initialization.
  */
-function canny() {
-  const c = function() {
-    c.q.push(arguments);
+function nolt() {
+  window.noltQueue = window.noltQueue || [];
+  window.nolt = function() {
+    noltQueue.push(arguments); /* eslint no-undef: "off" */
   };
-  c.q = [];
-  window.Canny = c;
-  injectScript('https://canny.io/sdk.js').catch(() => {});
+  injectScript('https://cdn.nolt.io/widgets.js').catch(() => {});
 }
 
 /**
@@ -61,7 +60,7 @@ export function initialize() {
 
   // Inject scripts
   adwords();
-  canny();
+  nolt();
   onesignal();
 }
 

app/router.js

@@ -116,19 +116,6 @@ RouterInstance.map(function() {
     this.route('account');
   });
 
-  this.route('feedback', function() {
-    this.route('bugs');
-    this.route('bugs-anything', { path: '/bugs/*path' });
-    this.route('feature-requests');
-    this.route('feature-requests-anything', { path: '/feature-requests/*path' });
-    this.route('database-requests');
-    this.route('database-requests-anything', { path: '/database-requests/*path' });
-    this.route('mobile-bugs');
-    this.route('mobile-bugs-anything', { path: '/mobile-bugs/*path' });
-    this.route('mobile-features');
-    this.route('mobile-features-anything', { path: '/mobile-features/*path' });
-  });
-
   this.route('admin', function() {
     this.route('reports', function() {
       this.route('index', { path: '/open' });

app/routes/application.js

@@ -9,6 +9,7 @@ import preferredLocale from 'preferred-locale';
 import { LANGUAGE_CODES } from 'client/utils/languages';
 import momentLocale from 'client/utils/languages-moment';
 import config from 'client/config/environment';
+import noltTokenQuery from 'client/gql/queries/noltToken';
 
 export default Route.extend(ApplicationRouteMixin, {
   features: service(),
@@ -18,6 +19,7 @@ export default Route.extend(ApplicationRouteMixin, {
   metrics: service(),
   moment: service(),
   raven: service(),
+  apollo: service(),
   cache: storageFor('last-used'),
   local: storageFor('local-cache'),
 
@@ -150,6 +152,9 @@ export default Route.extend(ApplicationRouteMixin, {
       this._loadTheme(user);
       get(this, 'moment').changeTimeZone(get(user, 'timeZone') || moment.tz.guess());
 
+      // nolt
+      this._setupNolt();
+
       // notifications
       this._registerNotifications();
 
@@ -172,6 +177,15 @@ export default Route.extend(ApplicationRouteMixin, {
     });
   },
 
+  _setupNolt() {
+    get(this, 'apollo').query({ query: noltTokenQuery }, 'session').then(({ noltToken }) => {
+      // eslint-disable-next-line no-undef
+      nolt('identify', {
+        jwt: noltToken,
+      });
+    }).catch(() => {});
+  },
+
   _registerNotifications() {
     if (get(this, 'session.account.feedCompleted')) {
       window.OneSignal.push(() => {

app/services/ajax.js

@@ -13,14 +13,13 @@ export default AjaxService.extend({
     set(this, 'host', config.kitsu.APIHost);
   },
 
-  headers: computed('session.isAuthenticated', function() {
+  headers: computed('session.token', function() {
     const headers = {
       accept: 'application/vnd.api+json'
     };
-    const isAuthenticated = get(this, 'session.isAuthenticated');
-    if (isAuthenticated) {
-      const { access_token: accessToken } = get(this, 'session.data.authenticated');
-      headers.Authorization = `Bearer ${accessToken}`;
+    const token = get(this, 'session.token');
+    if (token) {
+      headers.Authorization = `Bearer ${token}`;
     }
     return headers;
   }).readOnly()

app/services/apollo.js

@@ -0,0 +1,22 @@
+import { computed, get } from '@ember/object';
+import { inject as service } from '@ember/service';
+import ApolloService from 'ember-apollo-client/services/apollo';
+import { setContext } from 'apollo-link-context';
+
+export default ApolloService.extend({
+  session: service(),
+
+  link: computed('session.token', function() {
+    const httpLink = this._super(...arguments);
+
+    const token = get(this, 'session.token');
+
+    const authLink = setContext(() => {
+      if (!token) return {};
+
+      return { headers: { Authorization: `Bearer ${token}` } };
+    });
+
+    return authLink.concat(httpLink);
+  })
+});

app/services/session.js

@@ -35,6 +35,15 @@ export default Session.extend({
     return sessionId === userId;
   },
 
+  /**
+   * Get the access token.  Returns undefined when not authenticated.
+   */
+  token: computed('isAuthenticated', 'data.authenticated', function() {
+    if (!this.isAuthenticated) return;
+
+    return get(this, 'data.authenticated.access_token');
+  }),
+
   /**
    * Get the account information for the sessioned user
    */

app/templates/components/application/site-header.hbs

@@ -1,3 +1,5 @@
+{{nolt-feedback-script}}
+
 <nav id="kitsu-navbar" class="navbar navbar-fixed-top navbar-light primary-nav" role="navigation">
   <div class="container">
     <div class="row">
@@ -88,17 +90,10 @@
             {{link-to (t "header.groups") "groups.index" class="nav-link"}}
           </li>
           {{! Feedback}}
-          <li class="nav-item dropdown">
-            <a class="nav-link dropdown-toggle {{if isFeedbackRoute "active"}}" href="#" data-toggle="dropdown" data-href-to-ignore=true>
+          <li class="nav-item nolt-button">
+            <a class="nav-link" href="#"  data-href-to-ignore=true>
               {{t "header.feedback"}}
             </a>
-            <div class="dropdown-menu">
-              <a class="dropdown-item" href={{href-to "feedback.bugs"}}>{{t "feedback.bugs"}}</a>
-              <a class="dropdown-item" href={{href-to "feedback.feature-requests"}}>{{t "feedback.features"}}</a>
-              <a class="dropdown-item" href="https://kitsu-stuff.com" target="_blank" rel="noopener">{{t "feedback.database"}}</a>
-              <a class="dropdown-item" href={{href-to "feedback.mobile-bugs"}}>{{t "feedback.mobile-bugs"}}</a>
-              <a class="dropdown-item" href={{href-to "feedback.mobile-features"}}>{{t "feedback.mobile-features"}}</a>
-            </div>
           </li>
         </ul>
       </div>