Adding vcore mongo quickstart (#1600)

* Safety checkin * Adding vcoremongo to Main * Safety checkin * Adding vcoremongo to Main * Safety commit * Safety checkin * Adding vcoremongo to Main * Safety commit * Integrating mongo shell * Safety checkin * Adding vcoremongo to Main * Safety commit * Integrating mongo shell * Safety checkin * Safety commit * Enable mongo shell in its own tab * Safety checkin * Adding vcoremongo to Main * Safety commit * Integrating mongo shell * Safety checkin * Safety commit * Safety commit * Integrating mongo shell * Safety checkin * Safety commit * Enable mongo shell in its own tab * Adding message * Integrated mongo shell * Moving Juno endpoint back to prod * Fixed command bar unit tests * Fixing spelling
2025-12-20 01:11:25 +00:00 · 2023-09-12 18:03:59 -07:00
parent 135a409f0c
commit c07000a5c2
30 changed files with 1013 additions and 306 deletions
--- a/src/Explorer/Quickstart/QuickstartFirewallNotification.tsx
+++ b/src/Explorer/Quickstart/QuickstartFirewallNotification.tsx
@@ -2,20 +2,26 @@ import { Image, PrimaryButton, Stack, Text } from "@fluentui/react";
 import { sendMessage } from "Common/MessageHandler";
 import { MessageTypes } from "Contracts/ExplorerContracts";
 import React from "react";
-import FirewallRuleScreenshot from "../../../images/firewallRule.png";

-export const QuickstartFirewallNotification: React.FC = (): JSX.Element => (
+export interface QuickstartFirewallNotificationProps {
+  shellName: string;
+  screenshot: string;
+  messageType: MessageTypes;
+}
+
+export const QuickstartFirewallNotification: React.FC<QuickstartFirewallNotificationProps> = ({
+  shellName,
+  screenshot,
+  messageType,
+}: QuickstartFirewallNotificationProps): JSX.Element => (
  <Stack style={{ padding: "16px 20px" }}>
    <Text block>
-      To use the PostgreSQL shell, you need to add a firewall rule to allow access from all IP addresses
+      To use the {shellName} shell, you need to add a firewall rule to allow access from all IP addresses
      (0.0.0.0-255.255.255).
    </Text>
-    <Text block>We strongly recommend removing this rule once you finish using the PostgreSQL shell.</Text>
-    <Image style={{ margin: "20px 0" }} src={FirewallRuleScreenshot} />
-    <PrimaryButton
-      style={{ width: 150 }}
-      onClick={() => sendMessage({ type: MessageTypes.OpenPostgresNetworkingBlade })}
-    >
+    <Text block>We strongly recommend removing this rule once you finish using the {shellName} shell.</Text>
+    <Image style={{ margin: "20px 0" }} src={screenshot} />
+    <PrimaryButton style={{ width: 150 }} onClick={() => sendMessage({ type: messageType })}>
      Add firewall rule
    </PrimaryButton>
  </Stack>
--- a/src/Explorer/Quickstart/QuickstartGuide.tsx
+++ b/src/Explorer/Quickstart/QuickstartGuide.tsx
@@ -1,9 +1,7 @@
 import {
  DefaultButton,
-  Icon,
  IconButton,
  Image,
-  IPivotItemProps,
  Pivot,
  PivotItem,
  PrimaryButton,
@@ -21,18 +19,10 @@ import {
  queryCommand,
  queryCommandForDisplay,
 } from "Explorer/Quickstart/PostgreQuickstartCommands";
+import { customPivotHeaderRenderer } from "Explorer/Quickstart/Shared/QuickstartRenderUtilities";
 import { useTerminal } from "hooks/useTerminal";
 import React, { useState } from "react";
 import Youtube from "react-youtube";
-import Pivot1SelectedIcon from "../../../images/Pivot1_selected.svg";
-import Pivot2Icon from "../../../images/Pivot2.svg";
-import Pivot2SelectedIcon from "../../../images/Pivot2_selected.svg";
-import Pivot3Icon from "../../../images/Pivot3.svg";
-import Pivot3SelectedIcon from "../../../images/Pivot3_selected.svg";
-import Pivot4Icon from "../../../images/Pivot4.svg";
-import Pivot4SelectedIcon from "../../../images/Pivot4_selected.svg";
-import Pivot5Icon from "../../../images/Pivot5.svg";
-import Pivot5SelectedIcon from "../../../images/Pivot5_selected.svg";
 import CompleteIcon from "../../../images/QuickstartComplete.svg";
 import { ReactTabKind, useTabs } from "../../hooks/useTabs";

@@ -53,44 +43,6 @@ export const QuickstartGuide: React.FC = (): JSX.Element => {
    document.execCommand("copy");
  };

-  const getPivotHeaderIcon = (step: number): string => {
-    switch (step) {
-      case 0:
-        return Pivot1SelectedIcon;
-      case 1:
-        return step === currentStep ? Pivot2SelectedIcon : Pivot2Icon;
-      case 2:
-        return step === currentStep ? Pivot3SelectedIcon : Pivot3Icon;
-      case 3:
-        return step === currentStep ? Pivot4SelectedIcon : Pivot4Icon;
-      case 4:
-        return step === currentStep ? Pivot5SelectedIcon : Pivot5Icon;
-      default:
-        return "";
-    }
-  };
-
-  const customPivotHeaderRenderer = (
-    link: IPivotItemProps,
-    defaultRenderer: (link?: IPivotItemProps) => JSX.Element | null,
-    step: number
-  ): JSX.Element | null => {
-    if (!link || !defaultRenderer) {
-      return null;
-    }
-
-    return (
-      <Stack horizontal verticalAlign="center">
-        {currentStep > step ? (
-          <Icon iconName="CompletedSolid" style={{ color: "#57A300", marginRight: 8 }} />
-        ) : (
-          <Image style={{ marginRight: 8 }} src={getPivotHeaderIcon(step)} />
-        )}
-        {defaultRenderer({ ...link, itemIcon: undefined })}
-      </Stack>
-    );
-  };
-
  return (
    <Stack style={{ paddingTop: 8, height: "100%", width: "100%" }}>
      <Stack style={{ flexGrow: 1, padding: "0 20px", overflow: "auto" }}>
@@ -103,7 +55,9 @@ export const QuickstartGuide: React.FC = (): JSX.Element => {
          >
            <PivotItem
              headerText="Login"
-              onRenderItemLink={(props, defaultRenderer) => customPivotHeaderRenderer(props, defaultRenderer, 0)}
+              onRenderItemLink={(props, defaultRenderer) =>
+                customPivotHeaderRenderer(props, defaultRenderer, currentStep, 0)
+              }
              itemKey={GuideSteps[0]}
              onClick={() => {
                setCurrentStep(0);
@@ -125,7 +79,9 @@ export const QuickstartGuide: React.FC = (): JSX.Element => {
            </PivotItem>
            <PivotItem
              headerText="New table"
-              onRenderItemLink={(props, defaultRenderer) => customPivotHeaderRenderer(props, defaultRenderer, 1)}
+              onRenderItemLink={(props, defaultRenderer) =>
+                customPivotHeaderRenderer(props, defaultRenderer, currentStep, 1)
+              }
              itemKey={GuideSteps[1]}
              onClick={() => setCurrentStep(1)}
            >
@@ -165,7 +121,9 @@ export const QuickstartGuide: React.FC = (): JSX.Element => {
            </PivotItem>
            <PivotItem
              headerText="Distribute table"
-              onRenderItemLink={(props, defaultRenderer) => customPivotHeaderRenderer(props, defaultRenderer, 2)}
+              onRenderItemLink={(props, defaultRenderer) =>
+                customPivotHeaderRenderer(props, defaultRenderer, currentStep, 2)
+              }
              itemKey={GuideSteps[2]}
              onClick={() => setCurrentStep(2)}
            >
@@ -210,7 +168,9 @@ export const QuickstartGuide: React.FC = (): JSX.Element => {
            </PivotItem>
            <PivotItem
              headerText="Load data"
-              onRenderItemLink={(props, defaultRenderer) => customPivotHeaderRenderer(props, defaultRenderer, 3)}
+              onRenderItemLink={(props, defaultRenderer) =>
+                customPivotHeaderRenderer(props, defaultRenderer, currentStep, 3)
+              }
              itemKey={GuideSteps[3]}
              onClick={() => setCurrentStep(3)}
            >
@@ -250,7 +210,9 @@ export const QuickstartGuide: React.FC = (): JSX.Element => {
            </PivotItem>
            <PivotItem
              headerText="Query"
-              onRenderItemLink={(props, defaultRenderer) => customPivotHeaderRenderer(props, defaultRenderer, 4)}
+              onRenderItemLink={(props, defaultRenderer) =>
+                customPivotHeaderRenderer(props, defaultRenderer, currentStep, 4)
+              }
              itemKey={GuideSteps[4]}
              onClick={() => setCurrentStep(4)}
            >
--- a/src/Explorer/Quickstart/Shared/QuickstartRenderUtilities.tsx
+++ b/src/Explorer/Quickstart/Shared/QuickstartRenderUtilities.tsx
@@ -0,0 +1,50 @@
+import { Icon, Image, IPivotItemProps, Stack } from "@fluentui/react";
+import React from "react";
+import Pivot1SelectedIcon from "../../../../images/Pivot1_selected.svg";
+import Pivot2Icon from "../../../../images/Pivot2.svg";
+import Pivot2SelectedIcon from "../../../../images/Pivot2_selected.svg";
+import Pivot3Icon from "../../../../images/Pivot3.svg";
+import Pivot3SelectedIcon from "../../../../images/Pivot3_selected.svg";
+import Pivot4Icon from "../../../../images/Pivot4.svg";
+import Pivot4SelectedIcon from "../../../../images/Pivot4_selected.svg";
+import Pivot5Icon from "../../../../images/Pivot5.svg";
+import Pivot5SelectedIcon from "../../../../images/Pivot5_selected.svg";
+
+const getPivotHeaderIcon = (currentStep: number, newStep: number): string => {
+  switch (newStep) {
+    case 0:
+      return Pivot1SelectedIcon;
+    case 1:
+      return newStep === currentStep ? Pivot2SelectedIcon : Pivot2Icon;
+    case 2:
+      return newStep === currentStep ? Pivot3SelectedIcon : Pivot3Icon;
+    case 3:
+      return newStep === currentStep ? Pivot4SelectedIcon : Pivot4Icon;
+    case 4:
+      return newStep === currentStep ? Pivot5SelectedIcon : Pivot5Icon;
+    default:
+      return "";
+  }
+};
+
+export const customPivotHeaderRenderer = (
+  link: IPivotItemProps,
+  defaultRenderer: (link?: IPivotItemProps) => JSX.Element | null,
+  currentStep: number,
+  newStep: number
+): JSX.Element | null => {
+  if (!link || !defaultRenderer) {
+    return null;
+  }
+
+  return (
+    <Stack horizontal verticalAlign="center">
+      {currentStep > newStep ? (
+        <Icon iconName="CompletedSolid" style={{ color: "#57A300", marginRight: 8 }} />
+      ) : (
+        <Image style={{ marginRight: 8 }} src={getPivotHeaderIcon(currentStep, newStep)} />
+      )}
+      {defaultRenderer({ ...link, itemIcon: undefined })}
+    </Stack>
+  );
+};
--- a/src/Explorer/Quickstart/VCoreMongoQuickstartCommands.ts
+++ b/src/Explorer/Quickstart/VCoreMongoQuickstartCommands.ts
@@ -0,0 +1,34 @@
+export const newDbAndCollectionCommand = `use quickstartDB
+db.createCollection('sampleCollection')`;
+
+export const newDbAndCollectionCommandForDisplay = `use quickstartDB // Create new database named 'quickstartDB' or switch to it if it already exists
+
+db.createCollection('sampleCollection') // Create new collection named 'sampleCollection'`;
+
+export const loadDataCommand = `db.sampleCollection.insertMany([
+    {title: "The Great Gatsby", author: "F. Scott Fitzgerald", pages: 180},
+    {title: "To Kill a Mockingbird", author: "Harper Lee", pages: 324},
+    {title: "1984", author: "George Orwell", pages: 328},
+    {title: "The Catcher in the Rye", author: "J.D. Salinger", pages: 277},
+    {title: "Moby-Dick", author: "Herman Melville", pages: 720},
+    {title: "Pride and Prejudice", author: "Jane Austen", pages: 279},
+    {title: "The Hobbit", author: "J.R.R. Tolkien", pages: 310},
+    {title: "War and Peace", author: "Leo Tolstoy", pages: 1392},
+    {title: "The Odyssey", author: "Homer", pages: 374},
+    {title: "Ulysses", author: "James Joyce", pages: 730}
+  ])`;
+
+export const queriesCommand = `db.sampleCollection.find({author: "George Orwell"})
+
+db.sampleCollection.find({pages: {$gt: 500}})
+
+db.sampleCollection.find({}).sort({pages: 1})`;
+
+export const queriesCommandForDisplay = `// Query to find all books written by "George Orwell"
+db.sampleCollection.find({author: "George Orwell"})
+
+// Query to find all books with more than 500 pages
+db.sampleCollection.find({pages: {$gt: 500}})
+
+// Query to find all books and sort them by the number of pages in ascending order
+db.sampleCollection.find({}).sort({pages: 1})`;
--- a/src/Explorer/Quickstart/VCoreMongoQuickstartGuide.tsx
+++ b/src/Explorer/Quickstart/VCoreMongoQuickstartGuide.tsx
@@ -0,0 +1,310 @@
+import {
+  DefaultButton,
+  IconButton,
+  Link,
+  Pivot,
+  PivotItem,
+  PrimaryButton,
+  Stack,
+  Text,
+  TextField,
+} from "@fluentui/react";
+import { sendMessage } from "Common/MessageHandler";
+import { MessageTypes } from "Contracts/ExplorerContracts";
+import { customPivotHeaderRenderer } from "Explorer/Quickstart/Shared/QuickstartRenderUtilities";
+import {
+  loadDataCommand,
+  newDbAndCollectionCommand,
+  newDbAndCollectionCommandForDisplay,
+  queriesCommand,
+  queriesCommandForDisplay,
+} from "Explorer/Quickstart/VCoreMongoQuickstartCommands";
+import { useTerminal } from "hooks/useTerminal";
+import React, { useState } from "react";
+import { ReactTabKind, useTabs } from "../../hooks/useTabs";
+
+enum GuideSteps {
+  Login,
+  NewTable,
+  DistributeTable,
+  LoadData,
+  Query,
+}
+
+export const VcoreMongoQuickstartGuide: React.FC = (): JSX.Element => {
+  const [currentStep, setCurrentStep] = useState<number>(0);
+
+  const onCopyBtnClicked = (selector: string): void => {
+    const textfield: HTMLInputElement = document.querySelector(selector);
+    textfield.select();
+    document.execCommand("copy");
+  };
+
+  return (
+    <Stack style={{ paddingTop: 8, height: "100%", width: "100%" }}>
+      <Stack style={{ flexGrow: 1, padding: "0 20px", overflow: "auto" }}>
+        <Text variant="xxLarge">Quick start guide</Text>
+        <Text variant="small">Getting started in Cosmos DB Mongo DB (vCore)</Text>
+        {currentStep < 5 && (
+          <Pivot
+            style={{ marginTop: 10, width: "100%" }}
+            selectedKey={GuideSteps[currentStep]}
+            onLinkClick={(item?: PivotItem) => setCurrentStep(Object.values(GuideSteps).indexOf(item.props.itemKey))}
+          >
+            <PivotItem
+              headerText="Connect"
+              onRenderItemLink={(props, defaultRenderer) =>
+                customPivotHeaderRenderer(props, defaultRenderer, currentStep, 0)
+              }
+              itemKey={GuideSteps[0]}
+              onClick={() => {
+                setCurrentStep(0);
+              }}
+            >
+              <Stack style={{ marginTop: 20 }}>
+                <Text>
+                  A hosted mongosh (mongo shell) is provided for this quick start. You are automatically logged in to
+                  mongosh, allowing you to interact with your database directly.
+                  <br />
+                  <br />
+                  When not in the quick start guide, connecting to Azure Cosmos DB for MongoDB vCore is straightforward
+                  using your connection string.
+                  <br />
+                  <br />
+                  <Link
+                    aria-label="View connection string"
+                    href=""
+                    onClick={() => sendMessage({ type: MessageTypes.OpenVCoreMongoConnectionStringsBlade })}
+                  >
+                    View connection string
+                  </Link>
+                  <br />
+                  <br />
+                  This string contains placeholders for &lt;user&gt; and &lt;password&gt;. Replace them with your chosen
+                  username and password to establish a secure connection to your cluster. Depending on your environment,
+                  you may need to adjust firewall rules or configure private endpoints in the &lsquo;Networking&rsquo;
+                  tab of your database settings, or modify your own network&apos;s firewall settings, to successfully
+                  connect.
+                </Text>
+              </Stack>
+            </PivotItem>
+            <PivotItem
+              headerText="New collection"
+              onRenderItemLink={(props, defaultRenderer) =>
+                customPivotHeaderRenderer(props, defaultRenderer, currentStep, 1)
+              }
+              itemKey={GuideSteps[1]}
+              onClick={() => setCurrentStep(1)}
+            >
+              <Stack style={{ marginTop: 20 }}>
+                <Text>
+                  In MongoDB, data is stored in collections, which are analogous to tables in relational databases.
+                  Collections contain documents, each of which consists of field and value pairs. The fields in
+                  documents are similar to the columns in a relational database table. One key advantage of MongoDB is
+                  that these documents within a collection can have different fields.
+                  <br />
+                  You&apos;re now going to create a new database and a collection within that database using the Mongo
+                  shell. In MongoDB, creating a database or a collection is implicit. This means that databases and
+                  collections are created when you first reference them in a command, so no explicit creation command is
+                  necessary.
+                </Text>
+                <DefaultButton
+                  style={{ marginTop: 16, width: 270 }}
+                  onClick={() => useTerminal.getState().sendMessage(newDbAndCollectionCommand)}
+                >
+                  Create new database and collection
+                </DefaultButton>
+                <Stack horizontal style={{ marginTop: 16 }}>
+                  <TextField
+                    id="newDbAndCollectionCommand"
+                    multiline
+                    rows={5}
+                    readOnly
+                    defaultValue={newDbAndCollectionCommandForDisplay}
+                    styles={{
+                      root: { width: "90%" },
+                      field: {
+                        backgroundColor: "#EEEEEE",
+                        fontFamily:
+                          "Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New",
+                      },
+                    }}
+                  />
+                  <IconButton
+                    iconProps={{
+                      iconName: "Copy",
+                    }}
+                    onClick={() => onCopyBtnClicked("#newDbAndCollectionCommand")}
+                  />
+                </Stack>
+              </Stack>
+            </PivotItem>
+            <PivotItem
+              headerText="Load data"
+              onRenderItemLink={(props, defaultRenderer) =>
+                customPivotHeaderRenderer(props, defaultRenderer, currentStep, 2)
+              }
+              itemKey={GuideSteps[2]}
+              onClick={() => setCurrentStep(2)}
+            >
+              <Stack style={{ marginTop: 20 }}>
+                <Text>
+                  Now that you&apos;ve created your database and collection, it&apos;s time to populate your collection
+                  with data. In MongoDB, data is stored as documents, which are structured as field and value pairs.
+                  <br />
+                  <br />
+                  Let&apos;s populate your sampleCollection with data. We&apos;ll add 10 documents representing books,
+                  each with a title, author, and number of pages, to your sampleCollection in the quickstartDB database.
+                </Text>
+                <DefaultButton
+                  style={{ marginTop: 16, width: 200 }}
+                  onClick={() => useTerminal.getState().sendMessage(loadDataCommand)}
+                >
+                  Create distributed table
+                </DefaultButton>
+                <Stack horizontal style={{ marginTop: 16 }}>
+                  <TextField
+                    id="loadDataCommand"
+                    multiline
+                    rows={5}
+                    readOnly
+                    defaultValue={loadDataCommand}
+                    styles={{
+                      root: { width: "90%" },
+                      field: {
+                        backgroundColor: "#EEEEEE",
+                        fontFamily:
+                          "Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New",
+                      },
+                    }}
+                  />
+                  <IconButton
+                    iconProps={{
+                      iconName: "Copy",
+                    }}
+                    onClick={() => onCopyBtnClicked("#loadDataCommand")}
+                  />
+                </Stack>
+              </Stack>
+            </PivotItem>
+            <PivotItem
+              headerText="Queries"
+              onRenderItemLink={(props, defaultRenderer) =>
+                customPivotHeaderRenderer(props, defaultRenderer, currentStep, 3)
+              }
+              itemKey={GuideSteps[3]}
+              onClick={() => setCurrentStep(3)}
+            >
+              <Stack style={{ marginTop: 20 }}>
+                <Text>
+                  Once you’ve inserted data into your sampleCollection, you can retrieve it using queries. MongoDB
+                  queries can be as simple or as complex as you need them to be, allowing you to filter, sort, and limit
+                  results.
+                </Text>
+                <DefaultButton
+                  style={{ marginTop: 16, width: 110 }}
+                  onClick={() => useTerminal.getState().sendMessage(queriesCommand)}
+                >
+                  Load data
+                </DefaultButton>
+                <Stack horizontal style={{ marginTop: 16 }}>
+                  <TextField
+                    id="queriesCommand"
+                    multiline
+                    rows={5}
+                    readOnly
+                    defaultValue={queriesCommandForDisplay}
+                    styles={{
+                      root: { width: "90%" },
+                      field: {
+                        backgroundColor: "#EEEEEE",
+                        fontFamily:
+                          "Consolas,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New",
+                      },
+                    }}
+                  />
+                  <IconButton
+                    iconProps={{
+                      iconName: "Copy",
+                    }}
+                    onClick={() => onCopyBtnClicked("#queriesCommand")}
+                  />
+                </Stack>
+              </Stack>
+            </PivotItem>
+            <PivotItem
+              headerText="Integrations"
+              onRenderItemLink={(props, defaultRenderer) =>
+                customPivotHeaderRenderer(props, defaultRenderer, currentStep, 4)
+              }
+              itemKey={GuideSteps[4]}
+              onClick={() => setCurrentStep(4)}
+            >
+              <Stack>
+                <Text>
+                  Cosmos DB for MongoDB vCore seamlessly integrates with Azure services. These integrations enable
+                  Cosmos DB for MongoDB and its partner products to directly interoperate, ensuring a smooth and unified
+                  experience, that just works.
+                </Text>
+                <Stack horizontal>
+                  <Stack style={{ marginTop: 20, marginRight: 20 }}>
+                    <Text>
+                      <b>First party integrations</b>
+                      <br />
+                      <br />
+                      <b>Azure Monitor</b>
+                      <br />
+                      Azure monitor provides comprehensive monitoring and diagnostics for Cosmos DB for Mongo DB. Learn
+                      more
+                      <br />
+                      <br />
+                      <b>Azure Networking</b>
+                      <br />
+                      Azure Networking seamlessly integrates with Azure Cosmos DB for Mongo DB for fast and secure data
+                      access. Learn more
+                      <br />
+                      <br />
+                      <b>PowerShell/CLI/ARM</b>
+                      <br />
+                      PowerShell/CLI/ARM seamlessly integrates with Azure Cosmos DB for Mongo DB for efficient
+                      management and automation. Learn more
+                    </Text>
+                  </Stack>
+                  <Stack style={{ marginTop: 20, marginLeft: 20 }}>
+                    <Text>
+                      <b>Application platforms integrations</b>
+                      <br />
+                      <br />
+                      <b>Vercel</b>
+                      <br />
+                      Vercel is a cloud platform for hosting static front ends and serverless functions, with instant
+                      deployments, automated scaling, and Next.js integration. Learn more
+                    </Text>
+                  </Stack>
+                </Stack>
+              </Stack>
+            </PivotItem>
+          </Pivot>
+        )}
+      </Stack>
+      <Stack horizontal style={{ padding: "16px 20px", boxShadow: "inset 0px 1px 0px rgba(204, 204, 204, 0.8)" }}>
+        <DefaultButton disabled={currentStep === 0} onClick={() => setCurrentStep(currentStep - 1)}>
+          Previous
+        </DefaultButton>
+        {currentStep < 4 && (
+          <PrimaryButton onClick={() => setCurrentStep(currentStep + 1)} style={{ marginLeft: 8 }}>
+            Next
+          </PrimaryButton>
+        )}
+        {currentStep === 4 && (
+          <PrimaryButton
+            onClick={() => useTabs.getState().closeReactTab(ReactTabKind.Quickstart)}
+            style={{ marginLeft: 8 }}
+          >
+            Done
+          </PrimaryButton>
+        )}
+      </Stack>
+    </Stack>
+  );
+};