Add clipboard button to metric chart dropdown

Adds a clipboard button to the metrics dashboard, that allows
copying a link to an individual chart.

2 files changed, 86 insertions, 2 deletions

diff --git a/spec/javascripts/monitoring/dashboard_spec.js b/spec/javascripts/monitoring/dashboard_spec.js
index b78896c45fc..624d8b14c8f 100644
--- a/spec/javascripts/monitoring/dashboard_spec.js
+++ b/spec/javascripts/monitoring/dashboard_spec.js
@@ -1,4 +1,6 @@
 import Vue from 'vue';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { GlToast } from '@gitlab/ui';
 import MockAdapter from 'axios-mock-adapter';
 import Dashboard from '~/monitoring/components/dashboard.vue';
 import { timeWindows, timeWindowsKeyNames } from '~/monitoring/constants';
@@ -13,6 +15,7 @@ import MonitoringMock, {
   dashboardGitResponse,
 } from './mock_data';
 
+const localVue = createLocalVue();
 const propsData = {
   hasMetrics: false,
   documentationPath: '/path/to/docs',
@@ -59,7 +62,9 @@ describe('Dashboard', () => {
   });
 
   afterEach(() => {
-    component.$destroy();
+    if (component) {
+      component.$destroy();
+    }
     mock.restore();
   });
 
@@ -373,6 +378,51 @@ describe('Dashboard', () => {
     });
   });
 
+  describe('link to chart', () => {
+    let wrapper;
+    const currentDashboard = 'TEST_DASHBOARD';
+    localVue.use(GlToast);
+    const link = () => wrapper.find('.js-chart-link');
+    const clipboardText = () => link().element.dataset.clipboardText;
+
+    beforeEach(done => {
+      mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
+
+      wrapper = shallowMount(DashboardComponent, {
+        localVue,
+        sync: false,
+        attachToDocument: true,
+        propsData: { ...propsData, hasMetrics: true, currentDashboard },
+        store,
+      });
+
+      setTimeout(done);
+    });
+
+    afterEach(() => {
+      wrapper.destroy();
+    });
+
+    it('adds a copy button to the dropdown', () => {
+      expect(link().text()).toContain('Generate link to chart');
+    });
+
+    it('contains a link to the dashboard', () => {
+      expect(clipboardText()).toContain(`dashboard=${currentDashboard}`);
+      expect(clipboardText()).toContain(`group=`);
+      expect(clipboardText()).toContain(`title=`);
+      expect(clipboardText()).toContain(`y_label=`);
+    });
+
+    it('creates a toast when clicked', () => {
+      spyOn(wrapper.vm.$toast, 'show').and.stub();
+
+      link().vm.$emit('click');
+
+      expect(wrapper.vm.$toast.show).toHaveBeenCalled();
+    });
+  });
+
   describe('when the window resizes', () => {
     beforeEach(() => {
       mock.onGet(mockApiEndpoint).reply(200, metricsGroupsAPIResponse);
diff --git a/spec/javascripts/monitoring/panel_type_spec.js b/spec/javascripts/monitoring/panel_type_spec.js
index 8ce24041e97..086be628093 100644
--- a/spec/javascripts/monitoring/panel_type_spec.js
+++ b/spec/javascripts/monitoring/panel_type_spec.js
@@ -1,20 +1,25 @@
 import { shallowMount } from '@vue/test-utils';
 import PanelType from '~/monitoring/components/panel_type.vue';
 import EmptyChart from '~/monitoring/components/charts/empty_chart.vue';
+import AreaChart from '~/monitoring/components/charts/area.vue';
 import { graphDataPrometheusQueryRange } from './mock_data';
+import { createStore } from '~/monitoring/stores';
 
 describe('Panel Type component', () => {
+  let store;
   let panelType;
   const dashboardWidth = 100;
 
   describe('When no graphData is available', () => {
     let glEmptyChart;
-    const graphDataNoResult = graphDataPrometheusQueryRange;
+    // Deep clone object before modifying
+    const graphDataNoResult = JSON.parse(JSON.stringify(graphDataPrometheusQueryRange));
     graphDataNoResult.queries[0].result = [];
 
     beforeEach(() => {
       panelType = shallowMount(PanelType, {
         propsData: {
+          clipboardText: 'dashboard_link',
           dashboardWidth,
           graphData: graphDataNoResult,
         },
@@ -41,4 +46,33 @@ describe('Panel Type component', () => {
       });
     });
   });
+
+  describe('when Graph data is available', () => {
+    const exampleText = 'example_text';
+
+    beforeEach(() => {
+      store = createStore();
+      panelType = shallowMount(PanelType, {
+        propsData: {
+          clipboardText: exampleText,
+          dashboardWidth,
+          graphData: graphDataPrometheusQueryRange,
+        },
+        store,
+      });
+    });
+
+    describe('Area Chart panel type', () => {
+      it('is rendered', () => {
+        expect(panelType.find(AreaChart).exists()).toBe(true);
+      });
+
+      it('sets clipboard text on the dropdown', () => {
+        const link = () => panelType.find('.js-chart-link');
+        const clipboardText = () => link().element.dataset.clipboardText;
+
+        expect(clipboardText()).toBe(exampleText);
+      });
+    });
+  });
 });