Merge branch 'multi-file-editor-css-fixes' into 'master'

Added IDE commit panel

Closes #40041

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

26 files changed, 710 insertions, 384 deletions

diff --git a/app/assets/javascripts/repo/components/commit_sidebar/list.vue b/app/assets/javascripts/repo/components/commit_sidebar/list.vue
new file mode 100644
index 00000000000..fb862e7bf01
--- /dev/null
+++ b/app/assets/javascripts/repo/components/commit_sidebar/list.vue
@@ -0,0 +1,89 @@
+<script>
+  import icon from '../../../vue_shared/components/icon.vue';
+  import listItem from './list_item.vue';
+  import listCollapsed from './list_collapsed.vue';
+
+  export default {
+    components: {
+      icon,
+      listItem,
+      listCollapsed,
+    },
+    props: {
+      title: {
+        type: String,
+        required: true,
+      },
+      fileList: {
+        type: Array,
+        required: true,
+      },
+      collapsed: {
+        type: Boolean,
+        required: true,
+      },
+    },
+    methods: {
+      toggleCollapsed() {
+        this.$emit('toggleCollapsed');
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="multi-file-commit-panel-section">
+    <header
+      class="multi-file-commit-panel-header"
+      :class="{
+        'is-collapsed': collapsed,
+      }"
+    >
+      <icon
+        name="list-bulleted"
+        :size="18"
+        css-classes="append-right-default"
+      />
+      <template v-if="!collapsed">
+        {{ title }}
+        <button
+          type="button"
+          class="btn btn-transparent multi-file-commit-panel-collapse-btn"
+          @click="toggleCollapsed"
+        >
+          <i
+            aria-hidden="true"
+            class="fa fa-angle-double-right"
+          >
+          </i>
+        </button>
+      </template>
+    </header>
+    <div class="multi-file-commit-list">
+      <list-collapsed
+        v-if="collapsed"
+      />
+      <template v-else>
+        <ul
+          v-if="fileList.length"
+          class="list-unstyled append-bottom-0"
+        >
+          <li
+            v-for="file in fileList"
+            :key="file.key"
+          >
+            <list-item
+              :file="file"
+            />
+          </li>
+        </ul>
+        <div
+          v-else
+          class="help-block prepend-top-0"
+        >
+          No changes
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/repo/components/commit_sidebar/list_collapsed.vue b/app/assets/javascripts/repo/components/commit_sidebar/list_collapsed.vue
new file mode 100644
index 00000000000..6a0262f271b
--- /dev/null
+++ b/app/assets/javascripts/repo/components/commit_sidebar/list_collapsed.vue
@@ -0,0 +1,35 @@
+<script>
+  import { mapGetters } from 'vuex';
+  import icon from '../../../vue_shared/components/icon.vue';
+
+  export default {
+    components: {
+      icon,
+    },
+    computed: {
+      ...mapGetters([
+        'addedFiles',
+        'modifiedFiles',
+      ]),
+    },
+  };
+</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>
+</template>
diff --git a/app/assets/javascripts/repo/components/commit_sidebar/list_item.vue b/app/assets/javascripts/repo/components/commit_sidebar/list_item.vue
new file mode 100644
index 00000000000..742f746e02f
--- /dev/null
+++ b/app/assets/javascripts/repo/components/commit_sidebar/list_item.vue
@@ -0,0 +1,36 @@
+<script>
+  import icon from '../../../vue_shared/components/icon.vue';
+
+  export default {
+    components: {
+      icon,
+    },
+    props: {
+      file: {
+        type: Object,
+        required: true,
+      },
+    },
+    computed: {
+      iconName() {
+        return this.file.tempFile ? 'file-addition' : 'file-modified';
+      },
+      iconClass() {
+        return `multi-file-${this.file.tempFile ? 'addition' : 'modified'} append-right-8`;
+      },
+    },
+  };
+</script>
+
+<template>
+  <div class="multi-file-commit-list-item">
+    <icon
+      :name="iconName"
+      :size="16"
+      :css-classes="iconClass"
+    />
+    <span class="multi-file-commit-list-path">
+      {{ file.path }}
+    </span>
+  </div>
+</template>
diff --git a/app/assets/javascripts/repo/components/repo.vue b/app/assets/javascripts/repo/components/repo.vue
index 98117802016..a00e1e9d809 100644
--- a/app/assets/javascripts/repo/components/repo.vue
+++ b/app/assets/javascripts/repo/components/repo.vue
@@ -40,20 +40,24 @@ export default {
 </script>
 
 <template>
-  <div class="repository-view">
-    <div class="tree-content-holder" :class="{'tree-content-holder-mini' : isCollapsed}">
-      <repo-sidebar/>
-      <div
-        v-if="isCollapsed"
-        class="panel-right"
-      >
-        <repo-tabs/>
-        <component
-          :is="currentBlobView"
-        />
-        <repo-file-buttons/>
-      </div>
+  <div
+    class="multi-file"
+    :class="{
+      'is-collapsed': isCollapsed
+    }"
+  >
+    <repo-sidebar/>
+    <div
+      v-if="isCollapsed"
+      class="multi-file-edit-pane"
+    >
+      <repo-tabs />
+      <component
+        class="multi-file-edit-pane-content"
+        :is="currentBlobView"
+      />
+      <repo-file-buttons />
     </div>
-    <repo-commit-section v-if="changedFiles.length" />
+    <repo-commit-section />
   </div>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_commit_section.vue b/app/assets/javascripts/repo/components/repo_commit_section.vue
index 377e3d65348..d3344d0c8dc 100644
--- a/app/assets/javascripts/repo/components/repo_commit_section.vue
+++ b/app/assets/javascripts/repo/components/repo_commit_section.vue
@@ -1,11 +1,18 @@
 <script>
 import { mapGetters, mapState, mapActions } from 'vuex';
+import tooltip from '../../vue_shared/directives/tooltip';
+import icon from '../../vue_shared/components/icon.vue';
 import PopupDialog from '../../vue_shared/components/popup_dialog.vue';
-import { n__ } from '../../locale';
+import commitFilesList from './commit_sidebar/list.vue';
 
 export default {
   components: {
     PopupDialog,
+    icon,
+    commitFilesList,
+  },
+  directives: {
+    tooltip,
   },
   data() {
     return {
@@ -13,6 +20,7 @@ export default {
       submitCommitsLoading: false,
       startNewMR: false,
       commitMessage: '',
+      collapsed: true,
     };
   },
   computed: {
@@ -23,10 +31,10 @@ export default {
       'changedFiles',
     ]),
     commitButtonDisabled() {
-      return !this.commitMessage || this.submitCommitsLoading;
+      return this.commitMessage === '' || this.submitCommitsLoading || !this.changedFiles.length;
     },
-    commitButtonText() {
-      return n__('Commit %d file', 'Commit %d files', this.changedFiles.length);
+    commitMessageCount() {
+      return this.commitMessage.length;
     },
   },
   methods: {
@@ -77,12 +85,20 @@ export default {
           this.submitCommitsLoading = false;
         });
     },
+    toggleCollapsed() {
+      this.collapsed = !this.collapsed;
+    },
   },
 };
 </script>
 
 <template>
-<div id="commit-area">
+<div
+  class="multi-file-commit-panel"
+  :class="{
+    'is-collapsed': collapsed,
+  }"
+>
   <popup-dialog
     v-if="showNewBranchDialog"
     :primary-button-label="__('Create new branch')"
