Added Create Task functionality

CreateWorkItem component is modified to work with both standalone route and a modal

app/assets/javascripts/issues/show/components/description.vue

 <script>
-import { GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
+import {
+  GlSafeHtmlDirective as SafeHtml,
+  GlModal,
+  GlModalDirective,
+  GlPopover,
+  GlButton,
+} from '@gitlab/ui';
 import $ from 'jquery';
 import createFlash from '~/flash';
 import { __, sprintf } from '~/locale';
 import TaskList from '~/task_list';
+import glFeatureFlagMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
+import CreateWorkItem from '~/work_items/pages/create_work_item.vue';
 import animateMixin from '../mixins/animate';
 
 export default {
   directives: {
     SafeHtml,
+    GlModal: GlModalDirective,
   },
-
-  mixins: [animateMixin],
-
+  components: {
+    GlModal,
+    GlPopover,
+    CreateWorkItem,
+    GlButton,
+  },
+  mixins: [animateMixin, glFeatureFlagMixin()],
   props: {
     canUpdate: {
       type: Boolean,
@@ -53,8 +66,15 @@ export default {
       preAnimation: false,
       pulseAnimation: false,
       initialUpdate: true,
+      taskButtons: [],
+      activeTask: {},
     };
   },
+  computed: {
+    workItemsEnabled() {
+      return this.glFeatures.workItems;
+    },
+  },
   watch: {
     descriptionHtml(newDescription, oldDescription) {
       if (!this.initialUpdate && newDescription !== oldDescription) {
@@ -74,6 +94,10 @@ export default {
   mounted() {
     this.renderGFM();
     this.updateTaskStatusText();
+
+    if (this.workItemsEnabled) {
+      this.renderTaskActions();
+    }
   },
   methods: {
     renderGFM() {
@@ -132,6 +156,55 @@ export default {
         $tasksShort.text('');
       }
     },
+    renderTaskActions() {
+      const taskListFields = this.$el.querySelectorAll('.task-list-item');
+      taskListFields.forEach((item, index) => {
+        const button = document.createElement('button');
+        button.classList.add(
+          'btn',
+          'btn-default',
+          'btn-md',
+          'gl-button',
+          'btn-default-tertiary',
+          'gl-left-0',
+          'gl-p-0!',
+          'gl-top-2',
+          'gl-absolute',
+          'js-add-task',
+        );
+        button.id = `js-task-button-${index}`;
+        this.taskButtons.push(button.id);
+        button.innerHTML =
+          '<svg data-testid="ellipsis_v-icon" role="img" aria-hidden="true" class="dropdown-icon gl-icon s14"><use href="/assets/icons-7f1680a3670112fe4c8ef57b9dfb93f0f61b43a2a479d7abd6c83bcb724b9201.svg#ellipsis_v"></use></svg>';
+        item.prepend(button);
+      });
+    },
+    openCreateTaskModal(id) {
+      this.activeTask = { id, title: this.$el.querySelector(`#${id}`).parentElement.innerText };
+      this.$refs.modal.show();
+    },
+    closeCreateTaskModal() {
+      this.$refs.modal.hide();
+    },
+    handleCreateTask(title) {
+      const listItem = this.$el.querySelector(`#${this.activeTask.id}`).parentElement;
+      const taskBadge = document.createElement('span');
+      taskBadge.innerHTML = `
+        <svg data-testid="issue-open-m-icon" role="img" aria-hidden="true" class="gl-icon gl-fill-green-500 s12">
+          <use href="/assets/icons-7f1680a3670112fe4c8ef57b9dfb93f0f61b43a2a479d7abd6c83bcb724b9201.svg#issue-open-m"></use>
+        </svg>
+        <span class="badge badge-info badge-pill gl-badge sm gl-mr-1">
+          ${__('Task')}
+        </span>
+        <a href="#">${title}</a>
+      `;
+      listItem.insertBefore(taskBadge, listItem.lastChild);
+      listItem.removeChild(listItem.lastChild);
+      this.closeCreateTaskModal();
+    },
+    focusButton() {
+      this.$refs.convertButton[0].$el.focus();
+    },
   },
   safeHtmlConfig: { ADD_TAGS: ['gl-emoji', 'copy-code'] },
 };
@@ -142,12 +215,14 @@ export default {
     v-if="descriptionHtml"
     :class="{
       'js-task-list-container': canUpdate,
+      'work-items-enabled': workItemsEnabled,
     }"
     class="description"
   >
     <div
       ref="gfm-content"
       v-safe-html:[$options.safeHtmlConfig]="descriptionHtml"
+      data-testid="gfm-content"
       :class="{
         'issue-realtime-pre-pulse': preAnimation,
         'issue-realtime-trigger-pulse': pulseAnimation,
@@ -157,13 +232,46 @@ export default {
     <!-- eslint-disable vue/no-mutating-props -->
     <textarea
       v-if="descriptionText"
-      ref="textarea"
       v-model="descriptionText"
       :data-update-url="updateUrl"
       class="hidden js-task-list-field"
       dir="auto"
+      data-testid="textarea"
     >
     </textarea>
     <!-- eslint-enable vue/no-mutating-props -->
+    <gl-modal
+      ref="modal"
+      modal-id="create-task-modal"
+      :title="s__('WorkItem|New Task')"
+      hide-footer
+      body-class="gl-py-0!"
+    >
+      <create-work-item
+        :is-modal="true"
+        :initial-title="activeTask.title"
+        @closeModal="closeCreateTaskModal"
+        @onCreate="handleCreateTask"
+      />
+    </gl-modal>
+    <template v-if="workItemsEnabled">
+      <gl-popover
+        v-for="item in taskButtons"
+        :key="item"
+        :target="item"
+        placement="top"
+        triggers="focus"
+        @shown="focusButton"
+      >
+        <gl-button
+          ref="convertButton"
+          variant="link"
+          data-testid="convert-to-task"
+          class="gl-text-gray-900! gl-text-decoration-none! gl-outline-0!"
+          @click="openCreateTaskModal(item)"
+          >{{ s__('WorkItem|Convert to work item') }}</gl-button
+        >
+      </gl-popover>
+    </template>
   </div>
 </template>

app/assets/javascripts/sidebar/graphql.js

@@ -2,6 +2,7 @@ import { IntrospectionFragmentMatcher } from 'apollo-cache-inmemory';
 import produce from 'immer';
 import VueApollo from 'vue-apollo';
 import getIssueStateQuery from '~/issues/show/queries/get_issue_state.query.graphql';
+import { resolvers as workItemResolvers } from '~/work_items/graphql/resolvers';
 import createDefaultClient from '~/lib/graphql';
 import introspectionQueryResultData from './fragmentTypes.json';
 
@@ -10,6 +11,7 @@ const fragmentMatcher = new IntrospectionFragmentMatcher({
 });
 
 const resolvers = {
+  ...workItemResolvers,
   Mutation: {
     updateIssueState: (_, { issueType = undefined, isDirty = false }, { cache }) => {
       const sourceData = cache.readQuery({ query: getIssueStateQuery });
@@ -18,6 +20,7 @@ const resolvers = {
       });
       cache.writeQuery({ query: getIssueStateQuery, data });
     },
+    ...workItemResolvers.Mutation,
   },
 };
 

app/assets/javascripts/work_items/pages/create_work_item.vue

@@ -10,9 +10,21 @@ export default {
     GlAlert,
     ItemTitle,
   },
+  props: {
+    isModal: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    initialTitle: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
   data() {
     return {
-      title: '',
+      title: this.initialTitle,
       error: false,
     };
   },
@@ -35,7 +47,11 @@ export default {
             },
           },
         } = response;
-        this.$router.push({ name: 'workItem', params: { id } });
+        if (!this.isModal) {
+          this.$router.push({ name: 'workItem', params: { id } });
+        } else {
+          this.$emit('onCreate', this.title);
+        }
       } catch {
         this.error = true;
       }
@@ -43,6 +59,13 @@ export default {
     handleTitleInput(title) {
       this.title = title;
     },
+    handleCancelClick() {
+      if (!this.isModal) {
+        this.$router.go(-1);
+        return;
+      }
+      this.$emit('closeModal');
+    },
   },
 };
 </script>
@@ -52,18 +75,27 @@ export default {
     <gl-alert v-if="error" variant="danger" @dismiss="error = false">{{
       __('Something went wrong when creating a work item. Please try again')
     }}</gl-alert>
-    <item-title data-testid="title-input" @title-input="handleTitleInput" />
-    <div class="gl-bg-gray-10 gl-py-5 gl-px-6">
+    <item-title :initial-title="title" data-testid="title-input" @title-input="handleTitleInput" />
+    <div
+      class="gl-bg-gray-10 gl-py-5 gl-px-6"
+      :class="{ 'gl-display-flex gl-justify-content-end': isModal }"
+    >
       <gl-button
         variant="confirm"
         :disabled="title.length === 0"
-        class="gl-mr-3"
+        :class="{ 'gl-mr-3': !isModal }"
         data-testid="create-button"
         type="submit"
       >
-        {{ __('Create') }}
+        {{ s__('WorkItem|Create work item') }}
       </gl-button>
-      <gl-button type="button" data-testid="cancel-button" @click="$router.go(-1)">
+      <gl-button
+        type="button"
+        data-testid="cancel-button"
+        class="gl-order-n1"
+        :class="{ 'gl-mr-3': isModal }"
+        @click="handleCancelClick"
+      >
         {{ __('Cancel') }}
       </gl-button>
     </div>

app/assets/stylesheets/pages/issues.scss

@@ -305,3 +305,32 @@ ul.related-merge-requests > li gl-emoji {
 .issuable-header-slide-leave-to {
   transform: translateY(-100%);
 }
+
+.description.work-items-enabled {
+  ul.task-list {
+    > li.task-list-item {
+      padding-inline-start: 2.25rem;
+
+      .js-add-task {
+        svg {
+          visibility: hidden;
+        }
+
+        &:focus svg {
+          visibility: visible;
+        }
+      }
+
+      > input.task-list-item-checkbox {
+        left: 0.875rem;
+      }
+
+      &:hover,
+      &:focus-within {
+        .js-add-task svg {
+          visibility: visible;
+        }
+      }
+    }
+  }
+}

app/controllers/projects/issues_controller.rb

@@ -54,6 +54,7 @@ class Projects::IssuesController < Projects::ApplicationController
     push_frontend_feature_flag(:issue_assignees_widget, @project, default_enabled: :yaml)
     push_frontend_feature_flag(:paginated_issue_discussions, @project, default_enabled: :yaml)
     push_frontend_feature_flag(:fix_comment_scroll, @project, default_enabled: :yaml)
+    push_frontend_feature_flag(:work_items, project, default_enabled: :yaml)
   end
 
   around_action :allow_gitaly_ref_name_caching, only: [:discussions]

locale/gitlab.pot

@@ -35044,6 +35044,9 @@ msgstr ""
 msgid "Target-Branch"
 msgstr ""
 
+msgid "Task"
+msgstr ""
+
 msgid "Task ID: %{elastic_task}"
 msgstr ""
 
@@ -40600,6 +40603,15 @@ msgstr ""
 msgid "Work in progress Limit"
 msgstr ""
 
+msgid "WorkItem|Convert to work item"
+msgstr ""
+
+msgid "WorkItem|Create work item"
+msgstr ""
+
+msgid "WorkItem|New Task"
+msgstr ""
+
 msgid "WorkItem|Work Items"
 msgstr ""
 

spec/frontend/issues/show/components/description_spec.js

 import $ from 'jquery';
-import Vue, { nextTick } from 'vue';
+import { nextTick } from 'vue';
 import '~/behaviors/markdown/render_gfm';
+import { GlPopover, GlModal } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import { stubComponent } from 'helpers/stub_component';
 import { TEST_HOST } from 'helpers/test_constants';
-import mountComponent from 'helpers/vue_mount_component_helper';
 import Description from '~/issues/show/components/description.vue';
 import TaskList from '~/task_list';
-import { descriptionProps as props } from '../mock_data/mock_data';
+import CreateWorkItem from '~/work_items/pages/create_work_item.vue';
+import {
+  descriptionProps as initialProps,
+  descriptionHtmlWithCheckboxes,
+} from '../mock_data/mock_data';
 
 jest.mock('~/task_list');
 
+const showModal = jest.fn();
+const hideModal = jest.fn();
+
 describe('Description component', () => {
-  let vm;
-  let DescriptionComponent;
+  let wrapper;
+
+  const findGfmContent = () => wrapper.find('[data-testid="gfm-content"]');
+  const findTextarea = () => wrapper.find('[data-testid="textarea"]');
+  const findTaskActionButtons = () => wrapper.findAll('.js-add-task');
+  const findConvertToTaskButton = () => wrapper.find('[data-testid="convert-to-task"]');
+  const findTaskSvg = () => wrapper.find('[data-testid="issue-open-m-icon"]');
+
+  const findPopovers = () => wrapper.findAllComponents(GlPopover);
+  const findModal = () => wrapper.findComponent(GlModal);
+  const findCreateWorkItem = () => wrapper.findComponent(CreateWorkItem);
+
+  function createComponent({ props = {}, provide = {} } = {}) {
+    wrapper = shallowMount(Description, {
+      propsData: {
+        ...initialProps,
+        ...props,
+      },
+      provide,
+      stubs: {
+        GlModal: stubComponent(GlModal, {
+          methods: {
+            show: showModal,
+            hide: hideModal,
+          },
+        }),
+        GlPopover,
+      },
+    });
+  }
 
   beforeEach(() => {
-    DescriptionComponent = Vue.extend(Description);
-
     if (!document.querySelector('.issuable-meta')) {
       const metaData = document.createElement('div');
       metaData.classList.add('issuable-meta');
@@ -24,12 +59,10 @@ describe('Description component', () => {
 
       document.body.appendChild(metaData);
     }
-
-    vm = mountComponent(DescriptionComponent, props);
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
   });
 
   afterAll(() => {
@@ -37,64 +70,91 @@ describe('Description component', () => {
   });
 
   it('doesnt animate first description changes', async () => {
-    vm.descriptionHtml = 'changed';
+    createComponent();
+    await wrapper.setProps({
+      descriptionHtml: 'changed',
+    });
 
-    await nextTick();
-    expect(vm.$el.querySelector('.md').classList.contains('issue-realtime-pre-pulse')).toBeFalsy();
-    jest.runAllTimers();
+    expect(findGfmContent().classes()).not.toContain('issue-realtime-pre-pulse');
   });
 
   it('animates description changes on live update', async () => {
-    vm.descriptionHtml = 'changed';
-    await nextTick();
-    vm.descriptionHtml = 'changed second time';
-    await nextTick();
-    expect(vm.$el.querySelector('.md').classList.contains('issue-realtime-pre-pulse')).toBeTruthy();
-    jest.runAllTimers();
-    await nextTick();
-    expect(
-      vm.$el.querySelector('.md').classList.contains('issue-realtime-trigger-pulse'),
-    ).toBeTruthy();
+    createComponent();
+    await wrapper.setProps({
+      descriptionHtml: 'changed',
+    });
+
+    expect(findGfmContent().classes()).not.toContain('issue-realtime-pre-pulse');
+
+    await wrapper.setProps({
+      descriptionHtml: 'changed second time',
+    });
+
+    expect(findGfmContent().classes()).toContain('issue-realtime-pre-pulse');
+
+    await jest.runOnlyPendingTimers();
+
+    expect(findGfmContent().classes()).toContain('issue-realtime-trigger-pulse');
   });
 
   it('applies syntax highlighting and math when description changed', async () => {
-    const vmSpy = jest.spyOn(vm, 'renderGFM');
     const prototypeSpy = jest.spyOn($.prototype, 'renderGFM');
-    vm.descriptionHtml = 'changed';
+    createComponent();
 
-    await nextTick();
-    expect(vm.$refs['gfm-content']).toBeDefined();
-    expect(vmSpy).toHaveBeenCalled();
+    await wrapper.setProps({
+      descriptionHtml: 'changed',
+    });
+
+    expect(findGfmContent().exists()).toBe(true);
     expect(prototypeSpy).toHaveBeenCalled();
-    expect($.prototype.renderGFM).toHaveBeenCalled();
   });
 
   it('sets data-update-url', () => {
-    expect(vm.$el.querySelector('textarea').dataset.updateUrl).toEqual(TEST_HOST);
+    createComponent();
+    expect(findTextarea().attributes('data-update-url')).toBe(TEST_HOST);
   });
 
   describe('TaskList', () => {
     beforeEach(() => {
-      vm.$destroy();
       TaskList.mockClear();
-      vm = mountComponent(DescriptionComponent, { ...props, issuableType: 'issuableType' });
     });
 
     it('re-inits the TaskList when description changed', () => {
-      vm.descriptionHtml = 'changed';
+      createComponent({
+        props: {
+          issuableType: 'issuableType',
+        },
+      });
+      wrapper.setProps({
+        descriptionHtml: 'changed',
+      });
 
       expect(TaskList).toHaveBeenCalled();
     });
 
-    it('does not re-init the TaskList when canUpdate is false', () => {
-      vm.canUpdate = false;
-      vm.descriptionHtml = 'changed';
+    it('does not re-init the TaskList when canUpdate is false', async () => {
+      createComponent({
+        props: {
+          issuableType: 'issuableType',
+          canUpdate: false,
+        },
+      });
+      wrapper.setProps({
+        descriptionHtml: 'changed',
+      });
 
-      expect(TaskList).toHaveBeenCalledTimes(1);
+      expect(TaskList).not.toHaveBeenCalled();
     });
 
     it('calls with issuableType dataType', () => {
-      vm.descriptionHtml = 'changed';
+      createComponent({
+        props: {
+          issuableType: 'issuableType',
+        },
+      });
+      wrapper.setProps({
+        descriptionHtml: 'changed',
+      });
 
       expect(TaskList).toHaveBeenCalledWith({
         dataType: 'issuableType',
@@ -110,61 +170,96 @@ describe('Description component', () => {
 
   describe('taskStatus', () => {
     it('adds full taskStatus', async () => {
-      vm.taskStatus = '1 of 1';
-
+      createComponent({
+        props: {
+          taskStatus: '1 of 1',
+        },
+      });
       await nextTick();
+
       expect(document.querySelector('.issuable-meta #task_status').textContent.trim()).toBe(
         '1 of 1',
       );
     });
 
     it('adds short taskStatus', async () => {
-      vm.taskStatus = '1 of 1';
-
+      createComponent({
+        props: {
+          taskStatus: '1 of 1',
+        },
+      });
       await nextTick();
+
       expect(document.querySelector('.issuable-meta #task_status_short').textContent.trim()).toBe(
         '1/1 task',
       );
     });
 
     it('clears task status text when no tasks are present', async () => {
-      vm.taskStatus = '0 of 0';
+      createComponent({
+        props: {
+          taskStatus: '0 of 0',
+        },
+      });
 
       await nextTick();
+
       expect(document.querySelector('.issuable-meta #task_status').textContent.trim()).toBe('');
     });
   });
 
-  describe('taskListUpdateStarted', () => {
-    it('emits event to parent', () => {
-      const spy = jest.spyOn(vm, '$emit');
-
-      vm.taskListUpdateStarted();
+  describe('with work items feature flag is enabled', () => {
+    beforeEach(async () => {
+      createComponent({
+        props: {
+          descriptionHtml: descriptionHtmlWithCheckboxes,
+        },
+        provide: {
+          glFeatures: {
+            workItems: true,
+          },
+        },
+      });
+      await nextTick();
+    });
 
-      expect(spy).toHaveBeenCalledWith('taskListUpdateStarted');
+    it('renders a list of hidden buttons corresponding to checkboxes in description HTML', () => {
+      expect(findTaskActionButtons()).toHaveLength(3);
     });
-  });
 
-  describe('taskListUpdateSuccess', () => {
-    it('emits event to parent', () => {
-      const spy = jest.spyOn(vm, '$emit');
+    it('renders a list of popovers corresponding to checkboxes in description HTML', () => {
+      expect(findPopovers()).toHaveLength(3);
+      expect(findPopovers().at(0).props('target')).toBe(
+        findTaskActionButtons().at(0).attributes('id'),
+      );
+    });
 
-      vm.taskListUpdateSuccess();
+    it('does not show a modal by default', () => {
+      expect(findModal().props('visible')).toBe(false);
+    });
 
-      expect(spy).toHaveBeenCalledWith('taskListUpdateSucceeded');
+    it('opens a modal when a button on popover is clicked and displays correct title', async () => {
+      findConvertToTaskButton().vm.$emit('click');
+      expect(showModal).toHaveBeenCalled();
+      await nextTick();
+      expect(findCreateWorkItem().props('initialTitle').trim()).toBe('todo 1');
     });
-  });
 
-  describe('taskListUpdateError', () => {
-    it('should create flash notification and emit an event to parent', () => {
-      const msg =
-        'Someone edited this issue at the same time you did. The description has been updated and you will need to make your changes again.';
-      const spy = jest.spyOn(vm, '$emit');
+    it('closes the modal on `closeCreateTaskModal` event', () => {
+      findConvertToTaskButton().vm.$emit('click');
+      findCreateWorkItem().vm.$emit('closeModal');
+      expect(hideModal).toHaveBeenCalled();
+    });
 
-      vm.taskListUpdateError();
+    it('updates description HTML on `onCreate` event', async () => {
+      const newTitle = 'New title';
+      findConvertToTaskButton().vm.$emit('click');
+      findCreateWorkItem().vm.$emit('onCreate', newTitle);
+      expect(hideModal).toHaveBeenCalled();
+      await nextTick();
 
-      expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe(msg);
-      expect(spy).toHaveBeenCalledWith('taskListUpdateFailed');
+      expect(findTaskSvg().exists()).toBe(true);
+      expect(wrapper.text()).toContain(newTitle);
     });
   });
 });

spec/frontend/issues/show/mock_data/mock_data.js

@@ -58,3 +58,17 @@ export const appProps = {
   zoomMeetingUrl,
   publishedIncidentUrl,
 };
+
+export const descriptionHtmlWithCheckboxes = `
+  <ul dir="auto" class="task-list" data-sourcepos"3:1-5:12">
+    <li class="task-list-item" data-sourcepos="3:1-3:11">
+      <input class="task-list-item-checkbox" type="checkbox"> todo 1
+    </li>
+    <li class="task-list-item" data-sourcepos="4:1-4:12">
+      <input class="task-list-item-checkbox" type="checkbox"> todo 2
+    </li>
+    <li class="task-list-item" data-sourcepos="5:1-5:12">
+      <input class="task-list-item-checkbox" type="checkbox"> todo 3
+    </li>
+  </ul>
+`;

spec/frontend/work_items/pages/create_work_item_spec.js

@@ -19,7 +19,7 @@ describe('Create work item component', () => {
   const findCreateButton = () => wrapper.find('[data-testid="create-button"]');
   const findCancelButton = () => wrapper.find('[data-testid="cancel-button"]');
 
-  const createComponent = ({ data = {} } = {}) => {
+  const createComponent = ({ data = {}, props = {} } = {}) => {
     fakeApollo = createMockApollo([], resolvers);
     wrapper = shallowMount(CreateWorkItem, {
       apolloProvider: fakeApollo,
@@ -28,6 +28,9 @@ describe('Create work item component', () => {
           ...data,
         };
       },
+      propsData: {
+        ...props,
+      },
       mocks: {
         $router: {
           go: jest.fn(),
@@ -54,40 +57,99 @@ describe('Create work item component', () => {
     expect(findCreateButton().props('disabled')).toBe(true);
   });
 
-  it('redirects to the previous page on Cancel button click', () => {
-    createComponent();
-    findCancelButton().vm.$emit('click');
+  describe('when displayed on a separate route', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('redirects to the previous page on Cancel button click', () => {
+      findCancelButton().vm.$emit('click');
+
+      expect(wrapper.vm.$router.go).toHaveBeenCalledWith(-1);
+    });
+
+    it('redirects to the work item page on successful mutation', async () => {
+      findTitleInput().vm.$emit('title-input', 'Test title');
+
+      wrapper.find('form').trigger('submit');
+      await waitForPromises();
+
+      expect(wrapper.vm.$router.push).toHaveBeenCalled();
+    });
+
+    it('adds right margin for create button', () => {
+      expect(findCreateButton().classes()).toContain('gl-mr-3');
+    });
+
+    it('does not add right margin for cancel button', () => {
+      expect(findCancelButton().classes()).not.toContain('gl-mr-3');
+    });
+  });
+
+  describe('when displayed in a modal', () => {
+    beforeEach(() => {
+      createComponent({
+        props: {
+          isModal: true,
+        },
+      });
+    });
+
+    it('emits `closeModal` event on Cancel button click', () => {
+      findCancelButton().vm.$emit('click');
 
-    expect(wrapper.vm.$router.go).toHaveBeenCalledWith(-1);
+      expect(wrapper.emitted('closeModal')).toEqual([[]]);
+    });
+
+    it('emits `onCreate` on successful mutation', async () => {
+      const mockTitle = 'Test title';
+      findTitleInput().vm.$emit('title-input', 'Test title');
+
+      wrapper.find('form').trigger('submit');
+      await waitForPromises();
+
+      expect(wrapper.emitted('onCreate')).toEqual([[mockTitle]]);
+    });
+
+    it('does not right margin for create button', () => {
+      expect(findCreateButton().classes()).not.toContain('gl-mr-3');
+    });
+
+    it('adds right margin for cancel button', () => {
+      expect(findCancelButton().classes()).toContain('gl-mr-3');
+    });
   });
 
   it('hides the alert on dismissing the error', async () => {
     createComponent({ data: { error: true } });
+
     expect(findAlert().exists()).toBe(true);
 
     findAlert().vm.$emit('dismiss');
     await nextTick();
+
     expect(findAlert().exists()).toBe(false);
   });
 
+  it('displays an initial title if passed', () => {
+    const initialTitle = 'Initial Title';
+    createComponent({
+      props: { initialTitle },
+    });
+    expect(findTitleInput().props('initialTitle')).toBe(initialTitle);
+  });
+
   describe('when title input field has a text', () => {
-    beforeEach(async () => {
+    beforeEach(() => {
       const mockTitle = 'Test title';
       createComponent();
-      await findTitleInput().vm.$emit('title-input', mockTitle);
+      findTitleInput().vm.$emit('title-input', mockTitle);
     });
 
     it('renders a non-disabled Create button', () => {
       expect(findCreateButton().props('disabled')).toBe(false);
     });
 
-    it('redirects to the work item page on successful mutation', async () => {
-      wrapper.find('form').trigger('submit');
-      await waitForPromises();
-
-      expect(wrapper.vm.$router.push).toHaveBeenCalled();
-    });
-
     // TODO: write a proper test here when we have a backend implementation
     it.todo('shows an alert on mutation error');
   });