move content to redux, add lines to view

web/src/js/components/ContentView/ContentViews.jsx

@@ -1,6 +1,6 @@
 import React, { PropTypes, Component } from 'react'
 import { connect } from 'react-redux'
-import { setContentViewDescription, setShowFullContent } from '../../ducks/ui/flow'
+import { setContentViewDescription, setContent } from '../../ducks/ui/flow'
 import ContentLoader from './ContentLoader'
 import { MessageUtils } from '../../flow/utils'
 import CodeEditor from './CodeEditor'
@@ -30,28 +30,25 @@ function Edit({ content, onChange }) {
 Edit = ContentLoader(Edit)
 
 class ViewServer extends Component {
-    static defaultProps = {
-        maxLines: 80,
-    }
 
     componentWillMount(){
         this.setContentView(this.props)
     }
 
     componentWillReceiveProps(nextProps){
-        this.setContentView(nextProps)
+        if (nextProps.content != this.props.content) {
+            this.setContentView(nextProps)
+        }
     }
     setContentView(props){
         try {
             this.data = JSON.parse(props.content)
         }catch(err) {
-            this.data= {lines: [], description: err.message}
+            this.data = {lines: [], description: err.message}
         }
 
         props.setContentViewDescription(props.contentView != this.data.description ? this.data.description : '')
-
-        let isFullContentShown = this.data.lines.length < props.maxLines
-        if (isFullContentShown) props.setShowFullContent(true)
+        props.setContent(this.data.lines)
     }
     render() {
         const {content, contentView, message, maxLines} = this.props
@@ -78,11 +75,12 @@ class ViewServer extends Component {
 
 ViewServer = connect(
     state => ({
-        showFullContent: state.ui.flow.showFullContent
+        showFullContent: state.ui.flow.showFullContent,
+        maxLines: state.ui.flow.maxContentLines
     }),
     {
         setContentViewDescription,
-        setShowFullContent
+        setContent
     }
 )(ContentLoader(ViewServer))
 

web/src/js/components/ContentView/ShowFullContentButton.jsx

@@ -11,16 +11,23 @@ ShowFullContentButton.propTypes = {
         showFullContent: PropTypes.bool.isRequired
 }
 
-function ShowFullContentButton ( {setShowFullContent, showFullContent} ){
+function ShowFullContentButton ( {setShowFullContent, showFullContent, visibleLines, contentLines} ){
 
     return (
-        !showFullContent && <Button className="view-all-content-btn btn-xs" onClick={() => setShowFullContent(true)} text="Show full content"/>
+        !showFullContent &&
+            <div>
+                <Button className="view-all-content-btn btn-xs" onClick={() => setShowFullContent(true)} text="Show full content"/>
+                <span className="pull-right"> {visibleLines}/{contentLines} are visible &nbsp; </span>
+            </div>
     )
 }
 
 export default connect(
     state => ({
-        showFullContent: state.ui.flow.showFullContent
+        showFullContent: state.ui.flow.showFullContent,
+        visibleLines: state.ui.flow.maxContentLines,
+        contentLines: state.ui.flow.content.length
+
     }),
     {
         setShowFullContent

web/src/js/ducks/ui/flow.js

@@ -10,7 +10,8 @@ export const SET_CONTENT_VIEW               = 'UI_FLOWVIEW_SET_CONTENT_VIEW',
              UPDATE_EDIT                    = 'UI_FLOWVIEW_UPDATE_EDIT',
              UPLOAD_CONTENT                 = 'UI_FLOWVIEW_UPLOAD_CONTENT',
              SET_SHOW_FULL_CONTENT          = 'UI_SET_SHOW_FULL_CONTENT',
-             SET_CONTENT_VIEW_DESCRIPTION   = "UI_SET_CONTENT_VIEW_DESCRIPTION"
+             SET_CONTENT_VIEW_DESCRIPTION   = "UI_SET_CONTENT_VIEW_DESCRIPTION",
+             SET_CONTENT                    = "UI_SET_CONTENT"
 
 
 const defaultState = {
@@ -20,6 +21,8 @@ const defaultState = {
     modifiedFlow: false,
     contentView: 'Auto',
     tab: 'request',
+    content: [],
+    maxContentLines: 80,
 }
 
 export default function reducer(state = defaultState, action) {
@@ -94,6 +97,14 @@ export default function reducer(state = defaultState, action) {
                 showFullContent: action.contentView == 'Edit'
             }
 
+        case SET_CONTENT:
+            let isFullContentShown = action.content.length < state.maxContentLines
+            return {
+                ...state,
+                content: action.content,
+                showFullContent: isFullContentShown
+            }
+
         case DISPLAY_LARGE:
             return {
                 ...state,
@@ -136,6 +147,10 @@ export function updateEdit(update) {
     return { type: UPDATE_EDIT, update }
 }
 
+export function setContent(content){
+    return { type: SET_CONTENT, content}
+}
+
 export function stopEdit(flow, modifiedFlow) {
     let diff = getDiff(flow, modifiedFlow)
     return flowsActions.update(flow, diff)