Merge pull request #448 from telamonian/simple_staging_refactored

Simplify the staging UI to make it easier for git beginners

Author: fcollonval

babel.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  "sourceMap": "inline",
   presets: [
     [
       '@babel/preset-env',

jest.config.js

@@ -3,6 +3,7 @@ var tsConfig = require ('./tsconfig.json');
 var tsOptions = tsConfig["compilerOptions"];
 // Need as the test folder is not visible from the src folder
 tsOptions["rootDir"] = null;
+tsOptions["inlineSourceMap"] = true;
 
 module.exports = {
   automock: false,

jupyterlab_git/git.py

@@ -377,7 +377,7 @@ def branch(self, current_path):
             return remotes
 
         # all's good; concatenate results and return
-        return {"code": 0, "branches": heads["branches"] + remotes["branches"]}
+        return {"code": 0, "branches": heads["branches"] + remotes["branches"], "current_branch": heads["current_branch"]}
 
     def branch_heads(self, current_path):
         """
@@ -393,37 +393,43 @@ def branch_heads(self, current_path):
         )
         output, error = p.communicate()
         if p.returncode == 0:
-            current_branch_seen = False
+            current_branch = None
             results = []
             try:
                 for name,commit_sha,upstream_name,is_current_branch in (line.split('\t') for line in output.decode("utf-8").splitlines()):
                     # Format reference : https://git-scm.com/docs/git-for-each-ref#_field_names
                     is_current_branch = bool(is_current_branch.strip())
-                    current_branch_seen |= is_current_branch
 
-                    results.append({
+                    branch = {
                         "is_current_branch": is_current_branch,
                         "is_remote_branch": False,
                         "name": name,
                         "upstream": upstream_name if upstream_name else None,
                         "top_commit": commit_sha,
                         "tag": None,
-                    })
+                    }
+                    results.append(branch)
+                    if is_current_branch:
+                        current_branch = branch
 
                 # Remote branch is seleted use 'git branch -a' as fallback machanism
                 # to get add detached head on remote branch to preserve older functionality
                 # TODO : Revisit this to checkout new local branch with same name as remote
                 # when the remote branch is seleted, VS Code git does the same thing.
-                if not current_branch_seen and self.get_current_branch(current_path) == "HEAD":
-                    results.append({
+                if not current_branch and self.get_current_branch(current_path) == "HEAD":
+                    branch = {
                         "is_current_branch": True,
                         "is_remote_branch": False,
                         "name": self._get_detached_head_name(current_path),
                         "upstream": None,
                         "top_commit": None,
                         "tag": None,
-                    })
-                return {"code": p.returncode, "branches": results}
+                    }
+                    results.append(branch)
+                    current_branch = branch
+
+                return {"code": p.returncode, "branches": results, "current_branch": current_branch}
+
             except Exception as downstream_error:
                 return {
                     "code": -1,
@@ -529,6 +535,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
 
@@ -584,8 +594,12 @@ def reset_to_commit(self, commit_id, top_repo_path):
         """
         Reset the current branch to a specific past commit.
         """
+        cmd = ["git", "reset", "--hard"]
+        if commit_id:
+            cmd.append(commit_id)
+
         my_output = subprocess.check_output(
-            ["git", "reset", "--hard", commit_id], cwd=top_repo_path
+            cmd, cwd=top_repo_path
         )
         return my_output
 

jupyterlab_git/tests/test_branch.py

@@ -710,7 +710,15 @@ def test_branch_success(mock_subproc_popen):
                 'top_commit': 'abcdefghijklmnopqrstuvwxyz01234567890123',
                 'tag': None,
             }
-        ]
+        ],
+        'current_branch': {
+            'is_current_branch': True,
+            'is_remote_branch': False,
+            'name': 'feature-foo',
+            'upstream': 'origin/feature-foo',
+            'top_commit': 'abcdefghijklmnopqrstuvwxyz01234567890123',
+            'tag': None,
+        }
     }
 
     # When
@@ -832,7 +840,15 @@ def test_branch_success_detached_head(mock_subproc_popen):
                 'top_commit': 'abcdefghijklmnopqrstuvwxyz01234567890123',
                 'tag': None,
             }
-        ]
+        ],
+        'current_branch': {
+            'is_current_branch': True,
+            'is_remote_branch': False,
+            'name': '(HEAD detached at origin/feature-foo)',
+            'upstream': None,
+            'top_commit': None,
+            'tag': None,
+        }
     }
 
     # When

schema/plugin.json

@@ -10,6 +10,12 @@
       "title": "History count",
       "description": "Number of (most recent) commits shown in the history log",
       "default": 25
+    },
+    "simpleStaging": {
+      "type": "boolean",
+      "title": "Simple staging flag",
+      "description": "If true, use a simplified concept of staging. Only files with changes are shown (instead of showing staged/changed/untracked), and all files with changes will be automatically staged",
+      "default": false
     }
   }
 }

src/components/CommitBox.tsx

@@ -10,16 +10,15 @@ import {
 } from '../style/BranchHeaderStyle';
 
 export interface ICommitBoxProps {
-  hasStagedFiles: boolean;
-  commitAllStagedFiles: (message: string) => Promise<void>;
+  hasFiles: boolean;
+  commitFunc: (message: string) => Promise<void>;
 }
 
 export interface ICommitBoxState {
   /**
    * Commit message
    */
   value: string;
-  disableSubmit: boolean;
 }
 
 export class CommitBox extends React.Component<
@@ -29,8 +28,7 @@ export class CommitBox extends React.Component<
   constructor(props: ICommitBoxProps) {
     super(props);
     this.state = {
-      value: '',
-      disableSubmit: true
+      value: ''
     };
   }
 
@@ -45,28 +43,19 @@ export class CommitBox extends React.Component<
   /** Initalize commit message input box */
   initializeInput = (): void => {
     this.setState({
-      value: '',
-      disableSubmit: true
+      value: ''
     });
   };
 
   /** Handle input inside commit message box */
   handleChange = (event: any): void => {
-    if (event.target.value && event.target.value !== '') {
-      this.setState({
-        value: event.target.value,
-        disableSubmit: false
-      });
-    } else {
-      this.setState({
-        value: event.target.value,
-        disableSubmit: true
-      });
-    }
+    this.setState({
+      value: event.target.value
+    });
   };
 
   /** 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);
@@ -86,22 +75,22 @@ export class CommitBox extends React.Component<
       >
         <textarea
           className={classes(textInputStyle, stagedCommitMessageStyle)}
-          disabled={!this.props.hasStagedFiles}
+          disabled={!this.props.hasFiles}
           placeholder={
-            this.props.hasStagedFiles
+            this.props.hasFiles
               ? 'Input message to commit staged changes'
               : 'Stage your changes before commit'
           }
           value={this.state.value}
           onChange={this.handleChange}
         />
         <input
-          className={this.checkReadyForSubmit(this.props.hasStagedFiles)}
+          className={this.commitButtonStyle(this.props.hasFiles)}
           type="button"
           title="Commit"
-          disabled={this.state.disableSubmit}
+          disabled={!(this.props.hasFiles && this.state.value)}
           onClick={() => {
-            this.props.commitAllStagedFiles(this.state.value);
+            this.props.commitFunc(this.state.value);
             this.initializeInput();
           }}
         />

src/components/FileItem.tsx

@@ -123,7 +123,7 @@ export class FileItem extends React.Component<IFileItemProps, {}> {
     }
   }
 
-  getFileLableIconClass() {
+  getFileLabelIconClass() {
     if (this.showDiscardWarning()) {
       return classes(fileIconStyle, parseFileExtension(this.props.file.to));
     } else {
@@ -248,7 +248,7 @@ export class FileItem extends React.Component<IFileItemProps, {}> {
             this.props.moveFile(this.props.file.to);
           }}
         />
-        <span className={this.getFileLableIconClass()} />
+        <span className={this.getFileLabelIconClass()} />
         <span
           className={this.getFileLabelClass()}
           onContextMenu={e => {