Add condition for showing quick start carousel (#1278)

* Add condition for showing quick start carousel * Show coach mark when carousel is closed * Add condition for showing quick start carousel and other UI changes * Fix compile error * Fix issue with coach mark * Fix test * Add new sample data, fix link url, fix e2e tests * Fix e2e tests
2025-12-19 17:01:13 +00:00 · 2022-05-23 20:52:21 -07:00
parent d13b7a50ad
commit 46ca952955
24 changed files with 241 additions and 207 deletions
--- a/src/Explorer/SplashScreen/SplashScreen.test.ts
+++ b/src/Explorer/SplashScreen/SplashScreen.test.ts
@@ -9,31 +9,6 @@ const createExplorer = () => {
 };

 describe("SplashScreen", () => {
-  it("allows sample collection creation for supported api's", () => {
-    const explorer = createExplorer();
-    const dataSampleUtil = new DataSamplesUtil(explorer);
-    const createStub = jest
-      .spyOn(dataSampleUtil, "createGeneratorAsync")
-      .mockImplementation(() => Promise.reject(undefined));
-
-    // Sample is supported
-    jest.spyOn(dataSampleUtil, "isSampleContainerCreationSupported").mockImplementation(() => true);
-
-    const splashScreen = new SplashScreen({ explorer });
-    jest.spyOn(splashScreen, "createDataSampleUtil").mockImplementation(() => dataSampleUtil);
-    const mainButtons = splashScreen.createMainItems();
-
-    // Press all buttons and make sure create gets called
-    mainButtons.forEach((button) => {
-      try {
-        button.onClick();
-      } catch (e) {
-        // noop
-      }
-    });
-    expect(createStub).toHaveBeenCalled();
-  });
-
  it("does not allow sample collection creation for non-supported api's", () => {
    const explorerStub = createExplorer();
    const dataSampleUtil = new DataSamplesUtil(explorerStub);
--- a/src/Explorer/SplashScreen/SplashScreen.tsx
+++ b/src/Explorer/SplashScreen/SplashScreen.tsx
@@ -2,6 +2,7 @@
 * Accordion top class
 */
 import { Coachmark, DirectionalHint, Image, Link, Stack, TeachingBubbleContent, Text } from "@fluentui/react";
+import { useCarousel } from "hooks/useCarousel";
 import { useTabs } from "hooks/useTabs";
 import * as React from "react";
 import AddDatabaseIcon from "../../../images/AddDatabase.svg";
@@ -10,9 +11,6 @@ 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 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 NotebookColorIcon from "../../../images/Notebooks.svg";
@@ -49,11 +47,7 @@ export interface SplashScreenProps {
  explorer: Explorer;
 }

-export interface SplashScreenState {
-  showCoachmark: boolean;
-}
-
-export class SplashScreen extends React.Component<SplashScreenProps, SplashScreenState> {
+export class SplashScreen extends React.Component<SplashScreenProps> {
  private static readonly seeMoreItemTitle: string = "See more Cosmos DB documentation";
  private static readonly seeMoreItemUrl: string = "https://aka.ms/cosmosdbdocument";
  private static readonly dataModelingUrl = "https://docs.microsoft.com/azure/cosmos-db/modeling-data";
@@ -67,10 +61,6 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
    super(props);
    this.container = props.explorer;
    this.subscriptions = [];
-
-    this.state = {
-      showCoachmark: userContext.features.enableNewQuickstart,
-    };
  }

  public componentWillUnmount(): void {
@@ -87,7 +77,13 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
          (state) => state.isNotebookEnabled
        ),
      },
-      { dispose: useSelectedNode.subscribe(() => this.setState({})) }
+      { dispose: useSelectedNode.subscribe(() => this.setState({})) },
+      {
+        dispose: useCarousel.subscribe(
+          () => this.setState({}),
+          (state) => state.showCoachMark
+        ),
+      }
    );
  }

@@ -129,17 +125,14 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
                        {item.showLinkIcon && <Image style={{ marginLeft: 8, width: 16 }} src={LinkIcon} />}
                      </Stack>

-                      <div
-                        id={item.id}
-                        className={userContext.features.enableNewQuickstart ? "newDescription" : "description"}
-                      >
+                      <div id={item.id} className="newDescription">
                        {item.description}
                      </div>
                    </div>
                  </Stack>
                ))}
              </div>
