Wire up more Posthog tracking (#7689)

This commit is contained in:
Michael Telatynski 2022-02-09 14:25:58 +00:00 committed by GitHub
parent 254dbeeccb
commit 5620b83d34
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 221 additions and 77 deletions

View file

@ -24,6 +24,7 @@ import { _t } from '../../languageHandler';
import AutoHideScrollbar from './AutoHideScrollbar';
import { replaceableComponent } from "../../utils/replaceableComponent";
import AccessibleButton from "../views/elements/AccessibleButton";
import { PosthogScreenTracker, ScreenName } from "../../PosthogTrackers";
/**
* Represents a tab for the TabbedView.
@ -35,9 +36,15 @@ export class Tab {
* @param {string} label The untranslated tab label.
* @param {string} icon The class for the tab icon. This should be a simple mask.
* @param {React.ReactNode} body The JSX for the tab container.
* @param {string} screenName The screen name to report to Posthog.
*/
constructor(public id: string, public label: string, public icon: string, public body: React.ReactNode) {
}
constructor(
public readonly id: string,
public readonly label: string,
public readonly icon: string,
public readonly body: React.ReactNode,
public readonly screenName?: ScreenName,
) {}
}
export enum TabLocation {
@ -50,6 +57,7 @@ interface IProps {
initialTabId?: string;
tabLocation: TabLocation;
onChange?: (tabId: string) => void;
screenName?: ScreenName;
}
interface IState {
@ -132,7 +140,8 @@ export default class TabbedView extends React.Component<IProps, IState> {
public render(): React.ReactNode {
const labels = this.props.tabs.map(tab => this.renderTabLabel(tab));
const panel = this.renderTabPanel(this.props.tabs[this.getActiveTabIndex()]);
const tab = this.props.tabs[this.getActiveTabIndex()];
const panel = this.renderTabPanel(tab);
const tabbedViewClasses = classNames({
'mx_TabbedView': true,
@ -142,6 +151,7 @@ export default class TabbedView extends React.Component<IProps, IState> {
return (
<div className={tabbedViewClasses}>
<PosthogScreenTracker screenName={tab?.screenName ?? this.props.screenName} />
<div className="mx_TabbedView_tabLabels">
{ labels }
</div>