First version of eagle eye feed (#507)

Author: joanagmaia

frontend/package-lock.json

@@ -59,12 +59,14 @@
     "vue-json-pretty": "^2.2.2",
     "vue-router": "^4.1.5",
     "vue3-click-away": "^1.2.4",
+    "vue3-lazyload": "^0.3.6",
     "vuedraggable": "^4.1.0",
     "vuex": "^4.0.2",
     "xlsx": "^0.17.2",
     "yup": "^0.32.11"
   },
   "devDependencies": {
+    "@tailwindcss/line-clamp": "^0.4.2",
     "@tiptap/extension-link": "^2.0.0-beta.202",
     "@vue/cli-plugin-babel": "^5.0.8",
     "@vue/cli-plugin-eslint": "^5.0.1",

frontend/package.json

@@ -79,37 +79,6 @@ hr {
   flex-wrap: wrap;
 }
 
-[class^='text-limit'],
-[class*=' text-limit'] {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-box-orient: vertical;
-}
-
-// Limits text to 1 line
-.text-limit-1 {
-  -webkit-line-clamp: 1;
-  line-clamp: 1;
-}
-
-// Limits text to 1 line
-.text-limit-2 {
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-}
-// Limits text to 1 line
-.text-limit-3 {
-  -webkit-line-clamp: 3;
-  line-clamp: 3;
-}
-
-// Limits text to 4 lines
-.text-limit-4 {
-  -webkit-line-clamp: 4;
-  line-clamp: 4;
-}
-
 // Disable autocomplete background
 input:-webkit-autofill,
 input:-webkit-autofill:hover,

frontend/src/assets/scss/layout.scss

@@ -24,6 +24,7 @@ import App from '@/app.vue'
 import { vueSanitizeOptions } from '@/plugins/sanitize'
 import marked from '@/plugins/marked'
 import posthog from 'posthog-js'
+import VueLazyLoad from 'vue3-lazyload'
 
 i18nInit()
 /**
@@ -57,6 +58,8 @@ i18nInit()
   app.use(Vue3Sanitize, vueSanitizeOptions)
   app.use(VueClickAway)
   app.use(marked)
+  app.use(VueLazyLoad)
+
   app.config.productionTip =
     process.env.NODE_ENV === 'production'
 

frontend/src/jsons/eagle-eye-sources.json

@@ -44,7 +44,7 @@
             :display-title="false"
             class="text-sm"
             :class="{
-              'text-limit-1': !displayContent && !showMore
+              'line-clamp-1': !displayContent && !showMore
             }"
             :show-more="showMore"
             :limit="limit"

frontend/src/main.js

@@ -3,9 +3,13 @@
     <app-menu></app-menu>
     <el-container :style="elMainStyle">
       <el-main id="main-page-wrapper" class="relative">
-        <div :class="computedBannerWrapperClass">
+        <div
+          :class="{
+            'pt-16': showBanner
+          }"
+        >
           <banner
-            v-if="shouldShowSampleDataAlert"
+            v-if="showSampleDataAlert"
             variant="alert"
           >
             <div
@@ -23,7 +27,7 @@
             </div>
           </banner>
           <banner
-            v-if="shouldShowIntegrationsErrorAlert"
+            v-if="showIntegrationsErrorAlert"
             variant="alert"
           >
             <div
@@ -41,7 +45,7 @@
           </banner>
 
           <banner
-            v-if="shouldShowIntegrationsInProgressAlert"
+            v-if="showIntegrationsInProgressAlert"
             variant="info"
           >
             <div
@@ -67,7 +71,7 @@
             </div>
           </banner>
           <banner
-            v-if="shouldShowTenantCreatingAlert"
+            v-if="showTenantCreatingAlert"
             variant="info"
           >
             <div
@@ -84,10 +88,7 @@
               completely loaded.
             </div>
           </banner>
-          <banner
-            v-if="shouldShowPMFSurveyAlert"
-            variant="info"
-          >
+          <banner v-if="showPMFSurveyAlert" variant="info">
             <div
               class="flex items-center justify-center grow text-sm"
             >
@@ -129,7 +130,6 @@ import { mapActions, mapGetters } from 'vuex'
 import Banner from '@/shared/banner/banner.vue'
 import identify from '@/shared/monitoring/identify'
 import ConfirmDialog from '@/shared/dialog/confirm-dialog.js'
-import moment from 'moment'
 import config from '@/config'
 
 export default {
@@ -160,7 +160,16 @@ export default {
       currentUser: 'auth/currentUser',
       currentTenant: 'auth/currentTenant',
       integrationsInProgress: 'integration/inProgress',
-      integrationsWithErrors: 'integration/withErrors'
+      integrationsWithErrors: 'integration/withErrors',
+      showSampleDataAlert: 'tenant/showSampleDataAlert',
+      showIntegrationsErrorAlert:
+        'tenant/showIntegrationsErrorAlert',
+      showIntegrationsInProgressAlert:
+        'tenant/showIntegrationsInProgressAlert',
+      showTenantCreatingAlert:
+        'tenant/showTenantCreatingAlert',
+      showPMFSurveyAlert: 'tenant/showPMFSurveyAlert',
+      showBanner: 'tenant/showBanner'
     }),
     integrationsInProgressToString() {
       const arr = this.integrationsInProgress.map(
@@ -178,43 +187,6 @@ export default {
         )
       }
     },
-    shouldShowIntegrationsInProgressAlert() {
-      return this.integrationsInProgress.length > 0
-    },
-    shouldShowIntegrationsErrorAlert() {
-      return (
-        this.integrationsWithErrors.length > 0 &&
-        this.$route.name !== 'integration'
-      )
-    },
-    shouldShowSampleDataAlert() {
-      return this.currentTenant.hasSampleData
-    },
-    shouldShowPMFSurveyAlert() {
-      return (
-        config.typeformId &&
-        config.typeformTitle &&
-        !this.hideTypeformBanner
-      )
-    },
-    shouldShowTenantCreatingAlert() {
-      return (
-        moment().diff(
-          moment(this.currentTenant.createdAt),
-          'minutes'
-        ) <= 2
-      )
-    },
-    computedBannerWrapperClass() {
-      return {
-        'pt-16':
-          this.shouldShowSampleDataAlert ||
-          this.shouldShowIntegrationsErrorAlert ||
-          this.shouldShowIntegrationsInProgressAlert ||
-          this.shouldShowTenantCreatingAlert ||
-          this.shouldShowPMFSurveyAlert
-      }
-    },
     elMainStyle() {
       if (this.isMobile && !this.collapsed) {
         return {
@@ -280,30 +252,6 @@ export default {
           // as long as it's not one of the above reserved names.
         },
 
-        account: {
-          id: this.currentTenant.id, // Required if using Pendo Feedback, default uses the value 'ACCOUNT-UNIQUE-ID'
-          name: this.currentTenant.name, // Optional
-          is_paying: this.currentTenant.plan !== 'Essential' // Recommended if using Pendo Feedback
-          // monthly_value:// Recommended if using Pendo Feedback
-          // planLevel:    // Optional
-          // planPrice:    // Optional
-          // creationDate: // Optional
-
-          // You can add any additional account level key-values here,
-          // as long as it's not one of the above reserved names.
-        }
-      })
-      console.log({
-        visitor: {
-          id: this.currentUser.id, // Required if user is logged in, default creates anonymous ID
-          email: this.currentUser.email, // Recommended if using Pendo Feedback, or NPS Email
-          full_name: this.currentUser.fullName // Recommended if using Pendo Feedback
-          // role:         // Optional
-
-          // You can add any additional visitor level key-values here,
-          // as long as it's not one of the above reserved names.
-        },
-
         account: {
           id: this.currentTenant.id, // Required if using Pendo Feedback, default uses the value 'ACCOUNT-UNIQUE-ID'
           name: this.currentTenant.name, // Optional