diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleActions.test.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleActions.test.tsx index 1d311b9709..c7e32cac80 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleActions.test.tsx +++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleActions.test.tsx @@ -14,7 +14,7 @@ test('all options are drawn', async () => { render( {}} />); - const batchReviveButton = await screen.findByTitle('Group actions'); + const batchReviveButton = await screen.findByTitle('Options'); await userEvent.click(batchReviveButton!); diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.tsx index 12bdea9926..5f87d26228 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.tsx +++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.tsx @@ -17,6 +17,7 @@ import { useUiFlag } from 'hooks/useUiFlag'; import { CREATE_FEATURE } from 'component/providers/AccessProvider/permissions'; import { PermissionHOC } from 'component/common/PermissionHOC/PermissionHOC'; import { useCreateFeaturePath } from 'component/feature/CreateFeatureButton/useCreateFeaturePath'; +import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; const StyledActions = styled('div')(({ theme }) => ({ display: 'flex', @@ -35,6 +36,7 @@ interface IFeatureToggleListActions { export const FeatureToggleListActions: FC = ({ onExportClick, }: IFeatureToggleListActions) => { + const { trackEvent } = usePlausibleTracker(); const [anchorEl, setAnchorEl] = useState(null); const featuresExportImport = useUiFlag('featuresExportImport'); const createFeature = useCreateFeaturePath({ @@ -45,6 +47,11 @@ export const FeatureToggleListActions: FC = ({ const open = Boolean(anchorEl); const handleClick = (event: React.MouseEvent) => { setAnchorEl(event.currentTarget); + trackEvent('search-feature-buttons', { + props: { + action: 'options', + }, + }); }; const handleClose = () => { setAnchorEl(null); @@ -60,7 +67,7 @@ export const FeatureToggleListActions: FC = ({ e.stopPropagation(); }} > - + = ({ {({ hasAccess }) => ( { + handleClose(); + trackEvent('search-feature-buttons', { + props: { + action: 'new-feature', + }, + }); + }} > @@ -114,6 +128,11 @@ export const FeatureToggleListActions: FC = ({ onClick={() => { onExportClick(); handleClose(); + trackEvent('search-feature-buttons', { + props: { + action: 'export', + }, + }); }} > diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx index acbe3cea0d..957c37544c 100644 --- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx +++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx @@ -46,6 +46,7 @@ import { useUiFlag } from 'hooks/useUiFlag'; import { FeatureToggleListTable as LegacyFeatureToggleListTable } from './LegacyFeatureToggleListTable'; import { FeatureToggleListActions } from './FeatureToggleListActions/FeatureToggleListActions'; import useLoading from 'hooks/useLoading'; +import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; export const featuresPlaceholder = Array(15).fill({ name: 'Name of the feature', @@ -59,6 +60,7 @@ const columnHelper = createColumnHelper(); const FeatureToggleListTableComponent: VFC = () => { const theme = useTheme(); + const { trackEvent } = usePlausibleTracker(); const { environments } = useEnvironments(); const enabledEnvironments = environments .filter((env) => env.enabled) @@ -285,6 +287,13 @@ const FeatureToggleListTableComponent: VFC = () => { to='/archive' underline='always' sx={{ marginRight: 2, ...focusable(theme) }} + onClick={() => { + trackEvent('search-feature-buttons', { + props: { + action: 'archive', + }, + }); + }} > View archive diff --git a/frontend/src/hooks/usePlausibleTracker.ts b/frontend/src/hooks/usePlausibleTracker.ts index b6f50ea95a..39ee0f0351 100644 --- a/frontend/src/hooks/usePlausibleTracker.ts +++ b/frontend/src/hooks/usePlausibleTracker.ts @@ -52,7 +52,8 @@ export type CustomEvents = | 'dependent_features' | 'playground_token_input_used' | 'search-filter' - | 'scheduled-configuration-changes'; + | 'scheduled-configuration-changes' + | 'search-feature-buttons'; export const usePlausibleTracker = () => { const plausible = useContext(PlausibleContext);