Merge branch '4573-multi-file-editor-commit-panel-empty-state' into 'master'

Resolve "Multi-file editor commit panel empty state"

Closes #4573

See merge request gitlab-org/gitlab-ee!4169

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

@@ -26,6 +26,9 @@
         'currentBranchId',
         'rightPanelCollapsed',
       ]),
+      isCommitInfoShown() {
+        return this.rightPanelCollapsed || this.fileList.length;
+      },
     },
     methods: {
       toggleCollapsed() {
@@ -36,7 +39,11 @@
 </script>
 
 <template>
-  <div class="multi-file-commit-list">
+  <div
+    :class="{
+      'multi-file-commit-list': isCommitInfoShown
+    }"
+  >
     <list-collapsed
       v-if="rightPanelCollapsed"
     />
@@ -54,12 +61,6 @@
           />
         </li>
       </ul>
-      <div
-        v-else
-        class="help-block prepend-top-0"
-      >
-        No changes
-      </div>
     </template>
   </div>
 </template>

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

@@ -23,6 +23,14 @@
         type: String,
         required: true,
       },
+      noChangesStateSvgPath: {
+        type: String,
+        required: true,
+      },
+      committedStateSvgPath: {
+        type: String,
+        required: true,
+      },
     },
     computed: {
       ...mapState([
@@ -94,6 +102,9 @@
         </div>
       </template>
     </div>
-    <ide-contextbar/>
+    <ide-contextbar
+      :no-changes-state-svg-path="noChangesStateSvgPath"
+      :committed-state-svg-path="committedStateSvgPath"
+    />
   </div>
 </template>

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

@@ -10,6 +10,16 @@
       icon,
       panelResizer,
     },
+    props: {
+      noChangesStateSvgPath: {
+        type: String,
+        required: true,
+      },
+      committedStateSvgPath: {
+        type: String,
+        required: true,
+      },
+    },
     data() {
       return {
         width: 290,
@@ -46,6 +56,11 @@
           collapsed: !this.rightPanelCollapsed,
         });
       },
+      toggleFullbarCollapsed() {
+        if (this.rightPanelCollapsed) {
+          this.toggleCollapsed();
+        }
+      },
       resizingStarted() {
         this.setResizingStatus(true);
       },
@@ -63,8 +78,11 @@
       'is-collapsed': rightPanelCollapsed,
     }"
     :style="panelStyle"
+    @click="toggleFullbarCollapsed"
   >
-    <div class="multi-file-commit-panel-section">
+    <div
+      class="multi-file-commit-panel-section"
+    >
       <header
         class="multi-file-commit-panel-header"
         :class="{
@@ -75,16 +93,20 @@
           class="multi-file-commit-panel-header-title"
           v-if="!rightPanelCollapsed"
         >
-          <icon
-            name="list-bulleted"
-            :size="18"
-          />
-          Staged
+          <div
+            v-if="changedFiles.length"
+          >
+            <icon
+              name="list-bulleted"
+              :size="18"
+            />
+            Staged
+          </div>
         </div>
         <button
           type="button"
           class="btn btn-transparent multi-file-commit-panel-collapse-btn"
-          @click="toggleCollapsed"
+          @click.stop="toggleCollapsed"
         >
           <icon
             :name="currentIcon"
@@ -92,7 +114,10 @@
           />
         </button>
       </header>
-      <repo-commit-section />
+      <repo-commit-section
+        :no-changes-state-svg-path="noChangesStateSvgPath"
+        :committed-state-svg-path="committedStateSvgPath"
+      />
     </div>
     <panel-resizer
       :size.sync="width"

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

