Add active class to active file in IDE commit panel

Closes #46051

4 files changed, 29 insertions, 2 deletions

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
index 1325fc993b2..c107462e335 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
@@ -43,6 +43,10 @@ export default {
       required: false,
       default: false,
     },
+    activeFileKey: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -115,6 +119,7 @@ export default {
           :action-component="itemActionComponent"
           :key-prefix="title"
           :staged-list="stagedList"
+          :active-file-key="activeFileKey"
         />
       </li>
     </ul>
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
index 03f3e4de83c..b69a9a833a5 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -30,6 +30,10 @@ export default {
       required: false,
       default: false,
     },
+    activeFileKey: {
+      type: String,
+      required: true,
+    },
   },
   computed: {
     iconName() {
@@ -39,6 +43,12 @@ export default {
     iconClass() {
       return `multi-file-${this.file.tempFile ? 'addition' : 'modified'} append-right-8`;
     },
+    fullKey() {
+      return `${this.keyPrefix.toLowerCase()}-${this.file.key}`;
+    },
+    isActive() {
+      return this.activeFileKey === this.fullKey;
+    },
   },
   methods: {
     ...mapActions([
@@ -70,7 +80,12 @@ export default {
 </script>
 
 <template>
-  <div class="multi-file-commit-list-item">
+  <div
+    class="multi-file-commit-list-item"
+    :class="{
+      'is-active': isActive
+    }"
+  >
     <button
       type="button"
       class="multi-file-commit-list-path"
diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue
index c5092d8e04d..8ed182ff378 100644
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -27,7 +27,7 @@ export default {
       'unusedSeal',
     ]),
     ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
-    ...mapGetters(['lastOpenedFile', 'hasChanges', 'someUncommitedChanges']),
+    ...mapGetters(['lastOpenedFile', 'hasChanges', 'someUncommitedChanges', 'activeFile']),
     ...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled']),
     showStageUnstageArea() {
       return !!(this.someUncommitedChanges || this.lastCommitMsg || !this.unusedSeal);
@@ -44,6 +44,7 @@ export default {
     if (this.lastOpenedFile) {
       this.openPendingTab({
         file: this.lastOpenedFile,
+        keyPrefix: this.lastOpenedFile.changed ? 'unstaged' : 'staged',
       })
         .then(changeViewer => {
           if (changeViewer) {
@@ -92,6 +93,7 @@ export default {
         action="stageAllChanges"
         :action-btn-text="__('Stage all')"
         item-action-component="stage-button"
+        :active-file-key="activeFile.key"
       />
       <commit-files-list
         icon-name="staged"
@@ -101,6 +103,7 @@ export default {
         :action-btn-text="__('Unstage all')"
         item-action-component="unstage-button"
         :staged-list="true"
+        :active-file-key="activeFile.key"
       />
     </template>
     <empty-state
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 3c7edb0d4bb..7d277b13224 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -612,6 +612,10 @@
   }
 }
 
+.multi-file-commit-list-item.is-active {
+  background-color: $white-normal;
+}
+
 .multi-file-commit-list-path {
   padding: 0;
   background: none;