Update recent items UI and add to new home page (#1275)

* Update recent items UI and add to new home page

* Update text and links for different APIs

* Update home page text and carousel images

src/Explorer/SplashScreen/SplashScreen.less

@@ -57,7 +57,6 @@
 
           .legend {
             font-family: @SemiboldFont;
-            margin-bottom: @DefaultSpace;
             font-size: 18px;
           }
 
@@ -114,14 +113,6 @@
               margin-top: 4px;
             }
 
-            .twoLineContent {
-              margin-top: -5px;
-
-              :nth-child(2) {
-                font-size: 9px;
-              }
-            }
-
             .description {
               font-size: 10px;
               color: @BaseMediumHigh;

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -9,14 +9,12 @@ import NewStoredProcedureIcon from "../../../images/AddStoredProcedure.svg";
 import OpenQueryIcon from "../../../images/BrowseQuery.svg";
 import ConnectIcon from "../../../images/Connect_color.svg";
 import ContainersIcon from "../../../images/Containers.svg";
-import CostIcon from "../../../images/Cost.svg";
-import GreenCheckIcon from "../../../images/Green_check.svg";
 import NewContainerIcon from "../../../images/Hero-new-container.svg";
 import NewNotebookIcon from "../../../images/Hero-new-notebook.svg";
 import SampleIcon from "../../../images/Hero-sample.svg";
 import LinkIcon from "../../../images/Link_blue.svg";
 import NotebookIcon from "../../../images/notebook/Notebook-resource.svg";
-import NotebooksIcon from "../../../images/Notebooks.svg";
+import NotebookColorIcon from "../../../images/Notebooks.svg";
 import QuickStartIcon from "../../../images/Quickstart_Lightning.svg";
 import ScaleAndSettingsIcon from "../../../images/Scale_15x15.svg";
 import CollectionIcon from "../../../images/tree-collection.svg";
@@ -42,6 +40,7 @@ export interface SplashScreenItem {
   id?: string;
   info?: string;
   description: string;
+  showLinkIcon?: boolean;
   onClick: () => void;
 }
 
@@ -124,7 +123,11 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
                       <img src={item.iconSrc} alt="" />
                     </div>
                     <div className="legendContainer">
-                      <div className="legend">{item.title}</div>
+                      <Stack horizontal verticalAlign="center" style={{ marginBottom: 8 }}>
+                        <div className="legend">{item.title}</div>
+                        {item.showLinkIcon && <Image style={{ marginLeft: 8, width: 16 }} src={LinkIcon} />}
+                      </Stack>
+
                       <div
                         id={item.id}
                         className={userContext.features.enableNewQuickstart ? "newDescription" : "description"}
@@ -162,10 +165,8 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
               )}
               <div className="moreStuffContainer">
                 <div className="moreStuffColumn commonTasks">
-                  <div className="title">
-                    {userContext.features.enableNewQuickstart ? "Why Cosmos DB" : "Common Tasks"}
-                  </div>
-                  {userContext.features.enableNewQuickstart ? this.getNotebookItems() : this.getCommonTasksItems()}
+                  <div className="title">{userContext.features.enableNewQuickstart ? "Recents" : "Common Tasks"}</div>
+                  {userContext.features.enableNewQuickstart ? this.getRecentItems() : this.getCommonTasksItems()}
                 </div>
                 <div className="moreStuffColumn">
                   <div className="title">
