Merge pull request #6592 from Countly/QT-324

[QT-324] Create custom dashboard with widgets and email report

Author: can-angun

plugins/dashboards/frontend/public/templates/dashboards-drawer.html

@@ -3,25 +3,28 @@
     @copy="onCopy"
     @close="onClose"
     :title="title"
+    test-id="create-dashboard-drawer"
     :saveButtonLabel="saveButtonLabel"
     v-bind="controls">
     <template v-slot:default="drawerScope">
         <cly-form-step id="dashboards-drawer">
-            <cly-form-field :label="i18n('dashboards.dashboard-name')" name="name" rules="required" v-slot:default>
+            <cly-form-field :label="i18n('dashboards.dashboard-name')" name="name" rules="required" v-slot:default test-id="dashboard-name-input-label">
                 <el-input
                     v-model="drawerScope.editedObject.name"
+                    test-id="dashboard-name-input"
                     :placeholder="i18n('placeholder.dashboards.dashboard-name')">
                 </el-input>
             </cly-form-field>
-            <div class="text-big font-weight-bold">
+            <div class="text-big font-weight-bold" data-test-id="dashboard-visibility-label">
                 {{i18n('dashboards.share-with')}}
-                <cly-tooltip-icon :tooltip="i18n('dashboards.share-with-tooltip-content')"></cly-tooltip-icon>
+                <cly-tooltip-icon :tooltip="i18n('dashboards.share-with-tooltip-content')" data-test-id="dashboard-visibility-tooltip"></cly-tooltip-icon>
             </div>
             <cly-form-field name="share_with" rules="required">
                 <el-radio-group :disabled="!canShare" v-model="drawerScope.editedObject.share_with" style="width: 100%;">
                     <el-radio
                         border
                         class="is-autosized-vstack"
+                        :test-id="'dashboard-visibility-option-' + item.value"
                         v-for="(item) in constants.sharingOptions"
                         :label="item.value"
                         :key="item.value">
@@ -37,29 +40,31 @@
 
 
             <div v-if="drawerScope.editedObject.share_with === 'selected-users'">
-                <div class="text-big font-weight-bold">
+                <div class="text-big font-weight-bold" data-test-id="dashboard-user-permissions-label">
                     {{i18n('dashboards.user-permissions')}}
-                    <cly-tooltip-icon :tooltip="i18n('dashboards.user-permissions-tooltip-content')"></cly-tooltip-icon>
+                    <cly-tooltip-icon :tooltip="i18n('dashboards.user-permissions-tooltip-content')" data-test-id="dashboard-user-permissions-tooltip"></cly-tooltip-icon>
                 </div>
-                <cly-form-field :label="i18n('dashboards.users-edit-permission')" :subheading="i18n('dashboards.users-edit-description')">
-                    <cly-select-email :disabled="!canShare" v-model="sharedEmailEdit" :placeholder="canShare ? i18n('dashboards.enter-user-email') : i18n('dashbaords.sharing-disabled')"></cly-select-email>
+                <cly-form-field :label="i18n('dashboards.users-edit-permission')" :subheading="i18n('dashboards.users-edit-description')" test-id="dashboard-users-edit-permission-label">
+                    <cly-select-email :disabled="!canShare" v-model="sharedEmailEdit" :placeholder="canShare ? i18n('dashboards.enter-user-email') : i18n('dashbaords.sharing-disabled')" test-id="edit-permission-user-email-input"></cly-select-email>
                 </cly-form-field>
-                <cly-form-field :label="i18n('dashboards.users-view-permission')" :subheading="i18n('dashboards.users-view-description')">
-                    <cly-select-email :disabled="!canShare" v-model="sharedEmailView" :placeholder="canShare ? i18n('dashboards.enter-user-email') : i18n('dashbaords.sharing-disabled')"></cly-select-email>
+                <cly-form-field :label="i18n('dashboards.users-view-permission')" :subheading="i18n('dashboards.users-view-description')" test-id="dashboard-users-view-permission-label">
+                    <cly-select-email :disabled="!canShare" v-model="sharedEmailView" :placeholder="canShare ? i18n('dashboards.enter-user-email') : i18n('dashbaords.sharing-disabled')" test-id="view-permission-user-email-input"></cly-select-email>
                 </cly-form-field>
             </div>
 
             <div v-if="(drawerScope.editedObject.share_with === 'selected-users') && groupSharingAllowed">
-                <div class="text-big font-weight-bold">
+                <div class="text-big font-weight-bold" data-test-id="dashboard-user-group-permissions-label">
                     {{i18n('dashboards.user-group-permission')}}
-                    <cly-tooltip-icon :tooltip="i18n('dashboards.user-group-permission-tooltip-content')"></cly-tooltip-icon>
+                    <cly-tooltip-icon :tooltip="i18n('dashboards.user-group-permission-tooltip-content')" data-test-id="dashboard-user-group-permission-tooltip"></cly-tooltip-icon>
                 </div>
                 <cly-form-field
                     name="shared_user_groups_edit"
