add current branch name on status bar (#1131)

* add current branch name on status bar

* update current branch name on path changes

* vertically center the current branch name using css

* Remove '*' from the current branch name

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

Co-authored-by: Frédéric Collonval <fcollonval@users.noreply.github.com>

Author: BoscoCHW

src/components/StatusWidget.tsx

@@ -10,7 +10,8 @@ import { gitIcon } from '../style/icons';
 import {
   badgeClass,
   statusAnimatedIconClass,
-  statusIconClass
+  statusIconClass,
+  currentBranchNameClass
 } from '../style/StatusWidget';
 import { toolbarButtonClass } from '../style/Toolbar';
 import { IGitExtension } from '../tokens';
@@ -27,6 +28,8 @@ export class StatusWidget extends ReactWidget {
     super();
     this._model = model;
     this._trans = trans;
+
+    this.addClass('jp-git-StatusWidget');
   }
 
   /**
@@ -41,39 +44,51 @@ export class StatusWidget extends ReactWidget {
 
   render(): JSX.Element {
     return (
-      <UseSignal
-        signal={this._model.credentialsRequiredChanged}
-        initialArgs={false}
-      >
-        {(_, needsCredentials) => (
-          <Badge
-            className={badgeClass}
-            variant="dot"
-            invisible={!needsCredentials}
-            data-test-id="git-credential-badge"
-          >
-            <ActionButton
-              className={classes(
-                toolbarButtonClass,
-                this._status !== 'idle'
-                  ? statusAnimatedIconClass
-                  : statusIconClass
-              )}
-              icon={gitIcon}
-              onClick={
-                needsCredentials
-                  ? async () => this._showGitOperationDialog()
-                  : undefined
-              }
-              title={
-                needsCredentials
-                  ? `Git: ${this._trans.__('credentials required')}`
-                  : `Git: ${this._trans.__(this._status)}`
-              }
-            />
-          </Badge>
-        )}
-      </UseSignal>
+      <>
+        <UseSignal
+          signal={this._model.credentialsRequiredChanged}
+          initialArgs={false}
+        >
+          {(_, needsCredentials) => (
+            <Badge
+              className={badgeClass}
+              variant="dot"
+              invisible={!needsCredentials}
+              data-test-id="git-credential-badge"
+            >
+              <ActionButton
+                className={classes(
+                  toolbarButtonClass,
+                  this._status !== 'idle'
+                    ? statusAnimatedIconClass
+                    : statusIconClass
+                )}
+                icon={gitIcon}
+                onClick={
+                  needsCredentials
+                    ? async () => this._showGitOperationDialog()
+                    : undefined
+                }
+                title={
+                  needsCredentials
+                    ? `Git: ${this._trans.__('credentials required')}`
+                    : `Git: ${this._trans.__(this._status)}`
+                }
+              />
+            </Badge>
+          )}
+        </UseSignal>
+
+        <UseSignal signal={this._model.headChanged}>
+          {() =>
+            this._model.currentBranch && (
+              <span className={currentBranchNameClass}>
+                {this._model.currentBranch.name}
+              </span>
+            )
+          }
+        </UseSignal>
+      </>
     );
   }
 

src/index.ts

@@ -149,6 +149,7 @@ async function activate(
     change: IChangedArgs<string>
   ) => {
     gitExtension.pathRepository = change.newValue;
+    gitExtension.refreshBranch();
   };
 
   // Whenever the file browser path changes, sync the Git extension path

src/style/StatusWidget.ts

@@ -38,3 +38,8 @@ export const badgeClass = style({
     }
   }
 });
+
+export const currentBranchNameClass = style({
+  fontSize: 'var(--jp-ui-font-size1)',
+  lineHeight: '100%'
+});

style/base.css

@@ -8,3 +8,4 @@
 @import url('diff-nb.css');
 @import url('diff-text.css');
 @import url('variables.css');
+@import url('status-widget.css');

style/status-widget.css

@@ -0,0 +1,4 @@
+.jp-git-StatusWidget {
+  display: flex;
+  align-items: center;
+}