Added staged files state to IDE

Closes https://gitlab.com/gitlab-org/gitlab-ee/issues/4541

1 files changed, 84 insertions, 10 deletions

diff --git a/app/assets/javascripts/ide/components/commit_sidebar/list.vue b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
index 453208f3f19..e3280bbb204 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/list.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/list.vue
@@ -1,5 +1,5 @@
 <script>
-  import { mapState } from 'vuex';
+  import { mapActions, mapState, mapGetters } from 'vuex';
   import icon from '~/vue_shared/components/icon.vue';
   import listItem from './list_item.vue';
   import listCollapsed from './list_collapsed.vue';
@@ -19,20 +19,44 @@
         type: Array,
         required: true,
       },
+      showToggle: {
+        type: Boolean,
+        required: false,
+        default: true,
+      },
+      icon: {
+        type: String,
+        required: true,
+      },
+      action: {
+        type: String,
+        required: true,
+      },
+      actionBtnText: {
+        type: String,
+        required: true,
+      },
+      itemActionComponent: {
+        type: String,
+        required: true,
+      },
     },
     computed: {
       ...mapState([
-        'currentProjectId',
-        'currentBranchId',
         'rightPanelCollapsed',
       ]),
-      isCommitInfoShown() {
-        return this.rightPanelCollapsed || this.fileList.length;
-      },
+      ...mapGetters([
+        'collapseButtonIcon',
+      ]),
     },
     methods: {
-      toggleCollapsed() {
-        this.$emit('toggleCollapsed');
+      ...mapActions([
+        'toggleRightPanelCollapsed',
+        'stageAllChanges',
+        'unstageAllChanges',
+      ]),
+      actionBtnClicked() {
+        this[this.action]();
       },
     },
   };
@@ -40,17 +64,60 @@
 
 <template>
   <div
+    class="ide-commit-list-container"
     :class="{
-      'multi-file-commit-list': isCommitInfoShown
+      'is-collapsed': rightPanelCollapsed,
     }"
   >
+    <header
+      class="multi-file-commit-panel-header"
+      :class="{
+        'is-collapsed': rightPanelCollapsed,
+      }"
+    >
+      <div
+        v-if="!rightPanelCollapsed"
+        class="multi-file-commit-panel-header-title"
+        :class="{
+          'append-right-10': showToggle,
+        }"
+      >
+        <icon
+          v-once
+          :name="icon"
+          :size="18"
+        />
+        {{ title }}
+        <button
+          type="button"
+          class="btn btn-blank btn-link ide-staged-action-btn"
+          @click="actionBtnClicked"
+        >
+          {{ actionBtnText }}
+        </button>
+      </div>
+      <button
+        v-if="showToggle"
+        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="icon"
     />
     <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 +125,16 @@
         >
           <list-item
             :file="file"
+            :action-component="itemActionComponent"
           />
         </li>
       </ul>
+      <p
+        v-else
+        class="multi-file-commit-list help-block"
+      >
+        {{ __('No changes') }}
+      </p>
     </template>
   </div>
 </template>