Correctly include the usabilla script.

canonical · Dec 11, 2019 · 8f15fb1 · 8f15fb1
1 parent 108f4f6
commit 8f15fb1
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 70 deletions.
diff --git a/legacy/src/app/entry.js b/legacy/src/app/entry.js
@@ -384,7 +384,6 @@ const renderFooter = $window => {
   }
   ReactDOM.render(
     <Footer
-      debug={process.env.NODE_ENV === "development"}
       maasName={$window.CONFIG.maas_name}
       version={$window.CONFIG.version}
     />,

diff --git a/shared/package.json b/shared/package.json
@@ -9,7 +9,7 @@
     "lint": "yarn lint-package-json && yarn lint-js",
     "lint-js": "eslint src",
     "lint-package-json": "npmPkgJsonLint .",
-    "test": "jest",
+    "test": "jest --testPathIgnorePatterns=dist",
     "watch": "yarn build --watch"
   },
   "devDependencies": {

diff --git a/shared/src/components/Footer/Footer.js b/shared/src/components/Footer/Footer.js
@@ -1,7 +1,18 @@
 import PropTypes from "prop-types";
-import React from "react";
+import React, { useEffect } from "react";
+
+export const Footer = ({ maasName, version }) => {
+  useEffect(() => {
+    // Inject the the Usabilla script.
+    window.lightningjs||function(c){function g(b,d){d&&(d+=(/\?/.test(d)?"&":"?")+"lv=1");c[b]||function(){var i=window,h=document,j=b,g=h.location.protocol,l="load",k=0;(function(){function b(){a.P(l);a.w=1;c[j]("_load")}c[j]=function(){function m(){m.id=e;return c[j].apply(m,arguments)}var b,e=++k;b=this&&this!=i?this.id||0:0;(a.s=a.s||[]).push([e,b,arguments]);m.then=function(b,c,h){var d=a.fh[e]=a.fh[e]||[],j=a.eh[e]=a.eh[e]||[],f=a.ph[e]=a.ph[e]||[];b&&d.push(b);c&&j.push(c);h&&f.push(h);return m};return m};var a=c[j]._={};a.fh={};a.eh={};a.ph={};a.l=d?d.replace(/^\/\//,(g=="https:"?g:"http:")+"//"):d;a.p={0:+new Date};a.P=function(b){a.p[b]=new Date-a.p[0]};a.w&&b();i.addEventListener?i.addEventListener(l,b,!1):i.attachEvent("on"+l,b);var q=function(){function b(){return["<head></head><",c,' onload="var d=',n,";d.getElementsByTagName('head')[0].",d,"(d.",g,"('script')).",i,"='",a.l,"'\"></",c,">"].join("")}var c="body",e=h[c];if(!e)return setTimeout(q,100);a.P(1);var d="appendChild",g="createElement",i="src",k=h[g]("div"),l=k[d](h[g]("div")),f=h[g]("iframe"),n="document",p;k.style.display="none";e.insertBefore(k,e.firstChild).id=o+"-"+j;f.frameBorder="0";f.id=o+"-frame-"+j;/MSIE[ ]+6/.test(navigator.userAgent)&&(f[i]="javascript:false");f.allowTransparency="true";l[d](f);try{f.contentWindow[n].open()}catch(s){a.domain=h.domain,p="javascript:var d="+n+".open();d.domain='"+h.domain+"';",f[i]=p+"void(0);"}try{var r=f.contentWindow[n];r.write(b());r.close()}catch(t){f[i]=p+'d.write("'+b().replace(/"/g,String.fromCharCode(92)+'"')+'");d.close();'}a.P(2)};a.l&&setTimeout(q,0)})()}();c[b].lv="1";return c[b]}var o="lightningjs",k=window[o]=g(o);k.require=g;k.modules=c}({}); window.usabilla_live = window.lightningjs.require("usabilla_live", "//w.usabilla.com/7cdd8c574ee4.js");
+    // Hide Usabilla default button
+    window.usabilla_live("hide");
+    // Add MAAS version to the custom data
+    window.usabilla_live("data", {"custom":
+        {"MAAS version": "${version}" }
+    });
+  }, [])
 
-export const Footer = ({ debug, maasName, version }) => {
   return (
     <footer className="p-strip--light is-shallow p-footer">
       <div className="row">
@@ -28,10 +39,7 @@ export const Footer = ({ debug, maasName, version }) => {
               </a>
             </li>
             <li className="p-inline-list__item">
-              <a
-                href={`https://maas.io/docs/`}
-                className="p-footer__link"
-              >
+              <a href={`https://maas.io/docs/`} className="p-footer__link">
                 View documentation
               </a>
             </li>
@@ -41,39 +49,14 @@ export const Footer = ({ debug, maasName, version }) => {
               </a>
             </li>
             <li className="p-inline-list__item">
-              <a href="#" id="usbl-integrated-button">
+              <a href="" onClick={(e) => {
+                  e.preventDefault();
+                  window.usabilla_live("click");
+              }}>
                 Give feedback
               </a>
             </li>
           </ul>
-          {!debug && (
-            <>
-              <script
-                type="text/javascript"
-                dangerouslySetInnerHTML={{
-                  // eslint-disable-next-line
-                  __html: `/*{literal}<![CDATA[*/window.lightningjs||function(c){function g(b,d){d&&(d+=(/\?/.test(d)?"&":"?")+"lv=1");c[b]||function(){var i=window,h=document,j=b,g=h.location.protocol,l="load",k=0;(function(){function b(){a.P(l);a.w=1;c[j]("_load")}c[j]=function(){function m(){m.id=e;return c[j].apply(m,arguments)}var b,e=++k;b=this&&this!=i?this.id||0:0;(a.s=a.s||[]).push([e,b,arguments]);m.then=function(b,c,h){var d=a.fh[e]=a.fh[e]||[],j=a.eh[e]=a.eh[e]||[],f=a.ph[e]=a.ph[e]||[];b&&d.push(b);c&&j.push(c);h&&f.push(h);return m};return m};var a=c[j]._={};a.fh={};a.eh={};a.ph={};a.l=d?d.replace(/^\/\//,(g=="https:"?g:"http:")+"//"):d;a.p={0:+new Date};a.P=function(b){a.p[b]=new Date-a.p[0]};a.w&&b();i.addEventListener?i.addEventListener(l,b,!1):i.attachEvent("on"+l,b);var q=function(){function b(){return["<head></head><",c,' onload="var d=',n,";d.getElementsByTagName('head')[0].",d,"(d.",g,"('script')).",i,"='",a.l,"'\"></",c,">"].join("")}var c="body",e=h[c];if(!e)return setTimeout(q,100);a.P(1);var d="appendChild",g="createElement",i="src",k=h[g]("div"),l=k[d](h[g]("div")),f=h[g]("iframe"),n="document",p;k.style.display="none";e.insertBefore(k,e.firstChild).id=o+"-"+j;f.frameBorder="0";f.id=o+"-frame-"+j;/MSIE[ ]+6/.test(navigator.userAgent)&&(f[i]="javascript:false");f.allowTransparency="true";l[d](f);try{f.contentWindow[n].open()}catch(s){a.domain=h.domain,p="javascript:var d="+n+".open();d.domain='"+h.domain+"';",f[i]=p+"void(0);"}try{var r=f.contentWindow[n];r.write(b());r.close()}catch(t){f[i]=p+'d.write("'+b().replace(/"/g,String.fromCharCode(92)+'"')+'");d.close();'}a.P(2)};a.l&&setTimeout(q,0)})()}();c[b].lv="1";return c[b]}var o="lightningjs",k=window[o]=g(o);k.require=g;k.modules=c}({}); window.usabilla_live = lightningjs.require("usabilla_live", "//w.usabilla.com/7cdd8c574ee4.js"); /*]]>{/literal}*/`
-                }}
-              ></script>
-
-              <script
-                dangerouslySetInnerHTML={{
-                  __html: `
-                  // Hide Usabilla Default button
-              		window.usabilla_live("hide");
-                  // Find a Link and open de Usabilla Feedback form when the user clicks on the link
-                  document.getElementById("usbl-integrated-button").addEventListener("click", function(e) {
-                      e.preventDefault();
-                      window.usabilla_live("click");
-              		});
-                  // Add MAAS version to the custom data
-                  window.usabilla_live("data", {"custom":
-                      {"MAAS version": "{version}" }
-                  });`
-                }}
-              ></script>
-            </>
-          )}
           <p className="u-remove-max-width">
             &copy; {new Date().getFullYear()} Canonical Ltd. Ubuntu and
             Canonical are registered trademarks of Canonical Ltd.
@@ -101,7 +84,6 @@ export const Footer = ({ debug, maasName, version }) => {
 };
 
 Footer.propTypes = {
-  debug: PropTypes.bool,
   maasName: PropTypes.string.isRequired,
   version: PropTypes.string.isRequired
 };

diff --git a/shared/src/components/Footer/Footer.test.js b/shared/src/components/Footer/Footer.test.js
@@ -10,7 +10,7 @@ describe("Footer", () => {
 
   it("renders", () => {
     const wrapper = shallow(
-      <Footer debug={false} maasName="koala-maas" version="2.7.0" />
+      <Footer maasName="koala-maas" version="2.7.0" />
     );
     expect(wrapper).toMatchSnapshot();
   });

diff --git a/shared/src/components/Footer/__snapshots__/Footer.test.js.snap b/shared/src/components/Footer/__snapshots__/Footer.test.js.snap
@@ -68,39 +68,13 @@ exports[`Footer renders 1`] = `
           className="p-inline-list__item"
         >
           <a
-            href="#"
-            id="usbl-integrated-button"
+            href=""
+            onClick={[Function]}
           >
             Give feedback
           </a>
         </li>
       </ul>
-      <script
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "/*{literal}<![CDATA[*/window.lightningjs||function(c){function g(b,d){d&&(d+=(/?/.test(d)?\\"&\\":\\"?\\")+\\"lv=1\\");c[b]||function(){var i=window,h=document,j=b,g=h.location.protocol,l=\\"load\\",k=0;(function(){function b(){a.P(l);a.w=1;c[j](\\"_load\\")}c[j]=function(){function m(){m.id=e;return c[j].apply(m,arguments)}var b,e=++k;b=this&&this!=i?this.id||0:0;(a.s=a.s||[]).push([e,b,arguments]);m.then=function(b,c,h){var d=a.fh[e]=a.fh[e]||[],j=a.eh[e]=a.eh[e]||[],f=a.ph[e]=a.ph[e]||[];b&&d.push(b);c&&j.push(c);h&&f.push(h);return m};return m};var a=c[j]._={};a.fh={};a.eh={};a.ph={};a.l=d?d.replace(/^///,(g==\\"https:\\"?g:\\"http:\\")+\\"//\\"):d;a.p={0:+new Date};a.P=function(b){a.p[b]=new Date-a.p[0]};a.w&&b();i.addEventListener?i.addEventListener(l,b,!1):i.attachEvent(\\"on\\"+l,b);var q=function(){function b(){return[\\"<head></head><\\",c,' onload=\\"var d=',n,\\";d.getElementsByTagName('head')[0].\\",d,\\"(d.\\",g,\\"('script')).\\",i,\\"='\\",a.l,\\"'\\"></\\",c,\\">\\"].join(\\"\\")}var c=\\"body\\",e=h[c];if(!e)return setTimeout(q,100);a.P(1);var d=\\"appendChild\\",g=\\"createElement\\",i=\\"src\\",k=h[g](\\"div\\"),l=k[d](h[g](\\"div\\")),f=h[g](\\"iframe\\"),n=\\"document\\",p;k.style.display=\\"none\\";e.insertBefore(k,e.firstChild).id=o+\\"-\\"+j;f.frameBorder=\\"0\\";f.id=o+\\"-frame-\\"+j;/MSIE[ ]+6/.test(navigator.userAgent)&&(f[i]=\\"javascript:false\\");f.allowTransparency=\\"true\\";l[d](f);try{f.contentWindow[n].open()}catch(s){a.domain=h.domain,p=\\"javascript:var d=\\"+n+\\".open();d.domain='\\"+h.domain+\\"';\\",f[i]=p+\\"void(0);\\"}try{var r=f.contentWindow[n];r.write(b());r.close()}catch(t){f[i]=p+'d.write(\\"'+b().replace(/\\"/g,String.fromCharCode(92)+'\\"')+'\\");d.close();'}a.P(2)};a.l&&setTimeout(q,0)})()}();c[b].lv=\\"1\\";return c[b]}var o=\\"lightningjs\\",k=window[o]=g(o);k.require=g;k.modules=c}({}); window.usabilla_live = lightningjs.require(\\"usabilla_live\\", \\"//w.usabilla.com/7cdd8c574ee4.js\\"); /*]]>{/literal}*/",
-          }
-        }
-        type="text/javascript"
-      />
-      <script
-        dangerouslySetInnerHTML={
-          Object {
-            "__html": "
-                  // Hide Usabilla Default button
-              		window.usabilla_live(\\"hide\\");
-                  // Find a Link and open de Usabilla Feedback form when the user clicks on the link
-                  document.getElementById(\\"usbl-integrated-button\\").addEventListener(\\"click\\", function(e) {
-                      e.preventDefault();
-                      window.usabilla_live(\\"click\\");
-              		});
-                  // Add MAAS version to the custom data
-                  window.usabilla_live(\\"data\\", {\\"custom\\":
-                      {\\"MAAS version\\": \\"{version}\\" }
-                  });",
-          }
-        }
-      />
       <p
         className="u-remove-max-width"
       >

diff --git a/ui/src/app/App.js b/ui/src/app/App.js
@@ -113,9 +113,7 @@ export const App = () => {
         showRSD={navigationOptions.rsd}
       />
       {content}
-      {maasName && version && (
-        <Footer debug={debug} maasName={maasName} version={version} />
-      )}
+      {maasName && version && <Footer maasName={maasName} version={version} />}
     </>
   );
 };