From ac378bc36cfbcc0f96434b8ba975e0f2a9130e49 Mon Sep 17 00:00:00 2001
From: Bikram Choudhury <bchoudhury@microsoft.com>
Date: Mon, 25 May 2026 19:38:35 +0530
Subject: [PATCH] fix playwright tests

---
 .../AddCollectionPanel/AddCollectionPanel.tsx | 73 +++++++++++--------
 src/Explorer/Tabs/Tabs.tsx                    |  6 +-
 src/Explorer/Tree/Database.tsx                |  8 +-
 test/fx.ts                                    | 11 ++-
 4 files changed, 60 insertions(+), 38 deletions(-)

diff --git a/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx b/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx
index 52ec53371..a9df72a6c 100644
--- a/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx
+++ b/src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx
@@ -1,19 +1,19 @@
 import {
-  ActionButton,
-  Checkbox,
-  DefaultButton,
-  DirectionalHint,
-  Dropdown,
-  Icon,
-  IconButton,
-  IDropdownOption,
-  Link,
-  ProgressIndicator,
-  Separator,
-  Stack,
-  TeachingBubble,
-  Text,
-  TooltipHost,
+    ActionButton,
+    Checkbox,
+    DefaultButton,
+    DirectionalHint,
+    Dropdown,
+    Icon,
+    IconButton,
+    IDropdownOption,
+    Link,
+    ProgressIndicator,
+    Separator,
+    Stack,
+    TeachingBubble,
+    Text,
+    TooltipHost,
 } from "@fluentui/react";
 import * as Constants from "Common/Constants";
 import { createCollection } from "Common/dataAccess/createCollection";
@@ -24,21 +24,21 @@ import { AccountOverride } from "Contracts/DataModels";
 import { FullTextPoliciesComponent } from "Explorer/Controls/FullTextSeach/FullTextPoliciesComponent";
 import { VectorEmbeddingPoliciesComponent } from "Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent";
 import {
-  AllPropertiesIndexed,
-  AnalyticalStoreHeader,
-  ContainerVectorPolicyTooltipContent,
-  FullTextPolicyDefault,
-  getPartitionKey,
-  getPartitionKeyName,
-  getPartitionKeyPlaceHolder,
-  getPartitionKeyTooltipText,
-  isFreeTierAccount,
-  isSynapseLinkEnabled,
-  parseUniqueKeys,
-  scrollToSection,
-  SharedDatabaseDefault,
-  shouldShowAnalyticalStoreOptions,
-  UniqueKeysHeader,
+    AllPropertiesIndexed,
+    AnalyticalStoreHeader,
+    ContainerVectorPolicyTooltipContent,
+    FullTextPolicyDefault,
+    getPartitionKey,
+    getPartitionKeyName,
+    getPartitionKeyPlaceHolder,
+    getPartitionKeyTooltipText,
+    isFreeTierAccount,
+    isSynapseLinkEnabled,
+    parseUniqueKeys,
+    scrollToSection,
+    SharedDatabaseDefault,
+    shouldShowAnalyticalStoreOptions,
+    UniqueKeysHeader,
 } from "Explorer/Panes/AddCollectionPanel/AddCollectionPanelUtility";
 import { useSidePanel } from "hooks/useSidePanel";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
@@ -155,6 +155,19 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     if (this.state.errorMessage && this.state.errorMessage !== prevState.errorMessage) {
       scrollToSection("panelContainer");
     }
+
+    // When the user selects a different "Use existing" database, lazily load its offer so
+    // the "Provision dedicated throughput" checkbox can appear even if the initial
+    // loadDatabaseOffers() call could not load this database's offer (e.g. due to a
+    // transient ARM error shortly after the database was created).
+    if (!this.state.createNewDatabase && this.state.selectedDatabaseId !== prevState.selectedDatabaseId) {
+      const selectedDatabase = useDatabases
+        .getState()
+        .databases?.find((database) => database.id() === this.state.selectedDatabaseId);
+      if (selectedDatabase && !selectedDatabase.offer()) {
+        selectedDatabase.loadOffer().then(() => this.forceUpdate()).catch(console.error);
+      }
+    }
   }
 
   render(): JSX.Element {
diff --git a/src/Explorer/Tabs/Tabs.tsx b/src/Explorer/Tabs/Tabs.tsx
index aae8a6fb0..54fefedd1 100644
--- a/src/Explorer/Tabs/Tabs.tsx
+++ b/src/Explorer/Tabs/Tabs.tsx
@@ -144,11 +144,7 @@ function TabNav({ tab, active, tabKind }: { tab?: Tab; active: boolean; tabKind?
                 )}
                 {isQueryErrorThrown(tab, tabKind) && (
                   <TooltipHost content="Error">
-                    <img
-                      src={errorQuery}
-                      alt="Error"
-                      style={{ marginTop: 4, marginLeft: 4, width: 10, height: 11 }}
-                    />
+                    <img src={errorQuery} alt="Error" style={{ marginTop: 4, marginLeft: 4, width: 10, height: 11 }} />
                   </TooltipHost>
                 )}
               </span>
diff --git a/src/Explorer/Tree/Database.tsx b/src/Explorer/Tree/Database.tsx
index 753c991b7..df82558e7 100644
--- a/src/Explorer/Tree/Database.tsx
+++ b/src/Explorer/Tree/Database.tsx
@@ -256,8 +256,12 @@ export default class Database implements ViewModels.Database {
         databaseId: this.id(),
         databaseResourceId: this.self,
       };
-      this.offer(await readDatabaseOffer(params));
-      this.isOfferRead = true;
+      try {
+        this.offer(await readDatabaseOffer(params));
+        this.isOfferRead = true;
+      } catch {
+        // Don't propagate - leave isOfferRead false so it can be retried
+      }
     }
   }
 
diff --git a/test/fx.ts b/test/fx.ts
index 7c8dcbd3f..7c6f5ef95 100644
--- a/test/fx.ts
+++ b/test/fx.ts
@@ -438,7 +438,16 @@ export class DataExplorer {
    * There's only a single "primary" button, but we still require you to pass the label to confirm you're selecting the right button.
    */
   async globalCommandButton(label: string): Promise<Locator> {
-    await this.frame.getByTestId("GlobalCommands").click();
+    const globalCommands = this.frame.getByTestId("GlobalCommands");
+    // Prefer the explicit dropdown trigger so we always open the menu rather than
+    // triggering a primary action directly.  The SplitButton (wide sidebar) exposes
+    // "More commands" and the MenuButton (narrow sidebar) is labelled "New…".
+    const dropdownTrigger = globalCommands.getByRole("button", { name: "More commands" });
+    if (await dropdownTrigger.isVisible()) {
+      await dropdownTrigger.click();
+    } else {
+      await globalCommands.click();
+    }
     return this.frame.getByRole("menuitem", { name: label });
   }