[#609] Displayed environment in the commit list

frontend/src/Commits/CommitOverview.react.tsx

@@ -69,6 +69,7 @@ export default class CommitOverview extends React.Component<CommitOverviewProps,
     return (
       <ul className='overview-list'>
         {this.formatChanges(this.props.commit.changes).map((line, i) => <li key={i}>{line}</li>)}
+        {this.renderEnvironment()}
       </ul>
     );
   }
@@ -291,6 +292,14 @@ export default class CommitOverview extends React.Component<CommitOverviewProps,
     );
   }
 
+  private renderEnvironment() {
+    return (
+      <li className='environment'>
+        <em>Environment: {this.props.commit.environment}</em>
+      </li>
+    )
+  }
+
   private expandList(listKey) {
     let expandedLists = this.state.expandedLists;
     let newExpandedLists = expandedLists.concat([listKey]);

frontend/src/Commits/CommitsTable.less

@@ -80,7 +80,44 @@
   }
 
   .column-cb {
-    width: 32px;
+    cursor: pointer;
+    width: 38px !important;
+    padding: 8px 10px 8px 10px !important;
+
+    input[type=checkbox] {
+      vertical-align: middle;
+      margin: -4px 0 0 0 !important;
+    }
+
+    &:hover input[type=checkbox] {
+      border: 1px solid #5b9dd9;
+      box-shadow: 0 0 2px rgba(30, 140, 190, 0.8);
+    }
+  }
+
+  .column-environment {
+    position: relative;
+    padding: 0 !important;
+    overflow: visible !important;
+    width: 12px;
+
+    div {
+      position: absolute;
+      white-space: nowrap;
+      overflow: hidden;
+      height: 100%;
+      max-width: 6px;
+      padding: 8px 0 8px 6px;
+      color: #fff;
+      transition: max-width,padding 0.3s;
+    }
+
+    &:hover {
+      div {
+        max-width: 200px;
+        padding: 8px 10px 8px 20px;
+      }
+    }
   }
 
   .column-date {
@@ -205,6 +242,10 @@
       li {
         margin: 0;
       }
+
+      .environment {
+        margin-top: 8px;
+      }
     }
   }
 

frontend/src/Commits/CommitsTable.react.tsx

@@ -45,6 +45,7 @@ export default class CommitsTable extends React.Component<CommitsTableProps, {}>
       <table className='vp-table widefat fixed'>
         <thead>
           <tr>
+            <th className='column-environment' />
             {this.renderSelectAll()}
             <th className='column-date'>Date</th>
             <th className='column-message'>Message</th>
@@ -77,7 +78,7 @@ export default class CommitsTable extends React.Component<CommitsTableProps, {}>
         })}
         <tfoot>
           <tr>
-            <td className='vp-table-pagination' colSpan={4}>
+            <td className='vp-table-pagination' colSpan={5}>
               {this.props.pages.map((page: number) => {
                 return <Link
                           activeClassName='active'

frontend/src/Commits/CommitsTableNote.react.tsx

@@ -11,7 +11,7 @@ export default class CommitsTableNote extends React.Component<CommitsTableNotePr
   render() {
     return (
       <tr className='note'>
-        <td colSpan={4}>{this.props.message}</td>
+        <td colSpan={5}>{this.props.message}</td>
       </tr>
     );
   }

frontend/src/Commits/CommitsTableRow.react.tsx

@@ -58,7 +58,7 @@ export default class CommitsTableRow extends React.Component<CommitsTableRowProp
   renderError() {
     return (
       <tr className='details-row error'>
-        <td colSpan={4}>{this.state.error}</td>
+        <td colSpan={5}>{this.state.error}</td>
       </tr>
     );
   }

frontend/src/Commits/CommitsTableRowDetails.react.tsx

@@ -32,6 +32,7 @@ export default class CommitsTableRowDetails extends React.Component<CommitsTable
 
     const overviewRow = (
       <tr className={className}>
+        <td />
         <td />
         <td />
         <td>
@@ -47,7 +48,7 @@ export default class CommitsTableRowDetails extends React.Component<CommitsTable
 
     const fullDiffRow = (
       <tr className={className}>
-        <td colSpan={4}>
+        <td colSpan={5}>
           <div className={detailsClass}>
             <DiffPanel diff={this.props.diff} />
           </div>

frontend/src/Commits/CommitsTableRowSummary.react.tsx

@@ -5,6 +5,7 @@ import * as React from 'react';
 import * as moment from 'moment';
 import * as portal from '../common/portal';
 import {UndoDisabledDialog} from '../Commits/revertDialog';
+import {getGitBranchColor} from '../services/GitBranchColorProvider';
 
 interface CommitsTableRowSummaryProps extends React.Props<JSX.Element> {
   commit: Commit;
@@ -28,6 +29,12 @@ export default class CommitsTableRowSummary extends React.Component<CommitsTable
 
     return (
       <tr className={className} onClick={() => this.toggleDetails()}>
+        <td className='column-environment'>
+          {commit.environment === '?'
+            ? null
+            : <div style={{backgroundColor: getGitBranchColor(commit.environment)}}>{commit.environment}</div>
+          }
+        </td>
         {commit.canUndo
           ? <td className='column-cb' onClick={this.onCheckboxClick.bind(this)}><input type='checkbox'
                                                                                        checked={this.props.isSelected}

frontend/src/services/GitBranchColorProvider.ts

@@ -0,0 +1,25 @@
+const colors = ["#2ecc71", "#3498db", "#f1c40f", "#8e44ad", "#e67e22", "#2c3e50", "#bdc3c7", "#c0392b", "#1abc9c", "#2980b9", "#f39c12", "#9b59b6", "#7f8c8d", "#00ff66", "#1f7a43", "#00d8e6"];
+function hasValue(obj, value) {
+  return Object.keys(obj).some((key) => obj[key] == value);
+}
+
+export const getGitBranchColor = (function() {
+  const memo = {
+    'master': '#e74c3c'
+  };
+
+  function func(branchName: string) {
+    if (branchName in memo) {
+      return memo[branchName];
+    } else {
+      const unusedColors = colors.filter((item: string) => !hasValue(memo, item));
+      const color = unusedColors.length > 0
+        ? unusedColors[0]
+        : colors[Object.keys(memo).length % colors.length - 1];
+      memo[branchName] = color;
+      return color;
+    }
+  }
+
+  return func;
+})();