Merge branch...

Merge branch '38056-change-the-clipboardtext-property-requirement-inside-the-panel_type-component' into 'master'

Change the `clipboardText` to optional in panel_type component

Closes #38056

See merge request gitlab-org/gitlab!21717

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

@@ -97,7 +97,6 @@ export default {
         v-for="(graphData, graphIndex) in charts"
         :key="`panel-type-${graphIndex}`"
         class="w-100"
-        clipboard-text=""
         :graph-data="graphData"
         :group-id="dashboardUrl"
       />

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

@@ -36,7 +36,8 @@ export default {
   props: {
     clipboardText: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
     graphData: {
       type: Object,
@@ -152,6 +153,7 @@ export default {
           {{ __('Download CSV') }}
         </gl-dropdown-item>
         <gl-dropdown-item
+          v-if="clipboardText"
           v-track-event="generateLinkToChartOptions(clipboardText)"
           class="js-chart-link"
           :data-clipboard-text="clipboardText"

spec/frontend/monitoring/panel_type_spec.js

@@ -20,6 +20,16 @@ describe('Panel Type component', () => {
   const dashboardWidth = 100;
   const exampleText = 'example_text';
 
+  const createWrapper = props =>
+    shallowMount(PanelType, {
+      propsData: {
+        ...props,
+      },
+      store,
+      sync: false,
+      attachToDocument: true,
+    });
+
   beforeEach(() => {
     setTestTimeout(1000);
     axiosMock = new AxiosMockAdapter(axios);
@@ -36,14 +46,9 @@ describe('Panel Type component', () => {
     graphDataNoResult.metrics[0].result = [];
 
     beforeEach(() => {
-      panelType = shallowMount(PanelType, {
-        propsData: {
-          clipboardText: 'dashboard_link',
-          dashboardWidth,
-          graphData: graphDataNoResult,
-        },
-        sync: false,
-        attachToDocument: true,
+      panelType = createWrapper({
+        dashboardWidth,
+        graphData: graphDataNoResult,
       });
     });
 
@@ -68,41 +73,30 @@ describe('Panel Type component', () => {
     });
   });
 
-  describe('when Graph data is available', () => {
-    const propsData = {
-      clipboardText: exampleText,
-      dashboardWidth,
-      graphData: graphDataPrometheusQueryRange,
-    };
-
-    beforeEach(done => {
+  describe('when graph data is available', () => {
+    beforeEach(() => {
       store = createStore();
-      panelType = shallowMount(PanelType, {
-        propsData,
-        store,
-        sync: false,
-        attachToDocument: true,
+      panelType = createWrapper({
+        dashboardWidth,
+        graphData: graphDataPrometheusQueryRange,
       });
-      panelType.vm.$nextTick(done);
     });
 
     afterEach(() => {
       panelType.destroy();
     });
 
+    it('sets no clipboard copy link on dropdown by default', () => {
+      const link = () => panelType.find('.js-chart-link');
+      expect(link().exists()).toBe(false);
+    });
+
     describe('Time Series Chart panel type', () => {
       it('is rendered', () => {
         expect(panelType.find(TimeSeriesChart).isVueInstance()).toBe(true);
         expect(panelType.find(TimeSeriesChart).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);
-      });
-
       it('includes a default group id', () => {
         expect(panelType.vm.groupId).toBe('panel-type-chart');
       });
@@ -123,6 +117,30 @@ describe('Panel Type component', () => {
     });
   });
 
+  describe('when cliboard data is available', () => {
+    const clipboardText = 'A value to copy.';
+
+    beforeEach(() => {
+      store = createStore();
+      panelType = createWrapper({
+        clipboardText,
+        dashboardWidth,
+        graphData: graphDataPrometheusQueryRange,
+      });
+    });
+
+    afterEach(() => {
+      panelType.destroy();
+    });
+
+    it('sets clipboard text on the dropdown', () => {
+      const link = () => panelType.find('.js-chart-link');
+
+      expect(link().exists()).toBe(true);
+      expect(link().element.dataset.clipboardText).toBe(clipboardText);
+    });
+  });
+
   describe('when downloading metrics data as CSV', () => {
     beforeEach(done => {
       graphDataPrometheusQueryRange.y_label = 'metric';