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/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');
   });