fix switch from a detached head to a branch not working (#1218)

* fix switch from a detached head to a branch not working by transforming the fake branch name (HEAD detached at #####) to #####

* prettify and format correctly

* move detached head fix to refreshBranch()

* prettify and format correctly

* fix default mocked response for branch

* remove change to the current branch tag attribute as the detached head case can occur when the git repository is checked out at a specific commit that is not a branch head

* add detached flag to IBranch, and tune the branch display according to the flag

* add optional chaining to short circuit and remove error that is thrown

* relocate title translate

Author: basokant

src/components/Toolbar.tsx

@@ -260,9 +260,14 @@ export class Toolbar extends React.Component<IToolbarProps, IToolbarState> {
    * @returns React element
    */
   private _renderBranchMenu(): React.ReactElement | null {
+    let branchTitle = this.props.trans.__('Current Branch');
     if (this.props.model.pathRepository === null) {
       return null;
     }
+    if (this.props.model.currentBranch?.detached) {
+      branchTitle = this.props.trans.__('Detached Head at');
+    }
+
     return (
       <div className={toolbarMenuWrapperClass}>
         <button
@@ -275,9 +280,7 @@ export class Toolbar extends React.Component<IToolbarProps, IToolbarState> {
         >
           <branchIcon.react className={toolbarMenuButtonIconClass} />
           <div className={toolbarMenuButtonTitleWrapperClass}>
-            <p className={toolbarMenuButtonTitleClass}>
-              {this.props.trans.__('Current Branch')}
-            </p>
+            <p className={toolbarMenuButtonTitleClass}>{branchTitle}</p>
             <p className={toolbarMenuButtonSubtitleClass}>
               {this.props.currentBranch || ''}
             </p>

src/model.ts

@@ -1046,6 +1046,15 @@ export class GitExtension implements IGitExtension {
       );
 
       this._branches = data.branches ?? [];
+
+      const detachedHeadRegex = /\(HEAD detached at (.+)\)/;
+      const result = data.current_branch.name.match(detachedHeadRegex);
+
+      if (result && result.length > 1) {
+        data.current_branch.name = result[1];
+        data.current_branch.detached = true;
+      }
+
       this._currentBranch = data.current_branch;
       if (this._currentBranch) {
         // Set up the marker obj for the current (valid) repo/branch combination

src/tokens.ts

@@ -820,6 +820,7 @@ export namespace Git {
     upstream: string | null;
     top_commit: string;
     tag: string | null;
+    detached?: boolean;
   }
 
   /** Interface for GitBranch request result,

tests/utils.ts

@@ -28,7 +28,7 @@ export const defaultMockedResponses: {
       return {
         code: 0,
         branches: [],
-        current_branch: null
+        current_branch: { name: "" }
       };
     }
   },