From ee6f8b6cd97405ee2feda079ad3ec81e4f7bf301 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Agn=C3=A8s=20Toulet?= <35176601+AgnesToulet@users.noreply.github.com> Date: Wed, 9 Feb 2022 11:18:27 +0100 Subject: [PATCH] Feature Highlights: add RudderStack events (#45099) * add RS events for PRO badge * part 2 * fix team sync events * clean up ProBadge --- .../app/core/components/Upgrade/ProBadge.tsx | 12 +++++------ .../core/components/Upgrade/UpgradeModal.tsx | 12 +++++++++-- .../features/datasources/state/navModel.ts | 20 +++++++++++-------- public/app/features/teams/TeamPages.tsx | 15 +++++++++++--- public/app/features/teams/state/navModel.ts | 18 ++++++++++------- 5 files changed, 51 insertions(+), 26 deletions(-) diff --git a/public/app/core/components/Upgrade/ProBadge.tsx b/public/app/core/components/Upgrade/ProBadge.tsx index b8b3ede8c8f..eb839467deb 100644 --- a/public/app/core/components/Upgrade/ProBadge.tsx +++ b/public/app/core/components/Upgrade/ProBadge.tsx @@ -2,21 +2,21 @@ import React, { HTMLAttributes, useEffect } from 'react'; import { css, cx } from '@emotion/css'; import { useStyles2 } from '@grafana/ui'; import { GrafanaTheme2 } from '@grafana/data'; +import { reportExperimentView } from '@grafana/runtime'; export interface Props extends HTMLAttributes { text?: string; - /** Function to call when component initializes, e.g. event trackers */ - onLoad?: (...args: any[]) => void; + experimentId?: string; } -export const ProBadge = ({ text = 'PRO', className, onLoad, ...htmlProps }: Props) => { +export const ProBadge = ({ text = 'PRO', className, experimentId, ...htmlProps }: Props) => { const styles = useStyles2(getStyles); useEffect(() => { - if (onLoad) { - onLoad(); + if (experimentId) { + reportExperimentView(experimentId, 'test', ''); } - }, [onLoad]); + }, [experimentId]); return ( diff --git a/public/app/core/components/Upgrade/UpgradeModal.tsx b/public/app/core/components/Upgrade/UpgradeModal.tsx index 55a740c5e63..40951c7aa67 100644 --- a/public/app/core/components/Upgrade/UpgradeModal.tsx +++ b/public/app/core/components/Upgrade/UpgradeModal.tsx @@ -1,5 +1,6 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { Modal } from '@grafana/ui'; +import { reportExperimentView } from '@grafana/runtime'; import { UpgradeBox } from './UpgradeBox'; export interface Props { @@ -7,9 +8,16 @@ export interface Props { text: string; isOpen?: boolean; onDismiss?: () => void; + experimentId?: string; } -export const UpgradeModal = ({ title, text, isOpen, onDismiss }: Props) => { +export const UpgradeModal = ({ title, text, isOpen, onDismiss, experimentId }: Props) => { + useEffect(() => { + if (experimentId) { + reportExperimentView(experimentId, 'test', ''); + } + }, [experimentId]); + return ( diff --git a/public/app/features/datasources/state/navModel.ts b/public/app/features/datasources/state/navModel.ts index 4b6e635ed6e..256ccd9e6c9 100644 --- a/public/app/features/datasources/state/navModel.ts +++ b/public/app/features/datasources/state/navModel.ts @@ -6,6 +6,8 @@ import { AccessControlAction } from 'app/types'; import { ProBadge } from 'app/core/components/Upgrade/ProBadge'; import { GenericDataSourcePlugin } from '../settings/PluginSettings'; +const loadingDSType = 'Loading'; + export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDataSourcePlugin): NavModelItem { const pluginMeta = plugin.meta; const highlightsEnabled = config.featureToggles.featureHighlights; @@ -49,6 +51,8 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat }); } + const isLoadingNav = dataSource.type === loadingDSType; + const dsPermissions = { active: false, icon: 'lock', @@ -61,11 +65,11 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat if (contextSrv.hasPermission(AccessControlAction.DataSourcesPermissionsRead)) { navModel.children!.push(dsPermissions); } - } else if (highlightsEnabled) { + } else if (highlightsEnabled && !isLoadingNav) { navModel.children!.push({ ...dsPermissions, url: dsPermissions.url + '/upgrade', - tabSuffix: ProBadge, + tabSuffix: () => ProBadge({ experimentId: 'feature-highlights-data-source-permissions-badge' }), }); } @@ -79,11 +83,11 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat if (featureEnabled('analytics')) { navModel.children!.push(analytics); - } else if (highlightsEnabled) { + } else if (highlightsEnabled && !isLoadingNav) { navModel.children!.push({ ...analytics, url: analytics.url + '/upgrade', - tabSuffix: ProBadge, + tabSuffix: () => ProBadge({ experimentId: 'feature-highlights-data-source-insights-badge' }), }); } @@ -98,11 +102,11 @@ export function buildNavModel(dataSource: DataSourceSettings, plugin: GenericDat if (featureEnabled('caching')) { navModel.children!.push(caching); - } else if (highlightsEnabled) { + } else if (highlightsEnabled && !isLoadingNav) { navModel.children!.push({ ...caching, url: caching.url + '/upgrade', - tabSuffix: ProBadge, + tabSuffix: () => ProBadge({ experimentId: 'feature-highlights-data-source-caching-badge' }), }); } @@ -143,8 +147,8 @@ export function getDataSourceLoadingNav(pageName: string): NavModel { orgId: 1, password: '', readOnly: false, - type: 'Loading', - typeName: 'Loading', + type: loadingDSType, + typeName: loadingDSType, typeLogoUrl: 'public/img/icn-datasource.svg', url: '', user: '', diff --git a/public/app/features/teams/TeamPages.tsx b/public/app/features/teams/TeamPages.tsx index 65430e5e898..7da89e296be 100644 --- a/public/app/features/teams/TeamPages.tsx +++ b/public/app/features/teams/TeamPages.tsx @@ -14,7 +14,7 @@ import { getTeamLoadingNav } from './state/navModel'; import { getNavModel } from 'app/core/selectors/navModel'; import { contextSrv } from 'app/core/services/context_srv'; import { NavModel } from '@grafana/data'; -import { featureEnabled } from '@grafana/runtime'; +import { featureEnabled, reportExperimentView } from '@grafana/runtime'; import { GrafanaRouteComponentProps } from 'app/core/navigation/types'; import { UpgradeBox } from 'app/core/components/Upgrade/UpgradeBox'; @@ -83,6 +83,13 @@ export class TeamPages extends PureComponent { async componentDidMount() { await this.fetchTeam(); + + const { isSyncEnabled } = this.state; + const currentPage = this.getCurrentPage(); + + if (currentPage === PageTypes.GroupSync && !isSyncEnabled && config.featureToggles.featureHighlights) { + reportExperimentView('feature-highlights-team-sync', 'test', ''); + } } async fetchTeam() { @@ -162,8 +169,10 @@ export class TeamPages extends PureComponent { case PageTypes.Settings: return canReadTeam && ; case PageTypes.GroupSync: - if (canReadTeamPermissions && isSyncEnabled) { - return ; + if (isSyncEnabled) { + if (canReadTeamPermissions) { + return ; + } } else if (config.featureToggles.featureHighlights) { return ( ProBadge({ experimentId: isLoadingTeam ? '' : 'feature-highlights-team-sync-badge' }), + }); } return navModel;