Integrate posthog in frontend (#335)

frontend/package.json

@@ -45,6 +45,7 @@
     "moment": "^2.29.4",
     "nprogress": "0.2.0",
     "pluralize": "^8.0.0",
+    "posthog-js": "^1.36.1",
     "qs": "6.9.4",
     "regenerator-runtime": "^0.13.9",
     "remixicon": "^2.5.0",

frontend/scripts/docker-entrypoint.sh

@@ -17,6 +17,7 @@ declare -a ENV_VARIABLES=(
   "VUE_APP_SEGMENT_KEY"
   "VUE_APP_HOTJAR_KEY"
   "VUE_APP_ENV"
+  "VUE_APP_POSTHOG_API_KEY"
 )
 
 for ENV_VAR in "${ENV_VARIABLES[@]}"

frontend/src/assets/scss/badge.scss

@@ -1,6 +1,14 @@
 .badge {
   @apply bg-gray-200 text-gray-900 px-2.5 text-xs py-1 rounded-md;
 
+  &--sm {
+    @apply px-1.5 py-0.5;
+  }
+
+  &--xs {
+    @apply text-3xs py-0.5 px-1;
+  }
+
   &--green {
     @apply bg-green-100 text-green-900;
   }
@@ -28,4 +36,8 @@
   &--yellow {
     @apply bg-yellow-100 text-yellow-900;
   }
+
+  &--light-yellow {
+    @apply bg-yellow-50 text-yellow-600;
+  }
 }

frontend/src/config.js

@@ -31,7 +31,8 @@ const defaultConfig = {
   edition: process.env.VUE_APP_EDITION,
   communityPremium: process.env.VUE_APP_COMMUNITY_PREMIUM,
   env: process.env.VUE_APP_ENV,
-  hotjarKey: process.env.VUE_APP_HOTJAR_KEY
+  hotjarKey: process.env.VUE_APP_HOTJAR_KEY,
+  posthogKey: process.env.VUE_APP_POSTHOG_API_KEY
 }
 
 const composedConfig = {
@@ -54,14 +55,17 @@ const composedConfig = {
   edition: 'CROWD_VUE_APP_EDITION',
   communityPremium: 'CROWD_VUE_APP_COMMUNITY_PREMIUM',
   env: 'CROWD_VUE_APP_ENV',
-  hotjarKey: 'CROWD_VUE_APP_HOTJAR_KEY'
+  hotjarKey: 'CROWD_VUE_APP_HOTJAR_KEY',
+  posthogKey: 'CROWD_VUE_APP_POSTHOG_API_KEY'
 }
 
 const config = defaultConfig.backendUrl
   ? defaultConfig
   : composedConfig
 
+config.isCommunityVersion = config.edition === 'community'
 config.hasPremiumModules =
-  config.edition === 'crowd-hosted' ||
+  !config.isCommunityVersion ||
   config.communityPremium === 'true'
+
 export default config

frontend/src/integrations/integrations-config.js

@@ -12,8 +12,6 @@ import zapier from './zapier'
 import crunchbase from './crunchbase'
 import make from './make'
 
-import config from '@/config'
-
 class IntegrationsConfig {
   get integrations() {
     return {
@@ -22,14 +20,14 @@ class IntegrationsConfig {
       slack,
       twitter,
       devto,
-      ...(config.hasPremiumModules && { hackernews }),
+      hackernews,
       discourse,
       stackoverflow,
       reddit,
       linkedin,
       zapier,
       crunchbase,
-      ...(!config.hasPremiumModules && { make })
+      make
     }
   }
 

frontend/src/main.js

@@ -20,6 +20,7 @@ import LogRocket from 'logrocket'
 import App from '@/app.vue'
 import { vueSanitizeOptions } from '@/plugins/sanitize'
 import marked from '@/plugins/marked'
+import posthog from 'posthog-js'
 
 i18nInit()
 /**
@@ -31,6 +32,15 @@ i18nInit()
     LogRocket.init('nm6fil/crowddev')
   }
 
+  // Initialize posthog for crowd hosted version
+  if (!config.isCommunityVersion) {
+    posthog.init(config.posthogKey, {
+      autocapture: false,
+      capture_pageview: false,
+      persistence: 'cookie'
+    })
+  }
+
   const app = createApp(App)
   const router = await createRouter()
   const store = await createStore(LogRocket)

frontend/src/modules/auth/auth-current-tenant.js

@@ -1,4 +1,6 @@
 import { tenantSubdomain } from '@/modules/tenant/tenant-subdomain'
+import config from '@/config'
+import posthog from 'posthog-js'
 
 /**
  * Auth Current Tenant
@@ -108,6 +110,13 @@ export default class AuthCurrentTenant {
       return this.clear()
     }
 
+    // Set group in posthog with tenant id
+    // Refresh feature flags each time tenant is set
+    if (!config.isCommunityVersion) {
+      posthog.group('tenant', tenant.id)
+      posthog.reloadFeatureFlags()
+    }
+
     localStorage.setItem('tenant', JSON.stringify(tenant))
   }
 

frontend/src/modules/automation/automation-store.js

@@ -1,6 +1,8 @@
+import config from '@/config'
 import { AutomationService } from '@/modules/automation/automation-service'
 import Errors from '@/shared/error/errors'
 import Message from '@/shared/message/message'
+import posthog from 'posthog-js'
 
 const INITIAL_PAGE_SIZE = 20
 
@@ -434,6 +436,12 @@ export default {
         )
 
         commit('CREATE_SUCCESS', response)
+
+        // Make sure that feature flags are updated for automationsCount
+        if (!config.isCommunityVersion) {
+          posthog.reloadFeatureFlags()
+        }
+
         Message.success('Automation created successfully')
       } catch (error) {
         Errors.handle(error)
@@ -452,6 +460,11 @@ export default {
 
         commit('DESTROY_SUCCESS', automationId)
 
+        // Make sure that feature flags are updated for automationsCount
+        if (!config.isCommunityVersion) {
+          posthog.reloadFeatureFlags()
+        }
+
         dispatch(
           `automation/doFetch`,
           rootGetters[`automation/filter`],
@@ -477,6 +490,11 @@ export default {
 
         commit('DESTROY_ALL_SUCCESS', automationIds)
 
+        // Make sure that feature flags are updated for automationsCount
+        if (!config.isCommunityVersion) {
+          posthog.reloadFeatureFlags()
+        }
+
         dispatch(
           `automation/doFetch`,
           rootGetters[`automation/filter`],

frontend/src/modules/automation/components/list/automation-list-table.vue

@@ -107,14 +107,10 @@ export default {
   computed: {
     ...mapGetters({
       rows: 'automation/rows',
-      count: 'automation/count',
       loading: 'automation/loading',
-      pagination: 'automation/pagination',
       selectedRows: 'automation/selectedRows',
-      isMobile: 'layout/isMobile',
       currentUser: 'auth/currentUser',
-      currentTenant: 'auth/currentTenant',
-      paginationLayout: 'layout/paginationLayout'
+      currentTenant: 'auth/currentTenant'
     }),
 
     hasPermissionToEdit() {
@@ -140,23 +136,10 @@ export default {
   },
   methods: {
     ...mapActions({
-      doChangeSort: 'conversation/doChangeSort',
-      doChangePaginationCurrentPage:
-        'conversation/doChangePaginationCurrentPage',
-      doChangePaginationPageSize:
-        'conversation/doChangePaginationPageSize',
-      doMountTable: 'conversation/doMountTable',
-      doDestroy: 'member/doDestroy'
+      doChangeSort: 'automation/doChangeSort',
+      doMountTable: 'automation/doMountTable'
     }),
 
-    doRefresh() {
-      this.doChangePaginationCurrentPage()
-    },
-
-    presenter(row, fieldName) {
-      return AutomationModel.presenter(row, fieldName)
-    },
-
     translate(key) {
       return i18n(key)
     },

frontend/src/modules/automation/pages/automation-list-page.vue

@@ -16,7 +16,7 @@
         <div>
           <el-button
             class="btn btn--primary btn--sm !h-8"
-            @click="isAutomationDrawerOpen = true"
+            @click="onAddWebhookClick"
           >
             Add webhook
           </el-button>
@@ -74,6 +74,10 @@ import AppWebhookForm from '@/modules/automation/components/webhooks/webhook-for
 import AppWebhookExecutionList from '@/modules/automation/components/webhooks/webhook-execution-list'
 import { mapGetters, mapActions } from 'vuex'
 import pluralize from 'pluralize'
+import {
+  isFeatureEnabled,
+  featureFlags
+} from '@/utils/posthog'
 
 export default {
   name: 'AppAutomationListPage',
@@ -129,6 +133,17 @@ export default {
       this.isExecutionsDrawerOpen = false
       this.automation = null
     },
+    async onAddWebhookClick() {
+      const isFlagEnabled = await isFeatureEnabled(
+        featureFlags.automations
+      )
+
+      if (isFlagEnabled) {
+        this.isAutomationDrawerOpen = true
+      } else {
+        this.$router.push({ name: 'settingsPaywall' })
+      }
+    },
     pluralize
   }
 }