Improve Web IDE Commit Panel

1 files changed, 24 insertions, 9 deletions

diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue
index 877d1b5e026..fa929381744 100644
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -7,6 +7,7 @@ import LoadingButton from '~/vue_shared/components/loading_button.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 SuccessMessage from './commit_sidebar/success_message.vue';
 import * as consts from '../stores/modules/commit/constants';
 import Actions from './commit_sidebar/actions.vue';
 
@@ -16,6 +17,7 @@ export default {
     Icon,
     CommitFilesList,
     EmptyState,
+    SuccessMessage,
     Actions,
     LoadingButton,
     CommitMessageField,
@@ -34,9 +36,15 @@ export default {
     },
   },
   computed: {
-    ...mapState(['changedFiles', 'stagedFiles', 'rightPanelCollapsed']),
+    showStageUnstageArea() {
+      return !!(this.someUncommitedChanges || this.lastCommitMsg || !this.unusedSeal);
+    },
+    someUncommitedChanges() {
+      return !!(this.changedFiles.length || this.stagedFiles.length);
+    },
+    ...mapState(['changedFiles', 'stagedFiles', 'rightPanelCollapsed', 'lastCommitMsg', 'unusedSeal']),
     ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
-    ...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled', 'branchName']),
+    ...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled']),
   },
   methods: {
     ...mapActions('commit', [
@@ -69,7 +77,7 @@ export default {
       </template>
     </deprecated-modal>
     <template
-      v-if="changedFiles.length || stagedFiles.length"
+      v-if="showStageUnstageArea"
     >
       <commit-files-list
         icon-name="unstaged"
@@ -89,11 +97,23 @@ export default {
         :show-toggle="false"
         :staged-list="true"
       />
+    </template>
+    <empty-state
+      v-if="unusedSeal"
+      :no-changes-state-svg-path="noChangesStateSvgPath"
+    />
+    <div
+      class="multi-file-commit-panel-bottom"
+    >
       <form
         class="form-horizontal multi-file-commit-form"
         @submit.prevent.stop="commitChanges"
         v-if="!rightPanelCollapsed"
       >
+        <success-message
+          v-if="lastCommitMsg && !someUncommitedChanges"
+          :committed-state-svg-path="committedStateSvgPath"
+        />
         <commit-message-field
           :text="commitMessage"
           @input="updateCommitMessage"
@@ -117,11 +137,6 @@ export default {
           </button>
         </div>
       </form>
-    </template>
-    <empty-state
-      v-else
-      :no-changes-state-svg-path="noChangesStateSvgPath"
-      :committed-state-svg-path="committedStateSvgPath"
-    />
+    </div>
   </div>
 </template>