Feature Highlights: add RudderStack events (#45099)

* add RS events for PRO badge

* part 2

* fix team sync events

* clean up ProBadge

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<HTMLSpanElement> {
   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 (
     <span className={cx(styles.badge, className)} {...htmlProps}>

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 (
     <Modal title={title} isOpen={isOpen} onDismiss={onDismiss}>
       <UpgradeBox text={text} />

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: '',

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<Props, State> {
 
   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<Props, State> {
       case PageTypes.Settings:
         return canReadTeam && <TeamSettings team={team!} />;
       case PageTypes.GroupSync:
-        if (canReadTeamPermissions && isSyncEnabled) {
-          return <TeamGroupSync isReadOnly={!canWriteTeamPermissions} />;
+        if (isSyncEnabled) {
+          if (canReadTeamPermissions) {
+            return <TeamGroupSync isReadOnly={!canWriteTeamPermissions} />;
+          }
         } else if (config.featureToggles.featureHighlights) {
           return (
             <UpgradeBox

public/app/features/teams/state/navModel.ts

@@ -2,8 +2,8 @@ import { AccessControlAction, Team, TeamPermissionLevel } from 'app/types';
 import { featureEnabled } from '@grafana/runtime';
 import { NavModelItem, NavModel } from '@grafana/data';
 import config from 'app/core/config';
-import { ProBadge } from 'app/core/components/Upgrade/ProBadge';
 import { contextSrv } from 'app/core/services/context_srv';
+import { ProBadge } from 'app/core/components/Upgrade/ProBadge';
 
 const loadingTeam = {
   avatarUrl: 'public/img/user_profile.png',
@@ -59,16 +59,20 @@ export function buildNavModel(team: Team): NavModelItem {
     url: `org/teams/edit/${team.id}/groupsync`,
   };
 
+  const isLoadingTeam = team === loadingTeam;
+
   // With both Legacy and FGAC the tab is protected being featureEnabled
   // While team is loading we leave the teamsync tab
   // With FGAC the External Group Sync tab is available when user has ActionTeamsPermissionsRead for this team
-  if (
-    featureEnabled('teamsync') &&
-    (team === loadingTeam || contextSrv.hasPermissionInMetadata(AccessControlAction.ActionTeamsPermissionsRead, team))
-  ) {
-    navModel.children!.push(teamGroupSync);
+  if (featureEnabled('teamsync')) {
+    if (isLoadingTeam || contextSrv.hasPermissionInMetadata(AccessControlAction.ActionTeamsPermissionsRead, team)) {
+      navModel.children!.push(teamGroupSync);
+    }
   } else if (config.featureToggles.featureHighlights) {
-    navModel.children!.push({ ...teamGroupSync, tabSuffix: ProBadge });
+    navModel.children!.push({
+      ...teamGroupSync,
+      tabSuffix: () => ProBadge({ experimentId: isLoadingTeam ? '' : 'feature-highlights-team-sync-badge' }),
+    });
   }
 
   return navModel;