Wire up more posthog properties and interactions (#7763)

src/components/structures/UserMenu.tsx

@@ -60,6 +60,7 @@ import { replaceableComponent } from "../../utils/replaceableComponent";
 import MatrixClientContext from "../../contexts/MatrixClientContext";
 import { SettingUpdatedPayload } from "../../dispatcher/payloads/SettingUpdatedPayload";
 import UserIdentifierCustomisations from "../../customisations/UserIdentifier";
+import PosthogTrackers from "../../PosthogTrackers";
 
 const CustomStatusSection = () => {
     const cli = useContext(MatrixClientContext);
@@ -298,6 +299,8 @@ export default class UserMenu extends React.Component<IProps, IState> {
         ev.preventDefault();
         ev.stopPropagation();
 
+        PosthogTrackers.trackInteraction("WebUserMenuThemeToggleButton", ev);
+
         // Disable system theme matching if the user hits this button
         SettingsStore.setValue("use_system_theme", null, SettingLevel.DEVICE, false);
 

src/components/views/settings/ThemeChoicePanel.tsx

@@ -30,6 +30,7 @@ import Field from '../elements/Field';
 import StyledRadioGroup from "../elements/StyledRadioGroup";
 import { SettingLevel } from "../../../settings/SettingLevel";
 import { replaceableComponent } from "../../../utils/replaceableComponent";
+import PosthogTrackers from "../../../PosthogTrackers";
 
 interface IProps {
 }
@@ -99,6 +100,8 @@ export default class ThemeChoicePanel extends React.Component<IProps, IState> {
     private onThemeChange = (newTheme: string): void => {
         if (this.state.theme === newTheme) return;
 
+        PosthogTrackers.trackInteraction("WebSettingsAppearanceTabThemeSelector");
+
         // doing getValue in the .catch will still return the value we failed to set,
         // so remember what the value was before we tried to set it so we can revert
         const oldTheme: string = SettingsStore.getValue('theme');

src/components/views/settings/tabs/user/SidebarUserSettingsTab.tsx

@@ -22,13 +22,25 @@ import { SettingLevel } from "../../../../../settings/SettingLevel";
 import StyledCheckbox from "../../../elements/StyledCheckbox";
 import { useSettingValue } from "../../../../../hooks/useSettings";
 import { MetaSpace } from "../../../../../stores/spaces";
+import PosthogTrackers from "../../../../../PosthogTrackers";
 
-export const onMetaSpaceChangeFactory = (metaSpace: MetaSpace) => (e: ChangeEvent<HTMLInputElement>) => {
+type InteractionName = "WebSettingsSidebarTabSpacesCheckbox" | "WebQuickSettingsPinToSidebarCheckbox";
+
+export const onMetaSpaceChangeFactory = (
+    metaSpace: MetaSpace,
+    interactionName: InteractionName,
+) => (e: ChangeEvent<HTMLInputElement>) => {
     const currentValue = SettingsStore.getValue("Spaces.enabledMetaSpaces");
     SettingsStore.setValue("Spaces.enabledMetaSpaces", null, SettingLevel.ACCOUNT, {
         ...currentValue,
         [metaSpace]: e.target.checked,
     });
+
+    PosthogTrackers.trackInteraction(
+        interactionName,
+        e,
+        [MetaSpace.Home, null, MetaSpace.Favourites, MetaSpace.People, MetaSpace.Orphans].indexOf(metaSpace),
+    );
 };
 
 const SidebarUserSettingsTab = () => {
@@ -53,7 +65,7 @@ const SidebarUserSettingsTab = () => {
 
                 <StyledCheckbox
                     checked={!!homeEnabled}
-                    onChange={onMetaSpaceChangeFactory(MetaSpace.Home)}
+                    onChange={onMetaSpaceChangeFactory(MetaSpace.Home, "WebSettingsSidebarTabSpacesCheckbox")}
                     className="mx_SidebarUserSettingsTab_homeCheckbox"
                     disabled={homeEnabled}
                 >
@@ -73,6 +85,7 @@ const SidebarUserSettingsTab = () => {
                             SettingLevel.ACCOUNT,
                             e.target.checked,
                         );
+                        PosthogTrackers.trackInteraction("WebSettingsSidebarTabSpacesCheckbox", e, 1);
                     }}
                     className="mx_SidebarUserSettingsTab_homeAllRoomsCheckbox"
                 >
@@ -84,7 +97,7 @@ const SidebarUserSettingsTab = () => {
 
                 <StyledCheckbox
                     checked={!!favouritesEnabled}
-                    onChange={onMetaSpaceChangeFactory(MetaSpace.Favourites)}
+                    onChange={onMetaSpaceChangeFactory(MetaSpace.Favourites, "WebSettingsSidebarTabSpacesCheckbox")}
                     className="mx_SidebarUserSettingsTab_favouritesCheckbox"
                 >
                     { _t("Favourites") }
@@ -95,7 +108,7 @@ const SidebarUserSettingsTab = () => {
 
                 <StyledCheckbox
                     checked={!!peopleEnabled}
-                    onChange={onMetaSpaceChangeFactory(MetaSpace.People)}
+                    onChange={onMetaSpaceChangeFactory(MetaSpace.People, "WebSettingsSidebarTabSpacesCheckbox")}
                     className="mx_SidebarUserSettingsTab_peopleCheckbox"
                 >
                     { _t("People") }
@@ -106,7 +119,7 @@ const SidebarUserSettingsTab = () => {
 
                 <StyledCheckbox
                     checked={!!orphansEnabled}
-                    onChange={onMetaSpaceChangeFactory(MetaSpace.Orphans)}
+                    onChange={onMetaSpaceChangeFactory(MetaSpace.Orphans, "WebSettingsSidebarTabSpacesCheckbox")}
                     className="mx_SidebarUserSettingsTab_orphansCheckbox"
                 >
                     { _t("Rooms outside of a space") }

src/components/views/spaces/QuickSettingsButton.tsx

@@ -35,6 +35,7 @@ import SettingsStore from "../../../settings/SettingsStore";
 import { SettingLevel } from "../../../settings/SettingLevel";
 import dis from "../../../dispatcher/dispatcher";
 import { RecheckThemePayload } from "../../../dispatcher/payloads/RecheckThemePayload";
+import PosthogTrackers from "../../../PosthogTrackers";
 
 const QuickSettingsButton = ({ isPanelCollapsed = false }) => {
     const orderedThemes = useMemo(getOrderedThemes, []);
@@ -75,14 +76,14 @@ const QuickSettingsButton = ({ isPanelCollapsed = false }) => {
             <StyledCheckbox
                 className="mx_QuickSettingsButton_favouritesCheckbox"
                 checked={!!favouritesEnabled}
-                onChange={onMetaSpaceChangeFactory(MetaSpace.Favourites)}
+                onChange={onMetaSpaceChangeFactory(MetaSpace.Favourites, "WebQuickSettingsPinToSidebarCheckbox")}
             >
                 { _t("Favourites") }
             </StyledCheckbox>
             <StyledCheckbox
                 className="mx_QuickSettingsButton_peopleCheckbox"
                 checked={!!peopleEnabled}
-                onChange={onMetaSpaceChangeFactory(MetaSpace.People)}
+                onChange={onMetaSpaceChangeFactory(MetaSpace.People, "WebQuickSettingsPinToSidebarCheckbox")}
             >
                 { _t("People") }
             </StyledCheckbox>
@@ -104,6 +105,8 @@ const QuickSettingsButton = ({ isPanelCollapsed = false }) => {
                 <Dropdown
                     id="mx_QuickSettingsButton_themePickerDropdown"
                     onOptionChange={async (newTheme: string) => {
+                        PosthogTrackers.trackInteraction("WebQuickSettingsThemeDropdown");
+
                         // XXX: mostly copied from ThemeChoicePanel
                         // doing getValue in the .catch will still return the value we failed to set,
                         // so remember what the value was before we tried to set it so we can revert