Git branch plugin (#883)

* Re-implement git branch with no additions

* Create + use button abstraction

* Add checkout button to git branch

* Fix types

* Add reloading

* Fix lint

Author: drew-gross

src/plugins/GitBranch.tsx

@@ -0,0 +1,96 @@
+import * as React from "react";
+import {PluginManager} from "../PluginManager";
+import {isEqual} from "lodash";
+import {
+  branches,
+  Branch,
+  repoRoot,
+  GitDirectoryPath,
+  isGitDirectory,
+} from "../utils/Git";
+import {colors, background} from "../views/css/colors";
+import {executeCommand} from "../PTY";
+import Button from "./autocompletion_utils/Button";
+import {failurize} from "../views/css/functions";
+
+const errorMessageStyles = {
+  whiteSpace: "pre",
+  padding: "10px",
+  background: failurize(background),
+};
+
+interface GitBranchProps {
+  branches: Branch[];
+  repoRoot: GitDirectoryPath;
+};
+
+interface GitBranchState {
+  failReason: string | undefined;
+  branches: Branch[];
+};
+
+class GitBranchComponent extends React.Component<GitBranchProps, GitBranchState> {
+  constructor(props: GitBranchProps) {
+    super(props);
+
+    this.state = {
+      failReason: undefined,
+      branches: props.branches,
+    };
+  }
+
+  async reload() {
+    const newBranches: Branch[] = await branches({
+      directory: this.props.repoRoot,
+      remotes: false,
+      tags: false,
+    });
+    this.setState({
+      branches: newBranches,
+      failReason: undefined,
+    });
+  }
+
+  render(): any {
+    return <div>
+      {this.state.failReason ? <div style={errorMessageStyles}>{this.state.failReason}</div> : undefined}
+      <div style={{ padding: "10px" }}>
+        {this.state.branches.map((branch, index) =>
+          <div key={index.toString()} style={branch.isCurrent() ? {color: colors.green} : {}}>
+            <span style={{whiteSpace: "pre"}}>{branch.isCurrent() ? "* " : "  "}{branch.toString()}</span>
+            <Button onClick={async () => {
+              try {
+                await executeCommand("git", ["checkout", branch.toString()], this.props.repoRoot);
+                this.reload();
+              } catch (e) {
+                this.setState({ failReason: e.message } as GitBranchState);
+              }
+            }}>Checkout</Button>
+          </div>
+        )}
+      </div>
+    </div>;
+  }
+}
+
+PluginManager.registerCommandInterceptorPlugin({
+  intercept: async({ presentWorkingDirectory }): Promise<React.ReactElement<any>> => {
+    if (await isGitDirectory(presentWorkingDirectory)) {
+      const gitBranches: Branch[] = await branches({
+        directory: presentWorkingDirectory as GitDirectoryPath,
+        remotes: false,
+        tags: false,
+      });
+      return <GitBranchComponent
+        branches={gitBranches}
+        repoRoot={await repoRoot(presentWorkingDirectory as GitDirectoryPath)}
+      />;
+    } else {
+      return <div style={{ padding: "10px" }}>fatal: Not a git repository (or any of the parent directories): .git</div>;
+    }
+  },
+
+  isApplicable: ({ command }): boolean => {
+    return isEqual(command, ["git", "branch"]);
+  },
+});

src/plugins/GitStatus.tsx

@@ -1,30 +1,26 @@
 import * as React from "react";
 import {PluginManager} from "../PluginManager";
 import {isEqual} from "lodash";
-import {status, FileStatus, branches, Branch, repoRoot} from "../utils/Git";
+import {
+  status,
+  FileStatus,
+  branches,
+  Branch,
+  repoRoot,
+  isGitDirectory,
+  GitDirectoryPath,
+} from "../utils/Git";
 import {colors} from "../views/css/colors";
 import {executeCommand} from "../PTY";
 import Link from "../utils/Link";
 import {join} from "path";
+import Button from "./autocompletion_utils/Button";
 
 const gitStatusStyle = (color: string) => ({
   lineHeight: "18px",
   color: color,
 });
 
-const buttonStyles = {
-  borderColor: colors.blue,
-  borderStyle: "solid",
-  borderRadius: "4px",
-  borderWidth: "1px",
-  padding: "2px",
-  color: colors.blue,
-  WebkitUserSelect: "none",
-  fontSize: "10px",
-  margin: "4px",
-  cursor: "pointer",
-};
-
 interface GitStatusProps {
   currentBranch: Branch | undefined;
   gitStatus: FileStatus[];
@@ -61,13 +57,9 @@ const GitStatusFile: React.StatelessComponent<GitStatusFileProps> = ({
       {separator}
       <Link absolutePath={absolutePath}>{path}</Link>
     </span>
-    {buttons.map(({buttonText, action}, index) => <span
-      style={buttonStyles}
-      onClick={action}
-      key={index.toString()}
-    >
-      {buttonText}
-    </span>)}
+    {buttons.map(({buttonText, action}, index) =>
+      <Button key={index.toString()} onClick={action}>{buttonText}</Button>
+    )}
   </div>;
 };
 
@@ -105,7 +97,11 @@ class GitStatusComponent extends React.Component<GitStatusProps, GitStatusState>
 
   async reload() {
     const gitStatus = await status(this.props.repoRoot as any);
-    const gitBranches: Branch[] = await branches(this.props.repoRoot as any);
+    const gitBranches: Branch[] = await branches({
+      directory: this.props.repoRoot as GitDirectoryPath,
+      remotes: false,
+      tags: false,
+    });
     const currentBranch = gitBranches.find(branch => branch.isCurrent());
     this.setState({
       currentBranch,
@@ -477,15 +473,24 @@ class GitStatusComponent extends React.Component<GitStatusProps, GitStatusState>
 
 PluginManager.registerCommandInterceptorPlugin({
   intercept: async({ presentWorkingDirectory }): Promise<React.ReactElement<any>> => {
-    const gitBranches: Branch[] = await branches(presentWorkingDirectory as any);
-    const currentBranch = gitBranches.find(branch => branch.isCurrent());
-    const gitStatus = await status(presentWorkingDirectory as any);
-    const root = await repoRoot(presentWorkingDirectory);
-    return <GitStatusComponent
-      currentBranch={currentBranch}
-      gitStatus={gitStatus}
-      repoRoot={root}
-    />;
+
+    if (await isGitDirectory(presentWorkingDirectory)) {
+      const gitBranches: Branch[] = await branches({
+        directory: presentWorkingDirectory as GitDirectoryPath,
+        remotes: false,
+        tags: false,
+      });
+      const currentBranch = gitBranches.find(branch => branch.isCurrent());
+      const gitStatus = await status(presentWorkingDirectory as any);
+      const root = await repoRoot(presentWorkingDirectory as any);
+      return <GitStatusComponent
+        currentBranch={currentBranch}
+        gitStatus={gitStatus}
+        repoRoot={root}
+      />;
+    } else {
+      return <div style={{ padding: "10px" }}>fatal: Not a git repository (or any of the parent directories): .git</div>;
+    }
   },
 
   isApplicable: ({ command }): boolean => {

src/plugins/autocompletion_providers/Git.ts

@@ -263,8 +263,13 @@ const configVariables = unique(async(context: AutocompletionContext): Promise<Su
 
 const branchesExceptCurrent = async(context: AutocompletionContext): Promise<Suggestion[]> => {
     if (Git.isGitDirectory(context.environment.pwd)) {
-        const branches = (await Git.branches(context.environment.pwd)).filter(branch => !branch.isCurrent());
-        return branches.map(branch => new Suggestion({value: branch.toString(), style: styles.branch}));
+        const allBranches = (await Git.branches({
+            directory: context.environment.pwd,
+            remotes: true,
+            tags: false,
+        }));
+        const nonCurrentBranches = allBranches.filter(branch => !branch.isCurrent());
+        return nonCurrentBranches.map(branch => new Suggestion({value: branch.toString(), style: styles.branch}));
     } else {
         return [];
     }

src/plugins/autocompletion_utils/Button.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import {colors} from "../../views/css/colors";
+
+const buttonStyles = {
+  borderColor: colors.blue,
+  borderStyle: "solid",
+  borderRadius: "4px",
+  borderWidth: "1px",
+  padding: "2px",
+  color: colors.blue,
+  WebkitUserSelect: "none",
+  fontSize: "10px",
+  margin: "4px",
+  cursor: "pointer",
+};
+
+type ButtonProps = {
+  onClick: () => void;
+  children?: React.ReactElement<any>;
+};
+
+const Button = ({ onClick, children}: ButtonProps) => <span
+  style={buttonStyles}
+  onClick={onClick}
+>{children}</span>;
+
+export default Button;

src/utils/Git.ts

@@ -103,16 +103,26 @@ export class FileStatus {
     }
 }
 
-type GitDirectoryPath = string & { __isGitDirectoryPath: boolean };
+export type GitDirectoryPath = string & { __isGitDirectoryPath: boolean };
 
 export function isGitDirectory(directory: string): directory is GitDirectoryPath {
     return fs.existsSync(Path.join(directory, ".git") );
 }
 
-export async function branches(directory: GitDirectoryPath): Promise<Branch[]> {
+type BranchesOptions = {
+    directory: GitDirectoryPath;
+    remotes: boolean;
+    tags: boolean;
+};
+
+export async function branches({
+    directory,
+    remotes,
+    tags,
+}: BranchesOptions): Promise<Branch[]> {
     let lines = await linedOutputOf(
         "git",
-        ["for-each-ref", "refs/tags", "refs/heads", "refs/remotes", "--format='%(HEAD)%(refname:short)'"],
+        ["for-each-ref", tags ? "refs/tags" : "", "refs/heads", remotes ? "refs/remotes" : "", "--format='%(HEAD)%(refname:short)'"],
         directory
     );
     return lines.map(line => new Branch(line.slice(1), line[0] === "*"));
@@ -157,6 +167,6 @@ export async function status(directory: GitDirectoryPath): Promise<FileStatus[]>
     return lines.map(line => new FileStatus(line));
 }
 
-export async function repoRoot(directory: string): Promise<string> {
-    return (await linedOutputOf("git", ["rev-parse", "--show-toplevel"], directory))[0];
+export async function repoRoot(directory: GitDirectoryPath): Promise<GitDirectoryPath> {
+    return (await linedOutputOf("git", ["rev-parse", "--show-toplevel"], directory))[0] as GitDirectoryPath;
 }