basic functionality acheived for github-desktop-like simple staging

Author: telamonian

jupyterlab_git/git.py

@@ -529,6 +529,10 @@ def add(self, filename, top_repo_path):
         """
         Execute git add<filename> command & return the result.
         """
+        if not isinstance(filename, str):
+            # assume filename is a sequence
+            filename = ' '.join(filename)
+
         my_output = subprocess.check_output(["git", "add", filename], cwd=top_repo_path)
         return my_output
 

src/components/CommitBox.tsx

@@ -55,7 +55,7 @@ export class CommitBox extends React.Component<
   };
 
   /** Update state of commit message input box */
-  checkReadyForSubmit = (hasStagedFiles: boolean) => {
+  commitButtonStyle = (hasStagedFiles: boolean) => {
     if (hasStagedFiles) {
       if (this.state.value.length === 0) {
         return classes(stagedCommitButtonStyle, stagedCommitButtonReadyStyle);
@@ -85,7 +85,7 @@ export class CommitBox extends React.Component<
           onChange={this.handleChange}
         />
         <input
-          className={this.checkReadyForSubmit(this.props.hasFiles)}
+          className={this.commitButtonStyle(this.props.hasFiles)}
           type="button"
           title="Commit"
           disabled={!(this.props.hasFiles && this.state.value)}

src/components/FileList.tsx

@@ -4,7 +4,7 @@ import { IRenderMimeRegistry } from '@jupyterlab/rendermime';
 import { JSONObject } from '@phosphor/coreutils';
 import { Menu } from '@phosphor/widgets';
 import * as React from 'react';
-import { GitExtension } from '../model';
+import { BranchMarker, GitExtension } from '../model';
 import {
   moveFileDownButtonSelectedStyle,
   moveFileDownButtonStyle,
@@ -56,6 +56,7 @@ export interface IFileListProps {
   stagedFiles: Git.IStatusFileResult[];
   unstagedFiles: Git.IStatusFileResult[];
   untrackedFiles: Git.IStatusFileResult[];
+  marker: BranchMarker;
   model: GitExtension;
   renderMime: IRenderMimeRegistry;
   settings: ISettingRegistry.ISettings;
@@ -146,7 +147,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
         label: 'Stage',
         caption: 'Stage the changes of selected file',
         execute: () => {
-          this.addUnstagedFile(this.state.contextMenuFile);
+          this.addFile(this.state.contextMenuFile);
         }
       });
     }
@@ -156,7 +157,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
         label: 'Track',
         caption: 'Start tracking selected file',
         execute: () => {
-          this.addUntrackedFile(this.state.contextMenuFile);
+          this.addFile(this.state.contextMenuFile);
         }
       });
     }
@@ -341,8 +342,8 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
   };
 
   /** Add a specific unstaged file */
-  addUnstagedFile = async (file: string) => {
-    await this.props.model.add(file);
+  addFile = async (...file: string[]) => {
+    await this.props.model.add(...file);
   };
 
   /** Discard changes in a specific unstaged or staged file */
@@ -362,9 +363,8 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
     await this.props.model.addAllUntracked();
   };
 
-  /** Add a specific untracked file */
-  addUntrackedFile = async (file: string) => {
-    await this.props.model.add(file);
+  addAllMarkedFiles = async () => {
+    await this.addFile(...this.markedFiles.map(file => file.to));
   };
 
   disableStagesForDiscardAll = () => {
@@ -404,6 +404,29 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
     }
   };
 