@@ -198,16 +199,31 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
    * public for testing purposes
    */
   public createMainItems(): SplashScreenItem[] {
-    const dataSampleUtil = this.createDataSampleUtil();
+    const heroes: SplashScreenItem[] = [];
 
     if (userContext.features.enableNewQuickstart) {
-      const launchQuickstartBtn = {
-        id: "quickstartDescription",
-        iconSrc: QuickStartIcon,
-        title: "Launch quick start",
-        description: "Launch a quick start tutorial to get started with sample data",
-        onClick: () => this.container.onNewCollectionClicked({ isQuickstart: true }),
-      };
+      if (userContext.apiType === "SQL" || userContext.apiType === "Mongo") {
+        const launchQuickstartBtn = {
+          id: "quickstartDescription",
+          iconSrc: QuickStartIcon,
+          title: "Launch quick start",
+          description: "Launch a quick start tutorial to get started with sample data",
+          showLinkIcon: userContext.apiType === "Mongo",
+          onClick: () =>
+            userContext.apiType === "Mongo"
+              ? window.open("http://aka.ms/mongodbquickstart", "_blank")
+              : this.container.onNewCollectionClicked({ isQuickstart: true }),
+        };
+        heroes.push(launchQuickstartBtn);
+      } else if (useNotebook.getState().isPhoenixNotebooks) {
+        const newNotebookBtn = {
+          iconSrc: NotebookColorIcon,
+          title: "New notebook",
+          description: "Visualize your data stored in Azure Cosmos DB",
+          onClick: () => this.container.onNewNotebookClicked(),
+        };
+        heroes.push(newNotebookBtn);
+      }
 
       const newContainerBtn = {
         iconSrc: ContainersIcon,
@@ -215,6 +231,7 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
         description: "Create a new container for storage and throughput",
         onClick: () => this.container.onNewCollectionClicked(),
       };
+      heroes.push(newContainerBtn);
 
       const connectBtn = {
         iconSrc: ConnectIcon,
@@ -223,11 +240,9 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
         // TODO: replace onClick function
         onClick: () => 2,
       };
-
-      return [launchQuickstartBtn, newContainerBtn, connectBtn];
+      heroes.push(connectBtn);
     } else {
-      const heroes: SplashScreenItem[] = [];
-
+      const dataSampleUtil = this.createDataSampleUtil();
       if (dataSampleUtil.isSampleContainerCreationSupported()) {
         heroes.push({
           iconSrc: SampleIcon,
@@ -252,9 +267,9 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
           onClick: () => this.container.onNewNotebookClicked(),
         });
       }
-
-      return heroes;
     }
+
+    return heroes;
   }
 
   private createCommonTaskItems(): SplashScreenItem[] {
@@ -349,9 +364,9 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
 
   private decorateOpenCollectionActivity({ databaseId, collectionId }: MostRecentActivity.OpenCollectionItem) {
     return {
-      iconSrc: NotebookIcon,
+      iconSrc: CollectionIcon,
       title: collectionId,
-      description: "Data",
+      description: getCollectionName(),
       onClick: () => {
         const collection = useDatabases.getState().findCollection(databaseId, collectionId);
         collection?.openTab();
@@ -362,7 +377,7 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
   private decorateOpenNotebookActivity({ name, path }: MostRecentActivity.OpenNotebookItem) {
     return {
       info: path,
-      iconSrc: CollectionIcon,
+      iconSrc: NotebookIcon,
       title: name,
       description: "Notebook",
       onClick: () => {
@@ -418,25 +433,6 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
     }
   }
 
-  private getNotebookItems(): JSX.Element {
-    return (
-      <Stack>
-        <Stack className="notebookSplashScreenItem" horizontal style={{ marginBottom: 14 }}>
-          <Image src={NotebooksIcon} />
-          <Text className="itemText">Notebook - Easy to develop</Text>
-        </Stack>
-        <Stack className="notebookSplashScreenItem" horizontal style={{ marginBottom: 14 }}>
-          <Image src={GreenCheckIcon} />
-          <Text className="itemText">Notebook - Enterprise ready</Text>
-        </Stack>
-        <Stack className="notebookSplashScreenItem" horizontal style={{ marginBottom: 14 }}>
-          <Image src={CostIcon} />
-          <Text className="itemText">Notebook - Cost effective</Text>
-        </Stack>
-      </Stack>
-    );
-  }
-
   private getCommonTasksItems(): JSX.Element {
     const commonTaskItems = this.createCommonTaskItems();
     return (
@@ -461,41 +457,117 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
   }
 
   private top3Items(): JSX.Element {
+    let items: { link: string; title: string; description: string }[];
+    switch (userContext.apiType) {
+      case "SQL":
+        items = [
+          {
+            link: "https://aka.ms/msl-modeling-partitioning-2",
+            title: "Advanced Modeling Patterns",
+            description: "Learn advanced strategies to optimize your database.",
+          },
+          {
+            link: "https://aka.ms/msl-modeling-partitioning-1",
+            title: "Partitioning Best Practices",
+            description: "Learn to apply data model and partitioning strategies.",
+          },
+          {
+            link: "https://aka.ms/msl-resource-planning",
+            title: "Plan Your Resource Requirements",
+            description: "Get to know the different configuration choices.",
+          },
+        ];
+        break;
+      case "Mongo":
+        items = [
+          {
+            link: "https://aka.ms/mongodbintro",
+            title: "What is the MongoDB API?",
+            description: "Understand the Cosmos DB API for MongoDB and its features.",
+          },
+          {
+            link: "https://aka.ms/mongodbfeaturesupport",
+            title: "Features and Syntax",
+            description: "Discover the advantages and features",
+          },
+          {
+            link: "https://aka.ms/mongodbpremigration",
+            title: "Migrate Your Data",
+            description: "Pre-migration steps for moving data",
+          },
+        ];
+        break;
+      case "Cassandra":
+        items = [
+          {
+            link: "https://aka.ms/cassandrajava",
+            title: "Build a Java App",
+            description: "Create a Java app using an SDK.",
+          },
+          {
+            link: "https://aka.ms/cassandrapartitioning",
+            title: "Partitioning Best Practices",
+            description: "Learn how partitioning works.",
+          },
+          {
+            link: "https://aka.ms/cassandraRu",
+            title: "Request Units (RUs)",
+            description: "Understand RU charges.",
+          },
+        ];
+        break;
+      case "Gremlin":
+        items = [
+          {
+            link: "https://aka.ms/Graphdatamodeling",
+            title: "Data Modeling",
+            description: "Graph data modeling recommendations",
+          },
+          {
+            link: "https://aka.ms/graphpartitioning",
+            title: "Partitioning Best Practices",
+            description: "Learn how partitioning works",
+          },
+          {
+            link: "https://aka.ms/graphapiquery",
+            title: "Query Data",
+            description: "Querying data with Gremlin",
+          },
+        ];
+        break;
+      case "Tables":
+        items = [
+          {
+            link: "https://aka.ms/tableintro",
+            title: "What is the Table API?",
+            description: "Understand the Table API in Cosmos DB and its features",
+          },
+          {
+            link: "https://aka.ms/tableimport",
+            title: "Migrate your data",
+            description: "Learn how to migrate your data",
+          },
+          {
+            link: "https://aka.ms/tablefaq",
+            title: "Table API FAQs",
+            description: "Common questions about the Table API",
+          },
+        ];
+        break;
+    }
     return (
       <Stack>
-        <Stack style={{ marginBottom: 26 }}>
-          <Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
-            <Link href="https://aka.ms/msl-modeling-partitioning-2" target="_blank" style={{ marginRight: 5 }}>
-              Advanced Modeling Patterns
-            </Link>
-            <Image src={LinkIcon} />
+        {items.map((item, i) => (
+          <Stack key={`top${i}`} style={{ marginBottom: 26 }}>
+            <Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
+              <Link href={item.link} target="_blank" style={{ marginRight: 5 }}>
+                {item.title}
+              </Link>
+              <Image src={LinkIcon} />
+            </Stack>
+            <Text>{item.description}</Text>
           </Stack>
-          <Text>
-            Learn advanced strategies for managing relationships between data entities to optimize your database.
-          </Text>
-        </Stack>
-        <Stack style={{ marginBottom: 26 }}>
-          <Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
-            <Link href="https://aka.ms/msl-modeling-partitioning-1" target="_blank" style={{ marginRight: 5 }}>
-              Partitioning Best Practices
-            </Link>
-            <Image src={LinkIcon} />
-          </Stack>
-          <Text>
-            Learn to apply data model and partitioning strategies to support an efficient and scalable NoSQL database.
-          </Text>
-        </Stack>
-        <Stack>
-          <Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
-            <Link href="https://aka.ms/msl-resource-planning" target="_blank" style={{ marginRight: 5 }}>
-              Plan Your Resource Requirements
-            </Link>
-            <Image src={LinkIcon} />
-          </Stack>
-          <Text>
-            Familiarize yourself with the various configuration options for a new Azure Cosmos DB SQL API account.
-          </Text>
-        </Stack>
+        ))}
       </Stack>
     );
   }
@@ -508,13 +580,15 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
         <ul>
           {recentItems.map((item, index) => (
             <li key={`${item.title}${item.description}${index}`}>
-              <img src={item.iconSrc} alt="" />
-              <span className="twoLineContent">
-                <Link onClick={item.onClick} title={item.info}>
-                  {item.title}
-                </Link>
-                <div className="description">{item.description}</div>
-              </span>
+              <Stack style={{ marginBottom: 26 }}>
+                <Stack horizontal>
+                  <Image style={{ marginRight: 8 }} src={item.iconSrc} />
+                  <Link style={{ fontSize: 14 }} onClick={item.onClick} title={item.info}>
+                    {item.title}
+                  </Link>
+                </Stack>
+                <Text style={{ color: "#605E5C" }}>{item.description}</Text>
+              </Stack>
             </li>
           ))}
         </ul>
@@ -524,37 +598,117 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
   }
 
   private getLearningResourceItems(): JSX.Element {
+    let items: { link: string; title: string; description: string }[];
+    switch (userContext.apiType) {
+      case "SQL":
+        items = [
+          {
+            link: "https://aka.ms/msl-sdk-connect",
+            title: "Get Started using an SDK",
+            description: "Learn about the Azure Cosmos DB SDK.",
+          },
+          {
+            link: "https://aka.ms/msl-complex-queries",
+            title: "Master Complex Queries",
+            description: "Learn how to author complex queries.",
+          },
+          {
+            link: "https://aka.ms/msl-move-data",
+            title: "Migrate Your Data",
+            description: "Migrate data using Azure services and open-source solutions.",
+          },
+        ];
+        break;
+      case "Mongo":
+        items = [
+          {
+            link: "https://aka.ms/mongonodejs",
+            title: "Build an app with Node.js",
+            description: "Create a Node.js app.",
+          },
+          {
+            link: "https://aka.ms/mongopython",
+            title: "Getting Started Guide",
+            description: "Learn the basics to get started.",
+          },
+          {
+            link: "http://aka.ms/mongodotnet",
+            title: "Build a web API",
+            description: "Create a web API with the.NET SDK.",
+          },
+        ];
+        break;
+      case "Cassandra":
+        items = [
+          {
+            link: "https://aka.ms/cassandracontainer",
+            title: "Create a Container",
+            description: "Get to know the create a container options.",
+          },
+          {
+            link: "https://aka.ms/cassandraserverdiagnostics",
+            title: "Run Server Diagnostics",
+            description: "Learn how to run server diagnostics.",
+          },
+          {
+            link: "https://aka.ms/Cassandrathroughput",
+            title: "Provision Throughput",
+            description: "Learn how to configure throughput.",
+          },
+        ];
+        break;
+      case "Gremlin":
+        items = [
+          {
+            link: "https://aka.ms/graphquickstart",
+            title: "Get Started ",
+            description: "Create, query, and traverse using the Gremlin console",
+          },
+          {
+            link: "https://aka.ms/graphimport",
+            title: "Import Graph Data",
+            description: "Learn Bulk ingestion data using BulkExecutor",
+          },
+          {
+            link: "https://aka.ms/graphoptimize",
+            title: "Optimize your Queries",
+            description: "Learn how to evaluate your Gremlin queries",
+          },
+        ];
+        break;
+      case "Tables":
+        items = [
+          {
+            link: "https://aka.ms/tabledotnet",
+            title: "Build a .NET App",
+            description: "How to access Table API from a .NET app.",
+          },
+          {
+            link: "https://aka.ms/Tablejava",
+            title: "Build a Java App",
+            description: "Create a Table API app with Java SDK ",
+          },
+          {
+            link: "https://aka.ms/tablenodejs",
+            title: "Build a Node.js App",
+            description: "Create a Table API app with Node.js SDK",
+          },
+        ];
+        break;
+    }
     return (
       <Stack>
-        <Stack style={{ marginBottom: 26 }}>
-          <Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
-            <Link href="https://aka.ms/msl-sdk-connect" target="_blank" style={{ marginRight: 5 }}>
-              Get Started using th SQL API with the SDK
-            </Link>
-            <Image src={LinkIcon} />
+        {items.map((item, i) => (
+          <Stack key={`learningResource${i}`} style={{ marginBottom: 26 }}>
+            <Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
+              <Link href={item.link} target="_blank" style={{ marginRight: 5 }}>
+                {item.title}
+              </Link>
+              <Image src={LinkIcon} />
+            </Stack>
+            <Text>{item.description}</Text>
           </Stack>
-          <Text>Learn about the Azure Cosmos DB SDK, then download and use in a .NET application.</Text>
-        </Stack>
-        <Stack style={{ marginBottom: 26 }}>
-          <Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
-            <Link href="https://aka.ms/msl-complex-queries" target="_blank" style={{ marginRight: 5 }}>
-              Master Complex Queries
-            </Link>
-            <Image src={LinkIcon} />
-          </Stack>
-          <Text>Learn how to author complex queries using cross-products and correlated subqueries.</Text>
-        </Stack>
-        <Stack>
-          <Stack horizontal verticalAlign="center" style={{ fontSize: 14 }}>
-            <Link href="https://aka.ms/msl-move-data" target="_blank" style={{ marginRight: 5 }}>
-              Migrate Your Data
-            </Link>
-            <Image src={LinkIcon} />
-          </Stack>
-          <Text>
-            Migrate data into and out of Azure Cosmos DB SQL API using Azure services and open-source solutions.
-          </Text>
-        </Stack>
+        ))}
       </Stack>
     );
   }

src/Explorer/Tutorials/QuickstartCarousel.tsx

@@ -1,7 +1,8 @@
 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";
+import Image1 from "../../../images/CarouselImage1.svg";
+import Image2 from "../../../images/CarouselImage2.svg";
 
 interface QuickstartCarouselProps {
   isOpen: boolean;
@@ -55,9 +56,9 @@ const getContent = (page: number): JSX.Element => {
     case 1:
       return <Youtube videoId="Jvgh64rvdXU" />;
     case 2:
-      return <Image style={{ width: 640 }} src={Placeholder} />;
+      return <Image style={{ width: 640 }} src={Image1} />;
     case 3:
-      return <Image style={{ width: 640 }} src={Placeholder} />;
+      return <Image style={{ width: 640 }} src={Image2} />;
     default:
       return <></>;
   }