Add check of account creation time to show carousel (#1284)

Co-authored-by: artrejo <ato9000@users.noreply.github.com>

src/Contracts/DataModels.ts

@@ -7,6 +7,11 @@ export interface DatabaseAccount {
   type: string;
   kind: string;
   properties: DatabaseAccountExtendedProperties;
+  systemData?: DatabaseAccountSystemData;
+}
+
+export interface DatabaseAccountSystemData {
+  createdAt: string;
 }
 
 export interface DatabaseAccountExtendedProperties {

src/Explorer/Tutorials/QuickstartCarousel.tsx

@@ -34,7 +34,6 @@ export const QuickstartCarousel: React.FC<QuickstartCarouselProps> = ({
             <DefaultButton text="Previous" style={{ margin: "16px 8px 16px 0" }} onClick={() => setPage(page - 1)} />
           )}
           <PrimaryButton
-            id="carouselNextBtn"
             style={{ margin: "16px 16px 16px 0" }}
             text={page === 3 ? "Finish" : "Next"}
             onClick={() => {

src/UserContext.ts

@@ -56,6 +56,8 @@ interface UserContext {
 export type ApiType = "SQL" | "Mongo" | "Gremlin" | "Tables" | "Cassandra";
 export type PortalEnv = "localhost" | "blackforest" | "fairfax" | "mooncake" | "prod" | "dev";
 
+const ONE_WEEK_IN_MS = 604800000;
+
 const features = extractFeatures();
 const { enableSDKoperations: useSDKOperations } = features;
 
@@ -71,10 +73,30 @@ const userContext: UserContext = {
   collectionCreationDefaults: CollectionCreationDefaults,
 };
 
+function isAccountNewerThanThresholdInMs(createdAt: string, threshold: number) {
+  let createdAtMs: number = Date.parse(createdAt);
+  if (isNaN(createdAtMs)) {
+    createdAtMs = 0;
+  }
+
+  const nowMs: number = Date.now();
+  const millisecsSinceAccountCreation = nowMs - createdAtMs;
+  return threshold > millisecsSinceAccountCreation;
+}
+
 function updateUserContext(newContext: Partial<UserContext>): void {
   if (newContext.databaseAccount) {
     newContext.apiType = apiType(newContext.databaseAccount);
-    if (!localStorage.getItem(newContext.databaseAccount.id)) {
+
+    const isNewAccount = isAccountNewerThanThresholdInMs(
+      newContext.databaseAccount?.systemData?.createdAt || "",
+      ONE_WEEK_IN_MS
+    );
+
+    if (
+      !localStorage.getItem(newContext.databaseAccount.id) &&
+      (userContext.isTryCosmosDBSubscription || isNewAccount)
+    ) {
       useCarousel.getState().setShouldOpen(true);
       localStorage.setItem(newContext.databaseAccount.id, "true");
     }

src/hooks/useKnockoutExplorer.ts

@@ -352,6 +352,7 @@ function updateContextsFromPortalMessage(inputs: DataExplorerInputsFrame) {
     hasWriteAccess: inputs.hasWriteAccess ?? true,
     addCollectionFlight: inputs.addCollectionDefaultFlight || CollectionCreation.DefaultAddCollectionDefaultFlight,
     collectionCreationDefaults: inputs.defaultCollectionThroughput,
+    isTryCosmosDBSubscription: inputs.isTryCosmosDBSubscription,
   });
   if (inputs.features) {
     Object.assign(userContext.features, extractFeatures(new URLSearchParams(inputs.features)));

test/cassandra/container.spec.ts

@@ -13,10 +13,6 @@ test("Cassandra keyspace and table CRUD", async () => {
   await page.waitForSelector("iframe");
   const explorer = await waitForExplorer();
 
-  // Click through quick start carousel
-  await explorer.click("#carouselNextBtn");
-  await explorer.click("#carouselNextBtn");
-
   await explorer.click('[data-test="New Table"]');
   await explorer.click('[aria-label="Keyspace id"]');
   await explorer.fill('[aria-label="Keyspace id"]', keyspaceId);

test/graph/container.spec.ts

@@ -12,10 +12,6 @@ test("Graph CRUD", async () => {
   await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-gremlin-runner");
   const explorer = await waitForExplorer();
 
-  // Click through quick start carousel
-  await explorer.click("#carouselNextBtn");
-  await explorer.click("#carouselNextBtn");
-
   // Create new database and graph
   await explorer.click('[data-test="New Graph"]');
   await explorer.fill('[aria-label="New database id"]', databaseId);

test/mongo/container.spec.ts

@@ -12,11 +12,6 @@ test("Mongo CRUD", async () => {
   await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-mongo-runner");
   const explorer = await waitForExplorer();
 
-  // Click through quick start carousel
-  await explorer.click("#carouselNextBtn");
-  await explorer.click("#carouselNextBtn");
-  await explorer.click("#carouselNextBtn");
-
   // Create new database and collection
   await explorer.click('[data-test="New Collection"]');
   await explorer.fill('[aria-label="New database id"]', databaseId);

test/mongo/container32.spec.ts

@@ -12,11 +12,6 @@ test("Mongo CRUD", async () => {
   await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-mongo32-runner");
   const explorer = await waitForExplorer();
 
-  // Click through quick start carousel
-  await explorer.click("#carouselNextBtn");
-  await explorer.click("#carouselNextBtn");
-  await explorer.click("#carouselNextBtn");
-
   // Create new database and collection
   await explorer.click('[data-test="New Collection"]');
   await explorer.fill('[aria-label="New database id"]', databaseId);

test/sql/container.spec.ts

@@ -12,11 +12,6 @@ test("SQL CRUD", async () => {
   await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-sql-runner-west-us");
   const explorer = await waitForExplorer();
 
-  // Click through quick start carousel
-  await explorer.click("#carouselNextBtn");
-  await explorer.click("#carouselNextBtn");
-  await explorer.click("#carouselNextBtn");
-
   await explorer.click('[data-test="New Container"]');
   await explorer.fill('[aria-label="New database id"]', databaseId);
   await explorer.fill('[aria-label="Container id"]', containerId);

test/tables/container.spec.ts

@@ -12,10 +12,6 @@ test("Tables CRUD", async () => {
   await page.goto("https://localhost:1234/testExplorer.html?accountName=portal-tables-runner");
   const explorer = await waitForExplorer();
 
-  // Click through quick start carousel
-  await explorer.click("#carouselNextBtn");
-  await explorer.click("#carouselNextBtn");
-
   await page.waitForSelector('text="Querying databases"', { state: "detached" });
   await explorer.click('[data-test="New Table"]');
   await explorer.fill('[aria-label="Table id"]', tableId);