@@ -92,78 +108,71 @@ export default {
     @toggle="showNewBranchDialog = false"
     @submit="makeCommit(true)"
   />
+  <button
+    v-if="collapsed"
+    type="button"
+    class="btn btn-transparent multi-file-commit-panel-collapse-btn is-collapsed prepend-top-10 append-bottom-10"
+    @click="toggleCollapsed"
+  >
+    <i
+      aria-hidden="true"
+      class="fa fa-angle-double-left"
+    >
+    </i>
+  </button>
+  <commit-files-list
+    title="Staged"
+    :file-list="changedFiles"
+    :collapsed="collapsed"
+    @toggleCollapsed="toggleCollapsed"
+  />
   <form
-    class="form-horizontal"
-    @submit.prevent="tryCommit()">
-    <fieldset>
-      <div class="form-group">
-        <label class="col-md-4 control-label staged-files">
-          Staged files ({{changedFiles.length}})
-        </label>
-        <div class="col-md-6">
-          <ul class="list-unstyled changed-files">
-            <li
-              v-for="(file, index) in changedFiles"
-              :key="index">
-              <span class="help-block">
-                {{ file.path }}
-              </span>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="form-group">
-        <label
-          class="col-md-4 control-label"
-          for="commit-message">
-          Commit message
-        </label>
-        <div class="col-md-6">
-          <textarea
-            id="commit-message"
-            class="form-control"
-            name="commit-message"
-            v-model="commitMessage">
-          </textarea>
-        </div>
-      </div>
-      <div class="form-group target-branch">
-        <label
-          class="col-md-4 control-label"
-          for="target-branch">
-          Target branch
-        </label>
-        <div class="col-md-6">
-          <span class="help-block">
-            {{currentBranch}}
-          </span>
-        </div>
-      </div>
-      <div class="col-md-offset-4 col-md-6">
-        <button
-          type="submit"
-          :disabled="commitButtonDisabled"
-          class="btn btn-success">
-          <i
-            v-if="submitCommitsLoading"
-            class="js-commit-loading-icon fa fa-spinner fa-spin"
-            aria-hidden="true"
-            aria-label="loading">
-          </i>
-          <span class="commit-summary">
-            {{ commitButtonText }}
-          </span>
-        </button>
-      </div>
-      <div class="col-md-offset-4 col-md-6">
-        <div class="checkbox">
-          <label>
-            <input type="checkbox" v-model="startNewMR">
-            <span>Start a <strong>new merge request</strong> with these changes</span>
-          </label>
-        </div>
+    class="form-horizontal multi-file-commit-form"
+    @submit.prevent="tryCommit"
+    v-if="!collapsed"
+  >
+    <div class="multi-file-commit-fieldset">
+      <textarea
+        class="form-control multi-file-commit-message"
+        name="commit-message"
+        v-model="commitMessage"
+        placeholder="Commit message"
+      >
+      </textarea>
+    </div>
+    <div class="multi-file-commit-fieldset">
+      <label
+        v-tooltip
+        title="Create a new merge request with these changes"
+        data-container="body"
+        data-placement="top"
+      >
+        <input
+          type="checkbox"
+          v-model="startNewMR"
+        />
+        Merge Request
+      </label>
+      <button
+        type="submit"
+        :disabled="commitButtonDisabled"
+        class="btn btn-default btn-sm append-right-10 prepend-left-10"
+      >
+        <i
+          v-if="submitCommitsLoading"
+          class="js-commit-loading-icon fa fa-spinner fa-spin"
+          aria-hidden="true"
+          aria-label="loading"
+        >
+        </i>
+        Commit
+      </button>
+      <div
+        class="multi-file-commit-message-count"
+      >
+        {{ commitMessageCount }}
       </div>
-    </fieldset>
+    </div>
   </form>
 </div>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_file.vue b/app/assets/javascripts/repo/components/repo_file.vue
index 5be47d568e7..75787ad6103 100644
--- a/app/assets/javascripts/repo/components/repo_file.vue
+++ b/app/assets/javascripts/repo/components/repo_file.vue
@@ -55,7 +55,7 @@
     class="file"
     @click.prevent="clickedTreeRow(file)">
     <td
-      class="multi-file-table-col-name"
+      class="multi-file-table-name"
       :colspan="submoduleColSpan"
     >
       <i
@@ -85,12 +85,11 @@
     </td>
 
     <template v-if="!isCollapsed && !isSubmodule">
-      <td class="hidden-sm hidden-xs">
+      <td class="multi-file-table-col-commit-message hidden-sm hidden-xs">
         <a
           v-if="file.lastCommit.message"
           @click.stop
           :href="file.lastCommit.url"
-          class="commit-message"
         >
           {{ file.lastCommit.message }}
         </a>
diff --git a/app/assets/javascripts/repo/components/repo_file_buttons.vue b/app/assets/javascripts/repo/components/repo_file_buttons.vue
index dd948ee84fb..34f0d51819a 100644
--- a/app/assets/javascripts/repo/components/repo_file_buttons.vue
+++ b/app/assets/javascripts/repo/components/repo_file_buttons.vue
@@ -22,12 +22,12 @@ export default {
 <template>
   <div
     v-if="showButtons"
-    class="repo-file-buttons"
+    class="multi-file-editor-btn-group"
   >
     <a
       :href="activeFile.rawPath"
       target="_blank"
-      class="btn btn-default raw"
+      class="btn btn-default btn-sm raw"
       rel="noopener noreferrer">
       {{ rawDownloadButtonLabel }}
     </a>
@@ -38,17 +38,17 @@ export default {
       aria-label="File actions">
       <a
         :href="activeFile.blamePath"
-        class="btn btn-default blame">
+        class="btn btn-default btn-sm blame">
         Blame
       </a>
       <a
         :href="activeFile.commitsPath"
-        class="btn btn-default history">
+        class="btn btn-default btn-sm history">
         History
       </a>
       <a
         :href="activeFile.permalink"
-        class="btn btn-default permalink">
+        class="btn btn-default btn-sm permalink">
         Permalink
       </a>
     </div>
diff --git a/app/assets/javascripts/repo/components/repo_preview.vue b/app/assets/javascripts/repo/components/repo_preview.vue
index d1883299bd9..6ce9267f598 100644
--- a/app/assets/javascripts/repo/components/repo_preview.vue
+++ b/app/assets/javascripts/repo/components/repo_preview.vue
@@ -32,10 +32,12 @@ export default {
 </script>
 
 <template>
-<div class="blob-viewer-container">
+<div>
   <div
     v-if="!activeFile.renderError"
-    v-html="activeFile.html">
+    v-html="activeFile.html"
+    class="multi-file-preview-holder"
+  >
   </div>
   <div
     v-else-if="activeFile.tempFile"
diff --git a/app/assets/javascripts/repo/components/repo_sidebar.vue b/app/assets/javascripts/repo/components/repo_sidebar.vue
index 9365b09326f..4ea21913129 100644
--- a/app/assets/javascripts/repo/components/repo_sidebar.vue
+++ b/app/assets/javascripts/repo/components/repo_sidebar.vue
@@ -44,20 +44,16 @@ export default {
 </script>
 
 <template>
-<div id="sidebar" :class="{'sidebar-mini' : isCollapsed}">
+<div class="ide-file-list">
   <table class="table">
     <thead>
       <tr>
         <th
           v-if="isCollapsed"
-          class="repo-file-options title"
         >
-          <strong class="clgray">
-            {{ projectName }}
-          </strong>
         </th>
         <template v-else>
-          <th class="name multi-file-table-col-name">
+          <th class="name multi-file-table-name">
             Name
           </th>
           <th class="hidden-sm hidden-xs last-commit">
@@ -79,7 +75,7 @@ export default {
         :key="n"
       />
       <repo-file
-        v-for="(file, index) in treeList"
+        v-for="file in treeList"
         :key="file.key"
         :file="file"
       />
diff --git a/app/assets/javascripts/repo/components/repo_tab.vue b/app/assets/javascripts/repo/components/repo_tab.vue
index da0714c368c..fb29a60df66 100644
--- a/app/assets/javascripts/repo/components/repo_tab.vue
+++ b/app/assets/javascripts/repo/components/repo_tab.vue
@@ -36,27 +36,32 @@ export default {
 
 <template>
   <li
-    :class="{ active : tab.active }"
     @click="setFileActive(tab)"
   >
     <button
       type="button"
-      class="close-btn"
+      class="multi-file-tab-close"
       @click.stop.prevent="closeFile({ file: tab })"
-      :aria-label="closeLabel">
+      :aria-label="closeLabel"
+      :class="{
+        'modified': tab.changed,
+      }"
+      :disabled="tab.changed"
+    >
       <i
         class="fa"
         :class="changedClass"
-        aria-hidden="true">
+        aria-hidden="true"
+      >
       </i>
     </button>
 
-    <a
-      href="#"
-      class="repo-tab"
+    <div
+      class="multi-file-tab"
+      :class="{active : tab.active }"
       :title="tab.url"
-      @click.prevent.stop="setFileActive(tab)">
-      {{tab.name}}
-    </a>
+    >
+      {{ tab.name }}
+    </div>
   </li>
 </template>
diff --git a/app/assets/javascripts/repo/components/repo_tabs.vue b/app/assets/javascripts/repo/components/repo_tabs.vue
index 59beae53e8d..ab0bef4f0ac 100644
--- a/app/assets/javascripts/repo/components/repo_tabs.vue
+++ b/app/assets/javascripts/repo/components/repo_tabs.vue
@@ -16,14 +16,12 @@
 
 <template>
   <ul
-    id="tabs"
-    class="list-unstyled"
+    class="multi-file-tabs list-unstyled append-bottom-0"
   >
     <repo-tab
       v-for="tab in openFiles"
       :key="tab.id"
       :tab="tab"
     />
-    <li class="tabs-divider" />
   </ul>
 </template>
diff --git a/app/assets/javascripts/repo/stores/getters.js b/app/assets/javascripts/repo/stores/getters.js
index 1ed05ac6e35..5ce9f449905 100644
--- a/app/assets/javascripts/repo/stores/getters.js
+++ b/app/assets/javascripts/repo/stores/getters.js
@@ -34,3 +34,7 @@ export const canEditFile = (state) => {
     openedFiles.length &&
     (currentActiveFile && !currentActiveFile.renderError && !currentActiveFile.binary);
 };
+
+export const addedFiles = state => changedFiles(state).filter(f => f.tempFile);
+
+export const modifiedFiles = state => changedFiles(state).filter(f => !f.tempFile);
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index d93c51d5448..6d274cb4ae0 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -35,270 +35,243 @@
   }
 }
 
-.repository-view {
-  border: 1px solid $border-color;
-  border-radius: $border-radius-default;
-  color: $almost-black;
+.multi-file {
+  display: flex;
+  height: calc(100vh - 145px);
+  border-top: 1px solid $white-dark;
+  border-bottom: 1px solid $white-dark;
+
+  &.is-collapsed {
+    .ide-file-list {
+      max-width: 250px;
+    }
+  }
+}
 
-  .code.white pre .hll {
-    background-color: $well-light-border !important;
+.ide-file-list {
+  flex: 1;
+  overflow: scroll;
+
+  .file {
+    cursor: pointer;
   }
 
-  .tree-content-holder {
-    display: -webkit-flex;
-    display: flex;
-    min-height: 300px;
+  a {
+    color: $gl-text-color;
   }
 
-  .tree-content-holder-mini {
-    height: 100vh;
+  th {
+    position: sticky;
+    top: 0;
   }
+}
 
-  .panel-right {
-    display: -webkit-flex;
-    display: flex;
-    -webkit-flex-direction: column;
-    flex-direction: column;
-    width: 80%;
-    height: 100%;
+.multi-file-table-name,
+.multi-file-table-col-commit-message {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 0;
+}
 
-    .monaco-editor.vs {
-      .current-line {
-        border: 0;
-        background: $well-light-border;
-      }
+.multi-file-table-name {
+  width: 350px;
+}
 
-      .line-numbers {
-        cursor: pointer;
+.multi-file-table-col-commit-message {
+  width: 50%;
+}
 
-        &:hover {
-          text-decoration: underline;
-        }
-      }
-    }
+.multi-file-edit-pane {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  border-left: 1px solid $white-dark;
+  overflow: hidden;
+}
 
-    .blob-no-preview {
-      .vertical-center {
-        justify-content: center;
-        width: 100%;
-      }
-    }
+.multi-file-tabs {
+  display: flex;
+  overflow: scroll;
+  background-color: $white-normal;
+  box-shadow: inset 0 -1px $white-dark;
 
-    &.blob-editor-container {
-      overflow: hidden;
-    }
+  > li {
+    position: relative;
+  }
+}
 
-    .blob-viewer-container {
-      -webkit-flex: 1;
-      flex: 1;
-      overflow: auto;
-
-      > div,
-      .file-content:not(.wiki) {
-        display: flex;
-      }
-
-      > div,
-      .file-content,
-      .blob-viewer,
-      .line-number,
-      .blob-content,
-      .code {
-        min-height: 100%;
-        width: 100%;
-      }
-
-      .line-numbers {
-        min-width: 44px;
-      }
-
-      .blob-content {
-        flex: 1;
-        overflow-x: auto;
-      }
-    }
+.multi-file-tab {
+  @include str-truncated(150px);
+  padding: ($gl-padding / 2) ($gl-padding + 12) ($gl-padding / 2) $gl-padding;
+  background-color: $gray-normal;
+  border-right: 1px solid $white-dark;
+  border-bottom: 1px solid $white-dark;
+  cursor: pointer;
+
+  &.active {
+    background-color: $white-light;
+    border-bottom-color: $white-light;
+  }
+}
 
-    #tabs {
-      position: relative;
-      flex-shrink: 0;
-      display: flex;
-      width: 100%;
-      padding-left: 0;
-      margin-bottom: 0;
-      white-space: nowrap;
-      overflow-y: hidden;
-      overflow-x: auto;
-
-      li {
-        position: relative;
-        background: $gray-normal;
-        padding: #{$gl-padding / 2} $gl-padding;
-        border-right: 1px solid $white-dark;
-        border-bottom: 1px solid $white-dark;
-        cursor: pointer;
-
-        &.active {
-          background: $white-light;
-          border-bottom: 0;
-        }
-
-        a {
-          @include str-truncated(100px);
-          color: $gl-text-color;
-          vertical-align: middle;
-          text-decoration: none;
-          margin-right: 12px;
-
-          &:focus {
-            outline: none;
-          }
-        }
-
-        .close-btn {
-          position: absolute;
-          right: 8px;
-          top: 50%;
-          padding: 0;
-          background: none;
-          border: 0;
-          font-size: $gl-font-size;
-          transform: translateY(-50%);
-        }
-
-        .close-icon:hover {
-          color: $hint-color;
-        }
-
-        .close-icon,
-        .unsaved-icon {
-          color: $gray-darkest;
-        }
-
-        .unsaved-icon {
-          color: $brand-success;
-        }
-
-        &.tabs-divider {
-          width: 100%;
-          background-color: $white-light;
-          border-right: 0;
-          border-top-right-radius: 2px;
-        }
-      }
-    }
+.multi-file-tab-close {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  padding: 0;
+  background: none;
+  border: 0;
+  font-size: $gl-font-size;
+  color: $gray-darkest;
+  transform: translateY(-50%);
+
+  &:not(.modified):hover,
+  &:not(.modified):focus {
+    color: $hint-color;
+  }
 
-    .repo-file-buttons {
-      background-color: $white-light;
-      padding: 5px 10px;
-      border-top: 1px solid $white-normal;
-    }
+  &.modified {
+    color: $indigo-700;
+  }
+}
 
-    #binary-viewer {
-      height: 80vh;
-      overflow: auto;
-      margin: 0;
-
-      .blob-viewer {
-        padding-top: 20px;
-        padding-left: 20px;
-      }
-
-      .binary-unknown {
-        text-align: center;
-        padding-top: 100px;
-        background: $gray-light;
-        height: 100%;
-        font-size: 17px;
-
-        span {
-          display: block;
-        }
-      }
-    }
+.multi-file-edit-pane-content {
+  flex: 1;
+  height: 0;
+}
+
+.multi-file-editor-btn-group {
+  padding: $grid-size;
+  border-top: 1px solid $white-dark;
+}
+
+// Not great, but this is to deal with our current output
+.multi-file-preview-holder {
+  height: 100%;
+  overflow: scroll;
+
+  .blob-viewer {
+    height: 100%;
   }
 
-  #commit-area {
-    background: $gray-light;
-    padding: 20px;
+  .file-content.code {
+    display: flex;
 
-    .help-block {
-      padding-top: 7px;
-      margin-top: 0;
+    i {
+      margin-left: -10px;
     }
   }
 
-  #view-toggler {
-    height: 41px;
-    position: relative;
-    display: block;
-    border-bottom: 1px solid $white-normal;
-    background: $white-light;
-    margin-top: -5px;
+  .line-numbers {
+    min-width: 50px;
   }
 
-  #binary-viewer {
-    img {
-      max-width: 100%;
-    }
+  .file-content,
+  .line-numbers,
+  .blob-content,
+  .code {
+    min-height: 100%;
   }
+}
 
-  #sidebar {
-    flex: 1;
-    height: 100%;
+.multi-file-commit-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 290px;
+  padding: $gl-padding;
+  background-color: $gray-light;
+  border-left: 1px solid $white-dark;
+
+  &.is-collapsed {
+    width: 60px;
+    padding: 0;
+  }
+}
 
-    &.sidebar-mini {
-      width: 20%;
-      border-right: 1px solid $white-normal;
-      overflow: auto;
-    }
+.multi-file-commit-panel-section {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
 
-    .table {
-      margin-bottom: 0;
-    }
+.multi-file-commit-panel-header {
+  display: flex;
+  align-items: center;
+  padding: 0 0 12px;
+  margin-bottom: 12px;
+  border-bottom: 1px solid $white-dark;
 
-    tr {
-      .repo-file-options {
-        padding: 2px 16px;
-        width: 100%;
-      }
-
-      .title {
-        font-size: 10px;
-        text-transform: uppercase;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        vertical-align: middle;
-      }
-
-      .file-icon {
-        margin-right: 5px;
-      }
-
-      td {
-        white-space: nowrap;
-      }
-    }
+  &.is-collapsed {
+    border-bottom: 1px solid $white-dark;
 
-    .file {
-      cursor: pointer;
+    svg {
+      margin-left: auto;
+      margin-right: auto;
     }
+  }
+}
 
-    a {
-      @include str-truncated(250px);
-      color: $almost-black;
-    }
+.multi-file-commit-panel-collapse-btn {
+  padding-top: 0;
+  padding-bottom: 0;
+  margin-left: auto;
+  font-size: 20px;
+
+  &.is-collapsed {
+    margin-right: auto;
+  }
+}
+
+.multi-file-commit-list {
+  flex: 1;
+  overflow: scroll;
+}
+
+.multi-file-commit-list-item {
+  display: flex;
+  align-items: center;
+}
+
+.multi-file-addition {
+  fill: $green-500;
+}
+
+.multi-file-modified {
+  fill: $orange-500;
+}
+
+.multi-file-commit-list-collapsed {
+  display: flex;
+  flex-direction: column;
+
+  > svg {
+    margin-left: auto;
+    margin-right: auto;
   }
 }
 
-.render-error {
-  min-height: calc(100vh - 62px);
+.multi-file-commit-list-path {
+  @include str-truncated(100%);
+}
+
+.multi-file-commit-form {
+  padding-top: 12px;
+  border-top: 1px solid $white-dark;
+}
+
+.multi-file-commit-fieldset {
+  display: flex;
+  align-items: center;
+  padding-bottom: 12px;
 
-  p {
-    width: 100%;
+  .btn {
+    flex: 1;
   }
 }
 
-.multi-file-table-col-name {
-  width: 350px;
+.multi-file-commit-message.form-control {
+  height: 80px;
+  resize: none;
 }
diff --git a/app/views/projects/tree/show.html.haml b/app/views/projects/tree/show.html.haml
index 745a6040488..64cc70053ef 100644
--- a/app/views/projects/tree/show.html.haml
+++ b/app/views/projects/tree/show.html.haml
@@ -11,6 +11,6 @@
     = webpack_bundle_tag 'common_vue'
     = webpack_bundle_tag 'repo'
 
-%div{ class: [container_class, ("limit-container-width" unless fluid_layout)] }
+%div{ class: [(container_class unless show_new_repo?), ("limit-container-width" unless fluid_layout)] }
   = render 'projects/last_push'
   = render 'projects/files', commit: @last_commit, project: @project, ref: @ref, content_url: project_tree_path(@project, @id)
diff --git a/app/views/shared/repo/_repo.html.haml b/app/views/shared/repo/_repo.html.haml
index 5867ea58378..87e8c416194 100644
--- a/app/views/shared/repo/_repo.html.haml
+++ b/app/views/shared/repo/_repo.html.haml
@@ -1,3 +1,4 @@
+- @no_container = true;
 #repo{ data: { root: @path.empty?.to_s,
                root_url: project_tree_path(project),
                url: content_url,
diff --git a/spec/features/projects/tree/create_directory_spec.rb b/spec/features/projects/tree/create_directory_spec.rb
index 1686e7fa342..156293289dd 100644
--- a/spec/features/projects/tree/create_directory_spec.rb
+++ b/spec/features/projects/tree/create_directory_spec.rb
@@ -26,9 +26,11 @@ feature 'Multi-file editor new directory', :js do
       click_button('Create directory')
     end
 
+    find('.multi-file-commit-panel-collapse-btn').click
+
     fill_in('commit-message', with: 'commit message')
 
-    click_button('Commit 1 file')
+    click_button('Commit')
 
     expect(page).to have_selector('td', text: 'commit message')
   end
diff --git a/spec/features/projects/tree/create_file_spec.rb b/spec/features/projects/tree/create_file_spec.rb
index 1e2de0711b8..8fb8476e631 100644
--- a/spec/features/projects/tree/create_file_spec.rb
+++ b/spec/features/projects/tree/create_file_spec.rb
@@ -26,9 +26,11 @@ feature 'Multi-file editor new file', :js do
       click_button('Create file')
     end
 
+    find('.multi-file-commit-panel-collapse-btn').click
+
     fill_in('commit-message', with: 'commit message')
 
-    click_button('Commit 1 file')
+    click_button('Commit')
 
     expect(page).to have_selector('td', text: 'commit message')
   end
diff --git a/spec/features/projects/tree/upload_file_spec.rb b/spec/features/projects/tree/upload_file_spec.rb
index 8439bb5a69e..d4e57d1ecfa 100644
--- a/spec/features/projects/tree/upload_file_spec.rb
+++ b/spec/features/projects/tree/upload_file_spec.rb
@@ -26,7 +26,7 @@ feature 'Multi-file editor upload file', :js do
 
     find('.add-to-tree').click
 
-    expect(page).to have_selector('.repo-tab', text: 'doc_sample.txt')
+    expect(page).to have_selector('.multi-file-tab', text: 'doc_sample.txt')
     expect(find('.blob-editor-container .lines-content')['innerText']).to have_content(File.open(txt_file, &:readline))
   end
 
@@ -39,7 +39,7 @@ feature 'Multi-file editor upload file', :js do
 
     find('.add-to-tree').click
 
-    expect(page).to have_selector('.repo-tab', text: 'dk.png')
+    expect(page).to have_selector('.multi-file-tab', text: 'dk.png')
     expect(page).not_to have_selector('.monaco-editor')
     expect(page).to have_content('The source could not be displayed for this temporary file.')
   end
diff --git a/spec/javascripts/repo/components/commit_sidebar/list_collapsed_spec.js b/spec/javascripts/repo/components/commit_sidebar/list_collapsed_spec.js
new file mode 100644
index 00000000000..f750061a6a1
--- /dev/null
+++ b/spec/javascripts/repo/components/commit_sidebar/list_collapsed_spec.js
@@ -0,0 +1,33 @@
+import Vue from 'vue';
+import store from '~/repo/stores';
+import listCollapsed from '~/repo/components/commit_sidebar/list_collapsed.vue';
+import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
+import { file } from '../../helpers';
+
+describe('Multi-file editor commit sidebar list collapsed', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(listCollapsed);
+
+    vm = createComponentWithStore(Component, store);
+
+    vm.$store.state.openFiles.push(file(), file());
+    vm.$store.state.openFiles[0].tempFile = true;
+    vm.$store.state.openFiles.forEach((f) => {
+      Object.assign(f, {
+        changed: true,
+      });
+    });
+
+    vm.$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders added & modified files count', () => {
+    expect(vm.$el.textContent.replace(/\s+/g, ' ').trim()).toBe('1 1');
+  });
+});
diff --git a/spec/javascripts/repo/components/commit_sidebar/list_item_spec.js b/spec/javascripts/repo/components/commit_sidebar/list_item_spec.js
new file mode 100644
index 00000000000..18c9b46fcd9
--- /dev/null
+++ b/spec/javascripts/repo/components/commit_sidebar/list_item_spec.js
@@ -0,0 +1,53 @@
+import Vue from 'vue';
+import listItem from '~/repo/components/commit_sidebar/list_item.vue';
+import mountComponent from '../../../helpers/vue_mount_component_helper';
+import { file } from '../../helpers';
+
+describe('Multi-file editor commit sidebar list item', () => {
+  let vm;
+  let f;
+
+  beforeEach(() => {
+    const Component = Vue.extend(listItem);
+
+    f = file();
+
+    vm = mountComponent(Component, {
+      file: f,
+    });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders file path', () => {
+    expect(vm.$el.querySelector('.multi-file-commit-list-path').textContent.trim()).toBe(f.path);
+  });
+
+  describe('computed', () => {
+    describe('iconName', () => {
+      it('returns modified when not a tempFile', () => {
+        expect(vm.iconName).toBe('file-modified');
+      });
+
+      it('returns addition when not a tempFile', () => {
+        f.tempFile = true;
+
+        expect(vm.iconName).toBe('file-addition');
+      });
+    });
+
+    describe('iconClass', () => {
+      it('returns modified when not a tempFile', () => {
+        expect(vm.iconClass).toContain('multi-file-modified');
+      });
+
+      it('returns addition when not a tempFile', () => {
+        f.tempFile = true;
+
+        expect(vm.iconClass).toContain('multi-file-addition');
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/repo/components/commit_sidebar/list_spec.js b/spec/javascripts/repo/components/commit_sidebar/list_spec.js
new file mode 100644
index 00000000000..df7e3c5de21
--- /dev/null
+++ b/spec/javascripts/repo/components/commit_sidebar/list_spec.js
@@ -0,0 +1,72 @@
+import Vue from 'vue';
+import store from '~/repo/stores';
+import commitSidebarList from '~/repo/components/commit_sidebar/list.vue';
+import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
+import { file } from '../../helpers';
+
+describe('Multi-file editor commit sidebar list', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(commitSidebarList);
+
+    vm = createComponentWithStore(Component, store, {
+      title: 'Staged',
+      fileList: [],
+      collapsed: false,
+    }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('empty file list', () => {
+    it('renders no changes text', () => {
+      expect(vm.$el.querySelector('.help-block').textContent.trim()).toBe('No changes');
+    });
+  });
+
+  describe('with a list of files', () => {
+    beforeEach((done) => {
+      const f = file('file name');
+      f.changed = true;
+      vm.fileList.push(f);
+
+      Vue.nextTick(done);
+    });
+
+    it('renders list', () => {
+      expect(vm.$el.querySelectorAll('li').length).toBe(1);
+    });
+  });
+
+  describe('collapsed', () => {
+    beforeEach((done) => {
+      vm.collapsed = true;
+
+      Vue.nextTick(done);
+    });
+
+    it('adds collapsed class', () => {
+      expect(vm.$el.querySelector('.is-collapsed')).not.toBeNull();
+    });
+
+    it('hides list', () => {
+      expect(vm.$el.querySelector('.list-unstyled')).toBeNull();
+      expect(vm.$el.querySelector('.help-block')).toBeNull();
+    });
+
+    it('hides collapse button', () => {
+      expect(vm.$el.querySelector('.multi-file-commit-panel-collapse-btn')).toBeNull();
+    });
+  });
+
+  it('clicking toggle collapse button emits toggle event', () => {
+    spyOn(vm, '$emit');
+
+    vm.$el.querySelector('.multi-file-commit-panel-collapse-btn').click();
+
+    expect(vm.$emit).toHaveBeenCalledWith('toggleCollapsed');
+  });
+});
diff --git a/spec/javascripts/repo/components/repo_commit_section_spec.js b/spec/javascripts/repo/components/repo_commit_section_spec.js
index 0f991e1b727..1c794123095 100644
--- a/spec/javascripts/repo/components/repo_commit_section_spec.js
+++ b/spec/javascripts/repo/components/repo_commit_section_spec.js
@@ -25,8 +25,12 @@ describe('RepoCommitSection', () => {
     return comp.$mount();
   }
 
-  beforeEach(() => {
+  beforeEach((done) => {
     vm = createComponent();
+
+    vm.collapsed = false;
+
+    Vue.nextTick(done);
   });
 
   afterEach(() => {
@@ -36,12 +40,11 @@ describe('RepoCommitSection', () => {
   });
 
   it('renders a commit section', () => {
-    const changedFileElements = [...vm.$el.querySelectorAll('.changed-files > li')];
-    const submitCommit = vm.$el.querySelector('.btn');
-    const targetBranch = vm.$el.querySelector('.target-branch');
+    const changedFileElements = [...vm.$el.querySelectorAll('.multi-file-commit-list li')];
+    const submitCommit = vm.$el.querySelector('form .btn');
 
-    expect(vm.$el.querySelector(':scope > form')).toBeTruthy();
-    expect(vm.$el.querySelector('.staged-files').textContent.trim()).toEqual('Staged files (2)');
+    expect(vm.$el.querySelector('.multi-file-commit-form')).not.toBeNull();
+    expect(vm.$el.querySelector('.multi-file-commit-panel-section header').textContent.trim()).toEqual('Staged');
     expect(changedFileElements.length).toEqual(2);
 
     changedFileElements.forEach((changedFile, i) => {
@@ -49,10 +52,7 @@ describe('RepoCommitSection', () => {
     });
 
     expect(submitCommit.disabled).toBeTruthy();
-    expect(submitCommit.querySelector('.fa-spinner.fa-spin')).toBeFalsy();
-    expect(vm.$el.querySelector('.commit-summary').textContent.trim()).toEqual('Commit 2 files');
-    expect(targetBranch.querySelector(':scope > label').textContent.trim()).toEqual('Target branch');
-    expect(targetBranch.querySelector('.help-block').textContent.trim()).toEqual('master');
+    expect(submitCommit.querySelector('.fa-spinner.fa-spin')).toBeNull();
   });
 
   describe('when submitting', () => {
@@ -69,7 +69,7 @@ describe('RepoCommitSection', () => {
     });
 
     it('allows you to submit', () => {
-      expect(vm.$el.querySelector('.btn').disabled).toBeTruthy();
+      expect(vm.$el.querySelector('form .btn').disabled).toBeTruthy();
     });
 
     it('submits commit', (done) => {
diff --git a/spec/javascripts/repo/components/repo_sidebar_spec.js b/spec/javascripts/repo/components/repo_sidebar_spec.js
index 7cb4dace491..df7cf8aabbb 100644
--- a/spec/javascripts/repo/components/repo_sidebar_spec.js
+++ b/spec/javascripts/repo/components/repo_sidebar_spec.js
@@ -29,7 +29,6 @@ describe('RepoSidebar', () => {
     const thead = vm.$el.querySelector('thead');
     const tbody = vm.$el.querySelector('tbody');
 
-    expect(vm.$el.id).toEqual('sidebar');
     expect(vm.$el.classList.contains('sidebar-mini')).toBeFalsy();
     expect(thead.querySelector('.name').textContent.trim()).toEqual('Name');
     expect(thead.querySelector('.last-commit').textContent.trim()).toEqual('Last commit');
@@ -40,18 +39,6 @@ describe('RepoSidebar', () => {
     expect(tbody.querySelector('.file')).toBeTruthy();
   });
 
-  it('does not render a thead, renders repo-file-options and sets sidebar-mini class if isMini', (done) => {
-    vm.$store.state.openFiles.push(vm.$store.state.tree[0]);
-
-    Vue.nextTick(() => {
-      expect(vm.$el.classList.contains('sidebar-mini')).toBeTruthy();
-      expect(vm.$el.querySelector('thead')).toBeTruthy();
-      expect(vm.$el.querySelector('thead .repo-file-options')).toBeTruthy();
-
-      done();
-    });
-  });
-
   it('renders 5 loading files if tree is loading', (done) => {
     vm.$store.state.tree = [];
     vm.$store.state.loading = true;
diff --git a/spec/javascripts/repo/components/repo_tab_spec.js b/spec/javascripts/repo/components/repo_tab_spec.js
index df0ca55aafc..7d2174196c9 100644
--- a/spec/javascripts/repo/components/repo_tab_spec.js
+++ b/spec/javascripts/repo/components/repo_tab_spec.js
@@ -24,8 +24,8 @@ describe('RepoTab', () => {
       tab: file(),
     });
     vm.$store.state.openFiles.push(vm.tab);
-    const close = vm.$el.querySelector('.close-btn');
-    const name = vm.$el.querySelector(`a[title="${vm.tab.url}"]`);
+    const close = vm.$el.querySelector('.multi-file-tab-close');
+    const name = vm.$el.querySelector(`[title="${vm.tab.url}"]`);
 
     expect(close.querySelector('.fa-times')).toBeTruthy();
     expect(name.textContent.trim()).toEqual(vm.tab.name);
@@ -50,7 +50,7 @@ describe('RepoTab', () => {
 
     spyOn(vm, 'closeFile');
 
-    vm.$el.querySelector('.close-btn').click();
+    vm.$el.querySelector('.multi-file-tab-close').click();
 
     expect(vm.closeFile).toHaveBeenCalledWith({ file: vm.tab });
   });
@@ -62,7 +62,7 @@ describe('RepoTab', () => {
       tab,
     });
 
-    expect(vm.$el.querySelector('.close-btn .fa-circle')).toBeTruthy();
+    expect(vm.$el.querySelector('.multi-file-tab-close .fa-circle')).not.toBeNull();
   });
 
   describe('methods', () => {
@@ -77,7 +77,7 @@ describe('RepoTab', () => {
         vm.$store.state.openFiles.push(tab);
         vm.$store.dispatch('setFileActive', tab);
 
-        vm.$el.querySelector('.close-btn').click();
+        vm.$el.querySelector('.multi-file-tab-close').click();
 
         vm.$nextTick(() => {
           expect(tab.opened).toBeTruthy();
@@ -95,7 +95,7 @@ describe('RepoTab', () => {
         vm.$store.state.openFiles.push(tab);
         vm.$store.dispatch('setFileActive', tab);
 
-        vm.$el.querySelector('.close-btn').click();
+        vm.$el.querySelector('.multi-file-tab-close').click();
 
         vm.$nextTick(() => {
           expect(tab.opened).toBeFalsy();
diff --git a/spec/javascripts/repo/components/repo_tabs_spec.js b/spec/javascripts/repo/components/repo_tabs_spec.js
index d0246cc72e6..1fb2242c051 100644
--- a/spec/javascripts/repo/components/repo_tabs_spec.js
+++ b/spec/javascripts/repo/components/repo_tabs_spec.js
@@ -25,12 +25,11 @@ describe('RepoTabs', () => {
     vm.$store.state.openFiles = openedFiles;
 
     vm.$nextTick(() => {
-      const tabs = [...vm.$el.querySelectorAll(':scope > li')];
+      const tabs = [...vm.$el.querySelectorAll('.multi-file-tab')];
 
-      expect(tabs.length).toEqual(3);
+      expect(tabs.length).toEqual(2);
       expect(tabs[0].classList.contains('active')).toBeTruthy();
       expect(tabs[1].classList.contains('active')).toBeFalsy();
-      expect(tabs[2].classList.contains('tabs-divider')).toBeTruthy();
 
       done();
     });
diff --git a/spec/javascripts/repo/stores/getters_spec.js b/spec/javascripts/repo/stores/getters_spec.js
index a204b2386cd..952b8ec3a59 100644
--- a/spec/javascripts/repo/stores/getters_spec.js
+++ b/spec/javascripts/repo/stores/getters_spec.js
@@ -116,4 +116,31 @@ describe('Multi-file store getters', () => {
       expect(getters.canEditFile(localState)).toBeFalsy();
     });
   });
+
+  describe('modifiedFiles', () => {
+    it('returns a list of modified files', () => {
+      localState.openFiles.push(file());
+      localState.openFiles.push(file('changed'));
+      localState.openFiles[1].changed = true;
+
+      const modifiedFiles = getters.modifiedFiles(localState);
+
+      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.openFiles.push(file('added'));
+      localState.openFiles[1].changed = true;
+      localState.openFiles[1].tempFile = true;
+
+      const modifiedFiles = getters.addedFiles(localState);
+
+      expect(modifiedFiles.length).toBe(1);
+      expect(modifiedFiles[0].name).toBe('added');
+    });
+  });
 });