Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-10-27 11:02:16 +01:00
Code Issues Projects Releases Wiki Activity

feat: tracking feature buttons clicks (#5714)

Browse Source
This commit is contained in:
Jaanus Sellin 2023-12-21 11:01:16 +02:00 committed by GitHub
parent 9b7981047d
commit 3926ec6c51
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 33 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleActions.test.tsx
View File

@ -14,7 +14,7 @@ test('all options are drawn', async () => {
render(<FeatureToggleListActions onExportClick={() => {}} />);
const batchReviveButton = await screen.findByTitle('Group actions');
const batchReviveButton = await screen.findByTitle('Options');
await userEvent.click(batchReviveButton!);

23
frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.tsx
View File

@ -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<IFeatureToggleListActions> = ({
onExportClick,
}: IFeatureToggleListActions) => {
const { trackEvent } = usePlausibleTracker();
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const featuresExportImport = useUiFlag('featuresExportImport');
const createFeature = useCreateFeaturePath({
@ -45,6 +47,11 @@ export const FeatureToggleListActions: FC<IFeatureToggleListActions> = ({
const open = Boolean(anchorEl);
const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
setAnchorEl(event.currentTarget);
trackEvent('search-feature-buttons', {
props: {
action: 'options',
},
});
};
const handleClose = () => {
setAnchorEl(null);
@ -60,7 +67,7 @@ export const FeatureToggleListActions: FC<IFeatureToggleListActions> = ({
e.stopPropagation();
}}
>
<Tooltip title='Group actions' arrow describeChild>
<Tooltip title='Options' arrow describeChild>
<IconButton
id={id}
aria-controls={open ? menuId : undefined}
@ -91,10 +98,17 @@ export const FeatureToggleListActions: FC<IFeatureToggleListActions> = ({
<PermissionHOC permission={CREATE_FEATURE}>
{({ hasAccess }) => (
<MenuItem
onClick={handleClose}
component={Link}
disabled={!hasAccess}
to={createFeature!.path}
onClick={() => {
handleClose();
trackEvent('search-feature-buttons', {
props: {
action: 'new-feature',
},
});
}}
>
<ListItemIcon>
<Add />
@ -114,6 +128,11 @@ export const FeatureToggleListActions: FC<IFeatureToggleListActions> = ({
onClick={() => {
onExportClick();
handleClose();
trackEvent('search-feature-buttons', {
props: {
action: 'export',
},
});
}}
>
<ListItemIcon>

9
frontend/src/component/feature/FeatureToggleList/FeatureToggleListTable.tsx
View File

@ -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<FeatureSearchResponseSchema>();
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
</Link>

3
frontend/src/hooks/usePlausibleTracker.ts
View File

@ -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);