+                    test-id="dashboard-user-group-edit-permission-label"
                     :label="i18n('dashboards.users-edit-permission')"
                     :subheading="i18n('dashboards.users-edit-description')">
                     <el-select
                         :key="elSelectKey"
+                        test-id="dashboard-user-group-edit-permission"
                         multiple
                         :disabled="!canShare"
                         v-model="sharedGroupEdit"
@@ -75,10 +80,12 @@
                 </cly-form-field>
                 <cly-form-field
                     name="shared_user_groups_view"
+                    test-id="dashboard-user-group-view-permission-label"
                     :label="i18n('dashboards.users-view-permission')"
                     :subheading="i18n('dashboards.users-view-description')">
                     <el-select
                         :key="elSelectKey"
+                        test-id="dashboard-user-group-view-permission"
                         multiple
                         :disabled="!canShare"
                         v-model="sharedGroupView"
@@ -94,28 +101,29 @@
                 </cly-form-field>
             </div>
 
-            <div class="text-big font-weight-bold bu-mt-4">
+            <div class="text-big font-weight-bold bu-mt-4" data-test-id="dashboard-additional-settings-label">
                 {{i18n('dashboards.additional-settings')}}
             </div>
             <cly-form-field name="send-email">
-                <el-checkbox v-model="drawerScope.editedObject.send_email_invitation">{{i18n('dashboards.send-email')}}</el-checkbox>
+                <el-checkbox v-model="drawerScope.editedObject.send_email_invitation" test-id="dashboard-send-email-checkbox">{{i18n('dashboards.send-email')}}</el-checkbox>
             </cly-form-field>
             <cly-form-field name="use-refresh-rate">
-                <el-checkbox v-model="drawerScope.editedObject.use_refresh_rate">
+                <el-checkbox v-model="drawerScope.editedObject.use_refresh_rate" test-id="dashboard-use-refresh-rate-checkbox">
                     {{ i18nM("dashboards.custom-refresh-rate") }}
-                    <cly-tooltip-icon :tooltip="i18n('dashboards.custom-refresh-rate-description')"></cly-tooltip-icon>
+                    <cly-tooltip-icon :tooltip="i18n('dashboards.custom-refresh-rate-description')" data-test-id="dashboard-custom-refresh-rate-tooltip"></cly-tooltip-icon>
                 </el-checkbox>
                 <cly-form-field
                     v-if="drawerScope.editedObject.use_refresh_rate"
                     name="title"
                     :rules="drawerScope.editedObject.use_refresh_rate ? 'required' : ''">
                     <el-input
                         v-model="drawerScope.editedObject.refreshRate"
+                        test-id="dashboard-custom-refresh-rate-input"
                         placeholder="">
                     </el-input>
                 </cly-form-field>
             </cly-form-field>
 
         </cly-form-step>
     </template>
-</cly-drawer>
+</cly-drawer>

plugins/dashboards/frontend/public/templates/dashboards-menu.html

@@ -1,15 +1,16 @@
 <div style="height: 100%;">
     <div class="cly-vue-sidebar__header">
-        <span class="cly-vue-sidebar__header-title">Dashboards</span>
+        <span class="cly-vue-sidebar__header-title" data-test-id="dashboard-menu-title">Dashboards</span>
         <span class="cly-vue-sidebar__header-button" v-if="canCreate">
-            <el-button type="success" size="small" @click="addDashboard">
+            <el-button type="success" size="small" @click="addDashboard" data-test-id="add-dashboard-button">
                 <i class="ion-plus-circled"></i>
                 <span>New</span>
             </el-button>
         </span>
         <form>
             <el-input
                 class="bu-mt-5 cly-vue-sidebar__header-search"
+                test-id="dashboard-search-box"
                 autocomplete="off"
                 v-model="searchQuery"
                 placeholder="Search in Dashboards">
@@ -20,7 +21,12 @@
     <div class="cly-vue-sidebar__main-menu">
         <vue-scroll :ops="{scrollPanel: { scrollingX: false }}">
             <ul>
-                <li v-for="(dashboard, idx) in allDashboards" :key="dashboard.id" :class="['bu-px-3 bu-mb-1 bu-is-clickable', {'bu-mb-6': (idx === (allDashboards.length - 1) ? true: false)}]">
+                <li 
+                    v-for="(dashboard, idx) in allDashboards" 
+                    :key="dashboard.id" 
+                    :class="['bu-px-3 bu-mb-1 bu-is-clickable', {'bu-mb-6': (idx === (allDashboards.length - 1) ? true: false)}]"
+                    :data-test-id="'custom-dashboard-' + idx"
+                >
                     <a :href="'#/custom/' + dashboard._id">
                         <div
                             style="width: calc(100% - 24px);"

plugins/dashboards/frontend/public/templates/helpers/drawer/metric.html

@@ -1,9 +1,11 @@
 <cly-form-field
     name="metrics"
+    test-id="metric"
     rules="required"
     :label="i18nM(multiple ? 'dashboards.metrics-multi': 'dashboards.metrics-single')">
     <el-select
         :is-full-width="true"
