[MM-28064] Add telemetry in various places around cloud message banne…

…rs (#6763)

* Add telemetry for in-app purchase flow

* Fix spelling mistake in telemetry doc

* Fixes

* Add some telemetry, waiting for clarification

* Adding telemetry for various banners

* Move out of inline to proper function

components/admin_console/billing/billing_subscriptions.tsx

@@ -19,11 +19,17 @@ import {makeGetCategory} from 'mattermost-redux/selectors/entities/preferences';
 import {GlobalState} from 'types/store';
 import {getCloudContactUsLink, InquiryType} from 'selectors/cloud';
 
+import {trackEvent} from 'actions/telemetry_actions';
+
 import AlertBanner from 'components/alert_banner';
 import FormattedMarkdownMessage from 'components/formatted_markdown_message';
 import FormattedAdminHeader from 'components/widgets/admin_console/formatted_admin_header';
 
-import {Preferences, CloudBanners} from 'utils/constants';
+import {
+    Preferences,
+    CloudBanners,
+    TELEMETRY_CATEGORIES,
+} from 'utils/constants';
 
 import privateCloudImage from 'images/private-cloud-image.svg';
 import upgradeMattermostCloudImage from 'images/upgrade-mattermost-cloud-image.svg';
@@ -69,6 +75,10 @@ const BillingSubscriptions: React.FC<Props> = () => {
                 await dispatch(getStandardAnalytics());
             }());
         }
+
+        if (analytics && shouldShowInfoBanner()) {
+            trackEvent(TELEMETRY_CATEGORIES.CLOUD_ADMIN, 'bannerview_user_limit_warning');
+        }
     }, []);
 
     const shouldShowInfoBanner = (): boolean => {
@@ -84,6 +94,10 @@ const BillingSubscriptions: React.FC<Props> = () => {
     };
 
     const handleHide = async () => {
+        trackEvent(
+            TELEMETRY_CATEGORIES.CLOUD_ADMIN,
+            'click_close_banner_user_limit_warning',
+        );
         dispatch(savePreferences(currentUser.id, [
             {
                 category: Preferences.ADMIN_CLOUD_UPGRADE_PANEL,

components/announcement_bar/cloud_announcement_bar/user_limit_announcement_bar.tsx

@@ -10,6 +10,8 @@ import {AnalyticsRow} from 'mattermost-redux/types/admin';
 import {Subscription} from 'mattermost-redux/types/cloud';
 import {isEmpty} from 'lodash';
 
+import {trackEvent} from 'actions/telemetry_actions';
+
 import {t} from 'utils/i18n';
 import PurchaseModal from 'components/purchase_modal';
 
@@ -18,6 +20,7 @@ import {
     CloudBanners,
     AnnouncementBarTypes,
     ModalIdentifiers,
+    TELEMETRY_CATEGORIES,
 } from 'utils/constants';
 
 import AnnouncementBar from '../default_announcement_bar';
@@ -47,13 +50,31 @@ export default class UserLimitAnnouncementBar extends React.PureComponent<Props>
         if (isEmpty(this.props.subscription)) {
             await this.props.actions.getCloudSubscription();
         }
+
+        if (!isEmpty(this.props.subscription) && !isEmpty(this.props.analytics) && this.shouldShowBanner()) {
+            if (this.isDismissable()) {
+                trackEvent(
+                    TELEMETRY_CATEGORIES.CLOUD_ADMIN,
+                    'bannerview_user_limit_reached',
+                );
+            } else {
+                trackEvent(
+                    TELEMETRY_CATEGORIES.CLOUD_ADMIN,
+                    'bannerview_user_limit_exceeded',
+                );
+            }
+        }
     }
 
     handleButtonClick = () => {
         // Do nothing for now
     }
 
     handleClose = async () => {
+        trackEvent(
+            TELEMETRY_CATEGORIES.CLOUD_ADMIN,
+            'click_close_banner_user_limit_reached',
+        );
         await this.props.actions.savePreferences(this.props.currentUser.id, [{
             category: Preferences.CLOUD_UPGRADE_BANNER,
             user_id: this.props.currentUser.id,
@@ -89,6 +110,35 @@ export default class UserLimitAnnouncementBar extends React.PureComponent<Props>
         return true;
     }
 
+    isDismissable = () => {
+        const {userLimit, analytics} = this.props;
+        let dismissable = true;
+
+        // If the user limit is less than the current number of users, the banner is not dismissable
+        if (userLimit < analytics!.TOTAL_USERS) {
+            dismissable = false;
+        }
+        return dismissable;
+    }
+
+    showModal = () => {
+        if (this.isDismissable()) {
+            trackEvent(
+                TELEMETRY_CATEGORIES.CLOUD_ADMIN,
+                'click_upgrade_banner_user_limit_reached',
+            );
+        } else {
+            trackEvent(
+                TELEMETRY_CATEGORIES.CLOUD_ADMIN,
+                'click_upgrade_banner_user_limit_exceeded',
+            );
+        }
+        this.props.actions.openModal({
+            modalId: ModalIdentifiers.CLOUD_PURCHASE,
+            dialogType: PurchaseModal,
+        });
+    }
+
     render() {
         const {userLimit, analytics, preferences} = this.props;
 
@@ -107,24 +157,14 @@ export default class UserLimitAnnouncementBar extends React.PureComponent<Props>
             return null;
         }
 
-        let dismissable = true;
-
-        // If the user limit is less than the current number of users, the banner is not dismissable
-        if (userLimit < analytics!.TOTAL_USERS) {
-            dismissable = false;
-        }
+        const dismissable = this.isDismissable();
 
         return (
             <AnnouncementBar
                 type={dismissable ? AnnouncementBarTypes.ADVISOR : AnnouncementBarTypes.CRITICAL_LIGHT}
                 showCloseButton={dismissable}
                 handleClose={this.handleClose}
-                showModal={() =>
-                    this.props.actions.openModal({
-                        modalId: ModalIdentifiers.CLOUD_PURCHASE,
-                        dialogType: PurchaseModal,
-                    })
-                }
+                showModal={this.showModal}
                 modalButtonText={t('admin.billing.subscription.upgradeMattermostCloud.upgradeButton')}
                 modalButtonDefaultText={'Upgrade Mattermost Cloud'}
                 message={dismissable ? t('upgrade.cloud_banner_reached') : t('upgrade.cloud_banner_over')}

utils/constants.jsx

@@ -407,6 +407,7 @@ export const CloudBanners = {
 
 export const TELEMETRY_CATEGORIES = {
     CLOUD_PURCHASING: 'cloud_purchasing',
+    CLOUD_ADMIN: 'cloud_admin',
 };
 
 export const PostTypes = {