feat: track-code-references-actions

frontend/package.json

@@ -51,7 +51,7 @@
     "@babel/register": "^7.12.1",
     "@datadog/ui-extensions-react": "0.32.0",
     "@datadog/ui-extensions-sdk": "0.32.0",
-    "@flagsmith/flagsmith": "^11.0.0-internal.5",
+    "@flagsmith/flagsmith": "^11.0.0-internal.6",
     "@ionic/react": "^7.5.3",
     "@material-ui/core": "4.12.4",
     "@react-oauth/google": "^0.2.8",

frontend/web/components/feature-page/FeatureNavTab/CodeReferences/FeatureCodeReferencesContainer.tsx

@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo, useRef } from 'react'
+import flagsmith from '@flagsmith/flagsmith'
 import { useGetFeatureCodeReferencesQuery } from 'common/services/useCodeReferences'
 import RepoCodeReferencesSection from './components/RepoCodeReferencesSection'
 import { FeatureCodeReferences } from 'common/types/responses'
@@ -34,6 +35,23 @@ const FeatureCodeReferencesContainer: React.FC<
     [data],
   )
 
+  const hasTrackedView = useRef(false)
+  useEffect(() => {
+    if (data.length > 0 && !hasTrackedView.current) {
+      hasTrackedView.current = true
+      const totalRefs = data.reduce(
+        (sum, repo) => sum + repo.code_references.length,
+        0,
+      )
+      flagsmith.trackEvent('code_references_view', {
+        feature_id: featureId,
+        project_id: projectId,
+        repos_count: data.length,
+        total_refs_count: totalRefs,
+      })
+    }
+  }, [data, featureId, projectId])
+
   if (isLoading) {
     return (
       <div className='d-flex justify-content-center items-center'>
@@ -59,6 +77,7 @@ const FeatureCodeReferencesContainer: React.FC<
             key={codeReferencesByRepo[repo].repository_url}
             repositoryName={codeReferencesByRepo[repo].repository_url}
             repositoryScan={codeReferencesByRepo[repo]}
+            featureId={featureId}
           />
         ))}
     </div>

frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/CodeReferenceItem.tsx

@@ -1,12 +1,17 @@
+import flagsmith from '@flagsmith/flagsmith'
 import Icon from 'components/Icon'
-import { CodeReference } from 'common/types/responses'
+import { CodeReference, VCSProvider } from 'common/types/responses'
 
 interface CodeReferenceItemProps {
   codeReference: CodeReference
+  featureId: number
+  vcsProvider: VCSProvider
 }
 
 const CodeReferenceItem: React.FC<CodeReferenceItemProps> = ({
   codeReference,
+  featureId,
+  vcsProvider,
 }) => {
   return (
     <Row className='flex items-center gap-1' noWrap>
@@ -25,6 +30,12 @@ const CodeReferenceItem: React.FC<CodeReferenceItemProps> = ({
         href={codeReference.permalink}
         target='_blank'
         rel='noreferrer'
+        onClick={() => {
+          flagsmith.trackEvent('code_references_click_permalink', {
+            feature_id: featureId,
+            vcs_provider: vcsProvider,
+          })
+        }}
       >
         {codeReference.file_path}:{codeReference.line_number}
       </a>

frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/RepoCodeReferencesSection.tsx

@@ -1,4 +1,5 @@
 import React, { useState } from 'react'
+import flagsmith from '@flagsmith/flagsmith'
 import { FeatureCodeReferences } from 'common/types/responses'
 import moment from 'moment'
 import CodeReferenceItem from './CodeReferenceItem'
@@ -9,9 +10,11 @@ import CodeReferenceScanIndicator from './CodeReferenceScanIndicator'
 interface RepoCodeReferencesSectionProps {
   repositoryScan: FeatureCodeReferences
   repositoryName: string
+  featureId: number
 }
 
 const RepoCodeReferencesSection: React.FC<RepoCodeReferencesSectionProps> = ({
+  featureId,
   repositoryName,
   repositoryScan,
 }) => {
@@ -42,7 +45,16 @@ const RepoCodeReferencesSection: React.FC<RepoCodeReferencesSectionProps> = ({
       >
         <Row
           className='flex justify-content-between items-center cursor-pointer'
-          onClick={() => setIsOpen(!isOpen)}
+          onClick={() => {
+            if (!isOpen) {
+              flagsmith.trackEvent('code_references_expand_repo', {
+                feature_id: featureId,
+                refs_count: repositoryScan?.code_references?.length,
+                vcs_provider: repositoryScan?.vcs_provider,
+              })
+            }
+            setIsOpen(!isOpen)
+          }}
         >
           <RepoSectionHeader
             isOpen={isOpen}
@@ -77,6 +89,8 @@ const RepoCodeReferencesSection: React.FC<RepoCodeReferencesSectionProps> = ({
               {repositoryScan?.code_references?.map((codeReference) => (
                 <CodeReferenceItem
                   codeReference={codeReference}
+                  featureId={featureId}
+                  vcsProvider={repositoryScan?.vcs_provider}
                   key={codeReference.permalink}
                 />
               ))}