Merge pull request #986 from appknox/PD-130

Integrated knowledge base using doc360
appknox · Feb 3, 2022 · e242274 · e242274
2 parents aaaebc3 + 8ccfbd0
commit e242274
Show file tree

Hide file tree

Showing 5 changed files with 72 additions and 1 deletion.
diff --git a/app/components/home-page.js b/app/components/home-page.js
@@ -7,6 +7,7 @@ import { inject as service } from '@ember/service';
 import Component from '@ember/component';
 import { computed } from '@ember/object';
 import { getOwner } from '@ember/application';
+import { openKnowledgeBasePanel } from 'irene/utils/knowledge-base';
 import ENV from 'irene/config/environment';
 
 export default Component.extend({
@@ -22,6 +23,9 @@ export default Component.extend({
   isSecurityDashboard: false,
   showMarketplace: ENV.enableMarketplace,
   productVersion: ENV.productVersion,
+  showKnowledgeBase: computed(function () {
+    return this.integration.isDocument360Enabled();
+  }),
   enablePendo: computed(function () {
     return this.integration.isPendoEnabled();
   }),
@@ -130,5 +134,9 @@ export default Component.extend({
     openChatBox() {
       chat.openChatBox();
     },
+
+    onOpenKnowledgeBase() {
+      openKnowledgeBasePanel();
+    },
   },
 });
diff --git a/app/services/configuration.js b/app/services/configuration.js
@@ -37,6 +37,7 @@ export default class ConfigurationService extends Service {
     hotjar_key: '',
     pendo_key: '',
     rollbar_key: '',
+    document360_key: '',
   };
 
   serverData = {
@@ -71,6 +72,8 @@ export default class ConfigurationService extends Service {
       this.integrationData.hotjar_key ||= data.integrations.hotjar_key;
       this.integrationData.pendo_key ||= data.integrations.pendo_key;
       this.integrationData.rollbar_key ||= data.integrations.rollbar_key;
+      this.integrationData.document360_key ||=
+        data.integrations.document360_key;
 
       this.themeData.scheme ||= data.theme.scheme;
       this.themeData.primary_color ||= data.theme.primary_color;

diff --git a/app/services/integration.js b/app/services/integration.js
@@ -1,6 +1,7 @@
 import { inject as service } from '@ember/service';
 import Service from '@ember/service';
 import ENV from 'irene/config/environment';
+import { injectDocument360 } from 'irene/utils/knowledge-base';
 
 export default class IntegrationService extends Service {
   @service configuration;
@@ -22,26 +23,43 @@ export default class IntegrationService extends Service {
     await this.configuration.getIntegrationConfig();
     this.currentUser = user;
     await this.configureCrisp();
+    await this.configureDocument360();
   }
 
   // Crisp
   async configureCrisp() {
     if (!this.isCrispEnabled()) {
-      this.logger.debug('Crisp disabled');
+      this.logger.debug('Crisp Disabled');
       return;
     }
     await this.installCrisp();
   }
 
+  async configureDocument360() {
+    if (!this.isDocument360Enabled()) {
+      this.logger.debug('Document360 Disabled');
+      return;
+    }
+    await injectDocument360(this.document360Key);
+  }
+
   isCrispEnabled() {
     const token = this.crispToken;
     return !!token;
   }
 
+  isDocument360Enabled() {
+    return !!this.document360Key;
+  }
+
   get crispToken() {
     return this.configuration.integrationData.crisp_key;
   }
 
+  get document360Key() {
+    return this.configuration.integrationData.document360_key;
+  }
+
   // get the snippet code from https://app.crisp.chat/settings/website/
   // the window object is retrieved from this.window;
   // the document object is retrieved from this.document; this is done for fastboot

diff --git a/app/templates/components/home-page.emblem b/app/templates/components/home-page.emblem
@@ -101,6 +101,12 @@ if isLoaded
                 if isSecurityEnabled
                   a href="/security/projects" target="_blank" class="button security-link"
                     | Security Dashboard
+
+                if showKnowledgeBase
+                  a click="onOpenKnowledgeBase"
+                    = fa-icon "book" class="sidebar-icons"
+                    | Knowledge Base
+
                 a click="openChatBox"
                   = fa-icon "support" class="sidebar-icons"
                   = t "support"

diff --git a/app/utils/knowledge-base.js b/app/utils/knowledge-base.js
@@ -0,0 +1,36 @@
+// Inject document360 script that enable widget in the application
+const injectDocument360 = (apiKey) => {
+  (function (w, d, s, o, f, js, fjs) {
+    w['JS-Widget'] = o;
+    w[o] =
+      w[o] ||
+      function () {
+        (w[o].q = w[o].q || []).push(arguments);
+      };
+    (js = d.createElement(s)), (fjs = d.getElementsByTagName(s)[0]);
+    js.id = o;
+    js.src = f;
+    js.async = 1;
+    fjs.parentNode.insertBefore(js, fjs);
+  })(
+    window,
+    document,
+    'script',
+    'mw',
+    'https://cdn.document360.io/static/js/widget.js'
+  );
+  // eslint-disable-next-line
+  mw('init', {
+    apiKey,
+  });
+};
+
+// Open the document360 overlay panel by implicitly clicking the widget button
+const openKnowledgeBasePanel = () => {
+  document
+    .getElementById('document360-widget-iframe')
+    .contentDocument.getElementById('doc360-button')
+    .click();
+};
+
+export { injectDocument360, openKnowledgeBasePanel };