From 6139050e3d394ce09bcb4ed0a0d74e18a5957e84 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 11 Jun 2018 15:35:52 +0100
Subject: [PATCH 1/6] Add active class to active file in IDE commit panel

Closes #46051
---
 .../ide/components/commit_sidebar/list.vue      |  5 +++++
 .../ide/components/commit_sidebar/list_item.vue | 17 ++++++++++++++++-
 .../ide/components/repo_commit_section.vue      |  5 ++++-
 app/assets/stylesheets/pages/repo.scss          |  4 ++++
 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;

From 39ed07a816c9f732715b835bd363057a315f6ee7 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 12 Jun 2018 09:38:04 +0100
Subject: [PATCH 2/6] karma updates

---
 app/assets/stylesheets/pages/repo.scss                    | 8 ++++----
 .../ide/components/commit_sidebar/list_item_spec.js       | 1 +
 .../ide/components/commit_sidebar/list_spec.js            | 1 +
 .../ide/components/repo_commit_section_spec.js            | 1 +
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index 7d277b13224..f0131579b9e 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -553,6 +553,10 @@
 }
 
 .multi-file-commit-list-item {
+  &.is-active {
+    background-color: $white-normal;
+  }
+
   .multi-file-discard-btn {
     display: none;
     margin-top: -2px;
@@ -612,10 +616,6 @@
   }
 }
 
-.multi-file-commit-list-item.is-active {
-  background-color: $white-normal;
-}
-
 .multi-file-commit-list-path {
   padding: 0;
   background: none;
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..a732028158e 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();
   });
 
diff --git a/spec/javascripts/ide/components/commit_sidebar/list_spec.js b/spec/javascripts/ide/components/commit_sidebar/list_spec.js
index 54625ef90f8..a37cbd5a596 100644
--- a/spec/javascripts/ide/components/commit_sidebar/list_spec.js
+++ b/spec/javascripts/ide/components/commit_sidebar/list_spec.js
@@ -17,6 +17,7 @@ describe('Multi-file editor commit sidebar list', () => {
       action: 'stageAllChanges',
       actionBtnText: 'stage all',
       itemActionComponent: 'stage-button',
+      activeFileKey: 'staged-testing',
     });
 
     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..0934c239a8e 100644
--- a/spec/javascripts/ide/components/repo_commit_section_spec.js
+++ b/spec/javascripts/ide/components/repo_commit_section_spec.js
@@ -98,6 +98,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');

From e1ec70cf8e4ca7964eb12e6d1a911285c57a3892 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 12 Jun 2018 10:02:15 +0100
Subject: [PATCH 3/6] more karma fixes

---
 .../javascripts/ide/components/commit_sidebar/list.vue     | 3 ++-
 .../ide/components/commit_sidebar/list_item.vue            | 3 ++-
 .../javascripts/ide/components/repo_commit_section.vue     | 7 +++++--
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
index c107462e335..5a8566d3121 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
@@ -45,7 +45,8 @@ export default {
     },
     activeFileKey: {
       type: String,
-      required: true,
+      required: false,
+      default: null,
     },
   },
   data() {
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 b69a9a833a5..95f332de10d 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -32,7 +32,8 @@ export default {
     },
     activeFileKey: {
       type: String,
-      required: true,
+      required: false,
+      default: null,
     },
   },
   computed: {
diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue
index 8ed182ff378..b369531176b 100644
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -32,6 +32,9 @@ export default {
     showStageUnstageArea() {
       return !!(this.someUncommitedChanges || this.lastCommitMsg || !this.unusedSeal);
     },
+    activeFileKey() {
+      return this.activeFile ? this.activeFile.key : null;
+    },
   },
   watch: {
     hasChanges() {
@@ -93,7 +96,7 @@ export default {
         action="stageAllChanges"
         :action-btn-text="__('Stage all')"
         item-action-component="stage-button"
-        :active-file-key="activeFile.key"
+        :active-file-key="activeFileKey"
       />
       <commit-files-list
         icon-name="staged"
@@ -103,7 +106,7 @@ export default {
         :action-btn-text="__('Unstage all')"
         item-action-component="unstage-button"
         :staged-list="true"
-        :active-file-key="activeFile.key"
+        :active-file-key="activeFileKey"
       />
     </template>
     <empty-state

From 00ced96c53f320240126f6497e75488eca81e973 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 12 Jun 2018 11:46:00 +0100
Subject: [PATCH 4/6] added specs for is-active class added spec for
 openPendingTab in component

---
 .../components/commit_sidebar/list_item_spec.js  | 16 ++++++++++++++++
 .../ide/components/repo_commit_section_spec.js   |  9 +++++++++
 2 files changed, 25 insertions(+)

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 a732028158e..8f7cf24c22f 100644
--- a/spec/javascripts/ide/components/commit_sidebar/list_item_spec.js
+++ b/spec/javascripts/ide/components/commit_sidebar/list_item_spec.js
@@ -90,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/repo_commit_section_spec.js b/spec/javascripts/ide/components/repo_commit_section_spec.js
index 0934c239a8e..de00a372ed4 100644
--- a/spec/javascripts/ide/components/repo_commit_section_spec.js
+++ b/spec/javascripts/ide/components/repo_commit_section_spec.js
@@ -56,6 +56,8 @@ describe('RepoCommitSection', () => {
       vm.$store.state.entries[f.path] = f;
     });
 
+    spyOn(vm, 'openPendingTab').and.callThrough();
+
     return vm.$mount();
   }
 
@@ -177,5 +179,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',
+      });
+    });
   });
 });

From b2cb0c6cbdd7ef46f68e824174df35356636b307 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 12 Jun 2018 12:19:59 +0100
Subject: [PATCH 5/6] fixed eslint

