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
2025-12-19 17:01:13 +00:00 · 2022-05-20 16:37:50 -07:00
parent c2f3471afe
commit dc83bf6fa0
9 changed files with 400 additions and 167 deletions
--- a/src/Explorer/SplashScreen/SplashScreen.less
+++ b/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;
--- a/src/Explorer/SplashScreen/SplashScreen.tsx
+++ b/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>
    );
  }