feat: add feature naming pattern tracking (#4678)

This PR adds plausible metrics for feature naming patterns. The changes
are tracked whenever the form is submitted and the naming pattern has
changed. We track three different actions:
- added :: if there was no pattern before and now there is one
- removed :: if there was a pattern before and now there is none
- changed :: if there was a pattern before and now there is a different
one

The corresponding event type has been created in plausible.

frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { trim } from 'component/common/util';
 import { StickinessSelect } from 'component/feature/StrategyTypes/FlexibleStrategy/StickinessSelect/StickinessSelect';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@@ -10,6 +10,7 @@ import Input from 'component/common/Input/Input';
 import { FeatureTogglesLimitTooltip } from './FeatureTogglesLimitTooltip';
 import { FeatureFlagNamingTooltip } from './FeatureFlagNamingTooltip';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
+import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 interface IProjectForm {
     projectId: string;
@@ -127,6 +128,27 @@ export const validateFeatureNamingExample = ({
     return { state: 'valid' };
 };
 
+const useFeatureNamePatternTracking = () => {
+    const [previousPattern, setPreviousPattern] = React.useState<string>('');
+    const { trackEvent } = usePlausibleTracker();
+    const eventName = 'feature-naming-pattern' as const;
+
+    const trackPattern = (pattern: string = '') => {
+        if (pattern === previousPattern) {
+            // do nothing; they've probably updated something else in the
+            // project.
+        } else if (pattern === '' && previousPattern !== '') {
+            trackEvent(eventName, { props: { action: 'removed' } });
+        } else if (pattern !== '' && previousPattern === '') {
+            trackEvent(eventName, { props: { action: 'added' } });
+        } else if (pattern !== '' && previousPattern !== '') {
+            trackEvent(eventName, { props: { action: 'edited' } });
+        }
+    };
+
+    return { trackPattern, setPreviousPattern };
+};
+
 const ProjectForm: React.FC<IProjectForm> = ({
     children,
     handleSubmit,
@@ -157,6 +179,13 @@ const ProjectForm: React.FC<IProjectForm> = ({
     const { uiConfig } = useUiConfig();
     const shouldShowFlagNaming = uiConfig.flags.featureNamingPattern;
 
+    const { setPreviousPattern, trackPattern } =
+        useFeatureNamePatternTracking();
+
+    useEffect(() => {
+        setPreviousPattern(featureNamingPattern || '');
+    }, [projectId]);
+
     const updateNamingExampleError = ({
         example,
         pattern,
@@ -208,7 +237,12 @@ const ProjectForm: React.FC<IProjectForm> = ({
     };
 
     return (
-        <StyledForm onSubmit={handleSubmit}>
+        <StyledForm
+            onSubmit={submitEvent => {
+                handleSubmit(submitEvent);
+                trackPattern(featureNamingPattern);
+            }}
+        >
             <StyledDescription>What is your project Id?</StyledDescription>
             <StyledInput
                 label="Project Id"

frontend/src/hooks/usePlausibleTracker.ts

@@ -46,7 +46,8 @@ export type CustomEvents =
     | 'strategy-variants'
     | 'search-filter-suggestions'
     | 'project-metrics'
-    | 'open-integration';
+    | 'open-integration'
+    | 'feature-naming-pattern';
 
 export const usePlausibleTracker = () => {
     const plausible = useContext(PlausibleContext);