+        test-id="metric"
         :key="rerender"
         style="width: 100%;"
         v-bind="$attrs"
@@ -20,4 +22,4 @@
             :value="metric.value">
         </el-option>
     </el-select>
-</cly-form-field>
+</cly-form-field>

plugins/dashboards/frontend/public/templates/helpers/drawer/source-apps.html

@@ -1,9 +1,11 @@
 <cly-form-field
     name="apps"
+    test-id="source-apps"
     rules="required"
     :label="i18nM('dashboards.source-apps')">
     <cly-app-select
         :key="rerender"
+        test-id="source-apps-select"
         style="width: 100%;"
         v-bind="$attrs"
         v-on="allListeners"
@@ -13,4 +15,4 @@
         :multiple-limit="multipleLimit"
         :placeholder="placeholderText">
     </cly-app-select>
-</cly-form-field>
+</cly-form-field>

plugins/dashboards/frontend/public/templates/helpers/drawer/visualization.html

@@ -1,5 +1,6 @@
 <cly-form-field
     name="visualization"
+    test-id="visualization"
     :rules="{ required: { allowFalse: false } }"
     :subheading="!mute && i18nM('dashbaords.visualization-description')"
     :label="!mute && i18nM('dashbaords.visualization')">
@@ -14,6 +15,7 @@
                 :class="['clyd-visualization__item bu-is-clickable',
                         'bu-is-flex bu-is-flex-direction-column bu-is-justify-content-center bu-is-align-items-center',
                         {'selected': item.value === selectedType}]"
+                :data-test-id="`visualization-item-${item.value}`"
                 @click="onClick(item)">
                 <div class="text-smallish">{{item.label}}</div>
             </div>

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

@@ -1,14 +1,14 @@
 <div class="clyd-apps">
     <hr>
-    <div class="bu-is-flex bu-is-flex-wrap-wrap apps">
+    <div class="bu-is-flex bu-is-flex-wrap-wrap apps" data-test-id="widget-apps">
         <span class="bu-ml-1 text-small has-ellipsis bu-is-flex-shrink-1" v-if="isMultiple" v-tooltip="tooltip">
             {{ i18n("dashboards.multiple-apps-count", apps.length) }}
         </span>
         <div v-else class="bu-is-flex apps__single">
             <div v-if="app.avatar" class="apps__single--avatar bu-mr-1" :style="app.avatar">
-                <span v-if="!app.image" class="has-ellipsis">{{getAppInitials(app.name)}}</span>
+                <span v-if="!app.image" class="has-ellipsis" data-test-id="widget-app-icon">{{getAppInitials(app.name)}}</span>
             </div>
-            <span class="text-small has-ellipsis bu-is-flex-shrink-1">{{app.name}}</span>
+            <span class="text-small has-ellipsis bu-is-flex-shrink-1" data-test-id="widget-app-name">{{app.name}}</span>
         </div>
     </div>
 </div>

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

@@ -1 +1 @@
-<div class="text-small clyd-legend-period has-ellipsis bu-is-flex-shrink-1 bu-mr-1" :class="{'clyd-legend-period--custom': customPeriod ? true: false}">{{period}}</div>
+<div class="text-small clyd-legend-period has-ellipsis bu-is-flex-shrink-1 bu-mr-1" :class="{'clyd-legend-period--custom': customPeriod ? true: false}" data-test-id="widget-period">{{period}}</div>

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

@@ -4,7 +4,7 @@
         <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">
             <div v-for="(label, i) in item.labels" :class="['bu-is-flex bu-is-align-items-center bu-is-flex-shrink-1 bu-px-2 bu-mr-1']" :style="{backgroundColor: label.color + '26', borderRadius: '4px', minWidth: 0}">
                 <i class="fas fa-circle bu-mr-2" :style="{fontSize: '6px', color: label.color}"></i>
-                <span class="text-small has-ellipsis bu-is-flex-shrink-1">{{unescapeHtml(label.label)}}</span>
+                <span class="text-small has-ellipsis bu-is-flex-shrink-1" :data-test-id="'widget-label-' + i">{{unescapeHtml(label.label)}}</span>
             </div>
         </div>
     </div>

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

@@ -1,5 +1,5 @@
 <div v-if="labels" class="clyd-title-labels bu-is-flex bu-is-flex-shrink-1" style="min-width: 0;">
-    <div v-for="(item, idx) in labels" class="bu-ml-1 bu-p-1 text-smallest has-ellipsis">
+    <div v-for="(item, idx) in labels" class="bu-ml-1 bu-p-1 text-smallest has-ellipsis" :data-test-id="'widget-item-' + idx">
         {{item}}
     </div>
 </div>

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">
-    <h4 class="bu-is-flex-shrink-1 has-ellipsis" v-if="title">{{unescapeHtml(title)}}</h4>
+    <h4 class="bu-is-flex-shrink-1 has-ellipsis" v-if="title" data-test-id="widget-title">{{unescapeHtml(title)}}</h4>
     <clyd-title-labels v-if="labels && labels.length" :labels="labels"></clyd-title-labels>
 </div>