Merge branch 'issue-edit-inline' into issue-edit-inline-description-template

app/assets/javascripts/issue_show/components/app.vue

@@ -8,6 +8,7 @@ import Store from '../stores';
 import titleComponent from './title.vue';
 import descriptionComponent from './description.vue';
 import formComponent from './form.vue';
+import '../../lib/utils/url_utility';
 
 export default {
   props: {
@@ -15,6 +16,10 @@ export default {
       required: true,
       type: String,
     },
+    canMove: {
+      required: true,
+      type: Boolean,
+    },
     canUpdate: {
       required: true,
       type: Boolean,
@@ -66,6 +71,10 @@ export default {
       type: String,
       required: true,
     },
+    projectsAutocompleteUrl: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     const store = new Store({
@@ -92,23 +101,27 @@ export default {
   },
   methods: {
     openForm() {
+      if (!this.showForm) {
         this.showForm = true;
         this.store.formState = {
           title: this.state.titleText,
           confidential: this.isConfidential,
           description: this.state.descriptionText,
+          move_to_project_id: 0,
         };
+      }
     },
     closeForm() {
       this.showForm = false;
     },
     updateIssuable() {
       this.service.updateIssuable(this.store.formState)
-        .then((res) => {
-          const data = res.json();
-
-          if (data.confidential !== this.isConfidential) {
-            location.reload();
+        .then(res => res.json())
+        .then((data) => {
+          if (location.pathname !== data.path) {
+            gl.utils.visitUrl(data.path);
+          } else if (data.confidential !== this.isConfidential) {
+            gl.utils.visitUrl(location.pathname);
           }
 
           eventHub.$emit('close.form');
@@ -177,12 +190,15 @@ export default {
     <form-component
       v-if="canUpdate && showForm"
       :form-state="formState"
+      :can-move="canMove"
       :can-destroy="canDestroy"
       :issuable-templates="issuableTemplates"
       :markdown-docs="markdownDocs"
       :markdown-preview-url="markdownPreviewUrl"
       :project-path="projectPath"
-      :project-namespace="projectNamespace" />
+      :project-namespace="projectNamespace"
+      :projects-autocomplete-url="projectsAutocompleteUrl"
+    />
     <div v-else>
       <title-component
         :issuable-ref="issuableRef"

app/assets/javascripts/issue_show/components/fields/description.vue

@@ -20,6 +20,9 @@
     components: {
       markdownField,
     },
+    mounted() {
+      this.$refs.textarea.focus();
+    },
   };
 </script>
 
@@ -39,7 +42,7 @@
         data-supports-slash-commands="false"
         aria-label="Description"
         v-model="formState.description"
-        ref="textatea"
+        ref="textarea"
         slot="textarea">
       </textarea>
     </markdown-field>

app/assets/javascripts/issue_show/components/fields/project_move.vue

+<script>
+  import tooltipMixin from '../../../vue_shared/mixins/tooltip';
+
+  export default {
+    mixins: [
+      tooltipMixin,
+    ],
+    props: {
+      formState: {
+        type: Object,
+        required: true,
+      },
+      projectsAutocompleteUrl: {
+        type: String,
+        required: true,
+      },
+    },
+    mounted() {
+      const $moveDropdown = $(this.$refs['move-dropdown']);
+
+      $moveDropdown.select2({
+        ajax: {
+          url: this.projectsAutocompleteUrl,
+          quietMillis: 125,
+          data(term, page, context) {
+            return {
+              search: term,
+              offset_id: context,
+            };
+          },
+          results(data) {
+            const more = data.length >= 50;
+            const context = data[data.length - 1] ? data[data.length - 1].id : null;
+
+            return {
+              results: data,
+              more,
+              context,
+            };
+          },
+        },
+        formatResult(project) {
+          return project.name_with_namespace;
+        },
+        formatSelection(project) {
+          return project.name_with_namespace;
+        },
+      })
+      .on('change', (e) => {
+        this.formState.move_to_project_id = parseInt(e.target.value, 10);
+      });
+    },
+    beforeDestroy() {
+      $(this.$refs['move-dropdown']).select2('destroy');
+    },
+  };
+</script>
+
+<template>
+  <fieldset>
+    <label
+      for="issuable-move"
+      class="sr-only">
+      Move
+    </label>
+    <div class="issuable-form-select-holder append-right-5">
+      <input
+        ref="move-dropdown"
+        type="hidden"
+        id="issuable-move"
+        data-placeholder="Move to a different project" />
+    </div>
+    <span
+      data-placement="auto top"
+      title="Moving an issue will copy the discussion to a different project and close it here. All participants will be notified of the new location."
+      ref="tooltip">
+      <i
+        class="fa fa-question-circle"
+        aria-hidden="true">
+      </i>
+    </span>
+  </fieldset>
+</template>

app/assets/javascripts/issue_show/components/form.vue

@@ -2,11 +2,19 @@
   import titleField from './fields/title.vue';
   import descriptionField from './fields/description.vue';
   import editActions from './edit_actions.vue';
+<<<<<<< HEAD
   import descriptionTemplate from './fields/description_template.vue';
+=======
+  import projectMove from './fields/project_move.vue';
+>>>>>>> issue-edit-inline
   import confidentialCheckbox from './fields/confidential_checkbox.vue';
 
   export default {
     props: {
+      canMove: {
+        type: Boolean,
+        required: true,
+      },
       canDestroy: {
         type: Boolean,
         required: true,
@@ -36,12 +44,17 @@
         type: String,
         required: true,
       },
+      projectsAutocompleteUrl: {
+        type: String,
+        required: true,
+      },
     },
     components: {
       titleField,
       descriptionField,
       descriptionTemplate,
       editActions,
+      projectMove,
       confidentialCheckbox,
     },
     computed: {
@@ -80,6 +93,10 @@
       :markdown-docs="markdownDocs" />
     <confidential-checkbox
       :form-state="formState" />
+    <project-move
+      v-if="canMove"
+      :form-state="formState"
+      :projects-autocomplete-url="projectsAutocompleteUrl" />
     <edit-actions
       :form-state="formState"
       :can-destroy="canDestroy" />

app/assets/javascripts/issue_show/index.js

@@ -25,16 +25,19 @@ document.addEventListener('DOMContentLoaded', () => {
       const {
         canUpdate,
         canDestroy,
+        canMove,
         endpoint,
         issuableRef,
         isConfidential,
         markdownPreviewUrl,
         markdownDocs,
+        projectsAutocompleteUrl,
       } = issuableElement.dataset;
 
       return {
         canUpdate: gl.utils.convertPermissionToBoolean(canUpdate),
         canDestroy: gl.utils.convertPermissionToBoolean(canDestroy),
+        canMove: gl.utils.convertPermissionToBoolean(canMove),
         endpoint,
         issuableRef,
         initialTitle: issuableTitleElement.innerHTML,
@@ -45,6 +48,7 @@ document.addEventListener('DOMContentLoaded', () => {
         markdownDocs,
         projectPath: initialData.project_path,
         projectNamespace: initialData.namespace_path,
+        projectsAutocompleteUrl,
       };
     },
     render(createElement) {
@@ -52,6 +56,7 @@ document.addEventListener('DOMContentLoaded', () => {
         props: {
           canUpdate: this.canUpdate,
           canDestroy: this.canDestroy,
+          canMove: this.canMove,
           endpoint: this.endpoint,
           issuableRef: this.issuableRef,
           initialTitle: this.initialTitle,
@@ -63,6 +68,7 @@ document.addEventListener('DOMContentLoaded', () => {
           markdownDocs: this.markdownDocs,
           projectPath: this.projectPath,
           projectNamespace: this.projectNamespace,
+          projectsAutocompleteUrl: this.projectsAutocompleteUrl,
         },
       });
     },

app/assets/javascripts/issue_show/services/index.js

@@ -7,7 +7,7 @@ export default class Service {
   constructor(endpoint) {
     this.endpoint = endpoint;
 
-    this.resource = Vue.resource(this.endpoint, {}, {
+    this.resource = Vue.resource(`${this.endpoint}.json`, {}, {
       realtimeChanges: {
         method: 'GET',
         url: `${this.endpoint}/realtime_changes`,

app/assets/javascripts/issue_show/stores/index.js

@@ -16,6 +16,7 @@ export default class Store {
       title: '',
       confidential: false,
       description: '',
+      move_to_project_id: 0,
     };
   }
 

app/controllers/projects/issues_controller.rb

@@ -148,10 +148,7 @@ class Projects::IssuesController < Projects::ApplicationController
 
       format.json do
         if @issue.valid?
-          render json: @issue.to_json(methods: [:task_status, :task_status_short],
-                                      include: { milestone: {},
-                                                 assignees: { only: [:id, :name, :username], methods: [:avatar_url] },
-                                                 labels: { methods: :text_color } })
+          render json: IssueSerializer.new.represent(@issue)
         else
           render json: { errors: @issue.errors.full_messages }, status: :unprocessable_entity
         end

app/serializers/issue_entity.rb

 class IssueEntity < IssuableEntity
+  include RequestAwareEntity
+
   expose :branch_name
   expose :confidential
   expose :assignees, using: API::Entities::UserBasic
@@ -7,4 +9,8 @@ class IssueEntity < IssuableEntity
   expose :project_id
   expose :milestone, using: API::Entities::Milestone
   expose :labels, using: LabelEntity
+
+  expose :path do |issue|
+    namespace_project_issue_path(issue.project.namespace, issue.project, issue)
+  end
 end

app/views/projects/issues/show.html.haml

@@ -55,10 +55,12 @@
     #js-issuable-app{ "data" => { "endpoint" => namespace_project_issue_path(@project.namespace, @project, @issue),
       "can-update" => can?(current_user, :update_issue, @issue).to_s,
       "can-destroy" => can?(current_user, :destroy_issue, @issue).to_s,
+      "can-move" => @issue.can_move?(current_user).to_s,
       "issuable-ref" => @issue.to_reference,
       "is-confidential" => @issue.confidential.to_s,
       "markdown-preview-url" => preview_markdown_path(@project),
       "markdown-docs" => help_page_path('user/markdown'),
+      "projects-autocomplete-url" => autocomplete_projects_path(project_id: @project.id),
     } }
       %h2.title= markdown_field(@issue, :title)
       - if @issue.description.present?

spec/javascripts/issue_show/components/app_spec.js

@@ -29,12 +29,15 @@ describe('Issuable output', () => {
       propsData: {
         canUpdate: true,
         canDestroy: true,
+        canMove: true,
         endpoint: '/gitlab-org/gitlab-shell/issues/9/realtime_changes',
         issuableRef: '#1',
         initialTitle: '',
         initialDescriptionHtml: '',
         initialDescriptionText: '',
-        showForm: false,
+        markdownPreviewUrl: '/',
+        markdownDocs: '/',
+        projectsAutocompleteUrl: '/',
         isConfidential: false,
       },
     }).$mount();
@@ -89,7 +92,47 @@ describe('Issuable output', () => {
     });
   });
 
+  it('does not update formState if form is already open', (done) => {
+    vm.openForm();
+
+    vm.state.titleText = 'testing 123';
+
+    vm.openForm();
+
+    Vue.nextTick(() => {
+      expect(
+        vm.store.formState.title,
+      ).not.toBe('testing 123');
+
+      done();
+    });
+  });
+
   describe('updateIssuable', () => {
+    it('reloads the page if the confidential status has changed', (done) => {
+      spyOn(gl.utils, 'visitUrl');
+      spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve) => {
+        resolve({
+          json() {
+            return {
+              confidential: true,
+              path: location.pathname,
+            };
+          },
+        });
+      }));
+
+      vm.updateIssuable();
+
+      setTimeout(() => {
+        expect(
+          gl.utils.visitUrl,
+        ).toHaveBeenCalledWith(location.pathname);
+
+        done();
+      });
+    });
+
     it('correctly updates issuable data', (done) => {
       spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve) => {
         resolve();
@@ -109,13 +152,38 @@ describe('Issuable output', () => {
       });
     });
 
-    it('reloads the page if the confidential status has changed', (done) => {
-      spyOn(window.location, 'reload');
+    it('does not redirect if issue has not moved', (done) => {
+      spyOn(gl.utils, 'visitUrl');
       spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve) => {
         resolve({
           json() {
             return {
-              confidential: true,
+              path: location.pathname,
+              confidential: vm.isConfidential,
+            };
+          },
+        });
+      }));
+
+      vm.updateIssuable();
+
+      setTimeout(() => {
+        expect(
+          gl.utils.visitUrl,
+        ).not.toHaveBeenCalled();
+
+        done();
+      });
+    });
+
+    it('redirects if issue is moved', (done) => {
+      spyOn(gl.utils, 'visitUrl');
+      spyOn(vm.service, 'updateIssuable').and.callFake(() => new Promise((resolve) => {
+        resolve({
+          json() {
+            return {
+              path: '/testing-issue-move',
+              confidential: vm.isConfidential,
             };
           },
         });
@@ -125,8 +193,8 @@ describe('Issuable output', () => {
 
       setTimeout(() => {
         expect(
-          window.location.reload,
-        ).toHaveBeenCalled();
+          gl.utils.visitUrl,
+        ).toHaveBeenCalledWith('/testing-issue-move');
 
         done();
       });

spec/javascripts/issue_show/components/fields/description_spec.js

+import Vue from 'vue';
+import Store from '~/issue_show/stores';
+import descriptionField from '~/issue_show/components/fields/description.vue';
+
+describe('Description field component', () => {
+  let vm;
+  let store;
+
+  beforeEach((done) => {
+    const Component = Vue.extend(descriptionField);
+    const el = document.createElement('div');
+    store = new Store({
+      titleHtml: '',
+      descriptionHtml: '',
+      issuableRef: '',
+    });
+    store.formState.description = 'test';
+
+    document.body.appendChild(el);
+
+    vm = new Component({
+      el,
+      propsData: {
+        markdownPreviewUrl: '/',
+        markdownDocs: '/',
+        formState: store.formState,
+      },
+    }).$mount();
+
+    Vue.nextTick(done);
+  });
+
+  it('renders markdown field with description', () => {
+    expect(
+      vm.$el.querySelector('.md-area textarea').value,
+    ).toBe('test');
+  });
+
+  it('renders markdown field with a markdown description', (done) => {
+    store.formState.description = '**test**';
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelector('.md-area textarea').value,
+      ).toBe('**test**');
+
+      done();
+    });
+  });
+
+  it('focuses field when mounted', () => {
+    expect(
+      document.activeElement,
+    ).toBe(vm.$refs.textarea);
+  });
+});

spec/javascripts/issue_show/components/fields/project_move_spec.js

+import Vue from 'vue';
+import projectMove from '~/issue_show/components/fields/project_move.vue';
+
+describe('Project move field component', () => {
+  let vm;
+  let formState;
+
+  beforeEach((done) => {
+    const Component = Vue.extend(projectMove);
+
+    formState = {
+      move_to_project_id: 0,
+    };
+
+    vm = new Component({
+      propsData: {
+        formState,
+        projectsAutocompleteUrl: '/autocomplete',
+      },
+    }).$mount();
+
+    Vue.nextTick(done);
+  });
+
+  it('mounts select2 element', () => {
+    expect(
+      vm.$el.querySelector('.select2-container'),
+    ).not.toBeNull();
+  });
+
+  it('updates formState on change', () => {
+    $(vm.$refs['move-dropdown']).val(2).trigger('change');
+
+    expect(
+      formState.move_to_project_id,
+    ).toBe(2);
+  });
+});

spec/javascripts/vue_shared/components/markdown/field_spec.js

+import Vue from 'vue';
+import fieldComponent from '~/vue_shared/components/markdown/field.vue';
+
+describe('Markdown field component', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = new Vue({
+      render(createElement) {
+        return createElement(
+          fieldComponent,
+          {
+            props: {
+              markdownPreviewUrl: '/preview',
+              markdownDocs: '/docs',
+            },
+          },
+          [
+            createElement('textarea', {
+              slot: 'textarea',
+            }),
+          ],
+        );
+      },
+    });
+  });
+
+  it('creates a new instance of GL form', (done) => {
+    spyOn(gl, 'GLForm');
+    vm.$mount();
+
+    Vue.nextTick(() => {
+      expect(
+        gl.GLForm,
+      ).toHaveBeenCalled();
+
+      done();
+    });
+  });
+
+  describe('mounted', () => {
+    beforeEach((done) => {
+      vm.$mount();
+
+      Vue.nextTick(done);
+    });
+
+    it('renders textarea inside backdrop', () => {
+      expect(
+        vm.$el.querySelector('.zen-backdrop textarea'),
+      ).not.toBeNull();
+    });
+
+    describe('markdown preview', () => {
+      let previewLink;
+
+      beforeEach(() => {
+        spyOn(Vue.http, 'post').and.callFake(() => new Promise((resolve) => {
+          resolve({
+            json() {
+              return {
+                body: '<p>markdown preview</p>',
+              };
+            },
+          });
+        }));
+
+        previewLink = vm.$el.querySelector('.nav-links li:nth-child(2) a');
+      });
+
+      it('sets preview link as active', (done) => {
+        previewLink.click();
+
+        Vue.nextTick(() => {
+          expect(
+            previewLink.parentNode.classList.contains('active'),
+          ).toBeTruthy();
+
+          done();
+        });
+      });
+
+      it('shows preview loading text', (done) => {
+        previewLink.click();
+
+        Vue.nextTick(() => {
+          expect(
+            vm.$el.querySelector('.md-preview').textContent.trim(),
+          ).toContain('Loading...');
+
+          done();
+        });
+      });
+
+      it('renders markdown preview', (done) => {
+        previewLink.click();
+
+        setTimeout(() => {
+          expect(
+            vm.$el.querySelector('.md-preview').innerHTML,
+          ).toContain('<p>markdown preview</p>');
+
+          done();
+        });
+      });
+
+      it('renders GFM with jQuery', (done) => {
+        spyOn($.fn, 'renderGFM');
+        previewLink.click();
+
+        setTimeout(() => {
+          expect(
+            $.fn.renderGFM,
+          ).toHaveBeenCalled();
+
+          done();
+        });
+      });
+    });
+  });
+});

spec/javascripts/vue_shared/components/markdown/header_spec.js

+import Vue from 'vue';
+import headerComponent from '~/vue_shared/components/markdown/header.vue';
+
+describe('Markdown field header component', () => {
+  let vm;
+
+  beforeEach((done) => {
+    const Component = Vue.extend(headerComponent);
+
+    vm = new Component({
+      propsData: {
+        previewMarkdown: false,
+      },
+    }).$mount();
+
+    Vue.nextTick(done);
+  });
+
+  it('renders markdown buttons', () => {
+    expect(
+      vm.$el.querySelectorAll('.js-md').length,
+    ).toBe(7);
+  });
+
+  it('renders `write` link as active when previewMarkdown is false', () => {
+    expect(
+      vm.$el.querySelector('li:nth-child(1)').classList.contains('active'),
+    ).toBeTruthy();
+  });
+
+  it('renders `preview` link as active when previewMarkdown is true', (done) => {
+    vm.previewMarkdown = true;
+
+    Vue.nextTick(() => {
+      expect(
+        vm.$el.querySelector('li:nth-child(2)').classList.contains('active'),
+      ).toBeTruthy();
+
+      done();
+    });
+  });
+
+  it('emits toggle markdown event when clicking preview', () => {
+    spyOn(vm, '$emit');
+
+    vm.$el.querySelector('li:nth-child(2) a').click();
+
+    expect(
+      vm.$emit,
+    ).toHaveBeenCalledWith('toggle-markdown');
+  });
+
+  it('blurs preview link after click', (done) => {
+    const link = vm.$el.querySelector('li:nth-child(2) a');
+    spyOn(HTMLElement.prototype, 'blur');
+
+    link.click();
+
+    setTimeout(() => {
+      expect(
+        link.blur,
+      ).toHaveBeenCalled();
+
+      done();
+    });
+  });
+});