@@ -83,9 +101,9 @@ const textClamp = (text: string, maxWidth: number) => {
const AccountCell: React.FC<{
account: AccountSummary | undefined
- classes: ReturnType
+
search: string | undefined
-}> = ({ account, classes, search }) => {
+}> = ({ account, search }) => {
if (account === undefined) {
return null
}
@@ -113,9 +131,9 @@ const AccountCell: React.FC<{
const PropertyCell: React.FC<{
property: WebPropertySummary | undefined
- classes: ReturnType
+
search: string | undefined
-}> = ({ property, classes, search }) => {
+}> = ({ property, search }) => {
if (property === undefined) {
return No UA properties for account.
}
@@ -146,9 +164,9 @@ const ViewCell: React.FC<{
account: AccountSummary | undefined
property: WebPropertySummary | undefined
view: ProfileSummary | undefined
- classes: ReturnType
+
search: string | undefined
-}> = ({ account, property, view, classes, search }) => {
+}> = ({ account, property, view, search }) => {
if (view === undefined) {
return No UA views for account.
}
@@ -201,9 +219,9 @@ const ViewsTable: React.FC = ({
className,
search,
}) => {
- const classes = useStyles()
+
return (
- = ({
>
- )
+
+ );
}
export default ViewsTable
diff --git a/src/components/AccountExplorer/index.tsx b/src/components/AccountExplorer/index.tsx
index e7bd2223..dcf7221d 100644
--- a/src/components/AccountExplorer/index.tsx
+++ b/src/components/AccountExplorer/index.tsx
@@ -13,10 +13,10 @@
// limitations under the License.
import * as React from "react"
-import { makeStyles } from "@material-ui/core/styles"
-import TextField from "@material-ui/core/TextField"
-import Typography from "@material-ui/core/Typography"
-import Paper from "@material-ui/core/Paper"
+import { styled } from '@mui/material/styles';
+import TextField from "@mui/material/TextField"
+import Typography from "@mui/material/Typography"
+import Paper from "@mui/material/Paper"
import { useDebounce } from "use-debounce"
import ViewSelector from "@/components/ViewSelector"
@@ -27,41 +27,65 @@ import useAccountPropertyView, {
import { StorageKey } from "@/constants"
import useFlattenedViews from "../ViewSelector/useFlattenedViews"
-const useStyles = makeStyles(theme => ({
- viewSelector: {
+const PREFIX = 'AccountExplorer';
+
+const classes = {
+ viewSelector: `${PREFIX}-viewSelector`,
+ section: `${PREFIX}-section`,
+ paper: `${PREFIX}-paper`,
+ header: `${PREFIX}-header`,
+ heading: `${PREFIX}-heading`,
+ search: `${PREFIX}-search`,
+ searchInput: `${PREFIX}-searchInput`,
+ table: `${PREFIX}-table`
+};
+
+const Root = styled('div')((
+ {
+ theme
+ }
+) => ({
+ [`& .${classes.viewSelector}`]: {
marginBottom: theme.spacing(1),
},
- section: {
+
+ [`& .${classes.section}`]: {
padding: theme.spacing(1),
},
- paper: {
+
+ [`& .${classes.paper}`]: {
padding: theme.spacing(3),
},
- header: {
+
+ [`& .${classes.header}`]: {
margin: theme.spacing(0, 1, 0),
padding: theme.spacing(0, 1, 0),
},
- heading: {
+
+ [`& .${classes.heading}`]: {
margin: theme.spacing(2),
textAlign: "center",
},
- search: {
+
+ [`& .${classes.search}`]: {
display: "flex",
"flex-direction": "column",
"align-items": "center",
padding: theme.spacing(0, 1, 0),
// Search title Title
},
- searchInput: {
+
+ [`& .${classes.searchInput}`]: {
margin: theme.spacing(1),
padding: theme.spacing(1, 1),
width: "100%",
"max-width": theme.breakpoints.values.sm,
},
- table: {
+
+ [`& .${classes.table}`]: {
"margin-top": theme.spacing(6),
- },
-}))
+ }
+}));
const containsQuery = (
searchQuery: string,
@@ -85,7 +109,7 @@ enum QueryParam {
}
const AccountExplorer = () => {
- const classes = useStyles()
+
const [searchQuery, setSearchQuery] = React.useState("")
const [debouncedQuery] = useDebounce(searchQuery, 100, { trailing: true })
@@ -106,7 +130,7 @@ const AccountExplorer = () => {
)
return (
- <>
+ (
Overview
Use this tool to search or browse through your accounts, properties, and
@@ -145,8 +169,8 @@ const AccountExplorer = () => {
-
- )
+ )
+ );
}
export default AccountExplorer
diff --git a/src/components/Buttons.tsx b/src/components/Buttons.tsx
index b6252dab..b7bbeccf 100644
--- a/src/components/Buttons.tsx
+++ b/src/components/Buttons.tsx
@@ -4,10 +4,11 @@ import {
Tooltip,
IconButton,
ButtonProps as MUIButtonProps,
-} from "@material-ui/core"
-import Add from "@material-ui/icons/Add"
-import Delete from "@material-ui/icons/Delete"
-import Check from "@material-ui/icons/Check"
+} from "@mui/material"
+import Add from "@mui/icons-material/Add"
+import Delete from "@mui/icons-material/Delete"
+import Check from "@mui/icons-material/Check"
+import {PropsWithChildren} from 'react';
// Secondary Action Button
interface Props extends MUIButtonProps {
@@ -64,14 +65,17 @@ export const PlainButton: React.FC
- 
- Scan the QR code to test your URL.
-
- )}
- = ({ column, isDeprecated }) => {
-
- )
+
+ );
}
const SelectableColumn: React.FC<{
@@ -167,7 +208,7 @@ const SelectableColumn: React.FC<{
disabled: boolean
setSelected: (selected: boolean) => void
}> = ({ column, selected, disabled, setSelected }) => {
- const classes = useStyles()
+
const isDeprecated = React.useMemo(
() => column.attributes?.status !== "PUBLIC",
[column.attributes]
@@ -207,7 +248,7 @@ const ColumnSubgroup: React.FC<{
onlySegments,
cubesByColumnName,
}) => {
- const classes = useStyles()
+
// Move deprecated columns to the bottom
const sortedColumns = React.useMemo(
() =>
@@ -281,7 +322,7 @@ const ColumnGroup: React.FC<{
selectedColumns,
selectColumn,
}) => {
- const classes = useStyles()
+
if (!open) {
return (
@@ -348,7 +389,7 @@ const ColumnGroupList: React.FC<{
columns: Column[]
searchTerms: string[]
}> = ({ allowDeprecated, onlySegments, columns, searchTerms }) => {
- const classes = useStyles()
+
const filteredColumns = React.useMemo(() => {
let filtered: Column[] = columns
@@ -433,56 +474,58 @@ const ColumnGroupList: React.FC<{
selectedColumns
.map(
columnId =>
- CUBES_BY_COLUMN_NAME.get(columnId) || (Set() as Set
-
+
- {showExpandAll ? (
- }
- onClick={expandAll}
- >
- Expand All
-
- ) : null}
- {showCollapseAll ? (
- }
- onClick={collapseAll}
- >
- Hide All
-
- ) : null}
-
-
- {map(groupedColumns, (columns, groupName) => (
- toggleGroupOpen(groupName)}
- allowableCubes={allowableCubes}
- cubesByColumnName={CUBES_BY_COLUMN_NAME}
- selectedColumns={selectedColumns}
- selectColumn={selectColumn}
- />
- ))}
-
-
+
+
+ {showExpandAll ? (
+ }
+ onClick={expandAll}
+ >
+ Expand All
+
+ ) : null}
+ {showCollapseAll ? (
+ }
+ onClick={collapseAll}
+ >
+ Hide All
+
+ ) : null}
+
+
+ {map(groupedColumns, (columns, groupName) => (
+ toggleGroupOpen(groupName)}
+ allowableCubes={allowableCubes}
+ cubesByColumnName={CUBES_BY_COLUMN_NAME}
+ selectedColumns={selectedColumns}
+ selectColumn={selectColumn}
+ />
+ ))}
+
+
+
{
/>
)}
-
- )
+
+ );
}
export default Explorer
diff --git a/src/components/DimensionsMetricsExplorer/GroupInfoTemplate.tsx b/src/components/DimensionsMetricsExplorer/GroupInfoTemplate.tsx
index 7324576d..aea25e36 100644
--- a/src/components/DimensionsMetricsExplorer/GroupInfoTemplate.tsx
+++ b/src/components/DimensionsMetricsExplorer/GroupInfoTemplate.tsx
@@ -14,11 +14,12 @@
import * as React from "react"
-import makeStyles from "@material-ui/core/styles/makeStyles"
-import Typography from "@material-ui/core/Typography"
-import Chip from "@material-ui/core/Chip"
-import ArrowBack from "@material-ui/icons/ArrowBack"
-import LinkIcon from "@material-ui/icons/Link"
+import { styled } from '@mui/material/styles';
+
+import Typography from "@mui/material/Typography"
+import Chip from "@mui/material/Chip"
+import ArrowBack from "@mui/icons-material/ArrowBack"
+import LinkIcon from "@mui/icons-material/Link"
import classnames from "classnames"
import { Link } from "gatsby"
import { sortBy } from "lodash"
@@ -27,30 +28,34 @@ import Layout from "@/components/Layout"
import { CopyIconButton } from "@/components/CopyButton"
import { Column } from "./common-types"
-type GroupInfoTemplateProps = {
- pageContext: {
- groupName: string
- dimensions: Column[]
- metrics: Column[]
- }
-}
+const PREFIX = 'GroupInfoTemplate';
-type ColumnProps = {
- column: Column
-}
+const classes = {
+ deprecatedText: `${PREFIX}-deprecatedText`,
+ returnLink: `${PREFIX}-returnLink`,
+ columnHeading: `${PREFIX}-columnHeading`,
+ chips: `${PREFIX}-chips`,
+ linkIcon: `${PREFIX}-linkIcon`
+};
-const useStyles = makeStyles(theme => ({
- deprecatedText: {
+const StyledLayout = styled(Layout)((
+ {
+ theme
+ }
+) => ({
+ [`& .${classes.deprecatedText}`]: {
textDecoration: "line-through",
},
- returnLink: {
+
+ [`& .${classes.returnLink}`]: {
display: "flex",
alignItems: "center",
"& svg": {
marginRight: theme.spacing(1),
},
},
- columnHeading: {
+
+ [`& .${classes.columnHeading}`]: {
marginBottom: theme.spacing(1),
display: "flex",
alignItems: "baseline",
@@ -58,24 +63,38 @@ const useStyles = makeStyles(theme => ({
marginLeft: theme.spacing(1),
},
},
- chips: {
+
+ [`& .${classes.chips}`]: {
"& div": {
marginRight: theme.spacing(1),
},
marginBottom: theme.spacing(1),
},
- linkIcon: {
+
+ [`& .${classes.linkIcon}`]: {
alignSelf: "center",
marginLeft: theme.spacing(1),
- },
-}))
+ }
+}));
+
+type GroupInfoTemplateProps = {
+ pageContext: {
+ groupName: string
+ dimensions: Column[]
+ metrics: Column[]
+ }
+}
+
+type ColumnProps = {
+ column: Column
+}
const ColumnInfo: React.FC
@@ -95,7 +106,7 @@ export const DimensionsPicker: React.FC<{
multiple
loading={request.status === RequestStatus.InProgress}
options={dimensionOptionsLessSelected || []}
- getOptionLabel={dimension => dimension.apiName!}
+ getOptionLabel={ (dimension) => typeof dimension === "string" ? dimension : dimension.apiName!}
value={dimensions || []}
onChange={(_event, value) => {
if (setDimensions !== undefined) {
@@ -109,9 +120,13 @@ export const DimensionsPicker: React.FC<{
: setDimensionIDs((value as GA4Dimension[]).map(m => m.apiName!))
}
}}
- renderOption={column =>
+
+ )}
renderInput={params => (
- metric.apiName!}
+ getOptionLabel={ (metric) => typeof metric === "string" ? metric : metric.apiName!}
value={metrics || []}
onChange={(_event, value) => {
if (setMetrics !== undefined) {
@@ -177,9 +192,13 @@ export const MetricsPicker: React.FC<{
: setMetricsIDs((value as GA4Metric[]).map(m => m.apiName!))
}
}}
- renderOption={column =>
+
+ )}
renderInput={params => (
- dimension.apiName!}
+ getOptionLabel={ (dimension) => typeof dimension === "string" ? dimension : dimension.apiName!}
value={selected === undefined ? null : selected}
onChange={(_event, value) =>
setSelected(value === null ? undefined : (value as GA4Dimension))
}
- renderOption={column =>
+
+ )}
renderInput={params => (
- {
if (
@@ -349,14 +372,18 @@ export const MetricPicker: React.FC<{
freeSolo
loading={request.status === RequestStatus.InProgress}
options={metricOptionsLessSelected || []}
- getOptionLabel={metric => metric.apiName!}
+ getOptionLabel={ (metric) => typeof metric === "string" ? metric : metric.apiName!}
value={selected === undefined ? null : selected}
onChange={(_event, value) =>
setSelected(value === null ? undefined : (value as GA4Metric))
}
- renderOption={column =>
+
+ )}
renderInput={params => (
- ({
+ [`&.${classes.dateRange}`]: {
+ display: "inline-flex",
+ "&> :not(:first-child)": {
+ marginLeft: theme.spacing(1),
+ },
+ },
+
+ [`& .${classes.wideInput}`]: {
+ flexGrow: 1,
+ }
+}));
interface GADateProps extends LinkedTextFieldProps {}
@@ -26,18 +51,6 @@ export const GADate: React.FC = ({
)
}
-const useStyles = makeStyles(theme => ({
- dateRange: {
- display: "inline-flex",
- "&> :not(:first-child)": {
- marginLeft: theme.spacing(1),
- },
- },
- wideInput: {
- flexGrow: 1,
- },
-}))
-
type DateRange = gapi.client.analyticsdata.DateRange
interface GADateRangeProps {
value: DateRange
@@ -49,10 +62,10 @@ export const GADateRange: React.FC = ({
setValue,
showName,
}) => {
- const classes = useStyles()
+
return (
-
+
{showName && (
= ({
setValue(old => ({ ...old, endDate }))
}}
/>
-
- )
+
+ );
}
export default GADate
diff --git a/src/components/HitBuilder/HitCard.tsx b/src/components/HitBuilder/HitCard.tsx
index 14af3550..c3ba719f 100644
--- a/src/components/HitBuilder/HitCard.tsx
+++ b/src/components/HitBuilder/HitCard.tsx
@@ -14,44 +14,73 @@
import React from "react"
-import Warning from "@material-ui/icons/Warning"
-import ErrorIcon from "@material-ui/icons/Error"
-import Button from "@material-ui/core/Button"
-import TextField from "@material-ui/core/TextField"
-import Check from "@material-ui/icons/Check"
-import Send from "@material-ui/icons/Send"
-import Cached from "@material-ui/icons/Cached"
-import Paper from "@material-ui/core/Paper"
-import Typography from "@material-ui/core/Typography"
-import makeStyles from "@material-ui/core/styles/makeStyles"
-import orange from "@material-ui/core/colors/orange"
-import green from "@material-ui/core/colors/green"
-import yellow from "@material-ui/core/colors/yellow"
-import red from "@material-ui/core/colors/red"
+import { styled } from '@mui/material/styles';
+
+import Warning from "@mui/icons-material/Warning"
+import ErrorIcon from "@mui/icons-material/Error"
+import Button from "@mui/material/Button"
+import TextField from "@mui/material/TextField"
+import Check from "@mui/icons-material/Check"
+import Send from "@mui/icons-material/Send"
+import Cached from "@mui/icons-material/Cached"
+import Paper from "@mui/material/Paper"
+import Typography from "@mui/material/Typography"
+import {orange, green, yellow, red} from "@mui/material/colors"
import classnames from "classnames"
import { PAB } from "@/components/Buttons"
import CopyButton from "@/components/CopyButton"
import { ParametersAPI, Validation } from "./hooks"
-import { HitStatus } from "./types"
+const PREFIX = 'HitCard';
+
+enum HitStatus {
+ Unvalidated = "UNVALIDATED",
+ Validating = "VALIDATING",
+ Valid = "VALID",
+ Invalid = "INVALID",
+ Sent = "Sent",
+ Sending = "Sending",
+}
-const useStyles = makeStyles(theme => ({
- hitElement: {
+const classes = {
+ hitElement: `${PREFIX}-hitElement`,
+ hitElementActions: `${PREFIX}-hitElementActions`,
+ addParameterButton: `${PREFIX}-addParameterButton`,
+ validationStatus: `${PREFIX}-validationStatus`,
+ httpInfo: `${PREFIX}-httpInfo`,
+ payload: `${PREFIX}-payload`,
+ hitStatusValidating: `${PREFIX}-hitStatus-${HitStatus.Validating}`,
+ hitStatusSending: `${PREFIX}-hitStatus-${HitStatus.Sending}`,
+ hitStatusInvalid: `${PREFIX}-hitStatus-${HitStatus.Invalid}`,
+ hitStatusSent: `${PREFIX}-hitStatus-${HitStatus.Sent}`,
+ hitStatusValid: `${PREFIX}-hitStatus-${HitStatus.Valid}`,
+ hitStatusUnvalidated: `${PREFIX}-hitStatus-${HitStatus.Unvalidated}`
+};
+
+const Root = styled('div')((
+ {
+ theme
+ }
+) => ({
+ [`& .${classes.hitElement}`]: {
padding: theme.spacing(2, 3),
display: "flex",
flexDirection: "column",
},
- hitElementActions: {
+
+ [`&.${classes.hitElementActions}`]: {
marginTop: theme.spacing(2),
display: "flex",
"& > button": {
marginRight: theme.spacing(1),
},
},
- addParameterButton: {
+
+ [`& .${classes.addParameterButton}`]: {
marginLeft: theme.spacing(1),
},
- validationStatus: {
+
+ [`& .${classes.validationStatus}`]: {
// Picked this value through a bit of trial and error, but having a
// minHeight makes this not jump around during the "sending" and
// "validating" states.
@@ -71,40 +100,42 @@ const useStyles = makeStyles(theme => ({
marginTop: theme.spacing(1),
},
},
- [HitStatus.Validating]: {
+
+ [`& .${classes.httpInfo}`]: {
+ margin: theme.spacing(1, 0, 2, 0),
+ "& > span": {
+ fontFamily: "'Source Code Pro', monospace",
+ },
+ },
+
+ [`& .${classes.payload}`]: {
+ flexGrow: 1,
+ },
+ [`& .${classes.hitStatusValidating}`]: {
backgroundColor: orange[100],
color: orange[900],
},
- [HitStatus.Sending]: {
+ [`& .${classes.hitStatusSending}`]: {
backgroundColor: orange[100],
color: orange[900],
},
- [HitStatus.Invalid]: {
+ [`& .${classes.hitStatusInvalid}`]: {
backgroundColor: red[100],
color: red[900],
},
- [HitStatus.Sent]: {
+ [`& .${classes.hitStatusSent}`]: {
backgroundColor: green[100],
color: green[900],
},
- [HitStatus.Valid]: {
+ [`& .${classes.hitStatusValid}`]: {
backgroundColor: green[100],
color: green[900],
},
- [HitStatus.Unvalidated]: {
+ [`& .${classes.hitStatusUnvalidated}`]: {
backgroundColor: yellow[100],
color: yellow[900],
},
- httpInfo: {
- margin: theme.spacing(1, 0, 2, 0),
- "& > span": {
- fontFamily: "'Source Code Pro', monospace",
- },
- },
- payload: {
- flexGrow: 1,
- },
-}))
+}));
interface HitCardProps {
hitPayload: string
@@ -127,7 +158,7 @@ const HitCard: React.FC = ({
hasParameter,
setParametersFromString,
}) => {
- const classes = useStyles()
+
const [value, setValue] = React.useState(hitPayload)
// Update the localState of then input when the hitPayload changes.
@@ -143,38 +174,40 @@ const HitCard: React.FC = ({
[setParametersFromString]
)
return (
-
-
-
- POST /collect HTTP/1.1
-
-
-
- Host: www.google-analytics.com
-
-
-
+
+
+
+
+ POST /collect HTTP/1.1
+
+
+
+ Host: www.google-analytics.com
+
+
+
+
)
}
@@ -191,7 +224,7 @@ const ValidationStatus: React.FC = ({
addParameter,
hasParameter,
}) => {
- const classes = useStyles()
+
let headerIcon: JSX.Element | null = null
let hitHeading: JSX.Element | null = null
@@ -284,7 +317,7 @@ const ValidationStatus: React.FC = ({
return (
{headerIcon}
@@ -308,20 +341,22 @@ const HitActions: React.FC = ({
validateHit,
sendHit,
}) => {
- const classes = useStyles()
+
switch (hitStatus) {
case HitStatus.Sent:
case HitStatus.Valid: {
const sendHitButton = (
-
+
)
const sharableLinkToHit =
@@ -332,7 +367,7 @@ const HitActions: React.FC = ({
"?" +
hitPayload
return (
-
+
)
}
}
diff --git a/src/components/HitBuilder/Parameters.tsx b/src/components/HitBuilder/Parameters.tsx
index 1fecc725..bb7e1a63 100644
--- a/src/components/HitBuilder/Parameters.tsx
+++ b/src/components/HitBuilder/Parameters.tsx
@@ -1,29 +1,44 @@
import * as React from "react"
-import { Delete, Refresh } from "@material-ui/icons"
-import makeStyles from "@material-ui/core/styles/makeStyles"
-import FormControl from "@material-ui/core/FormControl"
-import InputLabel from "@material-ui/core/InputLabel"
-import MenuItem from "@material-ui/core/MenuItem"
-import Select from "@material-ui/core/Select"
-import TextField from "@material-ui/core/TextField"
-import Typography from "@material-ui/core/Typography"
-import InputAdornment from "@material-ui/core/InputAdornment"
-import Tooltip from "@material-ui/core/Tooltip"
-import IconButton from "@material-ui/core/IconButton"
-import Autocomplete from "@material-ui/lab/Autocomplete"
-import Add from "@material-ui/icons/Add"
-import Button from "@material-ui/core/Button"
-import { v4 as uuid } from "uuid"
+import { styled } from '@mui/material/styles';
-import { HIT_TYPES, Property } from "./types"
-import { Validation, ParametersAPI } from "./hooks"
+import {Delete, Refresh} from "@mui/icons-material"
+import FormControl from "@mui/material/FormControl"
+import InputLabel from "@mui/material/InputLabel"
+import MenuItem from "@mui/material/MenuItem"
+import Select from "@mui/material/Select"
+import TextField from "@mui/material/TextField"
+import Typography from "@mui/material/Typography"
+import InputAdornment from "@mui/material/InputAdornment"
+import Tooltip from "@mui/material/Tooltip"
+import IconButton from "@mui/material/IconButton"
+import Autocomplete from "@mui/material/Autocomplete"
+import Add from "@mui/icons-material/Add"
+import Button from "@mui/material/Button"
+import {v4 as uuid} from "uuid"
-const useStyles = makeStyles(theme => ({
- subdued: {
+import {HIT_TYPES, Property} from "./types"
+import {ParametersAPI, Validation} from "./hooks"
+
+const PREFIX = 'Parameters';
+
+const classes = {
+ subdued: `${PREFIX}-subdued`,
+ propertyOption: `${PREFIX}-propertyOption`,
+ inputs: `${PREFIX}-inputs`,
+ addedParam: `${PREFIX}-addedParam`
+};
+
+const Root = styled('section')((
+ {
+ theme
+ }
+) => ({
+ [`& .${classes.subdued}`]: {
color: theme.palette.grey[500],
},
- propertyOption: {
+
+ [`& .${classes.propertyOption}`]: {
display: "flex",
width: "100%",
flexDirection: "column",
@@ -33,7 +48,8 @@ const useStyles = makeStyles(theme => ({
right: theme.spacing(2),
},
},
- inputs: {
+
+ [`&.${classes.inputs}`]: {
maxWidth: "600px",
display: "flex",
flexDirection: "column",
@@ -46,7 +62,8 @@ const useStyles = makeStyles(theme => ({
marginRight: theme.spacing(1),
},
},
- addedParam: {
+
+ [`& .${classes.addedParam}`]: {
display: "flex",
"& > div:first-child": {
marginRight: theme.spacing(1),
@@ -54,8 +71,8 @@ const useStyles = makeStyles(theme => ({
"& > div:nth-child(2)": {
flexGrow: 1,
},
- },
-}))
+ }
+}));
interface ParametersProps {
updateParameterName: ParametersAPI["updateParameterName"]
@@ -76,26 +93,26 @@ const Parameters: React.FC = ({
parameters,
properties,
}) => {
- const classes = useStyles()
+
const newParam = React.useRef(null)
const [v, t, tid, cid, ...otherParams] = parameters
const setHitType = React.useCallback(
- hitType => {
+ (hitType: string) => {
updateParameterValue(t.id, hitType)
},
[t.id, updateParameterValue]
)
const setCid = React.useCallback(
- newId => {
+ (newId: string) => {
updateParameterValue(cid.id, newId)
},
[cid.id, updateParameterValue]
)
const setTid = React.useCallback(
- newTid => {
+ (newTid: string) => {
updateParameterValue(tid.id, newTid)
},
[tid.id, updateParameterValue]
@@ -109,7 +126,7 @@ const Parameters: React.FC = ({
}, [tid.value, localPropertyInput])
return (
-
+
v
- )
+
+ );
}
export default Parameters
diff --git a/src/components/HitBuilder/hit.ts b/src/components/HitBuilder/hit.ts
index a1262bfa..2ec3b95e 100644
--- a/src/components/HitBuilder/hit.ts
+++ b/src/components/HitBuilder/hit.ts
@@ -13,7 +13,6 @@
// limitations under the License.
import { WindowLocation } from "@reach/router"
-import querystring from "querystring"
import {
Param,
@@ -58,9 +57,9 @@ export function convertHitToParams(
const searchIndex = hit.indexOf("?")
if (searchIndex > -1) hit = hit.slice(searchIndex + 1)
- let query: querystring.ParsedUrlQuery = {}
+ let query = new URLSearchParams()
try {
- query = querystring.parse(hit)
+ query = new URLSearchParams(hit)
} catch (e) {
// It's common to paste in a string that's invalid, but we can easily
// recover from here.
@@ -70,34 +69,34 @@ export function convertHitToParams(
const v: ParamV = {
id: nextId(),
name: RequiredParams.V,
- value: query[RequiredParams.V] || "1",
+ value: query.get(RequiredParams.V) || "1",
required: true,
}
const t: ParamT = {
id: nextId(),
name: RequiredParams.T,
- value: query[RequiredParams.T] || HIT_TYPES[0],
+ value: query.get(RequiredParams.T) || HIT_TYPES[0],
required: true,
}
const tid: ParamTId = {
id: nextId(),
name: RequiredParams.T_Id,
- value: query[RequiredParams.T_Id] || "",
+ value: query.get(RequiredParams.T_Id) || "",
required: true,
}
const cid: ParamCId = {
id: nextId(),
name: RequiredParams.C_Id,
- value: query[RequiredParams.C_Id] || "",
+ value: query.get(RequiredParams.C_Id) || "",
required: true,
}
- delete query[RequiredParams.V]
- delete query[RequiredParams.T]
- delete query[RequiredParams.T_Id]
- delete query[RequiredParams.C_Id]
+ query.delete(RequiredParams.V)
+ query.delete(RequiredParams.T)
+ query.delete(RequiredParams.T_Id)
+ query.delete(RequiredParams.C_Id)
// Create optional params after required params.
- const others: ParamOptional[] = Object.entries(query).map(([name, v]) => {
+ const others: ParamOptional[] = Array.from(query).map(([name, v]) => {
const value = v === undefined ? "" : v
return {
name,
@@ -115,15 +114,23 @@ export function convertHitToParams(
* @param params An array of param objects.
*/
export function convertParamsToHit(params: Param[]): string {
- const query: { [name: string]: any } = {}
+ const searchParams = new URLSearchParams()
+
+ //const query: { [name: string]: any } = {}
for (const { name, value } of params) {
if (value === "") {
continue
}
- query[name] = value
+ searchParams.append(name, value)
+ //query[name] = value
}
- return querystring.stringify(query)
+ // Convert the URLSearchParams object to a string.
+ const searchParamsString = searchParams.toString()
+ // Replace the encoded commas with commas.
+ const decodedSearchParamsString = searchParamsString.replace(/%2C/g, ',')
+
+ return decodedSearchParamsString
}
export interface ValidationResult {
diff --git a/src/components/HitBuilder/hooks.ts b/src/components/HitBuilder/hooks.ts
index 6cd37216..fbca49e9 100644
--- a/src/components/HitBuilder/hooks.ts
+++ b/src/components/HitBuilder/hooks.ts
@@ -67,7 +67,7 @@ export const useValidationServer: UseValidationServer = parameters => {
setHitStatus(HitStatus.Validating)
try {
const hit = hitUtils.convertParamsToHit(parameters)
- Promise.all([
+ Promise.all([
hitUtils.getHitValidationResult(hit),
sleep(500),
]).then(([validationResult, _]) => {
@@ -143,7 +143,7 @@ export const useParameters: UseParameters = () => {
}, [])
// Sets the focus to a particular param/value combo
- const setFocus = React.useCallback((id, value = false) => {
+ const setFocus = React.useCallback((id: number, value = false) => {
setFocusData({ id, value })
}, [])
diff --git a/src/components/HitBuilder/index.tsx b/src/components/HitBuilder/index.tsx
index fc939aec..ba55326e 100644
--- a/src/components/HitBuilder/index.tsx
+++ b/src/components/HitBuilder/index.tsx
@@ -14,7 +14,7 @@
import * as React from "react"
-import Typography from "@material-ui/core/Typography"
+import Typography from "@mui/material/Typography"
import { Url } from "@/constants"
import ExternalLink from "@/components/ExternalLink"
@@ -51,7 +51,7 @@ const HitBuilder: React.FC = () => {
}, [parameters])
return (
- <>
+
This tools allows you to construct and validate{" "}
@@ -124,7 +124,7 @@ const HitBuilder: React.FC = () => {
-
+
)
}
diff --git a/src/components/HitBuilder/types.ts b/src/components/HitBuilder/types.ts
index 276a4d47..500378e9 100644
--- a/src/components/HitBuilder/types.ts
+++ b/src/components/HitBuilder/types.ts
@@ -118,7 +118,7 @@ export type Param =
interface ParamType {
id: number
name: T
- value: string | string[]
+ value: string
required?: true
isOptional?: true
}
diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
index d7e07fba..ff37fc29 100644
--- a/src/components/Home/index.tsx
+++ b/src/components/Home/index.tsx
@@ -14,19 +14,30 @@
import * as React from "react"
-import Typography from "@material-ui/core/Typography"
-import { makeStyles } from "@material-ui/core/styles"
+import { styled } from '@mui/material/styles';
+
+import Typography from "@mui/material/Typography"
import { StaticImage } from "gatsby-plugin-image"
import { Url } from "@/constants"
import ExternalLink from "@/components/ExternalLink"
-const useStyles = makeStyles({ partnersImage: { maxWidth: "600px" } })
+const PREFIX = 'IndexPage';
+
+const classes = {
+ partnersImage: `${PREFIX}-partnersImage`
+};
+
+const Root = styled('div')({
+ [`& .${classes.partnersImage}`]: {
+ maxWidth: "600px"
+ }
+});
const IndexPage: React.FC = () => {
- const classes = useStyles()
+
return (
- <>
+ (
{
Tools
- Tools to showcase how Google Analytics can be extendend with custom
+ Tools to showcase how Google Analytics can be extended with custom
solutions.
@@ -115,8 +126,8 @@ const IndexPage: React.FC = () => {
questions answered.
-
- )
+ )
+ );
}
export default IndexPage
diff --git a/src/components/Info.tsx b/src/components/Info.tsx
index 1822487c..d16e5237 100644
--- a/src/components/Info.tsx
+++ b/src/components/Info.tsx
@@ -1,15 +1,25 @@
import * as React from "react"
-import { Paper, makeStyles } from "@material-ui/core"
+import { styled } from '@mui/material/styles';
+import { Paper } from "@mui/material"
+
import classnames from "classnames"
-import { Info as InfoIcon } from "@material-ui/icons"
-import blue from "@material-ui/core/colors/lightBlue"
+import { Info as InfoIcon } from "@mui/icons-material"
+import blue from "@mui/material/colors/lightBlue"
+import {PropsWithChildren} from 'react';
-interface InfoProps {
- className?: string
-}
+const PREFIX = 'Info';
+
+const classes = {
+ info: `${PREFIX}-info`,
+ infoIcon: `${PREFIX}-infoIcon`
+};
-const useStyles = makeStyles(theme => ({
- info: {
+const StyledPaper = styled(Paper)((
+ {
+ theme
+ }
+) => ({
+ [`&.${classes.info}`]: {
margin: theme.spacing(2, 0),
padding: theme.spacing(1),
display: "flex",
@@ -19,20 +29,25 @@ const useStyles = makeStyles(theme => ({
backgroundColor: blue[100],
// maxWidth: 930,
},
- infoIcon: {
+
+ [`& .${classes.infoIcon}`]: {
margin: theme.spacing(0, 2),
- },
-}))
+ }
+}));
+
+interface InfoProps {
+ className?: string
+}
+
+const Info: React.FC> = ({ children, className }) => {
-const Info: React.FC = ({ children, className }) => {
- const classes = useStyles()
return (
-
+
{children}
-
- )
+
+ );
}
export default Info
diff --git a/src/components/InlineCode.tsx b/src/components/InlineCode.tsx
index 25aed895..cf2ac2f7 100644
--- a/src/components/InlineCode.tsx
+++ b/src/components/InlineCode.tsx
@@ -1,6 +1,6 @@
import * as React from "react"
-import { useTheme } from "@material-ui/core"
-// import { makeStyles } from "@material-ui/core"
+import { useTheme } from "@mui/material"
+import {PropsWithChildren} from 'react';
// TODO I'm not sure why, but if I use this makeStyles, it somehow conflicts
// somewhere and messes up formatting during SSR. Good luck to anybody that
@@ -16,12 +16,13 @@ import { useTheme } from "@material-ui/core"
// },
// }))
-const InlineCode: React.FC<{ className?: string }> = ({
+type Props = { className?: string }
+
+const InlineCode: React.FC> = ({
children,
className,
}) => {
const theme = useTheme()
- // const classes = useStyles()
return (
= ({
+const LabeledCheckbox: React.FC> = ({
checked,
setChecked,
onChange,
diff --git a/src/components/Layout/BugReport.tsx b/src/components/Layout/BugReport.tsx
index 68467247..f225d042 100644
--- a/src/components/Layout/BugReport.tsx
+++ b/src/components/Layout/BugReport.tsx
@@ -1,9 +1,9 @@
import * as React from "react"
import { navigate } from "gatsby"
-import Tooltip from "@material-ui/core/Tooltip"
-import IconButton from "@material-ui/core/IconButton"
-import BugIcon from "@material-ui/icons/BugReport"
+import Tooltip from "@mui/material/Tooltip"
+import IconButton from "@mui/material/IconButton"
+import BugIcon from "@mui/icons-material/BugReport"
const BugReport: React.FC = () => {
const onClick = React.useCallback(() => {
diff --git a/src/components/Layout/GA4Toggle.tsx b/src/components/Layout/GA4Toggle.tsx
index 98911adf..55fac1a1 100644
--- a/src/components/Layout/GA4Toggle.tsx
+++ b/src/components/Layout/GA4Toggle.tsx
@@ -1,8 +1,8 @@
import * as React from "react"
-import Grid from "@material-ui/core/Grid/Grid"
-import Switch from "@material-ui/core/Switch"
-import Tooltip from "@material-ui/core/Tooltip"
+import Grid from "@mui/material/Grid/Grid"
+import Switch from '@mui/material/Switch';
+import Tooltip from '@mui/material/Tooltip';
import { GAVersion } from "@/constants"
diff --git a/src/components/Layout/Login.tsx b/src/components/Layout/Login.tsx
index b69dbb9a..98d19589 100644
--- a/src/components/Layout/Login.tsx
+++ b/src/components/Layout/Login.tsx
@@ -1,8 +1,8 @@
import * as React from "react"
-import PersonOutlineIcon from "@material-ui/icons/PersonOutline"
-import PersonIcon from "@material-ui/icons/Person"
-import Tooltip from "@material-ui/core/Tooltip"
-import IconButton from "@material-ui/core/IconButton"
+import PersonOutlineIcon from "@mui/icons-material/PersonOutline"
+import PersonIcon from "@mui/icons-material/Person"
+import Tooltip from "@mui/material/Tooltip"
+import IconButton from "@mui/material/IconButton"
import { UserStatus } from "./useLogin"
interface LoginProps {
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx
index 6d363528..0510e054 100644
--- a/src/components/Layout/index.tsx
+++ b/src/components/Layout/index.tsx
@@ -12,10 +12,13 @@
// See the License for the specific language governing permissions and
// limitations under the License.
-import React, { useMemo } from "react"
-import Button from "@material-ui/core/Button"
+import React, {PropsWithChildren, useEffect, useMemo} from "react"
+import {Theme} from '@mui/material/styles';
+import {styled} from '@mui/material/styles';
+
+import Button from '@mui/material/Button';
import { Link } from "gatsby"
-import { Home } from "@material-ui/icons"
+import { Home } from "@mui/icons-material"
import clsx from "classnames"
import { Helmet } from "react-helmet"
// TODO - Look into whether or not we can fix this.
@@ -24,30 +27,33 @@ import { Helmet } from "react-helmet"
//
// eslint-disable-next-line import/no-webpack-loader-syntax
import Logo from "-!svg-react-loader!../../images/ga-developer-logo.svg"
-import AppBar from "@material-ui/core/AppBar"
-import IconButton from "@material-ui/core/IconButton"
-import Drawer from "@material-ui/core/Drawer"
-import List from "@material-ui/core/List"
-import ListItem from "@material-ui/core/ListItem"
+import AppBar from "@mui/material/AppBar"
+import IconButton from "@mui/material/IconButton"
+import Drawer from "@mui/material/Drawer"
+import List from "@mui/material/List"
+import ListItem from "@mui/material/ListItem"
import { navigate } from "@reach/router"
-import MenuIcon from "@material-ui/icons/Menu"
-import Typography from "@material-ui/core/Typography"
+import MenuIcon from "@mui/icons-material/Menu"
+import Typography from "@mui/material/Typography"
import Login from "./Login"
import { useGAVersion } from "../../hooks"
import { GAVersion, Url } from "../../constants"
import Spinner from "../Spinner"
import { linkData } from "./links"
-import useStyles from "./useStyles"
import GA4Toggle from "./GA4Toggle"
import BugReport from "./BugReport"
-import useFormStyles from "@/hooks/useFormStyles"
import Loadable from "../Loadable"
import useLogin2, { UserStatus } from "./useLogin"
import usePageView from "@/hooks/usePageView"
import { ErrorBoundary } from "react-error-boundary"
import ErrorFallback from "../ErrorFallback"
+
+
+const notMobile = (theme: Theme) => theme.breakpoints.up("md")
+const mobile = (theme: Theme) => theme.breakpoints.between(0, "sm")
+
interface LayoutProps {
requireLogin?: true
disableNav?: true
@@ -67,31 +73,71 @@ interface TemplateProps {
user?: gapi.auth2.GoogleUser
}
-const Template: React.FC = ({
- pathname,
- description,
- disableNav,
- requireLogin,
- title,
- children,
- inProgress,
- notStarted,
- successful,
- failed,
- userStatus,
- login,
- logout,
- user,
-}) => {
+const PREFIX = 'Layout2';
+
+const classes = {
+ footer: `${PREFIX}-footer`,
+ activeLink: `${PREFIX}-activeLink`,
+ toggle: `${PREFIX}-toggle`,
+ loadingIndicator: `${PREFIX}-loadingIndicator`,
+ root: `${PREFIX}-root`,
+ main: `${PREFIX}-main`,
+ contentWrapper: `${PREFIX}-contentWrapper`,
+ content: `${PREFIX}-content`,
+ header: `${PREFIX}-header`,
+ logoRow: `${PREFIX}-logoRow`,
+ logo: `${PREFIX}-logo`,
+ appBarNav: `${PREFIX}-appBarNav`,
+ mobileNav: `${PREFIX}-mobileNav`,
+ nav: `${PREFIX}-nav`,
+ noColor: `${PREFIX}-noColor`,
+ innerNav: `${PREFIX}-innerNav`,
+ navLinkBackgroundHover: `${PREFIX}-navLinkBackgroundHover`,
+ home: `${PREFIX}-home`,
+ subHeading: `${PREFIX}-subHeading`,
+ homeIcon: `${PREFIX}-homeIcon`,
+ mobileHeading: `${PREFIX}-mobileHeading`,
+ mobileMenu: `${PREFIX}-mobileMenu`
+};
+
+
+const Template: React.FC> = ({
+ pathname,
+ description,
+ disableNav,
+ requireLogin,
+ title,
+ children,
+ inProgress,
+ notStarted,
+ successful,
+ failed,
+ userStatus,
+ login,
+ logout,
+ user,
+ }) => {
usePageView(title)
const { gaVersion, setGAVersion } = useGAVersion(pathname)
- const classes = useStyles({ disableNav })
- const formClasses = useFormStyles()
+
const [open, setOpen] = React.useState(false)
+ useEffect(() => {
+ //const timeout = setTimeout(() => {
+ // Redirect to the new domain while preserving the path.
+ if( window.location.hostname.indexOf('web.app') !== -1 ) {
+ const newHostname = window.location.hostname.replace('web.app', 'google');
+ const newLocation = window.location.href.replace( window.location.hostname, newHostname );
+ window.location.replace(newLocation);
+ }
+ //}, 1000);
+
+ return;
+ }, []);
+
const links = useMemo(() => {
return linkData.filter(linkData =>
- linkData.versions.find(version => version === gaVersion)
+ linkData.versions.find(version => version === gaVersion)
)
}, [gaVersion])
@@ -102,216 +148,412 @@ const Template: React.FC = ({
}, [])
return (
- = props => {
+const StyledTemplate = styled('div')((
+ {
+ theme
+ }
+) => ({
+ [`& .${classes.footer}`]: {
+ padding: theme.spacing(2),
+ "&> :not(:first-child)": {
+ marginLeft: theme.spacing(1),
+ },
+ },
+
+ [`& .${classes.activeLink}`]: {
+ fontWeight: "bold",
+ color: `${theme.palette.primary.main} !important`,
+ },
+
+ [`& .${classes.toggle}`]: {
+ display: "flex",
+ },
+
+ [`& .${classes.loadingIndicator}`]: {
+ display: "flex",
+ flexDirection: "column",
+ alignItems: "center",
+ },
+
+ [`& .${classes.root}`]: {
+ display: "flex",
+ minHeight: "100%",
+ [notMobile(theme)]: {
+ flexDirection: "row",
+ },
+ [mobile(theme)]: {
+ flexDirection: "column",
+ },
+ },
+
+ [`& .${classes.main}`]: {
+ display: "flex",
+ flexDirection: "column",
+ flexGrow: 1,
+ minHeight: "100%",
+ color: theme.palette.getContrastText(theme.palette.grey[200]),
+ backgroundColor: theme.palette.grey[200],
+ },
+
+ [`& .${classes.contentWrapper}`]: {
+ flexGrow: 1,
+ },
+
+ [`& .${classes.content}`]: {
+ flexGrow: 1,
+ padding: theme.spacing(2, 4, 0, 4),
+ maxWidth: theme.breakpoints.values.md,
+ [mobile(theme)]: {
+ maxWidth: "unset",
+ width: "100%",
+ padding: theme.spacing(2),
+ },
+ },
+
+ [`& .${classes.header}`]: {
+ padding: theme.spacing(4, 4, 2, 4),
+ position: "relative",
+ maxWidth: theme.breakpoints.values.md,
+ [mobile(theme)]: {
+ maxWidth: "unset",
+ width: "100%",
+ padding: theme.spacing(2),
+ },
+ },
+
+ [`& .${classes.logoRow}`]: {
+ [mobile(theme)]: {
+ display: "none",
+ },
+ [notMobile(theme)]: {
+ display: "flex",
+ flexWrap: "wrap",
+ alignItems: "center",
+ },
+ },
+
+ [`& .${classes.logo}`]: {
+ flexGrow: 1,
+ height: "50px",
+ },
+
+ [`& .${classes.appBarNav}`]: {
+
+ [theme.breakpoints.up("md")]:
+ {
+ display: "none",
+ },
+ flexDirection: "row",
+ alignItems: "center",
+ paddingLeft: theme.spacing(1),
+ },
+
+ [`& .${classes.mobileNav}`]: {
+ color: theme.palette.getContrastText(theme.palette.grey[800]),
+ backgroundColor: theme.palette.grey[800],
+ minHeight: "100%",
+ },
+
+ [`& .${classes.nav}`]: {
+ [mobile(theme)]: {
+ display: "none",
+ },
+ minWidth: "260px",
+ borderRight: `1px solid ${theme.palette.grey[200]}`,
+ color: theme.palette.getContrastText(theme.palette.grey[800]),
+ backgroundColor: theme.palette.grey[800],
+ "& ol": {
+ margin: 0,
+ padding: 0,
+ paddingTop: theme.spacing(1),
+ listStyle: "none",
+ width: "100%",
+ "& li": {
+ width: "100%",
+ display: "flex",
+ "& a": {
+ color: "unset",
+ width: "100%",
+ textDecoration: "none",
+ },
+ },
+ },
+ },
+
+ [`& .${classes.noColor}`]: {
+ color: "unset",
+ },
+
+ [`& .${classes.innerNav}`]: {
+ padding: theme.spacing(1),
+ paddingLeft: theme.spacing(4),
+ [mobile(theme)]: {
+ paddingLeft: theme.spacing(2),
+ paddingRight: theme.spacing(2),
+ },
+ },
+
+ [`& .${classes.navLinkBackgroundHover}`]: {
+ "&:hover": {
+ backgroundColor: theme.palette.grey[100],
+ color: theme.palette.getContrastText(theme.palette.grey[100]),
+ },
+ },
+
+ [`& .${classes.home}`]: {
+ margin: "unset",
+ color: "unset",
+ display: "flex",
+ alignItems: "center",
+ paddingLeft: theme.spacing(2),
+ [notMobile(theme)]: {
+ "&:hover": {
+ color: theme.palette.primary.main,
+ },
+ },
+ },
+
+ [`& .${classes.subHeading}`]: {
+ width: "100%",
+ borderTop: `1px solid ${theme.palette.grey[600]}`,
+ marginTop: theme.spacing(2),
+ paddingTop: theme.spacing(2),
+ marginBottom: theme.spacing(1),
+ paddingLeft: theme.spacing(4),
+ [mobile(theme)]: {
+ paddingLeft: theme.spacing(2),
+ },
+ },
+
+ [`& .${classes.homeIcon}`]: {
+ marginLeft: theme.spacing(-0.5),
+ paddingRight: theme.spacing(1),
+ fontSize: "1.5em",
+ },
+
+ [`& .${classes.mobileHeading}`]: {
+ color: theme.palette.getContrastText(theme.palette.primary.main),
+ marginLeft: theme.spacing(1),
+ },
+
+ [`& .${classes.mobileMenu}`]: {
+ display: "flex",
+ justifyContent: "flex-start",
+ flexGrow: 1,
+ }
+ }));
+
+const Layout2: React.FC> = props => {
const request = useLogin2()
return (
}
- renderInProgress={() => }
+ renderNotStarted={() => = ({
object,
shouldCollapse,
@@ -65,7 +81,7 @@ const PrettyJson: React.FC = ({
tooltipText,
noPaper,
}) => {
- const classes = useStyles()
+
const inner = useMemo(() => {
if (object === undefined || IS_SSR) {
@@ -98,7 +114,7 @@ const PrettyJson: React.FC = ({
/>
)
- }, [object, classes.json, shouldCollapse, tooltipText])
+ }, [object, shouldCollapse, tooltipText])
if (object === undefined) {
return null
@@ -111,7 +127,7 @@ const PrettyJson: React.FC = ({
if (noPaper) {
return {inner}
+ return {inner} ;
}
}
diff --git a/src/components/QueryExplorer/Report.tsx b/src/components/QueryExplorer/Report.tsx
index 3b115f36..74b89e1b 100644
--- a/src/components/QueryExplorer/Report.tsx
+++ b/src/components/QueryExplorer/Report.tsx
@@ -14,8 +14,9 @@
import * as React from "react"
+import { styled } from '@mui/material/styles';
+
import {
- makeStyles,
Table,
TableHead,
TableRow,
@@ -25,35 +26,54 @@ import {
Paper,
Typography,
TextField,
-} from "@material-ui/core"
+} from "@mui/material"
+
import Spinner from "../../components/Spinner"
import { CopyIconButton } from "../../components/CopyButton"
import { QueryResponse, APIStatus } from "./useDataAPIRequest"
import TSVDownload from "./TSVDownload"
-const useStyles = makeStyles(theme => ({
- paper: {},
- preamble: {
+const PREFIX = 'Report';
+
+const classes = {
+ paper: `${PREFIX}-paper`,
+ preamble: `${PREFIX}-preamble`,
+ container: `${PREFIX}-container`,
+ breakAll: `${PREFIX}-breakAll`,
+ reportLink: `${PREFIX}-reportLink`
+};
+
+const StyledPaper = styled(Paper)((
+ {
+ theme
+ }
+) => ({
+ [`&.${classes.paper}`]: {},
+
+ [`& .${classes.preamble}`]: {
padding: theme.spacing(2, 2, 0, 2),
margin: "unset",
},
- container: {
+
+ [`& .${classes.container}`]: {
maxHeight: 440,
},
- breakAll: {
+
+ [`& .${classes.breakAll}`]: {
wordBreak: "break-all",
},
- reportLink: {
+
+ [`& .${classes.reportLink}`]: {
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1),
- },
-}))
+ }
+}));
const ReportTable: React.FC<{
queryResponse: gapi.client.analytics.GaData
columns: gapi.client.analytics.Column[] | undefined
}> = ({ queryResponse, columns }) => {
- const classes = useStyles()
+
if (queryResponse === undefined) {
return null
@@ -98,7 +118,7 @@ const Report: React.FC = ({
columns,
permalink,
}) => {
- const classes = useStyles()
+
const requestURL = React.useMemo(() => {
if (
@@ -126,7 +146,7 @@ const Report: React.FC = ({
if (queryResponse.status === APIStatus.Error) {
return (
-
+
An error has occured
@@ -134,8 +154,8 @@ const Report: React.FC = ({
Error code: {queryResponse.error.code}
Error message: {queryResponse.error.message}
-
- )
+
+ );
}
return (
diff --git a/src/components/QueryExplorer/Sort.tsx b/src/components/QueryExplorer/Sort.tsx
index b51ed7a0..39f6a519 100644
--- a/src/components/QueryExplorer/Sort.tsx
+++ b/src/components/QueryExplorer/Sort.tsx
@@ -14,21 +14,32 @@
import * as React from "react"
-import Typography from "@material-ui/core/Typography"
-import TextField from "@material-ui/core/TextField"
-import makeStyles from "@material-ui/core/styles/makeStyles"
-import Autocomplete from "@material-ui/lab/Autocomplete"
+import { styled } from '@mui/material/styles';
+
+import Typography from "@mui/material/Typography"
+import TextField from "@mui/material/TextField"
+import Autocomplete from "@mui/material/Autocomplete"
import { SortableColumn } from "."
import { Dispatch } from "@/types"
import { Column } from "@/types/ua"
-const useStyles = makeStyles(_ => ({
- conceptOption: {
+const PREFIX = 'Sort';
+
+const classes = {
+ conceptOption: `${PREFIX}-conceptOption`,
+ nameId: `${PREFIX}-nameId`,
+ group: `${PREFIX}-group`
+};
+
+const Root
+ = styled('div')(() => ({
+ [`& .${classes.conceptOption}`]: {
display: "flex",
width: "100%",
},
- nameId: {
+
+ [`& .${classes.nameId}`]: {
flexGrow: 1,
display: "flex",
flexDirection: "column",
@@ -37,8 +48,9 @@ const useStyles = makeStyles(_ => ({
padding: 0,
},
},
- group: {},
-}))
+
+ [`& .${classes.group}`]: {}
+}));
interface SortProps {
columns: Column[]
@@ -47,7 +59,7 @@ interface SortProps {
}
const Sort: React.FC = ({ columns, sort, setSortIDs }) => {
- const classes = useStyles()
+
const sortableColumns = React.useMemo(
() =>
columns
@@ -81,56 +93,59 @@ const Sort: React.FC = ({ columns, sort, setSortIDs }) => {
// TODO renderOption={...} should be extracted since this and
// _ConceptMultiSelect use the same styling.
return (
-
- fullWidth
- autoComplete
- autoHighlight
- multiple
- debug
- noOptionsText="A Metric or Dimension is required in order to sort."
- options={sortableColumns}
- filterOptions={a =>
- a.filter(column => sort?.find(c => c.id === column.id) === undefined)
- }
- getOptionLabel={option =>
- `${option.sort === "ASCENDING" ? "" : "-"}${option.id}`
- }
- getOptionSelected={(a, b) => a.id === b.id && a.sort === b.sort}
- value={sort}
- onChange={(_event, value, _state) =>
- setSortIDs((value as SortableColumn[]).map(s => `${s.id}@@@${s.sort}`))
- }
- renderOption={option => (
-
+
+ fullWidth
+ autoComplete
+ autoHighlight
+ multiple
+ noOptionsText="A Metric or Dimension is required in order to sort."
+ options={sortableColumns}
+ filterOptions={a =>
+ a.filter(column => sort?.find(c => c.id === column.id) === undefined)
+ }
+ getOptionLabel={option => typeof option === "string" ? option :
+ `${option.sort === "ASCENDING" ? "" : "-"}${option.id}`
+ }
+ isOptionEqualToValue={(a, b) => a.id === b.id && a.sort === b.sort}
+ value={sort}
+ onChange={(_event, value, _state) =>
+ setSortIDs((value as SortableColumn[]).map(s => `${s.id}@@@${s.sort}`))
+ }
+ renderOption={(props, option) => (
+
+
+ )}
+ renderInput={params => (
+ = ({ queryResponse }) => {
- const classes = useStyles()
+
const csvContents = React.useMemo(() => {
const baseUrl = `data:text/tsv;charset=utf8,`
@@ -36,11 +47,11 @@ const TSVDownload: React.FC = ({ queryResponse }) => {
)
return (
-
+
- )
+
+ );
}
export default TSVDownload
diff --git a/src/components/QueryExplorer/index.tsx b/src/components/QueryExplorer/index.tsx
index ac031fc6..8360c36c 100644
--- a/src/components/QueryExplorer/index.tsx
+++ b/src/components/QueryExplorer/index.tsx
@@ -14,11 +14,12 @@
import * as React from "react"
-import Tooltip from "@material-ui/core/Tooltip"
-import Typography from "@material-ui/core/Typography"
-import TextField from "@material-ui/core/TextField"
-import makeStyles from "@material-ui/core/styles/makeStyles"
-import Launch from "@material-ui/icons/Launch"
+import { styled } from '@mui/material/styles';
+
+import Tooltip from "@mui/material/Tooltip"
+import Typography from "@mui/material/Typography"
+import TextField from "@mui/material/TextField"
+import Launch from "@mui/icons-material/Launch"
import useDataAPIRequest from "./useDataAPIRequest"
import useInputs from "./useInputs"
@@ -45,47 +46,69 @@ import useAccountPropertyView from "../ViewSelector/useAccountPropertyView"
import { useHydratedPersistantString } from "@/hooks/useHydrated"
import { successful } from "@/types"
-const coreReportingApi = (
- Core Reporting API
-)
+const PREFIX = 'QueryExplorer';
+
+const classes = {
+ inputs: `${PREFIX}-inputs`,
+ runButton: `${PREFIX}-runButton`,
+ externalReference: `${PREFIX}-externalReference`,
+ viewSelector: `${PREFIX}-viewSelector`,
+ showSegments: `${PREFIX}-showSegments`,
+ includeEmpty: `${PREFIX}-includeEmpty`,
+ conceptOption: `${PREFIX}-conceptOption`
+};
-const useStyles = makeStyles(theme => ({
- inputs: {
+const StyledUADimensionsAndMetricsRequestCtxProvider = styled(UADimensionsAndMetricsRequestCtx.Provider)((
+ {
+ theme
+ }
+) => ({
+ [`& .${classes.inputs}`]: {
maxWidth: "500px",
marginBottom: theme.spacing(1),
display: "flex",
flexDirection: "column",
},
- runButton: {
+
+ [`& .${classes.runButton}`]: {
alignSelf: "flex-start",
marginTop: theme.spacing(1),
},
- externalReference: {
+
+ [`& .${classes.externalReference}`]: {
"&:hover": {
opacity: 1.0,
},
opacity: 0.3,
},
- viewSelector: {
+
+ [`& .${classes.viewSelector}`]: {
maxWidth: "500px",
},
- showSegments: {
+
+ [`& .${classes.showSegments}`]: {
marginLeft: theme.spacing(1),
marginBottom: theme.spacing(1),
},
- includeEmpty: {
+
+ [`& .${classes.includeEmpty}`]: {
marginTop: theme.spacing(2),
marginBottom: theme.spacing(1),
},
- conceptOption: {
+
+ [`& .${classes.conceptOption}`]: {
display: "flex",
flexDirection: "column",
"& > p": {
margin: 0,
padding: 0,
},
- },
-}))
+ }
+}));
+
+const coreReportingApi = (
+ Core Reporting API
+)
const startDateLink = (
@@ -102,7 +125,7 @@ const endDateLink = (
export type SortableColumn = Column & { sort: "ASCENDING" | "DESCENDING" }
const DevsiteLink: React.FC<{ hash: string }> = ({ hash }) => {
- const classes = useStyles()
+
return (
{
- const classes = useStyles()
+
const [viewID, setViewID] = useHydratedPersistantString(
StorageKey.queryExplorerViewID,
@@ -238,9 +261,7 @@ export const QueryExplorer = () => {
}, [permalink, updateLink])
return (
-
+
Overview
This tool lets you interact with the {coreReportingApi} by building
@@ -410,8 +431,8 @@ export const QueryExplorer = () => {
columns={successful(uaDimensionsAndMetricsRequest)?.columns}
permalink={currentLink}
/>
-
- )
+
+ );
}
export default QueryExplorer
diff --git a/src/components/QueryExplorer/useDataAPIRequest.ts b/src/components/QueryExplorer/useDataAPIRequest.ts
index bfbf0c53..374eeb48 100644
--- a/src/components/QueryExplorer/useDataAPIRequest.ts
+++ b/src/components/QueryExplorer/useDataAPIRequest.ts
@@ -96,12 +96,61 @@ export const useDataAPIRequest: UseDataAPIRequest = ({
}
const metrics = selectedMetrics.map(a => a.id).join(",")
- const apiObject = {
+ type ApiObject = {
+ /** Data format for the response. */
+ alt?: string;
+ /** A comma-separated list of Analytics dimensions. E.g., 'ga:browser,ga:city'. */
+ dimensions?: string;
+ /**
+ * End date for fetching Analytics data. Request can should specify an end date formatted as YYYY-MM-DD, or as a relative date (e.g., today, yesterday, or 7daysAgo). The default
+ * value is yesterday.
+ */
+ "end-date": string;
+ /** Selector specifying which fields to include in a partial response. */
+ fields?: string;
+ /** A comma-separated list of dimension or metric filters to be applied to Analytics data. */
+ filters?: string;
+ /** Unique table ID for retrieving Analytics data. Table ID is of the form ga:XXXX, where XXXX is the Analytics view (profile) ID. */
+ ids: string;
+ /** The response will include empty rows if this parameter is set to true, the default is true */
+ "include-empty-rows"?: boolean;
+ /** API key. Your API key identifies your project and provides you with API access, quota, and reports. Required unless you provide an OAuth 2.0 token. */
+ key?: string;
+ /** The maximum number of entries to include in this feed. */
+ "max-results"?: number;
+ /** A comma-separated list of Analytics metrics. E.g., 'ga:sessions,ga:pageviews'. At least one metric must be specified. */
+ metrics: string;
+ /** OAuth 2.0 token for the current user. */
+ oauth_token?: string;
+ /** The selected format for the response. Default format is JSON. */
+ output?: string;
+ /** Returns response with indentations and line breaks. */
+ prettyPrint?: boolean;
+ /** An opaque string that represents a user for quota purposes. Must not exceed 40 characters. */
+ quotaUser?: string;
+ /** The desired sampling level. */
+ samplingLevel?: string;
+ /** An Analytics segment to be applied to data. */
+ segment?: string;
+ /** A comma-separated list of dimensions or metrics that determine the sort order for Analytics data. */
+ sort?: string;
+ /**
+ * Start date for fetching Analytics data. Requests can specify a start date formatted as YYYY-MM-DD, or as a relative date (e.g., today, yesterday, or 7daysAgo). The default value
+ * is 7daysAgo.
+ */
+ "start-date": string;
+ /** An index of the first entity to retrieve. Use this parameter as a pagination mechanism along with the max-results parameter. */
+ "start-index"?: number;
+ /** Deprecated. Please use quotaUser instead. */
+ userIp?: string;
+ }
+
+ const apiObject: ApiObject = {
ids: viewID,
"start-date": startDate,
"end-date": endDate,
"include-empty-rows": includeEmptyRows,
- metrics,
+ "metrics": metrics
}
if (selectedDimensions !== undefined && selectedDimensions.length !== 0) {
const dimensions = selectedDimensions?.map(a => a.id).join(",")
@@ -111,13 +160,13 @@ export const useDataAPIRequest: UseDataAPIRequest = ({
apiObject["samplingLevel"] = selectedSamplingValue
}
if (segment !== undefined) {
- apiObject["segment"] = segment.segmentId
+ apiObject["segment"] = segment.segmentId as string
}
if (startIndex !== undefined && startIndex !== "") {
- apiObject["start-index"] = startIndex
+ apiObject["start-index"] = parseInt(startIndex)
}
if (maxResults !== undefined && maxResults !== "") {
- apiObject["max-results"] = maxResults
+ apiObject["max-results"] = parseInt(maxResults)
}
if (filters !== undefined && filters !== "") {
apiObject["filters"] = filters
diff --git a/src/components/RequestComposer/CohortRequest/index.tsx b/src/components/RequestComposer/CohortRequest/index.tsx
index 22f426ad..151f6e0d 100644
--- a/src/components/RequestComposer/CohortRequest/index.tsx
+++ b/src/components/RequestComposer/CohortRequest/index.tsx
@@ -13,10 +13,9 @@
// limitations under the License.
import * as React from "react"
+import { styled } from '@mui/material/styles';
import { useEffect } from "react"
-import makeStyles from "@material-ui/core/styles/makeStyles"
-
import { usePersistentBoolean } from "@/hooks"
import { StorageKey } from "@/constants"
import {
@@ -41,6 +40,24 @@ import {
UASegmentsRequestCtx,
useUASegments,
} from "@/components/UAPickers/useUASegments"
+import { PropsWithChildren } from 'react'
+
+const PREFIX = 'CohortRequest';
+
+const classes = {
+ showSegments: `${PREFIX}-showSegments`
+};
+
+const StyledUADimensionsAndMetricsRequestCtxProvider = styled(UADimensionsAndMetricsRequestCtx.Provider)((
+ {
+ theme
+ }
+) => ({
+ [`& .${classes.showSegments}`]: {
+ marginLeft: theme.spacing(1),
+ marginBottom: theme.spacing(1),
+ }
+}));
interface CohortRequestProps {
apv: UAAccountPropertyView
@@ -48,20 +65,13 @@ interface CohortRequestProps {
setRequestObject: (request: ReportsRequest | undefined) => void
}
-const useStyles = makeStyles(theme => ({
- showSegments: {
- marginLeft: theme.spacing(1),
- marginBottom: theme.spacing(1),
- },
-}))
-
-const CohortRequest: React.FC = ({
+const CohortRequest: React.FC> = ({
apv,
controlWidth,
setRequestObject,
children,
}) => {
- const classes = useStyles()
+
const [
showSegmentDefinition,
setShowSegmentDefinition,
@@ -103,9 +113,7 @@ const CohortRequest: React.FC = ({
)
return (
-
+
= ({
/>
{children}
-
- )
+
+ );
}
export default CohortRequest
diff --git a/src/components/RequestComposer/HistogramRequest/index.tsx b/src/components/RequestComposer/HistogramRequest/index.tsx
index fff73cbe..e6257410 100644
--- a/src/components/RequestComposer/HistogramRequest/index.tsx
+++ b/src/components/RequestComposer/HistogramRequest/index.tsx
@@ -13,9 +13,8 @@
// limitations under the License.
import * as React from "react"
-import { useEffect } from "react"
-
-import makeStyles from "@material-ui/core/styles/makeStyles"
+import { styled } from '@mui/material/styles';
+import {PropsWithChildren, useEffect} from "react"
import { usePersistentBoolean } from "@/hooks"
import { StorageKey } from "@/constants"
@@ -41,6 +40,23 @@ import {
useUASegments,
} from "@/components/UAPickers/useUASegments"
+const PREFIX = 'HistogramRequest';
+
+const classes = {
+ showSegments: `${PREFIX}-showSegments`
+};
+
+const StyledUADimensionsAndMetricsRequestCtxProvider = styled(UADimensionsAndMetricsRequestCtx.Provider)((
+ {
+ theme
+ }
+) => ({
+ [`& .${classes.showSegments}`]: {
+ marginLeft: theme.spacing(1),
+ marginBottom: theme.spacing(1),
+ }
+}));
+
export const linkFor = (hash: string) =>
`https://developers.google.com/analytics/devguides/reporting/core/v4/rest/v4/reports/batchGet#${hash}`
@@ -52,20 +68,13 @@ interface HistogramRequestProps {
setRequestObject: (request: ReportsRequest | undefined) => void
}
-const useStyles = makeStyles(theme => ({
- showSegments: {
- marginLeft: theme.spacing(1),
- marginBottom: theme.spacing(1),
- },
-}))
-
-const HistogramRequest: React.FC = ({
+const HistogramRequest: React.FC> = ({
apv,
controlWidth,
setRequestObject,
children,
}) => {
- const classes = useStyles()
+
const [
showSegmentDefinition,
setShowSegmentDefinition,
@@ -116,9 +125,7 @@ const HistogramRequest: React.FC = ({
}, [requestObject, setRequestObject])
return (
-
+
= ({
/>
{children}
-
- )
+
+ );
}
export default HistogramRequest
diff --git a/src/components/RequestComposer/MetricExpression/index.tsx b/src/components/RequestComposer/MetricExpression/index.tsx
index 4dd598b7..db7580fb 100644
--- a/src/components/RequestComposer/MetricExpression/index.tsx
+++ b/src/components/RequestComposer/MetricExpression/index.tsx
@@ -13,9 +13,8 @@
// limitations under the License.
import * as React from "react"
-import { useEffect } from "react"
-
-import makeStyles from "@material-ui/core/styles/makeStyles"
+import { styled } from '@mui/material/styles';
+import {PropsWithChildren, useEffect} from "react"
import { usePersistentBoolean } from "@/hooks"
import { StorageKey } from "@/constants"
@@ -41,26 +40,36 @@ import {
useUASegments,
} from "@/components/UAPickers/useUASegments"
+const PREFIX = 'MetricExpression';
+
+const classes = {
+ showSegments: `${PREFIX}-showSegments`
+};
+
+const StyledUADimensionsAndMetricsRequestCtxProvider = styled(UADimensionsAndMetricsRequestCtx.Provider)((
+ {
+ theme
+ }
+) => ({
+ [`& .${classes.showSegments}`]: {
+ marginLeft: theme.spacing(1),
+ marginBottom: theme.spacing(1),
+ }
+}));
+
interface MetricExpressionRequestProps {
apv: UAAccountPropertyView
controlWidth: string
setRequestObject: (request: ReportsRequest | undefined) => void
}
-const useStyles = makeStyles(theme => ({
- showSegments: {
- marginLeft: theme.spacing(1),
- marginBottom: theme.spacing(1),
- },
-}))
-
-const MetricExpression: React.FC = ({
+const MetricExpression: React.FC> = ({
apv,
controlWidth,
setRequestObject,
children,
}) => {
- const classes = useStyles()
+
const [
showSegmentDefinition,
setShowSegmentDefinition,
@@ -117,9 +126,7 @@ const MetricExpression: React.FC = ({
}, [requestObject, setRequestObject])
return (
-
+
= ({
/>
{children}
-
- )
+
+ );
}
export default MetricExpression
diff --git a/src/components/RequestComposer/MetricExpression/useMetricExpressionRequest.ts b/src/components/RequestComposer/MetricExpression/useMetricExpressionRequest.ts
index 5991baf1..d608a9a2 100644
--- a/src/components/RequestComposer/MetricExpression/useMetricExpressionRequest.ts
+++ b/src/components/RequestComposer/MetricExpression/useMetricExpressionRequest.ts
@@ -55,7 +55,12 @@ const useMetricExpressionRequest = ({
const aliases = (metricAliases || "").split(",")
const metrics = baseMetricExpressions.map((expression, idx) => {
const alias = aliases[idx]
- const metric = {
+
+ type MetricType = {
+ expression: string,
+ alias?: string
+ }
+ const metric: MetricType = {
expression,
}
if (alias !== undefined) {
diff --git a/src/components/RequestComposer/PivotRequest/index.tsx b/src/components/RequestComposer/PivotRequest/index.tsx
index c3c4da3a..95fa9822 100644
--- a/src/components/RequestComposer/PivotRequest/index.tsx
+++ b/src/components/RequestComposer/PivotRequest/index.tsx
@@ -13,9 +13,8 @@
// limitations under the License.
import * as React from "react"
-import { useEffect } from "react"
-
-import makeStyles from "@material-ui/core/styles/makeStyles"
+import { styled } from '@mui/material/styles';
+import {PropsWithChildren, useEffect} from "react"
import { usePersistentBoolean } from "@/hooks"
import { StorageKey } from "@/constants"
@@ -42,26 +41,36 @@ import {
useUASegments,
} from "@/components/UAPickers/useUASegments"
+const PREFIX = 'PivotRequest';
+
+const classes = {
+ showSegments: `${PREFIX}-showSegments`
+};
+
+const StyledUADimensionsAndMetricsRequestCtxProvider = styled(UADimensionsAndMetricsRequestCtx.Provider)((
+ {
+ theme
+ }
+) => ({
+ [`& .${classes.showSegments}`]: {
+ marginLeft: theme.spacing(1),
+ marginBottom: theme.spacing(1),
+ }
+}));
+
interface PivotRequestProps {
apv: UAAccountPropertyView
controlWidth: string
setRequestObject: (request: ReportsRequest | undefined) => void
}
-const useStyles = makeStyles(theme => ({
- showSegments: {
- marginLeft: theme.spacing(1),
- marginBottom: theme.spacing(1),
- },
-}))
-
-const PivotRequest: React.FC = ({
+const PivotRequest: React.FC> = ({
apv,
controlWidth,
setRequestObject,
children,
}) => {
- const classes = useStyles()
+
const [
showSegmentDefinition,
setShowSegmentDefinition,
@@ -126,9 +135,7 @@ const PivotRequest: React.FC = ({
}, [requestObject, setRequestObject])
return (
-
+
= ({
{children}
-
- )
+
+ );
}
export default PivotRequest
diff --git a/src/components/RequestComposer/ReportsTable.tsx b/src/components/RequestComposer/ReportsTable.tsx
index c1199d3f..3ea14cd5 100644
--- a/src/components/RequestComposer/ReportsTable.tsx
+++ b/src/components/RequestComposer/ReportsTable.tsx
@@ -1,41 +1,61 @@
-import React, { useState } from "react"
-
-import Typography from "@material-ui/core/Typography"
-import TableContainer from "@material-ui/core/TableContainer"
-import Table from "@material-ui/core/Table"
-import TableHead from "@material-ui/core/TableHead"
-import TableRow from "@material-ui/core/TableRow"
-import TableCell from "@material-ui/core/TableCell"
-import TableBody from "@material-ui/core/TableBody"
-import Tabs from "@material-ui/core/Tabs"
-import Tab from "@material-ui/core/Tab"
-import Box from "@material-ui/core/Box"
-import makeStyles from "@material-ui/core/styles/makeStyles"
+import React, {PropsWithChildren, useState} from "react"
+
+import { styled } from '@mui/material/styles';
+
+import Typography from "@mui/material/Typography"
+import TableContainer from "@mui/material/TableContainer"
+import Table from "@mui/material/Table"
+import TableHead from "@mui/material/TableHead"
+import TableRow from "@mui/material/TableRow"
+import TableCell from "@mui/material/TableCell"
+import TableBody from "@mui/material/TableBody"
+import Tabs from "@mui/material/Tabs"
+import Tab from "@mui/material/Tab"
+import Box from "@mui/material/Box"
import PrettyJson, { shouldCollapseResponse } from "@/components/PrettyJson"
import { GetReportsResponse } from "./api"
import Spinner from "@/components/Spinner"
-const useStyles = makeStyles(theme => ({
- loadingIndicator: {
+const PREFIX = 'ReportsTable';
+
+const classes = {
+ loadingIndicator: `${PREFIX}-loadingIndicator`,
+ container: `${PREFIX}-container`,
+ makeRequest: `${PREFIX}-makeRequest`,
+ reports: `${PREFIX}-reports`
+};
+
+const Root = styled('section')((
+ {
+ theme
+ }
+) => ({
+ [`& .${classes.loadingIndicator}`]: {
marginTop: theme.spacing(2),
display: "flex",
flexDirection: "column",
alignItems: "center",
},
- container: {
+
+ [`& .${classes.container}`]: {
maxHeight: 440,
},
- makeRequest: {
+
+ [`& .${classes.makeRequest}`]: {
marginTop: theme.spacing(1),
marginBottom: theme.spacing(2),
},
- reports: {
+
+ [`&.${classes.reports}`]: {
marginTop: theme.spacing(2),
- },
-}))
+ }
+}));
-const TabPanel: React.FC<{ value: number; index: number }> = ({
+type Props = { value: number,
+ index: number }
+
+const TabPanel: React.FC> = ({
value,
index,
children,
@@ -61,7 +81,7 @@ const ReportsTable: React.FC = ({
response,
longRequest,
}) => {
- const classes = useStyles()
+
const [tab, setTab] = useState(0)
// TODO - Add in functionality so this works right with cohort requests (or
// just make a cohortRequest Table which might be clearer.)
@@ -74,7 +94,7 @@ const ReportsTable: React.FC = ({
return null
}
return (
-
+
Response
= ({
shouldCollapse={shouldCollapseResponse}
/>
-
- )
+
+ );
}
export default ReportsTable
diff --git a/src/components/RequestComposer/RequestComposer.tsx b/src/components/RequestComposer/RequestComposer.tsx
index aa5b0528..e6b9f9b0 100644
--- a/src/components/RequestComposer/RequestComposer.tsx
+++ b/src/components/RequestComposer/RequestComposer.tsx
@@ -13,12 +13,12 @@
// limitations under the License.
import * as React from "react"
+import { styled } from '@mui/material/styles';
import { useState } from "react"
-import Typography from "@material-ui/core/Typography"
-import Tabs from "@material-ui/core/Tabs"
-import Tab from "@material-ui/core/Tab"
-import makeStyles from "@material-ui/core/styles/makeStyles"
+import Typography from "@mui/material/Typography"
+import Tabs from "@mui/material/Tabs"
+import Tab from "@mui/material/Tab"
import { StorageKey } from "@/constants"
import ViewSelector from "@/components/ViewSelector"
@@ -35,19 +35,33 @@ import { RequestComposerType } from "."
import useAccountPropertyView from "../ViewSelector/useAccountPropertyView"
import { navigate } from "gatsby"
-const useStyles = makeStyles(theme => ({
- viewSelector: {
+const PREFIX = 'RequestComposer';
+
+const classes = {
+ viewSelector: `${PREFIX}-viewSelector`,
+ maxControlWidth: `${PREFIX}-maxControlWidth`,
+ makeRequest: `${PREFIX}-makeRequest`
+};
+
+const Root = styled('div')((
+ {
+ theme
+ }
+) => ({
+ [`& .${classes.viewSelector}`]: {
flexDirection: "column",
maxWidth: "650px",
},
- maxControlWidth: {
+
+ [`& .${classes.maxControlWidth}`]: {
maxWidth: "600px",
},
- makeRequest: {
+
+ [`& .${classes.makeRequest}`]: {
marginTop: theme.spacing(1),
marginBottom: theme.spacing(2),
- },
-}))
+ }
+}));
export type ReportRequest = gapi.client.analyticsreporting.ReportRequest
export type ReportsRequest = { reportRequests: Array }
@@ -69,7 +83,7 @@ interface RequestComposerProps {
}
const RequestComposer: React.FC = ({ type }) => {
- const classes = useStyles()
+
const tab = React.useMemo(() => {
switch (type) {
case RequestComposerType.Histogram:
@@ -108,17 +122,17 @@ const RequestComposer: React.FC = ({ type }) => {
const button = React.useMemo(() => {
return (
-
- Make Request
-
+
+ Make Request
+
)
- }, [classes, makeRequest, canMakeRequest])
+ }, [makeRequest, canMakeRequest])
const accountPropertyView = useAccountPropertyView(
StorageKey.requestComposerAPV,
@@ -126,80 +140,79 @@ const RequestComposer: React.FC = ({ type }) => {
)
return (
- <>
-
- Select View
-
-
- {
- const path = `${pathForIdx(newValue)}`
- navigate(path)
- }}
- >
-
-
-
- {button}
-
-
-
-
+
+ Select View
+
+
+ {
+ const path = `${pathForIdx(newValue)}`
+ navigate(path)
+ }}
>
- {button}
-
-
-
-
- {button}
-
-
-
-
- {button}
-
-
-
-
-
-
-
-
-
- )
+
+
+ {button}
+
+
+
+
+ {button}
+
+
+
+
+ {button}
+
+
+
+
+ {button}
+
+
+
+
+
+
+
+
+ );
}
export default RequestComposer
diff --git a/src/components/RequestComposer/index.tsx b/src/components/RequestComposer/index.tsx
index e62023e6..b20512b2 100644
--- a/src/components/RequestComposer/index.tsx
+++ b/src/components/RequestComposer/index.tsx
@@ -14,17 +14,28 @@
import * as React from "react"
-import Typography from "@material-ui/core/Typography"
-import makeStyles from "@material-ui/core/styles/makeStyles"
+import { styled } from '@mui/material/styles';
+
+import Typography from "@mui/material/Typography"
import ExternalLink from "@/components/ExternalLink"
import Tool from "./RequestComposer"
-const useStyles = makeStyles(theme => ({
- list: {
+const PREFIX = 'RequestComposer';
+
+const classes = {
+ list: `${PREFIX}-list`
+};
+
+const Root = styled('div')((
+ {
+ theme
+ }
+) => ({
+ [`& .${classes.list}`]: {
marginTop: theme.spacing(0),
- },
-}))
+ }
+}));
export enum RequestComposerType {
Histogram = "histogram",
@@ -38,9 +49,9 @@ interface RequestComposerProps {
}
const RequestComposer: React.FC = ({ type }) => {
- const classes = useStyles()
+
return (
- <>
+ (
Overview
The Request Composer demonstrates how to compose the following Analytics
@@ -68,7 +79,6 @@ const RequestComposer: React.FC = ({ type }) => {
-
This version of Request Composer does not support the following
features:
@@ -90,7 +100,6 @@ const RequestComposer: React.FC = ({ type }) => {
-
To compose a request:
= ({
helperText,
fullWidth = false,
}) => {
- const classes = useStyles()
+
return (
disableClearable
- className={clsx(classes.formControl, className)}
+ className={className}
autoHighlight
autoSelect
options={options}
getOptionLabel={option => option.displayName}
- getOptionSelected={(a, b) => a.value === b.value}
+ isOptionEqualToValue={(a, b) => a.value === b.value}
value={(value || null) as any}
onChange={(_event, value) => {
if (onChange !== undefined) {
@@ -58,7 +52,11 @@ const Select: React.FC = ({
setValue(value === null ? undefined : (value as SelectOption))
}
}}
- renderOption={option => option.displayName}
+ renderOption={(props, option) => (
+
+ {option.displayName}
+
+ )}
renderInput={params => (
({
- formControl: {
- minWidth: "15ch",
- },
-}))
+import Autocomplete from "@mui/material/Autocomplete"
export interface SelectOption {
value: string
@@ -37,17 +31,17 @@ const Select: React.FC = ({
onChange,
helperText,
}) => {
- const classes = useStyles()
+
return (
multiple
- className={clsx(classes.formControl, className)}
+ className={className}
autoHighlight
autoSelect
options={options}
getOptionLabel={option => option.displayName}
- getOptionSelected={(a, b) => a.value === b.value}
+ isOptionEqualToValue={(a, b) => a.value === b.value}
value={(value || null) as any}
onChange={(_event, value) => {
if (onChange !== undefined) {
@@ -57,7 +51,11 @@ const Select: React.FC = ({
setValue(value === null ? undefined : (value as SelectOption[]))
}
}}
- renderOption={option => option.displayName}
+ renderOption={(props, option) => (
+
+ {option.displayName}
+
+ )}
renderInput={params => (
= ({
+const ShortenLink: React.FC> = ({
disabled,
children = "Shorten link",
pab,
diff --git a/src/components/Spinner.tsx b/src/components/Spinner.tsx
index 80d030cc..cdce1e40 100644
--- a/src/components/Spinner.tsx
+++ b/src/components/Spinner.tsx
@@ -1,31 +1,38 @@
import * as React from "react"
-import { useTheme, makeStyles } from "@material-ui/core"
-import Loader from "react-loader-spinner"
-import "react-loader-spinner/dist/loader/css/react-spinner-loader.css"
+import { styled } from '@mui/material/styles';
+import { useTheme } from "@mui/material"
+import {Circles} from "react-loader-spinner"
+import {PropsWithChildren} from 'react';
-const useStyles = makeStyles(() => ({
- loadingIndicator: {
+const PREFIX = 'Spinner';
+
+const classes = {
+ loadingIndicator: `${PREFIX}-loadingIndicator`
+};
+
+const Root = styled('section')(() => ({
+ [`&.${classes.loadingIndicator}`]: {
display: "flex",
flexDirection: "column",
alignItems: "center",
- },
-}))
+ }
+}));
interface SpinnerProps {
ellipses?: boolean
}
-const Spinner: React.FC = ({ children, ellipses }) => {
- const classes = useStyles()
+const Spinner: React.FC> = ({ children, ellipses }) => {
+
const theme = useTheme()
return (
-
+
{children}
{ellipses && <>…}
-
- )
+ = ({ value, index, children }) => {
+const TabPanel: React.FC> = ({ value, index, children }) => {
return (
-
+
+
{sendHitButton}
= ({
text="Copy link to this hit"
variant="contained"
/>
-
- )
+
+ );
}
default: {
return (
-
-
- {hitStatus === HitStatus.Validating
- ? "Validating..."
- : "Validate hit"}
-
-
+
+
+ {hitStatus === HitStatus.Validating
+ ? "Validating..."
+ : "Validate hit"}
+
+
+
-
-
-
- {title}
-
-
- setOpen(true)}
- className={classes.mobileMenu}
+
)
}
-const Layout2: React.FC
+
-
- GA Demos & Tools
-
-
- setOpen(false)}>
-
+
+ setOpen(true)}
+ className={classes.mobileMenu}
+ >
+
+ GA Demos & Tools
+
+
+ setOpen(false)}>
+
+
+
+
+
+
+ -
-
-
-
+
+
{inner}
} else {
- return
-
- {option.attributes!.group}
-
-
- )}
- renderInput={params => (
-
-
- {`${option.attributes!.uiName} (${
- option.sort === "ASCENDING" ? "Ascending" : "Descending"
- })`}
-
-
- {`${option.sort === "ASCENDING" ? "" : "-"}${option.id}`}
-
-
-
+
+ {option.attributes!.group}
+
+
+
+
+ {`${option.attributes!.uiName} (${
+ option.sort === "ASCENDING" ? "Ascending" : "Descending"
+ })`}
+
+
+ {`${option.sort === "ASCENDING" ? "" : "-"}${option.id}`}
+
+
+ {children}
- Select an account, a property, and a view. @@ -98,10 +107,9 @@ const RequestComposer: React.FC
- Set query parameters.
- Click Make Request.
+
- )
+
+ );
}
export default ScrollToTop
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 5fae2344..362df7c0 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -1,14 +1,8 @@
import * as React from "react"
-import { makeStyles, TextField } from "@material-ui/core"
+import { TextField } from "@mui/material"
import clsx from "classnames"
import { Dispatch } from "../types"
-import Autocomplete from "@material-ui/lab/Autocomplete"
-
-const useStyles = makeStyles(() => ({
- formControl: {
- minWidth: "15ch",
- },
-}))
+import Autocomplete from "@mui/material/Autocomplete"
export interface SelectOption {
value: string
@@ -38,17 +32,17 @@ const Select: React.FC ({
+ [`& .${classes.option}`]: {
+ display: "flex",
+ width: "100%",
+ },
+
+ [`& .${classes.left}`]: {
+ flexGrow: 1,
+ display: "flex",
+ flexDirection: "column",
+ }
+}));
+
export enum V4SamplingLevel {
Default = "DEFAULT",
SMALL = "SMALL",
@@ -44,34 +68,22 @@ export enum CohortSize {
const removeDeprecatedColumns = (column: ColumnT): true | false =>
column.attributes?.status !== "DEPRECATED"
-const useColumnStyles = makeStyles(() => ({
- option: {
- display: "flex",
- width: "100%",
- },
- left: {
- flexGrow: 1,
- display: "flex",
- flexDirection: "column",
- },
-}))
const Column: React.FC<{ column: ColumnT }> = ({ column }) => {
- const classes = useColumnStyles()
return (
-
-
+
+ )}
renderInput={params => (
dimension.id!}
+ getOptionLabel={(dimension) => typeof dimension === "string" ? dimension : dimension.id!}
value={selectedDimensions || []}
onChange={(_event, value) =>
setDimensionIDs((value as ColumnT[])?.map(c => c.id!))
}
- renderOption={column =>
+
+ )}
renderInput={params => (
true) || []
}
- getOptionLabel={metric => metric.id!}
+ getOptionLabel={(metric) => typeof metric === "string" ? metric : metric.id!}
value={selectedMetric || null}
onChange={(_event, value) =>
setMetricID(value === null ? undefined : (value as ColumnT).id)
}
- renderOption={column =>
+
+ )}
renderInput={params => (
metric.id!}
+ getOptionLabel={(metric) => typeof metric === "string" ? metric : metric.id!}
value={selectedMetrics || []}
onChange={(_event, value) =>
setMetricIDs((value as ColumnT[])?.map(c => c.id!))
}
- renderOption={column =>
+
+ )}
renderInput={params => (
= ({ segment, showSegmentDefinition }) => {
- const classes = useColumnStyles()
const subtitleText = showSegmentDefinition
? segment.definition || `${segment.name} has no segment definition.`
: segment.segmentId || ""
@@ -279,23 +306,25 @@ const Segment: React.FC<{
? subtitleText.substring(0, 40) + "..."
: subtitleText
return (
-
-
- {column.attributes!.uiName}
-
-
- {column.id}
+
- {column.attributes!.group}
-
-
)
}
@@ -98,12 +110,16 @@ export const DimensionPicker: React.FC<{
options={
successful(request)?.dimensions.filter(removeDeprecatedColumns) || []
}
- getOptionLabel={dimension => dimension.id!}
+ getOptionLabel={(dimension) => typeof dimension === "string" ? dimension : dimension.id!}
value={selectedDimension || null}
onChange={(_event, value) =>
setDimensionID(value === null ? undefined : (value as ColumnT).id)
}
- renderOption={column =>
+
+ {column.attributes!.group}
-
+
+ {column.attributes!.uiName}
+
+
+ {column.id}
+
+
+
-
+
)}
renderInput={params => (
setSelected(value === null ? undefined : (value as V4SamplingLevel))
}
- renderOption={column => column}
+ renderOption={(props, column) => (
+
+ {column}
+
+ )}
renderInput={params => (
column}
+ renderOption={(props, column) => (
+
+ {column}
+
+ )}
renderInput={params => (
setSelected(value === null ? undefined : (value as CohortSize))
}
- renderOption={column => column}
+ renderOption={(props, column) => (
+
+ {column}
+
+ )}
renderInput={params => (
(theme => ({
- root: props => ({
+const PREFIX = 'ViewSelector';
+
+const classes = {
+ root: `${PREFIX}-root`,
+ formControl: `${PREFIX}-formControl`
+};
+
+const Root = styled('div')((
+ {
+ theme
+ }
+) => ({
+ [`&.${classes.root}`]: {
display: "flex",
- flexDirection: props.vertical ? "column" : "unset",
- ...(props.vertical ? { marginBottom: theme.spacing(1) } : {}),
+ flexDirection: "unset",
width: "100%",
- }),
- formControl: {
+ },
+
+ [`& .${classes.formControl}`]: {
width: "100%",
margin: theme.spacing(1),
marginLeft: "unset",
- },
-}))
+ }
+}));
interface CommonProps {
account?: AccountSummary
@@ -76,7 +87,7 @@ const ViewSelector: React.FC = props => {
size = "medium",
variant = "standard",
} = props
- const classes = useStyles(props)
+
const request = useAccountSummaries(account, property)
@@ -96,7 +107,7 @@ const ViewSelector: React.FC = props => {
}
return (
- > = ({ children, className }) => {
-const Warning: React.FC = ({ children, className }) => {
- const classes = useStyles()
return (
-
+
{children}
-
- )
+
+ );
}
export default Warning
diff --git a/src/components/WithHelpText.tsx b/src/components/WithHelpText.tsx
index aa8e28f9..a99dd6e6 100644
--- a/src/components/WithHelpText.tsx
+++ b/src/components/WithHelpText.tsx
@@ -1,29 +1,36 @@
import * as React from "react"
-import { makeStyles } from "@material-ui/core"
+import { styled } from '@mui/material/styles';
import clsx from "classnames"
-import Typography from "@material-ui/core/Typography"
-import useFormStyles from "@/hooks/useFormStyles"
+import Typography from "@mui/material/Typography"
+import {PropsWithChildren} from 'react';
-interface WithHelpTextProps {
- label?: string | JSX.Element | undefined
- helpText?: string | JSX.Element
- afterHelp?: JSX.Element
- className?: string
- notched?: boolean
- shrink?: boolean
- hrGroup?: boolean
-}
+const PREFIX = 'WithHelpText';
-interface Props {
- notched?: boolean
- shrink?: boolean
-}
-const useStyles = makeStyles(theme => ({
- withHelpText: ({ notched, shrink }: Props) => ({
- marginTop: notched ? theme.spacing(1.5) : "unset",
- ...(shrink ? { display: "flex" } : {}),
- }),
- helpText: {
+const classes = {
+ withHelpText: `${PREFIX}-withHelpText`,
+ helpText: `${PREFIX}-helpText`,
+ shrunk: `${PREFIX}-shrunk`,
+ notchedContainer: `${PREFIX}-notchedContainer`,
+ label: `${PREFIX}-label`,
+ legend: `${PREFIX}-legend`,
+ fieldset: `${PREFIX}-fieldset`,
+ notchedChild: `${PREFIX}-notchedChild`,
+ hr: `${PREFIX}-hr`,
+ hrChildren: `${PREFIX}-hrChildren`,
+ verticalHr: `${PREFIX}-verticalHr`
+};
+
+const Root = styled('div')((
+ {
+ theme
+ }
+) => ({
+ [`& .${classes.withHelpText}`]: {
+ marginTop: theme.spacing(1.5),
+ display: "flex",
+ },
+
+ [`& .${classes.helpText}`]: {
...theme.typography.caption,
marginTop: theme.spacing(0.5),
paddingBottom: theme.spacing(2),
@@ -31,23 +38,27 @@ const useStyles = makeStyles(theme => ({
marginLeft: theme.spacing(2),
padding: "unset",
},
- shrunk: {
+
+ [`& .${classes.shrunk}`]: {
flexShrink: 1,
},
- notchedContainer: ({ shrink }: Props) => ({
+
+ [`& .${classes.notchedContainer}`]: {
position: "relative",
- ...(shrink ? {} : { width: "100%" }),
- }),
- label: {
+ width: "100%",
+ },
+ [`& .${classes.label}`]: {
color: "rgba(0, 0, 0, 0.54)",
...theme.typography.caption,
marginBottom: theme.spacing(1),
},
- legend: {
+
+ [`& .${classes.legend}`]: {
color: "rgba(0, 0, 0, 0.54)",
...theme.typography.caption,
},
- fieldset: {
+
+ [`& .${classes.fieldset}`]: {
position: "absolute",
top: theme.spacing(-1.5),
left: 0,
@@ -65,20 +76,39 @@ const useStyles = makeStyles(theme => ({
...theme.typography.caption,
},
},
- notchedChild: {
+
+ [`& .${classes.notchedChild}`]: {
padding: theme.spacing(1),
},
- hr: ({ shrink }: Props) => ({
- ...(shrink ? {} : { width: "100%" }),
- }),
- hrChildren: {
+ [`& .${classes.verticalHr}`]: {
+ display: "flex",
+ "&> hr": {
+ marginRight: theme.spacing(1),
+ },
+ "&> :not(:first-child)": {
+ flexGrow: 1,
+ },
+ },
+ [`&.${classes.hr}`]: {
+ width: "100%",
+ },
+ [`& .${classes.hrChildren}`]: {
"&> :last-child": {
paddingBottom: theme.spacing(2),
},
- },
-}))
+ }
+}));
-const WithHelpText: React.FC = ({
+interface WithHelpTextProps {
+ label?: string | JSX.Element | undefined
+ helpText?: string | JSX.Element
+ afterHelp?: JSX.Element
+ className?: string
+ notched?: boolean
+ shrink?: boolean
+ hrGroup?: boolean
+}
+const WithHelpText: React.FC> = ({
label,
children,
helpText,
@@ -88,12 +118,11 @@ const WithHelpText: React.FC = ({
className,
hrGroup,
}) => {
- const classes = useStyles({ notched, shrink })
- const formClasses = useFormStyles()
+
if (hrGroup) {
return (
-
+
Compatible Fields
@@ -120,8 +138,8 @@ const Compatible: React.FC<
Pick a property above to enable this functionality.
)}
-
- )
+
+ );
}
export default Compatible
diff --git a/src/components/ga4/DimensionsMetricsExplorer/Field.tsx b/src/components/ga4/DimensionsMetricsExplorer/Field.tsx
index d6695bfe..513144bc 100644
--- a/src/components/ga4/DimensionsMetricsExplorer/Field.tsx
+++ b/src/components/ga4/DimensionsMetricsExplorer/Field.tsx
@@ -1,8 +1,9 @@
import * as React from "react"
-import IconLink from "@material-ui/icons/Link"
-import makeStyles from "@material-ui/core/styles/makeStyles"
-import Typography from "@material-ui/core/Typography"
+import { styled } from '@mui/material/styles';
+
+import IconLink from "@mui/icons-material/Link"
+import Typography from "@mui/material/Typography"
import InlineCode from "@/components/InlineCode"
import { CopyIconButton } from "@/components/CopyButton"
@@ -13,6 +14,48 @@ import { AccountSummary, PropertySummary } from "@/types/ga4/StreamPicker"
import LabeledCheckbox from "@/components/LabeledCheckbox"
import { CompatibleHook } from "./useCompatibility"
+const PREFIX = 'Field';
+
+const classes = {
+ headingUIName: `${PREFIX}-headingUIName`,
+ heading: `${PREFIX}-heading`,
+ apiName: `${PREFIX}-apiName`
+};
+
+const Root = styled('div')((
+ {
+ theme
+ }
+) => ({
+ [`& .${classes.headingUIName}`]: {
+ marginRight: theme.spacing(1),
+ "& > span": {
+ fontSize: "inherit",
+ },
+ },
+
+ [`& .${classes.heading}`]: {
+ display: "flex",
+ flexWrap: "wrap",
+ alignItems: "center",
+ marginBottom: theme.spacing(1),
+ "&> button": {
+ display: "none",
+ },
+ "&:hover": {
+ "&> button": {
+ display: "unset",
+ padding: "unset",
+ },
+ },
+ },
+
+ [`& .${classes.apiName}`]: {
+ margin: theme.spacing(0, 1),
+ fontSize: "0.75em",
+ }
+}));
+
const knownLinks: [string, JSX.Element][] = [
[
"",
@@ -75,34 +118,6 @@ const linkifyText = (
}
}
-const useStyles = makeStyles(theme => ({
- headingUIName: {
- marginRight: theme.spacing(1),
- "& > span": {
- fontSize: "inherit",
- },
- },
- heading: {
- display: "flex",
- flexWrap: "wrap",
- alignItems: "center",
- marginBottom: theme.spacing(1),
- "&> button": {
- display: "none",
- },
- "&:hover": {
- "&> button": {
- display: "unset",
- padding: "unset",
- },
- },
- },
- apiName: {
- margin: theme.spacing(0, 1),
- fontSize: "0.75em",
- },
-}))
-
interface FieldProps extends CompatibleHook {
field:
| { type: "dimension"; value: Dimension }
@@ -112,7 +127,7 @@ interface FieldProps extends CompatibleHook {
}
const Field: React.FC = props => {
- const classes = useStyles()
+
const {
field,
@@ -193,7 +208,7 @@ const Field: React.FC = props => {
}, [checked, addDimension, addMetric, removeDimension, removeMetric, field])
return (
-
- GA4 Data API's getMetadata method
-
-)
+const PREFIX = 'DimensionsMetricsExplorer';
-// TODO - add back in once this api is public.
-// const checkCompatibility = (
-// checkCompatibility
-// )
+const classes = {
+ headingLinks: `${PREFIX}-headingLinks`,
+ form: `${PREFIX}-form`,
+ search: `${PREFIX}-search`
+};
-const useStyles = makeStyles(theme => ({
- headingLinks: {
+const Root = styled('div')((
+ {
+ theme
+ }
+) => ({
+ [`& .${classes.headingLinks}`]: {
"& > a": {
color: theme.palette.text.primary,
},
},
- search: {
+
+ [`& .${classes.search}`]: {
marginTop: theme.spacing(1),
},
-}))
+
+ [`& .${classes.form}`]: {
+ maxWidth: "80ch",
+ }
+}));
+
+const dataAPI = (
+
+ GA4 Data API's getMetadata method
+
+)
const RenderSuccessful: React.FC = ({
categories,
aps,
}) => {
- const classes = useStyles()
+
const { search, setSearch } = useInputs()
const searchRegex = useMemo(
() =>
@@ -106,7 +117,7 @@ const RenderSuccessful: React.FC = ({
useScrollTo()
return (
- <>
+ (
= ({
)
})}
-
- )
+ )
+ );
}
export enum QueryParam {
@@ -191,7 +202,6 @@ export enum QueryParam {
}
const DimensionsMetricsExplorer: React.FC = () => {
- const formClasses = useFormStyles()
const aps = useAccountProperty(
StorageKey.ga4DimensionsMetricsExplorerAPS,
QueryParam,
@@ -219,7 +229,7 @@ const DimensionsMetricsExplorer: React.FC = () => {
This demo is a catalog of all dimensions and metrics available for a
given property with linkable descriptions for all fields.
-
+
Select property
diff --git a/src/components/ga4/DimensionsMetricsExplorer/useCompatibility.tsx b/src/components/ga4/DimensionsMetricsExplorer/useCompatibility.tsx
index 7c700795..ffe3a45e 100644
--- a/src/components/ga4/DimensionsMetricsExplorer/useCompatibility.tsx
+++ b/src/components/ga4/DimensionsMetricsExplorer/useCompatibility.tsx
@@ -3,6 +3,7 @@ import { useCallback, useEffect, useMemo, useState } from "react"
import { useSelector } from "react-redux"
import { AccountProperty } from "../StreamPicker/useAccountProperty"
import { Dimension, Metric } from "./useDimensionsAndMetrics"
+type CheckCompatibilityResponse = gapi.client.analyticsdata.CheckCompatibilityResponse
export interface CompatibleHook {
dimensions: Dimension[] | undefined
@@ -56,6 +57,7 @@ const useCompatibility = (ap: AccountProperty): CompatibleHook => {
setIncompatibleDimensions(undefined)
return
}
+
gapi.client
.request({
path: `https://content-analyticsdata.googleapis.com/v1beta/${ap.property?.property}:checkCompatibility`,
@@ -66,17 +68,17 @@ const useCompatibility = (ap: AccountProperty): CompatibleHook => {
metrics: metrics?.map(m => ({ name: m.apiName })),
}),
})
- .then(response => {
+ .then((response) => {
const {
dimensionCompatibilities,
metricCompatibilities,
- } = response.result
- const d = dimensionCompatibilities
+ } = (response.result as CheckCompatibilityResponse)
+ const d = dimensionCompatibilities!
.filter(d => d.compatibility === "INCOMPATIBLE")
- .map(d => d.dimensionMetadata)
- const m = metricCompatibilities
+ .map(d => d.dimensionMetadata!)
+ const m = metricCompatibilities!
.filter(m => m.compatibility === "INCOMPATIBLE")
- .map(m => m.metricMetadata)
+ .map(m => m.metricMetadata!)
setIncompatibleMetrics(m)
setIncompatibleDimensions(d)
})
@@ -85,8 +87,8 @@ const useCompatibility = (ap: AccountProperty): CompatibleHook => {
const hasFieldSelected = useMemo(
() =>
- (dimensions !== undefined && dimensions.length) > 0 ||
- (metrics !== undefined && metrics.length > 0),
+ (dimensions !== undefined && dimensions!.length > 0) ||
+ (metrics !== undefined && metrics!.length > 0),
[dimensions, metrics]
)
diff --git a/src/components/ga4/EnhancedEcommerce/add-to-cart.module.css b/src/components/ga4/EnhancedEcommerce/add-to-cart.module.css
new file mode 100644
index 00000000..03f2531a
--- /dev/null
+++ b/src/components/ga4/EnhancedEcommerce/add-to-cart.module.css
@@ -0,0 +1,18 @@
+.addToCart {
+ display: flex;
+ flex-direction: row;
+ color: var(--text-color-inverted);
+ background-color: var(--primary);
+ align-self: flex-end;
+ padding: var(--space-sm) var(--space-xl);
+ border-radius: var(--radius-md);
+ font-weight: var(--bold);
+ align-items: center;
+ height: var(--size-input);
+ justify-content: center;
+ transition: var(--transition);
+}
+
+.addToCart:hover {
+ box-shadow: var(--shadow);
+}
\ No newline at end of file
diff --git a/src/components/ga4/EnhancedEcommerce/add-to-cart.tsx b/src/components/ga4/EnhancedEcommerce/add-to-cart.tsx
new file mode 100644
index 00000000..2f244ca2
--- /dev/null
+++ b/src/components/ga4/EnhancedEcommerce/add-to-cart.tsx
@@ -0,0 +1,42 @@
+import * as React from "react"
+import {addToCart as addToCartStyle} from "./add-to-cart.module.css"
+import {Product, StoreContext} from "./store-context"
+
+interface Props {
+ variantId: string,
+ quantity: number,
+ product: Product
+}
+
+export function AddToCart(props: Props) {
+ const {addVariantToCart, addEvent} = React.useContext(StoreContext)
+
+ function addToCart(e: React.MouseEvent) {
+ e.preventDefault()
+ const snippet = `gtag("event", "add_to_cart", {
+ "currency": "USD",
+ "value": ${parseInt(props.product.price) * props.quantity},
+ "items": [{
+ "item_id": "${props.product.id}",
+ "item_name": "${props.product.title}",
+ "price": "${props.product.price}",
+ "item_brand": "${props.product.brand}",
+ "item_category": "${props.product.category}",
+ "index": 0,
+ "size": "M"
+ }]
+});`
+ addEvent('add_to_cart', 'Item(s) added to cart.', snippet)
+ addVariantToCart(props.product, props.variantId, props.quantity)
+ }
+
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/ga4/EnhancedEcommerce/cart-button.tsx b/src/components/ga4/EnhancedEcommerce/cart-button.tsx
index f7292a0f..4cb3729b 100644
--- a/src/components/ga4/EnhancedEcommerce/cart-button.tsx
+++ b/src/components/ga4/EnhancedEcommerce/cart-button.tsx
@@ -2,19 +2,23 @@ import * as React from "react"
import {Link} from "gatsby"
import {badge, cartButton} from "./cart-button.module.css"
import {MdShoppingCart} from 'react-icons/md';
-import IconButton from "@material-ui/core/IconButton"
+import IconButton from "@mui/material/IconButton"
-export function CartButton({quantity}) {
+interface Props
+{
+ quantity:number
+}
+export function CartButton(props:Props) {
return (
- {quantity > 0 &&
-
- {segment.name}
-
-
- {abbreviatedText}
+
+
- {segment.type === "CUSTOM"
- ? "Custom Segment"
- : segment.type === "DYNAMIC"
- ? "Dynamic Segment"
- : "Built In Segment"}
-
-
+
)
}
@@ -318,10 +347,10 @@ export const SegmentPicker: React.FC<{
const request = React.useContext(UASegmentsRequestCtx)
const getOptionLabel = React.useCallback(
- (segment: SegmentT) =>
- (showSegmentDefinition
+ (segment: SegmentT | string) =>
+ typeof segment === "string" ? segment : (showSegmentDefinition
? segment.definition ||
- (segment.name && `${segment.name} has no segment definiton.`)
+ (segment.name && `${segment.name} has no segment definition.`)
: segment.segmentId!) || "",
[showSegmentDefinition]
)
@@ -334,7 +363,7 @@ export const SegmentPicker: React.FC<{
freeSolo
loading={request.status === RequestStatus.InProgress}
options={successful(request)?.segments || []}
- getOptionSelected={(a, b) =>
+ isOptionEqualToValue={(a, b) =>
a.id === b.id || a.definition === b.definition
}
getOptionLabel={getOptionLabel}
@@ -357,11 +386,13 @@ export const SegmentPicker: React.FC<{
onChange={(_event, value) => {
setSegmentID(value === null ? undefined : (value as SegmentT).id)
}}
- renderOption={column => (
-
+
+ {segment.type === "CUSTOM"
+ ? "Custom Segment"
+ : segment.type === "DYNAMIC"
+ ? "Dynamic Segment"
+ : "Built In Segment"}
-
+
+ {segment.name}
+
+
+ {abbreviatedText}
+
+
+
+
data-testid={TestID.AccountAutocomplete}
blurOnSelect
@@ -120,7 +131,7 @@ const ViewSelector: React.FC = props => {
!props.onlyProperty && props.setViewID(firstView?.id || undefined)
}
}}
- getOptionSelected={(a, b) => a.id === b.id}
+ isOptionEqualToValue={(a, b) => a.id === b.id}
getOptionLabel={account => account.name || ""}
renderInput={params => (
= props => {
!props.onlyProperty && props.setViewID(firstView?.id || undefined)
}
}}
- getOptionSelected={(a, b) => a.id === b.id}
+ isOptionEqualToValue={(a, b) => a.id === b.id}
getOptionLabel={property => property.name || ""}
renderInput={params => (
= props => {
: "You don't have any views for this property."
}
value={props.view || null}
- getOptionSelected={(a, b) => a.id === b.id}
+ isOptionEqualToValue={(a, b) => a.id === b.id}
onChange={(_, v: ProfileSummary | null) => {
props.setViewID(v?.id || undefined)
}}
@@ -197,8 +208,8 @@ const ViewSelector: React.FC = props => {
)}
/>
)}
-
- )
+
+ );
}
export default ViewSelector
diff --git a/src/components/Warning.tsx b/src/components/Warning.tsx
index 32e29f29..18ad014a 100644
--- a/src/components/Warning.tsx
+++ b/src/components/Warning.tsx
@@ -1,15 +1,24 @@
import * as React from "react"
-import { Paper, makeStyles } from "@material-ui/core"
+import { styled } from '@mui/material/styles';
+import { Paper } from "@mui/material"
import classnames from "classnames"
-import { Warning as WarningIcon } from "@material-ui/icons"
-import red from "@material-ui/core/colors/red"
+import { Warning as WarningIcon } from "@mui/icons-material"
+import { red } from "@mui/material/colors"
+import {PropsWithChildren} from 'react';
-interface WarningProps {
- className?: string
-}
+const PREFIX = 'Warning';
-const useStyles = makeStyles(theme => ({
- warning: {
+const classes = {
+ warning: `${PREFIX}-warning`,
+ warningIcon: `${PREFIX}-warningIcon`
+};
+
+const StyledPaper = styled(Paper)((
+ {
+ theme
+ }
+) => ({
+ [`&.${classes.warning}`]: {
margin: theme.spacing(2, 0),
marginRight: theme.spacing(1),
padding: theme.spacing(1),
@@ -19,20 +28,25 @@ const useStyles = makeStyles(theme => ({
alignItems: "center",
backgroundColor: red[100],
},
- warningIcon: {
+
+ [`& .${classes.warningIcon}`]: {
margin: theme.spacing(0, 2),
- },
-}))
+ }
+}));
+
+interface WarningProps {
+ className?: string
+}
+
+const Warning: React.FC
-
- )
+
+ );
}
return (
-
+
+
-
@@ -110,11 +139,11 @@ const WithHelpText: React.FC = ({
+
+
)
}
diff --git a/src/components/ga4/DimensionsMetricsExplorer/Compatible.tsx b/src/components/ga4/DimensionsMetricsExplorer/Compatible.tsx
index 112ffd31..8116b345 100644
--- a/src/components/ga4/DimensionsMetricsExplorer/Compatible.tsx
+++ b/src/components/ga4/DimensionsMetricsExplorer/Compatible.tsx
@@ -1,42 +1,60 @@
import { PropertySummary } from "@/types/ga4/StreamPicker"
+import { styled } from '@mui/material/styles';
import {
Chip,
IconButton,
- makeStyles,
Paper,
Typography,
-} from "@material-ui/core"
-import { Replay } from "@material-ui/icons"
+} from "@mui/material"
+import { Replay } from "@mui/icons-material"
import { navigate } from "gatsby"
import * as React from "react"
import QueryExplorerLink from "../QueryExplorer/BasicReport/QueryExplorerLink"
import { CompatibleHook } from "./useCompatibility"
-const useStyles = makeStyles(theme => ({
- compatible: {
+const PREFIX = 'Compatible';
+
+const classes = {
+ compatible: `${PREFIX}-compatible`,
+ chipGrid: `${PREFIX}-chipGrid`,
+ chipLabel: `${PREFIX}-chipLabel`,
+ chips: `${PREFIX}-chips`,
+ removeButton: `${PREFIX}-removeButton`
+};
+
+const StyledPaper = styled(Paper)((
+ {
+ theme
+ }
+) => ({
+ [`&.${classes.compatible}`]: {
padding: theme.spacing(2),
marginTop: theme.spacing(2),
marginBottom: theme.spacing(1),
},
- chipGrid: {
+
+ [`& .${classes.chipGrid}`]: {
display: "grid",
gridTemplateColumns: "min-content 1fr",
alignItems: "baseline",
},
- chipLabel: {
+
+ [`& .${classes.chipLabel}`]: {
justifySelf: "end",
marginRight: theme.spacing(1),
},
- chips: {
+
+ [`& .${classes.chips}`]: {
"&> :not(:first-child)": {
marginLeft: theme.spacing(1),
},
},
- removeButton: {
+
+ [`& .${classes.removeButton}`]: {
marginTop: theme.spacing(1),
marginBottom: theme.spacing(1),
- },
-}))
+ }
+}));
const WithProperty: React.FC<
CompatibleHook & { property: PropertySummary | undefined }
@@ -48,7 +66,7 @@ const WithProperty: React.FC<
property,
hasFieldSelected,
}) => {
- const classes = useStyles()
+
if (property === undefined) {
return null
@@ -103,11 +121,11 @@ const WithProperty: React.FC<
const Compatible: React.FC<
CompatibleHook & { property: PropertySummary | undefined }
> = props => {
- const classes = useStyles()
+
const { reset, property, hasFieldSelected } = props
return (
- = ({
{afterHelp}
)}
-
+
{property === undefined ? (
uiName
@@ -215,8 +230,8 @@ const Field: React.FC = props => {
/>
{withLinks}
-
- )
+
+ );
}
export default Field
diff --git a/src/components/ga4/DimensionsMetricsExplorer/index.tsx b/src/components/ga4/DimensionsMetricsExplorer/index.tsx
index 6ce407ff..1cbeef95 100644
--- a/src/components/ga4/DimensionsMetricsExplorer/index.tsx
+++ b/src/components/ga4/DimensionsMetricsExplorer/index.tsx
@@ -1,11 +1,12 @@
import * as React from "react"
+import { styled } from '@mui/material/styles';
import { useMemo } from "react"
import ExternalLink from "@/components/ExternalLink"
-import Typography from "@material-ui/core/Typography"
-import TextField from "@material-ui/core/TextField"
-import IconButton from "@material-ui/core/IconButton"
-import Clear from "@material-ui/icons/Clear"
+import Typography from "@mui/material/Typography"
+import TextField from "@mui/material/TextField"
+import IconButton from "@mui/material/IconButton"
+import Clear from "@mui/icons-material/Clear"
import { Url, StorageKey } from "@/constants"
import { useScrollTo } from "@/hooks"
@@ -19,44 +20,54 @@ import {
Dimension,
Metric,
} from "./useDimensionsAndMetrics"
-import useFormStyles from "@/hooks/useFormStyles"
import StreamPicker from "../StreamPicker"
import useAccountProperty, {
AccountProperty,
} from "../StreamPicker/useAccountProperty"
import { Link } from "gatsby"
-import { makeStyles } from "@material-ui/core"
import useCompatibility from "./useCompatibility"
import Compatible from "./Compatible"
import ScrollToTop from "@/components/ScrollToTop"
-const dataAPI = (
- {quantity}
}
+ {props.quantity > 0 && {props.quantity}
}
)
}
diff --git a/src/components/ga4/EnhancedEcommerce/ga-console.tsx b/src/components/ga4/EnhancedEcommerce/ga-console.tsx
index d6c8a0e0..0396f02f 100644
--- a/src/components/ga4/EnhancedEcommerce/ga-console.tsx
+++ b/src/components/ga4/EnhancedEcommerce/ga-console.tsx
@@ -1,27 +1,32 @@
import * as React from "react"
import {StoreContext} from "./store-context"
import {emptyEvents, eventDescription, eventLine, eventName, eventSnippet, eventTimestamp, gaConsoleStyle} from "@/components/ga4/EnhancedEcommerce/ga-console.module.css";
-import Dialog from '@material-ui/core/Dialog';
-import Tabs from '@material-ui/core/Tabs';
-import Tab from '@material-ui/core/Tab';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import Button from '@material-ui/core/Button';
-import TextField from '@material-ui/core/TextField';
+import Dialog from '@mui/material/Dialog';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogContentText from '@mui/material/DialogContentText';
+import DialogTitle from '@mui/material/DialogTitle';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
import {Link} from "gatsby";
-import {Box, Typography} from "@material-ui/core";
+import {Box, Typography} from "@mui/material";
+import {ReactNode, SyntheticEvent} from 'react';
-function TabPanel(props) {
- const {children, value, index, ...other} = props;
+type Props = {
+ children: ReactNode,
+ value?: number,
+ index: number
+}
+function TabPanel(props: Props) {
+ const {children, value, index} = props;
return (
{value === index && (
@@ -32,7 +37,7 @@ function TabPanel(props) {
);
}
-export function GaConsole({className}) {
+export function GaConsole({className = ''}) {
const {events} = React.useContext(StoreContext)
const [open, setOpen] = React.useState(false);
@@ -46,14 +51,14 @@ export function GaConsole({className}) {
const [value, setValue] = React.useState(0);
- const handleClickOpen = (eventKey) => () => {
+ const handleClickOpen = (eventKey: number) => () => {
setSelectedEvent(events[events.length - eventKey - 1])
setOpen(true);
};
const handleClose = () => {
setOpen(false);
};
- const handleChange = (event, newValue) => {
+ const handleChange = (event: SyntheticEvent, newValue: any) => {
setValue(newValue);
};
diff --git a/src/components/ga4/EnhancedEcommerce/navigation.tsx b/src/components/ga4/EnhancedEcommerce/navigation.tsx
index 66bc6e2a..defbfe48 100644
--- a/src/components/ga4/EnhancedEcommerce/navigation.tsx
+++ b/src/components/ga4/EnhancedEcommerce/navigation.tsx
@@ -2,7 +2,7 @@ import {Link} from "gatsby"
import * as React from "react"
import {navStyle, navLink, activeLink} from "./navigation.module.css"
-export function Navigation({className}) {
+export function Navigation({className=''}) {
return (