fix: stop mousedown event propagation on widget content

Author: gabrieloliveirapinto

plugins/dashboards/frontend/public/templates/helpers/widget/primary-legend.html

@@ -1,4 +1,4 @@
-<div class="bu-is-flex bu-is-align-items-center bu-my-2">
+<div class="bu-is-flex bu-is-align-items-center bu-my-2" @mousedown.stop>
     <div class="clyd-legend-app bu-is-flex-shrink-1" v-if="customText" style="min-width: 0;">
         <div class="bu-is-flex">
             <span class="bu-ml-1 text-small has-ellipsis bu-is-flex-shrink-1">{{unescapeHtml(customText)}}</span>
@@ -10,4 +10,4 @@
     <clyd-legend-period :custom-period="customPeriod" v-if="showPeriod"></clyd-legend-period>
 	<div v-if="reportInfo" class="text-small has-ellipsis bu-is-flex-shrink-1" v-html="reportInfo.formatted"></div>
 	<div v-if="reportInfo && (reportInfo.status=='rerunning' || reportInfo.status=='running')" class="text-small has-ellipsis bu-is-flex-shrink-1 bu-ml-1"><i class="fa fa-circle text-danger blink bu-mr-1"></i>{{i18n('taskmanager.recalculating')}}</div>
-</div>
+</div>

plugins/dashboards/frontend/public/templates/helpers/widget/secondary-legend.html

@@ -1,4 +1,4 @@
-<div class="bu-is-flex bu-is-flex-wrap-wrap">
+<div class="bu-is-flex bu-is-flex-wrap-wrap" @mousedown.stop>
     <div v-for="(item, idx) in allApps" :key="item.id" class="clyd-legend-app bu-is-flex bu-mt-2 bu-is-flex-shrink-1" :style="appBlockStyles(allApps, idx)">
         <!-- Adding 26 at the end of the background color because it chagnes background opacity to 15% -->
         <div v-if="item.labels && item.labels.length" class="bu-is-flex bu-is-align-items-center bu-is-flex-shrink-1 bu-is-flex-grow-1" style="min-width: 0">

plugins/dashboards/frontend/public/templates/helpers/widget/title.html

@@ -1,4 +1,4 @@
-<div class="bu-is-flex bu-is-flex-shrink-1" style="min-width: 0">
+<div class="bu-is-flex bu-is-flex-shrink-1" style="min-width: 0" @mousedown.stop>
     <h4 class="bu-is-flex-shrink-1 has-ellipsis" v-if="title">{{unescapeHtml(title)}}</h4>
     <clyd-title-labels v-if="labels && labels.length" :labels="labels"></clyd-title-labels>
-</div>
+</div>

plugins/dashboards/frontend/public/templates/widgets/analytics/widget.html

@@ -24,7 +24,7 @@
     </div>
 	<cly-chart-zoom ref="zoomRef" v-if="showZoom" @zoom-reset="onZoomReset" :echartRef="$refs.echartRef.$refs.echarts" class="bu-is-flex bu-is-align-items-center bu-is-justify-content-flex-end bu-m-0 cly-vue-zoom__external"></cly-chart-zoom>
     <clyd-primary-legend :custom-period="data.custom_period"></clyd-primary-legend>
-    <div class="clyd-widget__content" v-loading="loading" :class="'clyd-widget__content--vis-' + data.visualization">
+    <div class="clyd-widget__content" v-loading="loading" :class="'clyd-widget__content--vis-' + data.visualization" @mousedown.stop>
 		<template v-if="!loading">
             <cly-chart-time v-if="data.visualization === 'time-series' && !data.breakdowns" :show-zoom="false" @patchzoom="onPatchZoom" @datazoom="onDataZoom" ref="echartRef"  :showDownload="false" :showToggle="false" :option="timelineGraph.lineOptions" height="auto" skin="full" :legend="{show: false}" :category="data.data_type || data.feature" :sub-category="data.feature === 'events' ? data.events : []">
             </cly-chart-time>
@@ -64,4 +64,4 @@ <h1 class="bu-pb-2">{{formatNumber(number.total)}}</h1>
     <drawer :settings="drawerSettingsForWidgets" :controls="drawers.annotation" @cly-refresh="refresh"></drawer>
     <clyd-secondary-legend :apps="data.apps" :labels="legendLabels" v-if="data.visualization === 'time-series' && !data.breakdowns"></clyd-secondary-legend>
     <clyd-widget-apps :apps="data.apps"></clyd-widget-apps>
-</div>
+</div>

plugins/dashboards/frontend/public/templates/widgets/note/widget.html

@@ -7,10 +7,10 @@
     </div>
 	<div 
 		class="bu-is-flex bu-is-flex-direction-column bu-is-justify-content-center clyd-widget__content__note" 
-		
+		@mousedown.stop
 	>
 		<vue-scroll :ops="scrollNote">
 			<span class="el-tiptap-editor el-tiptap-editor__content ProseMirror" v-html="widgetHTML"></span>
 		</vue-scroll>
 	</div>
-</div>
+</div>

plugins/sdk/frontend/public/templates/widgets/analytics/widget.html

@@ -24,7 +24,7 @@
     </div>
 	<cly-chart-zoom ref="zoomRef" v-if="showZoom" @zoom-reset="onZoomReset" :echartRef="$refs.echartRef.$refs.echarts" class="bu-is-flex bu-is-align-items-center bu-is-justify-content-flex-end bu-m-0 cly-vue-zoom__external"></cly-chart-zoom>
     <clyd-primary-legend :custom-period="data.custom_period" :custom-text="data.selectedSDK"></clyd-primary-legend>
-    <div class="clyd-widget__content" v-loading="loading" :class="'clyd-widget__content--vis-' + data.visualization">
+    <div class="clyd-widget__content" v-loading="loading" :class="'clyd-widget__content--vis-' + data.visualization" @mousedown.stop>
 		<template v-if="!loading">
             <div v-if="data.visualization === 'table'" style="width: 100%; height: 100%;">
                 <cly-datatable-n v-if="getTableData.length" :rows="getTableData" :hideTop="true" style="width: 100%; height: 100%;">
@@ -50,4 +50,4 @@
 	</div>
     <clyd-widget-apps :apps="data.apps"></clyd-widget-apps>
     <drawer :settings="drawerSettingsForWidgets" :controls="drawers.annotation" @cly-refresh="refresh"></drawer>
-</div>
+</div>

plugins/times-of-day/frontend/public/templates/times-of-day-widget.html

@@ -8,11 +8,11 @@
         </div>
     </div>
 
-    <div class="clyd-widget__content" v-loading="loading">
+    <div class="clyd-widget__content" v-loading="loading" @mousedown.stop>
         <template v-if="!loading">
             <times-of-day-scatter-chart :series="series" :maxSeriesValue="maxSeriesValue" :show-zoom="false" :show-toggle="false" height="auto" :showDownload="false" skin="full"></times-of-day-scatter-chart>
         </template>
     </div>
 
     <clyd-widget-apps :apps="data.apps"></clyd-widget-apps>
-</div>
+</div>