feat(ACC-643): add posthog config to UI

.github/workflows/saas-deploy-dev.yml

@@ -45,7 +45,10 @@ jobs:
         run: kubectl set image deployment netmaker-ui netmaker-ui=${{ github.repository_owner }}/netmaker-ui-saas:${{ env.TAG }} -n accounts
 
       - name: Set Intercom vars
-        run: kubectl set env deployment netmaker-ui INTERCOM_APP_ID=al371us8 -n accounts
+        run: |
+          kubectl set env deployment netmaker-ui INTERCOM_APP_ID=al371us8 -n accounts
+          kubectl set env deployment netmaker-ui PUBLIC_POSTHOG_HOST=${{ secrets.POSTHOG_HOST }} -n accounts
+          kubectl set env deployment netmaker-ui PUBLIC_POSTHOG_KEY=${{ secrets.POSTHOG_DEV_KEY }} -n accounts
 
       - name: Deploy to k8s cluster
         run: kubectl rollout restart deploy netmaker-ui -n accounts

.github/workflows/saas-deploy-prod.yml

@@ -46,8 +46,10 @@ jobs:
         run: kubectl set image deployment netmaker-ui netmaker-ui=${{ github.repository_owner }}/netmaker-ui-saas:${{ env.TAG }} -n accounts
 
       - name: Set Intercom vars
-        run: kubectl set env deployment netmaker-ui INTERCOM_APP_ID=al371us8 -n accounts
-
+        run: | 
+          kubectl set env deployment netmaker-ui INTERCOM_APP_ID=al371us8 -n accounts
+          kubectl set env deployment netmaker-ui PUBLIC_POSTHOG_HOST=${{ secrets.POSTHOG_HOST }} -n accounts
+          kubectl set env deployment netmaker-ui PUBLIC_POSTHOG_KEY=${{ secrets.POSTHOG_KEY }} -n accounts
       - name: Deploy to k8s cluster
         run: kubectl rollout restart deploy netmaker-ui -n accounts
 

.github/workflows/saas-deploy-staging.yml

@@ -46,7 +46,10 @@ jobs:
         run: kubectl set image deployment netmaker-ui netmaker-ui=${{ github.repository_owner }}/netmaker-ui-saas:${{ env.TAG }} -n accounts
 
       - name: Set Intercom vars
-        run: kubectl set env deployment netmaker-ui INTERCOM_APP_ID=al371us8 -n accounts
+        run: | 
+          kubectl set env deployment netmaker-ui INTERCOM_APP_ID=al371us8 -n accounts
+          kubectl set env deployment netmaker-ui PUBLIC_POSTHOG_HOST=${{ secrets.POSTHOG_HOST }} -n accounts
+          kubectl set env deployment netmaker-ui PUBLIC_POSTHOG_KEY=${{ secrets.POSTHOG_DEV_KEY }} -n accounts
 
       - name: Deploy to k8s cluster
         run: kubectl rollout restart deploy netmaker-ui -n accounts

generate-config.sh

@@ -16,12 +16,26 @@ if [ -z "${INTERCOM_APP_ID:-}" ]; then
   INTERCOM_APP_ID=""
 fi
 
+# ensure it is empty string if not set
+if [ -z "${PUBLIC_POSTHOG_HOST:-}" ]; then
+  PUBLIC_POSTHOG_HOST=""
+fi
+
+# ensure it is empty string if not set
+if [ -z "${PUBLIC_POSTHOG_KEY:-}" ]; then
+  PUBLIC_POSTHOG_KEY=""
+fi
+
 cat >/usr/share/nginx/html/nmui-config.js <<EOF
 window.NMUI_AMUI_URL='$AMUI_URL';
 window.NMUI_BACKEND_URL='$BACKEND_URL';
 window.NMUI_INTERCOM_APP_ID='$INTERCOM_APP_ID';
+window.NMUI_PUBLIC_POSTHOG_HOST='$PUBLIC_POSTHOG_HOST';
+window.NMUI_PUBLIC_POSTHOG_KEY='$PUBLIC_POSTHOG_KEY';
 EOF
 
 echo ">>>> NMUI_AMUI_URL set to: $AMUI_URL <<<<<"
 echo ">>>> NMUI_BACKEND_URL set to: $BACKEND_URL <<<<<"
 echo ">>>> NMUI_INTERCOM_APP_ID set to: $INTERCOM_APP_ID <<<<<"
+echo ">>>> NMUI_PUBLIC_POSTHOG_HOST set to: $PUBLIC_POSTHOG_HOST <<<<<"
+echo ">>>> NMUI_PUBLIC_POSTHOG_KEY set to: ***** <<<<<"

package.json

@@ -38,6 +38,7 @@
     "immer": "^10.1.1",
     "lodash": "^4.17.21",
     "lucide-react": "^0.408.0",
+    "posthog-js": "^1.148.1",
     "rc-virtual-list": "^3.14.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

src/main.tsx

@@ -6,13 +6,36 @@ import './i18n/i18n';
 import { INTERCOM_APP_ID, isSaasBuild, setupTenantConfig } from './services/BaseService';
 import { IntercomProvider } from 'react-use-intercom';
 import 'animate.css';
+import { getPostHogHost, getPostHogPublicApiKey } from './utils/RouteUtils';
+import { PostHogProvider } from 'posthog-js/react';
 
 await setupTenantConfig();
 
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
-  <React.StrictMode>
-    <IntercomProvider appId={INTERCOM_APP_ID} autoBoot={false} shouldInitialize={isSaasBuild} initializeDelay={2000}>
-      <App />
-    </IntercomProvider>
-  </React.StrictMode>,
-);
+const options = {
+  api_host: getPostHogHost(),
+};
+
+if (isSaasBuild) {
+  ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+    <React.StrictMode>
+      <PostHogProvider apiKey={getPostHogPublicApiKey()} options={options}>
+        <IntercomProvider
+          appId={INTERCOM_APP_ID}
+          autoBoot={false}
+          shouldInitialize={isSaasBuild}
+          initializeDelay={2000}
+        >
+          <App />
+        </IntercomProvider>
+      </PostHogProvider>
+    </React.StrictMode>,
+  );
+} else {
+  ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+    <React.StrictMode>
+      <IntercomProvider appId={INTERCOM_APP_ID} autoBoot={false} shouldInitialize={isSaasBuild} initializeDelay={2000}>
+        <App />
+      </IntercomProvider>
+    </React.StrictMode>,
+  );
+}

src/utils/RouteUtils.ts

@@ -105,6 +105,16 @@ export function getNetmakerTrialPeriodDocs() {
   return import.meta.env.VITE_NETMAKER_TRIAL_PERIOD_DOCS_URL;
 }
 
+// Function to get PostHog public API key
+export function getPostHogPublicApiKey() {
+  return (window as any).NMUI_PUBLIC_POSTHOG_KEY || import.meta.env.VITE_PUBLIC_POSTHOG_KEY;
+}
+
+// Function to get PostHog host
+export function getPostHogHost() {
+  return (window as any).NMUI_PUBLIC_POSTHOG_HOST || import.meta.env.VITE_PUBLIC_POSTHOG_HOST;
+}
+
 // Function to get netclient download link and filename based on OS, arch and type
 export function getNetclientDownloadLink(os: AvailableOses, arch: AvailableArchs): [string, string] {
   const fileNamePlaceholder = ':fileName';