updates to variable names to make more sense

fixed up duplicate is-collapsed classes

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

@@ -29,8 +29,8 @@ export default {
   },
   computed: {
     changedIcon() {
-      const prefix = this.file.staged && !this.showStagedIcon ? '-solid' : '';
-      return this.file.tempFile ? `file-additions${prefix}` : `file-modified${prefix}`;
+      const suffix = this.file.staged && !this.showStagedIcon ? '-solid' : '';
+      return this.file.tempFile ? `file-addition${suffix}` : `file-modified${suffix}`;
     },
     stagedIcon() {
       return `${this.changedIcon}-solid`;

app/assets/javascripts/ide/components/commit_sidebar/list.vue

@@ -29,7 +29,7 @@ export default {
       required: false,
       default: true,
     },
-    icon: {
+    iconName: {
       type: String,
       required: true,
     },
@@ -78,9 +78,6 @@ export default {
   >
     <header
       class="multi-file-commit-panel-header"
-      :class="{
-        'is-collapsed': rightPanelCollapsed,
-      }"
     >
       <div
         v-if="!rightPanelCollapsed"
@@ -91,7 +88,7 @@ export default {
       >
         <icon
           v-once
-          :name="icon"
+          :name="iconName"
           :size="18"
         />
         {{ titleText }}
@@ -123,7 +120,7 @@ export default {
     <list-collapsed
       v-if="rightPanelCollapsed"
       :files="fileList"
-      :icon="icon"
+      :icon-name="iconName"
       :title="title"
     />
     <template v-else>

app/assets/javascripts/ide/components/commit_sidebar/list_collapsed.vue

 <script>
-import icon from '~/vue_shared/components/icon.vue';
+import Icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
 import { sprintf, n__, __ } from '~/locale';
 
 export default {
   components: {
-    icon,
+    Icon,
   },
   directives: {
     tooltip,
@@ -15,7 +15,7 @@ export default {
       type: Array,
       required: true,
     },
-    icon: {
+    iconName: {
       type: String,
       required: true,
     },
@@ -52,7 +52,7 @@ export default {
       return sprintf(__('%{title} changes'), { title: this.title });
     },
     additionIconName() {
-      return this.title.toLowerCase() === 'staged' ? 'file-additions-solid' : 'file-additions';
+      return this.title.toLowerCase() === 'staged' ? 'file-addition-solid' : 'file-addition';
     },
     modifiedIconName() {
       return this.title.toLowerCase() === 'staged' ? 'file-modified-solid' : 'file-modified';
@@ -74,7 +74,7 @@ export default {
     >
       <icon
         v-once
-        :name="icon"
+        :name="iconName"
         :size="18"
       />
     </div>

app/assets/javascripts/ide/components/commit_sidebar/list_item.vue

@@ -33,7 +33,7 @@ export default {
   computed: {
     iconName() {
       const prefix = this.stagedList ? '-solid' : '';
-      return this.file.tempFile ? `file-additions${prefix}` : `file-modified${prefix}`;
+      return this.file.tempFile ? `file-addition${prefix}` : `file-modified${prefix}`;
     },
     iconClass() {
       return `multi-file-${this.file.tempFile ? 'additions' : 'modified'} append-right-8`;

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

 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
 import tooltip from '~/vue_shared/directives/tooltip';
-import icon from '~/vue_shared/components/icon.vue';
+import Icon from '~/vue_shared/components/icon.vue';
 import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
-import commitFilesList from './commit_sidebar/list.vue';
+import CommitFilesList from './commit_sidebar/list.vue';
 import EmptyState from './commit_sidebar/empty_state.vue';
 import CommitMessageField from './commit_sidebar/message_field.vue';
 import * as consts from '../stores/modules/commit/constants';
@@ -13,8 +13,8 @@ import Actions from './commit_sidebar/actions.vue';
 export default {
   components: {
     DeprecatedModal,
-    icon,
-    commitFilesList,
+    Icon,
+    CommitFilesList,
     EmptyState,
     Actions,
     LoadingButton,
@@ -72,7 +72,7 @@ export default {
       v-if="changedFiles.length || stagedFiles.length"
     >
       <commit-files-list
-        icon="unstaged"
+        icon-name="unstaged"
         :title="__('Unstaged')"
         :file-list="changedFiles"
         action="stageAllChanges"
@@ -80,7 +80,7 @@ export default {
         item-action-component="stage-button"
       />
       <commit-files-list
-        icon="staged"
+        icon-name="staged"
         :title="__('Staged')"
         :file-list="stagedFiles"
         action="unstageAllChanges"

app/assets/stylesheets/pages/repo.scss

@@ -540,22 +540,6 @@
   margin-bottom: 0;
   border-bottom: 1px solid $white-dark;
   padding: $gl-btn-padding 0;
-
-  &.is-collapsed {
-    margin-left: -$gl-padding;
-    margin-right: -$gl-padding;
-
-    svg {
-      margin-left: auto;
-      margin-right: auto;
-    }
-
-    .multi-file-commit-panel-collapse-btn {
-      margin-right: auto;
-      margin-left: auto;
-      border-left: 0;
-    }
-  }
 }
 
 .multi-file-commit-panel-header-title {
@@ -835,6 +819,24 @@
     flex: 1;
     min-height: 140px;
   }
+
+  &.is-collapsed {
+    .multi-file-commit-panel-header {
+      margin-left: -$gl-padding;
+      margin-right: -$gl-padding;
+
+      svg {
+        margin-left: auto;
+        margin-right: auto;
+      }
+
+      .multi-file-commit-panel-collapse-btn {
+        margin-right: auto;
+        margin-left: auto;
+        border-left: 0;
+      }
+    }
+  }
 }
 
 .ide-staged-action-btn {

spec/javascripts/ide/components/changed_file_icon_spec.js

@@ -28,7 +28,7 @@ describe('IDE changed file icon', () => {
     it('equals file-addition when a temp file', () => {
       vm.file.tempFile = true;
 
-      expect(vm.changedIcon).toBe('file-additions');
+      expect(vm.changedIcon).toBe('file-addition');
     });
   });
 

spec/javascripts/ide/components/commit_sidebar/list_item_spec.js

@@ -73,7 +73,7 @@ describe('Multi-file editor commit sidebar list item', () => {
       it('returns addition when not a tempFile', () => {
         f.tempFile = true;
 
-        expect(vm.iconName).toBe('file-additions');
+        expect(vm.iconName).toBe('file-addition');
       });
     });