Add componentDidMount for initial render

Co-authored-by: Satyapriya Bai <v-satybai@microsoft.com>

less/documentDB.less

@@ -2366,9 +2366,9 @@ a:link {
 .tabsManagerContainer {
   height: 100%;
   flex-grow: 1;
-  overflow: hidden;
+  display: flex;
+  flex-direction: column;
   min-height: 300px;
-  overflow-y: scroll;
 }
 
 .tabs {
@@ -2671,7 +2671,7 @@ a:link {
   width: @ActiveTabWidth;
 }
 
-.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper> .tabNavText {
+.nav-tabs > li.active > .tabNavContentContainer > .tab_Content > .contentWrapper > .tabNavText {
   font-weight: bolder;
   border-bottom: 2px solid rgba(0, 120, 212, 1);
 }
@@ -2708,68 +2708,68 @@ a:link {
     border-right: @ButtonBorderWidth solid @BaseMedium;
     white-space: nowrap;
     .contentWrapper {
-        .flex-display();
-        width: @ContentWrapper;
-    
-        .statusIconContainer {
-          width: @StatusIconContainerSize;
-          height: @StatusIconContainerSize;
-          margin-left: @SmallSpace;
-          display: inline-flex;
-    
-          .errorIconContainer {
-            width: @ErrorIconContainer;
-            height: @ErrorIconContainer;
-            margin-top: 1px;
-    
-            .errorIcon {
-              width: @ErrorIconWidth;
-              height: @LoadingErrorIconSize;
-              background-image: url(../images/error_no_outline.svg);
-              background-repeat: no-repeat;
-              background-position: center;
-              background-size: 3px;
-              display: block;
-              margin: 1px 0px 0px 6px;
-            }
-          }
-    
-          .errorIconContainer.actionsEnabled {
-            &:hover {
-              .hover();
-            }
-    
-            &:focus {
-              .focus();
-            }
-    
-            &:active {
-              .active();
-            }
-          }
-    
-          .errorIconContainer[tabindex]:active {
-            outline: none;
-          }
-    
-          .loadingIcon {
-            width: @LoadingErrorIconSize;
+      .flex-display();
+      width: @ContentWrapper;
+
+      .statusIconContainer {
+        width: @StatusIconContainerSize;
+        height: @StatusIconContainerSize;
+        margin-left: @SmallSpace;
+        display: inline-flex;
+
+        .errorIconContainer {
+          width: @ErrorIconContainer;
+          height: @ErrorIconContainer;
+          margin-top: 1px;
+
+          .errorIcon {
+            width: @ErrorIconWidth;
             height: @LoadingErrorIconSize;
-            margin: 0px 0px @SmallSpace @SmallSpace;
+            background-image: url(../images/error_no_outline.svg);
+            background-repeat: no-repeat;
+            background-position: center;
+            background-size: 3px;
+            display: block;
+            margin: 1px 0px 0px 6px;
           }
         }
-    
-        .tabNavText {
-          margin-left: @SmallSpace;
-          margin-right: 2px;
-          color: @BaseDark;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          white-space: nowrap;
-          flex-grow: 1;
+
+        .errorIconContainer.actionsEnabled {
+          &:hover {
+            .hover();
+          }
+
+          &:focus {
+            .focus();
+          }
+
+          &:active {
+            .active();
+          }
+        }
+
+        .errorIconContainer[tabindex]:active {
+          outline: none;
+        }
+
+        .loadingIcon {
+          width: @LoadingErrorIconSize;
+          height: @LoadingErrorIconSize;
+          margin: 0px 0px @SmallSpace @SmallSpace;
         }
       }
 
+      .tabNavText {
+        margin-left: @SmallSpace;
+        margin-right: 2px;
+        color: @BaseDark;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        flex-grow: 1;
+      }
+    }
+
     .tabIconSection {
       width: 29px;
       position: relative;

package.json

@@ -209,6 +209,7 @@
     "test": "rimraf coverage && jest",
     "test:debug": "jest --runInBand",
     "test:e2e": "jest -c ./jest.config.playwright.js --detectOpenHandles",
+    "test:file": "jest --coverage=false",
     "watch": "npm run start",
     "wait-for-server": "wait-on -t 240000 -i 5000 -v https-get://0.0.0.0:1234/",
     "build:ase": "gulp build:ase",
@@ -244,4 +245,4 @@
     "printWidth": 120,
     "endOfLine": "auto"
   }
-}
+}

src/Common/Constants.ts

@@ -255,6 +255,7 @@ export class HttpHeaders {
   public static partitionKey: string = "x-ms-documentdb-partitionkey";
   public static migrateOfferToManualThroughput: string = "x-ms-cosmos-migrate-offer-to-manual-throughput";
   public static migrateOfferToAutopilot: string = "x-ms-cosmos-migrate-offer-to-autopilot";
+  public static xAPIKey: string = "X-API-Key";
 }
 
 export class ContentType {

src/ConfigContext.ts

@@ -42,6 +42,10 @@ export interface ConfigContext {
   ARM_API_VERSION: string;
   GRAPH_ENDPOINT: string;
   GRAPH_API_VERSION: string;
+  // This is the endpoint to get offering Ids to be used to fetch prices. Refer to this doc: https://learn.microsoft.com/en-us/rest/api/marketplacecatalog/dataplane/skus/list?view=rest-marketplacecatalog-dataplane-2023-05-01-preview&tabs=HTTP
+  CATALOG_ENDPOINT: string;
+  CATALOG_API_VERSION: string;
+  CATALOG_API_KEY: string;
   ARCADIA_ENDPOINT: string;
   ARCADIA_LIVY_ENDPOINT_DNS_ZONE: string;
   BACKEND_ENDPOINT?: string;
@@ -93,6 +97,9 @@ let configContext: Readonly<ConfigContext> = {
   ARM_API_VERSION: "2016-06-01",
   GRAPH_ENDPOINT: "https://graph.microsoft.com",
   GRAPH_API_VERSION: "1.6",
+  CATALOG_ENDPOINT: "https://catalogapi.azure.com/",
+  CATALOG_API_VERSION: "2023-05-01-preview",
+  CATALOG_API_KEY: "",
   ARCADIA_ENDPOINT: "https://workspaceartifacts.projectarcadia.net",
   ARCADIA_LIVY_ENDPOINT_DNS_ZONE: "dev.azuresynapse.net",
   GITHUB_CLIENT_ID: "6cb2f63cf6f7b5cbdeca", // Registered OAuth app: https://github.com/organizations/AzureCosmosDBNotebooks/settings/applications/1189306
@@ -192,6 +199,9 @@ if (process.env.NODE_ENV === "development") {
   updateConfigContext({
     PROXY_PATH: "/proxy",
     EMULATOR_ENDPOINT: "https://localhost:8081",
+    PORTAL_BACKEND_ENDPOINT: PortalBackendEndpoints.Mpac,
+    MONGO_PROXY_ENDPOINT: MongoProxyEndpoints.Mpac,
+    CASSANDRA_PROXY_ENDPOINT: CassandraProxyEndpoints.Mpac,
   });
 }
 

src/Contracts/ViewModels.ts

@@ -425,6 +425,7 @@ export interface SelfServeFrameInputs {
   authorizationToken: string;
   csmEndpoint: string;
   flights?: readonly string[];
+  catalogAPIKey: string;
 }
 
 export class MonacoEditorSettings {

src/Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent.tsx

@@ -1,4 +1,4 @@
-import { Icon, Label, Stack } from "@fluentui/react";
+import { DirectionalHint, Icon, Label, Stack, TooltipHost } from "@fluentui/react";
 import * as React from "react";
 import { NormalizedEventKey } from "../../../Common/Constants";
 import { accordionStackTokens } from "../Settings/SettingsRenderUtils";
@@ -8,6 +8,7 @@ export interface CollapsibleSectionProps {
   isExpandedByDefault: boolean;
   onExpand?: () => void;
   children: JSX.Element;
+  tooltipContent?: string | JSX.Element | JSX.Element[];
 }
 
 export interface CollapsibleSectionState {
@@ -55,6 +56,19 @@ export class CollapsibleSectionComponent extends React.Component<CollapsibleSect
         >
           <Icon iconName={this.state.isExpanded ? "ChevronDown" : "ChevronRight"} />
           <Label>{this.props.title}</Label>
+          {this.props.tooltipContent && (
+            <TooltipHost
+              directionalHint={DirectionalHint.bottomLeftEdge}
+              content={this.props.tooltipContent}
+              styles={{
+                root: {
+                  marginLeft: "0 !important",
+                },
+              }}
+            >
+              <Icon iconName="Info" className="panelInfoIcon" tabIndex={0} />
+            </TooltipHost>
+          )}
         </Stack>
         {this.state.isExpanded && this.props.children}
       </>

src/Explorer/Controls/ThroughputInput/ThroughputInput.less

@@ -20,6 +20,10 @@
   outline-offset: 2px;
 }
 
+.outlineNone{
+  outline: none !important;
+}
+
 .copyQuery:focus::after,
 .deleteQuery:focus::after {
   outline: none !important;

src/Explorer/Controls/ThroughputInput/ThroughputInput.tsx

@@ -223,7 +223,7 @@ export const ThroughputInput: FunctionComponent<ThroughputInputProps> = ({
           <Text variant="small" aria-label="capacity calculator of azure cosmos db">
             Estimate your required RU/s with{" "}
             <Link
-              className="underlinedLink"
+              className="underlinedLink outlineNone"
               target="_blank"
               href="https://cosmos.azure.com/capacitycalculator/"
               aria-label="capacity calculator of azure cosmos db"

src/Explorer/Controls/ThroughputInput/__snapshots__/ThroughputInput.test.tsx.snap

@@ -733,13 +733,13 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
              
             <StyledLinkBase
               aria-label="capacity calculator of azure cosmos db"
-              className="underlinedLink"
+              className="underlinedLink outlineNone"
               href="https://cosmos.azure.com/capacitycalculator/"
               target="_blank"
             >
               <LinkBase
                 aria-label="capacity calculator of azure cosmos db"
-                className="underlinedLink"
+                className="underlinedLink outlineNone"
                 href="https://cosmos.azure.com/capacitycalculator/"
                 styles={[Function]}
                 target="_blank"
@@ -1019,7 +1019,7 @@ exports[`ThroughputInput Pane should render Default properly 1`] = `
               >
                 <a
                   aria-label="capacity calculator of azure cosmos db"
-                  className="ms-Link underlinedLink root-117"
+                  className="ms-Link underlinedLink outlineNone root-117"
                   href="https://cosmos.azure.com/capacitycalculator/"
                   onClick={[Function]}
                   target="_blank"

src/Explorer/Explorer.tsx

@@ -1157,21 +1157,25 @@ export default class Explorer {
   }
 
   public async refreshSampleData(): Promise<void> {
-    if (!userContext.sampleDataConnectionInfo) {
+    try {
+      if (!userContext.sampleDataConnectionInfo || useDatabases.getState().sampleDataResourceTokenCollection) {
+        return;
+      }
+      const collection: DataModels.Collection = await readSampleCollection();
+      if (!collection) {
+        return;
+      }
+
+      const databaseId = userContext.sampleDataConnectionInfo?.databaseId;
+      if (!databaseId) {
+        return;
+      }
+
+      const sampleDataResourceTokenCollection = new ResourceTokenCollection(this, databaseId, collection, true);
+      useDatabases.setState({ sampleDataResourceTokenCollection });
+    } catch (error) {
+      Logger.logError(getErrorMessage(error), "Explorer");
       return;
     }
-
-    const collection: DataModels.Collection = await readSampleCollection();
-    if (!collection) {
-      return;
-    }
-
-    const databaseId = userContext.sampleDataConnectionInfo?.databaseId;
-    if (!databaseId) {
-      return;
-    }
-
-    const sampleDataResourceTokenCollection = new ResourceTokenCollection(this, databaseId, collection, true);
-    useDatabases.setState({ sampleDataResourceTokenCollection });
   }
 }

src/Explorer/Menus/NotificationConsole/NotificationConsoleComponent.tsx

@@ -57,6 +57,10 @@ export class NotificationConsoleComponent extends React.Component<
     this.prevHeaderStatus = undefined;
   }
 
+  public componentDidMount() {
+    this.componentDidUpdate(this.props, this.state);
+  }
+
   public componentDidUpdate(
     prevProps: NotificationConsoleComponentProps,
     prevState: NotificationConsoleComponentState,
@@ -265,20 +269,29 @@ export class NotificationConsoleComponent extends React.Component<
   };
 
   private updateConsoleData = (prevProps: NotificationConsoleComponentProps): void => {
+    let updatedConsoleData: ConsoleData[] = [...this.state.allConsoleData];
+    let refresh = false;
+
     if (!this.areConsoleDataEqual(this.props.consoleData, prevProps.consoleData)) {
-      this.setState({ allConsoleData: [this.props.consoleData, ...this.state.allConsoleData] });
+      updatedConsoleData = [this.props.consoleData, ...updatedConsoleData];
+      refresh = true;
     }
 
-    if (
-      this.props.inProgressConsoleDataIdToBeDeleted &&
-      prevProps.inProgressConsoleDataIdToBeDeleted !== this.props.inProgressConsoleDataIdToBeDeleted
-    ) {
-      const allConsoleData = this.state.allConsoleData.filter(
+    if (this.props.inProgressConsoleDataIdToBeDeleted) {
+      const hasMatchingItem = updatedConsoleData.some(
         (data: ConsoleData) =>
-          !(data.type === ConsoleDataType.InProgress && data.id === this.props.inProgressConsoleDataIdToBeDeleted),
+          data.type === ConsoleDataType.InProgress && data.id === this.props.inProgressConsoleDataIdToBeDeleted,
       );
-      this.setState({ allConsoleData });
+
+      if (hasMatchingItem) {
+        updatedConsoleData = updatedConsoleData.filter(
+          (data: ConsoleData) =>
+            !(data.type === ConsoleDataType.InProgress && data.id === this.props.inProgressConsoleDataIdToBeDeleted),
+        );
+        refresh = true;
+      }
     }
+    refresh && this.setState({ allConsoleData: updatedConsoleData });
   };
 
   private areConsoleDataEqual = (currentData: ConsoleData, prevData: ConsoleData): boolean => {

src/Explorer/Panes/AddCollectionPanel.tsx

@@ -21,7 +21,7 @@ import { getErrorMessage, getErrorStack } from "Common/ErrorHandlingUtils";
 import { configContext, Platform } from "ConfigContext";
 import * as DataModels from "Contracts/DataModels";
 import { SubscriptionType } from "Contracts/SubscriptionType";
-import { EditorReact } from "Explorer/Controls/Editor/EditorReact";
+import { AddVectorEmbeddingPolicyForm } from "Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm";
 import { useSidePanel } from "hooks/useSidePanel";
 import { useTeachingBubble } from "hooks/useTeachingBubble";
 import React from "react";
@@ -82,22 +82,6 @@ export const AllPropertiesIndexed: DataModels.IndexingPolicy = {
   excludedPaths: [],
 };
 
-const DefaultDatabaseVectorIndex: DataModels.IndexingPolicy = {
-  indexingMode: "consistent",
-  automatic: true,
-  includedPaths: [
-    {
-      path: "/*",
-    },
-  ],
-  excludedPaths: [
-    {
-      path: '/"_etag"/?',
-    },
-  ],
-  vectorIndexes: [],
-};
-
 export const DefaultVectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy = {
   vectorEmbeddings: [],
 };
@@ -122,8 +106,9 @@ export interface AddCollectionPanelState {
   isExecuting: boolean;
   isThroughputCapExceeded: boolean;
   teachingBubbleStep: number;
-  vectorIndexingPolicy: string;
-  vectorEmbeddingPolicy: string;
+  vectorIndexingPolicy: DataModels.VectorIndex[];
+  vectorEmbeddingPolicy: DataModels.VectorEmbedding[];
+  vectorPolicyValidated: boolean;
 }
 
 export class AddCollectionPanel extends React.Component<AddCollectionPanelProps, AddCollectionPanelState> {
@@ -159,8 +144,9 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       isExecuting: false,
       isThroughputCapExceeded: false,
       teachingBubbleStep: 0,
-      vectorIndexingPolicy: JSON.stringify(DefaultDatabaseVectorIndex, null, 2),
-      vectorEmbeddingPolicy: JSON.stringify(DefaultVectorEmbeddingPolicy, null, 2),
+      vectorEmbeddingPolicy: [],
+      vectorIndexingPolicy: [],
+      vectorPolicyValidated: true,
     };
   }
 
@@ -896,60 +882,28 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
           )}
           {this.shouldShowVectorSearchParameters() && (
             <Stack>
-              <CollapsibleSectionComponent
-                title="Indexing Policy"
-                isExpandedByDefault={false}
-                onExpand={() => {
-                  this.scrollToSection("collapsibleVectorPolicySectionContent");
-                }}
-              >
-                <Stack id="collapsibleVectorPolicySectionContent" styles={{ root: { position: "relative" } }}>
-                  <Link href="https://aka.ms/CosmosDBVectorSetup" target="_blank">
-                    Learn more
-                  </Link>
-                  <EditorReact
-                    language={"json"}
-                    content={this.state.vectorIndexingPolicy}
-                    isReadOnly={false}
-                    wordWrap={"on"}
-                    ariaLabel={"Editing indexing policy"}
-                    lineNumbers={"on"}
-                    scrollBeyondLastLine={false}
-                    spinnerClassName="panelSectionSpinner"
-                    monacoContainerStyles={{
-                      minHeight: 200,
-                    }}
-                    onContentChanged={(newIndexingPolicy: string) => this.setVectorIndexingPolicy(newIndexingPolicy)}
-                  />
-                </Stack>
-              </CollapsibleSectionComponent>
               <CollapsibleSectionComponent
                 title="Container Vector Policy"
                 isExpandedByDefault={false}
                 onExpand={() => {
                   this.scrollToSection("collapsibleVectorPolicySectionContent");
                 }}
+                tooltipContent={this.getContainerVectorPolicyTooltipContent()}
               >
                 <Stack id="collapsibleVectorPolicySectionContent" styles={{ root: { position: "relative" } }}>
-                  <Link href="https://aka.ms/CosmosDBVectorSetup" target="_blank">
-                    Learn more
-                  </Link>
-                  <EditorReact
-                    language={"json"}
-                    content={this.state.vectorEmbeddingPolicy}
-                    isReadOnly={false}
-                    wordWrap={"on"}
-                    ariaLabel={"Editing container vector policy"}
-                    lineNumbers={"on"}
-                    scrollBeyondLastLine={false}
-                    spinnerClassName="panelSectionSpinner"
-                    monacoContainerStyles={{
-                      minHeight: 200,
-                    }}
-                    onContentChanged={(newVectorEmbeddingPolicy: string) =>
-                      this.setVectorEmbeddingPolicy(newVectorEmbeddingPolicy)
-                    }
-                  />
+                  <Stack styles={{ root: { paddingLeft: 40 } }}>
+                    <AddVectorEmbeddingPolicyForm
+                      vectorEmbedding={this.state.vectorEmbeddingPolicy}
+                      vectorIndex={this.state.vectorIndexingPolicy}
+                      onVectorEmbeddingChange={(
+                        vectorEmbeddingPolicy: DataModels.VectorEmbedding[],
+                        vectorIndexingPolicy: DataModels.VectorIndex[],
+                        vectorPolicyValidated: boolean,
+                      ) => {
+                        this.setState({ vectorEmbeddingPolicy, vectorIndexingPolicy, vectorPolicyValidated });
+                      }}
+                    />
+                  </Stack>
                 </Stack>
               </CollapsibleSectionComponent>
             </Stack>
@@ -1159,13 +1113,13 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     }
   }
 
-  private setVectorEmbeddingPolicy(vectorEmbeddingPolicy: string): void {
+  private setVectorEmbeddingPolicy(vectorEmbeddingPolicy: DataModels.VectorEmbedding[]): void {
     this.setState({
       vectorEmbeddingPolicy,
     });
   }
 
-  private setVectorIndexingPolicy(vectorIndexingPolicy: string): void {
+  private setVectorIndexingPolicy(vectorIndexingPolicy: DataModels.VectorIndex[]): void {
     this.setState({
       vectorIndexingPolicy,
     });
@@ -1251,6 +1205,18 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
     );
   }
 
+  private getContainerVectorPolicyTooltipContent(): JSX.Element {
+    return (
+      <Text variant="small">
+        Describe any properties in your data that contain vectors, so that they can be made available for similarity
+        queries.{" "}
+        <Link target="_blank" href="https://aka.ms/CosmosDBVectorSetup">
+          Learn more
+        </Link>
+      </Text>
+    );
+  }
+
   private shouldShowCollectionThroughputInput(): boolean {
     if (isServerlessAccount()) {
       return false;
@@ -1370,20 +1336,9 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
       return false;
     }
 
-    if (this.shouldShowVectorSearchParameters()) {
-      try {
-        JSON.parse(this.state.vectorIndexingPolicy) as DataModels.IndexingPolicy;
-      } catch (e) {
-        this.setState({ errorMessage: "Invalid JSON format for indexingPolicy" });
-        return false;
-      }
-
-      try {
-        JSON.parse(this.state.vectorEmbeddingPolicy) as DataModels.VectorEmbeddingPolicy;
-      } catch (e) {
-        this.setState({ errorMessage: "Invalid JSON format for vectorEmbeddingPolicy" });
-        return false;
-      }
+    if (this.shouldShowVectorSearchParameters() && !this.state.vectorPolicyValidated) {
+      this.setState({ errorMessage: "Please fix errors in container vector policy" });
+      return false;
     }
 
     return true;
@@ -1461,15 +1416,17 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
         }
       : undefined;
 
-    let indexingPolicy: DataModels.IndexingPolicy = this.state.enableIndexing
+    const indexingPolicy: DataModels.IndexingPolicy = this.state.enableIndexing
       ? AllPropertiesIndexed
       : SharedDatabaseDefault;
 
     let vectorEmbeddingPolicy: DataModels.VectorEmbeddingPolicy;
 
     if (this.shouldShowVectorSearchParameters()) {
-      indexingPolicy = JSON.parse(this.state.vectorIndexingPolicy);
-      vectorEmbeddingPolicy = JSON.parse(this.state.vectorEmbeddingPolicy);
+      indexingPolicy.vectorIndexes = this.state.vectorIndexingPolicy;
+      vectorEmbeddingPolicy = {
+        vectorEmbeddings: this.state.vectorEmbeddingPolicy,
+      };
     }
 
     const telemetryData = {

src/Explorer/Panes/SettingsPane/SettingsPane.tsx

@@ -12,6 +12,7 @@ import * as Constants from "Common/Constants";
 import { SplitterDirection } from "Common/Splitter";
 import { InfoTooltip } from "Common/Tooltip/InfoTooltip";
 import { configContext } from "ConfigContext";
+import { useDatabases } from "Explorer/useDatabases";
 import {
   DefaultRUThreshold,
   LocalStorageUtility,
@@ -107,7 +108,10 @@ export const SettingsPane: FunctionComponent<{ explorer: Explorer }> = ({
   const shouldShowCrossPartitionOption = userContext.apiType !== "Gremlin";
   const shouldShowParallelismOption = userContext.apiType !== "Gremlin";
   const shouldShowPriorityLevelOption = PriorityBasedExecutionUtils.isFeatureEnabled();
-  const shouldShowCopilotSampleDBOption = userContext.apiType === "SQL" && useQueryCopilot.getState().copilotEnabled;
+  const shouldShowCopilotSampleDBOption =
+    userContext.apiType === "SQL" &&
+    useQueryCopilot.getState().copilotEnabled &&
+    useDatabases.getState().sampleDataResourceTokenCollection;
   const handlerOnSubmit = async () => {
     setIsExecuting(true);
 

src/Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm.test.tsx

@@ -0,0 +1,84 @@
+import "@testing-library/jest-dom/extend-expect";
+import { RenderResult, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { VectorEmbedding, VectorIndex } from "Contracts/DataModels";
+import React from "react";
+import { AddVectorEmbeddingPolicyForm } from "./AddVectorEmbeddingPolicyForm";
+
+const mockVectorEmbedding: VectorEmbedding[] = [
+  { path: "/vector1", dataType: "float32", distanceFunction: "euclidean", dimensions: 0 },
+];
+
+const mockVectorIndex: VectorIndex[] = [{ path: "/vector1", type: "flat" }];
+
+const mockOnVectorEmbeddingChange = jest.fn();
+
+describe("AddVectorEmbeddingPolicyForm", () => {
+  let component: RenderResult;
+
+  beforeEach(() => {
+    component = render(
+      <AddVectorEmbeddingPolicyForm
+        vectorEmbedding={mockVectorEmbedding}
+        vectorIndex={mockVectorIndex}
+        onVectorEmbeddingChange={mockOnVectorEmbeddingChange}
+      />,
+    );
+  });
+
+  test("renders correctly", () => {
+    expect(screen.getByText("Vector embedding 1")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("/vector1")).toBeInTheDocument();
+  });
+
+  test("calls onVectorEmbeddingChange on adding a new vector embedding", () => {
+    fireEvent.click(screen.getByText("Add vector embedding"));
+    expect(mockOnVectorEmbeddingChange).toHaveBeenCalled();
+  });
+
+  test("calls onDelete when delete button is clicked", async () => {
+    const deleteButton = component.container.querySelector("#delete-vector-policy-1");
+    fireEvent.click(deleteButton);
+    expect(mockOnVectorEmbeddingChange).toHaveBeenCalled();
+    expect(screen.queryByText("Vector embedding 1")).toBeNull();
+  });
+
+  test("calls onVectorEmbeddingPathChange on input change", () => {
+    fireEvent.change(screen.getByPlaceholderText("/vector1"), { target: { value: "/newPath" } });
+    expect(mockOnVectorEmbeddingChange).toHaveBeenCalled();
+  });
+
+  test("validates input correctly", async () => {
+    fireEvent.change(screen.getByPlaceholderText("/vector1"), { target: { value: "" } });
+    await waitFor(() => expect(screen.getByText("Vector embedding path should not be empty")).toBeInTheDocument(), {
+      timeout: 1500,
+    });
+    await waitFor(
+      () =>
+        expect(
+          screen.getByText("Vector embedding dimension must be greater than 0 and less than or equal 4096"),
+        ).toBeInTheDocument(),
+      {
+        timeout: 1500,
+      },
+    );
+    fireEvent.change(component.container.querySelector("#vector-policy-dimension-1"), { target: { value: "4096" } });
+    fireEvent.change(screen.getByPlaceholderText("/vector1"), { target: { value: "/vector1" } });
+    await waitFor(() => expect(screen.queryByText("Vector embedding path should not be empty")).toBeNull(), {
+      timeout: 1500,
+    });
+    await waitFor(
+      () => expect(screen.queryByText("Maximum allowed dimension for flat index is 505")).toBeInTheDocument(),
+      {
+        timeout: 1500,
+      },
+    );
+  });
+
+  test("duplicate vector path is not allowed", async () => {
+    fireEvent.click(screen.getByText("Add vector embedding"));
+    fireEvent.change(component.container.querySelector("#vector-policy-path-2"), { target: { value: "/vector1" } });
+    await waitFor(() => expect(screen.queryByText("Vector embedding path is already defined")).toBeNull(), {
+      timeout: 1500,
+    });
+  });
+});

src/Explorer/Panes/VectorSearchPanel/AddVectorEmbeddingPolicyForm.tsx

@@ -0,0 +1,300 @@
+import {
+  DefaultButton,
+  Dropdown,
+  IDropdownOption,
+  IStyleFunctionOrObject,
+  ITextFieldStyleProps,
+  ITextFieldStyles,
+  IconButton,
+  Label,
+  Stack,
+  TextField,
+} from "@fluentui/react";
+import { VectorEmbedding, VectorIndex } from "Contracts/DataModels";
+import { CollapsibleSectionComponent } from "Explorer/Controls/CollapsiblePanel/CollapsibleSectionComponent";
+import {
+  getDataTypeOptions,
+  getDistanceFunctionOptions,
+  getIndexTypeOptions,
+} from "Explorer/Panes/VectorSearchPanel/VectorSearchUtils";
+import React, { FunctionComponent, useState } from "react";
+
+export interface IAddVectorEmbeddingPolicyFormProps {
+  vectorEmbedding: VectorEmbedding[];
+  vectorIndex: VectorIndex[];
+  onVectorEmbeddingChange: (
+    vectorEmbeddings: VectorEmbedding[],
+    vectorIndexingPolicies: VectorIndex[],
+    validationPassed: boolean,
+  ) => void;
+}
+
+export interface VectorEmbeddingPolicyData {
+  path: string;
+  dataType: VectorEmbedding["dataType"];
+  distanceFunction: VectorEmbedding["distanceFunction"];
+  dimensions: number;
+  indexType: VectorIndex["type"] | "none";
+  pathError: string;
+  dimensionsError: string;
+}
+
+type VectorEmbeddingPolicyProperty = "dataType" | "distanceFunction" | "indexType";
+
+const textFieldStyles: IStyleFunctionOrObject<ITextFieldStyleProps, ITextFieldStyles> = {
+  fieldGroup: {
+    height: 27,
+  },
+  field: {
+    fontSize: 12,
+    padding: "0 8px",
+  },
+};
+
+const dropdownStyles = {
+  title: {
+    height: 27,
+    lineHeight: "24px",
+    fontSize: 12,
+  },
+  dropdown: {
+    height: 27,
+    lineHeight: "24px",
+  },
+  dropdownItem: {
+    fontSize: 12,
+  },
+};
+
+export const AddVectorEmbeddingPolicyForm: FunctionComponent<IAddVectorEmbeddingPolicyFormProps> = ({
+  vectorEmbedding,
+  vectorIndex,
+  onVectorEmbeddingChange,
+}): JSX.Element => {
+  const onVectorEmbeddingPathError = (path: string, index?: number): string => {
+    let error = "";
+    if (!path) {
+      error = "Vector embedding path should not be empty";
+    }
+    if (
+      index >= 0 &&
+      vectorEmbeddingPolicyData?.find(
+        (vectorEmbedding: VectorEmbeddingPolicyData, dataIndex: number) =>
+          dataIndex !== index && vectorEmbedding.path === path,
+      )
+    ) {
+      error = "Vector embedding path is already defined";
+    }
+    return error;
+  };
+
+  const onVectorEmbeddingDimensionError = (dimension: number, indexType: VectorIndex["type"] | "none"): string => {
+    let error = "";
+    if (dimension <= 0 || dimension > 4096) {
+      error = "Vector embedding dimension must be greater than 0 and less than or equal 4096";
+    }
+    if (indexType === "flat" && dimension > 505) {
+      error = "Maximum allowed dimension for flat index is 505";
+    }
+    return error;
+  };
+
+  const initializeData = (vectorEmbedding: VectorEmbedding[], vectorIndex: VectorIndex[]) => {
+    const mergedData: VectorEmbeddingPolicyData[] = [];
+    vectorEmbedding.forEach((embedding) => {
+      const matchingIndex = vectorIndex.find((index) => index.path === embedding.path);
+      mergedData.push({
+        ...embedding,
+        indexType: matchingIndex?.type || "none",
+        pathError: onVectorEmbeddingPathError(embedding.path),
+        dimensionsError: onVectorEmbeddingDimensionError(embedding.dimensions, matchingIndex?.type || "none"),
+      });
+    });
+    return mergedData;
+  };
+
+  const [vectorEmbeddingPolicyData, setVectorEmbeddingPolicyData] = useState<VectorEmbeddingPolicyData[]>(
+    initializeData(vectorEmbedding, vectorIndex),
+  );
+
+  React.useEffect(() => {
+    propagateData();
+  }, [vectorEmbeddingPolicyData]);
+
+  const propagateData = () => {
+    const vectorEmbeddings: VectorEmbedding[] = vectorEmbeddingPolicyData.map((policy: VectorEmbeddingPolicyData) => ({
+      dataType: policy.dataType,
+      dimensions: policy.dimensions,
+      distanceFunction: policy.distanceFunction,
+      path: policy.path,
+    }));
+    const vectorIndexingPolicies: VectorIndex[] = vectorEmbeddingPolicyData
+      .filter((policy: VectorEmbeddingPolicyData) => policy.indexType !== "none")
+      .map(
+        (policy) =>
+          ({
+            path: policy.path,
+            type: policy.indexType,
+          }) as VectorIndex,
+      );
+    const validationPassed = vectorEmbeddingPolicyData.every(
+      (policy: VectorEmbeddingPolicyData) => policy.pathError === "" && policy.dimensionsError === "",
+    );
+    onVectorEmbeddingChange(vectorEmbeddings, vectorIndexingPolicies, validationPassed);
+  };
+
+  const onVectorEmbeddingPathChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value.trim();
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    if (!vectorEmbeddings[index]?.path && !value.startsWith("/")) {
+      vectorEmbeddings[index].path = "/" + value;
+    } else {
+      vectorEmbeddings[index].path = value;
+    }
+    const error = onVectorEmbeddingPathError(value, index);
+    vectorEmbeddings[index].pathError = error;
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  const onVectorEmbeddingDimensionsChange = (index: number, event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = parseInt(event.target.value.trim()) || 0;
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    const vectorEmbedding = vectorEmbeddings[index];
+    vectorEmbeddings[index].dimensions = value;
+    const error = onVectorEmbeddingDimensionError(value, vectorEmbedding.indexType);
+    vectorEmbeddings[index].dimensionsError = error;
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  const onVectorEmbeddingIndexTypeChange = (index: number, option: IDropdownOption): void => {
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    const vectorEmbedding = vectorEmbeddings[index];
+    vectorEmbeddings[index].indexType = option.key as never;
+    const error = onVectorEmbeddingDimensionError(vectorEmbedding.dimensions, vectorEmbedding.indexType);
+    vectorEmbeddings[index].dimensionsError = error;
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  const onVectorEmbeddingPolicyChange = (
+    index: number,
+    option: IDropdownOption,
+    property: VectorEmbeddingPolicyProperty,
+  ): void => {
+    const vectorEmbeddings = [...vectorEmbeddingPolicyData];
+    vectorEmbeddings[index][property] = option.key as never;
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  const onAdd = () => {
+    setVectorEmbeddingPolicyData([
+      ...vectorEmbeddingPolicyData,
+      {
+        path: "",
+        dataType: "float32",
+        distanceFunction: "euclidean",
+        dimensions: 0,
+        indexType: "none",
+        pathError: onVectorEmbeddingPathError(""),
+        dimensionsError: onVectorEmbeddingDimensionError(0, "none"),
+      },
+    ]);
+  };
+
+  const onDelete = (index: number) => {
+    const vectorEmbeddings = vectorEmbeddingPolicyData.filter((_uniqueKey, j) => index !== j);
+    setVectorEmbeddingPolicyData(vectorEmbeddings);
+  };
+
+  return (
+    <Stack tokens={{ childrenGap: 4 }}>
+      {vectorEmbeddingPolicyData.length > 0 &&
+        vectorEmbeddingPolicyData.map((vectorEmbeddingPolicy: VectorEmbeddingPolicyData, index: number) => (
+          <CollapsibleSectionComponent key={index} isExpandedByDefault={true} title={`Vector embedding ${index + 1}`}>
+            <Stack horizontal tokens={{ childrenGap: 4 }}>
+              <Stack
+                styles={{
+                  root: {
+                    margin: "0 0 6px 20px !important",
+                    paddingLeft: 20,
+                    width: "80%",
+                    borderLeft: "1px solid",
+                  },
+                }}
+              >
+                <Stack>
+                  <Label styles={{ root: { fontSize: 12 } }}>Path</Label>
+                  <TextField
+                    id={`vector-policy-path-${index + 1}`}
+                    required={true}
+                    placeholder="/vector1"
+                    styles={textFieldStyles}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) => onVectorEmbeddingPathChange(index, event)}
+                    value={vectorEmbeddingPolicy.path || ""}
+                    errorMessage={vectorEmbeddingPolicy.pathError}
+                  />
+                </Stack>
+                <Stack>
+                  <Label styles={{ root: { fontSize: 12 } }}>Data type</Label>
+                  <Dropdown
+                    required={true}
+                    styles={dropdownStyles}
+                    options={getDataTypeOptions()}
+                    selectedKey={vectorEmbeddingPolicy.dataType}
+                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
+                      onVectorEmbeddingPolicyChange(index, option, "dataType")
+                    }
+                  ></Dropdown>
+                </Stack>
+                <Stack>
+                  <Label styles={{ root: { fontSize: 12 } }}>Distance function</Label>
+                  <Dropdown
+                    required={true}
+                    styles={dropdownStyles}
+                    options={getDistanceFunctionOptions()}
+                    selectedKey={vectorEmbeddingPolicy.distanceFunction}
+                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
+                      onVectorEmbeddingPolicyChange(index, option, "distanceFunction")
+                    }
+                  ></Dropdown>
+                </Stack>
+                <Stack>
+                  <Label styles={{ root: { fontSize: 12 } }}>Dimensions</Label>
+                  <TextField
+                    id={`vector-policy-dimension-${index + 1}`}
+                    required={true}
+                    styles={textFieldStyles}
+                    value={String(vectorEmbeddingPolicy.dimensions || 0)}
+                    onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                      onVectorEmbeddingDimensionsChange(index, event)
+                    }
+                    errorMessage={vectorEmbeddingPolicy.dimensionsError}
+                  />
+                </Stack>
+                <Stack>
+                  <Label styles={{ root: { fontSize: 12 } }}>Index type</Label>
+                  <Dropdown
+                    required={true}
+                    styles={dropdownStyles}
+                    options={getIndexTypeOptions()}
+                    selectedKey={vectorEmbeddingPolicy.indexType}
+                    onChange={(_event: React.FormEvent<HTMLDivElement>, option: IDropdownOption) =>
+                      onVectorEmbeddingIndexTypeChange(index, option)
+                    }
+                  ></Dropdown>
+                </Stack>
+              </Stack>
+              <IconButton
+                id={`delete-vector-policy-${index + 1}`}
+                iconProps={{ iconName: "Delete" }}
+                style={{ height: 27, margin: "auto" }}
+                onClick={() => onDelete(index)}
+              />
+            </Stack>
+          </CollapsibleSectionComponent>
+        ))}
+      <DefaultButton id={`add-vector-policy`} styles={{ root: { maxWidth: 170, fontSize: 12 } }} onClick={onAdd}>
+        Add vector embedding
+      </DefaultButton>
+    </Stack>
+  );
+};

src/Explorer/Panes/VectorSearchPanel/VectorSearchUtils.ts

@@ -0,0 +1,16 @@
+import { IDropdownOption } from "@fluentui/react";
+
+const dataTypes = ["float32", "uint8", "int8"];
+const distanceFunctions = ["euclidean", "cosine", "dotproduct"];
+const indexTypes = ["none", "flat", "diskANN", "quantizedFlat"];
+
+export const getDataTypeOptions = (): IDropdownOption[] => createDropdownOptionsFromLiterals(dataTypes);
+export const getDistanceFunctionOptions = (): IDropdownOption[] => createDropdownOptionsFromLiterals(distanceFunctions);
+export const getIndexTypeOptions = (): IDropdownOption[] => createDropdownOptionsFromLiterals(indexTypes);
+
+function createDropdownOptionsFromLiterals<T extends string>(literals: T[]): IDropdownOption[] {
+  return literals.map((value) => ({
+    key: value,
+    text: value,
+  }));
+}

src/Explorer/QueryCopilot/QueryCopilotPromptbar.tsx

@@ -504,7 +504,12 @@ export const QueryCopilotPromptbar: React.FC<QueryCopilotPromptProps> = ({
               {!showFeedbackBar && (
                 <Text style={{ fontSize: 12 }}>
                   AI-generated content can have mistakes. Make sure it&apos;s accurate and appropriate before using it.{" "}
-                  <Link href="https://aka.ms/cdb-copilot-preview-terms" target="_blank" style={{ color: "#0072D4" }}>
+                  <Link
+                    href="https://aka.ms/cdb-copilot-preview-terms"
+                    target="_blank"
+                    style={{ color: "#0072D4" }}
+                    className="underlinedLink"
+                  >
                     Read preview terms
                   </Link>
                   {showErrorMessageBar && (

src/Explorer/SplashScreen/SplashScreen.tsx

@@ -355,15 +355,15 @@ export class SplashScreen extends React.Component<SplashScreenProps> {
               ) : (
                 <div className="moreStuffContainer">
                   <div className="moreStuffColumn commonTasks">
-                    <div className="title">Recents</div>
+                    <h2 className="title">Recents</h2>
                     {this.getRecentItems()}
                   </div>
                   <div className="moreStuffColumn">
-                    <div className="title">Top 3 things you need to know</div>
+                    <h2 className="title">Top 3 things you need to know</h2>
                     {this.top3Items()}
                   </div>
                   <div className="moreStuffColumn tipsContainer">
-                    <div className="title">Learning Resources</div>
+                    <h2 className="title">Learning Resources</h2>
                     {this.getLearningResourceItems()}
                   </div>
                 </div>

src/SelfServe/SelfServe.tsx

@@ -117,6 +117,7 @@ const handleMessage = async (event: MessageEvent): Promise<void> => {
 
   updateConfigContext({
     ARM_ENDPOINT: normalizeArmEndpoint(inputs.csmEndpoint || configContext.ARM_ENDPOINT),
+    CATALOG_API_KEY: inputs.catalogAPIKey,
   });
 
   updateUserContext({

src/SelfServe/SqlX/SqlX.rp.ts

@@ -1,11 +1,15 @@
 import { configContext } from "../../ConfigContext";
 import { userContext } from "../../UserContext";
-import { armRequestWithoutPolling } from "../../Utils/arm/request";
+import { get } from "../../Utils/arm/generatedClients/cosmos/locations";
+import { armRequestWithoutPolling, getOfferingIdsRequest } from "../../Utils/arm/request";
 import { selfServeTraceFailure, selfServeTraceStart, selfServeTraceSuccess } from "../SelfServeTelemetryProcessor";
 import { RefreshResult } from "../SelfServeTypes";
 import SqlX from "./SqlX";
 import {
   FetchPricesResponse,
+  GetOfferingIdsResponse,
+  OfferingIdMap,
+  OfferingIdRequest,
   PriceMapAndCurrencyCode,
   RegionItem,
   RegionsResponse,
@@ -166,11 +170,21 @@ export const getRegions = async (): Promise<Array<RegionItem>> => {
   }
 };
 
+export const getRegionShortName = async (regionDisplayName: string): Promise<string> => {
+  const locationsList = await get(userContext.subscriptionId, regionDisplayName);
+
+  if ("id" in locationsList) {
+    const locationId = locationsList.id;
+    return locationId.substring(locationId.lastIndexOf("/") + 1);
+  }
+  return undefined;
+};
+
 const getFetchPricesPathForRegion = (subscriptionId: string): string => {
   return `/subscriptions/${subscriptionId}/providers/Microsoft.CostManagement/fetchPrices`;
 };
 
-export const getPriceMapAndCurrencyCode = async (regions: Array<RegionItem>): Promise<PriceMapAndCurrencyCode> => {
+export const getPriceMapAndCurrencyCode = async (map: OfferingIdMap): Promise<PriceMapAndCurrencyCode> => {
   const telemetryData = {
     feature: "Calculate approximate cost",
     function: "getPriceMapAndCurrencyCode",
@@ -181,39 +195,94 @@ export const getPriceMapAndCurrencyCode = async (regions: Array<RegionItem>): Pr
 
   try {
     const priceMap = new Map<string, Map<string, number>>();
-    let currencyCode;
-    for (const regionItem of regions) {
+    let billingCurrency;
+    for (const region of map.keys()) {
       const regionPriceMap = new Map<string, number>();
+      const regionShortName = await getRegionShortName(region);
+      const requestBody: OfferingIdRequest = {
+        location: regionShortName,
+        ids: Array.from(map.get(region).keys()),
+      };
 
       const response = await armRequestWithoutPolling<FetchPricesResponse>({
         host: configContext.ARM_ENDPOINT,
         path: getFetchPricesPathForRegion(userContext.subscriptionId),
         method: "POST",
-        apiVersion: "2020-01-01-preview",
-        queryParams: {
-          filter:
-            "armRegionName eq '" +
-            regionItem.locationName.split(" ").join("").toLowerCase() +
-            "' and serviceFamily eq 'Databases' and productName eq 'Azure Cosmos DB Dedicated Gateway - General Purpose'",
-        },
+        apiVersion: "2023-04-01-preview",
+        body: requestBody,
       });
 
-      for (const item of response.result.Items) {
-        if (currencyCode === undefined) {
-          currencyCode = item.currencyCode;
-        } else if (item.currencyCode !== currencyCode) {
+      for (const item of response.result) {
+        if (item.error) {
+          continue;
+        }
+
+        if (billingCurrency === undefined) {
+          billingCurrency = item.billingCurrency;
+        } else if (item.billingCurrency !== billingCurrency) {
           throw Error("Currency Code Mismatch: Currency code not same for all regions / skus.");
         }
-        regionPriceMap.set(item.skuName, item.retailPrice);
+
+        const offeringId = item.id;
+        const skuName = map.get(region).get(offeringId);
+        const unitPriceinBillingCurrency = item.prices.find((x) => x.type === "Consumption")
+          ?.unitPriceinBillingCurrency;
+        regionPriceMap.set(skuName, unitPriceinBillingCurrency);
       }
-      priceMap.set(regionItem.locationName, regionPriceMap);
+      priceMap.set(region, regionPriceMap);
     }
 
     selfServeTraceSuccess(telemetryData, getPriceMapAndCurrencyCodeTimestamp);
-    return { priceMap: priceMap, currencyCode: currencyCode };
+    return { priceMap: priceMap, billingCurrency: billingCurrency };
   } catch (err) {
     const failureTelemetry = { err, selfServeClassName: SqlX.name };
     selfServeTraceFailure(failureTelemetry, getPriceMapAndCurrencyCodeTimestamp);
-    return { priceMap: undefined, currencyCode: undefined };
+    return { priceMap: undefined, billingCurrency: undefined };
+  }
+};
+
+const getOfferingIdPathForRegion = (): string => {
+  return `/skus?serviceFamily=Databases&service=Azure Cosmos DB`;
+};
+
+export const getOfferingIds = async (regions: Array<RegionItem>): Promise<OfferingIdMap> => {
+  const telemetryData = {
+    feature: "Get Offering Ids to calculate approximate cost",
+    function: "getOfferingIds",
+    description: "fetch offering ids API call",
+    selfServeClassName: SqlX.name,
+  };
+  const getOfferingIdsCodeTimestamp = selfServeTraceStart(telemetryData);
+
+  try {
+    const offeringIdMap = new Map<string, Map<string, string>>();
+    for (const regionItem of regions) {
+      const regionOfferingIdMap = new Map<string, string>();
+      const regionShortName = await getRegionShortName(regionItem.locationName);
+
+      const response = await getOfferingIdsRequest<GetOfferingIdsResponse>({
+        host: configContext.CATALOG_ENDPOINT,
+        path: getOfferingIdPathForRegion(),
+        method: "GET",
+        apiVersion: "2023-05-01-preview",
+        queryParams: {
+          filter: "armRegionName eq '" + regionShortName + "'",
+        },
+      });
+
+      for (const item of response.result.items) {
+        if (item.offeringProperties?.length > 0) {
+          regionOfferingIdMap.set(item.offeringProperties[0].offeringId, item.skuName);
+        }
+      }
+      offeringIdMap.set(regionItem.locationName, regionOfferingIdMap);
+    }
+
+    selfServeTraceSuccess(telemetryData, getOfferingIdsCodeTimestamp);
+    return offeringIdMap;
+  } catch (err) {
+    const failureTelemetry = { err, selfServeClassName: SqlX.name };
+    selfServeTraceFailure(failureTelemetry, getOfferingIdsCodeTimestamp);
+    return undefined;
   }
 };

src/SelfServe/SqlX/SqlX.tsx

@@ -24,6 +24,7 @@ import { BladeType, generateBladeLink } from "../SelfServeUtils";
 import {
   deleteDedicatedGatewayResource,
   getCurrentProvisioningState,
+  getOfferingIds,
   getPriceMapAndCurrencyCode,
   getRegions,
   refreshDedicatedGatewayProvisioning,
@@ -370,9 +371,10 @@ export default class SqlX extends SelfServeBaseClass {
     });
 
     regions = await getRegions();
-    const priceMapAndCurrencyCode = await getPriceMapAndCurrencyCode(regions);
+    const offeringIdMap = await getOfferingIds(regions);
+    const priceMapAndCurrencyCode = await getPriceMapAndCurrencyCode(offeringIdMap);
     priceMap = priceMapAndCurrencyCode.priceMap;
-    currencyCode = priceMapAndCurrencyCode.currencyCode;
+    currencyCode = priceMapAndCurrencyCode.billingCurrency;
 
     const response = await getCurrentProvisioningState();
     if (response.status && response.status !== "Deleting") {

src/SelfServe/SqlX/SqlxTypes.ts

@@ -30,23 +30,51 @@ export type UpdateDedicatedGatewayRequestProperties = {
   serviceType: string;
 };
 
-export type FetchPricesResponse = {
-  Items: Array<PriceItem>;
-  NextPageLink: string | undefined;
-  Count: number;
+export type FetchPricesResponse = Array<PriceItem>;
+
+export type PriceItem = {
+  prices: Array<PriceType>;
+  id: string;
+  billingCurrency: string;
+  error: PriceError;
+};
+
+export type PriceType = {
+  type: string;
+  unitPriceinBillingCurrency: number;
+};
+
+export type PriceError = {
+  type: string;
+  description: string;
 };
 
 export type PriceMapAndCurrencyCode = {
   priceMap: Map<string, Map<string, number>>;
-  currencyCode: string;
+  billingCurrency: string;
 };
 
-export type PriceItem = {
-  retailPrice: number;
-  skuName: string;
-  currencyCode: string;
+export type GetOfferingIdsResponse = {
+  items: Array<OfferingIdItem>;
+  nextPageLink: string | undefined;
 };
 
+export type OfferingIdItem = {
+  skuName: string;
+  offeringProperties: Array<OfferingProperties>;
+};
+
+export type OfferingProperties = {
+  offeringId: string;
+};
+
+export type OfferingIdRequest = {
+  ids: Array<string>;
+  location: string;
+};
+
+export type OfferingIdMap = Map<string, Map<string, string>>;
+
 export type RegionsResponse = {
   properties: RegionsProperties;
 };

src/Utils/arm/request.ts

@@ -160,3 +160,52 @@ async function getOperationStatus(operationStatusUrl: string) {
   }
   throw new Error(`Operation Response: ${JSON.stringify(body)}. Retrying.`);
 }
+
+export async function getOfferingIdsRequest<T>({
+  host,
+  path,
+  apiVersion,
+  method,
+  body: requestBody,
+  queryParams,
+}: Options): Promise<{ result: T; operationStatusUrl: string }> {
+  const url = new URL(path, host);
+  url.searchParams.append("api-version", configContext.armAPIVersion || apiVersion);
+  if (queryParams) {
+    queryParams.filter && url.searchParams.append("$filter", queryParams.filter);
+    queryParams.metricNames && url.searchParams.append("metricnames", queryParams.metricNames);
+  }
+
+  if (!configContext.CATALOG_API_KEY) {
+    throw new Error("No catalog API key provided");
+  }
+
+  const response = await window.fetch(url.href, {
+    method,
+    headers: {
+      [HttpHeaders.xAPIKey]: configContext.CATALOG_API_KEY,
+    },
+    body: requestBody ? JSON.stringify(requestBody) : undefined,
+  });
+  if (!response.ok) {
+    let error: ARMError;
+    try {
+      const errorResponse = (await response.json()) as ParsedErrorResponse;
+      if ("error" in errorResponse) {
+        error = new ARMError(errorResponse.error.message);
+        error.code = errorResponse.error.code;
+      } else {
+        error = new ARMError(errorResponse.message);
+        error.code = errorResponse.code;
+      }
+    } catch (error) {
+      throw new Error(await response.text());
+    }
+
+    throw error;
+  }
+
+  const operationStatusUrl = (response.headers && response.headers.get("location")) || "";
+  const responseBody = (await response.json()) as T;
+  return { result: responseBody, operationStatusUrl: operationStatusUrl };
+}

test/README.md

@@ -33,9 +33,11 @@ All you need to provide is a resource group to deploy in to.
 
 To use this script, there are a few prerequisites that must be done at least once:
 
-1. [Install Azure PowerShell](https://learn.microsoft.com/en-us/powershell/azure/install-azps-windows?view=azps-12.0.0&tabs=powershell&pivots=windows-psgallery) if you don't already have it.
-2. Connect to your Azure account using `Connect-AzAccount`.
-3. Ensure you have a Resource Group _ready_ to deploy into, the deploy script requires an existing resource group. This resource group should be named `[username]-e2e-testing`, where `[username]` is your Windows username, (**Microsoft employees:** This should be your alias). The easiest way to do this is by running the `create-resource-group.ps1` script, specifying the Subscription (Name or ID) and Location in which you want to create the Resource Group. For example:
+1. This script requires Powershell 7+. Install it [here](https://learn.microsoft.com/en-us/powershell/scripting/install/installing-powershell-on-windows).
+2. [Install Azure PowerShell](https://learn.microsoft.com/en-us/powershell/azure/install-azps-windows?view=azps-12.0.0&tabs=powershell&pivots=windows-psgallery) if you don't already have it.
+3. [Install Bicep CLI](https://learn.microsoft.com/en-us/azure/azure-resource-manager/bicep/install#install-manually) if it is not already installed.
+4. Connect to your Azure account using `Connect-AzAccount`.
+5. Ensure you have a Resource Group _ready_ to deploy into, the deploy script requires an existing resource group. This resource group should be named `[username]-e2e-testing`, where `[username]` is your Windows username, (**Microsoft employees:** This should be your alias). The easiest way to do this is by running the `create-resource-group.ps1` script, specifying the Subscription (Name or ID) and Location in which you want to create the Resource Group. For example:
 
 ```powershell
 .\test\resources\create-resource-group.ps1 -SubscriptionName "My Subscription" -Location "West US 3"
@@ -120,6 +122,14 @@ Configuring for E2E Testing
 
 ## Running the tests
 
+If Azure CLI is not installed, please [install it](https://learn.microsoft.com/en-us/cli/azure/install-azure-cli).
+
+Log into Az CLI with the following command:
+
+```powershell
+az login --scope https://management.core.windows.net//.default
+```
+
 To run all tests in a headless browser, run the following command from the root of the repo:
 
 ```powershell
@@ -140,4 +150,4 @@ npx playwright test --ui
 
 The UI allows you to select a specific test to run and to see the results of the test in the browser.
 
-See the [Playwright docs](https://playwright.dev/docs/running-tests) for more information on running tests.
+See the [Playwright docs](https://playwright.dev/docs/running-tests) for more information on running tests.