Convert `help-link` component to preact

- Add tests

src/sidebar/components/help-link.js

 'use strict';
 
-module.exports = {
-  controllerAs: 'vm',
-  template: require('../templates/help-link.html'),
-  controller: function() {},
-  scope: {
-    version: '<',
-    userAgent: '<',
-    url: '<',
-    documentFingerprint: '<',
-    auth: '<',
-    dateTime: '<',
-  },
+const propTypes = require('prop-types');
+const { createElement } = require('preact');
+
+/**
+ * Render an HTML link for sending an email to Hypothes.is support. This link
+ * pre-populates the email body with various details about the app's state.
+ */
+function HelpLink({
+  auth,
+  dateTime,
+  documentFingerprint = '-',
+  url,
+  userAgent,
+  version,
+}) {
+  const toAddress = 'support@hypothes.is';
+  const subject = encodeURIComponent('Hypothesis Support');
+
+  const username = auth.username ? auth.username : '-';
+
+  // URL-encode informational key-value pairs for the email's body content
+  const bodyAttrs = [
+    `Version: ${version}`,
+    `User Agent: ${userAgent}`,
+    `URL: ${url}`,
+    `PDF Fingerprint: ${documentFingerprint}`,
+    `Date: ${dateTime}`,
+    `Username: ${username}`,
+  ].map(x => encodeURIComponent(x));
+
+  // Create a pre-populated email body with each key-value pair on its own line
+  const body = bodyAttrs.join(encodeURIComponent('\r\n'));
+  const href = `mailto:${toAddress}?subject=${subject}&body=${body}`;
+
+  return (
+    <a className="help-panel-content__link" href={href}>
+      Send us an email
+    </a>
+  );
+}
+
+HelpLink.propTypes = {
+  auth: propTypes.object.isRequired,
+  dateTime: propTypes.object.isRequired,
+  documentFingerprint: propTypes.string,
+  url: propTypes.string,
+  userAgent: propTypes.string.isRequired,
+  version: propTypes.string.isRequired,
 };
+
+module.exports = HelpLink;

src/sidebar/components/test/help-link-test.js

+'use strict';
+
+const { createElement } = require('preact');
+const { shallow } = require('enzyme');
+
+const HelpLink = require('../help-link');
+
+describe('Help (mailto) Link', () => {
+  let fakeAuth;
+  let fakeDateTime;
+  let fakeDocumentFingerprint;
+  let fakeUrl;
+  let fakeUserAgent;
+  let fakeVersion;
+
+  const createHelpLink = () => {
+    return shallow(
+      <HelpLink
+        auth={fakeAuth}
+        dateTime={fakeDateTime}
+        documentFingerprint={fakeDocumentFingerprint}
+        url={fakeUrl}
+        userAgent={fakeUserAgent}
+        version={fakeVersion}
+      />
+    );
+  };
+
+  beforeEach(() => {
+    fakeAuth = {
+      username: 'fiona.user',
+    };
+    fakeDateTime = new Date();
+    fakeDocumentFingerprint = 'fingerprint';
+    fakeUrl = 'http://www.example.com';
+    fakeUserAgent = 'Some User Agent';
+    fakeVersion = '1.0.0';
+  });
+
+  it('sets required props as part of formatted email body', () => {
+    const wrapper = createHelpLink();
+    const href = wrapper.find('a').prop('href');
+
+    [
+      { label: 'Version', value: fakeVersion },
+      { label: 'User Agent', value: fakeUserAgent },
+      { label: 'URL', value: fakeUrl },
+      { label: 'PDF Fingerprint', value: fakeDocumentFingerprint },
+      { label: 'Date', value: fakeDateTime },
+      { label: 'Username', value: fakeAuth.username },
+    ].forEach(helpInfo => {
+      const emailBodyPart = encodeURIComponent(
+        `${helpInfo.label}: ${helpInfo.value}`
+      );
+      assert.include(href, emailBodyPart);
+    });
+  });
+
+  it('sets a default value for PDF document fingerprint if not provided', () => {
+    fakeDocumentFingerprint = undefined;
+    const wrapper = createHelpLink();
+    const href = wrapper.find('a').prop('href');
+
+    const emailBodyPart = encodeURIComponent('PDF Fingerprint: -');
+
+    assert.include(href, emailBodyPart);
+  });
+
+  it('sets a default value for username if no authenticated user', () => {
+    fakeAuth = {};
+    const wrapper = createHelpLink();
+    const href = wrapper.find('a').prop('href');
+
+    const emailBodyPart = encodeURIComponent('Username: -');
+
+    assert.include(href, emailBodyPart);
+  });
+});

src/sidebar/index.js

@@ -163,7 +163,10 @@ function startAngularApp(config) {
       'groupListV2',
       wrapReactComponent(require('./components/group-list-v2'))
     )
-    .component('helpLink', require('./components/help-link'))
+    .component(
+      'helpLink',
+      wrapReactComponent(require('./components/help-link'))
+    )
     .component('helpPanel', require('./components/help-panel'))
     .component('loggedoutMessage', require('./components/loggedout-message'))
     .component('loginControl', require('./components/login-control'))

src/sidebar/templates/help-link.html

-
-<a class="help-panel-content__link"
-   href="mailto:support@hypothes.is?subject=Hypothesis%20support&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 an email</a>