Update Work Item Drawer header

What does this MR do and why?

Updates the header section of the Work Item Drawer following the guidance and designs in #465823 (closed)

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before	After

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

1. Enable the work item drawer using the issues_list_drawer feature flag
2. Enable work item epics and the work item epic list using the work_item_epics, namespace_level_work_items, work_item_epics_rollout, and work_item_epics_list feature flags
3. Visit the epics list in a group
4. Click an epic -> the drawer should appear
5. Check the header section matches the requirements in #465823 (closed)

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