From b0a1b4e2d14d670d70eb65b479bdfa38b826659a Mon Sep 17 00:00:00 2001
From: sveisvei <sveinung.rosaker@gmail.com>
Date: Fri, 9 Dec 2016 22:10:37 +0100
Subject: [PATCH] use table on compact diff view

---
 .../component/history/history-item-diff.jsx   | 16 ++++++------
 .../history/history-list-component.jsx        | 25 ++++++++++++++++---
 .../history/history-list-toggle-component.jsx |  7 +++---
 3 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/frontend/src/component/history/history-item-diff.jsx b/frontend/src/component/history/history-item-diff.jsx
index 0374073ab3..2471dc8367 100644
--- a/frontend/src/component/history/history-item-diff.jsx
+++ b/frontend/src/component/history/history-item-diff.jsx
@@ -10,7 +10,7 @@ const DIFF_PREFIXES = {
     N: '+',
 };
 
-const SPADEN_CLASS = {
+const KLASSES = {
     A: style.blue, // array edited
     E: style.blue, // edited
     D: style.negative, // deleted
@@ -32,13 +32,13 @@ function buildItemDiff (diff, key) {
     if (diff.lhs !== undefined) {
         change = (
             <div>
-                <div className={SPADEN_CLASS.D}>- {key}: {JSON.stringify(diff.lhs)}</div>
+                <div className={KLASSES.D}>- {key}: {JSON.stringify(diff.lhs)}</div>
             </div>
         );
     } else if (diff.rhs !== undefined) {
         change = (
             <div>
-                <div className={SPADEN_CLASS.N}>+ {key}: {JSON.stringify(diff.rhs)}</div>
+                <div className={KLASSES.N}>+ {key}: {JSON.stringify(diff.rhs)}</div>
             </div>
         );
     }
@@ -55,12 +55,12 @@ function buildDiff (diff, idx) {
     } else if (diff.lhs !== undefined && diff.rhs !== undefined) {
         change = (
             <div>
-                <div className={SPADEN_CLASS.D}>- {key}: {JSON.stringify(diff.lhs)}</div>
-                <div className={SPADEN_CLASS.N}>+ {key}: {JSON.stringify(diff.rhs)}</div>
+                <div className={KLASSES.D}>- {key}: {JSON.stringify(diff.lhs)}</div>
+                <div className={KLASSES.N}>+ {key}: {JSON.stringify(diff.rhs)}</div>
             </div>
         );
     } else {
-        const spadenClass = SPADEN_CLASS[diff.kind];
+        const spadenClass = KLASSES[diff.kind];
         const prefix      = DIFF_PREFIXES[diff.kind];
 
         change = (<div className={spadenClass}>{prefix} {key}: {JSON.stringify(diff.rhs || diff.item)}</div>);
@@ -84,7 +84,7 @@ class HistoryItem extends PureComponent {
             changes = logEntry.diffs.map(buildDiff);
         } else {
             // Just show the data if there is no diff yet.
-            changes = <div className={SPADEN_CLASS.N}>{JSON.stringify(logEntry.data, null, 2)}</div>;
+            changes = <div className={KLASSES.N}>{JSON.stringify(logEntry.data, null, 2)}</div>;
         }
 
         return <code className="smalltext man">{changes.length === 0 ? '(no changes)' : changes}</code>;
@@ -102,6 +102,8 @@ class HistoryItem extends PureComponent {
 
         const data = this.renderEventDiff(this.props.entry);
 
+        return data;
+
         return (
             <div className={style['history-item']}>
                 <dl>
diff --git a/frontend/src/component/history/history-list-component.jsx b/frontend/src/component/history/history-list-component.jsx
index d13ecfc3ea..da0cb954cc 100644
--- a/frontend/src/component/history/history-list-component.jsx
+++ b/frontend/src/component/history/history-list-component.jsx
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import HistoryItemDiff from './history-item-diff';
 import HistoryItemJson from './history-item-json';
-import { Switch } from 'react-mdl';
+import { Switch, Table, TableHeader, Grid, Cell } from 'react-mdl';
 
 import style from './history.scss';
 
@@ -23,13 +23,30 @@ class HistoryList extends Component {
         if (showData) {
             entries =  history.map((entry) => <HistoryItemJson  key={`log${entry.id}`} entry={entry} />);
         } else {
-            entries =  history.map((entry) => <HistoryItemDiff  key={`log${entry.id}`} entry={entry} />);
+            entries = (<Table
+                    sortable
+                    rows={
+                        history.map((entry) => Object.assign({
+                            diff: (<HistoryItemDiff  entry={entry} />),
+                        }, entry))
+                    }
+                    style={{ width: '100%' }}
+                >
+                <TableHeader name="type">Type</TableHeader>
+                <TableHeader name="createdBy">User</TableHeader>
+                <TableHeader name="diff">Diff</TableHeader>
+                <TableHeader numeric name="createdAt">Time</TableHeader>
+            </Table>);
         }
 
         return (
             <div className={style.history}>
-                <Switch checked={showData} onChange={this.toggleShowDiff.bind(this)}>Show full events</Switch>
-               {entries}
+                <Grid>
+                    <Cell>
+                         <Switch checked={showData} onChange={this.toggleShowDiff.bind(this)}>Show full events</Switch>
+                    </Cell>
+                </Grid>
+                {entries}
             </div>
         );
     }
diff --git a/frontend/src/component/history/history-list-toggle-component.jsx b/frontend/src/component/history/history-list-toggle-component.jsx
index 28ba996613..a0dc2ff342 100644
--- a/frontend/src/component/history/history-list-toggle-component.jsx
+++ b/frontend/src/component/history/history-list-toggle-component.jsx
@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import ListComponent from './history-list-container';
+import { Link } from 'react-router';
 
 class HistoryListToggle extends Component {
 
@@ -17,11 +18,11 @@ class HistoryListToggle extends Component {
         if (!this.props.history || this.props.history.length === 0) {
             return <span>fetching..</span>;
         }
-
+        const { history, toggleName } = this.props;
         return (
             <div>
-                <h5>Showing history for toggle: <strong>{this.props.toggleName}</strong></h5>
-                <ListComponent history={this.props.history} />
+                <h5>Showing history for toggle: <Link to={`/features/edit/${toggleName}`}><strong>{toggleName}</strong></Link></h5>
+                <ListComponent history={history} />
             </div>
         );
     }