-              {this.state.showCoachmark && (
+              {useCarousel.getState().showCoachMark && (
                <Coachmark
                  target="#quickstartDescription"
                  positioningContainerProps={{ directionalHint: DirectionalHint.rightTopEdge }}
@@ -152,34 +145,33 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
                    primaryButtonProps={{
                      text: "Get started",
                      onClick: () => {
-                        this.setState({ showCoachmark: false });
+                        useCarousel.getState().setShowCoachMark(false);
                        this.container.onNewCollectionClicked({ isQuickstart: true });
                      },
                    }}
-                    secondaryButtonProps={{ text: "Cancel", onClick: () => this.setState({ showCoachmark: false }) }}
-                    onDismiss={() => this.setState({ showCoachmark: false })}
+                    secondaryButtonProps={{
+                      text: "Cancel",
+                      onClick: () => useCarousel.getState().setShowCoachMark(false),
+                    }}
+                    onDismiss={() => useCarousel.getState().setShowCoachMark(false)}
                  >
                    You will be guided to create a sample container with sample data, then we will give you a tour of
-                    data explorer You can also cancel launching this tour and explore yourself
+                    data explorer. You can also cancel launching this tour and explore yourself
                  </TeachingBubbleContent>
                </Coachmark>
              )}
              <div className="moreStuffContainer">
                <div className="moreStuffColumn commonTasks">
-                  <div className="title">{userContext.features.enableNewQuickstart ? "Recents" : "Common Tasks"}</div>
-                  {userContext.features.enableNewQuickstart ? this.getRecentItems() : this.getCommonTasksItems()}
+                  <div className="title">Recents</div>
+                  {this.getRecentItems()}
                </div>
                <div className="moreStuffColumn">
-                  <div className="title">
-                    {userContext.features.enableNewQuickstart ? "Top 3 things you need to know" : "Recents"}
-                  </div>
-                  {userContext.features.enableNewQuickstart ? this.top3Items() : this.getRecentItems()}
+                  <div className="title">Top 3 things you need to know</div>
+                  {this.top3Items()}
                </div>
                <div className="moreStuffColumn tipsContainer">
-                  <div className="title">
-                    {userContext.features.enableNewQuickstart ? "Learning Resources" : "Tips"}
-                  </div>
-                  {userContext.features.enableNewQuickstart ? this.getLearningResourceItems() : this.getTipItems()}
+                  <div className="title">Learning Resources</div>
+                  {this.getLearningResourceItems()}
                </div>
              </div>
            </div>
@@ -202,73 +194,45 @@ export class SplashScreen extends React.Component<SplashScreenProps, SplashScree
  public createMainItems(): SplashScreenItem[] {
    const heroes: SplashScreenItem[] = [];

-    if (userContext.features.enableNewQuickstart) {
-      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,
-        title: `New ${getCollectionName()}`,
-        description: "Create a new container for storage and throughput",
-        onClick: () => this.container.onNewCollectionClicked(),
+    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(newContainerBtn);
-
-      const connectBtn = {
-        iconSrc: ConnectIcon,
-        title: "Connect",
-        description: "Prefer using your own choice of tooling? Find the connection string you need to connect",
-        onClick: () => useTabs.getState().openAndActivateConnectTab(),
+      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(connectBtn);
-    } else {
-      const dataSampleUtil = this.createDataSampleUtil();
-      if (dataSampleUtil.isSampleContainerCreationSupported()) {
-        heroes.push({
-          iconSrc: SampleIcon,
-          title: "Start with Sample",
-          description: "Get started with a sample provided by Cosmos DB",
-          onClick: () => dataSampleUtil.createSampleContainerAsync(),
-        });
-      }
-
-      heroes.push({
-        iconSrc: NewContainerIcon,
-        title: `New ${getCollectionName()}`,
-        description: "Create a new container for storage and throughput",
-        onClick: () => this.container.onNewCollectionClicked(),
-      });
-
-      if (useNotebook.getState().isPhoenixNotebooks) {
-        heroes.push({
-          iconSrc: NewNotebookIcon,
-          title: "New Notebook",
-          description: "Create a notebook to start querying, visualizing, and modeling your data",
-          onClick: () => this.container.onNewNotebookClicked(),
-        });
-      }
+      heroes.push(newNotebookBtn);
    }

+    const newContainerBtn = {
+      iconSrc: ContainersIcon,
+      title: `New ${getCollectionName()}`,
+      description: "Create a new container for storage and throughput",
+      onClick: () => this.container.onNewCollectionClicked(),
+    };
+    heroes.push(newContainerBtn);
+
+    const connectBtn = {
+      iconSrc: ConnectIcon,
+      title: "Connect",
+      description: "Prefer using your own choice of tooling? Find the connection string you need to connect",
+      onClick: () => useTabs.getState().openAndActivateConnectTab(),
+    };
+    heroes.push(connectBtn);
+
    return heroes;
  }