[#1091] Made major overhaul of CommitsTable component which now poses…

…s a MobX store.

frontend/src/components/commits-table/CommitsTable.tsx

@@ -1,57 +1,57 @@
 /// <reference path='../common/Commits.d.ts' />
 
 import * as React from 'react';
+import * as moment from 'moment';
 import { observer } from 'mobx-react';
 
 import Row from './row/Row';
 import Footer from './footer/Footer';
 import Header from './header/Header';
 import Note from './note/Note';
-import { indexOf } from '../../utils/CommitUtils';
+import { revertDialog } from '../portal/portal';
 import { findIndex } from '../../utils/ArrayUtils';
 
-import './CommitsTable.less';
+import CommitRow from '../../stores/commitRow';
+import store from '../../stores/commitsTableStore';
 
-interface CommitsTableProps {
-  pages: number[];
-  commits: Commit[];
-  selectedCommits: Commit[];
-  enableActions: boolean;
-  diffProvider: {getDiff(hash: string): Promise<string>};
-  onUndo(hash: string, message: string): void;
-  onRollback(hash: string, date: string): void;
-  onCommitsSelect(commits: Commit[], isChecked: boolean, isShiftKey: boolean): void;
-}
+import './CommitsTable.less';
 
 @observer
-export default class CommitsTable extends React.Component<CommitsTableProps, {}> {
+export default class CommitsTable extends React.Component<{}, {}> {
 
   onSelectAllChange = (isChecked: boolean) => {
-    const { commits, onCommitsSelect } = this.props;
+    this.onCommitsSelect(store.commits, isChecked, false);
+  };
 
-    onCommitsSelect(commits, isChecked, false);
+  onUndo = (hash: string, message: string) => {
+    const title = (
+      <span>Undo <em>{message}</em>?</span>
+    );
+
+    revertDialog(title, () => store.undoCommits([hash]));
   };
 
-  renderRow = (commit: Commit, displayNotAbleNote: boolean) => {
-    const {
-      selectedCommits,
-      enableActions,
-      diffProvider,
-      onUndo,
-      onRollback,
-      onCommitsSelect,
-    } = this.props;
+  onRollback = (hash: string, date: string) => {
+    const title = (
+      <span>Roll back to <em>{moment(date).format('LLL')}</em>?</span>
+    );
+
+    revertDialog(title, () => store.rollbackToCommit(hash));
+  };
+
+  onCommitsSelect = (commitsToSelect: Commit[], isChecked: boolean, isShiftKey: boolean) => {
+    store.selectCommits(commitsToSelect, isChecked, isShiftKey);
+  };
 
+  renderRow = (commitRow: CommitRow, displayNotAbleNote: boolean) => {
     const row = (
       <Row
-        commit={commit}
-        enableActions={enableActions}
-        isSelected={indexOf(selectedCommits, commit) !== -1}
-        onUndo={onUndo}
-        onRollback={onRollback}
-        onCommitsSelect={onCommitsSelect}
-        diffProvider={diffProvider}
-        key={commit.hash}
+        commitRow={commitRow}
+        enableActions={store.enableActions}
+        onUndo={this.onUndo}
+        onRollback={this.onRollback}
+        onCommitsSelect={this.onCommitsSelect}
+        key={commitRow.commit.hash}
       />
     );
 
@@ -71,9 +71,11 @@ export default class CommitsTable extends React.Component<CommitsTableProps, {}>
     const {
       pages,
       commits,
-      selectedCommits,
+      commitRows,
       enableActions,
-    } = this.props;
+      selectableCommits,
+      areAllCommitsSelected,
+    } = store;
 
     const notAbleNoteIndex = findIndex(commits, (commit: Commit, index: number) => (
       !commit.isEnabled && index < commits.length - 1
@@ -82,13 +84,13 @@ export default class CommitsTable extends React.Component<CommitsTableProps, {}>
     return (
       <table className='vp-table widefat fixed'>
         <Header
-          commits={commits}
-          selectedCommits={selectedCommits}
+          areAllCommitsSelected={areAllCommitsSelected}
+          selectableCommitsCount={selectableCommits.length}
           enableActions={enableActions}
           onSelectAllChange={this.onSelectAllChange}
         />
-        {commits.map((commit: Commit, index: number) => (
-          this.renderRow(commit, index === notAbleNoteIndex)
+        {commitRows.map((commitRow: CommitRow, index: number) => (
+          this.renderRow(commitRow, index === notAbleNoteIndex)
         ))}
         <Footer pages={pages} />
       </table>

frontend/src/components/commits-table/header/Header.tsx

@@ -3,27 +3,27 @@ import * as React from 'react';
 import SelectAll from './SelectAll';
 
 interface HeaderProps {
-  commits: Commit[];
-  selectedCommits: Commit[];
+  areAllCommitsSelected: boolean;
   enableActions: boolean;
+  selectableCommitsCount: number;
   onSelectAllChange(isChecked: boolean): void;
 }
 
 const Header: React.StatelessComponent<HeaderProps> = (props) => {
   const {
-    commits,
-    selectedCommits,
+    areAllCommitsSelected,
     enableActions,
     onSelectAllChange,
+    selectableCommitsCount,
   } = props;
 
   return (
     <thead>
       <tr>
         <th className='column-environment'/>
         <SelectAll
-          commits={commits}
-          selectedCommits={selectedCommits}
+          isSelected={areAllCommitsSelected}
+          selectableCommitsCount={selectableCommitsCount}
           enableActions={enableActions}
           onChange={onSelectAllChange}
         />

frontend/src/components/commits-table/header/SelectAll.tsx

@@ -1,30 +1,24 @@
 import * as React from 'react';
-import * as _ from 'lodash';
 
 interface SelectAllProps {
-  commits: Commit[];
-  selectedCommits: Commit[];
+  isSelected: boolean;
+  selectableCommitsCount: number;
   enableActions: boolean;
   onChange(isChecked: boolean): void;
 }
 
 const SelectAll: React.StatelessComponent<SelectAllProps> = (props) => {
   const {
-    commits,
-    selectedCommits,
+    isSelected,
+    selectableCommitsCount,
     enableActions,
     onChange,
   } = props;
 
-  const selectableCommits = commits.filter((commit: Commit) => commit.canUndo);
-
-  if (selectableCommits.length === 0) {
+  if (selectableCommitsCount === 0) {
     return <th className='column-cb' />;
   }
 
-  const allSelected = !_.differenceBy(selectableCommits, selectedCommits, ((value: Commit) => value.hash)).length;
-  const isChecked = commits.length > 0 && allSelected;
-
   return (
     <th className='column-cb manage-column check-column'>
       <label
@@ -37,8 +31,8 @@ const SelectAll: React.StatelessComponent<SelectAllProps> = (props) => {
         type='checkbox'
         id='CommitsTable-selectAll'
         disabled={!enableActions}
-        checked={isChecked}
-        onChange={() => onChange(!isChecked)}
+        checked={isSelected}
+        onChange={() => onChange(!isSelected)}
       />
     </th>
   );

frontend/src/components/commits-table/row/Row.tsx

@@ -1,93 +1,45 @@
 /// <reference path='../../common/Commits.d.ts' />
 
 import * as React from 'react';
+import { observer } from 'mobx-react';
 
 import CommitDetails from '../commit-details/CommitDetails';
 import CommitSummary from '../commit-summary/CommitSummary';
 import Error from './Error';
 import DetailsLevel from '../../../enums/DetailsLevel';
 
+import CommitRow from "../../../stores/commitRow";
+
 interface RowProps {
-  commit: Commit;
+  commitRow: CommitRow;
   enableActions: boolean;
-  isSelected: boolean;
-  diffProvider: {getDiff(hash: string): Promise<string>};
   onUndo(hash: string, message: string): void;
   onRollback(hash: string, date: string): void;
   onCommitsSelect(commits: Commit[], isChecked: boolean, isShiftKey: boolean): void;
 }
 
-interface RowState {
-  detailsLevel?: DetailsLevel;
-  diff?: string;
-  error?: string;
-  isLoading?: boolean;
-}
-
-export default class Row extends React.Component<RowProps, RowState> {
-
-  state = {
-    detailsLevel: DetailsLevel.None,
-    diff: null,
-    error: null,
-    isLoading: false,
-  };
+@observer
+export default class Row extends React.Component<RowProps, {}> {
 
   onDetailsLevelChange = (detailsLevel: DetailsLevel) => {
-    const { diffProvider, commit } = this.props;
-    const { diff } = this.state;
-
-    if (detailsLevel === DetailsLevel.FullDiff && !diff) {
-      this.setLoading();
-
-      diffProvider.getDiff(commit.hash)
-        .then(this.handleSuccess(detailsLevel))
-        .catch(this.handleError(detailsLevel));
-      return;
-    }
-
-    this.setState({
-      detailsLevel: detailsLevel,
-      error: null,
-      isLoading: false,
-    });
-  };
-
-  private setLoading = () => {
-    this.setState({
-      isLoading: true,
-    });
-  };
-
-  private handleSuccess = (detailsLevel: DetailsLevel) => {
-    if (detailsLevel === DetailsLevel.FullDiff) {
-      return diff => this.setState({
-        detailsLevel: detailsLevel,
-        diff: diff,
-        error: null,
-        isLoading: false,
-      });
-    }
-  };
-
-  private handleError = (detailsLevel: DetailsLevel) => {
-    return err => this.setState({
-      detailsLevel: detailsLevel,
-      error: err.message,
-      isLoading: false,
-    });
+    this.props.commitRow.changeDetailsLevel(detailsLevel);
   };
 
   render() {
-    const { commit } = this.props;
-    const { detailsLevel, diff, error, isLoading } = this.state;
+    const { commitRow, enableActions, onUndo, onRollback, onCommitsSelect } = this.props;
+    const { commit, isSelected, detailsLevel, diff, error, isLoading } = commitRow;
 
     return (
       <tbody>
         <CommitSummary
+          commit={commit}
+          enableActions={enableActions}
+          isSelected={isSelected}
           detailsLevel={detailsLevel}
+          onUndo={onUndo}
+          onRollback={onRollback}
+          onCommitsSelect={onCommitsSelect}
           onDetailsLevelChange={this.onDetailsLevelChange}
-          {...this.props}
         />
         {error
           ? <Error message={error} />

frontend/src/components/home/HomePage.tsx

@@ -3,7 +3,6 @@
 
 import * as React from 'react';
 import * as ReactRouter from 'react-router';
-import * as moment from 'moment';
 import * as classNames from 'classnames';
 import { observer } from 'mobx-react';
 
@@ -15,8 +14,6 @@ import ServicePanel from '../service-panel/ServicePanel';
 import UpdateNotice from './update-notice/UpdateNotice';
 import VpTitle from './vp-title/VpTitle';
 import WelcomePanel from '../welcome-panel/WelcomePanel';
-import { revertDialog } from '../portal/portal';
-import { getDiff } from './utils';
 
 import appStore from '../../stores/appStore';
 
@@ -49,10 +46,6 @@ export default class HomePage extends React.Component<HomePageProps, {}> {
     appStore.fetchCommits(nextProps.params.page);
   }
 
-  onCommitsSelect = (commitsToSelect: Commit[], isChecked: boolean, isShiftKey: boolean) => {
-    appStore.selectCommits(commitsToSelect, isChecked, isShiftKey);
-  };
-
   onWelcomePanelHide = (e: React.MouseEvent) => {
     e.preventDefault();
 
@@ -65,27 +58,8 @@ export default class HomePage extends React.Component<HomePageProps, {}> {
     appStore.fetchCommits();
   };
 
-  onUndo = (hash: string, message: string) => {
-    const title = (
-      <span>Undo <em>{message}</em>?</span>
-    );
-
-    revertDialog(title, () => appStore.undoCommits([hash]));
-  };
-
-  onRollback = (hash: string, date: string) => {
-    const title = (
-      <span>Roll back to <em>{moment(date).format('LLL')}</em>?</span>
-    );
-
-    revertDialog(title, () => appStore.rollbackToCommit(hash));
-  };
-
   render() {
     const {
-      pages,
-      commits,
-      selectedCommits,
       isLoading,
       displayWelcomePanel,
       displayUpdateNotice,
@@ -113,16 +87,7 @@ export default class HomePage extends React.Component<HomePageProps, {}> {
           <UpdateNotice onClick={this.onUpdateNoticeClick} />
         }
         <Navigation />
-        <CommitsTable
-          pages={pages}
-          commits={commits}
-          selectedCommits={selectedCommits}
-          enableActions={!isDirtyWorkingDirectory}
-          diffProvider={{ getDiff: getDiff }}
-          onUndo={this.onUndo}
-          onRollback={this.onRollback}
-          onCommitsSelect={this.onCommitsSelect}
-        />
+        <CommitsTable />
       </div>
     );
   }