add telemetry event tracking for various button clicks.

webapp/channels/src/components/admin_console/license_settings/enterprise_edition/enterprise_edition_left_panel.tsx

@@ -13,7 +13,7 @@ import {ClientLicense} from '@mattermost/types/config';
 import {Client4} from 'mattermost-redux/client';
 
 import {getRemainingDaysFromFutureTimestamp, toTitleCase} from 'utils/utils';
-import {FileTypes} from 'utils/constants';
+import {FileTypes, TELEMETRY_CATEGORIES} from 'utils/constants';
 import {getSkuDisplayName} from 'utils/subscription';
 import {calculateOverageUserActivated} from 'utils/overage_team';
 import {getConfig} from 'mattermost-redux/selectors/entities/admin';
@@ -24,6 +24,7 @@ import useCanSelfHostedExpand from 'components/common/hooks/useCanSelfHostedExpa
 import {getExpandSeatsLink} from 'selectors/cloud';
 import useControlSelfHostedExpansionModal from 'components/common/hooks/useControlSelfHostedExpansionModal';
 import {useQuery} from 'utils/http_utils';
+import {trackEvent} from 'actions/telemetry_actions';
 
 const DAYS_UNTIL_EXPIRY_WARNING_DISPLAY_THRESHOLD = 30;
 const DAYS_UNTIL_EXPIRY_DANGER_DISPLAY_THRESHOLD = 5;
@@ -100,6 +101,7 @@ const EnterpriseEditionLeftPanel = ({
     );
 
     const handleClickAddSeats = () => {
+        trackEvent(TELEMETRY_CATEGORIES.SELF_HOSTED_EXPANSION, 'add_seats_clicked');
         if (!isSelfHostedPurchaseEnabled || !canExpand) {
             window.open(expandableLink(unsanitizedLicense.Id), '_blank');
         } else {

webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/error_page.tsx

@@ -10,6 +10,8 @@ import PaymentFailedSvg from 'components/common/svg_images_components/payment_fa
 import IconMessage from 'components/purchase_modal/icon_message';
 
 import './error_page.scss';
+import {trackEvent} from 'actions/telemetry_actions';
+import {TELEMETRY_CATEGORIES} from 'utils/constants';
 
 interface Props {
     canRetry: boolean;
@@ -71,9 +73,15 @@ export default function SelfHostedExpansionErrorPage(props: Props) {
                 icon={icon}
                 error={true}
                 formattedButtonText={formattedButtonText}
-                buttonHandler={props.tryAgain}
+                buttonHandler={() => {
+                    trackEvent(TELEMETRY_CATEGORIES.SELF_HOSTED_EXPANSION, 'self_hosted_expansion_failure_try_again_clicked');
+                    props.tryAgain();
+                }}
                 formattedTertiaryButonText={tertiaryButtonText}
-                tertiaryButtonHandler={() => window.open(contactSupportLink, '_blank', 'noreferrer')}
+                tertiaryButtonHandler={() =>  {
+                    trackEvent(TELEMETRY_CATEGORIES.SELF_HOSTED_EXPANSION, 'self_hosted_expansion_failure_contact_support_clicked');
+                    window.open(contactSupportLink, '_blank', 'noreferrer');
+                }}
             />
         </div>
     );

webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/index.tsx

@@ -19,7 +19,7 @@ import {Client4} from 'mattermost-redux/client';
 import {isDevModeEnabled} from 'selectors/general';
 
 import {closeModal} from 'actions/views/modals';
-import {pageVisited} from 'actions/telemetry_actions';
+import {pageVisited, trackEvent} from 'actions/telemetry_actions';
 import {confirmSelfHostedExpansion} from 'actions/hosted_customer';
 
 import {ValueOf} from '@mattermost/types/utilities';

webapp/channels/src/components/self_hosted_purchases/self_hosted_expansion_modal/success_page.tsx

@@ -8,9 +8,10 @@ import {useHistory} from 'react-router-dom';
 import IconMessage from 'components/purchase_modal/icon_message';
 import PaymentSuccessStandardSvg from 'components/common/svg_images_components/payment_success_standard_svg';
 
-import {ConsolePages} from 'utils/constants';
+import {ConsolePages, TELEMETRY_CATEGORIES} from 'utils/constants';
 
 import './success_page.scss';
+import {trackEvent} from 'actions/telemetry_actions';
 
 interface Props {
     onClose: () => void;
@@ -34,6 +35,7 @@ export default function SelfHostedExpansionSuccessPage(props: Props) {
                     <a
                         href='#'
                         onClick={() => {
+                            trackEvent(TELEMETRY_CATEGORIES.SELF_HOSTED_EXPANSION, 'self_hosted_expansion_success_screen_closed');
                             history.push(ConsolePages.BILLING_HISTORY);
                             props.onClose();
                         }}

webapp/channels/src/utils/constants.tsx

@@ -769,6 +769,7 @@ export const TELEMETRY_CATEGORIES = {
     REQUEST_BUSINESS_EMAIL: 'request_business_email',
     TRUE_UP_REVIEW: 'true_up_review',
     WORK_TEMPLATES: 'work_templates',
+    SELF_HOSTED_EXPANSION: 'self_hosted_expansion',
 };
 
 export const TELEMETRY_LABELS = {