+  /** Commit all marked files */
+  commitAllMarkedFiles = async (message: string): Promise<void> => {
+    await this.resetAllStagedFiles();
+    await this.addAllMarkedFiles();
+    await this.commitAllStagedFiles(message);
+  };
+
+  get markedFiles() {
+    return this.allFilesExcludingUnmodified.filter(file =>
+      this.props.marker.get(file.to)
+    );
+  }
+
+  get allFilesExcludingUnmodified() {
+    let files = this.props.untrackedFiles.concat(
+      this.props.unstagedFiles,
+      this.props.stagedFiles
+    );
+
+    files.sort((a, b) => a.to.localeCompare(b.to));
+    return files;
+  }
+
   render() {
     const sharedProps = {
       model: this.props.model,
@@ -449,7 +472,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
         moveAllFiles={this.addAllUnstagedFiles}
         discardAllFiles={this.discardAllUnstagedFiles}
         discardFile={this.discardChanges}
-        moveFile={this.addUnstagedFile}
+        moveFile={this.addFile}
         moveFileIconClass={moveFileUpButtonStyle}
         moveFileIconSelectedClass={moveFileUpButtonSelectedStyle}
         moveAllFilesTitle={'Stage all changes'}
@@ -471,7 +494,7 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
         moveAllFiles={this.addAllUntrackedFiles}
         discardAllFiles={null}
         discardFile={null}
-        moveFile={this.addUntrackedFile}
+        moveFile={this.addFile}
         moveFileIconClass={moveFileUpButtonStyle}
         moveFileIconSelectedClass={moveFileUpButtonSelectedStyle}
         moveAllFilesTitle={'Track all untracked files'}
@@ -484,46 +507,41 @@ export class FileList extends React.Component<IFileListProps, IFileListState> {
       />
     );
 
-    const allFilesExcludingUnmodified = () => {
-      let files = this.props.untrackedFiles.concat(
-        this.props.unstagedFiles,
-        this.props.stagedFiles
-      );
-
-      files.sort((a, b) => a.to.localeCompare(b.to));
-      return files;
-    };
-
-    return (
-      <div onContextMenu={event => event.preventDefault()}>
-        <CommitBox
-          hasFiles={this.props.stagedFiles.length > 0}
-          commitFunc={this.commitAllStagedFiles}
-        />
-        {this.props.settings.composite['simpleStaging'] ? (
+    if (this.props.settings.composite['simpleStaging']) {
+      return (
+        <div>
+          <CommitBox
+            hasFiles={this.markedFiles.length > 0}
+            commitFunc={this.commitAllMarkedFiles}
+          />
           <div>
             <GitStageSimple
               heading={'Changed'}
-              files={allFilesExcludingUnmodified()}
-              marker={this.props.model.getMarker(
-                this.props.model.pathRepository,
-                ''
-              )}
+              files={this.allFilesExcludingUnmodified}
+              marker={this.props.marker}
               model={this.props.model}
               discardAllFiles={this.discardAllChanges}
               discardFile={this.discardChanges}
               renderMime={this.props.renderMime}
             />
           </div>
-        ) : (
+        </div>
+      );
+    } else {
+      return (
+        <div onContextMenu={event => event.preventDefault()}>
+          <CommitBox
+            hasFiles={this.props.stagedFiles.length > 0}
+            commitFunc={this.commitAllStagedFiles}
+          />
           <div>
             <Staged />
             <Changed />
             <Untracked />
           </div>
-        )}
-      </div>
-    );
+        </div>
+      );
+    }
   }
 
   /**

src/components/GitPanel.tsx

@@ -208,6 +208,10 @@ export class GitPanel extends React.Component<
           stagedFiles={this.state.stagedFiles}
           unstagedFiles={this.state.unstagedFiles}
           untrackedFiles={this.state.untrackedFiles}
+          marker={this.props.model.getMarker(
+            this.props.model.pathRepository,
+            this.state.currentBranch
+          )}
           model={this.props.model}
           renderMime={this.props.renderMime}
           settings={this.props.settings}

src/model.ts

@@ -439,7 +439,7 @@ export class GitExtension implements IGitExtension, IDisposable {
   /** Make request to add one or all files into
    * the staging area in repository
    */
-  async add(filename?: string): Promise<Response> {
+  async add(...filename: string[]): Promise<Response> {
     await this.ready;
     const path = this.pathRepository;
 
@@ -455,8 +455,8 @@ export class GitExtension implements IGitExtension, IDisposable {
     }
 
     const response = await httpGitRequest('/git/add', 'POST', {
-      add_all: filename === undefined,
-      filename: filename === undefined ? null : filename,
+      add_all: !filename,
+      filename: filename || '',
       top_repo_path: path
     });
 

tests/test-components/CommitBox.spec.tsx

@@ -15,7 +15,7 @@ describe('CommitBox', () => {
         hasFiles: true
       });
 
-      let actual = box.checkReadyForSubmit(true);
+      let actual = box.commitButtonStyle(true);
 
       let expected = classes(
         stagedCommitButtonStyle,
@@ -30,7 +30,7 @@ describe('CommitBox', () => {
         hasFiles: true
       });
 
-      let actual = box.checkReadyForSubmit(false);
+      let actual = box.commitButtonStyle(false);
       let expected = classes(
         stagedCommitButtonStyle,
         stagedCommitButtonDisabledStyle
@@ -48,7 +48,7 @@ describe('CommitBox', () => {
           value: 'message'
         },
         () => {
-          let actual = box.checkReadyForSubmit(true);
+          let actual = box.commitButtonStyle(true);
 
           let expected = stagedCommitButtonStyle;
           expect(actual).toEqual(expected);