Merge branch 'jc/465823-work-item-drawer-header' into 'master'

Update Work Item Drawer header

See merge request !164847



Merged-by: Jack Chapman <jachapman@gitlab.com>

app/assets/javascripts/issues/list/components/issues_list_app.vue

@@ -818,7 +818,10 @@ export default {
       this.viewType = ISSUES_LIST_VIEW_KEY;
     },
     handleSelectIssuable(issuable) {
-      this.activeIssuable = issuable;
+      this.activeIssuable = {
+        ...issuable,
+        fullPath: this.fullPath,
+      };
     },
     updateIssuablesCache(workItem) {
       const client = this.$apollo.provider.clients.defaultClient;

app/assets/javascripts/vue_shared/issuable/list/components/issuable_item.vue

@@ -245,7 +245,7 @@ export default {
       e.preventDefault();
       this.$emit('select-issuable', {
         iid: this.issuableIid,
-        webUrl: this.issuableLinkHref,
+        webUrl: this.issuable.webUrl,
         fullPath: this.workItemFullPath,
       });
     },

app/assets/javascripts/work_items/components/work_item_drawer.vue

 <script>
-import { GlLink, GlDrawer } from '@gitlab/ui';
+import { GlLink, GlDrawer, GlButton, GlTooltipDirective } from '@gitlab/ui';
 import { escapeRegExp } from 'lodash';
+import { __ } from '~/locale';
 import deleteWorkItemMutation from '~/work_items/graphql/delete_work_item.mutation.graphql';
 import { TYPE_EPIC, TYPE_ISSUE } from '~/issues/constants';
 import * as Sentry from '~/sentry/sentry_browser_wrapper';
@@ -8,9 +9,13 @@ import { visitUrl } from '~/lib/utils/url_utility';
 
 export default {
   name: 'WorkItemDrawer',
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   components: {
     GlLink,
     GlDrawer,
+    GlButton,
     WorkItemDetail: () => import('~/work_items/components/work_item_detail.vue'),
   },
   inject: ['fullPath'],
@@ -31,6 +36,11 @@ export default {
       default: TYPE_ISSUE,
     },
   },
+  data() {
+    return {
+      copyTooltipText: this.$options.i18n.copyTooltipText,
+    };
+  },
   computed: {
     activeItemFullPath() {
       if (this.activeItem?.fullPath) {
@@ -45,6 +55,10 @@ export default {
     modalIsGroup() {
       return this.issuableType === TYPE_EPIC;
     },
+    headerReference() {
+      const path = this.activeItemFullPath.substring(this.activeItemFullPath.lastIndexOf('/') + 1);
+      return `${path}#${this.activeItem.iid}`;
+    },
   },
   methods: {
     async deleteWorkItem({ workItemId }) {
@@ -62,8 +76,12 @@ export default {
         Sentry.captureException(error);
       }
     },
-    redirectToWorkItem() {
+    redirectToWorkItem(e) {
       const workItem = this.activeItem;
+      if (e.metaKey || e.ctrlKey) {
+        return;
+      }
+      e.preventDefault();
       const escapedFullPath = escapeRegExp(this.fullPath);
       // eslint-disable-next-line no-useless-escape
       const regex = new RegExp(`groups\/${escapedFullPath}\/-\/(work_items|epics)\/\\d+`);
@@ -80,6 +98,17 @@ export default {
         visitUrl(workItem.webUrl);
       }
     },
+    handleCopyToClipboard() {
+      this.copyTooltipText = this.$options.i18n.copiedTooltipText;
+      setTimeout(() => {
+        this.copyTooltipText = this.$options.i18n.copyTooltipText;
+      }, 2000);
+    },
+  },
+  i18n: {
+    copyTooltipText: __('Copy item URL'),
+    copiedTooltipText: __('Copied'),
+    openTooltipText: __('Open in full page'),
   },
 };
 </script>
@@ -94,12 +123,39 @@ export default {
     @close="$emit('close')"
   >
     <template #title>
-      <gl-link
-        class="gl-text-default"
-        :href="activeItem.webUrl"
-        @click.prevent="redirectToWorkItem"
-        >{{ __('Open full view') }}</gl-link
-      >
+      <div class="gl-text gl-flex gl-w-full gl-items-center gl-gap-x-2 xl:gl-px-4">
+        <gl-link
+          :href="activeItem.webUrl"
+          class="gl-text-sm gl-font-bold gl-text-default"
+          @click="redirectToWorkItem"
+        >
+          {{ headerReference }}
+        </gl-link>
+        <gl-button
+          v-gl-tooltip
+          data-testid="work-item-drawer-copy-button"
+          :title="copyTooltipText"
+          category="tertiary"
+          class="gl-text-secondary"
+          icon="link"
+          size="small"
+          :aria-label="$options.i18n.copyTooltipText"
+          :data-clipboard-text="activeItem.webUrl"
+          @click="handleCopyToClipboard"
+        />
+        <gl-button
+          v-gl-tooltip
+          data-testid="work-item-drawer-link-button"
+          :href="activeItem.webUrl"
+          :title="$options.i18n.openTooltipText"
+          category="tertiary"
+          class="gl-text-secondary"
+          icon="maximize"
+          size="small"
+          :aria-label="$options.i18n.openTooltipText"
+          @click="redirectToWorkItem"
+        />
+      </div>
     </template>
     <template #default>
       <work-item-detail

locale/gitlab.pot

@@ -15607,6 +15607,9 @@ msgstr ""
 msgid "Copy issue URL to clipboard"
 msgstr ""
+msgid "Copy item URL"
+msgstr ""
+
 msgid "Copy key"
 msgstr ""
@@ -37682,9 +37685,6 @@ msgstr ""
 msgid "Open evidence JSON in new tab"
 msgstr ""
-msgid "Open full view"
-msgstr ""
-
 msgid "Open in Gitpod"
 msgstr ""
@@ -37694,6 +37694,9 @@ msgstr ""
 msgid "Open in file view"
 msgstr ""
+msgid "Open in full page"
+msgstr ""
+
 msgid "Open in your IDE"
 msgstr ""

spec/frontend/issues/list/components/issues_list_app_spec.js

@@ -1126,9 +1126,10 @@ describe('CE IssuesListApp component', () => {
       });
 
       it('selects active issuable', () => {
-        expect(findIssuableList().props('activeIssuable')).toEqual(
-          getIssuesQueryResponse.data.project.issues.nodes[0],
-        );
+        expect(findIssuableList().props('activeIssuable')).toEqual({
+          ...getIssuesQueryResponse.data.project.issues.nodes[0],
+          fullPath: defaultProvide.fullPath,
+        });
       });
 
       describe('when closing the drawer', () => {

spec/frontend/work_items/components/work_item_drawer_spec.js

 import { GlDrawer, GlLink } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
 import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 
@@ -10,6 +9,7 @@ import { TYPE_EPIC, TYPE_ISSUE } from '~/issues/constants';
 import WorkItemDrawer from '~/work_items/components/work_item_drawer.vue';
 import WorkItemDetail from '~/work_items/components/work_item_detail.vue';
 import deleteWorkItemMutation from '~/work_items/graphql/delete_work_item.mutation.graphql';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 Vue.use(VueApollo);
 
@@ -27,10 +27,10 @@ describe('WorkItemDrawer', () => {
 
   const createComponent = ({
     open = false,
-    activeItem = { iid: '1', webUrl: 'test' },
+    activeItem = { iid: '1', webUrl: 'test', fullPath: 'gitlab-org/gitlab' },
     issuableType = TYPE_ISSUE,
   } = {}) => {
-    wrapper = shallowMount(WorkItemDrawer, {
+    wrapper = shallowMountExtended(WorkItemDrawer, {
       propsData: {
         activeItem,
         open,
@@ -56,10 +56,26 @@ describe('WorkItemDrawer', () => {
     expect(findGlDrawer().props('open')).toBe(false);
   });
 
-  it('displays correct URL in link', () => {
+  it('displays correct URL and text in link', () => {
     createComponent();
 
-    expect(wrapper.findComponent(GlLink).attributes('href')).toBe('test');
+    const link = wrapper.findComponent(GlLink);
+    expect(link.attributes('href')).toBe('test');
+    expect(link.text()).toBe('gitlab#1');
+  });
+
+  it('displays the correct URL in the full page button', () => {
+    createComponent();
+
+    expect(wrapper.findByTestId('work-item-drawer-link-button').attributes('href')).toBe('test');
+  });
+
+  it('has a copy to clipboard button for the item URL', () => {
+    createComponent();
+
+    expect(
+      wrapper.findByTestId('work-item-drawer-copy-button').attributes('data-clipboard-text'),
+    ).toBe('test');
   });
 
   it('emits `close` event when drawer is closed', () => {