diff --git a/src/Explorer/Panes/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel.tsx index 6fae58d24..d2dfa80ba 100644 --- a/src/Explorer/Panes/AddCollectionPanel.tsx +++ b/src/Explorer/Panes/AddCollectionPanel.tsx @@ -1193,6 +1193,7 @@ export class AddCollectionPanel extends React.Component { title: "Launch quick start", description: "Launch a quick start tutorial to get started with sample data", showLinkIcon: userContext.apiType === "Mongo", - onClick: () => + onClick: () => { userContext.apiType === "Mongo" ? window.open("http://aka.ms/mongodbquickstart", "_blank") - : this.container.onNewCollectionClicked({ isQuickstart: true }), + : this.container.onNewCollectionClicked({ isQuickstart: true }); + traceOpen(Action.LaunchQuickstart, { apiType: userContext.apiType }); + }, }; heroes.push(launchQuickstartBtn); } else if (useNotebook.getState().isPhoenixNotebooks) { @@ -221,7 +225,10 @@ export class SplashScreen extends React.Component { iconSrc: ContainersIcon, title: `New ${getCollectionName()}`, description: "Create a new container for storage and throughput", - onClick: () => this.container.onNewCollectionClicked(), + onClick: () => { + this.container.onNewCollectionClicked(); + traceOpen(Action.NewContainerHomepage, { apiType: userContext.apiType }); + }, }; heroes.push(newContainerBtn); @@ -397,29 +404,6 @@ export class SplashScreen extends React.Component { } } - private getCommonTasksItems(): JSX.Element { - const commonTaskItems = this.createCommonTaskItems(); - return ( -
    - {commonTaskItems.map((item) => ( -
  • this.onSplashScreenItemKeyPress(event, item.onClick)} - tabIndex={0} - role="button" - > - - - {item.title} - -
    • - ))} -
- ); - } - private top3Items(): JSX.Element { let items: { link: string; title: string; description: string }[]; switch (userContext.apiType) { @@ -524,7 +508,12 @@ export class SplashScreen extends React.Component { {items.map((item, i) => ( - + traceOpen(Action.Top3ItemsClicked, { item: i + 1, apiType: userContext.apiType })} + href={item.link} + target="_blank" + style={{ marginRight: 5 }} + > {item.title} @@ -665,7 +654,14 @@ export class SplashScreen extends React.Component { {items.map((item, i) => ( - + + traceOpen(Action.LearningResourcesClicked, { item: i + 1, apiType: userContext.apiType }) + } + href={item.link} + target="_blank" + style={{ marginRight: 5 }} + > {item.title} @@ -676,33 +672,4 @@ export class SplashScreen extends React.Component { ); } - - private getTipItems(): JSX.Element { - const tipsItems = this.createTipsItems(); - - return ( -
    - {tipsItems.map((item) => ( -
  • this.onSplashScreenItemKeyPress(event, item.onClick)} - tabIndex={0} - role="link" - > -
    - {item.title} -
    -
    {item.description}
    -
    • - ))} -
  • - - {SplashScreen.seeMoreItemTitle} - -
    • -
- ); - } } diff --git a/src/Explorer/Tutorials/QuickstartCarousel.tsx b/src/Explorer/Tutorials/QuickstartCarousel.tsx index 1d05961eb..a2516fc5b 100644 --- a/src/Explorer/Tutorials/QuickstartCarousel.tsx +++ b/src/Explorer/Tutorials/QuickstartCarousel.tsx @@ -2,6 +2,8 @@ import { DefaultButton, IconButton, Image, Modal, PrimaryButton, Stack, Text } f import { useCarousel } from "hooks/useCarousel"; import React, { useState } from "react"; import Youtube from "react-youtube"; +import { Action } from "Shared/Telemetry/TelemetryConstants"; +import { traceSuccess } from "Shared/Telemetry/TelemetryProcessor"; import { userContext } from "UserContext"; import Image1 from "../../../images/CarouselImage1.svg"; import Image2 from "../../../images/CarouselImage2.svg"; @@ -49,6 +51,10 @@ export const QuickstartCarousel: React.FC = ({ } setPage(page + 1); } + + if (page === 3) { + traceSuccess(Action.CompleteCarousel); + } }} /> @@ -73,7 +79,7 @@ const getHeaderText = (page: number): string => { const getContent = (page: number): JSX.Element => { switch (page) { case 1: - return ; + return traceSuccess(Action.PlayCarouselVideo)} />; case 2: return ; case 3: diff --git a/src/Explorer/Tutorials/QuickstartTutorial.tsx b/src/Explorer/Tutorials/QuickstartTutorial.tsx index ad456e9a7..5fcb44026 100644 --- a/src/Explorer/Tutorials/QuickstartTutorial.tsx +++ b/src/Explorer/Tutorials/QuickstartTutorial.tsx @@ -2,10 +2,17 @@ import { Link, Stack, TeachingBubble, Text } from "@fluentui/react"; import { useTabs } from "hooks/useTabs"; import { useTeachingBubble } from "hooks/useTeachingBubble"; import React from "react"; +import { Action } from "Shared/Telemetry/TelemetryConstants"; +import { traceCancel } from "Shared/Telemetry/TelemetryProcessor"; export const QuickstartTutorial: React.FC = (): JSX.Element => { const { step, isSampleDBExpanded, isDocumentsTabOpened, sampleCollection, setStep } = useTeachingBubble(); + const onDimissTeachingBubble = (): void => { + setStep(0); + traceCancel(Action.CancelUITour, { step }); + }; + switch (step) { case 1: return isSampleDBExpanded ? ( @@ -20,7 +27,7 @@ export const QuickstartTutorial: React.FC = (): JSX.Element => { setStep(2); }, }} - onDismiss={() => setStep(0)} + onDismiss={() => onDimissTeachingBubble()} footerContent="Step 1 of 7" > Start viewing and working with your data by opening Items under Data @@ -42,7 +49,7 @@ export const QuickstartTutorial: React.FC = (): JSX.Element => { text: "Previous", onClick: () => setStep(1), }} - onDismiss={() => setStep(0)} + onDismiss={() => onDimissTeachingBubble()} footerContent="Step 2 of 7" > View item here using the items window. Additionally you can also filter items to be reviewed with the filter @@ -65,7 +72,7 @@ export const QuickstartTutorial: React.FC = (): JSX.Element => { text: "Previous", onClick: () => setStep(2), }} - onDismiss={() => setStep(0)} + onDismiss={() => onDimissTeachingBubble()} footerContent="Step 3 of 7" > Add new item by copy / pasting JSON; or uploading a JSON @@ -85,7 +92,7 @@ export const QuickstartTutorial: React.FC = (): JSX.Element => { text: "Previous", onClick: () => setStep(3), }} - onDismiss={() => setStep(0)} + onDismiss={() => onDimissTeachingBubble()} footerContent="Step 4 of 7" > Query your data using either the filter function or new query. @@ -105,7 +112,7 @@ export const QuickstartTutorial: React.FC = (): JSX.Element => { text: "Previous", onClick: () => setStep(4), }} - onDismiss={() => setStep(0)} + onDismiss={() => onDimissTeachingBubble()} footerContent="Step 5 of 7" > Change throughput provisioned to your container according to your needs @@ -125,7 +132,7 @@ export const QuickstartTutorial: React.FC = (): JSX.Element => { text: "Previous", onClick: () => setStep(5), }} - onDismiss={() => setStep(0)} + onDismiss={() => onDimissTeachingBubble()} footerContent="Step 6 of 7" > Visualize your data, store queries in an interactive document @@ -145,7 +152,7 @@ export const QuickstartTutorial: React.FC = (): JSX.Element => { text: "Previous", onClick: () => setStep(6), }} - onDismiss={() => setStep(0)} + onDismiss={() => onDimissTeachingBubble()} footerContent="Step 7 of 7" > diff --git a/src/Shared/Telemetry/TelemetryConstants.ts b/src/Shared/Telemetry/TelemetryConstants.ts index 2f43adb03..dd040ebb4 100644 --- a/src/Shared/Telemetry/TelemetryConstants.ts +++ b/src/Shared/Telemetry/TelemetryConstants.ts @@ -121,6 +121,15 @@ export enum Action { ExpandAddCollectionPaneAdvancedSection, SchemaAnalyzerClickAnalyze, SelfServeComponent, + LaunchQuickstart, + NewContainerHomepage, + Top3ItemsClicked, + LearningResourcesClicked, + PlayCarouselVideo, + OpenCarousel, + CompleteCarousel, + LaunchUITour, + CancelUITour, } export const ActionModifiers = { diff --git a/src/UserContext.ts b/src/UserContext.ts index 7e3390eb4..74f14d6a9 100644 --- a/src/UserContext.ts +++ b/src/UserContext.ts @@ -1,4 +1,6 @@ import { useCarousel } from "hooks/useCarousel"; +import { Action } from "Shared/Telemetry/TelemetryConstants"; +import { traceOpen } from "Shared/Telemetry/TelemetryProcessor"; import { AuthType } from "./AuthType"; import { DatabaseAccount } from "./Contracts/DataModels"; import { SubscriptionType } from "./Contracts/SubscriptionType"; @@ -99,6 +101,7 @@ function updateUserContext(newContext: Partial): void { ) { useCarousel.getState().setShouldOpen(true); localStorage.setItem(newContext.databaseAccount.id, "true"); + traceOpen(Action.OpenCarousel); } } Object.assign(userContext, newContext);