Upgrade all dependencies to the latest version.

gatsby-browser.tsx

@@ -1,16 +1,9 @@
 import * as React from "react"
 import type { GatsbyBrowser } from "gatsby"
-//import {StoreProvider} from "./src/components/ga4/EnhancedEcommerce/store-context"
 import CustomLayout from "./gatsby/wrapRootElement"
-//import "./src/styles/ecommerce/variables.css"
 
 // TODO - look into making this work like gatsby-node & use typescript for the
 // things that are imported/exported.
 
 export { onInitialClientRender } from "./gatsby/onInitialClientRender"
 export const wrapPageElement: GatsbyBrowser["wrapPageElement"] = CustomLayout
-
-// Wrap every page using a StoreProvider object used by eCommerce demo.
-// export const wrapRootElement = ({ element }) => (
-//     {element}
-// )

gatsby-ssr.tsx

@@ -7,7 +7,6 @@ import CustomLayout from "./gatsby/wrapRootElement"
 // TODO - look into making this work like gatsby-node & use typescript for the
 // things that are imported/exported.
 
-export { onInitialClientRender } from "./gatsby/onInitialClientRender"
 export const wrapPageElement: GatsbySSR["wrapPageElement"] = CustomLayout
 
 // Wrap every page using a StoreProvider object used by eCommerce demo.

gatsby/wrapRootElement.tsx

