Merge branch 'ide-staged-changes' into 'master'

Added staged files state to IDE

Closes #44842, #44844, and gitlab-ee#4541

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

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

 <script>
-import icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import Icon from '~/vue_shared/components/icon.vue';
+import { pluralize } from '~/lib/utils/text_utility';
+import { __, sprintf } from '~/locale';
 
 export default {
   components: {
-    icon,
+    Icon,
+  },
+  directives: {
+    tooltip,
   },
   props: {
     file: {
       type: Object,
       required: true,
     },
+    showTooltip: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    showStagedIcon: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     changedIcon() {
-      return this.file.tempFile ? 'file-addition' : 'file-modified';
+      const suffix = this.file.staged && !this.showStagedIcon ? '-solid' : '';
+      return this.file.tempFile ? `file-addition${suffix}` : `file-modified${suffix}`;
+    },
+    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;
+
+      const type = this.file.tempFile ? 'addition' : 'modification';
+
+      if (this.file.changed && !this.file.staged) {
+        return sprintf(__('Unstaged %{type}'), {
+          type,
+        });
+      } else if (!this.file.changed && this.file.staged) {
+        return sprintf(__('Staged %{type}'), {
+          type,
+        });
+      } else if (this.file.changed && this.file.staged) {
+        return sprintf(__('Unstaged and staged %{type}'), {
+          type: pluralize(type),
+        });
+      }
+
+      return undefined;
     },
   },
 };
 </script>
 
 <template>
-  <icon
-    :name="changedIcon"
-    :size="12"
-    :css-classes="`ide-file-changed-icon ${changedIconClass}`"
-  />
+  <span
+    v-tooltip
+    :title="tooltipTitle"
+    data-container="body"
+    data-placement="right"
+    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"
+    />
+  </span>
 </template>

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

+<script>
+import { mapActions, mapState, mapGetters } from 'vuex';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+
+export default {
+  components: {
+    Icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    noChangesStateSvgPath: {
+      type: String,
+      required: true,
+    },
+    committedStateSvgPath: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapState(['lastCommitMsg', 'rightPanelCollapsed']),
+    ...mapGetters(['collapseButtonIcon', 'collapseButtonTooltip']),
+    statusSvg() {
+      return this.lastCommitMsg ? this.committedStateSvgPath : this.noChangesStateSvgPath;
+    },
+  },
+  methods: {
+    ...mapActions(['toggleRightPanelCollapsed']),
+  },
+};
+</script>
+
+<template>
+  <div
+    class="multi-file-commit-panel-section ide-commit-empty-state js-empty-state"
+  >
+    <header
+      class="multi-file-commit-panel-header"
+      :class="{
+        'is-collapsed': rightPanelCollapsed,
+      }"
+    >
+      <button
+        v-tooltip
+        :title="collapseButtonTooltip"
+        data-container="body"
+        data-placement="left"
+        type="button"
+        class="btn btn-transparent multi-file-commit-panel-collapse-btn"
+        :aria-label="__('Toggle sidebar')"
+        @click.stop="toggleRightPanelCollapsed"
+      >
+        <icon
+          :name="collapseButtonIcon"
+          :size="18"
+        />
+      </button>
+    </header>
+    <div
+      class="ide-commit-empty-state-container"
+      v-if="!rightPanelCollapsed"
+    >
+      <div class="svg-content svg-80">
+        <img :src="statusSvg" />
+      </div>
+      <div class="append-right-default prepend-left-default">
+        <div
+          class="text-content text-center"
+          v-if="!lastCommitMsg"
+        >
+          <h4>
+            {{ __('No changes') }}
+          </h4>
+          <p>
+            {{ __('Edit files in the editor and commit changes here') }}
+          </p>
+        </div>
+        <div
+          class="text-content text-center"
+          v-else
+        >
+          <h4>
+            {{ __('All changes are committed') }}
+          </h4>
+          <p v-html="lastCommitMsg"></p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

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

 <script>
-  import { mapState } from 'vuex';
-  import icon from '~/vue_shared/components/icon.vue';
-  import listItem from './list_item.vue';
-  import listCollapsed from './list_collapsed.vue';
+import { mapActions, mapState, mapGetters } from 'vuex';
+import { __, sprintf } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+import ListItem from './list_item.vue';
+import ListCollapsed from './list_collapsed.vue';
 
