disabled commit view when no changes are available

remove close button in tab
fix height not working in form
restored stage & unstage all changes
disable merge request radio button when staged & unstaged changes exist

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

@@ -8,7 +8,7 @@ export default {
     Icon,
   },
   computed: {
-    ...mapGetters(['currentProject']),
+    ...mapGetters(['currentProject', 'hasChanges']),
     ...mapState(['currentActivityView']),
     goBackUrl() {
       return document.referrer || this.currentProject.web_url;
@@ -51,7 +51,7 @@ export default {
           />
         </button>
       </li>
-      <li>
+      <li v-show="hasChanges">
         <button
           type="button"
           class="ide-sidebar-link js-ide-commit-mode"

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

 <script>
-import { mapState } from 'vuex';
+import { mapGetters, mapState } from 'vuex';
 import { sprintf, __ } from '~/locale';
 import * as consts from '../../stores/modules/commit/constants';
 import RadioGroup from './radio_group.vue';
@@ -9,7 +9,8 @@ export default {
     RadioGroup,
   },
   computed: {
-    ...mapState(['currentBranchId']),
+    ...mapState(['currentBranchId', 'changedFiles', 'stagedFiles']),
+    ...mapGetters(['hasChanges']),
     commitToCurrentBranchText() {
       return sprintf(
         __('Commit to %{branchName} branch'),
@@ -44,6 +45,7 @@ export default {
       :value="$options.commitToNewBranchMR"
       :label="__('Create a new branch and merge request')"
       :show-input="true"
+      :disabled="!!changedFiles.length && !!changedFiles.length"
     />
   </div>
 </template>

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

@@ -21,6 +21,7 @@ export default {
   computed: {
     ...mapState(['changedFiles', 'stagedFiles', 'currentActivityView']),
     ...mapState('commit', ['commitMessage', 'submitCommitLoading']),
+    ...mapGetters(['hasChanges']),
     ...mapGetters('commit', ['commitButtonDisabled', 'discardDraftButtonDisabled']),
     overviewText() {
       return sprintf(
@@ -69,6 +70,9 @@ export default {
         this.componentHeight = elHeight + 32;
       });
     },
+    afterEndTransition() {
+      this.componentHeight = null;
+    },
   },
   activityBarViews,
 };
@@ -82,13 +86,14 @@ export default {
       'is-full': !isCompact
     }"
     :style="{
-      height: `${componentHeight}px`
+      height: componentHeight ? `${componentHeight}px` : null,
     }"
   >
     <transition
       name="commit-form-slide-up"
       @before-enter="beforeEnterTransition"
       @enter="enterTransition"
+      @after-enter="afterEndTransition"
     >
       <div
         v-if="isCompact"
@@ -97,6 +102,7 @@ export default {
       >
         <button
           type="button"
+          :disabled="!hasChanges"
           class="btn btn-primary btn-sm btn-block"
           @click="toggleIsSmall"
         >

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

@@ -44,6 +44,11 @@ export default {
       default: false,
     },
   },
+  data() {
+    return {
+      showActionButton: false,
+    };
+  },
   computed: {
     titleText() {
       return sprintf(__('%{title} changes'), {
@@ -77,10 +82,21 @@ export default {
         />
         {{ titleText }}
         <span
+          v-show="!showActionButton"
+          @mouseenter="showActionButton = true"
           class="ide-commit-file-count"
         >
           {{ fileList.length }}
         </span>
+        <button
+          v-show="showActionButton"
+          @mouseleave="showActionButton = false"
+          type="button"
+          class="btn btn-blank btn-link ide-staged-action-btn"
+          @click="actionBtnClicked"
+        >
+          {{ actionBtnText }}
+        </button>
       </div>
     </header>
     <ul

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

 <script>
 import { mapActions, mapState, mapGetters } from 'vuex';
+import { __ } from '~/locale';
 import tooltip from '~/vue_shared/directives/tooltip';
 
 export default {
@@ -26,10 +27,20 @@ export default {
       required: false,
       default: false,
     },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   computed: {
     ...mapState('commit', ['commitAction']),
     ...mapGetters('commit', ['newBranchName']),
+    tooltipTitle() {
+      return this.disabled
+        ? __('This option is disabled while you still have unstaged changes')
+        : '';
+    },
   },
   methods: {
     ...mapActions('commit', ['updateCommitAction', 'updateBranchName']),
@@ -39,14 +50,17 @@ export default {
 
 <template>
   <fieldset>
-    <label>
+    <label
+      v-tooltip
+      :title="tooltipTitle"
+    >
       <input
         type="radio"
         name="commit-action"
         :value="value"
         @change="updateCommitAction($event.target.value)"
-        :checked="checked"
-        v-once
+        :checked="commitAction === value"
+        :disabled="disabled"
       />
       <span class="prepend-left-10">
         <template v-if="label">

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

 <script>
-import { mapGetters, mapState } from 'vuex';
+import { mapGetters, mapState, mapActions } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
 import SkeletonLoadingContainer from '~/vue_shared/components/skeleton_loading_container.vue';
 import RepoFile from './repo_file.vue';
@@ -14,7 +14,17 @@ export default {
   },
   computed: {
     ...mapState(['currentBranchId']),
-    ...mapGetters(['currentProject', 'currentTree']),
+    ...mapGetters(['currentProject', 'currentTree', 'activeFile']),
+  },
+  mounted() {
+    if (this.activeFile && this.activeFile.pending) {
+      this.$router.push(`/project${this.activeFile.url}`, () => {
+        this.updateViewer('editor');
+      });
+    }
+  },
+  methods: {
+    ...mapActions(['updateViewer']),
   },
 };
 </script>

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

 <script>
-import { mapState, mapActions } from 'vuex';
+import { mapState, mapActions, mapGetters } from 'vuex';
 import tooltip from '~/vue_shared/directives/tooltip';
 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 { activityBarViews } from '../constants';
 
 export default {
   components: {
@@ -19,15 +20,19 @@ export default {
   },
   computed: {
     ...mapState(['changedFiles', 'stagedFiles']),
+    ...mapGetters(['lastOpenedFile', 'hasChanges']),
+  },
+  watch: {
+    hasChanges() {
+      if (!this.hasChanges) {
+        this.updateActivityBarView(activityBarViews.edit);
+      }
+    },
   },
   mounted() {
-    const lastOpenedFile = [...this.changedFiles, ...this.stagedFiles].sort(
-      (a, b) => b.lastOpenedAt - a.lastOpenedAt,
-    )[0];
-
-    if (lastOpenedFile) {
+    if (this.lastOpenedFile) {
       this.openPendingTab({
-        file: lastOpenedFile,
+        file: this.lastOpenedFile,
       })
         .then(changeViewer => {
           if (changeViewer) {
@@ -40,7 +45,7 @@ export default {
     }
   },
   methods: {
-    ...mapActions(['openPendingTab', 'updateViewer']),
+    ...mapActions(['openPendingTab', 'updateViewer', 'updateActivityBarView']),
     ...mapActions('commit', ['commitChanges', 'updateCommitAction']),
     forceCreateNewBranch() {
       return this.updateCommitAction(consts.COMMIT_TO_NEW_BRANCH).then(() => this.commitChanges());

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

@@ -32,6 +32,8 @@ export default {
       return `Close ${this.tab.name}`;
     },
     showChangedIcon() {
+      if (this.tab.pending) return true;
+
       return this.fileHasChanged ? !this.tabMouseOver : false;
     },
     fileHasChanged() {
@@ -91,6 +93,7 @@ export default {
       class="multi-file-tab-close"
       @click.stop.prevent="closeFile(tab)"
       :aria-label="closeLabel"
+      :disabled="tab.pending"
     >
       <icon
         v-if="!showChangedIcon"

app/assets/javascripts/ide/stores/actions/file.js

@@ -193,10 +193,6 @@ export const unstageChange = ({ commit }, path) => {
 };
 
 export const openPendingTab = ({ commit, getters, dispatch, state }, { file, keyPrefix }) => {
-  if (getters.activeFile && getters.activeFile.path === file.path && state.viewer === 'diff') {
-    return false;
-  }
-
   commit(types.ADD_PENDING_TAB, { file, keyPrefix });
 
   dispatch('scrollToTab');

app/assets/javascripts/ide/stores/getters.js

@@ -52,5 +52,8 @@ export const allBlobs = state =>
 
 export const getStagedFile = state => path => state.stagedFiles.find(f => f.path === path);
 
+export const lastOpenedFile = state =>
+  [...state.changedFiles, ...state.stagedFiles].sort((a, b) => b.lastOpenedAt - a.lastOpenedAt)[0];
+
 // prevent babel-plugin-rewire from generating an invalid default during karma tests
 export default () => {};

app/assets/javascripts/ide/stores/modules/commit/actions.js

@@ -8,6 +8,7 @@ import router from '../../../ide_router';
 import service from '../../../services';
 import * as types from './mutation_types';
 import * as consts from './constants';
+import { activityBarViews } from '../../../constants';
 import eventHub from '../../../eventhub';
 
 export const updateCommitMessage = ({ commit }, message) => {
@@ -75,7 +76,7 @@ export const checkCommitStatus = ({ rootState }) =>
 
 export const updateFilesAfterCommit = (
   { commit, dispatch, state, rootState, rootGetters },
-  { data, branch },
+  { data },
 ) => {
   const selectedProject = rootState.projects[rootState.currentProjectId];
   const lastCommit = {
@@ -126,15 +127,9 @@ export const updateFilesAfterCommit = (
       changed: !!changedFile,
     });
   });
-
-  if (state.commitAction === consts.COMMIT_TO_NEW_BRANCH && rootGetters.activeFile) {
-    router.push(
-      `/project/${rootState.currentProjectId}/blob/${branch}/${rootGetters.activeFile.path}`,
-    );
-  }
 };
 
-export const commitChanges = ({ commit, state, getters, dispatch, rootState }) => {
+export const commitChanges = ({ commit, state, getters, dispatch, rootState, rootGetters }) => {
   const newBranch = state.commitAction !== consts.COMMIT_TO_CURRENT_BRANCH;
   const payload = createCommitPayload(getters.branchName, newBranch, state, rootState);
   const getCommitStatus = newBranch ? Promise.resolve(false) : dispatch('checkCommitStatus');
@@ -183,6 +178,34 @@ export const commitChanges = ({ commit, state, getters, dispatch, rootState }) =
 
           commit(rootTypes.CLEAR_STAGED_CHANGES, null, { root: true });
         })
+        .then(() => {
+          if (rootGetters.lastOpenedFile) {
+            dispatch(
+              'openPendingTab',
+              {
+                file: rootGetters.lastOpenedFile,
+              },
+              { root: true },
+            )
+              .then(changeViewer => {
+                if (changeViewer) {
+                  dispatch('updateViewer', 'diff', { root: true });
+                }
+              })
+              .catch(e => {
+                throw e;
+              });
+          } else {
+            dispatch('updateActivityBarView', activityBarViews.edit, { root: true });
+            dispatch('updateViewer', 'editor', { root: true });
+
+            router.push(
+              `/project/${rootState.currentProjectId}/blob/${getters.branchName}/${
+                rootGetters.activeFile.path
+              }`,
+            );
+          }
+        })
         .then(() => dispatch('updateCommitAction', consts.COMMIT_TO_CURRENT_BRANCH));
     })
     .catch(err => {

app/assets/stylesheets/pages/repo.scss

@@ -210,11 +210,11 @@
     right: 3px;
   }
 
-  &:hover {
+  &:not([disabled]):hover {
     background-color: $theme-gray-200;
   }
 
-  &:focus {
+  &:not([disabled]):focus {
     background-color: $blue-500;
     color: $white-light;
     outline: 0;
@@ -500,6 +500,7 @@
 .multi-file-commit-panel-header-title {
   display: flex;
   flex: 1;
+  align-items: center;
 
   svg {
     margin-right: $gl-btn-padding;
@@ -779,6 +780,11 @@
   }
 }
 
+.ide-staged-action-btn {
+  margin-left: auto;
+  line-height: 22px;
+}
+
 .ide-commit-file-count {
   min-width: 22px;
   margin-left: auto;