@@ -14,6 +14,16 @@ export default {
   directives: {
     tooltip,
   },
+  props: {
+    noChangesStateSvgPath: {
+      type: String,
+      required: true,
+    },
+    committedStateSvgPath: {
+      type: String,
+      required: true,
+    },
+  },
   data() {
     return {
       showNewBranchModal: false,
@@ -27,6 +37,7 @@ export default {
       'currentProjectId',
       'currentBranchId',
       'rightPanelCollapsed',
+      'lastCommitMsg',
     ]),
     ...mapGetters([
       'changedFiles',
@@ -37,6 +48,9 @@ export default {
     commitMessageCount() {
       return this.commitMessage.length;
     },
+    statusSvg() {
+      return this.lastCommitMsg ? this.committedStateSvgPath : this.noChangesStateSvgPath;
+    },
   },
   methods: {
     ...mapActions([
@@ -101,7 +115,12 @@ export default {
 </script>
 
 <template>
-  <div class="multi-file-commit-panel-section">
+  <div
+    class="multi-file-commit-panel-section"
+    :class="{
+      'multi-file-commit-empty-state-container': !changedFiles.length
+    }"
+  >
     <modal
       v-if="showNewBranchModal"
       :primary-button-label="__('Create new branch')"
@@ -118,54 +137,92 @@ you started editing. Would you like to create a new branch?`)"
       :collapsed="rightPanelCollapsed"
       @toggleCollapsed="toggleCollapsed"
     />
-    <form
-      class="form-horizontal multi-file-commit-form"
-      @submit.prevent="tryCommit"
-      v-if="!rightPanelCollapsed"
+    <template
+      v-if="changedFiles.length"
     >
-      <div class="multi-file-commit-fieldset">
-        <textarea
-          class="form-control multi-file-commit-message"
-          name="commit-message"
-          v-model="commitMessage"
-          placeholder="Commit message"
-        >
-        </textarea>
+      <form
+        class="form-horizontal multi-file-commit-form"
+        @submit.prevent="tryCommit"
+        v-if="!rightPanelCollapsed"
+      >
+        <div class="multi-file-commit-fieldset">
+          <textarea
+            class="form-control multi-file-commit-message"
+            name="commit-message"
+            v-model="commitMessage"
+            placeholder="Commit message"
+          >
+          </textarea>
+        </div>
+        <div class="multi-file-commit-fieldset">
+          <label
+            v-tooltip
+            title="Create a new merge request with these changes"
+            data-container="body"
+            data-placement="top"
+          >
+            <input
+              type="checkbox"
+              v-model="startNewMR"
+            />
+            {{ __('Merge Request') }}
+          </label>
+          <button
+            type="submit"
+            :disabled="commitButtonDisabled"
+            class="btn btn-default btn-sm append-right-10 prepend-left-10"
+            :class="{ disabled: submitCommitsLoading }"
+          >
+            <i
+              v-if="submitCommitsLoading"
+              class="js-commit-loading-icon fa fa-spinner fa-spin"
+              aria-hidden="true"
+              aria-label="loading"
+            >
+            </i>
+            {{ __('Commit') }}
+          </button>
+          <div
+            class="multi-file-commit-message-count"
+          >
+            {{ commitMessageCount }}
+          </div>
+        </div>
+      </form>
+    </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="multi-file-commit-fieldset">
-        <label
-          v-tooltip
-          title="Create a new merge request with these changes"
-          data-container="body"
-          data-placement="top"
-        >
-          <input
-            type="checkbox"
-            v-model="startNewMR"
-          />
-          Merge Request
-        </label>
-        <button
-          type="submit"
-          :disabled="commitButtonDisabled"
-          class="btn btn-default btn-sm append-right-10 prepend-left-10"
-          :class="{ disabled: submitCommitsLoading }"
+      <div class="col-xs-10 col-xs-offset-1">
+        <div
+          class="text-content text-center"
+          v-if="!lastCommitMsg"
         >
-          <i
-            v-if="submitCommitsLoading"
-            class="js-commit-loading-icon fa fa-spinner fa-spin"
-            aria-hidden="true"
-            aria-label="loading"
-          >
-          </i>
-          Commit
-        </button>
+          <h4>
+            {{ __('No changes') }}
+          </h4>
+          <p>
+            {{ __('Edit files in the editor and commit changes here') }}
+          </p>
+        </div>
         <div
-          class="multi-file-commit-message-count"
+          class="text-content text-center"
+          v-else
         >
-          {{ commitMessageCount }}
+          <h4>
+            {{ __('All changes are committed') }}
+          </h4>
+          <p>
+            {{ lastCommitMsg }}
+          </p>
         </div>
       </div>
-    </form>
+    </div>
   </div>
 </template>

app/assets/javascripts/ide/index.js

@@ -18,6 +18,8 @@ function initIde(el) {
       return createElement('ide', {
         props: {
           emptyStateSvgPath: el.dataset.emptyStateSvgPath,
+          noChangesStateSvgPath: el.dataset.noChangesStateSvgPath,
+          committedStateSvgPath: el.dataset.committedStateSvgPath,
         },
       });
     },

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

@@ -110,15 +110,7 @@ export const commitChanges = (
       if (data.stats) {
         commitMsg += ` with ${data.stats.additions} additions, ${data.stats.deletions} deletions.`;
       }
-
-      flash(
-        commitMsg,
-        'notice',
-        document,
-        null,
-        false,
-        true);
-      window.dispatchEvent(new Event('resize'));
+      commit(types.SET_LAST_COMMIT_MSG, commitMsg);
 
       if (newMr) {
         dispatch('discardAllChanges');

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

@@ -3,6 +3,7 @@ export const TOGGLE_LOADING = 'TOGGLE_LOADING';
 export const SET_PARENT_TREE_URL = 'SET_PARENT_TREE_URL';
 export const SET_ROOT = 'SET_ROOT';
 export const SET_LAST_COMMIT_DATA = 'SET_LAST_COMMIT_DATA';
+export const SET_LAST_COMMIT_MSG = 'SET_LAST_COMMIT_MSG';
 export const SET_LEFT_PANEL_COLLAPSED = 'SET_LEFT_PANEL_COLLAPSED';
 export const SET_RIGHT_PANEL_COLLAPSED = 'SET_RIGHT_PANEL_COLLAPSED';
 export const SET_RESIZING_STATUS = 'SET_RESIZING_STATUS';

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

@@ -63,6 +63,11 @@ export default {
       updatedAt: lastCommit.commit.authored_date,
     });
   },
+  [types.SET_LAST_COMMIT_MSG](state, lastCommitMsg) {
+    Object.assign(state, {
+      lastCommitMsg,
+    });
+  },
   ...projectMutations,
   ...fileMutations,
   ...treeMutations,

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

@@ -8,6 +8,7 @@ export default () => ({
   endpoints: {},
   isRoot: false,
   isInitialRoot: false,
+  lastCommitMsg: '',
   lastCommitPath: '',
   loading: false,
   onTopOfBranch: false,
@@ -18,6 +19,6 @@ export default () => ({
   trees: {},
   projects: {},
   leftPanelCollapsed: false,
-  rightPanelCollapsed: true,
+  rightPanelCollapsed: false,
   panelResizing: false,
 });

app/assets/stylesheets/framework/images.scss

@@ -20,7 +20,7 @@
     width: 100%;
   }
 
-  $image-widths: 250 306 394 430;
+  $image-widths: 80 250 306 394 430;
   @each $width in $image-widths {
     &.svg-#{$width} {
       img,

app/assets/stylesheets/pages/repo.scss

@@ -355,6 +355,11 @@ table.table tr td.multi-file-table-name {
   flex: 1;
 }
 
+.multi-file-commit-empty-state-container {
+  align-items: center;
+  justify-content: center;
+}
+
 .multi-file-commit-panel-header {
   display: flex;
   align-items: center;
@@ -381,7 +386,7 @@ table.table tr td.multi-file-table-name {
 .multi-file-commit-panel-header-title {
   display: flex;
   flex: 1;
-  padding: $gl-btn-padding;
+  padding: 0 $gl-btn-padding;
 
   svg {
     margin-right: $gl-btn-padding;

app/views/ide/index.html.haml

@@ -5,7 +5,9 @@
   = webpack_bundle_tag 'common_vue'
   = webpack_bundle_tag 'ide', force_same_domain: true
 
-#ide.ide-loading{ data: {"empty-state-svg-path" => image_path('illustrations/multi_file_editor_empty.svg')} }
+#ide.ide-loading{ data: {"empty-state-svg-path" => image_path('illustrations/multi_file_editor_empty.svg'),
+  "no-changes-state-svg-path" => image_path('illustrations/multi-editor_no_changes_empty.svg'),
+  "committed-state-svg-path" => image_path('illustrations/multi-editor_all_changes_committed_empty.svg') } }
   .text-center
     = icon('spinner spin 2x')
     %h2.clgray= _('Loading the GitLab IDE...')

spec/features/projects/tree/create_directory_spec.rb

@@ -48,8 +48,6 @@ feature 'Multi-file editor new directory', :js do
 
     wait_for_requests
 
-    find('.multi-file-commit-panel-collapse-btn').click
-
     fill_in('commit-message', with: 'commit message ide')
 
     click_button('Commit')

spec/features/projects/tree/create_file_spec.rb

@@ -38,8 +38,6 @@ feature 'Multi-file editor new file', :js do
 
     wait_for_requests
 
-    find('.multi-file-commit-panel-collapse-btn').click
-
     fill_in('commit-message', with: 'commit message ide')
 
     click_button('Commit')

spec/javascripts/repo/components/commit_sidebar/list_spec.js

@@ -24,12 +24,6 @@ describe('Multi-file editor commit sidebar list', () => {
     vm.$destroy();
   });
 
-  describe('empty file list', () => {
-    it('renders no changes text', () => {
-      expect(vm.$el.querySelector('.help-block').textContent.trim()).toBe('No changes');
-    });
-  });
-
   describe('with a list of files', () => {
     beforeEach((done) => {
       const f = file('file name');

spec/javascripts/repo/components/ide_context_bar_spec.js

@@ -9,7 +9,10 @@ describe('Multi-file editor right context bar', () => {
   beforeEach(() => {
     const Component = Vue.extend(ideContextBar);
 
-    vm = createComponentWithStore(Component, store);
+    vm = createComponentWithStore(Component, store, {
+      noChangesStateSvgPath: 'svg',
+      committedStateSvgPath: 'svg',
+    });
 
     vm.$store.state.rightPanelCollapsed = false;
 
@@ -34,6 +37,17 @@ describe('Multi-file editor right context bar', () => {
     it('shows correct icon', () => {
       expect(vm.currentIcon).toBe('angle-double-left');
     });
+
+    it('clicking sidebar collapses the bar', () => {
+      spyOn(vm, 'setPanelCollapsedStatus').and.returnValue(Promise.resolve());
+
+      vm.$el.querySelector('.multi-file-commit-panel-section').click();
+
+      expect(vm.setPanelCollapsedStatus).toHaveBeenCalledWith({
+        side: 'right',
+        collapsed: false,
+      });
+    });
   });
 
   it('clicking toggle collapse button collapses the bar', () => {
@@ -46,4 +60,15 @@ describe('Multi-file editor right context bar', () => {
       collapsed: true,
     });
   });
+
+  it('when expanded clicking the main sidebar is not collapsing the bar', () => {
+    spyOn(vm, 'setPanelCollapsedStatus').and.returnValue(Promise.resolve());
+
+    vm.$el.querySelector('.multi-file-commit-panel-section').click();
+
+    expect(vm.setPanelCollapsedStatus).not.toHaveBeenCalledWith({
+      side: 'right',
+      collapsed: false,
+    });
+  });
 });

spec/javascripts/repo/components/ide_spec.js

@@ -12,6 +12,8 @@ describe('ide component', () => {
 
     vm = createComponentWithStore(Component, store, {
       emptyStateSvgPath: 'svg',
+      noChangesStateSvgPath: 'svg',
+      committedStateSvgPath: 'svg',
     }).$mount();
   });
 

spec/javascripts/repo/components/repo_commit_section_spec.js

@@ -4,21 +4,23 @@ import store from '~/ide/stores';
 import service from '~/ide/services';
 import repoCommitSection from '~/ide/components/repo_commit_section.vue';
 import getSetTimeoutPromise from '../../helpers/set_timeout_promise_helper';
+import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
 import { file, resetStore } from '../helpers';
 
 describe('RepoCommitSection', () => {
   let vm;
 
   function createComponent() {
-    const RepoCommitSection = Vue.extend(repoCommitSection);
+    const Component = Vue.extend(repoCommitSection);
 
-    const comp = new RepoCommitSection({
-      store,
-    }).$mount();
+    vm = createComponentWithStore(Component, store, {
+      noChangesStateSvgPath: 'svg',
+      committedStateSvgPath: 'commitsvg',
+    });
 
-    comp.$store.state.currentProjectId = 'abcproject';
-    comp.$store.state.currentBranchId = 'master';
-    comp.$store.state.projects.abcproject = {
+    vm.$store.state.currentProjectId = 'abcproject';
+    vm.$store.state.currentBranchId = 'master';
+    vm.$store.state.projects.abcproject = {
       web_url: '',
       branches: {
         master: {
@@ -27,15 +29,15 @@ describe('RepoCommitSection', () => {
       },
     };
 
-    comp.$store.state.rightPanelCollapsed = false;
-    comp.$store.state.currentBranch = 'master';
-    comp.$store.state.openFiles = [file('file1'), file('file2')];
-    comp.$store.state.openFiles.forEach(f => Object.assign(f, {
+    vm.$store.state.rightPanelCollapsed = false;
+    vm.$store.state.currentBranch = 'master';
+    vm.$store.state.openFiles = [file('file1'), file('file2')];
+    vm.$store.state.openFiles.forEach(f => Object.assign(f, {
       changed: true,
       content: 'testing',
     }));
 
-    return comp.$mount();
+    return vm.$mount();
   }
 
   beforeEach((done) => {
@@ -64,6 +66,23 @@ describe('RepoCommitSection', () => {
     resetStore(vm.$store);
   });
 
+  describe('empty Stage', () => {
+    it('renders no changes text', () => {
+      resetStore(vm.$store);
+      const Component = Vue.extend(repoCommitSection);
+
+      vm = createComponentWithStore(Component, store, {
+        noChangesStateSvgPath: 'nochangessvg',
+        committedStateSvgPath: 'svg',
+      }).$mount();
+
+      // Vue.nextTick();
+
+      expect(vm.$el.querySelector('.js-empty-state').textContent.trim()).toContain('No changes');
+      expect(vm.$el.querySelector('.js-empty-state img').getAttribute('src')).toBe('nochangessvg');
+    });
+  });
+
   it('renders a commit section', () => {
     const changedFileElements = [...vm.$el.querySelectorAll('.multi-file-commit-list li')];
     const submitCommit = vm.$el.querySelector('form .btn');
@@ -115,6 +134,9 @@ describe('RepoCommitSection', () => {
           expect(actions[1].content).toEqual(changedFiles[1].content);
           expect(actions[0].file_path).toEqual(changedFiles[0].path);
           expect(actions[1].file_path).toEqual(changedFiles[1].path);
+
+          expect(vm.$el.querySelector('.js-empty-state').textContent.trim()).toContain('All changes are committed');
+          expect(vm.$el.querySelector('.js-empty-state img').getAttribute('src')).toBe('commitsvg');
         })
         .then(done)
         .catch(done.fail);

spec/javascripts/repo/stores/actions_spec.js

@@ -270,13 +270,10 @@ describe('Multi-file store actions', () => {
           }).catch(done.fail);
       });
 
-      it('shows flash notice', (done) => {
+      it('sets last Commit Msg', (done) => {
         store.dispatch('commitChanges', { payload, newMr: false })
           .then(() => {
-            const alert = document.querySelector('.flash-container');
-
-            expect(alert.querySelector('.flash-notice')).not.toBeNull();
-            expect(alert.textContent.trim()).toBe(
+            expect(store.state.lastCommitMsg).toBe(
               'Your changes have been committed. Commit 123 with 1 additions, 2 deletions.',
             );