Move "number of changed files" into Web IDE sidebar badge

app/assets/javascripts/ide/components/activity_bar.vue

@@ -11,7 +11,7 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   computed: {
-    ...mapState(['currentActivityView']),
+    ...mapState(['currentActivityView', 'stagedFiles']),
   },
   methods: {
     ...mapActions(['updateActivityBarView']),
@@ -81,6 +81,9 @@ export default {
           @click.prevent="changedActivityView($event, $options.leftSidebarViews.commit.name)"
         >
           <gl-icon name="commit" />
+          <div v-if="stagedFiles.length > 0" class="ide-commit-badge badge badge-pill">
+            {{ stagedFiles.length }}
+          </div>
         </button>
       </li>
     </ul>

app/assets/stylesheets/page_bundles/ide.scss

@@ -601,6 +601,17 @@ $ide-commit-header-height: 48px;
       left: -1px;
     }
   }
+
+  .ide-commit-badge {
+    background-color: var(--ide-highlight-accent, $almost-black) !important;
+    color: var(--ide-highlight-background, $white) !important;
+    position: absolute;
+    left: 38px;
+    top: $gl-padding-8;
+    font-size: $gl-font-size-12;
+    padding: 2px $gl-padding-4;
+    font-weight: $gl-font-weight-bold !important;
+  }
 }
 
 .ide-activity-bar {

changelogs/unreleased/196628-move-number-of-changed-files-into-web-ide-sidebar-badge.yml

+---
+title: Move "number of changed files" into Web IDE sidebar badge
+merge_request: 51166
+author: Kev @KevSlashNull
+type: added

spec/frontend/ide/components/activity_bar_spec.js

@@ -9,6 +9,8 @@ describe('IDE activity bar', () => {
   let vm;
   let store;
 
+  const findChangesBadge = () => vm.$el.querySelector('.badge');
+
   beforeEach(() => {
     store = createStore();
 
@@ -69,4 +71,19 @@ describe('IDE activity bar', () => {
       });
     });
   });
+
+  describe('changes badge', () => {
+    it('is rendered when files are staged', () => {
+      store.state.stagedFiles = [{ path: '/path/to/file' }];
+      vm.$mount();
+
+      expect(findChangesBadge()).toBeTruthy();
+      expect(findChangesBadge().textContent.trim()).toBe('1');
+    });
+
+    it('is not rendered when no changes are present', () => {
+      vm.$mount();
+      expect(findChangesBadge()).toBeFalsy();
+    });
+  });
 });