Move report abuse link to the footer. (#4687) (#4842)

locales/en-US/server.ftl

@@ -22,6 +22,8 @@ settingsButton =
 footerLinkMozilla = Mozilla
 footerLinkTerms = Terms
 footerLinkPrivacy = Privacy Notice
+footerReportShot = Report Shot
+    .title = Report this shot for abuse, spam, or other problems
 footerLinkFaqs = FAQs
 footerLinkDMCA = Report IP Infringement
 footerLinkDiscourse = Give Feedback
@@ -117,8 +119,6 @@ shotPageExpiredMessage = This shot has expired.
 shotPageExpiredMessageDetails = Here is the page it was originally created from:
 shotPageDeleteButton =
     .title = Delete this shot
-shotPageAbuseButton =
-    .title = Report this shot for abuse, spam, or other problems
 shotPageDownloadShot =
     .title = Download
 shotPageEditButton =

server/src/footer-view.js

@@ -1,8 +1,13 @@
 const React = require("react");
 const { Localized } = require("fluent-react/compat");
 const PropTypes = require("prop-types");
+const sendEvent = require("./browser-send-event.js");
 
 exports.Footer = class Footer extends React.Component {
+  onReportShot() {
+    sendEvent("start-flag", "navbar", {useBeacon: true});
+  }
+
   render() {
     return (
       <div className="footer">
@@ -17,6 +22,15 @@ exports.Footer = class Footer extends React.Component {
           <Localized id="footerLinkFaqs">
             <a href="https://support.mozilla.org/kb/firefox-screenshots" target="_blank" rel="noopener noreferrer">FAQs</a>
           </Localized>
+          {
+            this.props.isOwner ? null
+            : <Localized id="footerReportShot">
+                <a href={`https://qsurvey.mozilla.com/s3/screenshots-flagged-shots?ref=${this.props.id}`}
+                  title="Report this shot for abuse, spam, or other problems"
+                  target="_blank" rel="noopener noreferrer"
+                  onClick={this.onReportShot.bind(this)}>Report Shot</a>
+              </Localized>
+          }
           <Localized id="footerLinkDMCA">
             <a href="https://www.mozilla.org/about/legal/report-infringement/" target="_blank" rel="noopener noreferrer">Report IP Infringement</a>
           </Localized>
@@ -32,5 +46,7 @@ exports.Footer = class Footer extends React.Component {
 };
 
 exports.Footer.propTypes = {
-  authenticated: PropTypes.bool
+  id: PropTypes.string,
+  isOwner: PropTypes.bool,
+  authenticated: PropTypes.bool,
 };

server/src/pages/shot/view.js

@@ -354,8 +354,8 @@ class Body extends React.Component {
     }
 
     let favoriteShotButton = null;
-    let trashOrFlagButton;
-    let editButton;
+    let trashOrFlagButton = null;
+    let editButton = null;
     const highlight = this.state.highlightEditButton ? <div className="edit-highlight" onClick={ this.onClickEdit.bind(this) } onMouseOver={ this.onMouseOverHighlight.bind(this) } onMouseOut={ this.onMouseOutHighlight.bind(this) }></div> : null;
 
     const activeFavClass = this.props.expireTime ? "" : "is-fav";
@@ -378,11 +378,6 @@ class Body extends React.Component {
         </Localized>
         <PromoDialog promoClose={this.promoClose.bind(this)} display={this.state.promoDialog} />
         </div>;
-    } else {
-      trashOrFlagButton = <Localized id="shotPageAbuseButton">
-        <button className="button transparent flag" title="Report this shot for abuse, spam, or other problems" onClick={ this.onClickFlag.bind(this) }></button>
-      </Localized>;
-      editButton = null;
     }
 
     let myShotsHref = "/shots";
@@ -463,7 +458,7 @@ class Body extends React.Component {
           { errorMessages }
           { clips }
         </section>
-        <Footer forUrl={ shot.viewUrl } {...this.props} />
+        <Footer {...this.props} />
       </div>
     </reactruntime.BodyTemplate>);
   }