PLT-3114 Moved preview collapse out of pre-release features (#3206)

* Added user setting to auto collapse image previews

* Added slash commands for collapsing/expanding image previews

* Added translation strings for collapse setting

* Add default props for preview collapse setting

5 files changed, 61 insertions, 26 deletions

diff --git a/webapp/components/post_view/components/post.jsx b/webapp/components/post_view/components/post.jsx
index 2ed062c74..d30216180 100644
--- a/webapp/components/post_view/components/post.jsx
+++ b/webapp/components/post_view/components/post.jsx
@@ -72,6 +72,10 @@ export default class Post extends React.Component {
             return true;
         }
 
+        if (nextProps.previewCollapsed !== this.props.previewCollapsed) {
+            return true;
+        }
+
         if (!Utils.areObjectsEqual(nextProps.user, this.props.user)) {
             return true;
         }
@@ -190,6 +194,7 @@ export default class Post extends React.Component {
                                 parentPost={parentPost}
                                 handleCommentClick={this.handleCommentClick}
                                 compactDisplay={this.props.compactDisplay}
+                                previewCollapsed={this.props.previewCollapsed}
                             />
                         </div>
                     </div>
@@ -213,5 +218,6 @@ Post.propTypes = {
     currentUser: React.PropTypes.object.isRequired,
     center: React.PropTypes.bool,
     compactDisplay: React.PropTypes.bool,
+    previewCollapsed: React.PropTypes.string,
     commentCount: React.PropTypes.number
 };
diff --git a/webapp/components/post_view/components/post_body.jsx b/webapp/components/post_view/components/post_body.jsx
index eba62ad77..2a2be75a9 100644
--- a/webapp/components/post_view/components/post_body.jsx
+++ b/webapp/components/post_view/components/post_body.jsx
@@ -25,7 +25,11 @@ export default class PostBody extends React.Component {
             return true;
         }
 
-        if (!Utils.areObjectsEqual(nextProps.compactDisplay, this.props.compactDisplay)) {
+        if (nextProps.compactDisplay !== this.props.compactDisplay) {
+            return true;
+        }
+
+        if (nextProps.previewCollapsed !== this.props.previewCollapsed) {
             return true;
         }
 
@@ -172,6 +176,7 @@ export default class PostBody extends React.Component {
                     post={this.props.post}
                     message={messageWrapper}
                     compactDisplay={this.props.compactDisplay}
+                    previewCollapsed={this.props.previewCollapsed}
                 />
             );
         }
@@ -193,5 +198,6 @@ PostBody.propTypes = {
     parentPost: React.PropTypes.object,
     retryPost: React.PropTypes.func.isRequired,
     handleCommentClick: React.PropTypes.func.isRequired,
-    compactDisplay: React.PropTypes.bool
+    compactDisplay: React.PropTypes.bool,
+    previewCollapsed: React.PropTypes.string
 };
diff --git a/webapp/components/post_view/components/post_body_additional_content.jsx b/webapp/components/post_view/components/post_body_additional_content.jsx
index bd29da962..6757f3b2a 100644
--- a/webapp/components/post_view/components/post_body_additional_content.jsx
+++ b/webapp/components/post_view/components/post_body_additional_content.jsx
@@ -22,10 +22,14 @@ export default class PostBodyAdditionalContent extends React.Component {
         this.toggleEmbedVisibility = this.toggleEmbedVisibility.bind(this);
 
         this.state = {
-            embedVisible: true
+            embedVisible: props.previewCollapsed.startsWith('false')
         };
     }
 
+    componentWillReceiveProps(nextProps) {
+        this.setState({embedVisible: nextProps.previewCollapsed.startsWith('false')});
+    }
+
     shouldComponentUpdate(nextProps, nextState) {
         if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) {
             return true;
@@ -118,25 +122,23 @@ export default class PostBodyAdditionalContent extends React.Component {
 
         if (generateEmbed) {
             let messageWithToggle = [];
-            if (Utils.isFeatureEnabled(Constants.PRE_RELEASE_FEATURES.EMBED_TOGGLE)) {
-                // if message has only one line and starts with a link place toggle in this only line
-                // else - place it in new line between message and embed
-                const prependToggle = (/^\s*https?:\/\/.*$/).test(this.props.post.message);
-                messageWithToggle.push(
-                    <a
-                        className={`post__embed-visibility ${prependToggle ? 'pull-left' : ''}`}
-                        data-expanded={this.state.embedVisible}
-                        aria-label='Toggle Embed Visibility'
-                        onClick={this.toggleEmbedVisibility}
-                    />
-                );
-                if (prependToggle) {
-                    messageWithToggle.push(this.props.message);
-                } else {
-                    messageWithToggle.unshift(this.props.message);
-                }
-            } else {
+
+            // if message has only one line and starts with a link place toggle in this only line
+            // else - place it in new line between message and embed
+            const prependToggle = (/^\s*https?:\/\/.*$/).test(this.props.post.message);
+            messageWithToggle.push(
+                <a
+                    className={`post__embed-visibility ${prependToggle ? 'pull-left' : ''}`}
+                    data-expanded={this.state.embedVisible}
+                    aria-label='Toggle Embed Visibility'
+                    onClick={this.toggleEmbedVisibility}
+                />
+            );
+
+            if (prependToggle) {
                 messageWithToggle.push(this.props.message);
+            } else {
+                messageWithToggle.unshift(this.props.message);
             }
 
             return (
@@ -156,8 +158,12 @@ export default class PostBodyAdditionalContent extends React.Component {
     }
 }
 
+PostBodyAdditionalContent.defaultProps = {
+    previewCollapsed: 'false'
+};
 PostBodyAdditionalContent.propTypes = {
     post: React.PropTypes.object.isRequired,
+    message: React.PropTypes.element.isRequired,
     compactDisplay: React.PropTypes.bool,
-    message: React.PropTypes.element.isRequired
+    previewCollapsed: React.PropTypes.string
 };
diff --git a/webapp/components/post_view/components/post_list.jsx b/webapp/components/post_view/components/post_list.jsx
index 288609cd9..28be93544 100644
--- a/webapp/components/post_view/components/post_list.jsx
+++ b/webapp/components/post_view/components/post_list.jsx
@@ -260,6 +260,7 @@ export default class PostList extends React.Component {
                     center={this.props.displayPostsInCenter}
                     commentCount={commentCount}
                     compactDisplay={this.props.compactDisplay}
+                    previewCollapsed={this.props.previewsCollapsed}
                 />
             );
 
@@ -520,5 +521,6 @@ PostList.propTypes = {
     postsToHighlight: React.PropTypes.object,
     displayNameType: React.PropTypes.string,
     displayPostsInCenter: React.PropTypes.bool,
-    compactDisplay: React.PropTypes.bool
+    compactDisplay: React.PropTypes.bool,
+    previewsCollapsed: React.PropTypes.string
 };
diff --git a/webapp/components/post_view/post_view_controller.jsx b/webapp/components/post_view/post_view_controller.jsx
index d2866d8eb..e5a14af36 100644
--- a/webapp/components/post_view/post_view_controller.jsx
+++ b/webapp/components/post_view/post_view_controller.jsx
@@ -51,7 +51,8 @@ export default class PostViewController extends React.Component {
             scrollType: ScrollTypes.NEW_MESSAGE,
             displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'),
             displayPostsInCenter: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED,
-            compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT
+            compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT,
+            previewsCollapsed: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, 'false')
         };
     }
 
@@ -67,11 +68,19 @@ export default class PostViewController extends React.Component {
         }
     }
 
-    onPreferenceChange() {
+    onPreferenceChange(category) {
+        // Bit of a hack to force render when this setting is updated
+        // regardless of change
+        let previewSuffix = '';
+        if (category === Preferences.CATEGORY_DISPLAY_SETTINGS) {
+            previewSuffix = '_' + Utils.generateId();
+        }
+
         this.setState({
             displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'),
             displayPostsInCenter: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED,
-            compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT
+            compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT,
+            previewsCollapsed: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, 'false') + previewSuffix
         });
     }
 
@@ -132,6 +141,7 @@ export default class PostViewController extends React.Component {
                 displayNameType: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, 'name_format', 'false'),
                 displayPostsInCenter: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_CENTERED,
                 compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT,
+                previewsCollapsed: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.COLLAPSE_DISPLAY, 'false'),
                 scrollType: ScrollTypes.NEW_MESSAGE
             });
         }
@@ -183,6 +193,10 @@ export default class PostViewController extends React.Component {
             return true;
         }
 
+        if (nextState.previewsCollapsed !== this.state.previewsCollapsed) {
+            return true;
+        }
+
         if (nextState.lastViewed !== this.state.lastViewed) {
             return true;
         }
@@ -241,6 +255,7 @@ export default class PostViewController extends React.Component {
                     displayNameType={this.state.displayNameType}
                     displayPostsInCenter={this.state.displayPostsInCenter}
                     compactDisplay={this.state.compactDisplay}
+                    previewsCollapsed={this.state.previewsCollapsed}
                     lastViewed={this.state.lastViewed}
                 />
             );