updated icons

fixed bug where unstaged file when discarded would not take staged file
changes

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

@@ -21,13 +21,22 @@ export default {
       required: false,
       default: false,
     },
+    showStagedIcon: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     changedIcon() {
-      return this.file.tempFile ? 'file-addition' : 'file-modified';
+      const prefix = this.file.staged && !this.showStagedIcon ? '-solid' : '';
+      return this.file.tempFile ? `file-additions${prefix}` : `file-modified${prefix}`;
+    },
+    stagedIcon() {
+      return `${this.changedIcon}-solid`;
     },
     changedIconClass() {
-      return `multi-${this.changedIcon}`;
+      return `multi-${this.changedIcon} prepend-left-5 pull-left`;
     },
     tooltipTitle() {
       if (!this.showTooltip) return undefined;
@@ -63,6 +72,13 @@ export default {
     class="ide-file-changed-icon"
   >
     <icon
+      v-if="file.staged && showStagedIcon"
+      :name="stagedIcon"
+      :size="12"
+      :css-classes="changedIconClass"
+    />
+    <icon
+      v-if="file.changed || file.tempFile || (file.staged && !showStagedIcon)"
       :name="changedIcon"
       :size="12"
       :css-classes="changedIconClass"

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

@@ -45,6 +45,11 @@ export default {
       type: String,
       required: true,
     },
+    stagedList: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     ...mapState(['rightPanelCollapsed']),
@@ -134,6 +139,7 @@ export default {
             :file="file"
             :action-component="itemActionComponent"
             :key-prefix="title"
+            :staged-list="stagedList"
           />
         </li>
       </ul>

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

@@ -51,6 +51,12 @@ export default {
     titleTooltip() {
       return sprintf(__('%{title} changes'), { title: this.title });
     },
+    additionIconName() {
+      return this.title.toLowerCase() === 'staged' ? 'file-additions-solid' : 'file-additions';
+    },
+    modifiedIconName() {
+      return this.title.toLowerCase() === 'staged' ? 'file-modified-solid' : 'file-modified';
+    },
   },
 };
 </script>
@@ -80,7 +86,7 @@ export default {
       class="append-bottom-10"
     >
       <icon
-        name="file-addition"
+        :name="additionIconName"
         :size="18"
         :css-classes="addedFilesIconClass"
       />
@@ -94,7 +100,7 @@ export default {
       class="prepend-top-10 append-bottom-10"
     >
       <icon
-        name="file-modified"
+        :name="modifiedIconName"
         :size="18"
         :css-classes="modifiedFilesClass"
       />

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

@@ -24,13 +24,19 @@ export default {
       required: false,
       default: '',
     },
+    stagedList: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     iconName() {
-      return this.file.tempFile ? 'file-addition' : 'file-modified';
+      const prefix = this.stagedList ? '-solid' : '';
+      return this.file.tempFile ? `file-additions${prefix}` : `file-modified${prefix}`;
     },
     iconClass() {
-      return `multi-file-${this.file.tempFile ? 'addition' : 'modified'} append-right-8`;
+      return `multi-file-${this.file.tempFile ? 'additions' : 'modified'} append-right-8`;
     },
   },
   methods: {

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

@@ -85,6 +85,7 @@ export default {
         :action-btn-text="__('Unstage all')"
         item-action-component="unstage-button"
         :show-toggle="false"
+        :staged-list="true"
       />
       <form
         class="form-horizontal multi-file-commit-form"

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

@@ -105,6 +105,7 @@ export default {
             v-if="file.changed || file.tempFile || file.staged"
             :file="file"
             :show-tooltip="true"
+            :show-staged-icon="true"
             class="prepend-top-5 pull-right"
           />
         </span>

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

@@ -32,7 +32,7 @@ export default {
       return `Close ${this.tab.name}`;
     },
     showChangedIcon() {
-      return this.tab.changed ? !this.tabMouseOver : false;
+      return this.fileHasChanged ? !this.tabMouseOver : false;
     },
     fileHasChanged() {
       return this.tab.changed || this.tab.tempFile || this.tab.staged;

app/assets/javascripts/ide/stores/actions/file.js

@@ -166,10 +166,7 @@ export const discardFileChanges = ({ state, commit }, path) => {
     commit(types.TOGGLE_FILE_OPEN, path);
   }
 
-  eventHub.$emit(`editor.update.model.content.${file.key}`, {
-    content: file.raw,
-    changed: false,
-  });
+  eventHub.$emit(`editor.update.model.new.content.${file.key}`, file.content);
 };
 
 export const stageChange = ({ commit, state }, path) => {

app/assets/javascripts/ide/stores/mutations/file.js

@@ -57,7 +57,9 @@ export default {
     });
   },
   [types.UPDATE_FILE_CONTENT](state, { path, content }) {
-    const changed = content !== state.entries[path].raw;
+    const stagedFile = state.stagedFiles.find(f => f.path === path);
+    const rawContent = stagedFile ? stagedFile.content : state.entries[path].raw;
+    const changed = content !== rawContent;
 
     Object.assign(state.entries[path], {
       content,
@@ -91,8 +93,10 @@ export default {
     });
   },
   [types.DISCARD_FILE_CHANGES](state, path) {
+    const stagedFile = state.stagedFiles.find(f => f.path === path);
+
     Object.assign(state.entries[path], {
-      content: state.entries[path].raw,
+      content: stagedFile ? stagedFile.content : state.entries[path].raw,
       changed: false,
     });
   },

app/assets/stylesheets/pages/repo.scss

@@ -608,11 +608,13 @@
   }
 }
 
-.multi-file-addition {
+.multi-file-additions,
+.multi-file-additions-solid {
   fill: $green-500;
 }
 
-.multi-file-modified {
+.multi-file-modified,
+.multi-file-modified-solid {
   fill: $orange-500;
 }