-  export default {
-    components: {
-      icon,
-      listItem,
-      listCollapsed,
+export default {
+  components: {
+    Icon,
+    ListItem,
+    ListCollapsed,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    title: {
+      type: String,
+      required: true,
     },
-    props: {
-      title: {
-        type: String,
-        required: true,
-      },
-      fileList: {
-        type: Array,
-        required: true,
-      },
+    fileList: {
+      type: Array,
+      required: true,
     },
-    computed: {
-      ...mapState([
-        'currentProjectId',
-        'currentBranchId',
-        'rightPanelCollapsed',
-      ]),
-      isCommitInfoShown() {
-        return this.rightPanelCollapsed || this.fileList.length;
-      },
+    showToggle: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
-    methods: {
-      toggleCollapsed() {
-        this.$emit('toggleCollapsed');
-      },
+    iconName: {
+      type: String,
+      required: true,
     },
-  };
+    action: {
+      type: String,
+      required: true,
+    },
+    actionBtnText: {
+      type: String,
+      required: true,
+    },
+    itemActionComponent: {
+      type: String,
+      required: true,
+    },
+    stagedList: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+  },
+  computed: {
+    ...mapState(['rightPanelCollapsed']),
+    ...mapGetters(['collapseButtonIcon', 'collapseButtonTooltip']),
+    titleText() {
+      return sprintf(__('%{title} changes'), {
+        title: this.title,
+      });
+    },
+  },
+  methods: {
+    ...mapActions(['toggleRightPanelCollapsed', 'stageAllChanges', 'unstageAllChanges']),
+    actionBtnClicked() {
+      this[this.action]();
+    },
+  },
+};
 </script>
 
 <template>
   <div
+    class="ide-commit-list-container"
     :class="{
-      'multi-file-commit-list': isCommitInfoShown
+      'is-collapsed': rightPanelCollapsed,
     }"
   >
+    <header
+      class="multi-file-commit-panel-header"
+    >
+      <div
+        v-if="!rightPanelCollapsed"
+        class="multi-file-commit-panel-header-title"
+        :class="{
+          'append-right-10': showToggle,
+        }"
+      >
+        <icon
+          v-once
+          :name="iconName"
+          :size="18"
+        />
+        {{ titleText }}
+        <button
+          type="button"
+          class="btn btn-blank btn-link ide-staged-action-btn"
+          @click="actionBtnClicked"
+        >
+          {{ actionBtnText }}
+        </button>
+      </div>
+      <button
+        v-if="showToggle"
+        v-tooltip
+        :title="collapseButtonTooltip"
+        data-container="body"
+        data-placement="left"
+        type="button"
+        class="btn btn-transparent multi-file-commit-panel-collapse-btn"
+        :aria-label="__('Toggle sidebar')"
+        @click.stop="toggleRightPanelCollapsed"
+      >
+        <icon
+          :name="collapseButtonIcon"
+          :size="18"
+        />
+      </button>
+    </header>
     <list-collapsed
       v-if="rightPanelCollapsed"
+      :files="fileList"
+      :icon-name="iconName"
+      :title="title"
     />
     <template v-else>
       <ul
         v-if="fileList.length"
-        class="list-unstyled append-bottom-0"
+        class="multi-file-commit-list list-unstyled append-bottom-0"
       >
         <li
           v-for="file in fileList"
@@ -58,9 +134,18 @@
         >
           <list-item
             :file="file"
+            :action-component="itemActionComponent"
+            :key-prefix="title"
+            :staged-list="stagedList"
           />
         </li>
       </ul>
+      <p
+        v-else
+        class="multi-file-commit-list help-block"
+      >
+        {{ __('No changes') }}
+      </p>
     </template>
   </div>
 </template>

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

 <script>
-  import { mapGetters } from 'vuex';
-  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,
+export default {
+  components: {
+    Icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    files: {
+      type: Array,
+      required: true,
     },
-    computed: {
-      ...mapGetters([
-        'addedFiles',
-        'modifiedFiles',
-      ]),
+    iconName: {
+      type: String,
+      required: true,
     },
-  };
+    title: {
+      type: String,
+      required: true,
+    },
+  },
+  computed: {
+    addedFilesLength() {
+      return this.files.filter(f => f.tempFile).length;
+    },
+    modifiedFilesLength() {
+      return this.files.filter(f => !f.tempFile).length;
+    },
+    addedFilesIconClass() {
+      return this.addedFilesLength ? 'multi-file-addition' : '';
+    },
+    modifiedFilesClass() {
+      return this.modifiedFilesLength ? 'multi-file-modified' : '';
+    },
+    additionsTooltip() {
+      return sprintf(n__('1 %{type} addition', '%d %{type} additions', this.addedFilesLength), {
+        type: this.title.toLowerCase(),
+      });
+    },
+    modifiedTooltip() {
+      return sprintf(
+        n__('1 %{type} modification', '%d %{type} modifications', this.modifiedFilesLength),
+        { type: this.title.toLowerCase() },
+      );
+    },
+    titleTooltip() {
+      return sprintf(__('%{title} changes'), { title: this.title });
+    },
+    additionIconName() {
+      return this.title.toLowerCase() === 'staged' ? 'file-addition-solid' : 'file-addition';
+    },
+    modifiedIconName() {
+      return this.title.toLowerCase() === 'staged' ? 'file-modified-solid' : 'file-modified';
+    },
+  },
+};
 </script>
 
 <template>
   <div
     class="multi-file-commit-list-collapsed text-center"
   >
-    <icon
-      name="file-addition"
-      :size="18"
-      css-classes="multi-file-addition append-bottom-10"
-    />
-    {{ addedFiles.length }}
-    <icon
-      name="file-modified"
-      :size="18"
-      css-classes="multi-file-modified prepend-top-10 append-bottom-10"
-    />
-    {{ modifiedFiles.length }}
+    <div
+      v-tooltip
+      :title="titleTooltip"
+      data-container="body"
+      data-placement="left"
+      class="append-bottom-15"
+    >
+      <icon
+        v-once
+        :name="iconName"
+        :size="18"
+      />
+    </div>
+    <div
+      v-tooltip
+      :title="additionsTooltip"
+      data-container="body"
+      data-placement="left"
+      class="append-bottom-10"
+    >
+      <icon
+        :name="additionIconName"
+        :size="18"
+        :css-classes="addedFilesIconClass"
+      />
+    </div>
+    {{ addedFilesLength }}
+    <div
+      v-tooltip
+      :title="modifiedTooltip"
+      data-container="body"
+      data-placement="left"
+      class="prepend-top-10 append-bottom-10"
+    >
+      <icon
+        :name="modifiedIconName"
+        :size="18"
+        :css-classes="modifiedFilesClass"
+      />
+    </div>
+    {{ modifiedFilesLength }}
   </div>
 </template>

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

 <script>
 import { mapActions } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
+import StageButton from './stage_button.vue';
+import UnstageButton from './unstage_button.vue';
 
 export default {
   components: {
     Icon,
+    StageButton,
+    UnstageButton,
   },
   props: {
     file: {
       type: Object,
       required: true,
     },
+    actionComponent: {
+      type: String,
+      required: true,
+    },
+    keyPrefix: {
+      type: String,
+      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-addition${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: {
-    ...mapActions(['discardFileChanges', 'updateViewer', 'openPendingTab']),
-    openFileInEditor(file) {
-      return this.openPendingTab(file).then(changeViewer => {
+    ...mapActions([
+      'discardFileChanges',
+      'updateViewer',
+      'openPendingTab',
+      'unstageChange',
+      'stageChange',
+    ]),
+    openFileInEditor() {
+      return this.openPendingTab({
+        file: this.file,
+        keyPrefix: this.keyPrefix.toLowerCase(),
+      }).then(changeViewer => {
         if (changeViewer) {
           this.updateViewer('diff');
         }
       });
     },
+    fileAction() {
+      if (this.file.staged) {
+        this.unstageChange(this.file.path);
+      } else {
+        this.stageChange(this.file.path);
+      }
+    },
   },
 };
 </script>
@@ -38,7 +73,9 @@ export default {
     <button
       type="button"
       class="multi-file-commit-list-path"
-      @click="openFileInEditor(file)">
+      @dblclick="fileAction"
+      @click="openFileInEditor"
+    >
       <span class="multi-file-commit-list-file-path">
         <icon
           :name="iconName"
@@ -47,12 +84,9 @@ export default {
         />{{ file.path }}
       </span>
     </button>
-    <button
-      type="button"
-      class="btn btn-blank multi-file-discard-btn"
-      @click="discardFileChanges(file.path)"
-    >
-      Discard
-    </button>
+    <component
+      :is="actionComponent"
+      :path="file.path"
+    />
   </div>
 </template>

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

+<script>
+import { mapActions } from 'vuex';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+
+export default {
+  components: {
+    Icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    path: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    ...mapActions(['stageChange', 'discardFileChanges']),
+  },
+};
+</script>
+
+<template>
+  <div
+    v-once
+    class="multi-file-discard-btn"
+  >
+    <button
+      v-tooltip
+      type="button"
+      class="btn btn-blank append-right-5"
+      :aria-label="__('Stage changes')"
+      :title="__('Stage changes')"
+      data-container="body"
+      @click.stop="stageChange(path)"
+    >
+      <icon
+        name="mobile-issue-close"
+        :size="12"
+      />
+    </button>
+    <button
+      v-tooltip
+      type="button"
+      class="btn btn-blank"
+      :aria-label="__('Discard changes')"
+      :title="__('Discard changes')"
+      data-container="body"
+      @click.stop="discardFileChanges(path)"
+    >
+      <icon
+        name="remove"
+        :size="12"
+      />
+    </button>
+  </div>
+</template>

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

+<script>
+import { mapActions } from 'vuex';
+import Icon from '~/vue_shared/components/icon.vue';
+import tooltip from '~/vue_shared/directives/tooltip';
+
+export default {
+  components: {
+    Icon,
+  },
+  directives: {
+    tooltip,
+  },
+  props: {
+    path: {
+      type: String,
+      required: true,
+    },
+  },
+  methods: {
+    ...mapActions(['unstageChange']),
+  },
+};
+</script>
+
+<template>
+  <div
+    v-once
+    class="multi-file-discard-btn"
+  >
+    <button
+      v-tooltip
+      type="button"
+      class="btn btn-blank"
+      :aria-label="__('Unstage changes')"
+      :title="__('Unstage changes')"
+      data-container="body"
+      @click="unstageChange(path)"
+    >
+      <icon
+        name="history"
+        :size="12"
+      />
+    </button>
+  </div>
+</template>

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

 <script>
-import { mapActions, mapGetters, mapState } from 'vuex';
 import icon from '~/vue_shared/components/icon.vue';
 import panelResizer from '~/vue_shared/components/panel_resizer.vue';
 import repoCommitSection from './repo_commit_section.vue';
@@ -22,13 +21,6 @@ export default {
       required: true,
     },
   },
-  computed: {
-    ...mapState(['changedFiles', 'rightPanelCollapsed']),
-    ...mapGetters(['currentIcon']),
-  },
-  methods: {
-    ...mapActions(['setPanelCollapsedStatus']),
-  },
 };
 </script>
 
@@ -41,40 +33,6 @@ export default {
     <div
       class="multi-file-commit-panel-section"
     >
-      <header
-        class="multi-file-commit-panel-header"
-        :class="{
-          'is-collapsed': rightPanelCollapsed,
-        }"
-      >
-        <div
-          class="multi-file-commit-panel-header-title"
-          v-if="!rightPanelCollapsed"
-        >
-          <div
-            v-if="changedFiles.length"
-          >
-            <icon
-              name="list-bulleted"
-              :size="18"
-            />
-            Staged
-          </div>
-        </div>
-        <button
-          type="button"
-          class="btn btn-transparent multi-file-commit-panel-collapse-btn"
-          @click.stop="setPanelCollapsedStatus({
-            side: 'right',
-            collapsed: !rightPanelCollapsed,
-          })"
-        >
-          <icon
-            :name="currentIcon"
-            :size="18"
-          />
-        </button>
-      </header>
       <repo-commit-section
         :no-changes-state-svg-path="noChangesStateSvgPath"
         :committed-state-svg-path="committedStateSvgPath"

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';
 import Actions from './commit_sidebar/actions.vue';
@@ -12,8 +13,9 @@ import Actions from './commit_sidebar/actions.vue';
 export default {
   components: {
     DeprecatedModal,
-    icon,
-    commitFilesList,
+    Icon,
+    CommitFilesList,
+    EmptyState,
     Actions,
     LoadingButton,
     CommitMessageField,
@@ -32,33 +34,17 @@ export default {
     },
   },
   computed: {
-    ...mapState([
-      'currentProjectId',
-      'currentBranchId',
-      'rightPanelCollapsed',
-      'lastCommitMsg',
-      'changedFiles',
-    ]),
+    ...mapState(['changedFiles', 'stagedFiles', 'rightPanelCollapsed']),
     ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
     ...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled', 'branchName']),
-    statusSvg() {
-      return this.lastCommitMsg ? this.committedStateSvgPath : this.noChangesStateSvgPath;
-    },
   },
   methods: {
-    ...mapActions(['setPanelCollapsedStatus']),
     ...mapActions('commit', [
       'updateCommitMessage',
       'discardDraft',
       'commitChanges',
       'updateCommitAction',
     ]),
-    toggleCollapsed() {
-      this.setPanelCollapsedStatus({
-        side: 'right',
-        collapsed: !this.rightPanelCollapsed,
-      });
-    },
     forceCreateNewBranch() {
       return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH).then(() => this.commitChanges());
     },
@@ -69,9 +55,6 @@ export default {
 <template>
   <div
     class="multi-file-commit-panel-section"
-    :class="{
-      'multi-file-commit-empty-state-container': !changedFiles.length
-    }"
   >
     <deprecated-modal
       id="ide-create-branch-modal"
@@ -85,15 +68,27 @@ export default {
           Would you like to create a new branch?`) }}
       </template>
     </deprecated-modal>
-    <commit-files-list
-      title="Staged"
-      :file-list="changedFiles"
-      :collapsed="rightPanelCollapsed"
-      @toggleCollapsed="toggleCollapsed"
-    />
     <template
-      v-if="changedFiles.length"
+      v-if="changedFiles.length || stagedFiles.length"
     >
+      <commit-files-list
+        icon-name="unstaged"
+        :title="__('Unstaged')"
+        :file-list="changedFiles"
+        action="stageAllChanges"
+        :action-btn-text="__('Stage all')"
+        item-action-component="stage-button"
+      />
+      <commit-files-list
+        icon-name="staged"
+        :title="__('Staged')"
+        :file-list="stagedFiles"
+        action="unstageAllChanges"
+        :action-btn-text="__('Unstage all')"
+        item-action-component="unstage-button"
+        :show-toggle="false"
+        :staged-list="true"
+      />
       <form
         class="form-horizontal multi-file-commit-form"
         @submit.prevent.stop="commitChanges"
@@ -123,38 +118,10 @@ export default {
         </div>
       </form>
     </template>
-    <div
-      v-else-if="!rightPanelCollapsed"
-      class="row js-empty-state"
-    >
-      <div class="col-xs-10 col-xs-offset-1">
-        <div class="svg-content svg-80">
-          <img :src="statusSvg" />
-        </div>
-      </div>
-      <div class="col-xs-10 col-xs-offset-1">
-        <div
-          class="text-content text-center"
-          v-if="!lastCommitMsg"
-        >
-          <h4>
-            {{ __('No changes') }}
-          </h4>
-          <p>
-            {{ __('Edit files in the editor and commit changes here') }}
-          </p>
-        </div>
-        <div
-          class="text-content text-center"
-          v-else
-        >
-          <h4>
-            {{ __('All changes are committed') }}
-          </h4>
-          <p v-html="lastCommitMsg">
-          </p>
-        </div>
-      </div>
-    </div>
+    <empty-state
+      v-else
+      :no-changes-state-svg-path="noChangesStateSvgPath"
+      :committed-state-svg-path="committedStateSvgPath"
+    />
   </div>
 </template>

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

@@ -20,7 +20,7 @@ export default {
   },
   computed: {
     ...mapState(['rightPanelCollapsed', 'viewer', 'delayViewerUpdated', 'panelResizing']),
-    ...mapGetters(['currentMergeRequest']),
+    ...mapGetters(['currentMergeRequest', 'getStagedFile']),
     shouldHideEditor() {
       return this.file && this.file.binary && !this.file.content;
     },
@@ -120,7 +120,12 @@ export default {
     setupEditor() {
       if (!this.file || !this.editor.instance) return;
 
-      this.model = this.editor.createModel(this.file);
+      const head = this.getStagedFile(this.file.path);
+
+      this.model = this.editor.createModel(
+        this.file,
+        this.file.staged && this.file.key.indexOf('unstaged-') === 0 ? head : null,
+      );
 
       if (this.viewer === 'mrdiff') {
         this.editor.attachMergeRequestModel(this.model);

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

@@ -102,8 +102,11 @@ export default {
             v-if="file.mrChange"
           />
           <changed-file-icon
+            v-if="file.changed || file.tempFile || file.staged"
             :file="file"
-            v-if="file.changed || file.tempFile"
+            :show-tooltip="true"
+            :show-staged-icon="true"
+            class="prepend-top-5 pull-right"
           />
         </span>
         <new-dropdown

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

@@ -26,13 +26,16 @@ export default {
   },
   computed: {
     closeLabel() {
-      if (this.tab.changed || this.tab.tempFile) {
+      if (this.fileHasChanged) {
         return `${this.tab.name} changed`;
       }
       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;
     },
   },
 
@@ -42,18 +45,18 @@ export default {
       this.updateDelayViewerUpdated(true);
 
       if (tab.pending) {
-        this.openPendingTab(tab);
+        this.openPendingTab({ file: tab, keyPrefix: tab.staged ? 'staged' : 'unstaged' });
       } else {
         this.$router.push(`/project${tab.url}`);
       }
     },
     mouseOverTab() {
-      if (this.tab.changed) {
+      if (this.fileHasChanged) {
         this.tabMouseOver = true;
       }
     },
     mouseOutTab() {
-      if (this.tab.changed) {
+      if (this.fileHasChanged) {
         this.tabMouseOver = false;
       }
     },

app/assets/javascripts/ide/lib/common/model.js

@@ -3,15 +3,16 @@ import Disposable from './disposable';
 import eventHub from '../../eventhub';
 
 export default class Model {
-  constructor(monaco, file) {
+  constructor(monaco, file, head = null) {
     this.monaco = monaco;
     this.disposable = new Disposable();
     this.file = file;
+    this.head = head;
     this.content = file.content !== '' ? file.content : file.raw;
 
     this.disposable.add(
       (this.originalModel = this.monaco.editor.createModel(
-        this.file.raw,
+        head ? head.content : this.file.raw,
         undefined,
         new this.monaco.Uri(null, null, `original/${this.file.key}`),
       )),
@@ -34,10 +35,12 @@ export default class Model {
     this.events = new Map();
 
     this.updateContent = this.updateContent.bind(this);
+    this.updateNewContent = this.updateNewContent.bind(this);
     this.dispose = this.dispose.bind(this);
 
     eventHub.$on(`editor.update.model.dispose.${this.file.key}`, this.dispose);
-    eventHub.$on(`editor.update.model.content.${this.file.path}`, this.updateContent);
+    eventHub.$on(`editor.update.model.content.${this.file.key}`, this.updateContent);
+    eventHub.$on(`editor.update.model.new.content.${this.file.key}`, this.updateNewContent);
   }
 
   get url() {
@@ -79,8 +82,15 @@ export default class Model {
     );
   }
 
-  updateContent(content) {
+  updateContent({ content, changed }) {
     this.getOriginalModel().setValue(content);
+
+    if (!changed) {
+      this.getModel().setValue(content);
+    }
+  }
+
+  updateNewContent(content) {
     this.getModel().setValue(content);
   }
 
@@ -89,6 +99,7 @@ export default class Model {
     this.events.clear();
 
     eventHub.$off(`editor.update.model.dispose.${this.file.key}`, this.dispose);
-    eventHub.$off(`editor.update.model.content.${this.file.path}`, this.updateContent);
+    eventHub.$off(`editor.update.model.content.${this.file.key}`, this.updateContent);
+    eventHub.$off(`editor.update.model.new.content.${this.file.key}`, this.updateNewContent);
   }
 }

app/assets/javascripts/ide/lib/common/model_manager.js

@@ -17,12 +17,12 @@ export default class ModelManager {
     return this.models.get(key);
   }
 
-  addModel(file) {
+  addModel(file, head = null) {
     if (this.hasCachedModel(file.key)) {
       return this.getModel(file.key);
     }
 
-    const model = new Model(this.monaco, file);
+    const model = new Model(this.monaco, file, head);
     this.models.set(model.path, model);
     this.disposable.add(model);
 

app/assets/javascripts/ide/lib/editor.js

@@ -77,8 +77,8 @@ export default class Editor {
     }
   }
 
-  createModel(file) {
-    return this.modelManager.addModel(file);
+  createModel(file, head = null) {
+    return this.modelManager.addModel(file, head);
   }
 
   attachModel(model) {

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

+import $ from 'jquery';
 import Vue from 'vue';
 import { visitUrl } from '~/lib/utils/url_utility';
 import flash from '~/flash';
@@ -32,6 +33,22 @@ export const setPanelCollapsedStatus = ({ commit }, { side, collapsed }) => {
   }
 };
 
+export const toggleRightPanelCollapsed = (
+  { dispatch, state },
+  e = undefined,
+) => {
+  if (e) {
+    $(e.currentTarget)
+      .tooltip('hide')
+      .blur();
+  }
+
+  dispatch('setPanelCollapsedStatus', {
+    side: 'right',
+    collapsed: !state.rightPanelCollapsed,
+  });
+};
+
 export const setResizingStatus = ({ commit }, resizing) => {
   commit(types.SET_RESIZING_STATUS, resizing);
 };
@@ -104,6 +121,14 @@ export const scrollToTab = () => {
   });
 };
 
+export const stageAllChanges = ({ state, commit }) => {
+  state.changedFiles.forEach(file => commit(types.STAGE_CHANGE, file.path));
+};
+
+export const unstageAllChanges = ({ state, commit }) => {
+  state.stagedFiles.forEach(file => commit(types.UNSTAGE_CHANGE, file.path));
+};
+
 export const updateViewer = ({ commit }, viewer) => {
   commit(types.UPDATE_VIEWER, viewer);
 };

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

@@ -24,7 +24,10 @@ export const closeFile = ({ commit, state, dispatch }, file) => {
 
     if (nextFileToOpen.pending) {
       dispatch('updateViewer', 'diff');
-      dispatch('openPendingTab', nextFileToOpen);
+      dispatch('openPendingTab', {
+        file: nextFileToOpen,
+        keyPrefix: nextFileToOpen.staged ? 'staged' : 'unstaged',
+      });
     } else {
       dispatch('updateDelayViewerUpdated', true);
       router.push(`/project${nextFileToOpen.url}`);
@@ -153,7 +156,7 @@ export const setFileViewMode = ({ state, commit }, { file, viewMode }) => {
   commit(types.SET_FILE_VIEWMODE, { file, viewMode });
 };
 
-export const discardFileChanges = ({ state, commit }, path) => {
+export const discardFileChanges = ({ dispatch, state, commit, getters }, path) => {
   const file = state.entries[path];
 
   commit(types.DISCARD_FILE_CHANGES, path);
@@ -161,17 +164,40 @@ export const discardFileChanges = ({ state, commit }, path) => {
 
   if (file.tempFile && file.opened) {
     commit(types.TOGGLE_FILE_OPEN, path);
+  } else if (getters.activeFile && file.path === getters.activeFile.path) {
+    dispatch('updateDelayViewerUpdated', true)
+      .then(() => {
+        router.push(`/project${file.url}`);
+      })
+      .catch(e => {
+        throw e;
+      });
+  }
+
+  eventHub.$emit(`editor.update.model.new.content.${file.key}`, file.content);
+  eventHub.$emit(`editor.update.model.dispose.unstaged-${file.key}`, file.content);
+};
+
+export const stageChange = ({ commit, state }, path) => {
+  const stagedFile = state.stagedFiles.find(f => f.path === path);
+
+  commit(types.STAGE_CHANGE, path);
+
+  if (stagedFile) {
+    eventHub.$emit(`editor.update.model.new.content.staged-${stagedFile.key}`, stagedFile.content);
   }
+};
 
-  eventHub.$emit(`editor.update.model.content.${file.path}`, file.raw);
+export const unstageChange = ({ commit }, path) => {
+  commit(types.UNSTAGE_CHANGE, path);
 };
 
-export const openPendingTab = ({ commit, getters, dispatch, state }, file) => {
-  if (getters.activeFile && getters.activeFile.path === file.path && state.viewer === 'diff') {
+export const openPendingTab = ({ commit, getters, dispatch, state }, { file, keyPrefix }) => {
+  if (getters.activeFile && getters.activeFile === file && state.viewer === 'diff') {
     return false;
   }
 
-  commit(types.ADD_PENDING_TAB, { file });
+  commit(types.ADD_PENDING_TAB, { file, keyPrefix });
 
   dispatch('scrollToTab');
 

app/assets/javascripts/ide/stores/getters.js

+import { __ } from '~/locale';
+
 export const activeFile = state => state.openFiles.find(file => file.active) || null;
 
 export const addedFiles = state => state.changedFiles.filter(f => f.tempFile);
@@ -29,9 +31,15 @@ export const currentMergeRequest = state => {
 };
 
 // eslint-disable-next-line no-confusing-arrow
-export const currentIcon = state =>
+export const collapseButtonIcon = state =>
   state.rightPanelCollapsed ? 'angle-double-left' : 'angle-double-right';
 
-export const hasChanges = state => !!state.changedFiles.length;
+export const hasChanges = state => !!state.changedFiles.length || !!state.stagedFiles.length;
+
+// eslint-disable-next-line no-confusing-arrow
+export const collapseButtonTooltip = state =>
+  state.rightPanelCollapsed ? __('Expand sidebar') : __('Collapse sidebar');
 
 export const hasMergeRequest = state => !!state.currentMergeRequestId;
+
+export const getStagedFile = state => path => state.stagedFiles.find(f => f.path === path);

app/assets/javascripts/ide/stores/modules/commit/actions.js

@@ -98,40 +98,25 @@ export const updateFilesAfterCommit = (
     { root: true },
   );
 
-  rootState.changedFiles.forEach(entry => {
-    commit(
-      rootTypes.SET_LAST_COMMIT_DATA,
-      {
-        entry,
-        lastCommit,
-      },
-      { root: true },
-    );
-
-    eventHub.$emit(`editor.update.model.content.${entry.path}`, entry.content);
+  rootState.stagedFiles.forEach(file => {
+    const changedFile = rootState.changedFiles.find(f => f.path === file.path);
 
     commit(
-      rootTypes.SET_FILE_RAW_DATA,
+      rootTypes.UPDATE_FILE_AFTER_COMMIT,
       {
-        file: entry,
-        raw: entry.content,
+        file,
+        lastCommit,
       },
       { root: true },
     );
 
-    commit(
-      rootTypes.TOGGLE_FILE_CHANGED,
-      {
-        file: entry,
-        changed: false,
-      },
-      { root: true },
-    );
+    eventHub.$emit(`editor.update.model.content.${file.key}`, {
+      content: file.content,
+      changed: !!changedFile,
+    });
   });
 
-  commit(rootTypes.REMOVE_ALL_CHANGES_FILES, null, { root: true });
-
-  if (state.commitAction === consts.COMMIT_TO_NEW_BRANCH) {
+  if (state.commitAction === consts.COMMIT_TO_NEW_BRANCH && rootGetters.activeFile) {
     router.push(
       `/project/${rootState.currentProjectId}/blob/${branch}/${rootGetters.activeFile.path}`,
     );
@@ -184,6 +169,8 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState }) =
               { root: true },
             );
           }
+
+          commit(rootTypes.CLEAR_STAGED_CHANGES, null, { root: true });
         })
         .then(() => dispatch('updateCommitAction', consts.COMMIT_TO_CURRENT_BRANCH));
     })

app/assets/javascripts/ide/stores/modules/commit/getters.js

 import * as consts from './constants';
 
-export const discardDraftButtonDisabled = state => state.commitMessage === '' || state.submitCommitLoading;
+const BRANCH_SUFFIX_COUNT = 5;
+
+export const discardDraftButtonDisabled = state =>
+  state.commitMessage === '' || state.submitCommitLoading;
 
 export const commitButtonDisabled = (state, getters, rootState) =>
-  getters.discardDraftButtonDisabled || !rootState.changedFiles.length;
+  getters.discardDraftButtonDisabled || !rootState.stagedFiles.length;
 
 export const newBranchName = (state, _, rootState) =>
-  `${gon.current_username}-${rootState.currentBranchId}-patch-${`${new Date().getTime()}`.substr(-5)}`;
+  `${gon.current_username}-${rootState.currentBranchId}-patch-${`${new Date().getTime()}`.substr(
+    -BRANCH_SUFFIX_COUNT,
+  )}`;
 
 export const branchName = (state, getters, rootState) => {
   if (

app/assets/javascripts/ide/stores/mutation_types.js

@@ -51,5 +51,10 @@ export const SET_FILE_MERGE_REQUEST_CHANGE = 'SET_FILE_MERGE_REQUEST_CHANGE';
 export const UPDATE_VIEWER = 'UPDATE_VIEWER';
 export const UPDATE_DELAY_VIEWER_CHANGE = 'UPDATE_DELAY_VIEWER_CHANGE';
 
+export const CLEAR_STAGED_CHANGES = 'CLEAR_STAGED_CHANGES';
+export const STAGE_CHANGE = 'STAGE_CHANGE';
+export const UNSTAGE_CHANGE = 'UNSTAGE_CHANGE';
+
+export const UPDATE_FILE_AFTER_COMMIT = 'UPDATE_FILE_AFTER_COMMIT';
 export const ADD_PENDING_TAB = 'ADD_PENDING_TAB';
 export const REMOVE_PENDING_TAB = 'REMOVE_PENDING_TAB';

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

@@ -49,6 +49,11 @@ export default {
       lastCommitMsg,
     });
   },
+  [types.CLEAR_STAGED_CHANGES](state) {
+    Object.assign(state, {
+      stagedFiles: [],
+    });
+  },
   [types.SET_ENTRIES](state, entries) {
     Object.assign(state, {
       entries,
@@ -95,6 +100,22 @@ export default {
       delayViewerUpdated,
     });
   },
+  [types.UPDATE_FILE_AFTER_COMMIT](state, { file, lastCommit }) {
+    const changedFile = state.changedFiles.find(f => f.path === file.path);
+
+    Object.assign(state.entries[file.path], {
+      raw: file.content,
+      changed: !!changedFile,
+      staged: false,
+      lastCommit: Object.assign(state.entries[file.path].lastCommit, {
+        id: lastCommit.commit.id,
+        url: lastCommit.commit_path,
+        message: lastCommit.commit.message,
+        author: lastCommit.commit.author_name,
+        updatedAt: lastCommit.commit.authored_date,
+      }),
+    });
+  },
   ...projectMutations,
   ...mergeRequestMutation,
   ...fileMutations,

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,
     });
   },
@@ -106,16 +110,67 @@ export default {
       changedFiles: state.changedFiles.filter(f => f.path !== path),
     });
   },
+  [types.STAGE_CHANGE](state, path) {
+    const stagedFile = state.stagedFiles.find(f => f.path === path);
+
+    Object.assign(state, {
+      changedFiles: state.changedFiles.filter(f => f.path !== path),
+      entries: Object.assign(state.entries, {
+        [path]: Object.assign(state.entries[path], {
+          staged: true,
+          changed: false,
+        }),
+      }),
+    });
+
+    if (stagedFile) {
+      Object.assign(stagedFile, {
+        ...state.entries[path],
+      });
+    } else {
+      Object.assign(state, {
+        stagedFiles: state.stagedFiles.concat({
+          ...state.entries[path],
+        }),
+      });
+    }
+  },
+  [types.UNSTAGE_CHANGE](state, path) {
+    const changedFile = state.changedFiles.find(f => f.path === path);
+    const stagedFile = state.stagedFiles.find(f => f.path === path);
+
+    if (!changedFile && stagedFile) {
+      Object.assign(state.entries[path], {
+        ...stagedFile,
+        key: state.entries[path].key,
+        active: state.entries[path].active,
+        opened: state.entries[path].opened,
+        changed: true,
+      });
+
+      Object.assign(state, {
+        changedFiles: state.changedFiles.concat(state.entries[path]),
+      });
+    }
+
+    Object.assign(state, {
+      stagedFiles: state.stagedFiles.filter(f => f.path !== path),
+      entries: Object.assign(state.entries, {
+        [path]: Object.assign(state.entries[path], {
+          staged: false,
+        }),
+      }),
+    });
+  },
   [types.TOGGLE_FILE_CHANGED](state, { file, changed }) {
     Object.assign(state.entries[file.path], {
       changed,
     });
   },
   [types.ADD_PENDING_TAB](state, { file, keyPrefix = 'pending' }) {
-    const pendingTab = state.openFiles.find(f => f.path === file.path && f.pending);
-    let openFiles = state.openFiles.map(f =>
-      Object.assign(f, { active: f.path === file.path, opened: false }),
-    );
+    const key = `${keyPrefix}-${file.key}`;
+    const pendingTab = state.openFiles.find(f => f.key === key && f.pending);
+    let openFiles = state.openFiles.map(f => Object.assign(f, { active: false, opened: false }));
 
     if (!pendingTab) {
       const openFile = openFiles.find(f => f.path === file.path);
@@ -126,10 +181,11 @@ export default {
         if (f.path === file.path) {
           return acc.concat({
             ...f,
+            content: file.content,
             active: true,
             pending: true,
             opened: true,
-            key: `${keyPrefix}-${f.key}`,
+            key,
           });
         }
 

app/assets/javascripts/ide/stores/state.js

@@ -3,6 +3,7 @@ export default () => ({
   currentBranchId: '',
   currentMergeRequestId: '',
   changedFiles: [],
+  stagedFiles: [],
   endpoints: {},
   lastCommitMsg: '',
   lastCommitPath: '',

app/assets/javascripts/ide/stores/utils.js

@@ -15,6 +15,7 @@ export const dataStructure = () => ({
   opened: false,
   active: false,
   changed: false,
+  staged: false,
   lastCommitPath: '',
   lastCommit: {
     id: '',
@@ -101,7 +102,7 @@ export const setPageTitle = title => {
 export const createCommitPayload = (branch, newBranch, state, rootState) => ({
   branch,
   commit_message: state.commitMessage,
-  actions: rootState.changedFiles.map(f => ({
+  actions: rootState.stagedFiles.map(f => ({
     action: f.tempFile ? 'create' : 'update',
     file_path: f.path,
     content: f.content,

app/assets/stylesheets/pages/repo.scss

@@ -68,6 +68,10 @@
 
     .ide-file-changed-icon {
       margin-left: auto;
+
+      > svg {
+        display: block;
+      }
     }
 
     .ide-new-btn {
@@ -525,9 +529,13 @@
   overflow: auto;
 }
 
-.multi-file-commit-empty-state-container {
-  align-items: center;
-  justify-content: center;
+.ide-commit-empty-state {
+  padding: 0 $gl-padding;
+}
+
+.ide-commit-empty-state-container {
+  margin-top: auto;
+  margin-bottom: auto;
 }
 
 .multi-file-commit-panel-header {
@@ -536,35 +544,22 @@
   margin-bottom: 0;
   border-bottom: 1px solid $white-dark;
   padding: $gl-btn-padding 0;
-
-  &.is-collapsed {
-    border-bottom: 1px solid $white-dark;
-
-    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 {
   display: flex;
   flex: 1;
-  padding: 0 $gl-btn-padding;
+  padding-left: $grid-size;
 
   svg {
     margin-right: $gl-btn-padding;
+    color: $theme-gray-700;
   }
 }
 
 .multi-file-commit-panel-collapse-btn {
   border-left: 1px solid $white-dark;
+  margin-left: auto;
 }
 
 .multi-file-commit-list {
@@ -578,12 +573,14 @@
   display: flex;
   padding: 0;
   align-items: center;
+  border-radius: $border-radius-default;
 
   .multi-file-discard-btn {
     display: none;
+    margin-top: -2px;
     margin-left: auto;
+    margin-right: $grid-size;
     color: $gl-link-color;
-    padding: 0 2px;
 
     &:focus,
     &:hover {
@@ -595,26 +592,31 @@
     background: $white-normal;
 
     .multi-file-discard-btn {
-      display: block;
+      display: flex;
     }
   }
 }
 
-.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;
 }
 
 .multi-file-commit-list-collapsed {
   display: flex;
   flex-direction: column;
+  padding: $gl-padding 0;
 
-  > svg {
+  svg {
+    display: block;
     margin-left: auto;
     margin-right: auto;
+    color: $theme-gray-700;
   }
 
   .file-status-icon {
@@ -626,7 +628,7 @@
 
 .multi-file-commit-list-path {
   padding: $grid-size / 2;
-  padding-left: $gl-padding;
+  padding-left: $grid-size;
   background: none;
   border: 0;
   text-align: left;
@@ -811,6 +813,41 @@
   }
 }
 
+.ide-commit-list-container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 0 16px;
+
+  &:not(.is-collapsed) {
+    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 {
+  margin-left: auto;
+  color: $gl-link-color;
+}
+
 .ide-commit-radios {
   label {
     font-weight: normal;

spec/features/projects/tree/create_directory_spec.rb

@@ -44,6 +44,8 @@ feature 'Multi-file editor new directory', :js do
 
     wait_for_requests
 
+    click_button 'Stage all'
+
     fill_in('commit-message', with: 'commit message ide')
 
     click_button('Commit')

spec/features/projects/tree/create_file_spec.rb

@@ -34,6 +34,8 @@ feature 'Multi-file editor new file', :js do
 
     wait_for_requests
 
+    click_button 'Stage all'
+
     fill_in('commit-message', with: 'commit message ide')
 
     click_button('Commit')

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

+import Vue from 'vue';
+import store from '~/ide/stores';
+import emptyState from '~/ide/components/commit_sidebar/empty_state.vue';
+import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
+import { resetStore } from '../../helpers';
+
+describe('IDE commit panel empty state', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(emptyState);
+
+    vm = createComponentWithStore(Component, store, {
+      noChangesStateSvgPath: 'no-changes',
+      committedStateSvgPath: 'committed-state',
+    });
+
+    vm.$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+
+    resetStore(vm.$store);
+  });
+
+  describe('statusSvg', () => {
+    it('uses noChangesStateSvgPath when commit message is empty', () => {
+      expect(vm.statusSvg).toBe('no-changes');
+      expect(vm.$el.querySelector('img').getAttribute('src')).toBe(
+        'no-changes',
+      );
+    });
+
+    it('uses committedStateSvgPath when commit message exists', done => {
+      vm.$store.state.lastCommitMsg = 'testing';
+
+      Vue.nextTick(() => {
+        expect(vm.statusSvg).toBe('committed-state');
+        expect(vm.$el.querySelector('img').getAttribute('src')).toBe(
+          'committed-state',
+        );
+
+        done();
+      });
+    });
+  });
+
+  it('renders no changes text when last commit message is empty', () => {
+    expect(vm.$el.textContent).toContain('No changes');
+  });
+
+  it('renders last commit message when it exists', done => {
+    vm.$store.state.lastCommitMsg = 'testing commit message';
+
+    Vue.nextTick(() => {
+      expect(vm.$el.textContent).toContain('testing commit message');
+
+      done();
+    });
+  });
+
+  describe('toggle button', () => {
+    it('calls store action', () => {
+      spyOn(vm, 'toggleRightPanelCollapsed');
+
+      vm.$el.querySelector('.multi-file-commit-panel-collapse-btn').click();
+
+      expect(vm.toggleRightPanelCollapsed).toHaveBeenCalled();
+    });
+
+    it('renders collapsed class', done => {
+      vm.$el.querySelector('.multi-file-commit-panel-collapse-btn').click();
+
+      Vue.nextTick(() => {
+        expect(vm.$el.querySelector('.is-collapsed')).not.toBeNull();
+
+        done();
+      });
+    });
+  });
+
+  describe('collapsed state', () => {
+    beforeEach(done => {
+      vm.$store.state.rightPanelCollapsed = true;
+
+      Vue.nextTick(done);
+    });
+
+    it('does not render text & svg', () => {
+      expect(vm.$el.querySelector('img')).toBeNull();
+      expect(vm.$el.textContent).not.toContain('No changes');
+    });
+  });
+});

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

@@ -11,10 +11,17 @@ describe('Multi-file editor commit sidebar list collapsed', () => {
   beforeEach(() => {
     const Component = Vue.extend(listCollapsed);
 
-    vm = createComponentWithStore(Component, store);
-
-    vm.$store.state.changedFiles.push(file('file1'), file('file2'));
-    vm.$store.state.changedFiles[0].tempFile = true;
+    vm = createComponentWithStore(Component, store, {
+      files: [
+        {
+          ...file('file1'),
+          tempFile: true,
+        },
+        file('file2'),
+      ],
+      iconName: 'staged',
+      title: 'Staged',
+    });
 
     vm.$mount();
   });
@@ -26,4 +33,40 @@ describe('Multi-file editor commit sidebar list collapsed', () => {
   it('renders added & modified files count', () => {
     expect(removeWhitespace(vm.$el.textContent).trim()).toBe('1 1');
   });
+
+  describe('addedFilesLength', () => {
+    it('returns an length of temp files', () => {
+      expect(vm.addedFilesLength).toBe(1);
+    });
+  });
+
+  describe('modifiedFilesLength', () => {
+    it('returns an length of modified files', () => {
+      expect(vm.modifiedFilesLength).toBe(1);
+    });
+  });
+
+  describe('addedFilesIconClass', () => {
+    it('includes multi-file-addition when addedFiles is not empty', () => {
+      expect(vm.addedFilesIconClass).toContain('multi-file-addition');
+    });
+
+    it('excludes multi-file-addition when addedFiles is empty', () => {
+      vm.files = [];
+
+      expect(vm.addedFilesIconClass).not.toContain('multi-file-addition');
+    });
+  });
+
+  describe('modifiedFilesClass', () => {
+    it('includes multi-file-modified when addedFiles is not empty', () => {
+      expect(vm.modifiedFilesClass).toContain('multi-file-modified');
+    });
+
+    it('excludes multi-file-modified when addedFiles is empty', () => {
+      vm.files = [];
+
+      expect(vm.modifiedFilesClass).not.toContain('multi-file-modified');
+    });
+  });
 });

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

 import Vue from 'vue';
+import store from '~/ide/stores';
 import listItem from '~/ide/components/commit_sidebar/list_item.vue';
 import router from '~/ide/ide_router';
-import store from '~/ide/stores';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
 import { file, resetStore } from '../../helpers';
 
@@ -18,6 +18,7 @@ describe('Multi-file editor commit sidebar list item', () => {
 
     vm = createComponentWithStore(Component, store, {
       file: f,
+      actionComponent: 'stage-button',
     }).$mount();
   });
 
@@ -31,22 +32,18 @@ describe('Multi-file editor commit sidebar list item', () => {
     expect(vm.$el.querySelector('.multi-file-commit-list-path').textContent.trim()).toBe(f.path);
   });
 
-  it('calls discardFileChanges when clicking discard button', () => {
-    spyOn(vm, 'discardFileChanges');
-
-    vm.$el.querySelector('.multi-file-discard-btn').click();
-
-    expect(vm.discardFileChanges).toHaveBeenCalled();
+  it('renders actionn button', () => {
+    expect(vm.$el.querySelector('.multi-file-discard-btn')).not.toBeNull();
   });
 
   it('opens a closed file in the editor when clicking the file path', done => {
-    spyOn(vm, 'openFileInEditor').and.callThrough();
+    spyOn(vm, 'openPendingTab').and.callThrough();
     spyOn(router, 'push');
 
     vm.$el.querySelector('.multi-file-commit-list-path').click();
 
     setTimeout(() => {
-      expect(vm.openFileInEditor).toHaveBeenCalled();
+      expect(vm.openPendingTab).toHaveBeenCalled();
       expect(router.push).toHaveBeenCalled();
 
       done();

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

@@ -2,7 +2,7 @@ import Vue from 'vue';
 import store from '~/ide/stores';
 import commitSidebarList from '~/ide/components/commit_sidebar/list.vue';
 import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { file } from '../../helpers';
+import { file, resetStore } from '../../helpers';
 
 describe('Multi-file editor commit sidebar list', () => {
   let vm;
@@ -13,6 +13,10 @@ describe('Multi-file editor commit sidebar list', () => {
     vm = createComponentWithStore(Component, store, {
       title: 'Staged',
       fileList: [],
+      iconName: 'staged',
+      action: 'stageAllChanges',
+      actionBtnText: 'stage all',
+      itemActionComponent: 'stage-button',
     });
 
     vm.$store.state.rightPanelCollapsed = false;
@@ -22,6 +26,8 @@ describe('Multi-file editor commit sidebar list', () => {
 
   afterEach(() => {
     vm.$destroy();
+
+    resetStore(vm.$store);
   });
 
   describe('with a list of files', () => {
@@ -38,6 +44,12 @@ describe('Multi-file editor commit sidebar list', () => {
     });
   });
 
+  describe('empty files array', () => {
+    it('renders no changes text when empty', () => {
+      expect(vm.$el.textContent).toContain('No changes');
+    });
+  });
+
   describe('collapsed', () => {
     beforeEach(done => {
       vm.$store.state.rightPanelCollapsed = true;
@@ -50,4 +62,32 @@ describe('Multi-file editor commit sidebar list', () => {
       expect(vm.$el.querySelector('.help-block')).toBeNull();
     });
   });
+
+  describe('with toggle', () => {
+    beforeEach(done => {
+      spyOn(vm, 'toggleRightPanelCollapsed');
+
+      vm.showToggle = true;
+
+      Vue.nextTick(done);
+    });
+
+    it('calls setPanelCollapsedStatus when clickin toggle', () => {
+      vm.$el.querySelector('.multi-file-commit-panel-collapse-btn').click();
+
+      expect(vm.toggleRightPanelCollapsed).toHaveBeenCalled();
+    });
+  });
+
+  describe('action button', () => {
+    beforeEach(() => {
+      spyOn(vm, 'stageAllChanges');
+    });
+
+    it('calls store action when clicked', () => {
+      vm.$el.querySelector('.ide-staged-action-btn').click();
+
+      expect(vm.stageAllChanges).toHaveBeenCalled();
+    });
+  });
 });

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

+import Vue from 'vue';
+import store from '~/ide/stores';
+import stageButton from '~/ide/components/commit_sidebar/stage_button.vue';
+import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
+import { file, resetStore } from '../../helpers';
+
+describe('IDE stage file button', () => {
+  let vm;
+  let f;
+
+  beforeEach(() => {
+    const Component = Vue.extend(stageButton);
+    f = file();
+
+    vm = createComponentWithStore(Component, store, {
+      path: f.path,
+    });
+
+    spyOn(vm, 'stageChange');
+    spyOn(vm, 'discardFileChanges');
+
+    vm.$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+
+    resetStore(vm.$store);
+  });
+
+  it('renders button to discard & stage', () => {
+    expect(vm.$el.querySelectorAll('.btn').length).toBe(2);
+  });
+
+  it('calls store with stage button', () => {
+    vm.$el.querySelectorAll('.btn')[0].click();
+
+    expect(vm.stageChange).toHaveBeenCalledWith(f.path);
+  });
+
+  it('calls store with discard button', () => {
+    vm.$el.querySelectorAll('.btn')[1].click();
+
+    expect(vm.discardFileChanges).toHaveBeenCalledWith(f.path);
+  });
+});

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

+import Vue from 'vue';
+import store from '~/ide/stores';
+import unstageButton from '~/ide/components/commit_sidebar/unstage_button.vue';
+import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
+import { file, resetStore } from '../../helpers';
+
+describe('IDE unstage file button', () => {
+  let vm;
+  let f;
+
+  beforeEach(() => {
+    const Component = Vue.extend(unstageButton);
+    f = file();
+
+    vm = createComponentWithStore(Component, store, {
+      path: f.path,
+    });
+
+    spyOn(vm, 'unstageChange');
+
+    vm.$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+
+    resetStore(vm.$store);
+  });
+
+  it('renders button to unstage', () => {
+    expect(vm.$el.querySelectorAll('.btn').length).toBe(1);
+  });
+
+  it('calls store with unnstage button', () => {
+    vm.$el.querySelector('.btn').click();
+
+    expect(vm.unstageChange).toHaveBeenCalledWith(f.path);
+  });
+});

spec/javascripts/ide/components/repo_commit_section_spec.js

@@ -28,16 +28,34 @@ describe('RepoCommitSection', () => {
       },
     };
 
+    const files = [file('file1'), file('file2')].map(f =>
+      Object.assign(f, {
+        type: 'blob',
+      }),
+    );
+
     vm.$store.state.rightPanelCollapsed = false;
     vm.$store.state.currentBranch = 'master';
-    vm.$store.state.changedFiles = [file('file1'), file('file2')];
+    vm.$store.state.changedFiles = [...files];
     vm.$store.state.changedFiles.forEach(f =>
+      Object.assign(f, {
+        changed: true,
+        content: 'changedFile testing',
+      }),
+    );
+
+    vm.$store.state.stagedFiles = [{ ...files[0] }, { ...files[1] }];
+    vm.$store.state.stagedFiles.forEach(f =>
       Object.assign(f, {
         changed: true,
         content: 'testing',
       }),
     );
 
+    vm.$store.state.changedFiles.forEach(f => {
+      vm.$store.state.entries[f.path] = f;
+    });
+
     return vm.$mount();
   }
 
@@ -94,20 +112,93 @@ describe('RepoCommitSection', () => {
       ...vm.$el.querySelectorAll('.multi-file-commit-list li'),
     ];
     const submitCommit = vm.$el.querySelector('form .btn');
+    const allFiles = vm.$store.state.changedFiles.concat(
+      vm.$store.state.stagedFiles,
+    );
 
     expect(vm.$el.querySelector('.multi-file-commit-form')).not.toBeNull();
-    expect(changedFileElements.length).toEqual(2);
+    expect(changedFileElements.length).toEqual(4);
 
     changedFileElements.forEach((changedFile, i) => {
-      expect(changedFile.textContent.trim()).toContain(
-        vm.$store.state.changedFiles[i].path,
-      );
+      expect(changedFile.textContent.trim()).toContain(allFiles[i].path);
     });
 
     expect(submitCommit.disabled).toBeTruthy();
     expect(submitCommit.querySelector('.fa-spinner.fa-spin')).toBeNull();
   });
 
+  it('adds changed files into staged files', done => {
+    vm.$el.querySelector('.ide-staged-action-btn').click();
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelector('.ide-commit-list-container').textContent,
+      ).toContain('No changes');
+
+      done();
+    });
+  });
+
+  it('stages a single file', done => {
+    vm.$el.querySelector('.multi-file-discard-btn .btn').click();
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el
+          .querySelector('.ide-commit-list-container')
+          .querySelectorAll('li').length,
+      ).toBe(1);
+
+      done();
+    });
+  });
+
+  it('discards a single file', done => {
+    vm.$el.querySelectorAll('.multi-file-discard-btn .btn')[1].click();
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelector('.ide-commit-list-container').textContent,
+      ).not.toContain('file1');
+      expect(
+        vm.$el
+          .querySelector('.ide-commit-list-container')
+          .querySelectorAll('li').length,
+      ).toBe(1);
+
+      done();
+    });
+  });
+
+  it('removes all staged files', done => {
+    vm.$el.querySelectorAll('.ide-staged-action-btn')[1].click();
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelectorAll('.ide-commit-list-container')[1].textContent,
+      ).toContain('No changes');
+
+      done();
+    });
+  });
+
+  it('unstages a single file', done => {
+    vm.$el
+      .querySelectorAll('.multi-file-discard-btn')[2]
+      .querySelector('.btn')
+      .click();
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el
+          .querySelectorAll('.ide-commit-list-container')[1]
+          .querySelectorAll('li').length,
+      ).toBe(1);
+
+      done();
+    });
+  });
+
   it('updates commitMessage in store on input', done => {
     const textarea = vm.$el.querySelector('textarea');
 

spec/javascripts/ide/components/repo_editor_spec.js

@@ -200,7 +200,7 @@ describe('RepoEditor', () => {
 
       vm.setupEditor();
 
-      expect(vm.editor.createModel).toHaveBeenCalledWith(vm.file);
+      expect(vm.editor.createModel).toHaveBeenCalledWith(vm.file, null);
       expect(vm.model).not.toBeNull();
     });
 
@@ -234,6 +234,20 @@ describe('RepoEditor', () => {
         done();
       });
     });
+
+    it('sets head model as staged file', () => {
+      spyOn(vm.editor, 'createModel').and.callThrough();
+
+      Editor.editorInstance.modelManager.dispose();
+
+      vm.$store.state.stagedFiles.push({ ...vm.file, key: 'staged' });
+      vm.file.staged = true;
+      vm.file.key = `unstaged-${vm.file.key}`;
+
+      vm.setupEditor();
+
+      expect(vm.editor.createModel).toHaveBeenCalledWith(vm.file, vm.$store.state.stagedFiles[0]);
+    });
   });
 
   describe('editor updateDimensions', () => {

spec/javascripts/ide/lib/common/model_spec.js

@@ -30,6 +30,19 @@ describe('Multi-file editor library model', () => {
     expect(model.baseModel).not.toBeNull();
   });
 
+  it('creates model with head file to compare against', () => {
+    const f = file('path');
+    model.dispose();
+
+    model = new Model(monaco, f, {
+      ...f,
+      content: '123 testing',
+    });
+
+    expect(model.head).not.toBeNull();
+    expect(model.getOriginalModel().getValue()).toBe('123 testing');
+  });
+
   it('adds eventHub listener', () => {
     expect(eventHub.$on).toHaveBeenCalledWith(
       `editor.update.model.dispose.${model.file.key}`,

spec/javascripts/ide/lib/editor_spec.js

@@ -88,7 +88,7 @@ describe('Multi-file editor library', () => {
 
       instance.createModel('FILE');
 
-      expect(instance.modelManager.addModel).toHaveBeenCalledWith('FILE');
+      expect(instance.modelManager.addModel).toHaveBeenCalledWith('FILE', null);
     });
   });
 

spec/javascripts/ide/stores/actions/file_spec.js

 import Vue from 'vue';
 import store from '~/ide/stores';
+import * as actions from '~/ide/stores/actions/file';
+import * as types from '~/ide/stores/mutation_types';
 import service from '~/ide/services';
 import router from '~/ide/ide_router';
 import eventHub from '~/ide/eventhub';
 import { file, resetStore } from '../../helpers';
+import testAction from '../../../helpers/vuex_action_helper';
 
 describe('IDE store file actions', () => {
   beforeEach(() => {
@@ -402,6 +405,7 @@ describe('IDE store file actions', () => {
 
     beforeEach(() => {
       spyOn(eventHub, '$on');
+      spyOn(eventHub, '$emit');
 
       tmpFile = file();
       tmpFile.content = 'testing';
@@ -460,6 +464,57 @@ describe('IDE store file actions', () => {
         })
         .catch(done.fail);
     });
+
+    it('pushes route for active file', done => {
+      tmpFile.active = true;
+      store.state.openFiles.push(tmpFile);
+
+      store
+        .dispatch('discardFileChanges', tmpFile.path)
+        .then(() => {
+          expect(router.push).toHaveBeenCalledWith(`/project${tmpFile.url}`);
+
+          done();
+        })
+        .catch(done.fail);
+    });
+
+    it('emits eventHub event to dispose cached model', done => {
+      store
+        .dispatch('discardFileChanges', tmpFile.path)
+        .then(() => {
+          expect(eventHub.$emit).toHaveBeenCalled();
+
+          done();
+        })
+        .catch(done.fail);
+    });
+  });
+
+  describe('stageChange', () => {
+    it('calls STAGE_CHANGE with file path', done => {
+      testAction(
+        actions.stageChange,
+        'path',
+        store.state,
+        [{ type: types.STAGE_CHANGE, payload: 'path' }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('unstageChange', () => {
+    it('calls UNSTAGE_CHANGE with file path', done => {
+      testAction(
+        actions.unstageChange,
+        'path',
+        store.state,
+        [{ type: types.UNSTAGE_CHANGE, payload: 'path' }],
+        [],
+        done,
+      );
+    });
   });
 
   describe('openPendingTab', () => {
@@ -476,7 +531,7 @@ describe('IDE store file actions', () => {
 
     it('makes file pending in openFiles', done => {
       store
-        .dispatch('openPendingTab', f)
+        .dispatch('openPendingTab', { file: f, keyPrefix: 'pending' })
         .then(() => {
           expect(store.state.openFiles[0].pending).toBe(true);
         })
@@ -486,7 +541,7 @@ describe('IDE store file actions', () => {
 
     it('returns true when opened', done => {
       store
-        .dispatch('openPendingTab', f)
+        .dispatch('openPendingTab', { file: f, keyPrefix: 'pending' })
         .then(added => {
           expect(added).toBe(true);
         })
@@ -498,7 +553,7 @@ describe('IDE store file actions', () => {
       store.state.currentBranchId = 'master';
 
       store
-        .dispatch('openPendingTab', f)
+        .dispatch('openPendingTab', { file: f, keyPrefix: 'pending' })
         .then(() => {
           expect(router.push).toHaveBeenCalledWith('/project/123/tree/master/');
         })
@@ -512,7 +567,7 @@ describe('IDE store file actions', () => {
       store._actions.scrollToTab = [scrollToTabSpy]; // eslint-disable-line
 
       store
-        .dispatch('openPendingTab', f)
+        .dispatch('openPendingTab', { file: f, keyPrefix: 'pending' })
         .then(() => {
           expect(scrollToTabSpy).toHaveBeenCalled();
           store._actions.scrollToTab = oldScrollToTab; // eslint-disable-line
@@ -527,7 +582,7 @@ describe('IDE store file actions', () => {
       store.state.viewer = 'diff';
 
       store
-        .dispatch('openPendingTab', f)
+        .dispatch('openPendingTab', { file: f, keyPrefix: 'pending' })
         .then(added => {
           expect(added).toBe(false);
         })

spec/javascripts/ide/stores/actions_spec.js

 import * as urlUtils from '~/lib/utils/url_utility';
 import store from '~/ide/stores';
+import * as actions from '~/ide/stores/actions';
+import * as types from '~/ide/stores/mutation_types';
 import router from '~/ide/ide_router';
 import { resetStore, file } from '../helpers';
+import testAction from '../../helpers/vuex_action_helper';
 
 describe('Multi-file store actions', () => {
   beforeEach(() => {
@@ -191,9 +194,7 @@ describe('Multi-file store actions', () => {
           })
           .then(f => {
             expect(f.tempFile).toBeTruthy();
-            expect(store.state.trees['abcproject/mybranch'].tree.length).toBe(
-              1,
-            );
+            expect(store.state.trees['abcproject/mybranch'].tree.length).toBe(1);
 
             done();
           })
@@ -292,6 +293,42 @@ describe('Multi-file store actions', () => {
     });
   });
 
+  describe('stageAllChanges', () => {
+    it('adds all files from changedFiles to stagedFiles', done => {
+      store.state.changedFiles.push(file(), file('new'));
+
+      testAction(
+        actions.stageAllChanges,
+        null,
+        store.state,
+        [
+          { type: types.STAGE_CHANGE, payload: store.state.changedFiles[0].path },
+          { type: types.STAGE_CHANGE, payload: store.state.changedFiles[1].path },
+        ],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('unstageAllChanges', () => {
+    it('removes all files from stagedFiles after unstaging', done => {
+      store.state.stagedFiles.push(file(), file('new'));
+
+      testAction(
+        actions.unstageAllChanges,
+        null,
+        store.state,
+        [
+          { type: types.UNSTAGE_CHANGE, payload: store.state.stagedFiles[0].path },
+          { type: types.UNSTAGE_CHANGE, payload: store.state.stagedFiles[1].path },
+        ],
+        [],
+        done,
+      );
+    });
+  });
+
   describe('updateViewer', () => {
     it('updates viewer state', done => {
       store

spec/javascripts/ide/stores/getters_spec.js

@@ -37,19 +37,11 @@ describe('IDE store getters', () => {
       expect(modifiedFiles.length).toBe(1);
       expect(modifiedFiles[0].name).toBe('changed');
     });
-  });
 
-  describe('addedFiles', () => {
-    it('returns a list of added files', () => {
-      localState.openFiles.push(file());
-      localState.changedFiles.push(file('added'));
-      localState.changedFiles[0].changed = true;
-      localState.changedFiles[0].tempFile = true;
+    it('returns angle left when collapsed', () => {
+      localState.rightPanelCollapsed = true;
 
-      const modifiedFiles = getters.addedFiles(localState);
-
-      expect(modifiedFiles.length).toBe(1);
-      expect(modifiedFiles[0].name).toBe('added');
+      expect(getters.collapseButtonIcon(localState)).toBe('angle-double-left');
     });
   });
 

spec/javascripts/ide/stores/modules/commit/actions_spec.js

@@ -209,14 +209,14 @@ describe('IDE commit module actions', () => {
           },
         },
       };
-      store.state.changedFiles.push(f, {
+      store.state.stagedFiles.push(f, {
         ...file('changedFile2'),
         changed: true,
       });
-      store.state.openFiles = store.state.changedFiles;
+      store.state.openFiles = store.state.stagedFiles;
 
-      store.state.changedFiles.forEach(changedFile => {
-        store.state.entries[changedFile.path] = changedFile;
+      store.state.stagedFiles.forEach(stagedFile => {
+        store.state.entries[stagedFile.path] = stagedFile;
       });
     });
 
@@ -248,19 +248,6 @@ describe('IDE commit module actions', () => {
         .catch(done.fail);
     });
 
-    it('removes all changed files', done => {
-      store
-        .dispatch('commit/updateFilesAfterCommit', {
-          data,
-          branch,
-        })
-        .then(() => {
-          expect(store.state.changedFiles.length).toBe(0);
-        })
-        .then(done)
-        .catch(done.fail);
-    });
-
     it('sets files commit data', done => {
       store
         .dispatch('commit/updateFilesAfterCommit', {
@@ -294,10 +281,10 @@ describe('IDE commit module actions', () => {
           branch,
         })
         .then(() => {
-          expect(eventHub.$emit).toHaveBeenCalledWith(
-            `editor.update.model.content.${f.path}`,
-            f.content,
-          );
+          expect(eventHub.$emit).toHaveBeenCalledWith(`editor.update.model.content.${f.key}`, {
+            content: f.content,
+            changed: false,
+          });
         })
         .then(done)
         .catch(done.fail);
@@ -335,12 +322,22 @@ describe('IDE commit module actions', () => {
           },
         },
       };
-      store.state.changedFiles.push(file('changed'));
-      store.state.changedFiles[0].active = true;
+
+      const f = {
+        ...file('changed'),
+        type: 'blob',
+        active: true,
+      };
+      store.state.stagedFiles.push(f);
+      store.state.changedFiles = [
+        {
+          ...f,
+        },
+      ];
       store.state.openFiles = store.state.changedFiles;
 
-      store.state.openFiles.forEach(f => {
-        store.state.entries[f.path] = f;
+      store.state.openFiles.forEach(localF => {
+        store.state.entries[localF.path] = localF;
       });
 
       store.state.commit.commitAction = '2';
@@ -420,11 +417,13 @@ describe('IDE commit module actions', () => {
           .catch(done.fail);
       });
 
-      it('adds commit data to changed files', done => {
+      it('adds commit data to files', done => {
         store
           .dispatch('commit/commitChanges')
           .then(() => {
-            expect(store.state.openFiles[0].lastCommit.message).toBe('test message');
+            expect(store.state.entries[store.state.openFiles[0].path].lastCommit.message).toBe(
+              'test message',
+            );
 
             done();
           })
@@ -443,6 +442,16 @@ describe('IDE commit module actions', () => {
           .catch(done.fail);
       });
 
+      it('removes all staged files', done => {
+        store
+          .dispatch('commit/commitChanges')
+          .then(() => {
+            expect(store.state.stagedFiles.length).toBe(0);
+          })
+          .then(done)
+          .catch(done.fail);
+      });
+
       describe('merge request', () => {
         it('redirects to new merge request page', done => {
           spyOn(eventHub, '$on');
@@ -471,7 +480,7 @@ describe('IDE commit module actions', () => {
           store
             .dispatch('commit/commitChanges')
             .then(() => {
-              expect(store.state.changedFiles.length).toBe(0);
+              expect(store.state.stagedFiles.length).toBe(0);
 
               done();
             })

spec/javascripts/ide/stores/modules/commit/getters_spec.js

@@ -34,17 +34,17 @@ describe('IDE commit module getters', () => {
       discardDraftButtonDisabled: false,
     };
     const rootState = {
-      changedFiles: ['a'],
+      stagedFiles: ['a'],
     };
 
-    it('returns false when discardDraftButtonDisabled is false & changedFiles is not empty', () => {
+    it('returns false when discardDraftButtonDisabled is false & stagedFiles is not empty', () => {
       expect(
         getters.commitButtonDisabled(state, localGetters, rootState),
       ).toBeFalsy();
     });
 
-    it('returns true when discardDraftButtonDisabled is false & changedFiles is empty', () => {
-      rootState.changedFiles.length = 0;
+    it('returns true when discardDraftButtonDisabled is false & stagedFiles is empty', () => {
+      rootState.stagedFiles.length = 0;
 
       expect(
         getters.commitButtonDisabled(state, localGetters, rootState),
@@ -61,7 +61,7 @@ describe('IDE commit module getters', () => {
 
     it('returns true when discardDraftButtonDisabled is false & changedFiles is not empty', () => {
       localGetters.discardDraftButtonDisabled = false;
-      rootState.changedFiles.length = 0;
+      rootState.stagedFiles.length = 0;
 
       expect(
         getters.commitButtonDisabled(state, localGetters, rootState),

spec/javascripts/ide/stores/mutations/file_spec.js

@@ -8,7 +8,10 @@ describe('IDE store file mutations', () => {
 
   beforeEach(() => {
     localState = state();
-    localFile = file();
+    localFile = {
+      ...file(),
+      type: 'blob',
+    };
 
     localState.entries[localFile.path] = localFile;
   });
@@ -183,6 +186,49 @@ describe('IDE store file mutations', () => {
     });
   });
 
+  describe('STAGE_CHANGE', () => {
+    it('adds file into stagedFiles array', () => {
+      mutations.STAGE_CHANGE(localState, localFile.path);
+
+      expect(localState.stagedFiles.length).toBe(1);
+      expect(localState.stagedFiles[0]).toEqual(localFile);
+    });
+
+    it('updates stagedFile if it is already staged', () => {
+      mutations.STAGE_CHANGE(localState, localFile.path);
+
+      localFile.raw = 'testing 123';
+
+      mutations.STAGE_CHANGE(localState, localFile.path);
+
+      expect(localState.stagedFiles.length).toBe(1);
+      expect(localState.stagedFiles[0].raw).toEqual('testing 123');
+    });
+  });
+
+  describe('UNSTAGE_CHANGE', () => {
+    let f;
+
+    beforeEach(() => {
+      f = {
+        ...file(),
+        type: 'blob',
+        staged: true,
+      };
+
+      localState.stagedFiles.push(f);
+      localState.changedFiles.push(f);
+      localState.entries[f.path] = f;
+    });
+
+    it('removes from stagedFiles array', () => {
+      mutations.UNSTAGE_CHANGE(localState, f.path);
+
+      expect(localState.stagedFiles.length).toBe(0);
+      expect(localState.changedFiles.length).toBe(1);
+    });
+  });
+
   describe('TOGGLE_FILE_CHANGED', () => {
     it('updates file changed status', () => {
       mutations.TOGGLE_FILE_CHANGED(localState, {

spec/javascripts/ide/stores/mutations_spec.js

@@ -69,6 +69,16 @@ describe('Multi-file store mutations', () => {
     });
   });
 
+  describe('CLEAR_STAGED_CHANGES', () => {
+    it('clears stagedFiles array', () => {
+      localState.stagedFiles.push('a');
+
+      mutations.CLEAR_STAGED_CHANGES(localState);
+
+      expect(localState.stagedFiles.length).toBe(0);
+    });
+  });
+
   describe('UPDATE_VIEWER', () => {
     it('sets viewer state', () => {
       mutations.UPDATE_VIEWER(localState, 'diff');