Merge branch 'ide-commit-section-file-active-indicator' into 'master'

Add active class to active file in IDE commit panel

Closes #46051

See merge request gitlab-org/gitlab-ce!19646

3 files changed, 32 insertions, 1 deletions

diff --git a/spec/javascripts/ide/components/commit_sidebar/list_item_spec.js b/spec/javascripts/ide/components/commit_sidebar/list_item_spec.js
index cc7e0a3f26d..8f7cf24c22f 100644
--- a/spec/javascripts/ide/components/commit_sidebar/list_item_spec.js
+++ b/spec/javascripts/ide/components/commit_sidebar/list_item_spec.js
@@ -19,6 +19,7 @@ describe('Multi-file editor commit sidebar list item', () => {
     vm = createComponentWithStore(Component, store, {
       file: f,
       actionComponent: 'stage-button',
+      activeFileKey: `staged-${f.key}`,
     }).$mount();
   });
 
@@ -89,4 +90,20 @@ describe('Multi-file editor commit sidebar list item', () => {
       });
     });
   });
+
+  describe('is active', () => {
+    it('does not add active class when dont keys match', () => {
+      expect(vm.$el.classList).not.toContain('is-active');
+    });
+
+    it('adds active class when keys match', done => {
+      vm.keyPrefix = 'staged';
+
+      vm.$nextTick(() => {
+        expect(vm.$el.classList).toContain('is-active');
+
+        done();
+      });
+    });
+  });
 });
diff --git a/spec/javascripts/ide/components/commit_sidebar/list_spec.js b/spec/javascripts/ide/components/commit_sidebar/list_spec.js
index 54625ef90f8..6fb52378386 100644
--- a/spec/javascripts/ide/components/commit_sidebar/list_spec.js
+++ b/spec/javascripts/ide/components/commit_sidebar/list_spec.js
@@ -17,6 +17,8 @@ describe('Multi-file editor commit sidebar list', () => {
       action: 'stageAllChanges',
       actionBtnText: 'stage all',
       itemActionComponent: 'stage-button',
+      activeFileKey: 'staged-testing',
+      keyPrefix: 'staged',
     });
 
     vm.$store.state.rightPanelCollapsed = false;
diff --git a/spec/javascripts/ide/components/repo_commit_section_spec.js b/spec/javascripts/ide/components/repo_commit_section_spec.js
index 5e3e00a180b..531bcd6e540 100644
--- a/spec/javascripts/ide/components/repo_commit_section_spec.js
+++ b/spec/javascripts/ide/components/repo_commit_section_spec.js
@@ -56,7 +56,7 @@ describe('RepoCommitSection', () => {
       vm.$store.state.entries[f.path] = f;
     });
 
-    return vm.$mount();
+    return vm;
   }
 
   beforeEach(done => {
@@ -64,6 +64,10 @@ describe('RepoCommitSection', () => {
 
     vm = createComponent();
 
+    spyOn(vm, 'openPendingTab').and.callThrough();
+
+    vm.$mount();
+
     spyOn(service, 'getTreeData').and.returnValue(
       Promise.resolve({
         headers: {
@@ -98,6 +102,7 @@ describe('RepoCommitSection', () => {
       store.state.noChangesStateSvgPath = 'nochangessvg';
       store.state.committedStateSvgPath = 'svg';
 
+      vm.$destroy();
       vm = createComponentWithStore(Component, store).$mount();
 
       expect(vm.$el.querySelector('.js-empty-state').textContent.trim()).toContain('No changes');
@@ -176,5 +181,12 @@ describe('RepoCommitSection', () => {
       expect(store.state.openFiles.length).toBe(1);
       expect(store.state.openFiles[0].pending).toBe(true);
     });
+
+    it('calls openPendingTab', () => {
+      expect(vm.openPendingTab).toHaveBeenCalledWith({
+        file: vm.lastOpenedFile,
+        keyPrefix: 'unstaged',
+      });
+    });
   });
 });