-
-
-
- {firstRow}
- {secondRow && {secondRow}
}
-
-
- Search for your account information…
-
- setSearchQuery(e.target.value)}
- variant="outlined"
- size="small"
- />
-
- …or browse through all your accounts
-
-
-
- 
- Scan the QR code to test your URL.
-
- )}
-
-
- )
-}
-
-const SelectableColumn: React.FC<{
- column: Column
- selected: boolean
- disabled: boolean
- setSelected: (selected: boolean) => void
-}> = ({ column, selected, disabled, setSelected }) => {
- const classes = useStyles()
- const isDeprecated = React.useMemo(
- () => column.attributes?.status !== "PUBLIC",
- [column.attributes]
- )
- return (
-
-
- {column.attributes?.uiName}
-
-
- {column.id}
-
-
- navigate(slug)}
- className={classes.columnButton}
- >
-
-
-
-
-
- {name}
-
-
- )
-}
-
-const ColumnGroup: React.FC<{
- open: boolean
- toggleOpen: () => void
- name: string
- columns: Column[]
- onlySegments: boolean
- allowDeprecated: boolean
- allowableCubes: Set
- {sortedColumns.length === 0 ? (
- <>No {name}.
- ) : (
- sortedColumns.map(column => {
- const disabled =
- allowableCubes.intersect(cubesByColumnName.get(column.id!, Set()))
- .size === 0
- return (
- selectColumn(column.id!, selected)}
- disabled={disabled}
- selected={selectedColumns.contains(column.id!)}
- />
- )
- })
- )}
-
-
-
- )
-}
-
-export default ColumnGroupList
diff --git a/src/components/DimensionsMetricsExplorer/Explorer.tsx b/src/components/DimensionsMetricsExplorer/Explorer.tsx
deleted file mode 100644
index b0301b00f..000000000
--- a/src/components/DimensionsMetricsExplorer/Explorer.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-// Copyright 2019 Google Inc. All rights reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import * as React from "react"
-
-import TextField from "@material-ui/core/TextField"
-import IconButton from "@material-ui/core/IconButton"
-import Clear from "@material-ui/icons/Clear"
-import makeStyles from "@material-ui/core/styles/makeStyles"
-import { useDebounce } from "use-debounce"
-
-import { StorageKey } from "@/constants"
-import { Dispatch, failed, inProgress, notStarted, successful } from "@/types"
-import LabeledCheckbox from "@/components/LabeledCheckbox"
-import { usePersistentBoolean, usePersistentString } from "../../hooks"
-import ColumnGroupList from "./ColumnGroupList"
-import useAnchorRedirects from "./useAnchorRedirects"
-import useColumns from "./useColumns"
-import { Typography } from "@material-ui/core"
-import PrettyJson from "../PrettyJson"
-
-const useStyles = makeStyles(theme => ({
- search: {
- display: "flex",
- flexDirection: "column",
- "&> label": {
- margin: theme.spacing(0),
- marginTop: theme.spacing(-0.5),
- marginBottom: theme.spacing(-1),
- },
- },
- searchInput: {
- maxWidth: theme.spacing(60),
- },
-}))
-
-const Search: React.FC<{
- searchText: string | undefined
- setSearchText: Dispatch
- {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
deleted file mode 100644
index 7324576de..000000000
--- a/src/components/DimensionsMetricsExplorer/GroupInfoTemplate.tsx
+++ /dev/null
@@ -1,158 +0,0 @@
-// Copyright 2020 Google Inc. All rights reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-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 classnames from "classnames"
-import { Link } from "gatsby"
-import { sortBy } from "lodash"
-
-import Layout from "@/components/Layout"
-import { CopyIconButton } from "@/components/CopyButton"
-import { Column } from "./common-types"
-
-type GroupInfoTemplateProps = {
- pageContext: {
- groupName: string
- dimensions: Column[]
- metrics: Column[]
- }
-}
-
-type ColumnProps = {
- column: Column
-}
-
-const useStyles = makeStyles(theme => ({
- deprecatedText: {
- textDecoration: "line-through",
- },
- returnLink: {
- display: "flex",
- alignItems: "center",
- "& svg": {
- marginRight: theme.spacing(1),
- },
- },
- columnHeading: {
- marginBottom: theme.spacing(1),
- display: "flex",
- alignItems: "baseline",
- "&> span": {
- marginLeft: theme.spacing(1),
- },
- },
- chips: {
- "& div": {
- marginRight: theme.spacing(1),
- },
- marginBottom: theme.spacing(1),
- },
- linkIcon: {
- alignSelf: "center",
- marginLeft: theme.spacing(1),
- },
-}))
-
-const ColumnInfo: React.FCLoading dimensions and metrics...
- )}
- {failed(columnsRequest) && (
-
- There was an error calling the api.
- Details:
-
- )}
-
@@ -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
deleted file mode 100644
index 14af35508..000000000
--- a/src/components/HitBuilder/HitCard.tsx
+++ /dev/null
@@ -1,368 +0,0 @@
-// Copyright 2020 Google Inc. All rights reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-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 classnames from "classnames"
-
-import { PAB } from "@/components/Buttons"
-import CopyButton from "@/components/CopyButton"
-import { ParametersAPI, Validation } from "./hooks"
-import { HitStatus } from "./types"
-
-const useStyles = makeStyles(theme => ({
- hitElement: {
- padding: theme.spacing(2, 3),
- display: "flex",
- flexDirection: "column",
- },
- hitElementActions: {
- marginTop: theme.spacing(2),
- display: "flex",
- "& > button": {
- marginRight: theme.spacing(1),
- },
- },
- addParameterButton: {
- marginLeft: theme.spacing(1),
- },
- 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.
- minHeight: theme.spacing(24),
- margin: theme.spacing(-3, -3, 1, -3),
- padding: theme.spacing(0, 3),
- "& > span": {
- "& > svg": {
- fontSize: theme.typography.h1.fontSize,
- },
- "& > h3": {
- marginLeft: theme.spacing(1),
- fontSize: theme.typography.h2.fontSize,
- },
- display: "flex",
- alignItems: "center",
- marginTop: theme.spacing(1),
- },
- },
- [HitStatus.Validating]: {
- backgroundColor: orange[100],
- color: orange[900],
- },
- [HitStatus.Sending]: {
- backgroundColor: orange[100],
- color: orange[900],
- },
- [HitStatus.Invalid]: {
- backgroundColor: red[100],
- color: red[900],
- },
- [HitStatus.Sent]: {
- backgroundColor: green[100],
- color: green[900],
- },
- [HitStatus.Valid]: {
- backgroundColor: green[100],
- color: green[900],
- },
- [HitStatus.Unvalidated]: {
- 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
- hitStatus: Validation["hitStatus"]
- validationMessages: Validation["validationMessages"]
- sendHit: Validation["sendHit"]
- validateHit: Validation["validateHit"]
- addParameter: ParametersAPI["addParameter"]
- hasParameter: ParametersAPI["hasParameter"]
- setParametersFromString: ParametersAPI["setParametersFromString"]
-}
-
-const HitCard: React.FC = ({
- validateHit,
- sendHit,
- hitPayload,
- hitStatus,
- validationMessages,
- addParameter,
- hasParameter,
- setParametersFromString,
-}) => {
- const classes = useStyles()
- const [value, setValue] = React.useState(hitPayload)
-
- // Update the localState of then input when the hitPayload changes.
- React.useEffect(() => {
- setValue(hitPayload)
- }, [hitPayload])
-
- const onChange = React.useCallback(
- (e: React.ChangeEvent) => {
- setValue(e.target.value)
- setParametersFromString(e.target.value)
- },
- [setParametersFromString]
- )
- return (
-
-
-
- POST /collect HTTP/1.1
-
-
-
- Host: www.google-analytics.com
-
-
-
- )
-}
-
-interface ValidationStatusProps {
- validationMessages: Validation["validationMessages"]
- hitStatus: Validation["hitStatus"]
- addParameter: ParametersAPI["addParameter"]
- hasParameter: ParametersAPI["hasParameter"]
-}
-
-const ValidationStatus: React.FC = ({
- validationMessages,
- hitStatus,
- addParameter,
- hasParameter,
-}) => {
- const classes = useStyles()
-
- let headerIcon: JSX.Element | null = null
- let hitHeading: JSX.Element | null = null
- let hitContent: JSX.Element[] | JSX.Element | null = null
- switch (hitStatus) {
- case HitStatus.Sent:
- case HitStatus.Valid: {
- headerIcon = Hit is valid!
- hitContent = (
- <>
-
- Use the controls below to copy the hit or share it with coworkers.
-
-
- You can also send the hit to Google Analytics and watch it in action
- in the Real Time view.
-
-
- )
- break
- }
- case HitStatus.Invalid: {
- headerIcon = Hit is invalid!
- hitContent = (
-
- {hitStatus === HitStatus.Sending ? "Sending" : "Validating"} hit...
-
- )
- break
- }
- case HitStatus.Unvalidated: {
- headerIcon = This hit has not been validated.
- )
- hitContent = (
- <>
-
- You can update the hit using any of the controls below.
-
-
- When you're done editing parameters, click the "Validate hit" button
- to make sure everything's OK.
-
-
- )
- break
- }
- default: {
- throw new Error(`${hitStatus} has not been accounted for.`)
- }
- }
- return (
-
-
- {headerIcon}
- {hitHeading}
-
- {hitContent}
-
- )
-}
-
-interface HitActionsProps {
- hitPayload: string
- hitStatus: Validation["hitStatus"]
- validateHit: Validation["validateHit"]
- sendHit: Validation["sendHit"]
-}
-
-const HitActions: React.FC = ({
- hitStatus,
- hitPayload,
- validateHit,
- sendHit,
-}) => {
- const classes = useStyles()
-
- switch (hitStatus) {
- case HitStatus.Sent:
- case HitStatus.Valid: {
- const sendHitButton = (
- = ({
- updateParameterName,
- updateParameterValue,
- shouldFocus,
- removeParameter,
- addParameter,
- parameters,
- properties,
-}) => {
- const classes = useStyles()
- const newParam = React.useRef(null)
- const [v, t, tid, cid, ...otherParams] = parameters
-
- const setHitType = React.useCallback(
- hitType => {
- updateParameterValue(t.id, hitType)
- },
- [t.id, updateParameterValue]
- )
-
- const setCid = React.useCallback(
- newId => {
- updateParameterValue(cid.id, newId)
- },
- [cid.id, updateParameterValue]
- )
-
- const setTid = React.useCallback(
- newTid => {
- updateParameterValue(tid.id, newTid)
- },
- [tid.id, updateParameterValue]
- )
- const [localPropertyInput, setLocalPropertyInput] = React.useState("")
-
- React.useEffect(() => {
- if (tid.value !== localPropertyInput) {
- setLocalPropertyInput(tid.value as string)
- }
- }, [tid.value, localPropertyInput])
-
- return (
-
-
- v
-
-
-
-
- id="t"
- data-testid={`change-t`}
- blurOnSelect
- openOnFocus
- autoHighlight
- autoSelect
- multiple={false}
- options={HIT_TYPES}
- freeSolo
- getOptionLabel={a => a}
- renderOption={e => e}
- value={t.value as string}
- renderInput={params => (
-
- id="tid"
- blurOnSelect
- freeSolo
- openOnFocus
- autoHighlight
- multiple={false}
- options={properties}
- getOptionLabel={a => a.id}
- inputValue={localPropertyInput}
- onChange={(_, value) => {
- if (value !== null) {
- // TODO fix the type here later.
- setTid((value as any).id)
- }
- }}
- onInputChange={(_, value, reason) => {
- // Don't set the local property input if the reason was reset.
- if (reason === "clear" || reason === "input") {
- setLocalPropertyInput(value)
- setTid(value)
- }
- }}
- filterOptions={(options, state) => {
- return options.filter(option => {
- return [option.group, option.id, option.name].find(v =>
- v.match(state.inputValue)
- )
- })
- }}
- renderOption={a => {
- return (
- setCid(e.target.value)}
- label="cid"
- variant="outlined"
- size="small"
- InputProps={{
- endAdornment: (
-
-
- setCid(uuid())}
- >
-
-
-
- ),
- }}
- />
-
- {otherParams.map((param, idx) => {
- const isDuplicate =
- otherParams.find(
- other =>
- param.name !== "" &&
- other.id !== param.id &&
- param.name === other.name
- ) !== undefined
- const helperText = isDuplicate ? "Duplicate Parameter Name" : undefined
- return (
-
- )
-}
-export default Parameters
diff --git a/src/components/HitBuilder/hit.ts b/src/components/HitBuilder/hit.ts
deleted file mode 100644
index a1262bfa3..000000000
--- a/src/components/HitBuilder/hit.ts
+++ /dev/null
@@ -1,163 +0,0 @@
-// Copyright 2020 Google Inc. All rights reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import { WindowLocation } from "@reach/router"
-import querystring from "querystring"
-
-import {
- Param,
- Params,
- RequiredParams,
- ParamV,
- ParamT,
- ParamTId,
- ParamCId,
- ParamOptional,
- HIT_TYPES,
-} from "./types"
-
-const DEFAULT_HIT = "v=1&t=pageview"
-
-/**
- * Gets the initial hit from the URL if present. If no hit is found in the URL
- * the default hit is used.
- * @return The default hit.
- */
-export function getInitialHitAndUpdateUrl(l: WindowLocation): string {
- const query = l.search.slice(1)
-
- if (query === "") {
- return DEFAULT_HIT
- }
- // Remove the query params after initial load.
- window.history.replaceState({}, document.title, window.location.pathname)
- return query
-}
-
-/**
- * Accepts a hit payload or URL and converts it into an array of param objects
- * where the required params are always first and in the correct order.
- * @param hit A query string or hit payload.
- */
-export function convertHitToParams(
- nextId: () => number,
- hit: string = ""
-): Params {
- // If the hit contains a "?", remove it and all characters before it.
- const searchIndex = hit.indexOf("?")
- if (searchIndex > -1) hit = hit.slice(searchIndex + 1)
-
- let query: querystring.ParsedUrlQuery = {}
- try {
- query = querystring.parse(hit)
- } catch (e) {
- // It's common to paste in a string that's invalid, but we can easily
- // recover from here.
- }
-
- // Create required params first, regardless of order in the hit.
- const v: ParamV = {
- id: nextId(),
- name: RequiredParams.V,
- value: query[RequiredParams.V] || "1",
- required: true,
- }
- const t: ParamT = {
- id: nextId(),
- name: RequiredParams.T,
- value: query[RequiredParams.T] || HIT_TYPES[0],
- required: true,
- }
- const tid: ParamTId = {
- id: nextId(),
- name: RequiredParams.T_Id,
- value: query[RequiredParams.T_Id] || "",
- required: true,
- }
- const cid: ParamCId = {
- id: nextId(),
- name: RequiredParams.C_Id,
- value: query[RequiredParams.C_Id] || "",
- required: true,
- }
- delete query[RequiredParams.V]
- delete query[RequiredParams.T]
- delete query[RequiredParams.T_Id]
- delete query[RequiredParams.C_Id]
-
- // Create optional params after required params.
- const others: ParamOptional[] = Object.entries(query).map(([name, v]) => {
- const value = v === undefined ? "" : v
- return {
- name,
- value,
- id: nextId(),
- isOptional: true,
- }
- })
- const params: Params = [v, t, tid, cid, ...others]
- return params
-}
-
-/**
- * Returns the hit model data as a query string.
- * @param params An array of param objects.
- */
-export function convertParamsToHit(params: Param[]): string {
- const query: { [name: string]: any } = {}
- for (const { name, value } of params) {
- if (value === "") {
- continue
- }
- query[name] = value
- }
-
- return querystring.stringify(query)
-}
-
-export interface ValidationResult {
- response: {
- parserMessage: any[]
- hitParsingResult: {
- valid: boolean
- parserMessage: {
- messageType: any
- description: string
- messageCode: any
- parameter: string
- }[]
- hit: string
- }[]
- }
- hit: string
-}
-
-/**
- * Sends a validation request to the Measurement Protocol Validation Server
- * and returns a promise that will be fulfilled with the response.
- * @param hit A Measurement Protocol hit payload.
- */
-export async function getHitValidationResult(
- hit: string
-): Promise {
- const apiResponse = await fetch(
- "https://www.google-analytics.com/debug/collect",
- {
- method: "POST",
- body: hit,
- }
- )
- const asJson = await apiResponse.json()
- return { response: asJson, hit }
-}
diff --git a/src/components/HitBuilder/hooks.ts b/src/components/HitBuilder/hooks.ts
deleted file mode 100644
index 6cd372168..000000000
--- a/src/components/HitBuilder/hooks.ts
+++ /dev/null
@@ -1,274 +0,0 @@
-// Copyright 2020 Google Inc. All rights reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import * as React from "react"
-
-import { useSelector } from "react-redux"
-import { useLocation } from "@reach/router"
-
-import { Params, Param, ValidationMessage, HitStatus, Property } from "./types"
-import * as hitUtils from "./hit"
-
-const formatMessage = (message: {
- parameter: any
- description: string
- messageType: any
- messageCode: any
-}) => {
- const linkRegex = /Please see http:\/\/goo\.gl\/a8d4RP#\w+ for details\.$/
- return {
- param: message.parameter,
- description: message.description.replace(linkRegex, "").trim(),
- type: message.messageType,
- code: message.messageCode,
- }
-}
-
-const sleep = async (milliseconds: number): Promise => {
- return new Promise(resolve => {
- window.setTimeout(() => {
- resolve()
- }, milliseconds)
- })
-}
-
-export type Validation = {
- validationMessages: ValidationMessage[]
- hitStatus: HitStatus
- // Validate the hit against the measurement protocol validation server
- validateHit: () => void
- // Send the hit to GA
- sendHit: () => void
-}
-type UseValidationServer = (parameters: Params) => Validation
-export const useValidationServer: UseValidationServer = parameters => {
- const [hitStatus, setHitStatus] = React.useState(HitStatus.Unvalidated)
-
- React.useEffect(() => {
- setHitStatus(HitStatus.Unvalidated)
- }, [parameters])
-
- const [validationMessages, setValidationMessages] = React.useState<
- ValidationMessage[]
- >([])
-
- const validateHit = React.useCallback(() => {
- setHitStatus(HitStatus.Validating)
- try {
- const hit = hitUtils.convertParamsToHit(parameters)
- Promise.all([
- hitUtils.getHitValidationResult(hit),
- sleep(500),
- ]).then(([validationResult, _]) => {
- const result = validationResult.response.hitParsingResult[0]
- const validationMessages = result.parserMessage.filter(
- // TODO - I might want to do something different with ERRORS
- // versus INFOs. Check what the current one does.
- message => message.messageType === "ERROR"
- )
- setValidationMessages(validationMessages.map(formatMessage))
- if (result.valid) {
- setHitStatus(HitStatus.Valid)
- } else {
- setHitStatus(HitStatus.Invalid)
- }
- })
- } catch (e) {}
- }, [parameters])
-
- const sendHit = React.useCallback(async () => {
- setHitStatus(HitStatus.Sending)
- const hit = hitUtils.convertParamsToHit(parameters)
- await Promise.all([
- sleep(500),
- fetch("https://www.google-analytics.com/collect", {
- method: "POST",
- body: hit,
- }),
- ])
- setHitStatus(HitStatus.Sent)
- }, [parameters])
-
- return { validationMessages, validateHit, hitStatus, sendHit }
-}
-
-let id = 0
-const nextId = () => {
- id++
- return id
-}
-
-export type ParametersAPI = {
- updateParameterName: (id: number, newName: string) => void
- updateParameterValue: (id: number, newValue: any) => void
- addParameter: (parameterName?: string) => void
- removeParameter: (id: number) => void
- hasParameter: (parameterName: string) => boolean
- setParametersFromString: (paramString: string) => void
- parameters: Params
- shouldFocus: (id: number, value: boolean) => boolean
- setFocus: (id: number, value: boolean) => void
-}
-type UseParameters = () => ParametersAPI
-export const useParameters: UseParameters = () => {
- const location = useLocation()
-
- const [parameters, setParameters] = React.useState(() => {
- const initial = hitUtils.getInitialHitAndUpdateUrl(location)
- return hitUtils.convertHitToParams(nextId, initial)
- })
-
- const [focusData, setFocusData] = React.useState<
- | {
- id: number
- value: boolean
- }
- | undefined
- >(undefined)
-
- const setParametersFromString = React.useCallback((paramString: string) => {
- setFocusData(undefined)
- setParameters(hitUtils.convertHitToParams(nextId, paramString))
- }, [])
-
- // Sets the focus to a particular param/value combo
- const setFocus = React.useCallback((id, value = false) => {
- setFocusData({ id, value })
- }, [])
-
- const resetFocus = React.useCallback(() => {
- setFocusData(undefined)
- }, [setFocusData])
-
- const shouldFocus = React.useCallback(
- (id: number, value = false) => {
- if (focusData === undefined) {
- return false
- }
- // Not sure about the value part.
- return focusData.id === id && focusData.value === value
- },
- [focusData]
- )
-
- const hasParameter = React.useCallback(
- (parameterName: string): boolean => {
- const param = parameters.find(p => p.name === parameterName)
- return param !== undefined
- },
- [parameters]
- )
-
- const addParameter = React.useCallback(
- (parameterName?: string) => {
- const id = nextId()
- const nuParameter: Param = { id, name: parameterName || "", value: "" }
- setParameters(([v, t, tid, cid, ...others]) => {
- return [v, t, tid, cid, ...others.concat([nuParameter])]
- })
- setFocus(id, parameterName !== undefined)
- },
- [setFocus]
- )
-
- const removeParameter = React.useCallback(
- (id: number) => {
- setParameters(([v, t, tid, cid, ...others]) => {
- resetFocus()
- return [v, t, tid, cid, ...others.filter(a => a.id !== id)]
- })
- },
- [resetFocus]
- )
-
- const updateParameterName = React.useCallback(
- (id: number, newName: string) => {
- setParameters(([v, t, tid, cid, ...others]) => {
- return [
- v,
- t,
- tid,
- cid,
- ...others.map(param =>
- param.id === id ? { ...param, name: newName } : param
- ),
- ]
- })
- },
- []
- )
-
- const updateParameterValue = React.useCallback(
- (id: number, newValue: any) => {
- setParameters(params => {
- const nuParams = params.map(param =>
- param.id === id ? { ...param, value: newValue } : param
- ) as Params
- return nuParams
- })
- },
- []
- )
-
- return {
- setFocus,
- shouldFocus,
- updateParameterName,
- updateParameterValue,
- addParameter,
- removeParameter,
- hasParameter,
- setParametersFromString,
- parameters,
- }
-}
-
-type UseProperties = () => {
- properties: Property[]
-}
-// This hook encapsulates the logic for getting the user's GA properties using
-// the management api.
-export const useProperties: UseProperties = () => {
- const gapi = useSelector((state: AppState) => state.gapi)
- const managementAPI = React.useMemo(
- () => gapi?.client?.analytics?.management,
- [gapi]
- )
- const [properties, setProperties] = React.useState([])
-
- React.useEffect(() => {
- if (managementAPI === undefined) {
- return
- }
- ;(async () => {
- const summaries = (await managementAPI.accountSummaries?.list({})).result
- const properties: Property[] = []
- summaries.items?.forEach(account => {
- const accountName = account.name || ""
- account.webProperties?.forEach(property => {
- const propertyName = property.name || ""
- const propertyId = property.id || ""
- properties.push({
- name: propertyName,
- id: propertyId,
- group: accountName,
- })
- })
- })
- setProperties(properties)
- })()
- }, [managementAPI])
-
- return { properties }
-}
diff --git a/src/components/HitBuilder/index.spec.tsx b/src/components/HitBuilder/index.spec.tsx
deleted file mode 100644
index ee88e0e0b..000000000
--- a/src/components/HitBuilder/index.spec.tsx
+++ /dev/null
@@ -1,264 +0,0 @@
-// Copyright 2020 Google Inc. All rights reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import * as React from "react"
-
-import * as renderer from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import "@testing-library/jest-dom"
-
-import { withProviders } from "@/test-utils"
-import HitBuilder from "./index"
-
-const getInputs = async (
- findByLabelText: (label: string) => Promise
-) => {
- const v = await findByLabelText("v")
- const t = await findByLabelText("t")
- const tid = await findByLabelText("tid")
- const cid = (await findByLabelText("cid")) as HTMLInputElement
- const hitPayload = (await findByLabelText("Hit payload")) as HTMLInputElement
-
- return { v, t, tid, cid, hitPayload }
-}
-
-describe("HitBuilder", () => {
- // test("can render page without error", () => {
- // const { wrapped } = withProviders(
- This tools allows you to construct and validate{" "}
-
- Measurement Protocol
- {" "}
- hits using the{" "}
-
- Measurement Protocol Validation Server
-
- .
-
-
-
- To get started, use the controls below to construct a new hit or paste
- an existing hit into the text box in the hit summary.
-
-
-
- The box below displays the full hit and its validation status. You can
- update the hit in the text box and the parameter details below will be
- automatically updated.
-
-
- Hit parameter details
-
- The fields below are a breakdown of the individual parameters and values
- for the hit in the text box above. When you update these values, the hit
- above will be automatically updated.
-
-
- References
-
-
- Click the info link to the right of each parameter in the details
- section to go directly to its documentation. For general references,
- refer to the links below:
-
-
-
-
-
- Parameter reference
-
-
-
-
- Examples of common hits
-
-
-
-
- )
-}
-
-export default HitBuilder
diff --git a/src/components/HitBuilder/types.ts b/src/components/HitBuilder/types.ts
deleted file mode 100644
index 276a4d471..000000000
--- a/src/components/HitBuilder/types.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-export const HIT_TYPES = [
- "pageview",
- "screenview",
- "event",
- "transaction",
- "item",
- "social",
- "exception",
- "timing",
-]
-
-export enum ActionType {
- SetHitPayload = "SET_HIT_PAYLOAD",
- SetHitStatus = "SET_HIT_STATUS",
- SetAuthorized = "SET_AUTHORIZED",
- AddParam = "ADD_PARAM",
- RemoveParam = "REMOVE_PARAM",
- EditParamName = "EDIT_PARAM_NAME",
- EditParamValue = "EDIT_PARAM_VALUE",
- ReplaceParams = "REPLACE_PARAMS",
- SetUserProperties = "SET_USER_PROPERTIES",
- SetValidationMessages = "SET_VALIDATION_MESSAGES",
-}
-
-export interface SetHitStatus {
- type: ActionType.SetHitStatus
- status: HitStatus
-}
-
-export interface SetAuthorized {
- type: ActionType.SetAuthorized
-}
-
-export interface AddParam {
- type: ActionType.AddParam
-}
-
-export interface RemoveParam {
- type: ActionType.RemoveParam
- id: number
-}
-
-export interface EditParamName {
- type: ActionType.EditParamName
- name: string
- id: number
-}
-
-export interface EditParamValue {
- type: ActionType.EditParamValue
- value: string
- id: number
-}
-
-export interface ReplaceParams {
- type: ActionType.ReplaceParams
- params: Params
-}
-
-export interface SetUserProperties {
- type: ActionType.SetUserProperties
- properties: Property[]
-}
-
-export interface SetValidationMessages {
- type: ActionType.SetValidationMessages
- validationMessages: ValidationMessage[]
-}
-
-export interface SetHitPayload {
- type: ActionType.SetHitPayload
- hitPayload: string
-}
-
-export type HitAction =
- | SetHitStatus
- | SetAuthorized
- | AddParam
- | RemoveParam
- | EditParamName
- | EditParamValue
- | ReplaceParams
- | SetUserProperties
- | SetValidationMessages
- | SetHitPayload
-
-export enum HitStatus {
- Unvalidated = "UNVALIDATED",
- Validating = "VALIDATING",
- Valid = "VALID",
- Invalid = "INVALID",
- Sent = "Sent",
- Sending = "Sending",
-}
-
-export enum RequiredParams {
- V = "v",
- T = "t",
- T_Id = "tid",
- C_Id = "cid",
-}
-
-export type ParamV = ParamType
-export type ParamT = ParamType
-export type ParamTId = ParamType
-export type ParamCId = ParamType
-export type ParamOptional = ParamType
-
-export type Params = [ParamV, ParamT, ParamTId, ParamCId, ...ParamOptional[]]
-
-export type Param =
- | ParamType
- | ParamType
- | ParamType
- | ParamType
- | ParamType
-
-interface ParamType {
- id: number
- name: T
- value: string | string[]
- required?: true
- isOptional?: true
-}
-
-export interface Property {
- name: string
- id: string
- group: string
-}
-export interface ValidationMessage {
- param: string
- description: string
- code: "VALUE_REQUIRED"
-}
-
-export interface State {
- hitPayload: string
- hitStatus: HitStatus
- isAuthorized: boolean
- params: Params
- properties: Property[]
- validationMessages: ValidationMessage[]
-}
diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
index d7e07fbac..ff37fc290 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 1822487ca..d16e52374 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 25aed8956..cf2ac2f7e 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 684672471..f225d042a 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 98911adf4..55fac1a18 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 b69dbb9a8..98d19589a 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 6d3635285..3944a7d6e 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,392 @@ 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
deleted file mode 100644
index 3b115f36b..000000000
--- a/src/components/QueryExplorer/Report.tsx
+++ /dev/null
@@ -1,185 +0,0 @@
-// Copyright 2020 Google Inc. All rights reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import * as React from "react"
-
-import {
- makeStyles,
- Table,
- TableHead,
- TableRow,
- TableCell,
- TableBody,
- TableContainer,
- Paper,
- Typography,
- TextField,
-} from "@material-ui/core"
-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: {
- padding: theme.spacing(2, 2, 0, 2),
- margin: "unset",
- },
- container: {
- maxHeight: 440,
- },
- breakAll: {
- wordBreak: "break-all",
- },
- 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
- }
- return (
-
-
-
-
- )
-}
-
-interface ReportProps {
- queryResponse: QueryResponse
- columns: gapi.client.analytics.Column[] | undefined
- permalink: string | undefined
-}
-
-const Report: React.FC = ({
- queryResponse,
- columns,
- permalink,
-}) => {
- const classes = useStyles()
-
- const requestURL = React.useMemo(() => {
- if (
- queryResponse === undefined ||
- queryResponse.status !== APIStatus.Success
- ) {
- return undefined
- }
- const [base, queryParamString] = queryResponse.response.selfLink!.split("?")
- const existingQueryParams = new URLSearchParams(queryParamString)
- const nuQueryParams = new URLSearchParams()
- existingQueryParams.forEach((value, key) => {
- nuQueryParams.append(key, value)
- })
- return `${base}?${nuQueryParams.toString()}`
- }, [queryResponse])
-
- if (queryResponse === undefined) {
- return null
- }
-
- if (queryResponse.status === APIStatus.InProgress) {
- return Loading results …
- }
-
- if (queryResponse.status === APIStatus.Error) {
- return (
-
-
- An error has occured
-
-
- Error code: {queryResponse.error.code}
- Error message: {queryResponse.error.message}
-
-
- )
- }
-
- return (
-
-
- {queryResponse.response.profileInfo?.profileName}
-
-
-
- Showing {queryResponse.response.rows?.length} out of{" "}
- {queryResponse.response.totalResults} total results.
-
-
- {queryResponse.response.containsSampledData ? (
- <>Contains sampled data.
- ) : (
- <>Does not contain sampled data.
- )}
-
-
-
- Link to this report
-
-
-
- )
-}
-
-export default Report
diff --git a/src/components/QueryExplorer/Sort.tsx b/src/components/QueryExplorer/Sort.tsx
deleted file mode 100644
index b51ed7a04..000000000
--- a/src/components/QueryExplorer/Sort.tsx
+++ /dev/null
@@ -1,137 +0,0 @@
-// Copyright 2020 Google Inc. All rights reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-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 { SortableColumn } from "."
-import { Dispatch } from "@/types"
-import { Column } from "@/types/ua"
-
-const useStyles = makeStyles(_ => ({
- conceptOption: {
- display: "flex",
- width: "100%",
- },
- nameId: {
- flexGrow: 1,
- display: "flex",
- flexDirection: "column",
- "& > p": {
- margin: 0,
- padding: 0,
- },
- },
- group: {},
-}))
-
-interface SortProps {
- columns: Column[]
- sort: SortableColumn[] | undefined
- setSortIDs: Dispatch
-}
-
-const Sort: React.FC = ({ columns, sort, setSortIDs }) => {
- const classes = useStyles()
- const sortableColumns = React.useMemo(
- () =>
- columns
- .filter(column => {
- if (sort === undefined) {
- return true
- }
- return sort.find(s => s.id === column.id) === undefined
- })
- // Create and ascending and descending option for every column.
- .flatMap(column => [
- { ...column, sort: "ASCENDING" },
- { ...column, sort: "DESCENDING" },
- ]),
-
- [columns, sort]
- )
-
- // When the available columns change, filter out any values that are no
- // longer valid.
- React.useEffect(() => {
- if (sort === undefined) {
- return
- }
- const nuSort = sort.filter(column => columns.find(c => column.id === c.id))
- if (sort.length !== nuSort.length) {
- setSortIDs(nuSort.map(s => `${s.id}@@@${s.sort}`))
- }
- }, [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 => (
- = ({ queryResponse }) => {
- const classes = useStyles()
-
- const csvContents = React.useMemo(() => {
- const baseUrl = `data:text/tsv;charset=utf8,`
- const header =
- (queryResponse.columnHeaders?.map(header => header.name).join("\t") ||
- "") + "\n"
- const rows = queryResponse.rows?.map(row => row.join("\t")).join("\n") || ""
- const encoded = encodeURI(`${baseUrl}${header}${rows}`)
- return encoded
- }, [queryResponse])
-
- const filename = React.useMemo(
- () =>
- `query-explorer-export-${new Date().toISOString().substring(0, 10)}.tsv`,
- []
- )
-
- return (
-
- Core Reporting API
-)
-
-const useStyles = makeStyles(theme => ({
- inputs: {
- maxWidth: "500px",
- marginBottom: theme.spacing(1),
- display: "flex",
- flexDirection: "column",
- },
- runButton: {
- alignSelf: "flex-start",
- marginTop: theme.spacing(1),
- },
- externalReference: {
- "&:hover": {
- opacity: 1.0,
- },
- opacity: 0.3,
- },
- viewSelector: {
- maxWidth: "500px",
- },
- showSegments: {
- marginLeft: theme.spacing(1),
- marginBottom: theme.spacing(1),
- },
- includeEmpty: {
- marginTop: theme.spacing(2),
- marginBottom: theme.spacing(1),
- },
- conceptOption: {
- display: "flex",
- flexDirection: "column",
- "& > p": {
- margin: 0,
- padding: 0,
- },
- },
-}))
-
-const startDateLink = (
-
- start-date
-
-)
-
-const endDateLink = (
-
- end-date
-
-)
-
-export type SortableColumn = Column & { sort: "ASCENDING" | "DESCENDING" }
-
-const DevsiteLink: React.FC<{ hash: string }> = ({ hash }) => {
- const classes = useStyles()
- return (
-
-
-
- )
-}
-
-export enum QueryParam {
- Account = "a",
- Property = "b",
- View = "c",
- ShowSegmentDefinitions = "d",
- ViewID = "ids",
- StartDate = "start-date",
- EndDate = "end-date",
- SelectedMetrics = "metrics",
- SelectedDimensions = "dimensions",
- Sort = "sort",
- Filters = "filters",
- Segment = "segment",
- SamplingLevel = "samplingLevel",
- StartIndex = "start-index",
- MaxResults = "max-results",
- IncludeEmptyRows = "include-empty-rows",
-}
-
-export const QueryExplorer = () => {
- const classes = useStyles()
-
- const [viewID, setViewID] = useHydratedPersistantString(
- StorageKey.queryExplorerViewID,
- QueryParam.ViewID
- )
-
- const onSetView = React.useCallback(
- (view: ProfileSummary | undefined) => {
- if (view === undefined) {
- return
- }
- setViewID(`ga:${view.id}`)
- },
- [setViewID]
- )
-
- const accountPropertyView = useAccountPropertyView(
- StorageKey.queryExplorerAPV,
- QueryParam,
- onSetView
- )
- const uaDimensionsAndMetricsRequest = useUADimensionsAndMetrics(
- accountPropertyView
- )
- const uaSegmentsRequest = useUASegments()
- const {
- startDate,
- setStartDate,
- endDate,
- setEndDate,
- selectedMetrics,
- setSelectedMetricIDs,
- selectedDimensions,
- setSelectedDimensionIDs,
- setSortIDs,
- filters,
- setFilters,
- setSegmentID,
- showSegmentDefinition,
- setShowSegmentDefiniton,
- samplingValue,
- setSamplingValue,
- startIndex,
- setStartIndex,
- maxResults,
- setMaxResults,
- includeEmptyRows,
- setIncludeEmptyRows,
- segment,
- sort,
- } = useInputs(uaDimensionsAndMetricsRequest, uaSegmentsRequest)
- const { account, property, view } = accountPropertyView
-
- const {
- runQuery,
- requiredParameters,
- queryResponse,
- } = useDataAPIRequest({
- viewID,
- startDate,
- endDate,
- selectedMetrics,
- selectedDimensions,
- includeEmptyRows,
- samplingValue,
- segment,
- startIndex,
- maxResults,
- filters,
- sort,
- })
-
- const permalink = usePermalink({
- account,
- property,
- view,
- viewID,
- startDate,
- endDate,
- selectedMetrics,
- selectedDimensions,
- sort,
- filters,
- segment,
- showSegmentDefinition,
- startIndex,
- maxResults,
- includeEmptyRows,
- })
-
- const [updateLink, setUpdateLink] = React.useState(false)
- const [currentLink, setCurrentLink] = React.useState()
- React.useEffect(() => {
- if (updateLink) {
- setCurrentLink(permalink)
- setUpdateLink(false)
- }
- }, [permalink, updateLink])
-
- return (
-
- Overview
-
- This tool lets you interact with the {coreReportingApi} by building
- queries to get data from your Google Analytics views (profiles). You can
- use these queries in any of the client libraries to build your own
- tools.
-
- Select View
- Set query parameters
-
-
-
-
- Show segment definitions instead of IDs.
-
-
- runQuery(() => {
- setUpdateLink(true)
- })
- }
- >
- Run Query
-
-
- include empty rows
-
-
-
- )
-}
-
-export default QueryExplorer
diff --git a/src/components/QueryExplorer/useDataAPIRequest.ts b/src/components/QueryExplorer/useDataAPIRequest.ts
deleted file mode 100644
index bfbf0c53f..000000000
--- a/src/components/QueryExplorer/useDataAPIRequest.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-import * as React from "react"
-
-import { V3SamplingLevel } from "@/components/UAPickers"
-import { SortableColumn } from "."
-import { useSelector } from "react-redux"
-import { Column, Segment } from "@/types/ua"
-
-export enum APIStatus {
- Error = "error",
- InProgress = "in-progress",
- Success = "success",
-}
-
-export type QueryResponse =
- | { status: APIStatus.Success; response: gapi.client.analytics.GaData }
- | { status: APIStatus.InProgress }
- | {
- status: APIStatus.Error
- error: {
- code: number
- message: string
- errors: Array<{ domain: string; message: string; reason: string }>
- }
- }
- | undefined
-
-type Arg = {
- viewID: string | undefined
- startDate: string | undefined
- endDate: string | undefined
- selectedMetrics: Column[] | undefined
- selectedDimensions: Column[] | undefined
- includeEmptyRows: boolean
- samplingValue: V3SamplingLevel | undefined
- segment: Segment | undefined
- startIndex: string | undefined
- maxResults: string | undefined
- filters: string | undefined
- sort: SortableColumn[] | undefined
-}
-
-type UseDataAPIRequest = (
- arg: Arg
-) => {
- requiredParameters: boolean
- accessToken: string | undefined
- runQuery: (cb: () => void) => void
- queryResponse: QueryResponse
-}
-
-export const useDataAPIRequest: UseDataAPIRequest = ({
- viewID,
- startDate,
- endDate,
- selectedMetrics,
- selectedDimensions,
- includeEmptyRows,
- samplingValue: selectedSamplingValue,
- segment,
- startIndex,
- maxResults,
- filters,
- sort,
-}) => {
- const gapi = useSelector((a: AppState) => a.gapi)
- const user = useSelector((a: AppState) => a.user)
-
- const [queryResponse, setQueryResponse] = React.useState()
-
- const accessToken = React.useMemo(
- () => user?.getAuthResponse().access_token,
- [user]
- )
-
- const requiredParameters = React.useMemo(() => {
- return (
- viewID !== "" &&
- startDate !== "" &&
- endDate !== "" &&
- selectedMetrics !== undefined &&
- selectedMetrics.length !== 0
- )
- }, [viewID, startDate, endDate, selectedMetrics])
-
- const runQuery = React.useCallback(
- (cb: () => void) => {
- if (
- viewID === undefined ||
- gapi === undefined ||
- selectedMetrics === undefined ||
- selectedMetrics.length === 0 ||
- startDate === undefined ||
- endDate === undefined
- ) {
- return
- }
- const metrics = selectedMetrics.map(a => a.id).join(",")
-
- const apiObject = {
- ids: viewID,
- "start-date": startDate,
- "end-date": endDate,
- "include-empty-rows": includeEmptyRows,
- metrics,
- }
- if (selectedDimensions !== undefined && selectedDimensions.length !== 0) {
- const dimensions = selectedDimensions?.map(a => a.id).join(",")
- apiObject["dimensions"] = dimensions
- }
- if (selectedSamplingValue !== undefined) {
- apiObject["samplingLevel"] = selectedSamplingValue
- }
- if (segment !== undefined) {
- apiObject["segment"] = segment.segmentId
- }
- if (startIndex !== undefined && startIndex !== "") {
- apiObject["start-index"] = startIndex
- }
- if (maxResults !== undefined && maxResults !== "") {
- apiObject["max-results"] = maxResults
- }
- if (filters !== undefined && filters !== "") {
- apiObject["filters"] = filters
- }
- if (sort !== undefined && sort.length > 0) {
- apiObject["sort"] = sort
- .map(a => `${a.sort === "ASCENDING" ? "" : "-"}${a.id}`)
- .join(",")
- }
- setQueryResponse({ status: APIStatus.InProgress })
- gapi.client.analytics.data.ga
- .get(apiObject)
- .then(response => {
- setQueryResponse({
- status: APIStatus.Success,
- response: response.result,
- })
- cb()
- })
- .catch(e => {
- setQueryResponse({ status: APIStatus.Error, error: e.result.error })
- })
- },
- [
- viewID,
- startDate,
- endDate,
- selectedDimensions,
- selectedMetrics,
- segment,
- sort,
- startIndex,
- maxResults,
- filters,
- selectedSamplingValue,
- includeEmptyRows,
- gapi,
- ]
- )
-
- return { runQuery, requiredParameters, queryResponse, accessToken }
-}
-
-export default useDataAPIRequest
diff --git a/src/components/QueryExplorer/useInputs.ts b/src/components/QueryExplorer/useInputs.ts
deleted file mode 100644
index 592a881a6..000000000
--- a/src/components/QueryExplorer/useInputs.ts
+++ /dev/null
@@ -1,210 +0,0 @@
-import * as React from "react"
-
-import { StorageKey } from "@/constants"
-import { V3SamplingLevel } from "@/components/UAPickers"
-import { QueryParam, SortableColumn } from "."
-import {
- useHydratedPersistantBoolean,
- useHydratedPersistantString,
- useKeyedHydratedPersistantArray,
- useKeyedHydratedPersistantObject,
-} from "@/hooks/useHydrated"
-import { Dispatch, RequestStatus } from "@/types"
-import { Column, Segment } from "@/types/ua"
-import useUADimensionsAndMetrics from "../UAPickers/useDimensionsAndMetrics"
-import { useUASegments } from "../UAPickers/useUASegments"
-
-export const useInputs = (
- uaDimensionsAndMetricsRequest: ReturnType,
- uaSegmentsRequest: ReturnType
-) => {
- const [startDate, setStartDate] = useHydratedPersistantString(
- StorageKey.queryExplorerStartDate,
- QueryParam.StartDate,
- "7daysAgo"
- )
- const [endDate, setEndDate] = useHydratedPersistantString(
- StorageKey.queryExplorerEndDate,
- QueryParam.EndDate,
- "yesterday"
- )
- const [startIndex, setStartIndex] = useHydratedPersistantString(
- StorageKey.queryExplorerStartIndex,
- QueryParam.StartIndex
- )
- const [maxResults, setMaxResults] = useHydratedPersistantString(
- StorageKey.queryExplorerMaxResults,
- QueryParam.MaxResults
- )
- const [filters, setFilters] = useHydratedPersistantString(
- StorageKey.queryExplorerFilters,
- QueryParam.Filters
- )
-
- const getSegmentByID = React.useCallback(
- (id: string | undefined) => {
- if (
- id === undefined ||
- uaSegmentsRequest.status !== RequestStatus.Successful
- ) {
- return undefined
- }
- const builtInSegment = uaSegmentsRequest.segments.find(s => s.id === id)
- if (builtInSegment !== undefined) {
- return builtInSegment
- }
- // If the segment wasn't in the list of segments returned by the API,
- // this was a custom (dynamic) segment defined by the user.
- return {
- definition: id,
- name: `Add dynamic segment`,
- segmentId: id,
- id,
- type: "DYNAMIC",
- }
- },
- [uaSegmentsRequest]
- )
-
- const [segment, setSegmentID] = useKeyedHydratedPersistantObject(
- StorageKey.queryExplorerSegment,
- QueryParam.Segment,
- getSegmentByID
- )
-
- const getColumnsByIDs = React.useCallback(
- (ids: string[] | undefined) => {
- if (
- uaDimensionsAndMetricsRequest.status !== RequestStatus.Successful ||
- ids === undefined
- ) {
- return undefined
- }
- return uaDimensionsAndMetricsRequest.columns.filter(c =>
- ids.includes(c.id!)
- )
- },
- [uaDimensionsAndMetricsRequest]
- )
-
- const [
- selectedMetrics,
- setSelectedMetricIDs,
- ] = useKeyedHydratedPersistantArray(
- StorageKey.queryExplorerSelectedMetrics,
- QueryParam.SelectedMetrics,
- getColumnsByIDs
- )
-
- const [
- selectedDimensions,
- setSelectedDimensionIDs,
- ] = useKeyedHydratedPersistantArray(
- StorageKey.queryExplorerSelectedDimensions,
- QueryParam.SelectedDimensions,
- getColumnsByIDs
- )
-
- const [includeEmptyRows, setIncludeEmptyRows] = useHydratedPersistantBoolean(
- StorageKey.queryExplorerIncludeEmptyRows,
- QueryParam.IncludeEmptyRows,
- true
- )
- const [
- showSegmentDefinition,
- setShowSegmentDefiniton,
- ] = useHydratedPersistantBoolean(
- StorageKey.queryExplorerShowSegmentDefinition,
- QueryParam.ShowSegmentDefinitions,
- false
- )
- const [
- samplingValueLocal,
- setSamplingValueLocal,
- ] = useHydratedPersistantString(
- StorageKey.queryExplorerSamplingLevel,
- QueryParam.SamplingLevel,
- V3SamplingLevel.Default
- )
-
- const samplingValue = React.useMemo(
- () => samplingValueLocal as V3SamplingLevel | undefined,
- [samplingValueLocal]
- )
-
- const setSamplingValue: Dispatch<
- V3SamplingLevel | undefined
- > = React.useCallback(
- a => {
- setSamplingValueLocal(a as any)
- },
- [setSamplingValueLocal]
- )
-
- const getSortByIDs = React.useCallback(
- (ids: string[] | undefined) => {
- if (
- uaDimensionsAndMetricsRequest.status !== RequestStatus.Successful ||
- ids === undefined
- ) {
- return undefined
- }
- return uaDimensionsAndMetricsRequest.columns
- .flatMap(c => [
- { ...c, sort: "ASCENDING" },
- { ...c, sort: "DESCENDING" },
- ])
- .filter(
- c =>
- ids.find(id => {
- if (id.includes("@@@")) {
- // TODO - add measurement to see if this branch is reached.
- const [innerId, type] = id.split("@@@")
- return c.id === innerId && type === c.sort
- }
- if (id.startsWith("-")) {
- const actualId = id.substring(1)
- return c.id === actualId && c.sort === "DESCENDING"
- }
- return c.id === id && c.sort === "ASCENDING"
- }) !== undefined
- )
- },
- [uaDimensionsAndMetricsRequest]
- )
-
- const [sort, setSortIDs] = useKeyedHydratedPersistantArray(
- StorageKey.queryExplorerSort,
- QueryParam.Sort,
- getSortByIDs
- )
-
- return {
- sort,
- setSortIDs,
- startDate,
- setStartDate,
- endDate,
- setEndDate,
- startIndex,
- setStartIndex,
- maxResults,
- setMaxResults,
- filters,
- setFilters,
- segment,
- setSegmentID,
- selectedMetrics,
- setSelectedMetricIDs,
- selectedDimensions,
- setSelectedDimensionIDs,
- includeEmptyRows,
- setIncludeEmptyRows,
- showSegmentDefinition,
- setShowSegmentDefiniton,
- samplingValue,
- setSamplingValue,
- }
-}
-
-export default useInputs
diff --git a/src/components/QueryExplorer/usePermalink.ts b/src/components/QueryExplorer/usePermalink.ts
deleted file mode 100644
index 93aec7455..000000000
--- a/src/components/QueryExplorer/usePermalink.ts
+++ /dev/null
@@ -1,144 +0,0 @@
-import { useMemo } from "react"
-import { QueryParam, SortableColumn } from "."
-import { BooleanParam } from "serialize-query-params"
-import {
- AccountSummary,
- ProfileSummary,
- WebPropertySummary,
-} from "../ViewSelector/useAccountPropertyView"
-import { Column, Segment } from "@/types/ua"
-
-type Arg = {
- account: AccountSummary | undefined
- property: WebPropertySummary | undefined
- view: ProfileSummary | undefined
- viewID: string | undefined
- startDate: string | undefined
- endDate: string | undefined
- selectedMetrics: Column[] | undefined
- selectedDimensions: Column[] | undefined
- sort: SortableColumn[] | undefined
- filters: string | undefined
- segment: Segment | undefined
- showSegmentDefinition: boolean | undefined
- startIndex: string | undefined
- maxResults: string | undefined
- includeEmptyRows: boolean | undefined
-}
-
-const usePermalink = ({
- account,
- property,
- view,
- viewID,
- startDate,
- endDate,
- selectedMetrics,
- selectedDimensions,
- sort,
- filters,
- segment,
- showSegmentDefinition,
- startIndex,
- maxResults,
- includeEmptyRows,
-}: Arg) => {
- return useMemo(() => {
- const urlParams = new URLSearchParams()
-
- if (account !== undefined) {
- urlParams.append(QueryParam.Account, account.id!)
- }
-
- if (property !== undefined) {
- urlParams.append(QueryParam.Property, property.id!)
- }
-
- if (view !== undefined) {
- urlParams.append(QueryParam.View, view.id!)
- }
-
- if (viewID !== undefined) {
- urlParams.append(QueryParam.ViewID, viewID)
- }
-
- if (startDate !== undefined) {
- urlParams.append(QueryParam.StartDate, startDate)
- }
-
- if (endDate !== undefined) {
- urlParams.append(QueryParam.EndDate, endDate)
- }
-
- if (selectedMetrics !== undefined) {
- urlParams.append(
- QueryParam.SelectedMetrics,
- selectedMetrics.map(c => c.id).join(",")
- )
- }
-
- if (selectedDimensions !== undefined) {
- urlParams.append(
- QueryParam.SelectedDimensions,
- selectedDimensions.map(c => c.id).join(",")
- )
- }
-
- if (sort !== undefined) {
- urlParams.append(
- QueryParam.Sort,
- sort.map(s => `${s.sort === "DESCENDING" ? "-" : ""}${s.id}`).join(",")
- )
- }
-
- if (filters !== undefined) {
- urlParams.append(QueryParam.Filters, filters)
- }
-
- if (segment !== undefined) {
- urlParams.append(QueryParam.Segment, segment.id!)
- }
-
- if (showSegmentDefinition !== undefined) {
- urlParams.append(
- QueryParam.ShowSegmentDefinitions,
- BooleanParam.encode(showSegmentDefinition) as string
- )
- }
-
- if (startIndex !== undefined) {
- urlParams.append(QueryParam.StartIndex, startIndex)
- }
-
- if (maxResults !== undefined) {
- urlParams.append(QueryParam.MaxResults, maxResults)
- }
-
- if (includeEmptyRows !== undefined) {
- urlParams.append(
- QueryParam.IncludeEmptyRows,
- BooleanParam.encode(includeEmptyRows) as string
- )
- }
-
- const { protocol, host, pathname } = window.location
- return `${protocol}//${host}${pathname}?${urlParams}`
- }, [
- account,
- property,
- view,
- viewID,
- startDate,
- endDate,
- selectedMetrics,
- selectedDimensions,
- sort,
- filters,
- segment,
- showSegmentDefinition,
- startIndex,
- maxResults,
- includeEmptyRows,
- ])
-}
-export default usePermalink
diff --git a/src/components/RequestComposer/CohortRequest/index.tsx b/src/components/RequestComposer/CohortRequest/index.tsx
deleted file mode 100644
index 22f426add..000000000
--- a/src/components/RequestComposer/CohortRequest/index.tsx
+++ /dev/null
@@ -1,155 +0,0 @@
-// Copyright 2020 Google Inc. All rights reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import * as React from "react"
-import { useEffect } from "react"
-
-import makeStyles from "@material-ui/core/styles/makeStyles"
-
-import { usePersistentBoolean } from "@/hooks"
-import { StorageKey } from "@/constants"
-import {
- MetricPicker,
- SegmentPicker,
- V4SamplingLevelPicker,
- CohortSizePicker,
-} from "@/components/UAPickers"
-import LinkedTextField from "@/components/LinkedTextField"
-import LabeledCheckbox from "@/components/LabeledCheckbox"
-import { linkFor, titleFor } from "../HistogramRequest"
-import useCohortRequestParameters from "./useCohortRequestParameters"
-import useCohortRequest from "./useCohortRequest"
-import { ReportsRequest } from "../RequestComposer"
-import { UAAccountPropertyView } from "@/components/ViewSelector/useAccountPropertyView"
-import useUADimensionsAndMetrics, {
- UADimensionsAndMetricsRequestCtx,
-} from "@/components/UAPickers/useDimensionsAndMetrics"
-import { successful } from "@/types"
-import { Column } from "@/types/ua"
-import {
- UASegmentsRequestCtx,
- useUASegments,
-} from "@/components/UAPickers/useUASegments"
-
-interface CohortRequestProps {
- apv: UAAccountPropertyView
- controlWidth: string
- setRequestObject: (request: ReportsRequest | undefined) => void
-}
-
-const useStyles = makeStyles(theme => ({
- showSegments: {
- marginLeft: theme.spacing(1),
- marginBottom: theme.spacing(1),
- },
-}))
-
-const CohortRequest: React.FC = ({
- apv,
- controlWidth,
- setRequestObject,
- children,
-}) => {
- const classes = useStyles()
- const [
- showSegmentDefinition,
- setShowSegmentDefinition,
- ] = usePersistentBoolean(StorageKey.cohortRequestShowSegmentDefinition, false)
- const uaDimensionsAndMetricsRequest = useUADimensionsAndMetrics(apv)
- const segmentsRequest = useUASegments()
- const {
- viewId,
- setViewId,
- selectedMetric,
- setSelectedMetricID,
- cohortSize,
- setCohortSize,
- selectedSegment,
- setSelectedSegmentID,
- samplingLevel,
- setSamplingLevel,
- } = useCohortRequestParameters(
- apv,
- successful(uaDimensionsAndMetricsRequest)?.columns,
- successful(segmentsRequest)?.segments
- )
- const requestObject = useCohortRequest({
- viewId,
- selectedMetric,
- cohortSize,
- selectedSegment,
- samplingLevel,
- })
-
- useEffect(() => {
- setRequestObject(requestObject)
- }, [requestObject, setRequestObject])
-
- const cohortFilter = React.useCallback(
- (metric: NonNullable): boolean =>
- metric?.attributes?.group === "Lifetime Value and Cohorts",
- []
- )
-
- return (
-
-
-
-
-
- Show segment definitions instead of IDs.
-
-
-
- )
-}
-
-export default CohortRequest
diff --git a/src/components/RequestComposer/CohortRequest/useCohortRequest.ts b/src/components/RequestComposer/CohortRequest/useCohortRequest.ts
deleted file mode 100644
index 2a62f20e6..000000000
--- a/src/components/RequestComposer/CohortRequest/useCohortRequest.ts
+++ /dev/null
@@ -1,148 +0,0 @@
-import { useMemo } from "react"
-import moment from "moment"
-
-import { CohortSize, V4SamplingLevel } from "@/components/UAPickers"
-import { ReportsRequest, ReportRequest } from "../RequestComposer"
-import { Column, Segment } from "@/types/ua"
-
-type Cohort = gapi.client.analyticsreporting.Cohort
-
-const dimensionFor = (cohortSize: CohortSize) => {
- let dimensionName: string
- switch (cohortSize) {
- case CohortSize.Day:
- dimensionName = "ga:cohortNthDay"
- break
- case CohortSize.Week:
- dimensionName = "ga:cohortNthWeek"
- break
- case CohortSize.Month:
- dimensionName = "ga:cohortNthMonth"
- break
- }
- return { name: dimensionName }
-}
-
-const cohortsFor = (cohortSize: CohortSize) => {
- // Yes this type definition is a bit gnarly. But it helps us to not mess up which is v handy.
- const cohorts: Cohort[] = []
- let now = moment()
- switch (cohortSize) {
- case CohortSize.Day: {
- // For day, return 7 cohorts, one for each of the last 7 days (starting
- // at yesterday).
- for (let i = 0; i < 7; i++) {
- now = now.subtract(1, "days")
- const cohort: Cohort = {
- type: "FIRST_VISIT_DATE",
- name: now.format("YYYY-MM-DD"),
- dateRange: {
- startDate: now.format("YYYY-MM-DD"),
- endDate: now.format("YYYY-MM-DD"),
- },
- }
- cohorts.push(cohort)
- }
- break
- }
- case CohortSize.Week: {
- // Create cohorts for the past 6 weeks.
- for (let i = 0; i < 6; i++) {
- const startDate = now
- .subtract(1, "week")
- .startOf("week")
- .format("YYYY-MM-DD")
- const endDate = now.endOf("week").format("YYYY-MM-DD")
- const cohort = {
- type: "FIRST_VISIT_DATE",
- name: startDate + " to " + endDate,
- dateRange: {
- startDate: startDate,
- endDate: endDate,
- },
- }
- cohorts.push(cohort)
- }
- break
- }
- case CohortSize.Month: {
- // Create cohorts for the past 3 months.
- for (let i = 0; i < 3; i++) {
- const startDate = now
- .subtract(1, "month")
- .startOf("month")
- .format("YYYY-MM-DD")
- const endDate = now.endOf("month").format("YYYY-MM-DD")
- const cohort = {
- type: "FIRST_VISIT_DATE",
- name: startDate + " to " + endDate,
- dateRange: {
- startDate: startDate,
- endDate: endDate,
- },
- }
- cohorts.push(cohort)
- }
- break
- }
- }
- return cohorts
-}
-
-const useCohortRequest = ({
- viewId,
- selectedMetric,
- selectedSegment,
- cohortSize,
- samplingLevel,
-}: {
- viewId: string
- selectedMetric: Column | undefined
- selectedSegment: Segment | undefined
- cohortSize: CohortSize | undefined
- samplingLevel: V4SamplingLevel | undefined
-}) => {
- const request = useMemo(() => {
- if (
- viewId === undefined ||
- viewId === "" ||
- selectedMetric === undefined ||
- cohortSize === undefined
- ) {
- return undefined
- }
- const reportRequest: ReportRequest = {
- viewId,
- metrics: [{ expression: selectedMetric.id }],
- dimensions: [
- {
- name: "ga:cohort",
- },
- dimensionFor(cohortSize),
- ],
- cohortGroup: {
- cohorts: cohortsFor(cohortSize),
- },
- }
- if (selectedSegment !== undefined) {
- reportRequest["segments"] = [
- {
- segmentId: selectedSegment.segmentId,
- },
- ]
- reportRequest.dimensions = reportRequest.dimensions!.concat([
- { name: "ga:segment" },
- ])
- }
- if (samplingLevel !== undefined) {
- reportRequest["samplingLevel"] = samplingLevel
- }
-
- return {
- reportRequests: [reportRequest],
- }
- }, [viewId, selectedMetric, cohortSize, selectedSegment, samplingLevel])
- return request
-}
-
-export default useCohortRequest
diff --git a/src/components/RequestComposer/CohortRequest/useCohortRequestParameters.ts b/src/components/RequestComposer/CohortRequest/useCohortRequestParameters.ts
deleted file mode 100644
index 925a01aba..000000000
--- a/src/components/RequestComposer/CohortRequest/useCohortRequestParameters.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-import { useState, useMemo, useCallback } from "react"
-
-import { V4SamplingLevel, CohortSize } from "@/components/UAPickers"
-import { UAAccountPropertyView } from "@/components/ViewSelector/useAccountPropertyView"
-import { useKeyedHydratedPersistantObject } from "@/hooks/useHydrated"
-import { StorageKey } from "@/constants"
-import { QueryParam } from "../RequestComposer"
-import { Column, Segment } from "@/types/ua"
-
-const useCohortRequestParameters = (
- apv: UAAccountPropertyView,
- columns: Column[] | undefined,
- segments: Segment[] | undefined
-) => {
- const [viewId, setViewId] = useState("")
-
- const getColumnByID = useCallback(
- (id: string | undefined) => {
- if (id === undefined || columns === undefined) {
- return undefined
- }
- return columns.find(c => c.id === id)
- },
- [columns]
- )
-
- const [
- selectedMetric,
- setSelectedMetricID,
- ] = useKeyedHydratedPersistantObject(
- StorageKey.requestComposerCohortMetric,
- QueryParam.Metric,
- getColumnByID
- )
-
- const [samplingLevel, setSamplingLevel] = useState()
-
- const getSegmentByID = useCallback(
- (id: string | undefined) => {
- if (id === undefined || segments === undefined) {
- return undefined
- }
- return segments.find(c => c.id === id)
- },
- [segments]
- )
-
- const [
- selectedSegment,
- setSelectedSegmentID,
- ] = useKeyedHydratedPersistantObject(
- StorageKey.requestComposerCohortSegment,
- QueryParam.Segment,
- getSegmentByID
- )
- const [cohortSize, setCohortSize] = useState(
- CohortSize.Day
- )
-
- useMemo(() => {
- const id = apv.view?.id
- if (id !== undefined) {
- setViewId(id)
- }
- }, [apv])
-
- return {
- viewId,
- setViewId,
- selectedMetric,
- setSelectedMetricID,
- selectedSegment,
- setSelectedSegmentID,
- samplingLevel,
- setSamplingLevel,
- cohortSize,
- setCohortSize,
- }
-}
-
-export default useCohortRequestParameters
diff --git a/src/components/RequestComposer/HistogramRequest/index.tsx b/src/components/RequestComposer/HistogramRequest/index.tsx
deleted file mode 100644
index fff73cbeb..000000000
--- a/src/components/RequestComposer/HistogramRequest/index.tsx
+++ /dev/null
@@ -1,204 +0,0 @@
-// Copyright 2020 Google Inc. All rights reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import * as React from "react"
-import { useEffect } from "react"
-
-import makeStyles from "@material-ui/core/styles/makeStyles"
-
-import { usePersistentBoolean } from "@/hooks"
-import { StorageKey } from "@/constants"
-import LinkedTextField from "@/components/LinkedTextField"
-import GADate from "@/components/GADate"
-import {
- MetricsPicker,
- DimensionsPicker,
- SegmentPicker,
- V4SamplingLevelPicker,
-} from "@/components/UAPickers"
-import useHistogramRequest from "./useHistogramRequest"
-import useHistogramRequestParameters from "./useHistogramRequestParameters"
-import { ReportsRequest } from "../RequestComposer"
-import LabeledCheckbox from "@/components/LabeledCheckbox"
-import { UAAccountPropertyView } from "@/components/ViewSelector/useAccountPropertyView"
-import { successful } from "@/types"
-import useUADimensionsAndMetrics, {
- UADimensionsAndMetricsRequestCtx,
-} from "@/components/UAPickers/useDimensionsAndMetrics"
-import {
- UASegmentsRequestCtx,
- useUASegments,
-} from "@/components/UAPickers/useUASegments"
-
-export const linkFor = (hash: string) =>
- `https://developers.google.com/analytics/devguides/reporting/core/v4/rest/v4/reports/batchGet#${hash}`
-
-export const titleFor = (id: string) => `See ${id} on devsite.`
-
-interface HistogramRequestProps {
- apv: UAAccountPropertyView
- controlWidth: string
- setRequestObject: (request: ReportsRequest | undefined) => void
-}
-
-const useStyles = makeStyles(theme => ({
- showSegments: {
- marginLeft: theme.spacing(1),
- marginBottom: theme.spacing(1),
- },
-}))
-
-const HistogramRequest: React.FC = ({
- apv,
- controlWidth,
- setRequestObject,
- children,
-}) => {
- const classes = useStyles()
- const [
- showSegmentDefinition,
- setShowSegmentDefinition,
- ] = usePersistentBoolean(
- StorageKey.histogramRequestShowSegmentDefinition,
- false
- )
- const uaDimensionsAndMetricsRequest = useUADimensionsAndMetrics(apv)
- const segmentsRequest = useUASegments()
- const {
- viewId,
- setViewId,
- startDate,
- setStartDate,
- endDate,
- setEndDate,
- selectedDimensions,
- setSelectedDimensionIDs,
- selectedMetrics,
- setSelectedMetricIDs,
- buckets,
- setBuckets,
- filtersExpression,
- setFiltersExpression,
- selectedSegment,
- setSelectedSegmentID,
- samplingLevel,
- setSamplingLevel,
- } = useHistogramRequestParameters(
- apv,
- successful(uaDimensionsAndMetricsRequest)?.columns,
- successful(segmentsRequest)?.segments
- )
- const requestObject = useHistogramRequest({
- viewId,
- startDate,
- endDate,
- selectedDimensions,
- selectedMetrics,
- buckets,
- filtersExpression,
- selectedSegment,
- samplingLevel,
- })
-
- useEffect(() => {
- setRequestObject(requestObject)
- }, [requestObject, setRequestObject])
-
- return (
-
-
-
-
-
- Show segment definitions instead of IDs.
-
-
-
- )
-}
-
-export default HistogramRequest
diff --git a/src/components/RequestComposer/HistogramRequest/useHistogramRequest.ts b/src/components/RequestComposer/HistogramRequest/useHistogramRequest.ts
deleted file mode 100644
index 6e88647a7..000000000
--- a/src/components/RequestComposer/HistogramRequest/useHistogramRequest.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import { useMemo } from "react"
-
-import { V4SamplingLevel } from "@/components/UAPickers"
-import { ReportsRequest, ReportRequest } from "../RequestComposer"
-import { Column, Segment } from "@/types/ua"
-
-interface Parameters {
- selectedMetrics: Column[] | undefined
- selectedDimensions: Column[] | undefined
- buckets: string | undefined
- viewId: string
- startDate: string | undefined
- endDate: string | undefined
- filtersExpression: string | undefined
- selectedSegment: Segment | undefined
- samplingLevel: V4SamplingLevel | undefined
-}
-
-const useHistogramRequest = ({
- selectedMetrics,
- selectedDimensions,
- buckets,
- viewId,
- startDate,
- endDate,
- filtersExpression,
- selectedSegment,
- samplingLevel,
-}: Parameters): ReportsRequest | undefined => {
- const histogramRequestObject = useMemo(() => {
- if (
- viewId === undefined ||
- buckets === undefined ||
- startDate === undefined ||
- startDate === "" ||
- endDate === undefined ||
- endDate === ""
- ) {
- return undefined
- }
- const reportRequest: ReportRequest = {
- viewId,
- dateRanges: [
- {
- startDate,
- endDate,
- },
- ],
- }
-
- if (selectedMetrics !== undefined && selectedMetrics.length > 0) {
- reportRequest["metrics"] = selectedMetrics.map(column => ({
- expression: column.id,
- }))
- }
- if (selectedDimensions !== undefined && selectedDimensions.length > 0) {
- reportRequest["dimensions"] = selectedDimensions.map(column => ({
- // TODO - The types for this are incorrect. Might need to check the
- // client library code?
- histogramBuckets: buckets.split(",").map(s => parseInt(s, 10)) as any,
- name: column.id,
- }))
- }
- if (filtersExpression !== undefined && filtersExpression !== "") {
- reportRequest["filtersExpression"] = filtersExpression
- }
- if (selectedSegment !== undefined) {
- reportRequest["segments"] = [{ segmentId: selectedSegment.segmentId }]
- reportRequest["dimensions"] = (reportRequest["dimensions"] || []).concat([
- {
- histogramBuckets: buckets.split(",").map(s => parseInt(s, 10)) as any,
- name: "ga:segment",
- },
- ])
- }
- if (samplingLevel !== undefined) {
- reportRequest["samplingLevel"] = samplingLevel
- }
-
- return {
- reportRequests: [reportRequest],
- }
- }, [
- selectedMetrics,
- buckets,
- selectedDimensions,
- viewId,
- startDate,
- endDate,
- filtersExpression,
- selectedSegment,
- samplingLevel,
- ])
-
- return histogramRequestObject
-}
-
-export default useHistogramRequest
diff --git a/src/components/RequestComposer/HistogramRequest/useHistogramRequestParameters.ts b/src/components/RequestComposer/HistogramRequest/useHistogramRequestParameters.ts
deleted file mode 100644
index 95a3bdbbd..000000000
--- a/src/components/RequestComposer/HistogramRequest/useHistogramRequestParameters.ts
+++ /dev/null
@@ -1,111 +0,0 @@
-import { useState, useMemo, useCallback } from "react"
-
-import { usePersistentString } from "@/hooks"
-import { StorageKey } from "@/constants"
-import { V4SamplingLevel } from "@/components/UAPickers"
-import { UAAccountPropertyView } from "@/components/ViewSelector/useAccountPropertyView"
-import {
- useKeyedHydratedPersistantArray,
- useKeyedHydratedPersistantObject,
-} from "@/hooks/useHydrated"
-import { QueryParam } from "../RequestComposer"
-import { Column, Segment } from "@/types/ua"
-
-const useHistogramRequestParameters = (
- apv: UAAccountPropertyView,
- columns: Column[] | undefined,
- segments: Segment[] | undefined
-) => {
- const [viewId, setViewId] = useState("")
-
- const getColumnsByIDs = useCallback(
- (ids: string[] | undefined) => {
- if (ids === undefined || columns === undefined) {
- return undefined
- }
- return columns.filter(c => ids.includes(c.id!))
- },
- [columns]
- )
-
- const [
- selectedDimensions,
- setSelectedDimensionIDs,
- ] = useKeyedHydratedPersistantArray(
- StorageKey.requestComposerHistogramDimensions,
- QueryParam.Dimensions,
- getColumnsByIDs
- )
- const [
- selectedMetrics,
- setSelectedMetricIDs,
- ] = useKeyedHydratedPersistantArray(
- StorageKey.requestComposerHistogramMetrics,
- QueryParam.Metrics,
- getColumnsByIDs
- )
- const [samplingLevel, setSamplingLevel] = useState()
-
- const [startDate, setStartDate] = usePersistentString(
- StorageKey.histogramStartDate,
- "7daysAgo"
- )
- const [endDate, setEndDate] = usePersistentString(
- StorageKey.histogramEndDate,
- "yesterday"
- )
- const [buckets, setBuckets] = usePersistentString(StorageKey.histogramBuckets)
- const [filtersExpression, setFiltersExpression] = usePersistentString(
- StorageKey.histogramFiltersExpression,
- "ga:browser=~^Chrome"
- )
-
- const getSegmentByID = useCallback(
- (id: string | undefined) => {
- if (id === undefined || segments === undefined) {
- return undefined
- }
- return segments.find(c => c.id === id)
- },
- [segments]
- )
-
- const [
- selectedSegment,
- setSelectedSegmentID,
- ] = useKeyedHydratedPersistantObject(
- StorageKey.requestComposerHistogramSegment,
- QueryParam.Segment,
- getSegmentByID
- )
-
- useMemo(() => {
- const id = apv.view?.id
- if (id !== undefined) {
- setViewId(id)
- }
- }, [apv])
-
- return {
- viewId,
- setViewId,
- startDate,
- setStartDate,
- endDate,
- setEndDate,
- selectedDimensions,
- setSelectedDimensionIDs,
- selectedMetrics,
- setSelectedMetricIDs,
- buckets,
- setBuckets,
- filtersExpression,
- setFiltersExpression,
- selectedSegment,
- setSelectedSegmentID,
- samplingLevel,
- setSamplingLevel,
- }
-}
-
-export default useHistogramRequestParameters
diff --git a/src/components/RequestComposer/MetricExpression/index.tsx b/src/components/RequestComposer/MetricExpression/index.tsx
deleted file mode 100644
index 4dd598b70..000000000
--- a/src/components/RequestComposer/MetricExpression/index.tsx
+++ /dev/null
@@ -1,223 +0,0 @@
-// Copyright 2020 Google Inc. All rights reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import * as React from "react"
-import { useEffect } from "react"
-
-import makeStyles from "@material-ui/core/styles/makeStyles"
-
-import { usePersistentBoolean } from "@/hooks"
-import { StorageKey } from "@/constants"
-import LinkedTextField from "@/components/LinkedTextField"
-import GADate from "@/components/GADate"
-import LabeledCheckbox from "@/components/LabeledCheckbox"
-import {
- DimensionsPicker,
- SegmentPicker,
- V4SamplingLevelPicker,
-} from "@/components/UAPickers"
-import { linkFor, titleFor } from "../HistogramRequest/"
-import useMetricExpressionRequestParameters from "./useMetricExpressionRequestParameters"
-import useMetricExpressionRequest from "./useMetricExpressionRequest"
-import { ReportsRequest } from "../RequestComposer"
-import { UAAccountPropertyView } from "@/components/ViewSelector/useAccountPropertyView"
-import useUADimensionsAndMetrics, {
- UADimensionsAndMetricsRequestCtx,
-} from "@/components/UAPickers/useDimensionsAndMetrics"
-import { successful } from "@/types"
-import {
- UASegmentsRequestCtx,
- useUASegments,
-} from "@/components/UAPickers/useUASegments"
-
-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 = ({
- apv,
- controlWidth,
- setRequestObject,
- children,
-}) => {
- const classes = useStyles()
- const [
- showSegmentDefinition,
- setShowSegmentDefinition,
- ] = usePersistentBoolean(
- StorageKey.metricExpressionRequestShowSegmentDefinition,
- false
- )
- const uaDimensionsAndMetricsRequest = useUADimensionsAndMetrics(apv)
- const segmentsRequest = useUASegments()
- const {
- viewId,
- setViewId,
- startDate,
- setStartDate,
- endDate,
- setEndDate,
- metricExpressions,
- setMetricExpressions,
- metricAliases,
- setMetricAliases,
- selectedDimensions,
- setSelectedDimensionIDs,
- filtersExpression,
- setFiltersExpression,
- selectedSegment,
- setSelectedSegmentID,
- samplingLevel,
- setSamplingLevel,
- pageSize,
- setPageSize,
- pageToken,
- setPageToken,
- } = useMetricExpressionRequestParameters(
- apv,
- successful(uaDimensionsAndMetricsRequest)?.columns,
- successful(segmentsRequest)?.segments
- )
- const requestObject = useMetricExpressionRequest({
- viewId,
- samplingLevel,
- filtersExpression,
- startDate,
- endDate,
- metricExpressions,
- metricAliases,
- selectedDimensions,
- selectedSegment,
- pageToken,
- pageSize,
- })
-
- useEffect(() => {
- setRequestObject(requestObject)
- }, [requestObject, setRequestObject])
-
- return (
-
-
-
-
-
- Show segment definitions instead of IDs.
-
-
-
- )
-}
-
-export default MetricExpression
diff --git a/src/components/RequestComposer/MetricExpression/useMetricExpressionRequest.ts b/src/components/RequestComposer/MetricExpression/useMetricExpressionRequest.ts
deleted file mode 100644
index 5991baf14..000000000
--- a/src/components/RequestComposer/MetricExpression/useMetricExpressionRequest.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-import { useMemo } from "react"
-
-import { V4SamplingLevel } from "@/components/UAPickers"
-import { ReportsRequest, ReportRequest } from "../RequestComposer"
-import { Column, Segment } from "@/types/ua"
-
-interface Parameters {
- viewId: string
- samplingLevel: V4SamplingLevel | undefined
- filtersExpression: string | undefined
- startDate: string | undefined
- endDate: string | undefined
- metricExpressions: string | undefined
- metricAliases: string | undefined
- selectedDimensions: Column[] | undefined
- selectedSegment: Segment | undefined
- pageToken: string | undefined
- pageSize: string | undefined
-}
-
-const useMetricExpressionRequest = ({
- viewId,
- samplingLevel,
- filtersExpression,
- startDate,
- endDate,
- metricExpressions,
- metricAliases,
- selectedDimensions,
- selectedSegment,
- pageToken,
- pageSize,
-}: Parameters): ReportsRequest | undefined => {
- const metricExpressionRequestObject = useMemo<
- ReportsRequest | undefined
- >(() => {
- if (
- viewId === undefined ||
- viewId === "" ||
- metricExpressions === undefined ||
- metricExpressions === "" ||
- startDate === undefined ||
- startDate === "" ||
- endDate === undefined ||
- endDate === ""
- ) {
- return undefined
- }
-
- const baseMetricExpressions = metricExpressions.split(",")
- // TODO - there could be helpful error messaging here.
- if (baseMetricExpressions.length === 0) {
- return
- }
- const aliases = (metricAliases || "").split(",")
- const metrics = baseMetricExpressions.map((expression, idx) => {
- const alias = aliases[idx]
- const metric = {
- expression,
- }
- if (alias !== undefined) {
- metric["alias"] = alias
- }
- return metric
- })
-
- const reportRequest: ReportRequest = {
- viewId,
- metrics,
- dateRanges: [
- {
- startDate,
- endDate,
- },
- ],
- }
-
- if (selectedDimensions !== undefined && selectedDimensions.length > 0) {
- reportRequest["dimensions"] = selectedDimensions.map(column => ({
- name: column.id,
- }))
- }
-
- if (filtersExpression !== undefined && filtersExpression !== "") {
- reportRequest["filtersExpression"] = filtersExpression
- }
-
- if (selectedSegment !== undefined) {
- reportRequest["segments"] = [{ segmentId: selectedSegment.segmentId }]
- reportRequest["dimensions"] = (reportRequest["dimensions"] || []).concat([
- {
- name: "ga:segment",
- },
- ])
- }
-
- if (pageToken !== undefined) {
- reportRequest["pageToken"] = pageToken
- }
-
- if (pageSize !== undefined) {
- const parsed = parseInt(pageSize, 10)
- if (!isNaN(parsed)) {
- reportRequest["pageSize"] = parsed
- }
- }
-
- if (samplingLevel !== undefined) {
- reportRequest["samplingLevel"] = samplingLevel
- }
-
- return {
- reportRequests: [reportRequest],
- }
- }, [
- viewId,
- samplingLevel,
- filtersExpression,
- startDate,
- endDate,
- metricExpressions,
- selectedDimensions,
- selectedSegment,
- pageToken,
- pageSize,
- metricAliases,
- ])
-
- return metricExpressionRequestObject
-}
-
-export default useMetricExpressionRequest
diff --git a/src/components/RequestComposer/MetricExpression/useMetricExpressionRequestParameters.ts b/src/components/RequestComposer/MetricExpression/useMetricExpressionRequestParameters.ts
deleted file mode 100644
index 4e78f62c4..000000000
--- a/src/components/RequestComposer/MetricExpression/useMetricExpressionRequestParameters.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-import { useState, useMemo, useCallback } from "react"
-
-import { usePersistentString } from "@/hooks"
-import { StorageKey } from "@/constants"
-import { V4SamplingLevel } from "@/components/UAPickers"
-import { UAAccountPropertyView } from "@/components/ViewSelector/useAccountPropertyView"
-import {
- useKeyedHydratedPersistantArray,
- useKeyedHydratedPersistantObject,
-} from "@/hooks/useHydrated"
-import { QueryParam } from "../RequestComposer"
-import { Column, Segment } from "@/types/ua"
-
-const useMetricExpressionRequestParameters = (
- apv: UAAccountPropertyView,
- columns: Column[] | undefined,
- segments: Segment[] | undefined
-) => {
- const [viewId, setViewId] = useState("")
- const [startDate, setStartDate] = usePersistentString(
- StorageKey.metricExpressionStartDate,
- "7daysAgo"
- )
- const [endDate, setEndDate] = usePersistentString(
- StorageKey.metricExpressionEndDate,
- "yesterday"
- )
- const [metricExpressions, setMetricExpressions] = usePersistentString(
- StorageKey.metricExpressionMetricExpressions,
- ""
- )
- const [metricAliases, setMetricAliases] = usePersistentString(
- StorageKey.metricExpressionMetricAliases,
- ""
- )
-
- const getColumnsByIDs = useCallback(
- (ids: string[] | undefined) => {
- if (ids === undefined || columns === undefined) {
- return undefined
- }
- return columns.filter(c => ids.includes(c.id!))
- },
- [columns]
- )
-
- const [
- selectedDimensions,
- setSelectedDimensionIDs,
- ] = useKeyedHydratedPersistantArray(
- StorageKey.requestComposerMetricExpressionDimensions,
- QueryParam.Dimensions,
- getColumnsByIDs
- )
-
- const [filtersExpression, setFiltersExpression] = usePersistentString(
- StorageKey.metricExpressionFiltersExpression,
- ""
- )
-
- const getSegmentByID = useCallback(
- (id: string | undefined) => {
- if (id === undefined || segments === undefined) {
- return undefined
- }
- return segments.find(c => c.id === id)
- },
- [segments]
- )
-
- const [
- selectedSegment,
- setSelectedSegmentID,
- ] = useKeyedHydratedPersistantObject(
- StorageKey.requestComposerMetricExpressionSegment,
- QueryParam.Segment,
- getSegmentByID
- )
-
- const [samplingLevel, setSamplingLevel] = useState<
- V4SamplingLevel | undefined
- >(V4SamplingLevel.Default)
- const [pageToken, setPageToken] = usePersistentString(
- StorageKey.metricExpressionPageToken
- )
- const [pageSize, setPageSize] = usePersistentString(
- StorageKey.metricExpressionPageSize
- )
-
- useMemo(() => {
- const id = apv.view?.id
- if (id !== undefined) {
- setViewId(id)
- }
- }, [apv])
-
- return {
- viewId,
- setViewId,
- startDate,
- setStartDate,
- endDate,
- setEndDate,
- metricExpressions,
- setMetricExpressions,
- metricAliases,
- setMetricAliases,
- selectedDimensions,
- setSelectedDimensionIDs,
- filtersExpression,
- setFiltersExpression,
- selectedSegment,
- setSelectedSegmentID,
- samplingLevel,
- setSamplingLevel,
- pageToken,
- setPageToken,
- pageSize,
- setPageSize,
- }
-}
-
-export default useMetricExpressionRequestParameters
diff --git a/src/components/RequestComposer/PivotRequest/index.tsx b/src/components/RequestComposer/PivotRequest/index.tsx
deleted file mode 100644
index c3c4da3a2..000000000
--- a/src/components/RequestComposer/PivotRequest/index.tsx
+++ /dev/null
@@ -1,255 +0,0 @@
-// Copyright 2020 Google Inc. All rights reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import * as React from "react"
-import { useEffect } from "react"
-
-import makeStyles from "@material-ui/core/styles/makeStyles"
-
-import { usePersistentBoolean } from "@/hooks"
-import { StorageKey } from "@/constants"
-import GADate from "@/components/GADate"
-import LinkedTextField from "@/components/LinkedTextField"
-import LabeledCheckbox from "@/components/LabeledCheckbox"
-import {
- MetricsPicker,
- DimensionsPicker,
- SegmentPicker,
- V4SamplingLevelPicker,
-} from "@/components/UAPickers"
-import { ReportsRequest } from "../RequestComposer"
-import { linkFor, titleFor } from "../HistogramRequest"
-import usePivotRequestParameters from "./usePivotRequestParameters"
-import usePivotRequest from "./usePivotRequest"
-import { UAAccountPropertyView } from "@/components/ViewSelector/useAccountPropertyView"
-import useUADimensionsAndMetrics, {
- UADimensionsAndMetricsRequestCtx,
-} from "@/components/UAPickers/useDimensionsAndMetrics"
-import { successful } from "@/types"
-import {
- UASegmentsRequestCtx,
- useUASegments,
-} from "@/components/UAPickers/useUASegments"
-
-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 = ({
- apv,
- controlWidth,
- setRequestObject,
- children,
-}) => {
- const classes = useStyles()
- const [
- showSegmentDefinition,
- setShowSegmentDefinition,
- ] = usePersistentBoolean(StorageKey.pivotRequestShowSegmentDefinition, false)
-
- const uaDimensionsAndMetricsRequest = useUADimensionsAndMetrics(apv)
- const segmentsRequest = useUASegments()
-
- const {
- viewId,
- setViewId,
- startDate,
- setStartDate,
- endDate,
- setEndDate,
- selectedMetrics,
- setSelectedMetricIDs,
- selectedDimensions,
- setSelectedDimensionIDs,
- pivotMetrics,
- setPivotMetricIDs,
- pivotDimensions,
- setPivotDimensionIDs,
- startGroup,
- setStartGroup,
- selectedSegment,
- setSelectedSegmentID,
- samplingLevel,
- setSamplingLevel,
- maxGroupCount,
- setMaxGroupCount,
- includeEmptyRows,
- setIncludeEmptyRows,
- pageToken,
- setPageToken,
- pageSize,
- setPageSize,
- } = usePivotRequestParameters(
- apv,
- successful(uaDimensionsAndMetricsRequest)?.columns,
- successful(segmentsRequest)?.segments
- )
- const requestObject = usePivotRequest({
- viewId,
- startDate,
- endDate,
- metrics: selectedMetrics,
- dimensions: selectedDimensions,
- pivotMetrics,
- pivotDimensions,
- selectedSegment,
- startGroup,
- samplingLevel,
- maxGroupCount,
- includeEmptyRows,
- pageToken,
- pageSize,
- })
-
- useEffect(() => {
- setRequestObject(requestObject)
- }, [requestObject, setRequestObject])
-
- return (
-
-
-
-
-
- Show segment definitions instead of IDs.
-
-
- Include Empty Rows
-
-
- {children} -
-
- )
-}
-
-export default PivotRequest
diff --git a/src/components/RequestComposer/PivotRequest/usePivotRequest.ts b/src/components/RequestComposer/PivotRequest/usePivotRequest.ts
deleted file mode 100644
index ce0e46ee8..000000000
--- a/src/components/RequestComposer/PivotRequest/usePivotRequest.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-import { useMemo } from "react"
-
-import { V4SamplingLevel } from "@/components/UAPickers"
-import { Column, Segment } from "@/types/ua"
-
-type ReportRequest = gapi.client.analyticsreporting.ReportRequest
-type Request = { reportRequests: Array }
-
-interface Parameters {
- viewId: string | undefined
- startDate: string | undefined
- endDate: string | undefined
- metrics: Column[] | undefined
- pivotMetrics: Column[] | undefined
- dimensions: Column[] | undefined
- pivotDimensions: Column[] | undefined
- startGroup: string | undefined
- maxGroupCount: string | undefined
- selectedSegment: Segment | undefined
- samplingLevel: V4SamplingLevel | undefined
- pageToken: string | undefined
- pageSize: string | undefined
- includeEmptyRows: boolean
-}
-
-const usePivotRequest = ({
- viewId,
- startDate,
- endDate,
- metrics,
- pivotMetrics,
- dimensions,
- pivotDimensions,
- startGroup,
- maxGroupCount,
- selectedSegment,
- samplingLevel,
- pageToken,
- pageSize,
- includeEmptyRows,
-}: Parameters) => {
- const request = useMemo(() => {
- if (
- viewId === undefined ||
- viewId === "" ||
- startDate === undefined ||
- startDate === "" ||
- endDate === undefined ||
- endDate === "" ||
- metrics === undefined ||
- metrics.length === 0 ||
- dimensions === undefined ||
- dimensions.length === 0 ||
- pivotMetrics === undefined ||
- pivotMetrics.length === 0 ||
- pivotDimensions === undefined ||
- pivotDimensions.length === 0
- ) {
- return undefined
- }
- const reportRequest: ReportRequest = {
- viewId,
- metrics: metrics.map(metric => ({ expression: metric.id })),
- includeEmptyRows,
- dimensions: dimensions.map(dimension => ({ name: dimension.id })),
- pivots: [
- {
- dimensions: pivotDimensions.map(dimension => ({
- name: dimension.id,
- })),
- metrics: pivotMetrics.map(pivot => ({ expression: pivot.id })),
- },
- ],
- }
- if (startGroup !== undefined) {
- const parsed = parseInt(startGroup, 10)
- if (!isNaN(parsed)) {
- reportRequest["pivots"]![0].startGroup = parsed
- }
- }
- if (maxGroupCount !== undefined) {
- const parsed = parseInt(maxGroupCount, 10)
- if (!isNaN(parsed)) {
- reportRequest["pivots"]![0].maxGroupCount = parsed
- }
- }
- if (selectedSegment !== undefined) {
- reportRequest["segments"] = [
- {
- segmentId: selectedSegment.segmentId,
- },
- ]
- reportRequest.dimensions = reportRequest!.dimensions!.concat([
- { name: "ga:segment" },
- ])
- }
- if (samplingLevel !== undefined) {
- reportRequest["samplingLevel"] = samplingLevel
- }
- if (pageToken !== undefined) {
- reportRequest["pageToken"] = pageToken
- }
- if (pageSize !== undefined) {
- const parsed = parseInt(pageSize, 10)
- if (!isNaN(parsed)) {
- reportRequest["pageSize"] = parsed
- }
- }
-
- return {
- reportRequests: [reportRequest],
- }
- }, [
- startDate,
- endDate,
- viewId,
- metrics,
- pivotMetrics,
- dimensions,
- pivotDimensions,
- startGroup,
- maxGroupCount,
- selectedSegment,
- samplingLevel,
- pageToken,
- pageSize,
- includeEmptyRows,
- ])
- return request
-}
-
-export default usePivotRequest
diff --git a/src/components/RequestComposer/PivotRequest/usePivotRequestParameters.ts b/src/components/RequestComposer/PivotRequest/usePivotRequestParameters.ts
deleted file mode 100644
index b7c3ed3c1..000000000
--- a/src/components/RequestComposer/PivotRequest/usePivotRequestParameters.ts
+++ /dev/null
@@ -1,148 +0,0 @@
-import { useState, useMemo, useCallback } from "react"
-
-import { usePersistentString, usePersistentBoolean } from "@/hooks"
-import { StorageKey } from "@/constants"
-import { V4SamplingLevel } from "@/components/UAPickers"
-import { UAAccountPropertyView } from "@/components/ViewSelector/useAccountPropertyView"
-import { QueryParam } from "../RequestComposer"
-import {
- useKeyedHydratedPersistantArray,
- useKeyedHydratedPersistantObject,
-} from "@/hooks/useHydrated"
-import { Column, Segment } from "@/types/ua"
-
-const usePivotRequestParameters = (
- apv: UAAccountPropertyView,
- columns: Column[] | undefined,
- segments: Segment[] | undefined
-) => {
- const [viewId, setViewId] = useState("")
- const [startDate, setStartDate] = usePersistentString(
- StorageKey.pivotRequestStartDate,
- "7daysAgo"
- )
- const [endDate, setEndDate] = usePersistentString(
- StorageKey.pivotRequestEndDate,
- "yesterday"
- )
- const getColumnsByIDs = useCallback(
- (ids: string[] | undefined) => {
- if (ids === undefined || columns === undefined) {
- return undefined
- }
- return columns.filter(c => ids.includes(c.id!))
- },
- [columns]
- )
-
- const [
- selectedDimensions,
- setSelectedDimensionIDs,
- ] = useKeyedHydratedPersistantArray(
- StorageKey.requestComposerPivotDimensions,
- QueryParam.Dimensions,
- getColumnsByIDs
- )
- const [
- selectedMetrics,
- setSelectedMetricIDs,
- ] = useKeyedHydratedPersistantArray(
- StorageKey.requestComposerPivotMetrics,
- QueryParam.Metrics,
- getColumnsByIDs
- )
- const [
- pivotMetrics,
- setPivotMetricIDs,
- ] = useKeyedHydratedPersistantArray(
- StorageKey.requestComposerPivotPivotMetrics,
- QueryParam.PivotMetrics,
- getColumnsByIDs
- )
- const [
- pivotDimensions,
- setPivotDimensionIDs,
- ] = useKeyedHydratedPersistantArray(
- StorageKey.requestComposerPivotPivotDimensions,
- QueryParam.PivotDimensions,
- getColumnsByIDs
- )
- const [startGroup, setStartGroup] = usePersistentString(
- StorageKey.pivotRequestStartGroup
- )
- const [maxGroupCount, setMaxGroupCount] = usePersistentString(
- StorageKey.pivotRequestMaxGroupCount
- )
-
- const getSegmentByID = useCallback(
- (id: string | undefined) => {
- if (id === undefined || segments === undefined) {
- return undefined
- }
- return segments.find(c => c.id === id)
- },
- [segments]
- )
-
- const [
- selectedSegment,
- setSelectedSegmentID,
- ] = useKeyedHydratedPersistantObject(
- StorageKey.requestComposerPivotSegment,
- QueryParam.Segment,
- getSegmentByID
- )
- const [samplingLevel, setSamplingLevel] = useState<
- V4SamplingLevel | undefined
- >(V4SamplingLevel.Default)
- const [pageToken, setPageToken] = usePersistentString(
- StorageKey.pivotRequestPageToken
- )
- const [pageSize, setPageSize] = usePersistentString(
- StorageKey.pivotRequestPageSize
- )
- const [includeEmptyRows, setIncludeEmptyRows] = usePersistentBoolean(
- StorageKey.pivotRequestIncludeEmptyRows,
- false
- )
-
- useMemo(() => {
- const id = apv.view?.id
- if (id !== undefined) {
- setViewId(id)
- }
- }, [apv])
-
- return {
- viewId,
- setViewId,
- startDate,
- setStartDate,
- endDate,
- setEndDate,
- selectedMetrics,
- setSelectedMetricIDs,
- selectedDimensions,
- setSelectedDimensionIDs,
- pivotMetrics,
- setPivotMetricIDs,
- pivotDimensions,
- setPivotDimensionIDs,
- startGroup,
- setStartGroup,
- maxGroupCount,
- setMaxGroupCount,
- selectedSegment,
- setSelectedSegmentID,
- samplingLevel,
- setSamplingLevel,
- includeEmptyRows,
- setIncludeEmptyRows,
- pageToken,
- setPageToken,
- pageSize,
- setPageSize,
- }
-}
-
-export default usePivotRequestParameters
diff --git a/src/components/RequestComposer/ReportsTable.tsx b/src/components/RequestComposer/ReportsTable.tsx
deleted file mode 100644
index c1199d3f9..000000000
--- a/src/components/RequestComposer/ReportsTable.tsx
+++ /dev/null
@@ -1,140 +0,0 @@
-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 PrettyJson, { shouldCollapseResponse } from "@/components/PrettyJson"
-import { GetReportsResponse } from "./api"
-import Spinner from "@/components/Spinner"
-
-const useStyles = makeStyles(theme => ({
- loadingIndicator: {
- marginTop: theme.spacing(2),
- display: "flex",
- flexDirection: "column",
- alignItems: "center",
- },
- container: {
- maxHeight: 440,
- },
- makeRequest: {
- marginTop: theme.spacing(1),
- marginBottom: theme.spacing(2),
- },
- reports: {
- marginTop: theme.spacing(2),
- },
-}))
-
-const TabPanel: React.FC<{ value: number; index: number }> = ({
- value,
- index,
- children,
-}) => {
- return (
- = ({
- 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.)
- //
- if (longRequest) {
- return Loading
- }
-
- if (response === undefined) {
- return null
- }
- return (
-
- Response
- {
- // TODO - huh?
- setTab(newValue as any)
- }}
- >
-
-
- {response.reports?.map((reportData, reportIdx) => {
- return (
-
-
-
-
- )
- })}
-
-
-
-
- )
-}
-
-export default ReportsTable
diff --git a/src/components/RequestComposer/RequestComposer.tsx b/src/components/RequestComposer/RequestComposer.tsx
deleted file mode 100644
index aa5b05287..000000000
--- a/src/components/RequestComposer/RequestComposer.tsx
+++ /dev/null
@@ -1,205 +0,0 @@
-// Copyright 2020 Google Inc. All rights reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import * as React from "react"
-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 { StorageKey } from "@/constants"
-import ViewSelector from "@/components/ViewSelector"
-import { PAB } from "@/components/Buttons"
-import PrettyJson, { shouldCollapseRequest } from "@/components/PrettyJson"
-import HistogramRequest from "./HistogramRequest"
-import PivotRequest from "./PivotRequest"
-import CohortRequest from "./CohortRequest"
-import MetricExpression from "./MetricExpression"
-import ReportsTable from "./ReportsTable"
-import { useMakeReportsRequest } from "./api"
-import TabPanel from "../TabPanel"
-import { RequestComposerType } from "."
-import useAccountPropertyView from "../ViewSelector/useAccountPropertyView"
-import { navigate } from "gatsby"
-
-const useStyles = makeStyles(theme => ({
- viewSelector: {
- flexDirection: "column",
- maxWidth: "650px",
- },
- maxControlWidth: {
- maxWidth: "600px",
- },
- makeRequest: {
- marginTop: theme.spacing(1),
- marginBottom: theme.spacing(2),
- },
-}))
-
-export type ReportRequest = gapi.client.analyticsreporting.ReportRequest
-export type ReportsRequest = { reportRequests: Array }
-
-export enum QueryParam {
- Account = "a",
- Property = "b",
- View = "c",
- Dimensions = "d",
- Metrics = "e",
- Segment = "f",
- PivotMetrics = "g",
- PivotDimensions = "h",
- Metric = "i",
-}
-
-interface RequestComposerProps {
- type: RequestComposerType
-}
-
-const RequestComposer: React.FC = ({ type }) => {
- const classes = useStyles()
- const tab = React.useMemo(() => {
- switch (type) {
- case RequestComposerType.Histogram:
- return 0
- case RequestComposerType.Pivot:
- return 1
- case RequestComposerType.Cohort:
- return 2
- case RequestComposerType.MetricExpression:
- return 3
- }
- }, [type])
-
- const pathForIdx = React.useCallback((idx: number) => {
- switch (idx) {
- case 0:
- return `/request-composer/`
- case 1:
- return `/request-composer/pivot/`
- case 2:
- return `/request-composer/cohort/`
- case 3:
- return `/request-composer/metric-expression/`
- default:
- throw new Error("No matching idx")
- }
- }, [])
- const [requestObject, setRequestObject] = useState()
-
- const {
- makeRequest,
- response,
- longRequest,
- canMakeRequest,
- } = useMakeReportsRequest(requestObject)
-
- const button = React.useMemo(() => {
- return (
-
- Make Request
-
- )
- }, [classes, makeRequest, canMakeRequest])
-
- const accountPropertyView = useAccountPropertyView(
- StorageKey.requestComposerAPV,
- QueryParam
- )
-
- return (
- <>
-
- Select View
-
-
- {
- const path = `${pathForIdx(newValue)}`
- navigate(path)
- }}
- >
-
-
-
- {button}
-
-
-
-
- {button}
-
-
-
-
- {button}
-
-
-
-
- {button}
-
-
-
-
-
-
-
-
-
- )
-}
-
-export default RequestComposer
diff --git a/src/components/RequestComposer/api.ts b/src/components/RequestComposer/api.ts
deleted file mode 100644
index 707cc9167..000000000
--- a/src/components/RequestComposer/api.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { useSelector } from "react-redux"
-import { useEffect, useState, useCallback, useMemo } from "react"
-
-export type GetReportsResponse = gapi.client.analyticsreporting.GetReportsResponse
-
-type ReportingAPI = typeof gapi.client.analyticsreporting
-
-export const useAnalyticsReportingAPI = (): ReportingAPI | undefined => {
- const gapi = useSelector((state: AppState) => state.gapi)
- const [reportingAPI, setReportingAPI] = useState()
-
- useEffect(() => {
- if (gapi === undefined) {
- return
- }
- setReportingAPI(gapi?.client?.analyticsreporting)
- }, [gapi])
-
- return reportingAPI
-}
-
-type GetReportsRequest = gapi.client.analyticsreporting.GetReportsRequest
-
-export const useMakeReportsRequest = (
- requestObject: GetReportsRequest | undefined
-) => {
- const reportingAPI = useAnalyticsReportingAPI()
- const [response, setResponse] = useState()
- const [longRequest, setLongRequest] = useState(false)
-
- const canMakeRequest = useMemo(() => {
- return requestObject !== undefined
- }, [requestObject])
-
- const makeRequest = useCallback(() => {
- if (reportingAPI === undefined || requestObject === undefined) {
- return
- }
- ;(async () => {
- const first = await Promise.race([
- (async () => {
- const response = await reportingAPI.reports.batchGet(
- {},
- requestObject
- )
- setResponse(response.result)
- setTimeout(() => {
- setLongRequest(false)
- }, 500)
- return "API"
- })(),
- new Promise(resolve => {
- window.setTimeout(() => {
- resolve("TIMEOUT")
- }, 300)
- }),
- ])
- if (first === "TIMEOUT") {
- setLongRequest(true)
- }
- })()
- }, [reportingAPI, requestObject])
-
- return { makeRequest, response, longRequest, canMakeRequest }
-}
diff --git a/src/components/RequestComposer/index.tsx b/src/components/RequestComposer/index.tsx
deleted file mode 100644
index e62023e67..000000000
--- a/src/components/RequestComposer/index.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-// Copyright 2020 Google Inc. All rights reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import * as React from "react"
-
-import Typography from "@material-ui/core/Typography"
-import makeStyles from "@material-ui/core/styles/makeStyles"
-
-import ExternalLink from "@/components/ExternalLink"
-import Tool from "./RequestComposer"
-
-const useStyles = makeStyles(theme => ({
- list: {
- marginTop: theme.spacing(0),
- },
-}))
-
-export enum RequestComposerType {
- Histogram = "histogram",
- Pivot = "pivot",
- Cohort = "cohort",
- MetricExpression = "metric-expression",
-}
-
-interface RequestComposerProps {
- type: RequestComposerType
-}
-
-const RequestComposer: React.FC = ({ type }) => {
- const classes = useStyles()
- return (
- <>
- Overview
-
- The Request Composer demonstrates how to compose the following Analytics
- Reporting API v4 requests and visualize their responses:
-
-
- This version of Request Composer does not support the following
- features:
-
- 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 80d030cca..cdce1e407 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 (
-
-
- {validationMessages.map(message => {
- let addParameterButton: JSX.Element | null = null
- if (
- message.code === "VALUE_REQUIRED" &&
- !hasParameter(message.param)
- ) {
- addParameterButton = (
-
- )
- }
- return (
-
-
-
- {message.description} - {addParameterButton} - -
- )
- })}
-
- {sendHitButton}
-
- )
- }
- default: {
- return (
-
-
- {hitStatus === HitStatus.Validating
- ? "Validating..."
- : "Validate hit"}
-
-
- )
- }
- }
-}
-
-export default HitCard
diff --git a/src/components/HitBuilder/Parameters.tsx b/src/components/HitBuilder/Parameters.tsx
deleted file mode 100644
index 1fecc7259..000000000
--- a/src/components/HitBuilder/Parameters.tsx
+++ /dev/null
@@ -1,299 +0,0 @@
-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 { HIT_TYPES, Property } from "./types"
-import { Validation, ParametersAPI } from "./hooks"
-
-const useStyles = makeStyles(theme => ({
- subdued: {
- color: theme.palette.grey[500],
- },
- propertyOption: {
- display: "flex",
- width: "100%",
- flexDirection: "column",
- position: "relative",
- "& > span": {
- position: "absolute",
- right: theme.spacing(2),
- },
- },
- inputs: {
- maxWidth: "600px",
- display: "flex",
- flexDirection: "column",
- "& > div": {
- margin: theme.spacing(1),
- },
- "& > button": {
- alignSelf: "flex-end",
- margin: theme.spacing(2),
- marginRight: theme.spacing(1),
- },
- },
- addedParam: {
- display: "flex",
- "& > div:first-child": {
- marginRight: theme.spacing(1),
- },
- "& > div:nth-child(2)": {
- flexGrow: 1,
- },
- },
-}))
-
-interface ParametersProps {
- updateParameterName: ParametersAPI["updateParameterName"]
- updateParameterValue: ParametersAPI["updateParameterValue"]
- removeParameter: ParametersAPI["removeParameter"]
- shouldFocus: ParametersAPI["shouldFocus"]
- addParameter: ParametersAPI["addParameter"]
- parameters: ParametersAPI["parameters"]
- properties: Property[]
- validationMessages: Validation["validationMessages"]
-}
-const Parameters: React.FC
-
- {a.name}
-
-
- {a.id}
-
-
- {a.group}
-
-
- )
- }}
- renderInput={params => (
-
- {
- updateParameterName(param.id, e.target.value)
- }}
- />
- {
- updateParameterValue(param.id, e.target.value)
- }}
- InputProps={{
- endAdornment: (
-
-
- {
- removeParameter(param.id)
- }}
- >
-
-
-
- ),
- }}
- />
-
- )
- })}
-
- }
- onClick={() => {
- addParameter()
- }}
- variant="outlined"
- >
- Add parameter
-
-
-
-
-
- {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}`}
-
-
- - {children} -
- {value === index && {children} }
-
- )
-}
-
-interface ReportsTableProps {
- response: GetReportsResponse | undefined
- longRequest: boolean
-}
-
-const ReportsTable: React.FC-
-
-
-
- Histogram request - -
- -
-
- Pivot request - -
- -
-
- Cohort request - -
- -
-
- metric expressions - -
-
-
-
-
-
- multiple date ranges - -
- -
-
- advanced segment configuration - -
- -
-
- advanced filter configuration - -
-
-
-
- Select an account, a property, and a view. -
- Select a request type (Histogram, Pivot, or Cohort). -
- Set query parameters. -
- Click Make Request. -
+
- )
+
+ );
}
export default ScrollToTop
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 5fae23445..362df7c05 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
- 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 (
- ({
- stringify: option => `${option.id} ${option.attributes?.uiName || ""}`,
-})
-
-export const DimensionPicker: React.FC<{
- selectedDimension: ColumnT | undefined
- setDimensionID: Dispatch
- required?: true | undefined
- helperText?: string
-}> = ({ helperText, selectedDimension, setDimensionID, required }) => {
- const request = React.useContext(UADimensionsAndMetricsRequestCtx)
-
- return (
-
- filterOptions={columnFilterOptions}
- fullWidth
- autoComplete
- autoHighlight
- freeSolo
- loading={request.status === RequestStatus.InProgress}
- options={
- successful(request)?.dimensions.filter(removeDeprecatedColumns) || []
- }
- getOptionLabel={dimension => dimension.id!}
- value={selectedDimension || null}
- onChange={(_event, value) =>
- setDimensionID(value === null ? undefined : (value as ColumnT).id)
- }
- renderOption={column =>
- required?: true | undefined
- helperText?: string
- label?: string
-}> = ({
- helperText,
- selectedDimensions,
- setDimensionIDs,
- required,
- label = "dimensions",
-}) => {
- const request = React.useContext(UADimensionsAndMetricsRequestCtx)
-
- return (
-
- filterOptions={columnFilterOptions}
- fullWidth
- autoComplete
- autoHighlight
- freeSolo
- multiple
- loading={request.status === RequestStatus.InProgress}
- options={
- successful(request)
- ?.dimensions.filter(removeDeprecatedColumns)
- .filter(
- option =>
- (selectedDimensions || []).find(s => s.id === option.id) ===
- undefined
- ) || []
- }
- getOptionLabel={dimension => dimension.id!}
- value={selectedDimensions || []}
- onChange={(_event, value) =>
- setDimensionIDs((value as ColumnT[])?.map(c => c.id!))
- }
- renderOption={column =>
- required?: true | undefined
- helperText?: string
- filter?: (metric: ColumnT) => boolean
-}> = ({ helperText, selectedMetric, setMetricID, required, filter }) => {
- const request = React.useContext(UADimensionsAndMetricsRequestCtx)
-
- return (
-
- filterOptions={columnFilterOptions}
- fullWidth
- autoComplete
- autoHighlight
- freeSolo
- loading={request.status === RequestStatus.InProgress}
- options={
- successful(request)
- ?.metrics.filter(removeDeprecatedColumns)
- .filter(filter !== undefined ? filter : () => true) || []
- }
- getOptionLabel={metric => metric.id!}
- value={selectedMetric || null}
- onChange={(_event, value) =>
- setMetricID(value === null ? undefined : (value as ColumnT).id)
- }
- renderOption={column =>
- required?: true | undefined
- helperText?: string
- label?: string
-}> = ({
- helperText,
- selectedMetrics,
- setMetricIDs,
- required,
- label = "metrics",
-}) => {
- const request = React.useContext(UADimensionsAndMetricsRequestCtx)
-
- return (
-
- filterOptions={columnFilterOptions}
- fullWidth
- autoComplete
- autoHighlight
- freeSolo
- multiple
- loading={request.status === RequestStatus.InProgress}
- options={
- successful(request)
- ?.metrics.filter(removeDeprecatedColumns)
- .filter(
- option =>
- (selectedMetrics || []).find(s => s.id === option.id) ===
- undefined
- ) || []
- }
- getOptionLabel={metric => metric.id!}
- value={selectedMetrics || []}
- onChange={(_event, value) =>
- setMetricIDs((value as ColumnT[])?.map(c => c.id!))
- }
- renderOption={column => ({
- stringify: option => `${option.segmentId} ${option.name}`,
-})
-export const SegmentPicker: React.FC<{
- segment: SegmentT | undefined
- setSegmentID: Dispatch
- showSegmentDefinition: boolean
- required?: true | undefined
- helperText?: string
-}> = ({
- helperText,
- segment,
- setSegmentID,
- required,
- showSegmentDefinition,
-}) => {
- const request = React.useContext(UASegmentsRequestCtx)
-
- const getOptionLabel = React.useCallback(
- (segment: SegmentT) =>
- (showSegmentDefinition
- ? segment.definition ||
- (segment.name && `${segment.name} has no segment definiton.`)
- : segment.segmentId!) || "",
- [showSegmentDefinition]
- )
-
- return (
-
- fullWidth
- autoComplete
- autoHighlight
- freeSolo
- loading={request.status === RequestStatus.InProgress}
- options={successful(request)?.segments || []}
- getOptionSelected={(a, b) =>
- a.id === b.id || a.definition === b.definition
- }
- getOptionLabel={getOptionLabel}
- value={segment || null}
- filterOptions={(options, params) => {
- const filtered = segmentFilterOptions(options || [], params)
-
- // Add entry for creating a dynamic segment based on input.
- if (params.inputValue !== "") {
- filtered.push({
- definition: params.inputValue,
- name: `Add dynamic segment`,
- segmentId: params.inputValue,
- id: params.inputValue,
- type: "DYNAMIC",
- })
- }
- return filtered
- }}
- onChange={(_event, value) => {
- setSegmentID(value === null ? undefined : (value as SegmentT).id)
- }}
- renderOption={column => (
-
- >
- required?: true | undefined
- helperText?: string
-}> = ({ helperText, setSamplingLevel, required, storageKey }) => {
- const [selected, setSelected] = usePersistentString(storageKey)
-
- React.useEffect(() => {
- setSamplingLevel(selected as V4SamplingLevel)
- }, [selected, setSamplingLevel])
-
- return (
- , false, undefined, true>
- fullWidth
- autoComplete
- autoHighlight
- freeSolo
- options={Object.values(V4SamplingLevel)}
- getOptionLabel={segment => segment}
- value={selected || null}
- onChange={(_event, value) =>
- setSelected(value === null ? undefined : (value as V4SamplingLevel))
- }
- renderOption={column => column}
- renderInput={params => (
-
- required?: true | undefined
- helperText?: string
-}> = ({ helperText, samplingLevel, setSamplingLevel, required }) => {
- return (
- , false, undefined, true>
- fullWidth
- autoComplete
- autoHighlight
- freeSolo
- options={Object.values(V3SamplingLevel)}
- getOptionLabel={segment => segment}
- value={samplingLevel || null}
- onChange={(_event, value) =>
- setSamplingLevel(
- value === null ? undefined : (value as V3SamplingLevel)
- )
- }
- renderOption={column => column}
- renderInput={params => (
- >
- required?: true | undefined
- helperText?: string
-}> = ({ helperText, setCohortSize, required, storageKey }) => {
- const [selected, setSelected] = usePersistentString(storageKey)
-
- React.useEffect(() => {
- setCohortSize(selected as CohortSize)
- }, [selected, setCohortSize])
-
- return (
- , false, undefined, true>
- fullWidth
- autoComplete
- autoHighlight
- freeSolo
- options={Object.values(CohortSize)}
- getOptionLabel={segment => segment}
- value={selected || null}
- onChange={(_event, value) =>
- setSelected(value === null ? undefined : (value as CohortSize))
- }
- renderOption={column => column}
- renderInput={params => (
-
->({ status: RequestStatus.NotStarted })
-
-interface Successful {
- columns: Column[]
- metrics: Column[]
- dimensions: Column[]
-}
-
-const useUADimensionsAndMetrics = ({
- account,
- property,
- view,
-}: UAAccountPropertyView): Requestable => {
- const gapi = useSelector((state: AppState) => state.gapi)
-
- const metadataAPI = useMemo(() => gapi?.client?.analytics?.metadata, [gapi])
- const managementAPI = useMemo(() => gapi?.client?.analytics?.management, [
- gapi,
- ])
-
- const requestReady = useMemo(() => {
- if (
- metadataAPI === undefined ||
- managementAPI === undefined ||
- account === undefined ||
- property === undefined ||
- view === undefined
- ) {
- return false
- }
- return true
- }, [metadataAPI, managementAPI, account, property, view])
-
- const makeRequest = useCallback(async () => {
- if (
- metadataAPI === undefined ||
- managementAPI === undefined ||
- account === undefined ||
- property === undefined ||
- view === undefined
- ) {
- throw new Error(
- "Invalid invariant - metadataAPI, managementAPI, account, property, and view must be defined here."
- )
- }
- const columnsResponse = await metadataAPI.columns.list({ reportType: "ga" })
- const columns = columnsResponse.result.items
-
- const [
- customDimensionsResponse,
- customMetricsResponse,
- goalsResponse,
- ] = await Promise.all([
- managementAPI.customDimensions.list({
- accountId: account.id!,
- webPropertyId: property.id!,
- }),
- managementAPI.customMetrics.list({
- accountId: account.id!,
- webPropertyId: property.id!,
- }),
- managementAPI.goals.list({
- accountId: account.id!,
- webPropertyId: property.id!,
- profileId: view.id!,
- }),
- ])
-
- const customDimensions = customDimensionsResponse.result.items
- const customMetrics = customMetricsResponse.result.items
- const goals = goalsResponse.result.items
-
- return columns?.flatMap(column => {
- if (customDimensions !== undefined && column.id === "ga:dimensionXX") {
- return customDimensions.map(
- dimension =>
- ({
- ...column,
- id: dimension.id,
- attributes: { ...column.attributes, uiName: dimension.name },
- } as Column)
- )
- }
- if (customMetrics !== undefined && column.id === "ga:metricXX") {
- return customMetrics.map(
- metric =>
- ({
- ...column,
- id: metric.id,
- attributes: { ...column.attributes, uiName: metric.name },
- } as Column)
- )
- }
- if (
- goals !== undefined &&
- column.attributes!.minTemplateIndex !== undefined &&
- /goalxx/i.test(column.id!)
- ) {
- return goals.map(goal => ({
- ...column,
- id: column.id!.replace("XX", goal.id!),
- attributes: {
- ...column.attributes,
- uiName: `${goal.name} (${column.attributes!.uiName.replace(
- "XX",
- goal.id!
- )})`,
- },
- }))
- }
- if (column.attributes!.minTemplateIndex !== undefined) {
- let min = 0
- let max = 0
- if (
- property?.level === "PREMIUM" &&
- column.attributes!.premiumMinTemplateIndex !== undefined
- ) {
- min = parseInt(column.attributes!.premiumMinTemplateIndex, 10)
- max = parseInt(column.attributes!.premiumMaxTemplateIndex, 10)
- } else {
- min = parseInt(column.attributes!.minTemplateIndex, 10)
- max = parseInt(column.attributes!.maxTemplateIndex, 10)
- }
- const columns: gapi.client.analytics.Column[] = []
- for (let i = min; i <= max; i++) {
- columns.push({
- ...column,
- id: column.id!.replace("XX", i.toString()),
- attributes: {
- ...column.attributes,
- uiName: column.attributes!.uiName.replace("XX", i.toString()),
- },
- })
- }
- return columns
- }
- return [column]
- })
- }, [metadataAPI, managementAPI, account, property, view])
-
- const columnsRequest = useCached(
- // Even though account is sometimes undefined it doesn't really matter
- // since this hook will re-run once it is. makeRequest is smartEnough to
- // not do anything when account property or view are undefined.
- `//ua-dims-mets/${account?.id}-${property?.id}-${view?.id}` as StorageKey,
- makeRequest,
- moment.duration(5, "minutes"),
- requestReady
- )
-
- return useMemo(() => {
- switch (columnsRequest.status) {
- case RequestStatus.Successful: {
- const columns = columnsRequest.value || []
- return {
- status: columnsRequest.status,
- columns,
- dimensions: columns.filter(c => c.attributes?.type === "DIMENSION"),
- metrics: columns.filter(c => c.attributes?.type === "METRIC"),
- }
- }
- default:
- return { status: columnsRequest.status }
- }
- }, [columnsRequest])
-}
-
-export default useUADimensionsAndMetrics
diff --git a/src/components/UAPickers/useUASegments.ts b/src/components/UAPickers/useUASegments.ts
deleted file mode 100644
index cd6b1672b..000000000
--- a/src/components/UAPickers/useUASegments.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import { Segment } from "@/types/ua"
-import { createContext, useCallback, useMemo } from "react"
-import { useSelector } from "react-redux"
-import useCached from "@/hooks/useCached"
-import { StorageKey } from "@/constants"
-import moment from "moment"
-import { Requestable, RequestStatus } from "@/types"
-
-export const UASegmentsRequestCtx = createContext<
- ReturnType
->({ status: RequestStatus.NotStarted })
-
-interface Successful {
- segments: Segment[]
-}
-
-export const useUASegments = (): Requestable => {
- const gapi = useSelector((state: AppState) => state.gapi)
- const managementAPI = useMemo(() => gapi?.client.analytics.management, [gapi])
-
- const requestSegments = useCallback(async () => {
- if (managementAPI === undefined) {
- return Promise.resolve(undefined)
- }
- const response = await managementAPI.segments.list({})
- return response.result.items
- }, [managementAPI])
-
- const requestReady = useMemo(() => {
- return managementAPI !== undefined
- }, [managementAPI])
-
- const segmentsRequest = useCached(
- StorageKey.uaSegments,
- requestSegments,
- moment.duration(5, "minutes"),
- requestReady
- )
-
- return useMemo(() => {
- switch (segmentsRequest.status) {
- case RequestStatus.Successful: {
- const segments = segmentsRequest.value || []
- return {
- status: segmentsRequest.status,
- segments,
- }
- }
- default:
- return { status: segmentsRequest.status }
- }
- }, [segmentsRequest])
-}
diff --git a/src/components/ViewSelector/index.spec.tsx b/src/components/ViewSelector/index.spec.tsx
deleted file mode 100644
index 37b8849d5..000000000
--- a/src/components/ViewSelector/index.spec.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-// Copyright 2020 Google Inc. All rights reserved.
-//
-// Licensed under the Apache License, Version 2.0 (the "License");
-// you may not use this file except in compliance with the License.
-// You may obtain a copy of the License at
-//
-// http://www.apache.org/licenses/LICENSE-2.0
-//
-// Unless required by applicable law or agreed to in writing, software
-// distributed under the License is distributed on an "AS IS" BASIS,
-// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-// See the License for the specific language governing permissions and
-// limitations under the License.
-
-import * as React from "react"
-
-import * as renderer from "@testing-library/react"
-import { withProviders } from "@/test-utils"
-import "@testing-library/jest-dom"
-import Sut, { Label, TestID } from "./index"
-import useAccountPropertyView from "./useAccountPropertyView"
-import { StorageKey } from "@/constants"
-import { fireEvent, within } from "@testing-library/react"
-
-enum QueryParam {
- Account = "a",
- Property = "b",
- View = "c",
-}
-
-describe("ViewSelector", () => {
- const DefaultSut: React.FC = () => {
- const apv = useAccountPropertyView("a" as StorageKey, QueryParam)
- return (theme => ({
- root: props => ({
- display: "flex",
- flexDirection: props.vertical ? "column" : "unset",
- ...(props.vertical ? { marginBottom: theme.spacing(1) } : {}),
- width: "100%",
- }),
- formControl: {
- width: "100%",
- margin: theme.spacing(1),
- marginLeft: "unset",
- },
-}))
-
-interface CommonProps {
- account?: AccountSummary
- setAccountID: Dispatch
- property?: WebPropertySummary
- setPropertyID: Dispatch
- vertical?: boolean
- className?: string
- size?: "small" | "medium"
- variant?: "outlined" | "standard"
- autoFill?: boolean
-}
-
-interface OnlyProperty extends CommonProps {
- onlyProperty: true
-}
-
-interface AlsoView extends CommonProps {
- view?: ProfileSummary
- setViewID: Dispatch
- onlyProperty?: false | undefined
-}
-
-type ViewSelectorProps = AlsoView | OnlyProperty
-
-export enum Label {
- Account = "account",
- Property = "property",
- View = "view",
-}
-
-export enum TestID {
- AccountAutocomplete = "account-autocomplete",
- PropertyAutocomplete = "property-autocomplete",
- ViewAutocomplete = "view-autocomplete",
-}
-
-const ViewSelector: React.FC = props => {
- const {
- autoFill,
- account,
- setAccountID,
- property,
- setPropertyID,
- className,
- size = "medium",
- variant = "standard",
- } = props
- const classes = useStyles(props)
-
- const request = useAccountSummaries(account, property)
-
- if (request.status === RequestStatus.Failed) {
- return (
-
-
- There was an error while requesting your accounts.
-
- {request.error.message && (
-
- Error Message: {request.error.message}
-
- )}
-
- )
- }
-
- return (
-
- setPropertyID: Dispatch
- setViewID: Dispatch
-}
-
-const useAccountPropertyView = (
- prefix: StorageKey,
- queryParamKeys: { Account: string; Property: string; View: string },
- onSetView?: (p: ProfileSummary | undefined) => void
-): UAAccountPropertyView & UAAccountPropertyViewSetters => {
- const flattenedViewsRequest = useFlattenedViews()
-
- const getAccountByID = useCallback(
- (id: string | undefined) => {
- if (
- flattenedViewsRequest.status !== RequestStatus.Successful ||
- id === undefined
- ) {
- return undefined
- }
- return flattenedViewsRequest.flattenedViews.find(
- flattenedView => flattenedView.account?.id === id
- )?.account
- },
- [flattenedViewsRequest]
- )
-
- const [
- account,
- setAccountID,
- ] = useKeyedHydratedPersistantObject(
- `${prefix}-account` as StorageKey,
- queryParamKeys.Account,
- getAccountByID
- )
-
- const getPropertyByID = useCallback(
- (id: string | undefined) => {
- if (
- flattenedViewsRequest.status !== RequestStatus.Successful ||
- id === undefined
- ) {
- return undefined
- }
- return flattenedViewsRequest.flattenedViews.find(
- flattenedView => flattenedView.property?.id === id
- )?.property
- },
- [flattenedViewsRequest]
- )
-
- const [
- property,
- setPropertyID,
- ] = useKeyedHydratedPersistantObject(
- `${prefix}-property` as StorageKey,
- queryParamKeys.Property,
- getPropertyByID
- )
-
- const getViewByID = useCallback(
- (id: string | undefined) => {
- if (
- flattenedViewsRequest.status !== RequestStatus.Successful ||
- id === undefined
- ) {
- return undefined
- }
- return flattenedViewsRequest.flattenedViews.find(
- flattenedView => flattenedView.view?.id === id
- )?.view
- },
- [flattenedViewsRequest]
- )
-
- const [view, setViewID] = useKeyedHydratedPersistantObject(
- `${prefix}-view` as StorageKey,
- queryParamKeys.View,
- getViewByID,
- onSetView
- )
-
- return { account, setAccountID, property, setPropertyID, view, setViewID }
-}
-
-export default useAccountPropertyView
diff --git a/src/components/ViewSelector/useAccountSummaries.ts b/src/components/ViewSelector/useAccountSummaries.ts
deleted file mode 100644
index 8c1176050..000000000
--- a/src/components/ViewSelector/useAccountSummaries.ts
+++ /dev/null
@@ -1,99 +0,0 @@
-import { StorageKey } from "@/constants"
-import useCached from "@/hooks/useCached"
-import { Requestable, RequestStatus } from "@/types"
-import { AccountSummary, ProfileSummary, WebPropertySummary } from "@/types/ua"
-import moment from "moment"
-import { useCallback, useMemo } from "react"
-
-import { useSelector } from "react-redux"
-
-interface Successful {
- accountSummaries: AccountSummary[]
- propertySummaries: WebPropertySummary[]
- profileSummaries: ProfileSummary[]
-}
-
-const useAccountSummaries = (
- accountSummary?: AccountSummary,
- propertySummary?: WebPropertySummary
-): Requestable => {
- const gapi = useSelector((state: AppState) => state.gapi)
-
- const managementAPI = useMemo(() => {
- return gapi?.client?.analytics?.management
- }, [gapi])
-
- const requestAccountSummaries = useCallback(async (): Promise<
- AccountSummary[] | undefined
- > => {
- if (managementAPI === undefined) {
- throw new Error(
- "invalid invariant - fetchAccounts should never be called with an undefined managementAPI"
- )
- }
- const response = await managementAPI.accountSummaries.list({})
- return response.result.items
- }, [managementAPI])
-
- const requestReady = useMemo(() => managementAPI !== undefined, [
- managementAPI,
- ])
-
- const accountSummariesRequest = useCached(
- StorageKey.uaAccounts,
- requestAccountSummaries,
- moment.duration(5, "minutes"),
- requestReady
- )
-
- const accountFilter = useCallback(
- (a: AccountSummary) => {
- if (accountSummary === undefined) {
- return false
- }
- return a.id === accountSummary.id
- },
- [accountSummary]
- )
-
- const propertyFilter = useCallback(
- (p: WebPropertySummary) => {
- if (propertySummary === undefined) {
- return false
- }
- return propertySummary.id === p.id
- },
- [propertySummary]
- )
-
- return useMemo(() => {
- switch (accountSummariesRequest.status) {
- case RequestStatus.Successful: {
- const accountSummaries = accountSummariesRequest.value || []
- const propertySummaries = accountSummaries
- .filter(accountFilter)
- .flatMap(a => a.webProperties || [])
- const profileSummaries = propertySummaries
- .filter(propertyFilter)
- .flatMap(p => p.profiles || [])
- return {
- status: accountSummariesRequest.status,
- accountSummaries,
- propertySummaries,
- profileSummaries,
- }
- }
- case RequestStatus.Failed: {
- console.log({ accountSummariesRequest })
- return {
- status: accountSummariesRequest.status,
- error: accountSummariesRequest.error,
- }
- }
- default:
- return { status: accountSummariesRequest.status }
- }
- }, [accountSummariesRequest, accountFilter, propertyFilter])
-}
-
-export default useAccountSummaries
diff --git a/src/components/ViewSelector/useFlattenedViews.ts b/src/components/ViewSelector/useFlattenedViews.ts
deleted file mode 100644
index 36751c873..000000000
--- a/src/components/ViewSelector/useFlattenedViews.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Requestable, RequestStatus } from "@/types"
-import { useCallback, useMemo } from "react"
-import {
- AccountSummary,
- WebPropertySummary,
- UAAccountPropertyView,
-} from "../ViewSelector/useAccountPropertyView"
-import useAccountSummaries from "./useAccountSummaries"
-
-interface Successful {
- flattenedViews: UAAccountPropertyView[]
-}
-
-const useFlattenedViews = (
- accountSummary?: AccountSummary,
- propertySummary?: WebPropertySummary,
- filter?: (fv: UAAccountPropertyView) => boolean
-): Requestable => {
- const accountSummariesRequest = useAccountSummaries()
-
- const filterFlattened = useCallback(
- (flattenedView: UAAccountPropertyView) => {
- if (filter && filter(flattenedView) === false) {
- return false
- }
- return accountSummary === undefined
- ? true
- : accountSummary.id === flattenedView.account?.id
- ? propertySummary === undefined
- ? true
- : propertySummary.id === flattenedView.property?.id
- : false
- },
- [accountSummary, propertySummary, filter]
- )
-
- return useMemo(() => {
- switch (accountSummariesRequest.status) {
- case RequestStatus.Successful: {
- const accountSummaries = accountSummariesRequest.accountSummaries
-
- const flattenedViews = accountSummaries
- .flatMap(summary => {
- const account = { ...summary }
-
- const properties = summary.webProperties || []
- if (properties.length === 0) {
- return { account }
- }
- return properties.flatMap(propertySummary => {
- const property = { ...propertySummary }
-
- const profiles = propertySummary.profiles || []
- if (profiles.length === 0) {
- return { account, property }
- }
- return profiles.map(profile => ({
- view: profile,
- property,
- account,
- }))
- })
- })
- .filter(filterFlattened)
- return { status: accountSummariesRequest.status, flattenedViews }
- }
- default:
- return { status: accountSummariesRequest.status }
- }
- }, [accountSummariesRequest, filterFlattened])
-}
-
-export default useFlattenedViews
diff --git a/src/components/Warning.tsx b/src/components/Warning.tsx
index 32e29f298..18ad014ae 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> = ({ 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 aa8e28f9f..a99dd6e64 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 d6695bfe6..513144bcb 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 7c7007956..ffe3a45e7 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 000000000..03f2531a4
--- /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 000000000..2f244ca24
--- /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 f7292a0f2..4cb3729bf 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 &&
-
- {column.attributes!.group}
-
-
- )
-}
-
-const columnFilterOptions = createFilterOptions
-
- {column.attributes!.uiName}
-
-
- {column.id}
-
-
-
-
- {segment.type === "CUSTOM"
- ? "Custom Segment"
- : segment.type === "DYNAMIC"
- ? "Dynamic Segment"
- : "Built In Segment"}
-
-
- )
-}
-
-const segmentFilterOptions = createFilterOptions
-
- {segment.name}
-
-
- {abbreviatedText}
-
-
-
-
- data-testid={TestID.AccountAutocomplete}
- blurOnSelect
- openOnFocus
- autoHighlight
- noOptionsText="You don't have any Google Analytics accounts."
- className={classes.formControl}
- loading={request.status === RequestStatus.InProgress}
- options={successful(request)?.accountSummaries || []}
- value={account || null}
- onChange={(_, a: AccountSummary | null) => {
- setAccountID(a?.id || undefined)
-
- if (autoFill) {
- // Update property ID based on new account.
- const firstWebProperty = a?.webProperties?.[0]
- setPropertyID(firstWebProperty?.id || undefined)
-
- // Update view ID based on new property if not onlyProperty.
- const firstView = firstWebProperty?.profiles?.[0]
- !props.onlyProperty && props.setViewID(firstView?.id || undefined)
- }
- }}
- getOptionSelected={(a, b) => a.id === b.id}
- getOptionLabel={account => account.name || ""}
- renderInput={params => (
-
- data-testid={TestID.PropertyAutocomplete}
- blurOnSelect
- openOnFocus
- autoHighlight
- className={classes.formControl}
- loading={request.status === RequestStatus.InProgress}
- options={successful(request)?.propertySummaries || []}
- noOptionsText={
- account === undefined
- ? "Select an account to show available properties."
- : "You don't have any properties for this account."
- }
- value={property || null}
- onChange={(_, p: WebPropertySummary | null) => {
- setPropertyID(p?.id || undefined)
-
- if (autoFill) {
- // Update view ID based on new property if not onlyProperty.
- const firstView = p?.profiles?.[0]
- !props.onlyProperty && props.setViewID(firstView?.id || undefined)
- }
- }}
- getOptionSelected={(a, b) => a.id === b.id}
- getOptionLabel={property => property.name || ""}
- renderInput={params => (
-
- data-testid={TestID.ViewAutocomplete}
- blurOnSelect
- openOnFocus
- autoHighlight
- className={classes.formControl}
- loading={request.status === RequestStatus.InProgress}
- options={successful(request)?.profileSummaries || []}
- noOptionsText={
- account === undefined
- ? "Select an account and property to show available views."
- : property === undefined
- ? "Select a property to show available views"
- : "You don't have any views for this property."
- }
- value={props.view || null}
- getOptionSelected={(a, b) => a.id === b.id}
- onChange={(_, v: ProfileSummary | null) => {
- props.setViewID(v?.id || undefined)
- }}
- getOptionLabel={view => view.name || ""}
- renderInput={params => (
-
- )
-}
-
-export default ViewSelector
diff --git a/src/components/ViewSelector/useAccountPropertyView.ts b/src/components/ViewSelector/useAccountPropertyView.ts
deleted file mode 100644
index a33f176a9..000000000
--- a/src/components/ViewSelector/useAccountPropertyView.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import { StorageKey } from "@/constants"
-import { useKeyedHydratedPersistantObject } from "@/hooks/useHydrated"
-import { Dispatch, RequestStatus } from "@/types"
-import { useCallback } from "react"
-import useFlattenedViews from "./useFlattenedViews"
-
-export type AccountSummary = gapi.client.analytics.AccountSummary
-export type WebPropertySummary = gapi.client.analytics.WebPropertySummary
-export type ProfileSummary = gapi.client.analytics.ProfileSummary
-
-export interface UAAccountPropertyView {
- account?: AccountSummary
- property?: WebPropertySummary
- view?: ProfileSummary
-}
-
-interface UAAccountPropertyViewSetters {
- setAccountID: Dispatch
-
- )
+
+ );
}
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 112ffd316..8116b345f 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 6ce407ff9..1cbeef95f 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 d6c8a0e00..0396f02f0 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 66bc6e2ae..defbfe48e 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 (