diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 4782efe7eed6..946fa902c0dc 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -25,7 +25,7 @@ "@dnd-kit/abstract": "^0.3.2", "@dnd-kit/helpers": "^0.3.2", "@dnd-kit/react": "^0.3.2", - "@flagsmith/flagsmith": "^11.0.0-internal.5", + "@flagsmith/flagsmith": "^11.0.0-internal.6", "@ionic/react": "^7.5.3", "@react-oauth/google": "^0.2.8", "@reduxjs/toolkit": "1.9.1", diff --git a/frontend/package.json b/frontend/package.json index 27106b6514ee..33f3281631be 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -55,7 +55,7 @@ "@dnd-kit/abstract": "^0.3.2", "@dnd-kit/helpers": "^0.3.2", "@dnd-kit/react": "^0.3.2", - "@flagsmith/flagsmith": "^11.0.0-internal.5", + "@flagsmith/flagsmith": "^11.0.0-internal.6", "@ionic/react": "^7.5.3", "@react-oauth/google": "^0.2.8", "@reduxjs/toolkit": "1.9.1", diff --git a/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/FeatureCodeReferencesContainer.tsx b/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/FeatureCodeReferencesContainer.tsx index 42227eb39165..4ede1c2b5bfc 100644 --- a/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/FeatureCodeReferencesContainer.tsx +++ b/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 (
@@ -59,6 +77,7 @@ const FeatureCodeReferencesContainer: React.FC< key={codeReferencesByRepo[repo].repository_url} repositoryName={codeReferencesByRepo[repo].repository_url} repositoryScan={codeReferencesByRepo[repo]} + featureId={featureId} /> ))}
diff --git a/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/CodeReferenceItem.tsx b/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/CodeReferenceItem.tsx index edeb324c30c0..334a16903db8 100644 --- a/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/CodeReferenceItem.tsx +++ b/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 = ({ codeReference, + featureId, + vcsProvider, }) => { return ( @@ -25,6 +30,12 @@ const CodeReferenceItem: React.FC = ({ 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} diff --git a/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/RepoCodeReferencesSection.tsx b/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/RepoCodeReferencesSection.tsx index 48adc5f7c5f8..cc8018dea91a 100644 --- a/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/RepoCodeReferencesSection.tsx +++ b/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 = ({ + featureId, repositoryName, repositoryScan, }) => { @@ -42,7 +45,16 @@ const RepoCodeReferencesSection: React.FC = ({ > 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) + }} > = ({ {repositoryScan?.code_references?.map((codeReference) => ( ))} diff --git a/frontend/web/components/modals/create-feature/tabs/UsageTab.tsx b/frontend/web/components/modals/create-feature/tabs/UsageTab.tsx index e82c2d10f166..2bbb03f78058 100644 --- a/frontend/web/components/modals/create-feature/tabs/UsageTab.tsx +++ b/frontend/web/components/modals/create-feature/tabs/UsageTab.tsx @@ -1,4 +1,5 @@ -import React, { FC } from 'react' +import { FC } from 'react' +import flagsmith from '@flagsmith/flagsmith' import Project from 'common/project' import FeatureAnalytics from 'components/feature-page/FeatureNavTab/FeatureAnalytics' import FeatureCodeReferencesContainer from 'components/feature-page/FeatureNavTab/CodeReferences/FeatureCodeReferencesContainer' @@ -45,6 +46,11 @@ const UsageTab: FC = ({ target='_blank' href='https://docs.flagsmith.com/managing-flags/code-references' rel='noreferrer' + onClick={() => { + flagsmith.trackEvent('code_references_click_docs', { + feature_id: featureId, + }) + }} > Learn more diff --git a/frontend/web/components/navigation/navbars/ProjectNavbar.tsx b/frontend/web/components/navigation/navbars/ProjectNavbar.tsx index 19a96788b2c1..e2666ff3355a 100644 --- a/frontend/web/components/navigation/navbars/ProjectNavbar.tsx +++ b/frontend/web/components/navigation/navbars/ProjectNavbar.tsx @@ -51,18 +51,18 @@ const ProjectNavbar: FC = ({ environmentId, projectId }) => { > Segments - {Utils.getFlagsmithHasFeature('feature_lifecycle') && ( - } - id='lifecycle-link' - to={`/project/${projectId}/lifecycle`} - isActive={(_, location) => - location.pathname.startsWith(`/project/${projectId}/lifecycle`) - } - > - Feature Lifecycle - - )} + {Utils.getFlagsmithHasFeature('feature_lifecycle') && ( + } + id='lifecycle-link' + to={`/project/${projectId}/lifecycle`} + isActive={(_, location) => + location.pathname.startsWith(`/project/${projectId}/lifecycle`) + } + > + Feature Lifecycle + + )}