improved success message after commit with new sidebar

9 files changed, 54 insertions, 38 deletions

diff --git a/app/assets/javascripts/ide/components/activity_bar.vue b/app/assets/javascripts/ide/components/activity_bar.vue
index 3a8bc6fd859..edea6a9b894 100644
--- a/app/assets/javascripts/ide/components/activity_bar.vue
+++ b/app/assets/javascripts/ide/components/activity_bar.vue
@@ -51,7 +51,7 @@ export default {
           />
         </button>
       </li>
-      <li v-show="hasChanges">
+      <li>
         <button
           type="button"
           class="ide-sidebar-link js-ide-review-mode"
@@ -65,7 +65,7 @@ export default {
           />
         </button>
       </li>
-      <li>
+      <li v-show="hasChanges">
         <button
           type="button"
           class="ide-sidebar-link js-ide-commit-mode"
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue b/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
index 4ecc8e0db51..3790c3401f3 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/actions.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapGetters, mapState } from 'vuex';
+import { mapState } from 'vuex';
 import { sprintf, __ } from '~/locale';
 import * as consts from '../../stores/modules/commit/constants';
 import RadioGroup from './radio_group.vue';
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/form.vue b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
index f42b4265f8e..ab64627e735 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/form.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/form.vue
@@ -21,13 +21,10 @@ export default {
     };
   },
   computed: {
-    ...mapState(['lastCommitMsg', 'changedFiles', 'stagedFiles', 'currentActivityView']),
+    ...mapState(['changedFiles', 'stagedFiles', 'currentActivityView', 'lastCommitMsg']),
     ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
-    ...mapGetters(['hasChanges']),
+    ...mapGetters(['hasChanges', 'someUncommitedChanges']),
     ...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled']),
-    someUncommitedChanges() {
-      return !!(this.changedFiles.length || this.stagedFiles.length);
-    },
     overviewText() {
       return sprintf(
         __(
@@ -126,8 +123,7 @@ export default {
         ref="formEl"
       >
         <success-message
-          v-if="lastCommitMsg && !someUncommitedChanges"
-          :committed-state-svg-path="committedStateSvgPath"
+          v-show="(lastCommitMsg && someUncommitedChanges)"
         />
         <commit-message-field
           :text="commitMessage"
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue b/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue
index 628a17eddca..a6df91b79c2 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/success_message.vue
@@ -2,14 +2,8 @@
 import { mapState } from 'vuex';
 
 export default {
-  props: {
-    committedStateSvgPath: {
-      type: String,
-      required: true,
-    },
-  },
   computed: {
-    ...mapState(['lastCommitMsg']),
+    ...mapState(['lastCommitMsg', 'committedStateSvgPath']),
   },
 };
 </script>
diff --git a/app/assets/javascripts/ide/components/ide_side_bar.vue b/app/assets/javascripts/ide/components/ide_side_bar.vue
index 808f14943d7..2f3f93a6aed 100644
--- a/app/assets/javascripts/ide/components/ide_side_bar.vue
+++ b/app/assets/javascripts/ide/components/ide_side_bar.vue
@@ -11,6 +11,8 @@ import ActivityBar from './activity_bar.vue';
 import CommitSection from './repo_commit_section.vue';
 import CommitForm from './commit_sidebar/form.vue';
 import IdeReview from './ide_review.vue';
+import SuccessMessage from './commit_sidebar/success_message.vue';
+import { activityBarViews } from '../constants';
 
 export default {
   components: {
@@ -25,10 +27,24 @@ export default {
     IdeTree,
     CommitForm,
     IdeReview,
+    SuccessMessage,
   },
   computed: {
-    ...mapState(['loading', 'currentBranchId', 'currentActivityView']),
-    ...mapGetters(['currentProject']),
+    ...mapState([
+      'loading',
+      'currentBranchId',
+      'currentActivityView',
+      'changedFiles',
+      'stagedFiles',
+      'lastCommitMsg',
+    ]),
+    ...mapGetters(['currentProject', 'someUncommitedChanges']),
+    showSuccessMessage() {
+      return (
+        this.currentActivityView === activityBarViews.edit &&
+        (this.lastCommitMsg && !this.someUncommitedChanges)
+      );
+    },
   },
 };
 </script>
@@ -96,6 +112,9 @@ export default {
           />
         </div>
         <commit-form />
+        <success-message
+          v-show="showSuccessMessage"
+        />
       </template>
     </div>
   </resizable-panel>
diff --git a/app/assets/javascripts/ide/components/repo_commit_section.vue b/app/assets/javascripts/ide/components/repo_commit_section.vue
index e71ce83d4ea..c5092d8e04d 100644
--- a/app/assets/javascripts/ide/components/repo_commit_section.vue
+++ b/app/assets/javascripts/ide/components/repo_commit_section.vue
@@ -27,14 +27,11 @@ export default {
       'unusedSeal',
     ]),
     ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
-    ...mapGetters(['lastOpenedFile', 'hasChanges']),
+    ...mapGetters(['lastOpenedFile', 'hasChanges', 'someUncommitedChanges']),
     ...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled']),
     showStageUnstageArea() {
       return !!(this.someUncommitedChanges || this.lastCommitMsg || !this.unusedSeal);
     },
-    someUncommitedChanges() {
-      return !!(this.changedFiles.length || this.stagedFiles.length);
-    },
   },
   watch: {
     hasChanges() {
diff --git a/app/assets/javascripts/ide/components/repo_editor.vue b/app/assets/javascripts/ide/components/repo_editor.vue
index 23d584b62c4..8a08f9fc7db 100644
--- a/app/assets/javascripts/ide/components/repo_editor.vue
+++ b/app/assets/javascripts/ide/components/repo_editor.vue
@@ -26,6 +26,7 @@ export default {
       'getStagedFile',
       'isEditModeActive',
       'isCommitModeActive',
+      'isReviewModeActive',
     ]),
     shouldHideEditor() {
       return this.file && this.file.binary && !this.file.content;
diff --git a/app/assets/javascripts/ide/stores/getters.js b/app/assets/javascripts/ide/stores/getters.js
index db98d511c00..8494f07ed84 100644
--- a/app/assets/javascripts/ide/stores/getters.js
+++ b/app/assets/javascripts/ide/stores/getters.js
@@ -59,6 +59,10 @@ export const lastOpenedFile = state =>
 
 export const isEditModeActive = state => state.currentActivityView === activityBarViews.edit;
 export const isCommitModeActive = state => state.currentActivityView === activityBarViews.commit;
+export const isReviewModeActive = state => state.currentActivityView === activityBarViews.review;
+
+export const someUncommitedChanges = state =>
+  !!(state.changedFiles.length || state.stagedFiles.length);
 
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};
diff --git a/app/assets/stylesheets/pages/repo.scss b/app/assets/stylesheets/pages/repo.scss
index ca34fbb0783..77bb0198614 100644
--- a/app/assets/stylesheets/pages/repo.scss
+++ b/app/assets/stylesheets/pages/repo.scss
@@ -443,6 +443,7 @@
   }
 
   .multi-file-commit-panel-inner {
+    position: relative;
     display: flex;
     flex-direction: column;
     height: 100%;
@@ -485,7 +486,6 @@
   margin-bottom: 0;
   border-bottom: 1px solid $white-dark;
   padding: $gl-btn-padding $gl-padding;
-  min-height: 56px;
 }
 
 .multi-file-commit-panel-header-title {
@@ -612,24 +612,14 @@
   .btn {
     font-size: $gl-font-size;
   }
+
+  .multi-file-commit-panel-success-message {
+    top: 0;
+  }
 }
 
 .multi-file-commit-panel-bottom {
   position: relative;
-
-  .multi-file-commit-panel-success-message {
-    position: absolute;
-    top: 1px;
-    left: 3px;
-    bottom: 0;
-    right: 0;
-    z-index: 10;
-    background: $gray-light;
-    overflow: auto;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-  }
 }
 
 .dirty-diff {
@@ -870,6 +860,7 @@
 .ide-activity-bar {
   position: relative;
   flex: 0 0 60px;
+  z-index: 1;
 }
 
 .ide-file-finder-overlay {
@@ -1032,3 +1023,17 @@
 .ide-new-modal-label {
   line-height: 34px;
 }
+
+.multi-file-commit-panel-success-message {
+  position: absolute;
+  top: 61px;
+  left: 1px;
+  bottom: 0;
+  right: 0;
+  z-index: 10;
+  background: $white-light;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}