Improved IDE commit flow

Closes #48182

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

+<script>
+import $ from 'jquery';
+import { mapActions } from 'vuex';
+import { __ } from '~/locale';
+import FileIcon from '~/vue_shared/components/file_icon.vue';
+import ChangedFileIcon from '../changed_file_icon.vue';
+
+export default {
+  components: {
+    FileIcon,
+    ChangedFileIcon,
+  },
+  props: {
+    activeFile: {
+      type: Object,
+      required: true,
+    },
+  },
+  computed: {
+    activeButtonText() {
+      return this.activeFile.staged ? __('Unstage') : __('Stage');
+    },
+    isStaged() {
+      return !this.activeFile.changed && this.activeFile.staged;
+    },
+  },
+  methods: {
+    ...mapActions(['stageChange', 'unstageChange']),
+    actionButtonClicked() {
+      if (this.activeFile.staged) {
+        this.unstageChange(this.activeFile.path);
+      } else {
+        this.stageChange(this.activeFile.path);
+      }
+    },
+    showDiscardModal() {
+      $(document.getElementById(`discard-file-${this.activeFile.path}`)).modal('show');
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="d-flex ide-commit-editor-header align-items-center">
+    <file-icon
+      :file-name="activeFile.name"
+      :size="16"
+      class="mr-2"
+    />
+    <strong class="mr-2">
+      {{ activeFile.path }}
+    </strong>
+    <changed-file-icon
+      :file="activeFile"
+    />
+    <div class="ml-auto">
+      <button
+        v-if="!isStaged"
+        type="button"
+        class="btn btn-remove btn-inverted append-right-8"
+        @click="showDiscardModal"
+      >
+        {{ __('Discard') }}
+      </button>
+      <button
+        :class="{
+          'btn-success': !isStaged,
+          'btn-warning': isStaged
+        }"
+        type="button"
+        class="btn btn-inverted"
+        @click="actionButtonClicked"
+      >
+        {{ activeButtonText }}
+      </button>
+    </div>
+  </div>
+</template>

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

@@ -56,6 +56,11 @@ export default {
       type: String,
       required: true,
     },
+    emptyStateText: {
+      type: String,
+      required: false,
+      default: __('No changes'),
+    },
   },
   computed: {
     titleText() {
@@ -91,17 +96,20 @@ export default {
           :name="iconName"
           :size="18"
         />
+        <strong>
           {{ titleText }}
+        </strong>
         <div class="d-flex ml-auto">
           <button
             v-tooltip
-            v-show="filesLength"
+            :title="actionBtnText"
+            :aria-label="actionBtnText"
+            :disabled="!filesLength"
             :class="{
-              'd-flex': filesLength
+              'disabled-content': !filesLength
             }"
-            :title="actionBtnText"
             type="button"
-            class="btn btn-default ide-staged-action-btn p-0 order-1 align-items-center"
+            class="d-flex ide-staged-action-btn p-0 border-0 align-items-center"
             data-placement="bottom"
             data-container="body"
             data-boundary="viewport"
@@ -109,18 +117,10 @@ export default {
           >
             <icon
               :name="actionBtnIcon"
-              :size="12"
-              class="ml-auto mr-auto"
+              :size="16"
+              class="mr-0"
             />
           </button>
-          <span
-            :class="{
-              'rounded-right': !filesLength
-            }"
-            class="ide-commit-file-count order-0 rounded-left text-center"
-          >
-            {{ filesLength }}
-          </span>
         </div>
       </div>
     </header>
@@ -143,9 +143,9 @@ export default {
     </ul>
     <p
       v-else
-      class="multi-file-commit-list form-text text-muted"
+      class="multi-file-commit-list form-text text-muted text-center"
     >
-      {{ __('No changes') }}
+      {{ emptyStateText }}
     </p>
   </div>
 </template>

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

 <script>
+import $ from 'jquery';
 import { mapActions } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
 import tooltip from '~/vue_shared/directives/tooltip';
+import GlModal from '~/vue_shared/components/gl_modal.vue';
 
 export default {
   components: {
     Icon,
+    GlModal,
   },
   directives: {
     tooltip,
@@ -16,8 +19,19 @@ export default {
       required: true,
     },
   },
+  computed: {
+    modalId() {
+      return `discard-file-${this.path}`;
+    },
+    modalTitle() {
+      return `Discard changes to ${this.path}?`;
+    },
+  },
   methods: {
     ...mapActions(['stageChange', 'discardFileChanges']),
+    showDiscardModal() {
+      $(document.getElementById(this.modalId)).modal('show');
+    },
   },
 };
 </script>
@@ -25,51 +39,48 @@ export default {
 <template>
   <div
     v-once
-    class="multi-file-discard-btn dropdown"
+    class="multi-file-discard-btn"
   >
     <button
       v-tooltip
       :aria-label="__('Stage changes')"
       :title="__('Stage changes')"
       type="button"
-      class="btn btn-blank append-right-5 d-flex align-items-center"
+      class="btn btn-blank append-right-8 d-flex align-items-center"
       data-container="body"
       data-boundary="viewport"
       data-placement="bottom"
-      @click.stop="stageChange(path)"
+      @click="stageChange(path)"
     >
       <icon
-        :size="12"
+        :size="16"
         name="mobile-issue-close"
       />
     </button>
     <button
       v-tooltip
-      :title="__('More actions')"
+      :aria-label="__('Discard changes')"
+      :title="__('Discard changes')"
       type="button"
       class="btn btn-blank d-flex align-items-center"
       data-container="body"
       data-boundary="viewport"
       data-placement="bottom"
-      data-toggle="dropdown"
-      data-display="static"
+      @click="showDiscardModal"
     >
       <icon
-        :size="12"
-        name="ellipsis_h"
+        :size="16"
+        name="remove"
       />
     </button>
-    <div class="dropdown-menu dropdown-menu-right">
-      <ul>
-        <li>
-          <button
-            type="button"
-            @click.stop="discardFileChanges(path)"
+    <gl-modal
+      :id="modalId"
+      :header-title-text="modalTitle"
+      :footer-primary-button-text="__('Discard changes')"
+      footer-primary-button-variant="danger"
+      @submit="discardFileChanges(path)"
     >
-            {{ __('Discard changes') }}
-          </button>
-        </li>
-      </ul>
-    </div>
+      {{ __("You will loose all changes you've made to this file. This action cannot be undone.") }}
+    </gl-modal>
   </div>
 </template>

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

@@ -39,8 +39,8 @@ export default {
       @click="unstageChange(path)"
     >
       <icon
-        :size="12"
-        name="history"
+        :size="16"
+        name="redo"
       />
     </button>
   </div>

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

@@ -10,6 +10,7 @@ import RepoEditor from './repo_editor.vue';
 import FindFile from './file_finder/index.vue';
 import RightPane from './panes/right.vue';
 import ErrorMessage from './error_message.vue';
+import CommitEditorHeader from './commit_sidebar/editor_header.vue';
 
 const originalStopCallback = Mousetrap.stopCallback;
 
@@ -23,6 +24,7 @@ export default {
     FindFile,
     RightPane,
     ErrorMessage,
+    CommitEditorHeader,
   },
   computed: {
     ...mapState([
@@ -34,7 +36,7 @@ export default {
       'currentProjectId',
       'errorMessage',
     ]),
-    ...mapGetters(['activeFile', 'hasChanges', 'someUncommitedChanges']),
+    ...mapGetters(['activeFile', 'hasChanges', 'someUncommitedChanges', 'isCommitModeActive']),
   },
   mounted() {
     window.onbeforeunload = e => this.onBeforeUnload(e);
@@ -96,7 +98,12 @@ export default {
         <template
           v-if="activeFile"
         >
+          <commit-editor-header
+            v-if="isCommitModeActive"
+            :active-file="activeFile"
+          />
           <repo-tabs
+            v-else
             :active-file="activeFile"
             :files="openFiles"
             :viewer="viewer"

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

@@ -95,6 +95,7 @@ export default {
         :file-list="changedFiles"
         :action-btn-text="__('Stage all changes')"
         :active-file-key="activeFileKey"
+        :empty-state-text="__('There are no unstaged changes')"
         action="stageAllChanges"
         action-btn-icon="mobile-issue-close"
         item-action-component="stage-button"
@@ -108,6 +109,7 @@ export default {
         :action-btn-text="__('Unstage all changes')"
         :staged-list="true"
         :active-file-key="activeFileKey"
+        :empty-state-text="__('There are no staged changes')"
         action="unstageAllChanges"
         action-btn-icon="history"
         item-action-component="unstage-button"

app/assets/stylesheets/framework/buttons.scss

@@ -166,6 +166,10 @@
       @include btn-outline($white-light, $red-500, $red-500, $red-500, $white-light, $red-600, $red-600, $red-700);
     }
 
+    &.btn-warning {
+      @include btn-outline($white-light, $orange-500, $orange-500, $orange-500, $white-light, $orange-600, $orange-600, $orange-700);
+    }
+
     &.btn-primary,
     &.btn-info {
       @include btn-outline($white-light, $blue-500, $blue-500, $blue-500, $white-light, $blue-600, $blue-600, $blue-700);

app/assets/stylesheets/page_bundles/ide.scss

@@ -679,6 +679,7 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
 
 .multi-file-commit-list-file-path {
   @include str-truncated(calc(100% - 30px));
+  user-select: none;
 
   &:active {
     text-decoration: none;
@@ -807,11 +808,6 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
 }
 
 .ide-staged-action-btn {
-  width: 22px;
-  margin-left: -1px;
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-
   > svg {
     top: 0;
   }
@@ -1456,3 +1452,9 @@ $ide-tree-text-start: $ide-activity-bar-width + $ide-tree-padding;
     max-height: 222px;
   }
 }
+
+.ide-commit-editor-header {
+  padding: 8px 16px;
+  background-color: $white-normal;
+  box-shadow: inset 0 -1px $white-dark;
+}

locale/gitlab.pot

@@ -2301,6 +2301,9 @@ msgstr ""
 msgid "Disable group Runners"
 msgstr ""
 
+msgid "Discard"
+msgstr ""
+
 msgid "Discard changes"
 msgstr ""
 
@@ -3777,9 +3780,6 @@ msgstr ""
 msgid "More"
 msgstr ""
 
-msgid "More actions"
-msgstr ""
-
 msgid "More information"
 msgstr ""
 
@@ -5769,6 +5769,12 @@ msgstr ""
 msgid "There are no projects shared with this group yet"
 msgstr ""
 
+msgid "There are no staged changes"
+msgstr ""
+
+msgid "There are no unstaged changes"
+msgstr ""
+
 msgid "There are problems accessing Git storage: "
 msgstr ""
 
@@ -6226,6 +6232,9 @@ msgstr ""
 msgid "Unresolve discussion"
 msgstr ""
 
+msgid "Unstage"
+msgstr ""
+
 msgid "Unstage all changes"
 msgstr ""
 
@@ -6643,6 +6652,9 @@ msgstr ""
 msgid "You need permission."
 msgstr ""
 
+msgid "You will loose all changes you've made to this file. This action cannot be undone."
+msgstr ""
+
 msgid "You will not get any notifications via email"
 msgstr ""