diff --git a/.circleci/config.yml b/.circleci/config.yml index 6651ea2..94997c2 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -115,7 +115,7 @@ workflows: context: [ qqq-maven-registry-credentials, kingsrook-slack, build-qqq-sample-app ] filters: branches: - ignore: /main/ + ignore: /(main|integration.*)/ tags: ignore: /(version|snapshot)-.*/ deploy: @@ -124,7 +124,7 @@ workflows: context: [ qqq-maven-registry-credentials, kingsrook-slack, build-qqq-sample-app ] filters: branches: - only: /main/ + only: /(main|integration.*)/ tags: only: /(version|snapshot)-.*/ diff --git a/package.json b/package.json index fa18e8e..339b4a0 100644 --- a/package.json +++ b/package.json @@ -6,7 +6,7 @@ "@auth0/auth0-react": "1.10.2", "@emotion/react": "11.7.1", "@emotion/styled": "11.6.0", - "@kingsrook/qqq-frontend-core": "1.0.94", + "@kingsrook/qqq-frontend-core": "1.0.96", "@mui/icons-material": "5.4.1", "@mui/material": "5.11.1", "@mui/styles": "5.11.1", @@ -42,6 +42,7 @@ "react-chartjs-2": "3.0.4", "react-cookie": "4.1.1", "react-dom": "18.0.0", + "react-ga4": "2.1.0", "react-github-btn": "1.2.1", "react-google-drive-picker": "^1.2.0", "react-markdown": "9.0.1", diff --git a/src/App.tsx b/src/App.tsx index 56484e6..6891b44 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -33,12 +33,8 @@ import CssBaseline from "@mui/material/CssBaseline"; import Icon from "@mui/material/Icon"; import {ThemeProvider} from "@mui/material/styles"; import {LicenseInfo} from "@mui/x-license-pro"; -import jwt_decode from "jwt-decode"; -import React, {JSXElementConstructor, Key, ReactElement, useEffect, useState,} from "react"; -import {useCookies} from "react-cookie"; -import {Navigate, Route, Routes, useLocation, useSearchParams,} from "react-router-dom"; -import {Md5} from "ts-md5/dist/md5"; import CommandMenu from "CommandMenu"; +import jwt_decode from "jwt-decode"; import QContext from "QContext"; import Sidenav from "qqq/components/horseshoe/sidenav/SideNav"; import theme from "qqq/components/legacy/Theme"; @@ -53,8 +49,13 @@ import EntityEdit from "qqq/pages/records/edit/RecordEdit"; import RecordQuery from "qqq/pages/records/query/RecordQuery"; import RecordDeveloperView from "qqq/pages/records/view/RecordDeveloperView"; import RecordView from "qqq/pages/records/view/RecordView"; +import GoogleAnalyticsUtils, {AnalyticsModel} from "qqq/utils/GoogleAnalyticsUtils"; import Client from "qqq/utils/qqq/Client"; import ProcessUtils from "qqq/utils/qqq/ProcessUtils"; +import React, {JSXElementConstructor, Key, ReactElement, useEffect, useState,} from "react"; +import {useCookies} from "react-cookie"; +import {Navigate, Route, Routes, useLocation, useSearchParams,} from "react-router-dom"; +import {Md5} from "ts-md5/dist/md5"; const qController = Client.getInstance(); @@ -160,7 +161,7 @@ export default function App() if (shouldStoreNewToken(accessToken, lsAccessToken)) { console.log("Sending accessToken to backend, requesting a sessionUUID..."); - const newSessionUuid = await qController.manageSession(accessToken, null); + const {uuid: newSessionUuid, values} = await qController.manageSession(accessToken, null); ///////////////////////////////////////////////////////////////////////////////////////////////////////////// // the request to the backend should send a header to set the cookie, so we don't need to do it ourselves. // @@ -168,6 +169,7 @@ export default function App() // setCookie(SESSION_UUID_COOKIE_NAME, newSessionUuid, {path: "/"}); localStorage.setItem("accessToken", accessToken); + localStorage.setItem("sessionValues", JSON.stringify(values)); console.log("Got new sessionUUID from backend, and stored new accessToken"); } else @@ -663,6 +665,18 @@ export default function App() const [keyboardHelpOpen, setKeyboardHelpOpen] = useState(false); const [helpHelpActive] = useState(queryParams.has("helpHelp")); + const [googleAnalyticsUtils] = useState(new GoogleAnalyticsUtils()); + + + /******************************************************************************* + ** + *******************************************************************************/ + function recordAnalytics(model: AnalyticsModel) + { + googleAnalyticsUtils.recordAnalytics(model) + } + + return ( appRoutes && ( @@ -682,6 +696,7 @@ export default function App() setTableProcesses: (tableProcesses: QProcessMetaData[]) => setTableProcesses(tableProcesses), setDotMenuOpen: (dotMenuOpent: boolean) => setDotMenuOpen(dotMenuOpent), setKeyboardHelpOpen: (keyboardHelpOpen: boolean) => setKeyboardHelpOpen(keyboardHelpOpen), + recordAnalytics: recordAnalytics, pathToLabelMap: pathToLabelMap, branding: branding }}> diff --git a/src/QContext.tsx b/src/QContext.tsx index 797c970..88db98d 100644 --- a/src/QContext.tsx +++ b/src/QContext.tsx @@ -22,6 +22,7 @@ import {QBrandingMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QBrandingMetaData"; import {QProcessMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QProcessMetaData"; import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QTableMetaData"; +import {AnalyticsModel} from "qqq/utils/GoogleAnalyticsUtils"; import {createContext} from "react"; interface QContext @@ -47,6 +48,11 @@ interface QContext tableProcesses?: QProcessMetaData[]; setTableProcesses?: (tableProcesses: QProcessMetaData[]) => void; + /////////////////////////////////////////// + // function to record an analytics event // + /////////////////////////////////////////// + recordAnalytics?: (model: AnalyticsModel) => void; + /////////////////////////////////// // constants - no setters needed // /////////////////////////////////// diff --git a/src/qqq/components/forms/EntityForm.tsx b/src/qqq/components/forms/EntityForm.tsx index 2d6cbc0..af83903 100644 --- a/src/qqq/components/forms/EntityForm.tsx +++ b/src/qqq/components/forms/EntityForm.tsx @@ -82,7 +82,7 @@ function EntityForm(props: Props): JSX.Element const qController = Client.getInstance(); const tableNameParam = useParams().tableName; const tableName = props.table === null ? tableNameParam : props.table.name; - const {accentColor} = useContext(QContext); + const {accentColor, recordAnalytics} = useContext(QContext); const [formTitle, setFormTitle] = useState(""); const [validations, setValidations] = useState({}); @@ -359,6 +359,7 @@ function EntityForm(props: Props): JSX.Element { const tableMetaData = await qController.loadTableMetaData(tableName); setTableMetaData(tableMetaData); + recordAnalytics({location: window.location, title: (props.isCopy ? "Copy" : props.id ? "Edit" : "New") + ": " + tableMetaData.label}); const metaData = await qController.loadMetaData(); setMetaData(metaData); @@ -389,6 +390,7 @@ function EntityForm(props: Props): JSX.Element { record = await qController.get(tableName, props.id); setRecord(record); + recordAnalytics({category: "tableEvents", action: props.isCopy ? "copy" : "edit", label: tableMetaData?.label + " / " + record?.recordLabel}); const titleVerb = props.isCopy ? "Copy" : "Edit"; setFormTitle(`${titleVerb} ${tableMetaData?.label}: ${record?.recordLabel}`); @@ -428,6 +430,7 @@ function EntityForm(props: Props): JSX.Element // else handle preparing to do an insert // /////////////////////////////////////////// setFormTitle(`Creating New ${tableMetaData?.label}`); + recordAnalytics({category: "tableEvents", action: "new", label: tableMetaData?.label}); if (!props.isModal) { @@ -757,6 +760,8 @@ function EntityForm(props: Props): JSX.Element if (props.id !== null && !props.isCopy) { + recordAnalytics({category: "tableEvents", action: "saveEdit", label: tableMetaData?.label}); + /////////////////////// // perform an update // /////////////////////// @@ -799,6 +804,8 @@ function EntityForm(props: Props): JSX.Element } else { + recordAnalytics({category: "tableEvents", action: props.isCopy ? "saveCopy" : "saveNew", label: tableMetaData?.label}); + ///////////////////////////////// // perform an insert // // todo - audit if it's a dupe // diff --git a/src/qqq/components/query/ExportMenuItem.tsx b/src/qqq/components/query/ExportMenuItem.tsx index f1a1004..19a251a 100644 --- a/src/qqq/components/query/ExportMenuItem.tsx +++ b/src/qqq/components/query/ExportMenuItem.tsx @@ -23,8 +23,9 @@ import {QTableMetaData} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QT import {QQueryFilter} from "@kingsrook/qqq-frontend-core/lib/model/query/QQueryFilter"; import MenuItem from "@mui/material/MenuItem"; import {GridColDef, GridExportMenuItemProps} from "@mui/x-data-grid-pro"; -import React from "react"; +import QContext from "QContext"; import ValueUtils from "qqq/utils/qqq/ValueUtils"; +import React, {useContext} from "react"; interface QExportMenuItemProps extends GridExportMenuItemProps<{}> { @@ -43,6 +44,10 @@ export default function ExportMenuItem(props: QExportMenuItemProps) { const {format, tableMetaData, totalRecords, columnsModel, columnVisibilityModel, queryFilter, hideMenu} = props; + const {recordAnalytics} = useContext(QContext); + + recordAnalytics({category: "tableEvents", action: "export", label: tableMetaData.label}); + return ( { - // setPageHeader(app.label); setPageHeader(null); + recordAnalytics({location: window.location, title: "App: " + app.label}); + recordAnalytics({category: "appEvents", action: "loadAppScreen", label: app.label}); if (!qInstance) { diff --git a/src/qqq/pages/processes/ProcessRun.tsx b/src/qqq/pages/processes/ProcessRun.tsx index 31e993e..82b8c5f 100644 --- a/src/qqq/pages/processes/ProcessRun.tsx +++ b/src/qqq/pages/processes/ProcessRun.tsx @@ -124,7 +124,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is const [showErrorDetail, setShowErrorDetail] = useState(false); const [showFullHelpText, setShowFullHelpText] = useState(false); - const {pageHeader, setPageHeader} = useContext(QContext); + const {pageHeader, recordAnalytics, setPageHeader} = useContext(QContext); ////////////////////////////////////////////////////////////////////////////////////////////////////////////// // for setting the processError state - call this function, which will also set the isUserFacingError state // @@ -1146,6 +1146,10 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is const processMetaData = await Client.getInstance().loadProcessMetaData(processName); setProcessMetaData(processMetaData); setSteps(processMetaData.frontendSteps); + + recordAnalytics({location: window.location, title: "Process: " + processMetaData?.label}); + recordAnalytics({category: "processEvents", action: "startProcess", label: processMetaData?.label}); + if (processMetaData.tableName && !tableMetaData) { try @@ -1251,6 +1255,8 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is setTimeout(async () => { + recordAnalytics({category: "processEvents", action: "processStep", label: activeStep.label}); + const processResponse = await Client.getInstance().processStep( processName, processUUID, diff --git a/src/qqq/pages/records/query/RecordQuery.tsx b/src/qqq/pages/records/query/RecordQuery.tsx index 80bf1e1..5bcedfe 100644 --- a/src/qqq/pages/records/query/RecordQuery.tsx +++ b/src/qqq/pages/records/query/RecordQuery.tsx @@ -338,7 +338,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element ///////////////////////////// // page context references // ///////////////////////////// - const {accentColor, accentColorLight, setPageHeader, dotMenuOpen, keyboardHelpOpen} = useContext(QContext); + const {accentColor, accentColorLight, setPageHeader, recordAnalytics, dotMenuOpen, keyboardHelpOpen} = useContext(QContext); ////////////////////////////////////////////////////////////////// // we use our own header - so clear out the context page header // @@ -610,25 +610,25 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element if (validType && !dotMenuOpen && !keyboardHelpOpen && !activeModalProcess) { - if (!e.metaKey && e.key === "n" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission) + if (!e.metaKey && !e.ctrlKey && e.key === "n" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission) { e.preventDefault(); navigate(`${metaData?.getTablePathByName(tableName)}/create`); } - else if (!e.metaKey && e.key === "r") + else if (!e.metaKey && !e.ctrlKey && e.key === "r") { e.preventDefault(); updateTable("'r' keyboard event"); } /* // disable until we add a ... ref down to let us programmatically open Columns button - else if (! e.metaKey && e.key === "c") + else if (! e.metaKey && !e.ctrlKey && e.key === "c") { e.preventDefault() gridApiRef.current.showPreferences(GridPreferencePanelsValue.columns) } */ - else if (!e.metaKey && e.key === "f") + else if (!e.metaKey && !e.ctrlKey && e.key === "f") { e.preventDefault(); @@ -875,6 +875,8 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element return; } + recordAnalytics({category: "tableEvents", action: "query", label: tableMetaData.label}); + console.log(`In updateTable for ${reason} ${JSON.stringify(queryFilter)}`); setLoading(true); setRows([]); @@ -1642,6 +1644,8 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element { if (selectedSavedViewId != null) { + recordAnalytics({category: "tableEvents", action: "activateSavedView", label: tableMetaData.label}); + ////////////////////////////////////////////// // fetch, then activate the selected filter // ////////////////////////////////////////////// @@ -1657,6 +1661,7 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element ///////////////////////////////// // this is 'new view' - right? // ///////////////////////////////// + recordAnalytics({category: "tableEvents", action: "activateNewView", label: tableMetaData.label}); ////////////////////////////// // wipe away the saved view // @@ -2327,6 +2332,8 @@ function RecordQuery({table, launchProcess}: Props): JSX.Element setTableMetaData(tableMetaData); setTableLabel(tableMetaData.label); + recordAnalytics({location: window.location, title: "Query: " + tableMetaData.label}); + setTableProcesses(ProcessUtils.getProcessesForTable(metaData, tableName)); // these are the ones to show in the dropdown setAllTableProcesses(ProcessUtils.getProcessesForTable(metaData, tableName, true)); // these include hidden ones (e.g., to find the bulks) diff --git a/src/qqq/pages/records/view/RecordDeveloperView.tsx b/src/qqq/pages/records/view/RecordDeveloperView.tsx index 470d237..11e13a6 100644 --- a/src/qqq/pages/records/view/RecordDeveloperView.tsx +++ b/src/qqq/pages/records/view/RecordDeveloperView.tsx @@ -69,13 +69,9 @@ function RecordDeveloperView({table}: Props): JSX.Element const [associatedScripts, setAssociatedScripts] = useState([] as any[]); const [notFoundMessage, setNotFoundMessage] = useState(null); - const [selectedTabs, setSelectedTabs] = useState({} as any); - const [viewingRevisions, setViewingRevisions] = useState({} as any); - const [scriptLogs, setScriptLogs] = useState({} as any); - const [alertText, setAlertText] = useState(null as string); - const {setPageHeader} = useContext(QContext); + const {setPageHeader, recordAnalytics} = useContext(QContext); const [, forceUpdate] = useReducer((x) => x + 1, 0); if (!asyncLoadInited) @@ -90,6 +86,8 @@ function RecordDeveloperView({table}: Props): JSX.Element const tableMetaData = await qController.loadTableMetaData(tableName); setTableMetaData(tableMetaData); + recordAnalytics({location: window.location, title: "Developer Mode: " + tableMetaData.label}); + ////////////////////////////// // load top-level meta-data // ////////////////////////////// diff --git a/src/qqq/pages/records/view/RecordView.tsx b/src/qqq/pages/records/view/RecordView.tsx index c58c295..e08a890 100644 --- a/src/qqq/pages/records/view/RecordView.tsx +++ b/src/qqq/pages/records/view/RecordView.tsx @@ -121,7 +121,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element const openActionsMenu = (event: any) => setActionsMenu(event.currentTarget); const closeActionsMenu = () => setActionsMenu(null); - const {accentColor, setPageHeader, tableMetaData, setTableMetaData, tableProcesses, setTableProcesses, dotMenuOpen, keyboardHelpOpen, helpHelpActive} = useContext(QContext); + const {accentColor, setPageHeader, tableMetaData, setTableMetaData, tableProcesses, setTableProcesses, dotMenuOpen, keyboardHelpOpen, helpHelpActive, recordAnalytics} = useContext(QContext); if (localStorage.getItem(tableVariantLocalStorageKey)) { @@ -164,27 +164,27 @@ function RecordView({table, launchProcess}: Props): JSX.Element if (validType && !dotMenuOpen && !keyboardHelpOpen && !showAudit && !showEditChildForm) { - if (!e.metaKey && e.key === "n" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission) + if (!e.metaKey && !e.ctrlKey && e.key === "n" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission) { e.preventDefault(); gotoCreate(); } - else if (!e.metaKey && e.key === "e" && table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission) + else if (!e.metaKey && !e.ctrlKey && e.key === "e" && table.capabilities.has(Capability.TABLE_UPDATE) && table.editPermission) { e.preventDefault(); navigate("edit"); } - else if (!e.metaKey && e.key === "c" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission) + else if (!e.metaKey && !e.ctrlKey && e.key === "c" && table.capabilities.has(Capability.TABLE_INSERT) && table.insertPermission) { e.preventDefault(); navigate("copy"); } - else if (!e.metaKey && e.key === "d" && table.capabilities.has(Capability.TABLE_DELETE) && table.deletePermission) + else if (!e.metaKey && !e.ctrlKey && e.key === "d" && table.capabilities.has(Capability.TABLE_DELETE) && table.deletePermission) { e.preventDefault(); handleClickDeleteButton(); } - else if (!e.metaKey && e.key === "a" && metaData && metaData.tables.has("audit")) + else if (!e.metaKey && !e.ctrlKey && e.key === "a" && metaData && metaData.tables.has("audit")) { e.preventDefault(); navigate("#audit"); @@ -384,6 +384,8 @@ function RecordView({table, launchProcess}: Props): JSX.Element const tableMetaData = await qController.loadTableMetaData(tableName); setTableMetaData(tableMetaData); + recordAnalytics({location: window.location, title: "View: " + tableMetaData.label}); + ////////////////////////////////////////////////////////////////// // load top-level meta-data (e.g., to find processes for table) // ////////////////////////////////////////////////////////////////// @@ -430,6 +432,7 @@ function RecordView({table, launchProcess}: Props): JSX.Element { record = await qController.get(tableName, id, tableVariant, null, queryJoins); setRecord(record); + recordAnalytics({category: "tableEvents", action: "view", label: tableMetaData?.label + " / " + record?.recordLabel}); } catch (e) { @@ -631,6 +634,8 @@ function RecordView({table, launchProcess}: Props): JSX.Element event?.preventDefault(); (async () => { + recordAnalytics({category: "tableEvents", action: "delete", label: tableMetaData?.label + " / " + record?.recordLabel}); + await qController.delete(tableName, id) .then(() => { diff --git a/src/qqq/utils/GoogleAnalyticsUtils.ts b/src/qqq/utils/GoogleAnalyticsUtils.ts new file mode 100644 index 0000000..bbcc6e9 --- /dev/null +++ b/src/qqq/utils/GoogleAnalyticsUtils.ts @@ -0,0 +1,143 @@ +/* + * QQQ - Low-code Application Framework for Engineers. + * Copyright (C) 2021-2024. Kingsrook, LLC + * 651 N Broad St Ste 205 # 6917 | Middletown DE 19709 | United States + * contact@kingsrook.com + * https://github.com/Kingsrook/ + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + */ + +import {QInstance} from "@kingsrook/qqq-frontend-core/lib/model/metaData/QInstance"; +import Client from "qqq/utils/qqq/Client"; +import ReactGA from "react-ga4"; + + +export interface PageView +{ + location: Location; + title: string; +} + +export interface UserEvent +{ + action: string; + category: string; + label?: string; +} + +export type AnalyticsModel = PageView | UserEvent; + +const qController = Client.getInstance(); + +/******************************************************************************* + ** Utilities for working with Google Analytics (through react-ga4)^ + *******************************************************************************/ +export default class GoogleAnalyticsUtils +{ + private metaData: QInstance = null; + private active: boolean = false; + + + /******************************************************************************* + ** + *******************************************************************************/ + constructor() + { + } + + + /******************************************************************************* + ** + *******************************************************************************/ + private send = (model: AnalyticsModel) => + { + if(!this.active) + { + return; + } + + if(model.hasOwnProperty("location")) + { + const pageView = model as PageView; + ReactGA.send({hitType: "pageview", page: pageView.location.pathname + pageView.location.search, title: pageView.title}); + } + else if(model.hasOwnProperty("action") || model.hasOwnProperty("category") || model.hasOwnProperty("label")) + { + const userEvent = model as UserEvent; + ReactGA.event({action: userEvent.action, category: userEvent.category, label: userEvent.label}) + } + else + { + console.log("Unrecognizable analytics model", model); + } + } + + + /******************************************************************************* + ** + *******************************************************************************/ + private setup = async (): Promise => + { + this.metaData = await qController.loadMetaData(); + + let sessionValues: {[key: string]: any} = null; + try + { + sessionValues = JSON.parse(localStorage.getItem("sessionValues")); + } + catch(e) + { + console.log("Error reading session values from localStorage: " + e); + } + + if (this.metaData.environmentValues.get("GOOGLE_ANALYTICS_ENABLED") == "true" && this.metaData.environmentValues.get("GOOGLE_ANALYTICS_TRACKING_ID")) + { + this.active = true; + + if(sessionValues && sessionValues["googleAnalyticsValues"]) + { + ReactGA.gtag("set", "user_properties", sessionValues["googleAnalyticsValues"]); + } + + ReactGA.initialize(this.metaData.environmentValues.get("GOOGLE_ANALYTICS_TRACKING_ID"), + { + gaOptions: {}, + gtagOptions: {} + }); + } + else + { + this.active = false; + } + } + + + /******************************************************************************* + ** + *******************************************************************************/ + public recordAnalytics = (model: AnalyticsModel) => + { + if(this.metaData == null) + { + (async () => + { + await this.setup(); + })() + } + + this.send(model); + } + +} \ No newline at end of file