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

feat: header invite link tracking (#5001)

Browse Source
This commit is contained in:
Jaanus Sellin 2023-10-13 14:57:20 +03:00 committed by GitHub
parent 2263a1f062
commit c7a990e5a9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 49 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx
View File

@ -1,17 +1,20 @@
import { VFC } from 'react'; import { VFC } from 'react';
import { useNavigate } from 'react-router-dom'; import { Box } from '@mui/material';
import { Box, Button, Typography } from '@mui/material';
import useLoading from 'hooks/useLoading';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { useInviteTokens } from 'hooks/api/getters/useInviteTokens/useInviteTokens';
import { LinkField } from '../LinkField/LinkField';
import { add, formatDistanceToNowStrict, isAfter, parseISO } from 'date-fns';
import { formatDateYMD } from 'utils/formatDate';
import { useLocationSettings } from 'hooks/useLocationSettings';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
import { InviteLinkBarContent } from './InviteLinkBarContent'; import { InviteLinkBarContent } from './InviteLinkBarContent';
export const InviteLinkBar: VFC = () => { export const InviteLinkBar: VFC = () => {
const { trackEvent } = usePlausibleTracker();
const onInviteLinkActionClick = (inviteLink?: string) => {
trackEvent('invite', {
props: {
eventType: inviteLink
? 'link bar action: edit'
: 'link bar action: create',
},
});
};
return ( return (
<Box <Box
sx={(theme) => ({ sx={(theme) => ({
@ -21,12 +24,15 @@ export const InviteLinkBar: VFC = () => {
mb: 2, mb: 2,
borderRadius: `${theme.shape.borderRadiusLarge}px`, borderRadius: `${theme.shape.borderRadiusLarge}px`,
display: 'flex', display: 'flex',
flexDirection: { xs: 'column', md: 'row' }, flexDirection: {
xs: 'column',
md: 'row',
},
border: '2px solid', border: '2px solid',
borderColor: theme.palette.background.alternative, borderColor: theme.palette.background.alternative,
})} })}
> >
<InviteLinkBarContent /> <InviteLinkBarContent onActionClick={onInviteLinkActionClick} />
</Box> </Box>
); );
}; };

11
frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx
View File

@ -10,7 +10,7 @@ import { useLocationSettings } from 'hooks/useLocationSettings';
import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
interface IInviteLinkBarContentProps { interface IInviteLinkBarContentProps {
onActionClick?: () => void; onActionClick?: (inviteLink?: string) => void;
} }
export const StyledBox = styled(Box)(() => ({ export const StyledBox = styled(Box)(() => ({
@ -64,15 +64,8 @@ export const InviteLinkBarContent = ({
); );
const onInviteLinkActionClick = () => { const onInviteLinkActionClick = () => {
trackEvent('invite', { onActionClick?.(inviteLink);
props: {
eventType: inviteLink
? 'link bar action: edit'
: 'link bar action: create',
},
});
navigate('/admin/invite-link'); navigate('/admin/invite-link');
onActionClick?.();
}; };
return ( return (
<> <>

2
frontend/src/component/menu/Header/InviteLink/InviteLinkButton/InviteLinkButton.tsx
View File

@ -5,7 +5,7 @@ import { focusable } from 'themes/themeStyles';
import AccessContext from 'contexts/AccessContext'; import AccessContext from 'contexts/AccessContext';
import { PersonAdd } from '@mui/icons-material'; import { PersonAdd } from '@mui/icons-material';
import { InviteLinkContent } from '../InviteLinkContent'; import { InviteLinkContent } from '../InviteLinkContent';
import { useUiFlag } from '../../../../../hooks/useUiFlag'; import { useUiFlag } from 'hooks/useUiFlag';
const StyledContainer = styled('div')(() => ({ const StyledContainer = styled('div')(() => ({
position: 'relative', position: 'relative',

51
frontend/src/component/menu/Header/InviteLink/InviteLinkContent.tsx
View File

@ -1,12 +1,7 @@
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { Button, Paper, Typography, styled, Link } from '@mui/material'; import { Paper, styled } from '@mui/material';
import { basePath } from 'utils/formatPath'; import { InviteLinkBarContent } from 'component/admin/users/InviteLinkBar/InviteLinkBarContent';
import { IUser } from 'interfaces/user'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
import OpenInNew from '@mui/icons-material/OpenInNew';
import { Link as RouterLink } from 'react-router-dom';
import { UserAvatar } from 'component/common/UserAvatar/UserAvatar';
import { InviteLinkBar } from '../../../admin/users/InviteLinkBar/InviteLinkBar';
import { InviteLinkBarContent } from '../../../admin/users/InviteLinkBar/InviteLinkBarContent';
const StyledPaper = styled(Paper)(({ theme }) => ({ const StyledPaper = styled(Paper)(({ theme }) => ({
display: 'flex', display: 'flex',
@ -36,17 +31,29 @@ export const InviteLinkContent = ({
id, id,
showInviteLinkContent, showInviteLinkContent,
setShowInviteLinkContent, setShowInviteLinkContent,
}: IInviteLinkContentProps) => ( }: IInviteLinkContentProps) => {
<ConditionallyRender const { trackEvent } = usePlausibleTracker();
condition={showInviteLinkContent}
show={ const onInviteLinkActionClick = (inviteLink?: string) => {
<StyledPaper className='dropdown-outline' id={id}> setShowInviteLinkContent(false);
<InviteLinkBarContent trackEvent('invite', {
onActionClick={() => { props: {
setShowInviteLinkContent(false); eventType: inviteLink
}} ? 'header link bar action: edit'
/> : 'header link bar action: create',
</StyledPaper> },
} });
/> };
); return (
<ConditionallyRender
condition={showInviteLinkContent}
show={
<StyledPaper className='dropdown-outline' id={id}>
<InviteLinkBarContent
onActionClick={onInviteLinkActionClick}
/>
</StyledPaper>
}
/>
);
};