@@ -85,7 +85,7 @@ const globalTheme = createTheme({
           padding: 0,
         },
         p: (theme: Theme) => ({
-          ... ({paddingBottom: theme.spacing(2)}),
+          ...({paddingBottom: theme.spacing(2)}),
         }),
         a: (theme: Theme) => ({
           color: theme.palette.primary.dark,

jest.config.js

@@ -20,6 +20,12 @@ module.exports = {
     "@/(.*)": "<rootDir>/src/$1",
     ".+\\.(css|styl|less|sass|scss)$": `identity-obj-proxy`,
     ".+\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": `<rootDir>/__mocks__/file-mock.js`,
+    "^gatsby-core-utils/(.*)$": `gatsby-core-utils/dist/$1`, // Workaround for https://github.com/facebook/jest/issues/9771
+    "^gatsby-plugin-utils/(.*)$": [
+      `gatsby-plugin-utils/dist/$1`,
+      `gatsby-plugin-utils/$1`,
+    ], // Workaround for https://github.com/facebook/jest/issues/9771,
+    "^gatsby-page-utils/(.*)$": `gatsby-page-utils/dist/$1`, // Workaround for https://github.com/facebook/jest/issues/9771
   },
   testPathIgnorePatterns: [`node_modules`, `\\.cache`, `<rootDir>.*/public`],
   transformIgnorePatterns: [`node_modules/(?!(gatsby)/)`],

package.json

@@ -58,6 +58,7 @@
     "@testing-library/user-event": "^13.1.8",
     "@types/gapi": "^0.0.39",
     "@types/gapi.auth2": "^0.0.54",
+    "@reach/router": "^1.3.4",
     "@types/gapi.client.analytics": "^3.0.7",
     "@types/gapi.client.analyticsadmin": "^1.0.0",
     "@types/gapi.client.analyticsdata": "^1.0.2",

src/components/GA4Pickers/index.tsx

@@ -126,7 +126,7 @@ export const DimensionsPicker: React.FC<{
           </li>
       )}
       renderInput={params => (
-        <TextField
+        <StyledTextField
           {...params}
           required={required}
           label={label}
@@ -198,7 +198,7 @@ export const MetricsPicker: React.FC<{
           </li>
       )}
       renderInput={params => (
-        <TextField
+        <StyledTextField
           {...params}
           required={required}
           label={label}
@@ -292,7 +292,7 @@ export const DimensionPicker: React.FC<{
         </li>
       )}
       renderInput={params => (
-        <TextField
+        <StyledTextField
           {...params}
           required={required}
           label={label}
@@ -383,7 +383,7 @@ export const MetricPicker: React.FC<{
         </li>
       )}
       renderInput={params => (
-        <TextField
+        <StyledTextField
           {...params}
           required={required}
           label={label}

src/components/PrettyJson.tsx

@@ -114,7 +114,7 @@ const PrettyJson: React.FC<PrettyJsonProps> = ({
         />
       </>
     )
-  }, [object, classes.json, shouldCollapse, tooltipText])
+  }, [object, shouldCollapse, tooltipText])
 
   if (object === undefined) {
     return null

src/components/RequestComposer/RequestComposer.tsx

@@ -132,7 +132,7 @@ const RequestComposer: React.FC<RequestComposerProps> = ({ type }) => {
           Make Request
         </PAB>
     )
-  }, [classes, makeRequest, canMakeRequest])
+  }, [makeRequest, canMakeRequest])
 
   const accountPropertyView = useAccountPropertyView(
     StorageKey.requestComposerAPV,

src/components/Select.tsx

@@ -1,24 +1,9 @@
 import * as React from "react"
-import { styled } from '@mui/material/styles';
 import { TextField } from "@mui/material"
 import clsx from "classnames"
 import { Dispatch } from "../types"
 import Autocomplete from "@mui/material/Autocomplete"
 
-const PREFIX = 'Select';
-
-const classes = {
-  formControl: `${PREFIX}-formControl`
-};
-
-const StyledTextField
- = styled(TextField
-)(() => ({
-  [`& .${classes.formControl}`]: {
-    minWidth: "15ch",
-  }
-}));
-
 export interface SelectOption {
   value: string
   displayName: string
@@ -52,7 +37,7 @@ const Select: React.FC<SelectProps> = ({
   return (
     <Autocomplete<SelectOption, false, true, false>
       disableClearable
-      className={clsx(classes.formControl, className)}
+      className={className}
       autoHighlight
       autoSelect
       options={options}

src/components/SelectMultiple.tsx

@@ -1,24 +1,9 @@
 import * as React from "react"
-import { styled } from '@mui/material/styles';
 import { TextField } from "@mui/material"
 import clsx from "classnames"
 import { Dispatch } from "../types"
 import Autocomplete from "@mui/material/Autocomplete"
 
-const PREFIX = 'Select';
-
-const classes = {
-  formControl: `${PREFIX}-formControl`
-};
-
-const StyledTextField
- = styled(TextField
-)(() => ({
-  [`& .${classes.formControl}`]: {
-    minWidth: "15ch",
-  }
-}));
-
 export interface SelectOption {
   value: string
   displayName: string
@@ -51,7 +36,7 @@ const Select: React.FC<SelectProps> = ({
   return (
     <Autocomplete<SelectOption, true, true, false>
       multiple
-      className={clsx(classes.formControl, className)}
+      className={className}
       autoHighlight
       autoSelect
       options={options}

src/components/TextBox.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { TextField } from "@material-ui/core"
+import { TextField } from "@mui/material"
 import ExternalLink from "./ExternalLink"
 
 export interface TextBoxProps {

src/components/WithHelpText.tsx

@@ -108,12 +108,6 @@ interface WithHelpTextProps {
   shrink?: boolean
   hrGroup?: boolean
 }
-
-interface Props {
-  notched?: boolean
-  shrink?: boolean
-}
-
 const WithHelpText: React.FC<PropsWithChildren<WithHelpTextProps>> = ({
   label,
   children,

src/components/ga4/EnhancedEcommerce/ga-console.tsx

@@ -12,7 +12,7 @@ import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
 import {Link} from "gatsby";
 import {Box, Typography} from "@mui/material";
-import {ChangeEvent, ReactNode, SyntheticEvent} from 'react';
+import {ReactNode, SyntheticEvent} from 'react';
 
 type Props = {
     children: ReactNode,

src/components/ga4/EventBuilder/ValidateEvent/handlers/formatCheckLib.ts

@@ -1,7 +1,8 @@
-import { ValidationMessage } from "../../types"
+import {ValidationMessage} from "../../types"
 import 'object-sizeof'
 import sizeof from "object-sizeof"
-import { eventDefinitions } from "../schemas/eventTypes/eventDefinitions"
+import {eventDefinitions} from "../schemas/eventTypes/eventDefinitions"
+import {InstanceId} from "../../types"
 
 const RESERVED_EVENT_NAMES = [
     "ad_activeview", "ad_click", "ad_exposure", "ad_impression", "ad_query",

src/components/ga4/EventBuilder/ValidateEvent/index.tsx

@@ -131,7 +131,7 @@ interface StyleProps {
 const focusFor = (message: ValidationMessage, useTextBox: boolean) => {
   const { fieldPath } = message
   let id: string | undefined
-  let labelValues: string[] = Object.values(Label)
+  const labelValues: string[] = Object.values(Label)
 
   if (labelValues.includes(fieldPath) && !useTextBox) {
     id = fieldPath
@@ -170,9 +170,7 @@ const Template: React.FC<TemplateProps> = ({
 }) => {
 
   const { instanceId, api_secret } = useContext(EventCtx)!
-  const classes = useStyles({ error, valid })
   const payload = usePayload()
-  const { instanceId, api_secret } = useContext(EventCtx)!
   return (
     <Card
       className={clsx(classes.form, classes.template)}
@@ -192,7 +190,7 @@ const Template: React.FC<TemplateProps> = ({
           {validationMessages.map((message, idx) => (
             <div>
               <li key={idx}>
-                {focusFor(message, useTextBox)}
+                {focusFor(message, useTextBox !== undefined && useTextBox)}
                 {message.description}
                 <br />
                 <a href={message.documentation} target='_blank' rel="noreferrer">Documentation</a>

src/components/ga4/EventBuilder/ValidateEvent/usePayload.ts

@@ -103,7 +103,7 @@ const usePayload = (): {} => {
     [userProperties]
   )
 
-  const payload = useMemo(() => {
+  let payload = useMemo(() => {
     return {
       ...removeUndefined(clientIds),
       ...removeUndefined({ timestamp_micros }),

src/components/ga4/EventBuilder/ValidateEvent/useValidateEvent.ts

@@ -128,7 +128,7 @@ const useValidateEvent = (): Requestable<
 
   const copySharableLink = useCopy(url, "copied link to event")
 
-  const validatePayloadAttributes = (payload: any) => {
+  const validatePayloadAttributes = useCallback((payload: any) => {
     const validator = new Validator(baseContentSchema)
     const formatCheckErrors: ValidationMessage[] | [] = formatCheckLib(
           payload,
@@ -150,7 +150,7 @@ const useValidateEvent = (): Requestable<
       }
 
       return []
-    }
+  }, [api_secret, instanceId, useFirebase])
 
     const validateEvent = useCallback(() => {
       if (status === RequestStatus.InProgress) {
@@ -197,7 +197,7 @@ const useValidateEvent = (): Requestable<
         setValidationMessages(validatorErrors)
         setStatus(RequestStatus.Failed)
       }
-    }, [status, payload, api_secret, instanceId, useFirebase, payloadErrors, useTextBox, validatePayloadAttributes])
+    }, [status, payload, api_secret, instanceId, useFirebase, useTextBox, validatePayloadAttributes])
 
   const defineFieldCode = (error: JSONError) => {
     const { data } = error