Add carousel for quick start (#1271)

* Add carousel for quick start

* Put carousel behind feature flag

* Install type definition for react-youtube

* Install type definition for react-youtube

* Remove @types/youtube-player

* Move feature flag outside of quickstarttutorial component

src/Explorer/Tutorials/QuickstartCarousel.tsx

@@ -0,0 +1,77 @@
+import { DefaultButton, IconButton, Image, Modal, PrimaryButton, Stack, Text } from "@fluentui/react";
+import React, { useState } from "react";
+import Youtube from "react-youtube";
+import Placeholder from "../../../images/Placeholder.svg";
+
+interface QuickstartCarouselProps {
+  isOpen: boolean;
+}
+
+export const QuickstartCarousel: React.FC<QuickstartCarouselProps> = ({
+  isOpen,
+}: QuickstartCarouselProps): JSX.Element => {
+  const [page, setPage] = useState<number>(1);
+  return (
+    <Modal styles={{ main: { width: 640 } }} isOpen={isOpen && page < 4}>
+      <Stack>
+        <Stack horizontal horizontalAlign="space-between" style={{ padding: 16 }}>
+          <Text variant="xLarge">{getHeaderText(page)}</Text>
+          <IconButton iconProps={{ iconName: "Cancel" }} onClick={() => setPage(4)} />
+        </Stack>
+        {getContent(page)}
+        <Text variant="medium" style={{ padding: "0 16px" }}>
+          {getDescriptionText(page)}
+        </Text>
+        <Stack horizontal horizontalAlign="end">
+          {page !== 1 && (
+            <DefaultButton text="Previous" style={{ margin: "16px 8px 16px 0" }} onClick={() => setPage(page - 1)} />
+          )}
+          <PrimaryButton
+            style={{ margin: "16px 16px 16px 0" }}
+            text={page === 3 ? "Finish" : "Next"}
+            onClick={() => setPage(page + 1)}
+          />
+        </Stack>
+      </Stack>
+    </Modal>
+  );
+};
+
+const getHeaderText = (page: number): string => {
+  switch (page) {
+    case 1:
+      return "Welcome! What is Cosmos DB?";
+    case 2:
+      return "Get Started with Sample Data";
+    case 3:
+      return "Connect to your database";
+    default:
+      return "";
+  }
+};
+
+const getContent = (page: number): JSX.Element => {
+  switch (page) {
+    case 1:
+      return <Youtube videoId="Jvgh64rvdXU" />;
+    case 2:
+      return <Image style={{ width: 640 }} src={Placeholder} />;
+    case 3:
+      return <Image style={{ width: 640 }} src={Placeholder} />;
+    default:
+      return <></>;
+  }
+};
+
+const getDescriptionText = (page: number): string => {
+  switch (page) {
+    case 1:
+      return "Azure Cosmos DB is a fully managed NoSQL database service for modern app development. ";
+    case 2:
+      return "Launch the quickstart for a tutotrial to learn how to create a database, add sample data, connect to a sample app and more.";
+    case 3:
+      return "Already have an existing app? Connect your database to an app, or tooling of your choice from Data Explorer.";
+    default:
+      return "";
+  }
+};

src/Explorer/Tutorials/QuickstartTutorial.tsx

@@ -2,15 +2,10 @@ import { TeachingBubble } from "@fluentui/react";
 import { useDatabases } from "Explorer/useDatabases";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import React from "react";
-import { userContext } from "UserContext";
 
 export const QuickstartTutorial: React.FC = (): JSX.Element => {
   const { step, isSampleDBExpanded, isDocumentsTabOpened, setStep } = useTeachingBubble();
 
-  if (!userContext.features.enableNewQuickstart) {
-    return <></>;
-  }
-
   switch (step) {
     case 1:
       return isSampleDBExpanded ? (

src/Main.tsx

@@ -1,9 +1,11 @@
 // CSS Dependencies
 import { initializeIcons } from "@fluentui/react";
 import "bootstrap/dist/css/bootstrap.css";
+import { QuickstartCarousel } from "Explorer/Tutorials/QuickstartCarousel";
 import { QuickstartTutorial } from "Explorer/Tutorials/QuickstartTutorial";
 import React, { useState } from "react";
 import ReactDOM from "react-dom";
+import { userContext } from "UserContext";
 import "../externals/jquery-ui.min.css";
 import "../externals/jquery-ui.min.js";
 import "../externals/jquery-ui.structure.min.css";
@@ -116,7 +118,8 @@ const App: React.FunctionComponent = () => {
       </div>
       <SidePanel />
       <Dialog />
-      <QuickstartTutorial />
+      {userContext.features.enableNewQuickstart && <QuickstartCarousel isOpen={true} />}
+      {userContext.features.enableNewQuickstart && <QuickstartTutorial />}
     </div>
   );
 };