Add url query when work item modal is open

Add url query `work_item_id` so when visiting the issue show
page with this url query, the work item modal automatically
opens with the work item details.

Behind feature flag `work_items` defaulted off.

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

@@ -4,6 +4,8 @@ import $ from 'jquery';
 import { convertToGraphQLId } from '~/graphql_shared/utils';
 import { TYPE_WORK_ITEM } from '~/graphql_shared/constants';
 import createFlash from '~/flash';
+import { isPositiveInteger } from '~/lib/utils/number_utils';
+import { getParameterByName, setUrlParams, updateHistory } from '~/lib/utils/url_utility';
 import { __, s__, sprintf } from '~/locale';
 import TaskList from '~/task_list';
 import Tracking from '~/tracking';
@@ -65,13 +67,17 @@ export default {
     },
   },
   data() {
+    const workItemId = getParameterByName('work_item_id');
+
     return {
       preAnimation: false,
       pulseAnimation: false,
       initialUpdate: true,
       taskButtons: [],
       activeTask: {},
-      workItemId: null,
+      workItemId: isPositiveInteger(workItemId)
+        ? convertToGraphQLId(TYPE_WORK_ITEM, workItemId)
+        : undefined,
     };
   },
   computed: {
@@ -184,6 +190,7 @@ export default {
           taskLink.addEventListener('click', (e) => {
             e.preventDefault();
             this.workItemId = convertToGraphQLId(TYPE_WORK_ITEM, issue);
+            this.updateWorkItemIdUrlQuery(issue);
             this.track('viewed_work_item_from_modal', {
               category: 'workItems:show',
               label: 'work_item_view',
@@ -232,12 +239,19 @@ export default {
       this.$refs.modal.hide();
     },
     closeWorkItemDetailModal() {
-      this.workItemId = null;
+      this.workItemId = undefined;
+      this.updateWorkItemIdUrlQuery(undefined);
     },
     handleCreateTask(description) {
       this.$emit('updateDescription', description);
       this.closeCreateTaskModal();
     },
+    updateWorkItemIdUrlQuery(workItemId) {
+      updateHistory({
+        url: setUrlParams({ work_item_id: workItemId }),
+        replace: true,
+      });
+    },
   },
   safeHtmlConfig: { ADD_TAGS: ['gl-emoji', 'copy-code'] },
 };
@@ -281,7 +295,7 @@ export default {
       body-class="gl-p-0!"
     >
       <create-work-item
-        :is-modal="true"
+        is-modal
         :initial-title="activeTask.title"
         :issue-gid="issueGid"
         :lock-version="lockVersion"

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

@@ -2,11 +2,13 @@ import $ from 'jquery';
 import { nextTick } from 'vue';
 import '~/behaviors/markdown/render_gfm';
 import { GlTooltip, GlModal } from '@gitlab/ui';
+import setWindowLocation from 'helpers/set_window_location_helper';
 import { stubComponent } from 'helpers/stub_component';
 import { TEST_HOST } from 'helpers/test_constants';
 import { mockTracking } from 'helpers/tracking_helper';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import Description from '~/issues/show/components/description.vue';
+import { updateHistory } from '~/lib/utils/url_utility';
 import TaskList from '~/task_list';
 import WorkItemDetailModal from '~/work_items/components/work_item_detail_modal.vue';
 import CreateWorkItem from '~/work_items/pages/create_work_item.vue';
@@ -17,6 +19,10 @@ import {
 } from '../mock_data/mock_data';
 
 jest.mock('~/flash');
+jest.mock('~/lib/utils/url_utility', () => ({
+  ...jest.requireActual('~/lib/utils/url_utility'),
+  updateHistory: jest.fn(),
+}));
 jest.mock('~/task_list');
 
 const showModal = jest.fn();
@@ -55,6 +61,8 @@ describe('Description component', () => {
   }
 
   beforeEach(() => {
+    setWindowLocation(TEST_HOST);
+
     if (!document.querySelector('.issuable-meta')) {
       const metaData = document.createElement('div');
       metaData.classList.add('issuable-meta');
@@ -285,6 +293,7 @@ describe('Description component', () => {
     describe('work items detail', () => {
       const findTaskLink = () => wrapper.find('a.gfm-issue');
 
+      describe('when opening and closing', () => {
         beforeEach(() => {
           createComponent({
             props: {
@@ -303,6 +312,10 @@ describe('Description component', () => {
           await findTaskLink().trigger('click');
 
           expect(findWorkItemDetailModal().props('visible')).toBe(true);
+          expect(updateHistory).toHaveBeenCalledWith({
+            url: `${TEST_HOST}/?work_item_id=2`,
+            replace: true,
+          });
         });
 
         it('closes from an open state', async () => {
@@ -314,6 +327,10 @@ describe('Description component', () => {
           await nextTick();
 
           expect(findWorkItemDetailModal().props('visible')).toBe(false);
+          expect(updateHistory).toHaveBeenLastCalledWith({
+            url: `${TEST_HOST}/`,
+            replace: true,
+          });
         });
 
         it('tracks when opened', async () => {
@@ -321,11 +338,40 @@ describe('Description component', () => {
 
           await findTaskLink().trigger('click');
 
-        expect(trackingSpy).toHaveBeenCalledWith('workItems:show', 'viewed_work_item_from_modal', {
+          expect(trackingSpy).toHaveBeenCalledWith(
+            'workItems:show',
+            'viewed_work_item_from_modal',
+            {
               category: 'workItems:show',
               label: 'work_item_view',
               property: 'type_task',
+            },
+          );
+        });
       });
+
+      describe('when url query `work_item_id` exists', () => {
+        it.each`
+          behavior           | workItemId     | visible
+          ${'opens'}         | ${'123'}       | ${true}
+          ${'does not open'} | ${'123e'}      | ${false}
+          ${'does not open'} | ${'12e3'}      | ${false}
+          ${'does not open'} | ${'1e23'}      | ${false}
+          ${'does not open'} | ${'x'}         | ${false}
+          ${'does not open'} | ${'undefined'} | ${false}
+        `(
+          '$behavior when url contains `work_item_id=$workItemId`',
+          async ({ workItemId, visible }) => {
+            setWindowLocation(`?work_item_id=${workItemId}`);
+
+            createComponent({
+              props: { descriptionHtml: descriptionHtmlWithTask },
+              provide: { glFeatures: { workItems: true } },
+            });
+
+            expect(findWorkItemDetailModal().props('visible')).toBe(visible);
+          },
+        );
       });
     });
   });