Delete local branch

Fixes #308

Author: fcollonval

src/components/BranchMenu.tsx

@@ -6,8 +6,10 @@ import * as React from 'react';
 import { FixedSizeList, ListChildComponentProps } from 'react-window';
 import { classes } from 'typestyle';
 import { Logger } from '../logger';
+import { hiddenButtonStyle } from '../style/ActionButtonStyle';
 import {
   activeListItemClass,
+  branchNameClass,
   filterClass,
   filterClearClass,
   filterInputClass,
@@ -17,8 +19,9 @@ import {
   newBranchButtonClass,
   wrapperClass
 } from '../style/BranchMenu';
-import { branchIcon } from '../style/icons';
+import { branchIcon, trashIcon } from '../style/icons';
 import { Git, IGitExtension, Level } from '../tokens';
+import { ActionButton } from './ActionButton';
 import { NewBranchDialog } from './NewBranchDialog';
 
 const CHANGES_ERR_MSG =
@@ -254,7 +257,18 @@ export class BranchMenu extends React.Component<
         style={style}
       >
         <branchIcon.react className={listItemIconClass} tag="span" />
-        {branch.name}
+        <span className={branchNameClass}>{branch.name}</span>
+        {!branch.is_remote_branch && !isActive && (
+          <ActionButton
+            className={hiddenButtonStyle}
+            icon={trashIcon}
+            title={'Delete this branch'}
+            onClick={(event: React.MouseEvent) => {
+              event.stopPropagation();
+              this._onDeleteBranch(branch.name);
+            }}
+          />
+        )}
       </ListItem>
     );
   };
@@ -297,6 +311,28 @@ export class BranchMenu extends React.Component<
     });
   };
 
+  /**
+   * Callback on delete branch name button
+   *
+   * @param branchName Branch name
+   */
+  private _onDeleteBranch = async (branchName: string): Promise<void> => {
+    const acknowledgement = await showDialog<void>({
+      title: 'Delete branch',
+      body: (
+        <p>
+          {`The branch '${branchName}' will be deleted. This can not be undone.`}
+          <br />
+          Please confirm you want to delete it.
+        </p>
+      ),
+      buttons: [Dialog.cancelButton(), Dialog.warnButton({ label: 'Delete' })]
+    });
+    if (acknowledgement.button.accept) {
+      await this.props.model.deleteBranch(branchName);
+    }
+  };
+
   /**
    * Callback invoked upon clicking a button to create a new branch.
    *

src/components/TagMenu.tsx

@@ -6,6 +6,7 @@ import * as React from 'react';
 import { FixedSizeList, ListChildComponentProps } from 'react-window';
 import { Logger } from '../logger';
 import {
+  branchNameClass,
   filterClass,
   filterClearClass,
   filterInputClass,
@@ -241,7 +242,7 @@ export class TagMenu extends React.Component<ITagMenuProps, ITagMenuState> {
         style={style}
       >
         <tagIcon.react className={listItemIconClass} tag="span" />
-        {tag}
+        <span className={branchNameClass}>{tag}</span>
       </ListItem>
     );
   };

src/model.ts

@@ -486,15 +486,23 @@ export class GitExtension implements IGitExtension {
   }
 
   /**
-   * Dispose of model resources.
+   * Delete a branch
+   *
+   * @param branchName Branch name
+   * @returns promise which resolves when the branch has been deleted.
+   *
+   * @throws {Git.NotInRepository} If the current path is not a Git repository
+   * @throws {Git.GitResponseError} If the server response is not ok
+   * @throws {ServerConnection.NetworkError} If the request cannot be made
    */
-  dispose(): void {
-    if (this.isDisposed) {
-      return;
-    }
-    this._isDisposed = true;
-    this._poll.dispose();
-    Signal.clearData(this);
+  async deleteBranch(branchName: string): Promise<void> {
+    const path = await this._getPathRespository();
+    await this._taskHandler.execute<void>('git:branch:delete', async () => {
+      return await requestAPI<void>('branch_delete', 'POST', {
+        current_path: path,
+        branch: branchName
+      });
+    });
   }
 
   /**
@@ -530,6 +538,18 @@ export class GitExtension implements IGitExtension {
     return data;
   }
 
+  /**
+   * Dispose of model resources.
+   */
+  dispose(): void {
+    if (this.isDisposed) {
+      return;
+    }
+    this._isDisposed = true;
+    this._poll.dispose();
+    Signal.clearData(this);
+  }
+
   /**
    * Ensure a .gitignore file exists
    *

src/style/BranchMenu.ts

@@ -1,4 +1,12 @@
 import { style } from 'typestyle';
+import { showButtonOnHover } from './ActionButtonStyle';
+
+export const branchNameClass = style({
+  flex: '1 1 auto',
+  textOverflow: 'ellipsis',
+  overflow: 'hidden',
+  whiteSpace: 'nowrap'
+});
 
 export const wrapperClass = style({
   marginTop: '6px',
@@ -105,11 +113,12 @@ export const newBranchButtonClass = style({
   }
 });
 
-export const listItemClass = style({
-  paddingTop: '4px!important',
-  paddingBottom: '4px!important',
-  paddingLeft: '11px!important'
-});
+export const listItemClass = style(
+  {
+    padding: '4px 11px!important'
+  },
+  showButtonOnHover
+);
 
 export const activeListItemClass = style({
   color: 'white!important',

src/style/icons.ts

@@ -16,6 +16,7 @@ import pushSvg from '../../style/icons/push.svg';
 import removeSvg from '../../style/icons/remove.svg';
 import rewindSvg from '../../style/icons/rewind.svg';
 import tagSvg from '../../style/icons/tag.svg';
+import trashSvg from '../../style/icons/trash.svg';
 
 export const gitIcon = new LabIcon({ name: 'git', svgstr: gitSvg });
 export const addIcon = new LabIcon({
@@ -74,3 +75,7 @@ export const tagIcon = new LabIcon({
   name: 'git:tag',
   svgstr: tagSvg
 });
+export const trashIcon = new LabIcon({
+  name: 'git:trash',
+  svgstr: trashSvg
+});

src/tokens.ts

@@ -206,6 +206,18 @@ export interface IGitExtension extends IDisposable {
    */
   config(options?: JSONObject): Promise<JSONObject | void>;
 
+  /**
+   * Delete a branch
+   *
+   * @param branchName Branch name
+   * @returns promise which resolves when the branch has been deleted.
+   *
+   * @throws {Git.NotInRepository} If the current path is not a Git repository
+   * @throws {Git.GitResponseError} If the server response is not ok
+   * @throws {ServerConnection.NetworkError} If the request cannot be made
+   */
+  deleteBranch(branchName: string): Promise<void>;
+
   /**
    * Fetch commit information.
    *