feat: header invite link tracking (#5001)

frontend/src/component/admin/users/InviteLinkBar/InviteLinkBar.tsx

@@ -1,17 +1,20 @@
 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 { InviteLinkBarContent } from './InviteLinkBarContent';
 
 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 (
         <Box
             sx={(theme) => ({
@@ -21,12 +24,15 @@ export const InviteLinkBar: VFC = () => {
                 mb: 2,
                 borderRadius: `${theme.shape.borderRadiusLarge}px`,
                 display: 'flex',
-                flexDirection: { xs: 'column', md: 'row' },
+                flexDirection: {
+                    xs: 'column',
+                    md: 'row',
+                },
                 border: '2px solid',
                 borderColor: theme.palette.background.alternative,
             })}
         >
-            <InviteLinkBarContent />
+            <InviteLinkBarContent onActionClick={onInviteLinkActionClick} />
         </Box>
     );
 };

frontend/src/component/admin/users/InviteLinkBar/InviteLinkBarContent.tsx

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

frontend/src/component/menu/Header/InviteLink/InviteLinkButton/InviteLinkButton.tsx

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

frontend/src/component/menu/Header/InviteLink/InviteLinkContent.tsx

@@ -1,12 +1,7 @@
 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 }) => ({
     display: 'flex',
@@ -36,17 +31,29 @@ export const InviteLinkContent = ({
     id,
     showInviteLinkContent,
     setShowInviteLinkContent,
-}: IInviteLinkContentProps) => (
+}: IInviteLinkContentProps) => {
+    const { trackEvent } = usePlausibleTracker();
+
+    const onInviteLinkActionClick = (inviteLink?: string) => {
+        setShowInviteLinkContent(false);
+        trackEvent('invite', {
+            props: {
+                eventType: inviteLink
+                    ? 'header link bar action: edit'
+                    : 'header link bar action: create',
+            },
+        });
+    };
+    return (
         <ConditionallyRender
             condition={showInviteLinkContent}
             show={
                 <StyledPaper className='dropdown-outline' id={id}>
                     <InviteLinkBarContent
-                    onActionClick={() => {
+                        onActionClick={onInviteLinkActionClick}
-                        setShowInviteLinkContent(false);
-                    }}
                     />
                 </StyledPaper>
             }
         />
-);
+    );
+};