From 8a864af642fd9565877f311618d8f30840ebfbd5 Mon Sep 17 00:00:00 2001
From: gildas <gildas.garcia@gmail.com>
Date: Tue, 21 Feb 2017 10:19:04 +0100
Subject: [PATCH] [RFR] Admin Ergonomics - parsing summary

[Trello Card](https://trello.com/c/yDw7ffgB)

Move parsing summary inside the parsing box header

![screen](https://sc-cdn.scaleengine.net/i/c3fce5f3117081174a64f54ece1d19bd.png)
---
 src/app/js/admin/parsing/ParsingResult.js     | 41 +++----------------
 .../js/admin/parsing/ParsingResult.spec.js    | 17 +-------
 src/app/js/admin/parsing/ParsingSummary.js    | 38 -----------------
 .../js/admin/parsing/ParsingSummary.spec.js   | 18 --------
 .../js/admin/parsing/ParsingSummaryItem.js    | 35 ----------------
 .../admin/parsing/ParsingSummaryItem.spec.js  | 28 -------------
 src/app/js/i18n/translations/en.js            |  2 +-
 7 files changed, 8 insertions(+), 171 deletions(-)
 delete mode 100644 src/app/js/admin/parsing/ParsingSummary.js
 delete mode 100644 src/app/js/admin/parsing/ParsingSummary.spec.js
 delete mode 100644 src/app/js/admin/parsing/ParsingSummaryItem.js
 delete mode 100644 src/app/js/admin/parsing/ParsingSummaryItem.spec.js

diff --git a/src/app/js/admin/parsing/ParsingResult.js b/src/app/js/admin/parsing/ParsingResult.js
index 9f49866bf..9ce2f2e55 100644
--- a/src/app/js/admin/parsing/ParsingResult.js
+++ b/src/app/js/admin/parsing/ParsingResult.js
@@ -3,7 +3,7 @@ import compose from 'recompose/compose';
 import { connect } from 'react-redux';
 import translate from 'redux-polyglot/translate';
 
-import { CardActions, CardHeader, CardText } from 'material-ui/Card';
+import { CardHeader, CardText } from 'material-ui/Card';
 import FlatButton from 'material-ui/FlatButton';
 import { grey400 } from 'material-ui/styles/colors';
 import Card from '../../lib/Card';
@@ -16,7 +16,6 @@ import {
     fromParsing,
 } from '../selectors';
 import ParsingExcerpt from './ParsingExcerpt';
-import ParsingSummary from './ParsingSummary';
 
 const styles = {
     list: {
@@ -29,13 +28,6 @@ const styles = {
     listItem: {
         whiteSpace: 'nowrap',
     },
-    parsingContainer: {
-        display: 'flex',
-        justifyContent: 'space-between',
-    },
-    parsingRightSection: {
-        flexGrow: 2,
-    },
     title: {
         height: '36px',
         lineHeight: '36px',
@@ -47,17 +39,6 @@ const styles = {
 };
 
 export class ParsingResultComponent extends Component {
-    constructor() {
-        super();
-        this.state = {
-            showErrors: false,
-        };
-    }
-
-    handleShowExcerpt = () => {
-        this.setState({ showErrors: false });
-    }
-
     handleClearParsing = () => {
         event.preventDefault();
         event.stopPropagation();
@@ -71,13 +52,12 @@ export class ParsingResultComponent extends Component {
             totalLoadedLines,
             p: polyglot,
         } = this.props;
-        const { showErrors } = this.state;
 
         return (
             <Card className="parsingResult" initiallyExpanded>
                 <CardHeader
                     showExpandableButton
-                    title={polyglot.t('Parsing summary')}
+                    title={polyglot.t('parsing_summary', { count: totalLoadedLines })}
                     titleStyle={styles.title}
                 >
                     <FlatButton
@@ -86,20 +66,11 @@ export class ParsingResultComponent extends Component {
                         label={polyglot.t('Upload another file')}
                     />
                 </CardHeader>
-                <CardText style={styles.parsingContainer} expandable>
-                    <ParsingSummary
-                        onShowExcerpt={this.handleShowExcerpt}
-                        showErrors={showErrors}
-                        totalLoadedLines={totalLoadedLines}
+                <CardText expandable>
+                    <ParsingExcerpt
+                        columns={excerptColumns}
+                        lines={excerptLines}
                     />
-                    <div style={styles.parsingRightSection}>
-                        {!showErrors &&
-                            <ParsingExcerpt
-                                columns={excerptColumns}
-                                lines={excerptLines}
-                            />
-                        }
-                    </div>
                 </CardText>
             </Card>
         );
diff --git a/src/app/js/admin/parsing/ParsingResult.spec.js b/src/app/js/admin/parsing/ParsingResult.spec.js
index e2222a53d..ed890264a 100644
--- a/src/app/js/admin/parsing/ParsingResult.spec.js
+++ b/src/app/js/admin/parsing/ParsingResult.spec.js
@@ -2,29 +2,14 @@ import React from 'react';
 import expect from 'expect';
 import { shallow } from 'enzyme';
 import ParsingExcerpt from './ParsingExcerpt';
-import ParsingSummary from './ParsingSummary';
 
 import { ParsingResultComponent as ParsingResult } from './ParsingResult';
 
 describe('<ParsingResult />', () => {
-    it('should render the ParsingSummary', () => {
-        const wrapper = shallow(<ParsingResult
-            failedLines={[{}, {}]}
-            p={{ t: () => {} }}
-            totalLoadedLines={24}
-        />);
-
-        const parsingSummary = wrapper.find(ParsingSummary).at(0);
-
-        expect(parsingSummary.prop('showErrors')).toEqual(false);
-        expect(parsingSummary.prop('totalLoadedLines')).toEqual(24);
-    });
-
-    it('should render the ParsingExcerpt if showErrors is false', () => {
+    it('should render the ParsingExcerpt', () => {
         const wrapper = shallow(<ParsingResult
             excerptColumns={['foo']}
             excerptLines={['bar']}
-            failedLines={[]}
             p={{ t: () => {} }}
             totalLoadedLines={24}
         />);
diff --git a/src/app/js/admin/parsing/ParsingSummary.js b/src/app/js/admin/parsing/ParsingSummary.js
deleted file mode 100644
index e01ec9754..000000000
--- a/src/app/js/admin/parsing/ParsingSummary.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import React, { PropTypes } from 'react';
-import compose from 'recompose/compose';
-import translate from 'redux-polyglot/translate';
-import pure from 'recompose/pure';
-
-import { List, ListItem } from 'material-ui/List';
-
-import { polyglot as polyglotPropTypes } from '../../propTypes';
-import ParsingSummaryItem from './ParsingSummaryItem';
-
-const styles = {
-    ListItemTotalLoadedLines: {
-        cursor: 'default',
-    },
-};
-
-export const ParsingSummaryComponent = ({
-    p: polyglot,
-    totalLoadedLines,
-}) => (
-    <List>
-        <ListItem
-            hoverColor="none"
-            primaryText={<ParsingSummaryItem count={totalLoadedLines} label={polyglot.t('total lines')} />}
-            style={styles.ListItemTotalLoadedLines}
-        />
-    </List>
-);
-
-ParsingSummaryComponent.propTypes = {
-    p: polyglotPropTypes.isRequired,
-    totalLoadedLines: PropTypes.number.isRequired,
-};
-
-export default compose(
-    translate,
-    pure,
-)(ParsingSummaryComponent);
diff --git a/src/app/js/admin/parsing/ParsingSummary.spec.js b/src/app/js/admin/parsing/ParsingSummary.spec.js
deleted file mode 100644
index c3d56b685..000000000
--- a/src/app/js/admin/parsing/ParsingSummary.spec.js
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import expect from 'expect';
-import { shallow } from 'enzyme';
-import { ListItem } from 'material-ui/List';
-
-import { ParsingSummaryComponent as ParsingSummary } from './ParsingSummary';
-import ParsingSummaryItem from './ParsingSummaryItem';
-
-describe('<ParsingSummary />', () => {
-    it('should render the ListItem for totalLoadedLines', () => {
-        const wrapper = shallow(<ParsingSummary
-            p={{ t: key => key }}
-            totalLoadedLines={24}
-        />);
-        const line = wrapper.find(ListItem).at(0);
-        expect(line.prop('primaryText')).toEqual(<ParsingSummaryItem count={24} label="total lines" />);
-    });
-});
diff --git a/src/app/js/admin/parsing/ParsingSummaryItem.js b/src/app/js/admin/parsing/ParsingSummaryItem.js
deleted file mode 100644
index d9d17dc4a..000000000
--- a/src/app/js/admin/parsing/ParsingSummaryItem.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import React, { PropTypes } from 'react';
-import { grey500, grey800 } from 'material-ui/styles/colors';
-import pure from 'recompose/pure';
-
-const styles = {
-    ParsingSummaryItemContainer: {
-        display: 'flex',
-        flexDirection: 'column',
-    },
-    ParsingSummaryItemCount: (color = grey800) => ({
-        color,
-    }),
-    ParsingSummaryItemLabel: (color = grey500) => ({
-        color,
-    }),
-};
-
-export const ParsingSummaryItemComponent = ({ count, label, color }) => (
-    <div style={styles.ParsingSummaryItemContainer}>
-        <b style={styles.ParsingSummaryItemCount(color)}>{count}</b>
-        <small style={styles.ParsingSummaryItemLabel(color)}>{label}</small>
-    </div>
-);
-
-ParsingSummaryItemComponent.propTypes = {
-    color: PropTypes.string,
-    count: PropTypes.number.isRequired,
-    label: PropTypes.string.isRequired,
-};
-
-ParsingSummaryItemComponent.defaultProps = {
-    color: undefined,
-};
-
-export default pure(ParsingSummaryItemComponent);
diff --git a/src/app/js/admin/parsing/ParsingSummaryItem.spec.js b/src/app/js/admin/parsing/ParsingSummaryItem.spec.js
deleted file mode 100644
index 421390ab0..000000000
--- a/src/app/js/admin/parsing/ParsingSummaryItem.spec.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import expect from 'expect';
-import { shallow } from 'enzyme';
-import { grey500, grey800, red400 } from 'material-ui/styles/colors';
-
-import { ParsingSummaryItemComponent as ParsingSummaryItem } from './ParsingSummaryItem';
-
-describe('<ParsingSummaryItem />', () => {
-    it('should render the count', () => {
-        const wrapper = shallow(<ParsingSummaryItem count={10} label="foo" />);
-        expect(wrapper.contains(<b style={{ color: grey800 }}>{10}</b>)).toEqual(true);
-    });
-
-    it('should render the count with specified color', () => {
-        const wrapper = shallow(<ParsingSummaryItem count={10} label="foo" color={red400} />);
-        expect(wrapper.contains(<b style={{ color: red400 }}>{10}</b>)).toEqual(true);
-    });
-
-    it('should render the count', () => {
-        const wrapper = shallow(<ParsingSummaryItem count={10} label="foo" />);
-        expect(wrapper.contains(<small style={{ color: grey500 }}>foo</small>)).toEqual(true);
-    });
-
-    it('should render the count with specified color', () => {
-        const wrapper = shallow(<ParsingSummaryItem count={10} label="foo" color={red400} />);
-        expect(wrapper.contains(<small style={{ color: red400 }}>foo</small>)).toEqual(true);
-    });
-});
diff --git a/src/app/js/i18n/translations/en.js b/src/app/js/i18n/translations/en.js
index 9e183ffaf..03e47dd98 100644
--- a/src/app/js/i18n/translations/en.js
+++ b/src/app/js/i18n/translations/en.js
@@ -2,7 +2,7 @@
 export default {
     Admin: 'Admin',
     'Sign in': 'Sign in',
-    'Parsing summary': 'Parsing summary',
+    parsing_summary: 'Parsed %{count} lines',
     'total lines': 'total lines',
     'successfully parsed': 'successfully parsed',
     'with errors': 'with errors',