Merge branch '216750-open-single-panel-new-tab' into 'master'

Allows users to open single panels in a new tab

Closes #216750

See merge request gitlab-org/gitlab!31206

app/assets/javascripts/monitoring/components/dashboard_panel.vue

@@ -313,7 +313,12 @@ export default {
             <template slot="button-content">
               <gl-icon name="ellipsis_v" class="text-secondary" />
             </template>
-            <gl-dropdown-item v-if="expandBtnAvailable" ref="expandBtn" @click="onExpand">
+            <gl-dropdown-item
+              v-if="expandBtnAvailable"
+              ref="expandBtn"
+              :href="clipboardText"
+              @click.prevent="onExpand"
+            >
               {{ s__('Metrics|Expand panel') }}
             </gl-dropdown-item>
             <gl-dropdown-item

changelogs/unreleased/216750-open-single-panel-new-tab.yml

+---
+title: Allow monitoring dashboard users to open single panels in a new tab
+merge_request: 31206
+author:
+type: added

spec/frontend/monitoring/components/dashboard_panel_spec.js

@@ -518,8 +518,10 @@ describe('Dashboard Panel', () => {
       });
 
       it('emits the `expand` event', () => {
-        findExpandBtn().vm.$emit('click');
+        const preventDefault = jest.fn();
+        findExpandBtn().vm.$emit('click', { preventDefault });
         expect(wrapper.emitted('expand')).toHaveLength(1);
+        expect(preventDefault).toHaveBeenCalled();
       });
     });
   });