Merge pull request #2027 from mozilla/PLT-1751

PLT-1751: Add the ability to collapse a link preview

2 files changed, 41 insertions, 3 deletions

diff --git a/web/react/components/post_body_additional_content.jsx b/web/react/components/post_body_additional_content.jsx
index a76c59fb3..c2a928f3b 100644
--- a/web/react/components/post_body_additional_content.jsx
+++ b/web/react/components/post_body_additional_content.jsx
@@ -16,16 +16,28 @@ export default class PostBodyAdditionalContent extends React.Component {
 
         this.getSlackAttachment = this.getSlackAttachment.bind(this);
         this.getOEmbedProvider = this.getOEmbedProvider.bind(this);
+        this.generateEmbed = this.generateEmbed.bind(this);
+        this.toggleEmbedVisibility = this.toggleEmbedVisibility.bind(this);
+
+        this.state = {
+            embedVisible: true
+        };
     }
 
-    shouldComponentUpdate(nextProps) {
+    shouldComponentUpdate(nextProps, nextState) {
         if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) {
             return true;
         }
-
+        if (nextState.embedVisible !== this.state.embedVisible) {
+            return true;
+        }
         return false;
     }
 
+    toggleEmbedVisibility() {
+        this.setState({embedVisible: !this.state.embedVisible});
+    }
+
     getSlackAttachment() {
         let attachments = [];
         if (this.props.post.props && this.props.post.props.attachments) {
@@ -51,7 +63,7 @@ export default class PostBodyAdditionalContent extends React.Component {
         return null;
     }
 
-    render() {
+    generateEmbed() {
         if (this.props.post.type === 'slack_attachment') {
             return this.getSlackAttachment();
         }
@@ -98,6 +110,28 @@ export default class PostBodyAdditionalContent extends React.Component {
 
         return null;
     }
+
+    render() {
+        var generateEmbed = this.generateEmbed();
+        if (generateEmbed) {
+            return (
+                <div>
+                    <a className='post__embed-visibility'
+                        data-expanded={this.state.embedVisible}
+                        aria-label='Toggle Embed Visibility'
+                        onClick={this.toggleEmbedVisibility}
+                    >
+                    </a>
+                    <div className='post__embed-container'
+                        hidden={!this.state.embedVisible}
+                    >
+                    {generateEmbed}
+                    </div>
+                </div>
+                );
+        }
+        return null;
+    }
 }
 
 PostBodyAdditionalContent.propTypes = {
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index 766a86686..0a4944708 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -479,6 +479,10 @@ export default {
         EMBED_PREVIEW: {
             label: 'embed_preview',
             description: 'Show preview snippet of links below message'
+        },
+        EMBED_TOGGLE: {
+            label: 'embed_toggle',
+            description: 'Show toggle for all embed previews'
         }
     },
     OVERLAY_TIME_DELAY: 400,