---
 .../ide/components/repo_commit_section_spec.js            | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/spec/javascripts/ide/components/repo_commit_section_spec.js b/spec/javascripts/ide/components/repo_commit_section_spec.js
index de00a372ed4..531bcd6e540 100644
--- a/spec/javascripts/ide/components/repo_commit_section_spec.js
+++ b/spec/javascripts/ide/components/repo_commit_section_spec.js
@@ -56,9 +56,7 @@ describe('RepoCommitSection', () => {
       vm.$store.state.entries[f.path] = f;
     });
 
-    spyOn(vm, 'openPendingTab').and.callThrough();
-
-    return vm.$mount();
+    return vm;
   }
 
   beforeEach(done => {
@@ -66,6 +64,10 @@ describe('RepoCommitSection', () => {
 
     vm = createComponent();
 
+    spyOn(vm, 'openPendingTab').and.callThrough();
+
+    vm.$mount();
+
     spyOn(service, 'getTreeData').and.returnValue(
       Promise.resolve({
         headers: {

From 9d9d952c1172e2b68bd4537a0ce05f96eae7b340 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 13 Jun 2018 10:10:24 +0100
Subject: [PATCH 6/6] moved strings into constants file

---
 .../javascripts/ide/components/commit_sidebar/list.vue     | 6 +++++-
 .../ide/components/commit_sidebar/list_item.vue            | 4 ++--
 .../javascripts/ide/components/repo_commit_section.vue     | 7 +++++--
 app/assets/javascripts/ide/constants.js                    | 5 +++++
 .../javascripts/ide/components/commit_sidebar/list_spec.js | 1 +
 5 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
index 5a8566d3121..3d59410cbc2 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
@@ -48,6 +48,10 @@ export default {
       required: false,
       default: null,
     },
+    keyPrefix: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -118,7 +122,7 @@ export default {
         <list-item
           :file="file"
           :action-component="itemActionComponent"
-          :key-prefix="title"
+          :key-prefix="keyPrefix"
           :staged-list="stagedList"
           :active-file-key="activeFileKey"
         />
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 95f332de10d..6c30b2a721d 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list_item.vue
@@ -45,7 +45,7 @@ export default {
       return `multi-file-${this.file.tempFile ? 'addition' : 'modified'} append-right-8`;
     },
     fullKey() {
-      return `${this.keyPrefix.toLowerCase()}-${this.file.key}`;
+      return `${this.keyPrefix}-${this.file.key}`;
     },
     isActive() {
       return this.activeFileKey === this.fullKey;
@@ -62,7 +62,7 @@ export default {
     openFileInEditor() {
       return this.openPendingTab({
         file: this.file,
-        keyPrefix: this.keyPrefix.toLowerCase(),
+        keyPrefix: this.keyPrefix,
       }).then(changeViewer => {
         if (changeViewer) {
           this.updateViewer(viewerTypes.diff);
diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue
index b369531176b..46e8ee26d3c 100644
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -6,7 +6,7 @@ import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 import CommitFilesList from './commit_sidebar/list.vue';
 import EmptyState from './commit_sidebar/empty_state.vue';
 import * as consts from '../stores/modules/commit/constants';
-import { activityBarViews } from '../constants';
+import { activityBarViews, stageKeys } from '../constants';
 
 export default {
   components: {
@@ -47,7 +47,7 @@ export default {
     if (this.lastOpenedFile) {
       this.openPendingTab({
         file: this.lastOpenedFile,
-        keyPrefix: this.lastOpenedFile.changed ? 'unstaged' : 'staged',
+        keyPrefix: this.lastOpenedFile.changed ? stageKeys.unstaged : stageKeys.staged,
       })
         .then(changeViewer => {
           if (changeViewer) {
@@ -66,6 +66,7 @@ export default {
       return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH).then(() => this.commitChanges());
     },
   },
+  stageKeys,
 };
 </script>
 
@@ -92,6 +93,7 @@ export default {
         class="is-first"
         icon-name="unstaged"
         :title="__('Unstaged')"
+        :key-prefix="$options.stageKeys.unstaged"
         :file-list="changedFiles"
         action="stageAllChanges"
         :action-btn-text="__('Stage all')"
@@ -101,6 +103,7 @@ export default {
       <commit-files-list
         icon-name="staged"
         :title="__('Staged')"
+        :key-prefix="$options.stageKeys.staged"
         :file-list="stagedFiles"
         action="unstageAllChanges"
         :action-btn-text="__('Unstage all')"
diff --git a/app/assets/javascripts/ide/constants.js b/app/assets/javascripts/ide/constants.js
index 65886c02b92..fcfe543eb5a 100644
--- a/app/assets/javascripts/ide/constants.js
+++ b/app/assets/javascripts/ide/constants.js
@@ -25,3 +25,8 @@ export const rightSidebarViews = {
   pipelines: 'pipelines-list',
   jobsDetail: 'jobs-detail',
 };
+
+export const stageKeys = {
+  unstaged: 'unstaged',
+  staged: 'staged',
+};
diff --git a/spec/javascripts/ide/components/commit_sidebar/list_spec.js b/spec/javascripts/ide/components/commit_sidebar/list_spec.js
index a37cbd5a596..6fb52378386 100644
--- a/spec/javascripts/ide/components/commit_sidebar/list_spec.js
+++ b/spec/javascripts/ide/components/commit_sidebar/list_spec.js
@@ -18,6 +18,7 @@ describe('Multi-file editor commit sidebar list', () => {
       actionBtnText: 'stage all',
       itemActionComponent: 'stage-button',
       activeFileKey: 'staged-testing',
+      keyPrefix: 'staged',
     });
 
     vm.$store.state.rightPanelCollapsed = false;