Fixes #5043 - Add download button to non-owner shot page (#5048)

mozilla-services · Oct 24, 2018 · 62eaba1 · 62eaba1
1 parent dbb3745
commit 62eaba1
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 21 deletions.
diff --git a/server/src/pages/shot/shotpage-header.js b/server/src/pages/shot/shotpage-header.js
@@ -97,32 +97,40 @@ exports.ShotPageHeader = class ShotPageHeader extends React.Component {
     );
   }
 
+  renderShotActions() {
+    return (
+      this.props.shotActions ?
+        <div className="shot-alt-actions">{this.props.shotActions}</div> : null
+    );
+  }
+
   render() {
     const myShotsText = this.renderMyShotsText();
     const signin = this.renderFxASignIn();
     const shotInfo = this.renderShotInfo();
+    const shotActions = this.renderShotActions();
 
     return (
       <Header shouldGetFirefox={this.props.shouldGetFirefox} isOwner={this.props.isOwner}
               hasFxa={this.props.isFxaAuthenticated}>
         { myShotsText }
         { shotInfo }
-        <div className="shot-alt-actions">
+        { shotActions }
         { this.props.children }
-        </div>
         { signin }
       </Header>
     );
   }
 };
 
 exports.ShotPageHeader.propTypes = {
-  children: PropTypes.node.isRequired,
+  children: PropTypes.node,
   isOwner: PropTypes.bool,
   shot: PropTypes.object,
   isFxaAuthenticated: PropTypes.bool,
   expireTime: PropTypes.number,
   shouldGetFirefox: PropTypes.bool,
+  shotActions: PropTypes.array,
   staticLink: PropTypes.func,
 };
 

diff --git a/server/src/pages/shot/view.js b/server/src/pages/shot/view.js
@@ -364,6 +364,14 @@ class Body extends React.Component {
     let downloadButton = null;
     let copyButton = null;
 
+    downloadButton = <div className="download-shot-button" key="download-shot-button">
+      <Localized id="shotPageDownloadShot" attrs={{title: true}}>
+        <button className={`button transparent nav-button`} onClick={this.onClickDownload.bind(this)}
+                title="Download the shot image">
+          <img src={this.props.staticLink("/static/img/icon-download.svg")} />
+        </button>
+      </Localized></div>;
+
     if (this.props.isOwner) {
       const highlight = this.state.highlightEditButton
         ? <div className="edit-highlight"
@@ -375,7 +383,7 @@ class Body extends React.Component {
         this.props.staticLink("/static/img/icon-heart.svg");
       const inactive = this.props.isFxaAuthenticated ? "" : "inactive";
 
-      favoriteShotButton = <div className="favorite-shot-button">
+      favoriteShotButton = <div className="favorite-shot-button" key="favorite-shot-button">
         <Localized id="shotPagefavoriteButton" attrs={{title: true}}>
           <button className={`button transparent nav-button ${inactive}`}
                   disabled={!this.props.isFxaAuthenticated} onClick={this.onClickFavorite.bind(this)}>
@@ -387,9 +395,9 @@ class Body extends React.Component {
         clickDeleteHandler={this.clickDeleteHandler.bind(this)}
         confirmDeleteHandler={this.confirmDeleteHandler.bind(this)}
         cancelDeleteHandler={this.cancelDeleteHandler.bind(this)}
-        staticLink={this.props.staticLink} />;
+        staticLink={this.props.staticLink} key="delete-shot-button" />;
 
-      editButton = this.props.enableAnnotations ? <div className="edit-shot-button">
+      editButton = this.props.enableAnnotations ? <div className="edit-shot-button" key="edit-shot-button">
         <Localized id="shotPageEditButton" attrs={{title: true}}>
           <button className="button transparent nav-button"
                   title="Edit this image"
@@ -402,15 +410,8 @@ class Body extends React.Component {
         { highlight }
         </div> : null;
 
-      downloadButton = <div className="download-shot-button">
-        <Localized id="shotPageDownloadShot" attrs={{title: true}}>
-          <button className={`button transparent nav-button`} onClick={this.onClickDownload.bind(this)}
-                  title="Download the shot image">
-            <img src={this.props.staticLink("/static/img/icon-download.svg")} />
-          </button>
-        </Localized></div>;
-
-      copyButton = <div className="copy-img-button" hidden={this.state.isClient && !this.state.canCopy}>
+      copyButton = <div className="copy-img-button" key="copy-img-button"
+                        hidden={this.state.isClient && !this.state.canCopy}>
         <Localized id="shotPageCopyButton" attrs={{title: true}}>
           <button className="button nav-button transparent copy"
                   title="Copy image to clipboard"
@@ -420,6 +421,9 @@ class Body extends React.Component {
         </Localized></div>;
     }
 
+    const shotActions = this.props.isOwner ?
+      [favoriteShotButton, editButton, copyButton, downloadButton, trashOrFlagButton] : null;
+
     let clip;
     let clipUrl = null;
     if (clipNames.length) {
@@ -441,12 +445,8 @@ class Body extends React.Component {
         <div id="frame" className="inverse-color-scheme full-height column-space">
         <ShotPageHeader isOwner={this.props.isOwner} isFxaAuthenticated={this.props.isFxaAuthenticated}
           shot={this.props.shot} expireTime={this.props.expireTime} shouldGetFirefox={renderGetFirefox}
-          staticLink={this.props.staticLink}>
-          { favoriteShotButton }
-          { editButton }
-          { copyButton }
-          { downloadButton }
-          { trashOrFlagButton }
+          staticLink={this.props.staticLink} shotActions={shotActions}>
+            { !this.props.isOwner ? downloadButton : null }
         </ShotPageHeader>
         <section className="clips">
           { this.props.isOwner && this.props.loginFailed ? <LoginFailedWarning /> : null }