Add Extension Workhop link to header and Footer (#7742)

Fixes #7696

bin/loading-page.html

@@ -61,6 +61,11 @@
                 </a>
               </li>
               <li><a href="https://blog.mozilla.com/addons">Blog</a></li>
+              <li>
+                <a href="https://extensionworkshop.com/">
+                  Extension Workshop
+                </a>
+              </li>
               <li>
                 <a href="/en-GB/developers/">
                   <!-- react-text: 245 -->Developer Hub

src/amo/components/Footer/index.js

@@ -4,6 +4,7 @@ import { compose } from 'redux';
 
 import LanguagePicker from 'amo/components/LanguagePicker';
 import Link from 'amo/components/Link';
+import { makeQueryStringWithUTM } from 'amo/utils';
 import translate from 'core/i18n/translate';
 import Icon from 'ui/components/Icon';
 import { sanitizeHTML } from 'core/utils';
@@ -51,6 +52,19 @@ export class FooterBase extends React.Component {
                   {i18n.gettext('Blog')}
                 </a>
               </li>
+              <li>
+                <a
+                  className="Footer-extension-workshop-link"
+                  href={`https://extensionworkshop.com/${makeQueryStringWithUTM(
+                    {
+                      utm_content: 'footer-link',
+                      utm_campaign: null,
+                    },
+                  )}`}
+                >
+                  {i18n.gettext('Extension Workshop')}
+                </a>
+              </li>
               <li>
                 <Link href="/developers/" prependClientApp={false}>
                   {i18n.gettext('Developer Hub')}

src/amo/components/Header/index.js

@@ -16,6 +16,7 @@ import {
   getCurrentUser,
   hasAnyReviewerRelatedPermission,
 } from 'amo/reducers/users';
+import { makeQueryStringWithUTM } from 'amo/utils';
 import { VIEW_CONTEXT_HOME } from 'core/constants';
 import translate from 'core/i18n/translate';
 import DropdownMenu from 'ui/components/DropdownMenu';
@@ -69,6 +70,19 @@ export class HeaderBase extends React.Component {
         <SectionLinks className="Header-SectionLinks" location={location} />
 
         <div className="Header-user-and-external-links">
+          <Link
+            className="Header-extension-workshop-link Header-button"
+            href={`https://extensionworkshop.com/${makeQueryStringWithUTM({
+              utm_content: 'header-link',
+              utm_campaign: null,
+            })}`}
+            external
+            prependClientApp={false}
+            prependLang={false}
+            target="_blank"
+          >
+            {i18n.gettext('Extension Workshop')}
+          </Link>
           <Link
             className="Header-developer-hub-link Header-button"
             href="/developers/"

src/amo/components/Header/styles.scss

@@ -106,7 +106,8 @@
   white-space: nowrap;
 }
 
-.Header-developer-hub-link {
+.Header-developer-hub-link,
+.Header-extension-workshop-link {
   display: none;
 
   @include respond-to(large) {

tests/unit/amo/components/TestFooter.js

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import Footer, { FooterBase } from 'amo/components/Footer';
+import { makeQueryStringWithUTM } from 'amo/utils';
 import { fakeI18n, shallowUntilTarget } from 'tests/unit/helpers';
 
 describe(__filename, () => {
@@ -41,5 +42,16 @@ describe(__filename, () => {
       'href',
       'https://developer.mozilla.org/Add-ons/AMO/Policy/Contact',
     );
+
+    expect(root.find('.Footer-extension-workshop-link')).toHaveText(
+      'Extension Workshop',
+    );
+    expect(root.find('.Footer-extension-workshop-link')).toHaveProp(
+      'href',
+      `https://extensionworkshop.com/${makeQueryStringWithUTM({
+        utm_content: 'footer-link',
+        utm_campaign: null,
+      })}`,
+    );
   });
 });

tests/unit/amo/components/TestHeader.js

@@ -3,6 +3,7 @@ import * as React from 'react';
 import { setViewContext } from 'amo/actions/viewContext';
 import Header, { HeaderBase } from 'amo/components/Header';
 import Link from 'amo/components/Link';
+import { makeQueryStringWithUTM } from 'amo/utils';
 import AuthenticateButton from 'core/components/AuthenticateButton';
 import DropdownMenu from 'ui/components/DropdownMenu';
 import { VIEW_CONTEXT_HOME } from 'core/constants';
@@ -162,4 +163,20 @@ describe(__filename, () => {
     expect(link.children()).toHaveText('Manage My Submissions');
     expect(link).toHaveProp('href', '/developers/addons/');
   });
+
+  it('displays a extension workshop link in header', () => {
+    const { store } = dispatchSignInActions();
+    const wrapper = renderHeader({ store });
+    const link = wrapper.find('.Header-extension-workshop-link');
+
+    expect(link).toHaveLength(1);
+    expect(link.children()).toHaveText('Extension Workshop');
+    expect(link).toHaveProp(
+      'href',
+      `https://extensionworkshop.com/${makeQueryStringWithUTM({
+        utm_content: 'header-link',
+        utm_campaign: null,
+      })}`,
+    );
+  });
 });