Fix analytics for sign up page view (#1324)

Summary: TSIA.

Type of change: /kind bugfix

Test Plan: View signup page (through any means). Event should now be
tracked when permitted to do so.

---------

Signed-off-by: Nick Lanam <nlanam@pixielabs.ai>

Author: NickLanam

src/ui/src/components/auth/auth-box.tsx

@@ -23,6 +23,7 @@ import { Button, Link, Typography } from '@mui/material';
 import { Theme } from '@mui/material/styles';
 import { createStyles, makeStyles } from '@mui/styles';
 
+import pixieAnalytics from 'app/utils/analytics';
 import { WithChildren } from 'app/utils/react-boilerplate';
 
 import { PixienautBox } from './pixienaut-box';
@@ -87,6 +88,11 @@ export const AuthBox: React.FC<WithChildren<AuthBoxProps>> = React.memo((props)
     children,
   } = props;
   const classes = useStyles();
+
+  const reportToggleClick = React.useCallback(() => {
+    pixieAnalytics.track('Switched between Login and Signup', { newUrl: toggleURL });
+  }, [toggleURL]);
+
   return (
     <PixienautBox>
       <Typography variant='h1' className={classes.title}>
@@ -120,8 +126,14 @@ export const AuthBox: React.FC<WithChildren<AuthBoxProps>> = React.memo((props)
         <Typography variant='subtitle2' className={classes.account}>
           {buttonCaption}
         </Typography>
-        {/* eslint-disable-next-line react-memo/require-usememo */}
-        <Button component={Link} color='primary' href={toggleURL} sx={{ ml: buttonCaption ? 1 : 0 }}>
+        <Button
+          component={Link}
+          color='primary'
+          href={toggleURL}
+          onClick={reportToggleClick}
+          // eslint-disable-next-line react-memo/require-usememo
+          sx={{ ml: buttonCaption ? 1 : 0 }}
+        >
           {buttonText}
         </Button>
       </div>

src/ui/src/pages/auth/auth0-oauth-provider.ts

@@ -23,6 +23,7 @@ import { UserManager } from 'oidc-client';
 import { FormStructure } from 'app/components';
 import { Auth0Buttons } from 'app/containers/auth/auth0-buttons';
 import { AUTH_CLIENT_ID, AUTH_EMAIL_PASSWORD_CONN, AUTH_URI } from 'app/containers/constants';
+import pixieAnalytics from 'app/utils/analytics';
 
 import { getSignupArgs, CallbackArgs, getLoginArgs } from './callback-url';
 
@@ -37,6 +38,7 @@ export const Auth0Client = {
   }),
 
   redirectToGoogleLogin(): void {
+    pixieAnalytics.track('Redirect to Google login');
     this.userManager.signinRedirect({
       extraQueryParams: {
         connection: 'google-oauth2',
@@ -49,6 +51,7 @@ export const Auth0Client = {
   },
 
   redirectToGoogleSignup(): void {
+    pixieAnalytics.track('Redirect to Google signup');
     this.userManager.signinRedirect({
       extraQueryParams: {
         connection: 'google-oauth2',
@@ -61,6 +64,7 @@ export const Auth0Client = {
   },
 
   redirectToEmailLogin(): void {
+    pixieAnalytics.track('Redirect to email login');
     this.userManager.signinRedirect({
       extraQueryParams: {
         connection: AUTH_EMAIL_PASSWORD_CONN,
@@ -75,6 +79,7 @@ export const Auth0Client = {
   },
 
   redirectToEmailSignup(): void {
+    pixieAnalytics.track('Redirect to email signup');
     this.userManager.signinRedirect({
       extraQueryParams: {
         connection: AUTH_EMAIL_PASSWORD_CONN,

src/ui/src/pages/auth/oidc-oauth-provider.ts

@@ -26,6 +26,7 @@ import {
   OIDC_CLIENT_ID, OIDC_HOST, OIDC_METADATA_URL, OIDC_ADDITIONAL_SCOPES,
   OIDC_SOCIAL_CONFIG_LOGIN, OIDC_SOCIAL_CONFIG_SIGNUP,
 } from 'app/containers/constants';
+import pixieAnalytics from 'app/utils/analytics';
 
 import { CallbackArgs, getLoginArgs, getSignupArgs } from './callback-url';
 
@@ -49,6 +50,7 @@ export const OIDCClient = {
       extraQueryParams.invite = true;
     }
 
+    pixieAnalytics.track('Redirect to login', { args, extraQueryParams });
     this.userManager.signinRedirect({
       extraQueryParams,
       prompt: 'login',
@@ -65,6 +67,7 @@ export const OIDCClient = {
       extraQueryParams.invite = true;
     }
 
+    pixieAnalytics.track('Redirect to signup', { args, extraQueryParams });
     this.userManager.signinRedirect({
       extraQueryParams,
       prompt: 'login',

src/ui/src/pages/auth/signup.tsx

@@ -23,6 +23,7 @@ import { Theme } from '@mui/material/styles';
 import { createStyles, makeStyles } from '@mui/styles';
 
 import { AuthBox, SignupMarcom } from 'app/components';
+import pixieAnalytics from 'app/utils/analytics';
 
 import { BasePage } from './base';
 import { GetOAuthProvider } from './utils';
@@ -43,6 +44,10 @@ const useStyles = makeStyles(({ breakpoints }: Theme) => createStyles({
 }), { name: 'SignupPage' });
 
 export const SignupPage = React.memo(() => {
+  React.useEffect(() => {
+    pixieAnalytics.track('Signup page viewed');
+  }, []);
+
   const classes = useStyles();
   const authClient = React.useMemo(() => GetOAuthProvider(), []);
   const buttons = React.useMemo(