1 files changed, 78 insertions, 131 deletions

diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue
index d772cab2d0e..c2c678ff0be 100644
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -1,174 +1,121 @@
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
 import tooltip from '~/vue_shared/directives/tooltip';
-import icon from '~/vue_shared/components/icon.vue';
-import modal from '~/vue_shared/components/modal.vue';
-import LoadingButton from '~/vue_shared/components/loading_button.vue';
-import commitFilesList from './commit_sidebar/list.vue';
+import Icon from '~/vue_shared/components/icon.vue';
+import DeprecatedModal from '~/vue_shared/components/deprecated_modal.vue';
+import CommitFilesList from './commit_sidebar/list.vue';
+import EmptyState from './commit_sidebar/empty_state.vue';
 import * as consts from '../stores/modules/commit/constants';
-import Actions from './commit_sidebar/actions.vue';
+import { activityBarViews, stageKeys } from '../constants';
 
 export default {
   components: {
-    modal,
-    icon,
-    commitFilesList,
-    Actions,
-    LoadingButton,
+    DeprecatedModal,
+    Icon,
+    CommitFilesList,
+    EmptyState,
   },
   directives: {
     tooltip,
   },
-  props: {
-    noChangesStateSvgPath: {
-      type: String,
-      required: true,
-    },
-    committedStateSvgPath: {
-      type: String,
-      required: true,
-    },
-  },
   computed: {
     ...mapState([
-      'currentProjectId',
-      'currentBranchId',
+      'changedFiles',
+      'stagedFiles',
       'rightPanelCollapsed',
       'lastCommitMsg',
-      'changedFiles',
+      'unusedSeal',
     ]),
-    ...mapState('commit', [
-      'commitMessage',
-      'submitCommitLoading',
-    ]),
-    ...mapGetters('commit', [
-      'commitButtonDisabled',
-      'discardDraftButtonDisabled',
-      'branchName',
-    ]),
-    statusSvg() {
-      return this.lastCommitMsg ? this.committedStateSvgPath : this.noChangesStateSvgPath;
+    ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
+    ...mapGetters(['lastOpenedFile', 'hasChanges', 'someUncommitedChanges', 'activeFile']),
+    ...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled']),
+    showStageUnstageArea() {
+      return !!(this.someUncommitedChanges || this.lastCommitMsg || !this.unusedSeal);
+    },
+    activeFileKey() {
+      return this.activeFile ? this.activeFile.key : null;
     },
   },
-  methods: {
-    ...mapActions([
-      'setPanelCollapsedStatus',
-    ]),
-    ...mapActions('commit', [
-      'updateCommitMessage',
-      'discardDraft',
-      'commitChanges',
-      'updateCommitAction',
-    ]),
-    toggleCollapsed() {
-      this.setPanelCollapsedStatus({
-        side: 'right',
-        collapsed: !this.rightPanelCollapsed,
-      });
+  watch: {
+    hasChanges() {
+      if (!this.hasChanges) {
+        this.updateActivityBarView(activityBarViews.edit);
+      }
     },
+  },
+  mounted() {
+    if (this.lastOpenedFile) {
+      this.openPendingTab({
+        file: this.lastOpenedFile,
+        keyPrefix: this.lastOpenedFile.changed ? stageKeys.unstaged : stageKeys.staged,
+      })
+        .then(changeViewer => {
+          if (changeViewer) {
+            this.updateViewer('diff');
+          }
+        })
+        .catch(e => {
+          throw e;
+        });
+    }
+  },
+  methods: {
+    ...mapActions(['openPendingTab', 'updateViewer', 'updateActivityBarView']),
+    ...mapActions('commit', ['commitChanges', 'updateCommitAction']),
     forceCreateNewBranch() {
-      return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH)
-        .then(() => this.commitChanges());
+      return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH).then(() => this.commitChanges());
     },
   },
+  stageKeys,
 };
 </script>
 
 <template>
   <div
     class="multi-file-commit-panel-section"
-    :class="{
-      'multi-file-commit-empty-state-container': !changedFiles.length
-    }"
   >
-    <modal
+    <deprecated-modal
       id="ide-create-branch-modal"
       :primary-button-label="__('Create new branch')"
-      kind="success"
       :title="__('Branch has changed')"
+      kind="success"
       @submit="forceCreateNewBranch"
     >
       <template slot="body">
         {{ __(`This branch has changed since you started editing.
           Would you like to create a new branch?`) }}
       </template>
-    </modal>
-    <commit-files-list
-      title="Staged"
-      :file-list="changedFiles"
-      :collapsed="rightPanelCollapsed"
-      @toggleCollapsed="toggleCollapsed"
-    />
+    </deprecated-modal>
     <template
-      v-if="changedFiles.length"
+      v-if="showStageUnstageArea"
     >
-      <form
-        class="form-horizontal multi-file-commit-form"
-        @submit.prevent.stop="commitChanges"
-        v-if="!rightPanelCollapsed"
-      >
-        <div class="multi-file-commit-fieldset">
-          <textarea
-            class="form-control multi-file-commit-message"
-            name="commit-message"
-            :value="commitMessage"
-            :placeholder="__('Write a commit message...')"
-            @input="updateCommitMessage($event.target.value)"
-          >
-          </textarea>
-        </div>
-        <div class="clearfix prepend-top-15">
-          <actions />
-          <loading-button
-            :loading="submitCommitLoading"
-            :disabled="commitButtonDisabled"
-            container-class="btn btn-success btn-sm pull-left"
-            :label="__('Commit')"
-            @click="commitChanges"
-          />
-          <button
-            v-if="!discardDraftButtonDisabled"
-            type="button"
-            class="btn btn-default btn-sm pull-right"
-            @click="discardDraft"
-          >
-            {{ __('Discard draft') }}
-          </button>
-        </div>
-      </form>
+      <commit-files-list
+        :title="__('Unstaged')"
+        :key-prefix="$options.stageKeys.unstaged"
+        :file-list="changedFiles"
+        :action-btn-text="__('Stage all changes')"
+        :active-file-key="activeFileKey"
+        action="stageAllChanges"
+        action-btn-icon="mobile-issue-close"
+        item-action-component="stage-button"
+        class="is-first"
+        icon-name="unstaged"
+      />
+      <commit-files-list
+        :title="__('Staged')"
+        :key-prefix="$options.stageKeys.staged"
+        :file-list="stagedFiles"
+        :action-btn-text="__('Unstage all changes')"
+        :staged-list="true"
+        :active-file-key="activeFileKey"
+        action="unstageAllChanges"
+        action-btn-icon="history"
+        item-action-component="unstage-button"
+        icon-name="staged"
+      />
     </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-if="unusedSeal"
+    />
   </div>
 </template>