Fix formatting

src/@types/i18next.d.ts

@@ -1,5 +1,5 @@
 import "i18next";
-import Resources from "../Localization/en/Resources.json";
+import Resources from "Localization/en/Resources.json";
 
 declare module "i18next" {
   interface CustomTypeOptions {

src/Common/SearchableDropdown.styles.ts

@@ -1,78 +0,0 @@
-import { IButtonStyles, IStackStyles, ITextStyles } from "@fluentui/react";
-import * as React from "react";
-
-export const getDropdownButtonStyles = (disabled: boolean): IButtonStyles => ({
-  root: {
-    width: "100%",
-    height: "32px",
-    padding: "0 28px 0 8px",
-    border: "1px solid #8a8886",
-    background: "#fff",
-    color: "#323130",
-    textAlign: "left",
-    cursor: disabled ? "not-allowed" : "pointer",
-    position: "relative",
-  },
-  flexContainer: {
-    justifyContent: "flex-start",
-  },
-  label: {
-    fontWeight: "normal",
-    fontSize: "14px",
-    textAlign: "left",
-  },
-});
-
-export const buttonLabelStyles: ITextStyles = {
-  root: {
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    whiteSpace: "nowrap",
-    display: "block",
-    textAlign: "left",
-  },
-};
-
-export const buttonWrapperStyles: React.CSSProperties = {
-  position: "relative",
-  width: "100%",
-};
-
-export const chevronStyles: React.CSSProperties = {
-  position: "absolute",
-  right: "8px",
-  top: "50%",
-  transform: "translateY(-50%)",
-  pointerEvents: "none",
-  fontSize: "12px",
-};
-
-export const calloutContentStyles: IStackStyles = {
-  root: {
-    display: "flex",
-    flexDirection: "column",
-  },
-};
-
-export const listContainerStyles: IStackStyles = {
-  root: {
-    maxHeight: "300px",
-    overflowY: "auto",
-  },
-};
-
-export const getItemStyles = (isSelected: boolean): React.CSSProperties => ({
-  padding: "8px 12px",
-  cursor: "pointer",
-  fontSize: "14px",
-  backgroundColor: isSelected ? "#e6e6e6" : "transparent",
-  textAlign: "left",
-});
-
-export const emptyMessageStyles: ITextStyles = {
-  root: {
-    padding: "8px 12px",
-    color: "#605e5c",
-    textAlign: "left",
-  },
-};

src/Common/SearchableDropdown.test.tsx

@@ -1,200 +0,0 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import "@testing-library/jest-dom";
-import React from "react";
-import { SearchableDropdown } from "./SearchableDropdown";
-
-interface TestItem {
-  id: string;
-  name: string;
-}
-
-describe("SearchableDropdown", () => {
-  const mockItems: TestItem[] = [
-    { id: "1", name: "Item One" },
-    { id: "2", name: "Item Two" },
-    { id: "3", name: "Item Three" },
-  ];
-
-  const defaultProps = {
-    label: "Test Label",
-    items: mockItems,
-    selectedItem: null as TestItem | null,
-    onSelect: jest.fn(),
-    getKey: (item: TestItem) => item.id,
-    getDisplayText: (item: TestItem) => item.name,
-    placeholder: "Select an item",
-    filterPlaceholder: "Filter items",
-    className: "test-dropdown",
-  };
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it("should render with label and placeholder", () => {
-    render(<SearchableDropdown {...defaultProps} />);
-    expect(screen.getByText("Test Label")).toBeInTheDocument();
-    expect(screen.getByText("Select an item")).toBeInTheDocument();
-  });
-
-  it("should display selected item", () => {
-    const propsWithSelection = {
-      ...defaultProps,
-      selectedItem: mockItems[0],
-    };
-    render(<SearchableDropdown {...propsWithSelection} />);
-    expect(screen.getByText("Item One")).toBeInTheDocument();
-  });
-
-  it("should show 'No items found' when items array is empty", () => {
-    const propsWithEmptyItems = {
-      ...defaultProps,
-      items: [] as TestItem[],
-    };
-    render(<SearchableDropdown {...propsWithEmptyItems} />);
-    expect(screen.getByText("No Test Labels Found")).toBeInTheDocument();
-  });
-
-  it("should open dropdown when button is clicked", () => {
-    render(<SearchableDropdown {...defaultProps} />);
-    const button = screen.getByText("Select an item");
-    fireEvent.click(button);
-    expect(screen.getByPlaceholderText("Filter items")).toBeInTheDocument();
-  });
-
-  it("should filter items based on search text", () => {
-    render(<SearchableDropdown {...defaultProps} />);
-    const button = screen.getByText("Select an item");
-    fireEvent.click(button);
-
-    const searchBox = screen.getByPlaceholderText("Filter items");
-    fireEvent.change(searchBox, { target: { value: "Two" } });
-
-    expect(screen.getByText("Item Two")).toBeInTheDocument();
-    expect(screen.queryByText("Item One")).not.toBeInTheDocument();
-    expect(screen.queryByText("Item Three")).not.toBeInTheDocument();
-  });
-
-  it("should call onSelect when an item is clicked", () => {
-    const onSelectMock = jest.fn();
-    const propsWithMock = {
-      ...defaultProps,
-      onSelect: onSelectMock,
-    };
-    render(<SearchableDropdown {...propsWithMock} />);
-
-    const button = screen.getByText("Select an item");
-    fireEvent.click(button);
-
-    const item = screen.getByText("Item Two");
-    fireEvent.click(item);
-
-    expect(onSelectMock).toHaveBeenCalledWith(mockItems[1]);
-  });
-
-  it("should close dropdown after selecting an item", () => {
-    render(<SearchableDropdown {...defaultProps} />);
-
-    const button = screen.getByText("Select an item");
-    fireEvent.click(button);
-
-    expect(screen.getByPlaceholderText("Filter items")).toBeInTheDocument();
-
-    const item = screen.getByText("Item One");
-    fireEvent.click(item);
-
-    expect(screen.queryByPlaceholderText("Filter items")).not.toBeInTheDocument();
-  });
-
-  it("should disable button when disabled prop is true", () => {
-    const propsWithDisabled = {
-      ...defaultProps,
-      disabled: true,
-    };
-    render(<SearchableDropdown {...propsWithDisabled} />);
-
-    const button = screen.getByRole("button");
-    expect(button).toBeDisabled();
-  });
-
-  it("should not open dropdown when disabled", () => {
-    const propsWithDisabled = {
-      ...defaultProps,
-      disabled: true,
-    };
-    render(<SearchableDropdown {...propsWithDisabled} />);
-
-    const button = screen.getByRole("button");
-    fireEvent.click(button);
-
-    expect(screen.queryByPlaceholderText("Filter items")).not.toBeInTheDocument();
-  });
-
-  it("should show 'No items found' when search yields no results", () => {
-    render(<SearchableDropdown {...defaultProps} />);
-
-    const button = screen.getByText("Select an item");
-    fireEvent.click(button);
-
-    const searchBox = screen.getByPlaceholderText("Filter items");
-    fireEvent.change(searchBox, { target: { value: "Nonexistent" } });
-
-    expect(screen.getByText("No items found")).toBeInTheDocument();
-  });
-
-  it("should handle case-insensitive filtering", () => {
-    render(<SearchableDropdown {...defaultProps} />);
-
-    const button = screen.getByText("Select an item");
-    fireEvent.click(button);
-
-    const searchBox = screen.getByPlaceholderText("Filter items");
-    fireEvent.change(searchBox, { target: { value: "two" } });
-
-    expect(screen.getByText("Item Two")).toBeInTheDocument();
-    expect(screen.queryByText("Item One")).not.toBeInTheDocument();
-  });
-
-  it("should clear filter text when dropdown is closed and reopened", () => {
-    render(<SearchableDropdown {...defaultProps} />);
-
-    const button = screen.getByText("Select an item");
-    fireEvent.click(button);
-
-    const searchBox = screen.getByPlaceholderText("Filter items");
-    fireEvent.change(searchBox, { target: { value: "Two" } });
-
-    // Close dropdown by selecting an item
-    const item = screen.getByText("Item Two");
-    fireEvent.click(item);
-
-    // Reopen dropdown
-    fireEvent.click(button);
-
-    // Filter text should be cleared
-    const reopenedSearchBox = screen.getByPlaceholderText("Filter items");
-    expect(reopenedSearchBox).toHaveValue("");
-  });
-
-  it("should use custom placeholder text", () => {
-    const propsWithCustomPlaceholder = {
-      ...defaultProps,
-      placeholder: "Choose an option",
-    };
-    render(<SearchableDropdown {...propsWithCustomPlaceholder} />);
-    expect(screen.getByText("Choose an option")).toBeInTheDocument();
-  });
-
-  it("should use custom filter placeholder text", () => {
-    const propsWithCustomFilterPlaceholder = {
-      ...defaultProps,
-      filterPlaceholder: "Search here",
-    };
-    render(<SearchableDropdown {...propsWithCustomFilterPlaceholder} />);
-
-    const button = screen.getByText("Select an item");
-    fireEvent.click(button);
-
-    expect(screen.getByPlaceholderText("Search here")).toBeInTheDocument();
-  });
-});

src/Common/SearchableDropdown.tsx

@@ -1,155 +0,0 @@
-import {
-  Callout,
-  DefaultButton,
-  DirectionalHint,
-  Icon,
-  ISearchBoxStyles,
-  Label,
-  SearchBox,
-  Stack,
-  Text,
-} from "@fluentui/react";
-import * as React from "react";
-import { useMemo, useRef, useState } from "react";
-import {
-  buttonLabelStyles,
-  buttonWrapperStyles,
-  calloutContentStyles,
-  chevronStyles,
-  emptyMessageStyles,
-  getDropdownButtonStyles,
-  getItemStyles,
-  listContainerStyles,
-} from "./SearchableDropdown.styles";
-
-interface SearchableDropdownProps<T> {
-  label: string;
-  items: T[];
-  selectedItem: T | null;
-  onSelect: (item: T) => void;
-  getKey: (item: T) => string;
-  getDisplayText: (item: T) => string;
-  placeholder?: string;
-  filterPlaceholder?: string;
-  className?: string;
-  disabled?: boolean;
-  onDismiss?: () => void;
-  searchBoxStyles?: Partial<ISearchBoxStyles>;
-}
-
-export const SearchableDropdown = <T,>({
-  label,
-  items,
-  selectedItem,
-  onSelect,
-  getKey,
-  getDisplayText,
-  placeholder = "Select an item",
-  filterPlaceholder = "Filter items",
-  className,
-  disabled = false,
-  onDismiss,
-  searchBoxStyles: customSearchBoxStyles,
-}: SearchableDropdownProps<T>): React.ReactElement => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [filterText, setFilterText] = useState("");
-  const buttonRef = useRef<HTMLDivElement>(null);
-
-  const closeDropdown = () => {
-    setIsOpen(false);
-    setFilterText("");
-  };
-
-  const filteredItems = useMemo(
-    () => items?.filter((item) => getDisplayText(item).toLowerCase().includes(filterText.toLowerCase())),
-    [items, filterText, getDisplayText],
-  );
-
-  const handleDismiss = () => {
-    closeDropdown();
-    onDismiss?.();
-  };
-
-  const handleButtonClick = () => {
-    if (disabled) {
-      return;
-    }
-
-    setIsOpen(!isOpen);
-  };
-
-  const handleSelect = (item: T) => {
-    onSelect(item);
-    closeDropdown();
-  };
-
-  const buttonLabel = selectedItem
-    ? getDisplayText(selectedItem)
-    : items?.length === 0
-    ? `No ${label}s Found`
-    : placeholder;
-
-  const buttonId = `${className}-button`;
-  const buttonStyles = getDropdownButtonStyles(disabled);
-
-  return (
-    <Stack>
-      <Label htmlFor={buttonId}>{label}</Label>
-      <div ref={buttonRef} style={buttonWrapperStyles}>
-        <DefaultButton
-          id={buttonId}
-          className={className}
-          onClick={handleButtonClick}
-          styles={buttonStyles}
-          disabled={disabled}
-        >
-          <Text styles={buttonLabelStyles}>{buttonLabel}</Text>
-        </DefaultButton>
-        <Icon iconName="ChevronDown" style={chevronStyles} />
-      </div>
-      {isOpen && (
-        <Callout
-          target={buttonRef.current}
-          onDismiss={handleDismiss}
-          directionalHint={DirectionalHint.bottomLeftEdge}
-          isBeakVisible={false}
-          gapSpace={0}
-          setInitialFocus
-        >
-          <Stack styles={calloutContentStyles} style={{ width: buttonRef.current?.offsetWidth || 300 }}>
-            <SearchBox
-              placeholder={filterPlaceholder}
-              value={filterText}
-              onChange={(_, newValue) => setFilterText(newValue || "")}
-              styles={customSearchBoxStyles}
-              showIcon={true}
-            />
-            <Stack styles={listContainerStyles}>
-              {filteredItems && filteredItems.length > 0 ? (
-                filteredItems.map((item) => {
-                  const key = getKey(item);
-                  const isSelected = selectedItem ? getKey(selectedItem) === key : false;
-                  return (
-                    <div
-                      key={key}
-                      onClick={() => handleSelect(item)}
-                      style={getItemStyles(isSelected)}
-                      onMouseEnter={(e) => (e.currentTarget.style.backgroundColor = "#f3f2f1")}
-                      onMouseLeave={(e) =>
-                        (e.currentTarget.style.backgroundColor = isSelected ? "#e6e6e6" : "transparent")
-                      }
-                    >
-                      <Text>{getDisplayText(item)}</Text>
-                    </div>
-                  );
-                })
-              ) : (
-                <Text styles={emptyMessageStyles}>No items found</Text>
-              )}
-            </Stack>
-          </Stack>
-        </Callout>
-      )}
-    </Stack>
-  );
-};

src/Explorer/Controls/Dialog.tsx

@@ -17,8 +17,8 @@ import {
 } from "@fluentui/react";
 import React, { FC, useEffect } from "react";
 import create, { UseStore } from "zustand";
-import { Keys } from "../../Localization/Keys.generated";
-import { t } from "../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 
 export interface DialogState {
   visible: boolean;

src/Explorer/Controls/Settings/SettingsComponent.tsx

@@ -44,8 +44,8 @@ import { useCommandBar } from "../../Menus/CommandBar/CommandBarComponentAdapter
 import { SettingsTabV2 } from "../../Tabs/SettingsTabV2";
 import "./SettingsComponent.less";
 import { mongoIndexingPolicyAADError } from "./SettingsRenderUtils";
-import { Keys } from "../../../Localization/Keys.generated";
-import { t } from "../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import {
   ConflictResolutionComponent,
   ConflictResolutionComponentProps,

src/Explorer/Controls/Settings/SettingsRenderUtils.tsx

@@ -22,11 +22,11 @@ import {
   Stack,
   Text,
 } from "@fluentui/react";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import * as React from "react";
 import { Urls } from "../../../Common/Constants";
 import { StyleConstants } from "../../../Common/StyleConstants";
-import { Keys } from "../../../Localization/Keys.generated";
-import { t } from "../../../Localization/t";
 import { hoursInAMonth } from "../../../Shared/Constants";
 import {
   computeRUUsagePriceHourly,
@@ -371,7 +371,7 @@ export const getEstimatedSpendingElement = (
 export const manualToAutoscaleDisclaimerElement: JSX.Element = (
   <Text styles={infoAndToolTipTextStyle} id="manualToAutoscaleDisclaimerElement">
     {t(Keys.controls.settings.throughput.manualToAutoscaleDisclaimer)}{" "}
-    <Link href={Urls.autoscaleMigration}>Learn more</Link>
+    <Link href={Urls.autoscaleMigration}>{t(Keys.common.learnMore)}</Link>
   </Text>
 );
 

src/Explorer/Controls/Settings/SettingsSubComponents/ComputedPropertiesComponent.tsx

@@ -4,8 +4,8 @@ import { titleAndInputStackProps, unsavedEditorWarningMessage } from "Explorer/C
 import { isDirty } from "Explorer/Controls/Settings/SettingsUtils";
 import { loadMonaco } from "Explorer/LazyMonaco";
 import { monacoTheme, useThemeStore } from "hooks/useTheme";
-import { Keys } from "../../../../Localization/Keys.generated";
-import { t } from "../../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import * as monaco from "monaco-editor";
 import * as React from "react";
 export interface ComputedPropertiesComponentProps {

src/Explorer/Controls/Settings/SettingsSubComponents/ConflictResolutionComponent.tsx

@@ -2,8 +2,8 @@ import { ChoiceGroup, IChoiceGroupOption, ITextFieldProps, Stack, TextField } fr
 import * as React from "react";
 import * as DataModels from "../../../../Contracts/DataModels";
 import * as ViewModels from "../../../../Contracts/ViewModels";
-import { Keys } from "../../../../Localization/Keys.generated";
-import { t } from "../../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import {
   conflictResolutionCustomToolTip,
   conflictResolutionLwwTooltip,

src/Explorer/Controls/Settings/SettingsSubComponents/ContainerPolicyComponent.tsx

@@ -7,8 +7,8 @@ import {
 import { titleAndInputStackProps } from "Explorer/Controls/Settings/SettingsRenderUtils";
 import { ContainerPolicyTabTypes, isDirty } from "Explorer/Controls/Settings/SettingsUtils";
 import { VectorEmbeddingPoliciesComponent } from "Explorer/Controls/VectorSearch/VectorEmbeddingPoliciesComponent";
-import { Keys } from "../../../../Localization/Keys.generated";
-import { t } from "../../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import React from "react";
 
 export interface ContainerPolicyComponentProps {

src/Explorer/Controls/Settings/SettingsSubComponents/DataMaskingComponent.tsx

@@ -2,8 +2,8 @@ import { MessageBar, MessageBarType, Stack } from "@fluentui/react";
 import * as monaco from "monaco-editor";
 import * as React from "react";
 import * as DataModels from "../../../../Contracts/DataModels";
-import { Keys } from "../../../../Localization/Keys.generated";
-import { t } from "../../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import { loadMonaco } from "../../../LazyMonaco";
 import { titleAndInputStackProps, unsavedEditorWarningMessage } from "../SettingsRenderUtils";
 import { isDirty as isContentDirty, isDataMaskingEnabled } from "../SettingsUtils";

src/Explorer/Controls/Settings/SettingsSubComponents/GlobalSecondaryIndexComponent.tsx

@@ -2,8 +2,8 @@ import { FontIcon, Link, Stack, Text } from "@fluentui/react";
 import Explorer from "Explorer/Explorer";
 import React from "react";
 import * as ViewModels from "../../../../Contracts/ViewModels";
-import { Keys } from "../../../../Localization/Keys.generated";
-import { t } from "../../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import { GlobalSecondaryIndexSourceComponent } from "./GlobalSecondaryIndexSourceComponent";
 import { GlobalSecondaryIndexTargetComponent } from "./GlobalSecondaryIndexTargetComponent";
 

src/Explorer/Controls/Settings/SettingsSubComponents/GlobalSecondaryIndexSourceComponent.tsx

@@ -9,8 +9,8 @@ import { useSidePanel } from "hooks/useSidePanel";
 import * as monaco from "monaco-editor";
 import React, { useEffect, useRef } from "react";
 import * as ViewModels from "../../../../Contracts/ViewModels";
-import { Keys } from "../../../../Localization/Keys.generated";
-import { t } from "../../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 
 export interface GlobalSecondaryIndexSourceComponentProps {
   collection: ViewModels.Collection;

src/Explorer/Controls/Settings/SettingsSubComponents/GlobalSecondaryIndexTargetComponent.tsx

@@ -1,8 +1,8 @@
 import { Stack, Text } from "@fluentui/react";
 import * as React from "react";
 import * as ViewModels from "../../../../Contracts/ViewModels";
-import { Keys } from "../../../../Localization/Keys.generated";
-import { t } from "../../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 
 export interface GlobalSecondaryIndexTargetComponentProps {
   collection: ViewModels.Collection;

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyComponent.tsx

@@ -3,8 +3,8 @@ import { monacoTheme, useThemeStore } from "hooks/useTheme";
 import * as monaco from "monaco-editor";
 import * as React from "react";
 import * as DataModels from "../../../../Contracts/DataModels";
-import { Keys } from "../../../../Localization/Keys.generated";
-import { t } from "../../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import { loadMonaco } from "../../../LazyMonaco";
 import { titleAndInputStackProps, unsavedEditorWarningMessage } from "../SettingsRenderUtils";
 import { isDirty, isIndexTransforming } from "../SettingsUtils";

src/Explorer/Controls/Settings/SettingsSubComponents/IndexingPolicyRefresh/IndexingPolicyRefreshComponent.tsx

@@ -1,8 +1,8 @@
 import { MessageBar, MessageBarType } from "@fluentui/react";
 import * as React from "react";
 import { handleError } from "../../../../../Common/ErrorHandlingUtils";
-import { Keys } from "../../../../../Localization/Keys.generated";
-import { t } from "../../../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import {
   mongoIndexTransformationRefreshingMessage,
   renderMongoIndexTransformationRefreshMessage,

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/AddMongoIndexComponent.tsx

@@ -9,8 +9,8 @@ import {
   IDropdownOption,
   ITextField,
 } from "@fluentui/react";
-import { Keys } from "../../../../../Localization/Keys.generated";
-import { t } from "../../../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import {
   addMongoIndexSubElementsTokens,
   mongoErrorMessageStyles,

src/Explorer/Controls/Settings/SettingsSubComponents/MongoIndexingPolicy/MongoIndexingPolicyComponent.tsx

@@ -15,8 +15,8 @@ import {
 } from "@fluentui/react";
 import * as React from "react";
 import { MongoIndex } from "../../../../../Utils/arm/generatedClients/cosmos/types";
-import { Keys } from "../../../../../Localization/Keys.generated";
-import { t } from "../../../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import { CollapsibleSectionComponent } from "../../../CollapsiblePanel/CollapsibleSectionComponent";
 import {
   addMongoIndexStackProps,

src/Explorer/Controls/Settings/SettingsSubComponents/PartitionKeyComponent.tsx

@@ -18,8 +18,8 @@ import { cancelDataTransferJob, pollDataTransferJob } from "Common/dataAccess/da
 import { Platform, configContext } from "ConfigContext";
 import Explorer from "Explorer/Explorer";
 import { ChangePartitionKeyPane } from "Explorer/Panes/ChangePartitionKeyPane/ChangePartitionKeyPane";
-import { Keys } from "../../../../Localization/Keys.generated";
-import { t } from "../../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import {
   CosmosSqlDataTransferDataSourceSink,
   DataTransferJobGetResults,
@@ -161,17 +161,17 @@ export const PartitionKeyComponent: React.FC<PartitionKeyComponentProps> = ({
   };
 
   const startPartitionkeyChangeWorkflow = () => {
-    useSidePanel
-      .getState()
-      .openSidePanel(
-        "Change partition key",
-        <ChangePartitionKeyPane
-          sourceDatabase={database}
-          sourceCollection={collection}
-          explorer={explorer}
-          onClose={refreshDataTransferOperations}
-        />,
-      );
+    useSidePanel.getState().openSidePanel(
+      t(Keys.controls.settings.partitionKeyEditor.changePartitionKey, {
+        partitionKeyName: t(Keys.controls.settings.partitionKey.partitionKey).toLowerCase(),
+      }),
+      <ChangePartitionKeyPane
+        sourceDatabase={database}
+        sourceCollection={collection}
+        explorer={explorer}
+        onClose={refreshDataTransferOperations}
+      />,
+    );
   };
 
   const getPercentageComplete = () => {

src/Explorer/Controls/Settings/SettingsSubComponents/ScaleComponent.tsx

@@ -1,11 +1,11 @@
 import { Link, MessageBar, MessageBarType, Stack, Text, TextField } from "@fluentui/react";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import * as React from "react";
 import * as Constants from "../../../../Common/Constants";
 import { Platform, configContext } from "../../../../ConfigContext";
 import * as DataModels from "../../../../Contracts/DataModels";
 import * as ViewModels from "../../../../Contracts/ViewModels";
-import { Keys } from "../../../../Localization/Keys.generated";
-import { t } from "../../../../Localization/t";
 import * as SharedConstants from "../../../../Shared/Constants";
 import { userContext } from "../../../../UserContext";
 import * as AutoPilotUtils from "../../../../Utils/AutoPilotUtils";
@@ -94,8 +94,10 @@ export class ScaleComponent extends React.Component<ScaleComponentProps> {
     }
 
     const minThroughput: string = this.getMinRUs().toLocaleString();
-    const maxThroughput: string = !this.props.isFixedContainer ? "unlimited" : this.getMaxRUs().toLocaleString();
-    return `Throughput (${minThroughput} - ${maxThroughput} RU/s)`;
+    const maxThroughput: string = !this.props.isFixedContainer
+      ? t(Keys.controls.settings.scale.unlimited)
+      : this.getMaxRUs().toLocaleString();
+    return t(Keys.controls.settings.scale.throughputRangeLabel, { min: minThroughput, max: maxThroughput });
   };
 
   public canThroughputExceedMaximumValue = (): boolean => {

src/Explorer/Controls/Settings/SettingsSubComponents/SubSettingsComponent.tsx

@@ -12,8 +12,8 @@ import {
 } from "@fluentui/react";
 import * as React from "react";
 import * as ViewModels from "../../../../Contracts/ViewModels";
-import { Keys } from "../../../../Localization/Keys.generated";
-import { t } from "../../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import { userContext } from "../../../../UserContext";
 import { Int32 } from "../../../Panes/Tables/Validators/EntityPropertyValidationCommon";
 import {

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputBucketsComponent.tsx

@@ -1,7 +1,7 @@
 import { Label, Slider, Stack, TextField, Toggle } from "@fluentui/react";
 import { ThroughputBucket } from "Contracts/DataModels";
-import { Keys } from "../../../../../Localization/Keys.generated";
-import { t } from "../../../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import React, { FC, useEffect, useState } from "react";
 import { isDirty } from "../../SettingsUtils";
 

src/Explorer/Controls/Settings/SettingsSubComponents/ThroughputInputComponents/ThroughputInputAutoPilotV3Component.tsx

@@ -16,10 +16,10 @@ import {
   Text,
   TextField,
 } from "@fluentui/react";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import React from "react";
 import * as DataModels from "../../../../../Contracts/DataModels";
-import { Keys } from "../../../../../Localization/Keys.generated";
-import { t } from "../../../../../Localization/t";
 import * as SharedConstants from "../../../../../Shared/Constants";
 import { Action, ActionModifiers } from "../../../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../../../Shared/Telemetry/TelemetryProcessor";
@@ -336,13 +336,16 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
           </Text>
           <Stack horizontal style={{ marginTop: 5, marginBottom: 10 }}>
             <Text style={this.settingsAndScaleStyle.root}>
-              {newPrices.currencySign} {calculateEstimateNumber(newPrices.hourlyPrice)}/hr
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.hourlyPrice)}
+              {t(Keys.controls.settings.costEstimate.perHour)}
             </Text>
             <Text style={this.settingsAndScaleStyle.root}>
-              {newPrices.currencySign} {calculateEstimateNumber(newPrices.dailyPrice)}/day
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.dailyPrice)}
+              {t(Keys.controls.settings.costEstimate.perDay)}
             </Text>
             <Text style={this.settingsAndScaleStyle.root}>
-              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}/mo
+              {newPrices.currencySign} {calculateEstimateNumber(newPrices.monthlyPrice)}
+              {t(Keys.controls.settings.costEstimate.perMonth)}
             </Text>
           </Stack>
         </div>
@@ -359,13 +362,16 @@ export class ThroughputInputAutoPilotV3Component extends React.Component<
           </Text>
           <Stack horizontal style={{ marginTop: 5 }}>
             <Text style={this.settingsAndScaleStyle.root}>
-              {prices.currencySign} {calculateEstimateNumber(prices.hourlyPrice)}/hr
+              {prices.currencySign} {calculateEstimateNumber(prices.hourlyPrice)}
+              {t(Keys.controls.settings.costEstimate.perHour)}
             </Text>
             <Text style={this.settingsAndScaleStyle.root}>
-              {prices.currencySign} {calculateEstimateNumber(prices.dailyPrice)}/day
+              {prices.currencySign} {calculateEstimateNumber(prices.dailyPrice)}
+              {t(Keys.controls.settings.costEstimate.perDay)}
             </Text>
             <Text style={this.settingsAndScaleStyle.root}>
-              {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}/mo
+              {prices.currencySign} {calculateEstimateNumber(prices.monthlyPrice)}
+              {t(Keys.controls.settings.costEstimate.perMonth)}
             </Text>
           </Stack>
         </Stack>

src/Explorer/Controls/Settings/SettingsUtils.tsx

@@ -1,8 +1,8 @@
 import * as Constants from "../../../Common/Constants";
 import * as DataModels from "../../../Contracts/DataModels";
 import * as ViewModels from "../../../Contracts/ViewModels";
-import { Keys } from "../../../Localization/Keys.generated";
-import { t } from "../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import { isFabricNative } from "../../../Platform/Fabric/FabricUtil";
 import { userContext } from "../../../UserContext";
 import { isCapabilityEnabled } from "../../../Utils/CapabilityUtils";

src/Explorer/Panes/AddCollectionPanel/AddCollectionPanel.tsx

@@ -185,25 +185,25 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
 
         {this.state.teachingBubbleStep === 1 && (
           <TeachingBubble
-            headline="Create sample database"
+            headline={t(Keys.panes.addCollection.teachingBubble.step1Headline)}
             target={"#newDatabaseId"}
             calloutProps={{ gapSpace: 16 }}
-            primaryButtonProps={{ text: "Next", onClick: () => this.setState({ teachingBubbleStep: 2 }) }}
-            secondaryButtonProps={{ text: "Cancel", onClick: () => this.setState({ teachingBubbleStep: 0 }) }}
+            primaryButtonProps={{ text: t(Keys.common.next), onClick: () => this.setState({ teachingBubbleStep: 2 }) }}
+            secondaryButtonProps={{
+              text: t(Keys.common.cancel),
+              onClick: () => this.setState({ teachingBubbleStep: 0 }),
+            }}
             onDismiss={() => this.setState({ teachingBubbleStep: 0 })}
-            footerContent="Step 1 of 4"
+            footerContent={t(Keys.panes.addCollection.teachingBubble.stepOfTotal, { current: "1", total: "4" })}
           >
             <Stack>
-              <Text style={{ color: "white" }}>
-                Database is the parent of a container. You can create a new database or use an existing one. In this
-                tutorial we are creating a new database named SampleDB.
-              </Text>
+              <Text style={{ color: "white" }}>{t(Keys.panes.addCollection.teachingBubble.step1Body)}</Text>
               <Link
                 style={{ color: "white", fontWeight: 600 }}
                 target="_blank"
                 href="https://aka.ms/TeachingbubbleResources"
               >
-                Learn more about resources.
+                {t(Keys.panes.addCollection.teachingBubble.step1LearnMore)}
               </Link>
             </Stack>
           </TeachingBubble>
@@ -211,21 +211,21 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
 
         {this.state.teachingBubbleStep === 2 && (
           <TeachingBubble
-            headline="Setting throughput"
+            headline={t(Keys.panes.addCollection.teachingBubble.step2Headline)}
             target={"#autoscaleRUValueField"}
             calloutProps={{ gapSpace: 16 }}
-            primaryButtonProps={{ text: "Next", onClick: () => this.setState({ teachingBubbleStep: 3 }) }}
-            secondaryButtonProps={{ text: "Previous", onClick: () => this.setState({ teachingBubbleStep: 1 }) }}
+            primaryButtonProps={{ text: t(Keys.common.next), onClick: () => this.setState({ teachingBubbleStep: 3 }) }}
+            secondaryButtonProps={{
+              text: t(Keys.common.previous),
+              onClick: () => this.setState({ teachingBubbleStep: 1 }),
+            }}
             onDismiss={() => this.setState({ teachingBubbleStep: 0 })}
-            footerContent="Step 2 of 4"
+            footerContent={t(Keys.panes.addCollection.teachingBubble.stepOfTotal, { current: "2", total: "4" })}
           >
             <Stack>
-              <Text style={{ color: "white" }}>
-                Cosmos DB recommends sharing throughput across database. Autoscale will give you a flexible amount of
-                throughput based on the max RU/s set (Request Units).
-              </Text>
+              <Text style={{ color: "white" }}>{t(Keys.panes.addCollection.teachingBubble.step2Body)}</Text>
               <Link style={{ color: "white", fontWeight: 600 }} target="_blank" href="https://aka.ms/teachingbubbleRU">
-                Learn more about RU/s.
+                {t(Keys.panes.addCollection.teachingBubble.step2LearnMore)}
               </Link>
             </Stack>
           </TeachingBubble>
@@ -233,36 +233,41 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
 
         {this.state.teachingBubbleStep === 3 && (
           <TeachingBubble
-            headline="Naming container"
+            headline={t(Keys.panes.addCollection.teachingBubble.step3Headline)}
             target={"#collectionId"}
             calloutProps={{ gapSpace: 16 }}
-            primaryButtonProps={{ text: "Next", onClick: () => this.setState({ teachingBubbleStep: 4 }) }}
-            secondaryButtonProps={{ text: "Previous", onClick: () => this.setState({ teachingBubbleStep: 2 }) }}
+            primaryButtonProps={{ text: t(Keys.common.next), onClick: () => this.setState({ teachingBubbleStep: 4 }) }}
+            secondaryButtonProps={{
+              text: t(Keys.common.previous),
+              onClick: () => this.setState({ teachingBubbleStep: 2 }),
+            }}
             onDismiss={() => this.setState({ teachingBubbleStep: 0 })}
-            footerContent="Step 3 of 4"
+            footerContent={t(Keys.panes.addCollection.teachingBubble.stepOfTotal, { current: "3", total: "4" })}
           >
-            Name your container
+            {t(Keys.panes.addCollection.teachingBubble.step3Body)}
           </TeachingBubble>
         )}
 
         {this.state.teachingBubbleStep === 4 && (
           <TeachingBubble
-            headline="Setting partition key"
+            headline={t(Keys.panes.addCollection.teachingBubble.step4Headline)}
             target={"#addCollection-partitionKeyValue"}
             calloutProps={{ gapSpace: 16 }}
             primaryButtonProps={{
-              text: "Create container",
+              text: t(Keys.panes.addCollection.teachingBubble.step4CreateContainer),
               onClick: () => {
                 this.setState({ teachingBubbleStep: 5 });
                 this.submit();
               },
             }}
-            secondaryButtonProps={{ text: "Previous", onClick: () => this.setState({ teachingBubbleStep: 2 }) }}
+            secondaryButtonProps={{
+              text: t(Keys.common.previous),
+              onClick: () => this.setState({ teachingBubbleStep: 2 }),
+            }}
             onDismiss={() => this.setState({ teachingBubbleStep: 0 })}
-            footerContent="Step 4 of 4"
+            footerContent={t(Keys.panes.addCollection.teachingBubble.stepOfTotal, { current: "4", total: "4" })}
           >
-            Last step - you will need to define a partition key for your collection. /address was chosen for this
-            particular example. A good partition key should have a wide range of possible value
+            {t(Keys.panes.addCollection.teachingBubble.step4Body)}
           </TeachingBubble>
         )}
 
@@ -272,7 +277,9 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
               <Stack horizontal>
                 <span className="mandatoryStar">*&nbsp;</span>
                 <Text className="panelTextBold" variant="small">
-                  Database {userContext.apiType === "Mongo" ? "name" : "id"}
+                  {userContext.apiType === "Mongo"
+                    ? t(Keys.panes.addCollection.databaseFieldLabelName)
+                    : t(Keys.panes.addCollection.databaseFieldLabelId)}
                 </Text>
                 <TooltipHost
                   directionalHint={DirectionalHint.bottomLeftEdge}
@@ -297,7 +304,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     <input
                       className="panelRadioBtn"
                       checked={this.state.createNewDatabase}
-                      aria-label="Create new database"
+                      aria-label={t(Keys.panes.addCollection.createNewDatabaseAriaLabel)}
                       aria-checked={this.state.createNewDatabase}
                       name="databaseType"
                       type="radio"
@@ -311,7 +318,7 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     <input
                       className="panelRadioBtn"
                       checked={!this.state.createNewDatabase}
-                      aria-label="Use existing database"
+                      aria-label={t(Keys.panes.addCollection.useExistingDatabaseAriaLabel)}
                       aria-checked={!this.state.createNewDatabase}
                       name="databaseType"
                       type="radio"
@@ -335,10 +342,10 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
                     autoComplete="off"
                     pattern={ValidCosmosDbIdInputPattern.source}
                     title={ValidCosmosDbIdDescription}
-                    placeholder="Type a new database id"
+                    placeholder={t(Keys.panes.addCollection.newDatabaseIdPlaceholder)}
                     size={40}
                     className="panelTextField"
-                    aria-label="New database id, Type a new database id"
+                    aria-label={t(Keys.panes.addCollection.newDatabaseIdAriaLabel)}
                     tabIndex={0}
                     value={this.state.newDatabaseId}
                     onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
@@ -404,10 +411,10 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
               )}
               {!this.state.createNewDatabase && (
                 <Dropdown
-                  ariaLabel="Choose an existing database"
+                  ariaLabel={t(Keys.panes.addCollection.chooseExistingDatabase)}
                   styles={{ title: { height: 27, lineHeight: 27 }, dropdownItem: { fontSize: 12 } }}
                   style={{ width: 300, fontSize: 12 }}
-                  placeholder="Choose an existing database"
+                  placeholder={t(Keys.panes.addCollection.chooseExistingDatabase)}
                   options={this.getDatabaseOptions()}
                   onChange={(event: React.FormEvent<HTMLDivElement>, database: IDropdownOption) =>
                     this.setState({ selectedDatabaseId: database.key as string })
@@ -1027,16 +1034,15 @@ export class AddCollectionPanel extends React.Component<AddCollectionPanelProps,
             <PanelLoadingScreen />
             {this.state.teachingBubbleStep === 5 && (
               <TeachingBubble
-                headline="Creating sample container"
+                headline={t(Keys.panes.addCollection.teachingBubble.step5Headline)}
                 target={"#loadingScreen"}
                 onDismiss={() => this.setState({ teachingBubbleStep: 0 })}
                 styles={{ footer: { width: "100%" } }}
               >
-                A sample container is now being created and we are adding sample data for you. It should take about 1
-                minute.
+                {t(Keys.panes.addCollection.teachingBubble.step5Body)}
                 <br />
                 <br />
-                Once the sample container is created, review your sample dataset and follow next steps
+                {t(Keys.panes.addCollection.teachingBubble.step5BodyFollowUp)}
                 <br />
                 <br />
                 <ProgressIndicator

src/Explorer/Panes/AddCollectionPanel/__snapshots__/AddCollectionPanel.test.tsx.snap

@@ -29,8 +29,7 @@ exports[`AddCollectionPanel should render Default properly 1`] = `
           className="panelTextBold"
           variant="small"
         >
-          Database 
-          id
+          Database id
         </Text>
         <StyledTooltipHostBase
           content="A database is analogous to a namespace. It is the unit of management for a set of containers."

src/Explorer/Panes/AddDatabasePanel/AddDatabasePanel.tsx

@@ -156,7 +156,9 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
 
     if (throughput > SharedConstants.CollectionCreation.DefaultCollectionRUs100K && !isCostAcknowledged) {
       setFormErrors(
-        t(Keys.panes.addDatabase.acknowledgeSpendError, { period: isAutoscaleSelected ? "monthly" : "daily" }),
+        isAutoscaleSelected
+          ? t(Keys.panes.addDatabase.acknowledgeSpendErrorMonthly)
+          : t(Keys.panes.addDatabase.acknowledgeSpendErrorDaily),
       );
       return false;
     }
@@ -227,7 +229,7 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
           {!isServerlessAccount() && (
             <Stack horizontal>
               <Checkbox
-                title="Provision shared throughput"
+                title={t(Keys.panes.addDatabase.provisionSharedThroughputTitle)}
                 styles={{
                   text: { fontSize: 12, color: "var(--colorNeutralForeground1)" },
                   checkbox: { width: 12, height: 12 },
@@ -238,7 +240,7 @@ export const AddDatabasePanel: FunctionComponent<AddDatabasePaneProps> = ({
                     },
                   },
                 }}
-                label="Provision throughput"
+                label={t(Keys.panes.addDatabase.provisionThroughputLabel)}
                 checked={databaseCreateNewShared}
                 onChange={() => setDatabaseCreateNewShared(!databaseCreateNewShared)}
               />

src/Explorer/Panes/CopyNotebookPane/CopyNotebookPane.tsx

@@ -4,8 +4,8 @@ import { HttpStatusCodes, PoolIdType } from "../../../Common/Constants";
 import { getErrorMessage, handleError } from "../../../Common/ErrorHandlingUtils";
 import { GitHubOAuthService } from "../../../GitHub/GitHubOAuthService";
 import { IPinnedRepo, JunoClient } from "../../../Juno/JunoClient";
-import { Keys } from "../../../Localization/Keys.generated";
-import { t } from "../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import * as GitHubUtils from "../../../Utils/GitHubUtils";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";
 import { useSidePanel } from "../../../hooks/useSidePanel";

src/Explorer/Panes/CopyNotebookPane/CopyNotebookPaneComponent.tsx

@@ -12,8 +12,8 @@ import {
 import { GitHubReposTitle } from "Explorer/Tree/ResourceTree";
 import React, { FormEvent, FunctionComponent } from "react";
 import { IPinnedRepo } from "../../../Juno/JunoClient";
-import { Keys } from "../../../Localization/Keys.generated";
-import { t } from "../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import * as GitHubUtils from "../../../Utils/GitHubUtils";
 import { useNotebook } from "../../Notebook/useNotebook";
 

src/Explorer/Panes/ExecuteSprocParamsPane/ExecuteSprocParamsPane.tsx

@@ -3,8 +3,8 @@ import { useBoolean } from "@fluentui/react-hooks";
 import React, { FunctionComponent, useRef, useState } from "react";
 import AddPropertyIcon from "../../../../images/Add-property.svg";
 import { useSidePanel } from "../../../hooks/useSidePanel";
-import { Keys } from "../../../Localization/Keys.generated";
-import { t } from "../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";
 import StoredProcedure from "../../Tree/StoredProcedure";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";

src/Explorer/Panes/ExecuteSprocParamsPane/InputParameter.tsx

@@ -11,8 +11,8 @@ import {
 import React, { FunctionComponent } from "react";
 import AddPropertyIcon from "../../../../images/Add-property.svg";
 import EntityCancelIcon from "../../../../images/Entity_cancel.svg";
-import { Keys } from "../../../Localization/Keys.generated";
-import { t } from "../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 
 const dropdownStyles: Partial<IDropdownStyles> = { dropdown: { width: 100 } };
 const options = [

src/Explorer/Panes/GraphStylingPanel/GraphStylingPanel.tsx

@@ -1,7 +1,7 @@
 import React, { FunctionComponent } from "react";
 import * as ViewModels from "../../../Contracts/ViewModels";
-import { Keys } from "../../../Localization/Keys.generated";
-import { t } from "../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import { useSidePanel } from "../../../hooks/useSidePanel";
 import { GraphStyleComponent } from "../../Graph/GraphStyleComponent/GraphStyleComponent";
 import { IGraphConfig } from "../../Tabs/GraphTab";

src/Explorer/Panes/LoadQueryPane/LoadQueryPane.tsx

@@ -5,8 +5,8 @@ import folderIcon from "../../../../images/folder_16x16.svg";
 import { logError } from "../../../Common/Logger";
 import { Collection } from "../../../Contracts/ViewModels";
 import { useSidePanel } from "../../../hooks/useSidePanel";
-import { Keys } from "../../../Localization/Keys.generated";
-import { t } from "../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import { userContext } from "../../../UserContext";
 import { logConsoleError, logConsoleInfo, logConsoleProgress } from "../../../Utils/NotificationConsoleUtils";
 import { useSelectedNode } from "../../useSelectedNode";

src/Explorer/Panes/NewVertexPanel/NewVertexPanel.tsx

@@ -1,8 +1,8 @@
 import { useBoolean } from "@fluentui/react-hooks";
 import React, { FunctionComponent, useState } from "react";
 import * as ViewModels from "../../../Contracts/ViewModels";
-import { Keys } from "../../../Localization/Keys.generated";
-import { t } from "../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import { useSidePanel } from "../../../hooks/useSidePanel";
 import { NewVertexComponent } from "../../Graph/NewVertexComponent/NewVertexComponent";
 import { RightPaneForm, RightPaneFormProps } from "../RightPaneForm/RightPaneForm";

src/Explorer/Panes/PublishNotebookPane/PublishNotebookPane.tsx

@@ -5,8 +5,8 @@ import { getErrorMessage, getErrorStack, handleError } from "../../../Common/Err
 import { useNotebookSnapshotStore } from "../../../hooks/useNotebookSnapshotStore";
 import { useSidePanel } from "../../../hooks/useSidePanel";
 import { JunoClient } from "../../../Juno/JunoClient";
-import { Keys } from "../../../Localization/Keys.generated";
-import { t } from "../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
 import * as NotificationConsoleUtils from "../../../Utils/NotificationConsoleUtils";

src/Explorer/Panes/PublishNotebookPane/PublishNotebookPaneComponent.tsx

@@ -1,8 +1,8 @@
 import { Dropdown, IDropdownProps, ITextFieldProps, Stack, Text, TextField } from "@fluentui/react";
 import { ImmutableNotebook } from "@nteract/commutable";
 import React, { FunctionComponent, useState } from "react";
-import { Keys } from "../../../Localization/Keys.generated";
-import { t } from "../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import { GalleryCardComponent } from "../../Controls/NotebookGallery/Cards/GalleryCardComponent";
 import * as FileSystemUtil from "../../Notebook/FileSystemUtil";
 import { SnapshotRequest } from "../../Notebook/NotebookComponent/types";

src/Explorer/Panes/SaveQueryPane/SaveQueryPane.tsx

@@ -4,8 +4,8 @@ import React, { FunctionComponent, useState } from "react";
 import { Areas, SavedQueries } from "../../../Common/Constants";
 import { getErrorMessage, getErrorStack } from "../../../Common/ErrorHandlingUtils";
 import { Query } from "../../../Contracts/DataModels";
-import { Keys } from "../../../Localization/Keys.generated";
-import { t } from "../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import { Action } from "../../../Shared/Telemetry/TelemetryConstants";
 import { traceFailure, traceStart, traceSuccess } from "../../../Shared/Telemetry/TelemetryProcessor";
 import { logConsoleError } from "../../../Utils/NotificationConsoleUtils";

src/Explorer/Tabs/ConflictsTab.ts

@@ -18,8 +18,8 @@ import { queryConflicts } from "../../Common/dataAccess/queryConflicts";
 import { updateDocument } from "../../Common/dataAccess/updateDocument";
 import * as DataModels from "../../Contracts/DataModels";
 import * as ViewModels from "../../Contracts/ViewModels";
-import { Keys } from "../../Localization/Keys.generated";
-import { t } from "../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";

src/Explorer/Tabs/MongoShellTab/MongoShellTabComponent.tsx

@@ -1,8 +1,8 @@
 import React, { Component } from "react";
 import { configContext } from "../../../ConfigContext";
 import * as ViewModels from "../../../Contracts/ViewModels";
-import { Keys } from "../../../Localization/Keys.generated";
-import { t } from "../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import { Action, ActionModifiers } from "../../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../../Shared/Telemetry/TelemetryProcessor";
 import { userContext } from "../../../UserContext";

src/Explorer/Tabs/StoredProcedureTab/StoredProcedureTabComponent.tsx

@@ -11,8 +11,8 @@ import { createStoredProcedure } from "../../../Common/dataAccess/createStoredPr
 import { ExecuteSprocResult } from "../../../Common/dataAccess/executeStoredProcedure";
 import { updateStoredProcedure } from "../../../Common/dataAccess/updateStoredProcedure";
 import * as ViewModels from "../../../Contracts/ViewModels";
-import { Keys } from "../../../Localization/Keys.generated";
-import { t } from "../../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import { useNotificationConsole } from "../../../hooks/useNotificationConsole";
 import { useTabs } from "../../../hooks/useTabs";
 import { CommandButtonComponentProps } from "../../Controls/CommandButton/CommandButtonComponent";

src/Explorer/Tabs/TriggerTabContent.tsx

@@ -11,8 +11,8 @@ import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils"
 import { createTrigger } from "../../Common/dataAccess/createTrigger";
 import { updateTrigger } from "../../Common/dataAccess/updateTrigger";
 import * as ViewModels from "../../Contracts/ViewModels";
-import { Keys } from "../../Localization/Keys.generated";
-import { t } from "../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { SqlTriggerResource } from "../../Utils/arm/generatedClients/cosmos/types";

src/Explorer/Tabs/UserDefinedFunctionTabContent.tsx

@@ -12,8 +12,8 @@ import { getErrorMessage, getErrorStack } from "../../Common/ErrorHandlingUtils"
 import { createUserDefinedFunction } from "../../Common/dataAccess/createUserDefinedFunction";
 import { updateUserDefinedFunction } from "../../Common/dataAccess/updateUserDefinedFunction";
 import * as ViewModels from "../../Contracts/ViewModels";
-import { Keys } from "../../Localization/Keys.generated";
-import { t } from "../../Localization/t";
+import { Keys } from "Localization/Keys.generated";
+import { t } from "Localization/t";
 import { Action } from "../../Shared/Telemetry/TelemetryConstants";
 import * as TelemetryProcessor from "../../Shared/Telemetry/TelemetryProcessor";
 import { CommandButtonComponentProps } from "../Controls/CommandButton/CommandButtonComponent";

src/Localization/en/Resources.json

@@ -441,7 +441,11 @@
       "shareThroughput": "Share throughput across {{collectionsLabel}}",
       "shareThroughputTooltip": "Provisioned throughput at the {{databaseLabel}} level will be shared across all {{collectionsLabel}} within the {{databaseLabel}}.",
       "greaterThanError": "Please enter a value greater than {{minValue}} for autopilot throughput",
-      "acknowledgeSpendError": "Please acknowledge the estimated {{period}} spend."
+      "acknowledgeSpendError": "Please acknowledge the estimated {{period}} spend.",
+      "acknowledgeSpendErrorMonthly": "Please acknowledge the estimated monthly spend.",
+      "acknowledgeSpendErrorDaily": "Please acknowledge the estimated daily spend.",
+      "provisionSharedThroughputTitle": "Provision shared throughput",
+      "provisionThroughputLabel": "Provision throughput"
     },
     "addCollection": {
       "createNew": "Create new",
@@ -493,7 +497,31 @@
       "acknowledgeShareThroughputError": "Please acknowledge the estimated cost of this dedicated throughput.",
       "vectorPolicyError": "Please fix errors in container vector policy",
       "fullTextSearchPolicyError": "Please fix errors in container full text search policy",
-      "addingSampleDataSet": "Adding sample data set"
+      "addingSampleDataSet": "Adding sample data set",
+      "databaseFieldLabelName": "Database name",
+      "databaseFieldLabelId": "Database id",
+      "newDatabaseIdPlaceholder": "Type a new database id",
+      "newDatabaseIdAriaLabel": "New database id, Type a new database id",
+      "createNewDatabaseAriaLabel": "Create new database",
+      "useExistingDatabaseAriaLabel": "Use existing database",
+      "chooseExistingDatabase": "Choose an existing database",
+      "teachingBubble": {
+        "step1Headline": "Create sample database",
+        "step1Body": "Database is the parent of a container. You can create a new database or use an existing one. In this tutorial we are creating a new database named SampleDB.",
+        "step1LearnMore": "Learn more about resources.",
+        "step2Headline": "Setting throughput",
+        "step2Body": "Cosmos DB recommends sharing throughput across database. Autoscale will give you a flexible amount of throughput based on the max RU/s set (Request Units).",
+        "step2LearnMore": "Learn more about RU/s.",
+        "step3Headline": "Naming container",
+        "step3Body": "Name your container",
+        "step4Headline": "Setting partition key",
+        "step4Body": "Last step - you will need to define a partition key for your collection. /address was chosen for this particular example. A good partition key should have a wide range of possible value",
+        "step4CreateContainer": "Create container",
+        "step5Headline": "Creating sample container",
+        "step5Body": "A sample container is now being created and we are adding sample data for you. It should take about 1 minute.",
+        "step5BodyFollowUp": "Once the sample container is created, review your sample dataset and follow next steps",
+        "stepOfTotal": "Step {{current}} of {{total}}"
+      }
     },
     "addCollectionUtility": {
       "shardKeyTooltip": "The shard key (field) is used to split your data across many replica sets (shards) to achieve unlimited scalability. It's critical to choose a field that will evenly distribute your data.",
@@ -763,7 +791,10 @@
         "howWeCalculate": "How we calculate this",
         "updatedCostPerMonth": "Updated cost per month",
         "currentCostPerMonth": "Current cost per month",
-        "perRu": "/RU"
+        "perRu": "/RU",
+        "perHour": "/hr",
+        "perDay": "/day",
+        "perMonth": "/mo"
       },
       "throughput": {
         "manualToAutoscaleDisclaimer": "The starting autoscale max RU/s will be determined by the system, based on the current manual throughput settings and storage of your resource. After autoscale has been enabled, you can change the max RU/s.",
@@ -858,7 +889,9 @@
         "freeTierLearnMore": "Learn more.",
         "throughputRuS": "Throughput (RU/s)",
         "autoScaleCustomSettings": "Your account has custom settings that prevents setting throughput at the container level. Please work with your Cosmos DB engineering team point of contact to make changes.",
-        "keyspaceSharedThroughput": "This table shared throughput is configured at the keyspace"
+        "keyspaceSharedThroughput": "This table shared throughput is configured at the keyspace",
+        "throughputRangeLabel": "Throughput ({{min}} - {{max}} RU/s)",
+        "unlimited": "unlimited"
       },
       "partitionKeyEditor": {
         "changePartitionKey": "Change {{partitionKeyName}}",

src/Platform/Hosted/Components/AccountSwitcher.test.tsx

@@ -1,12 +1,12 @@
 jest.mock("../../../hooks/useSubscriptions");
 jest.mock("../../../hooks/useDatabaseAccounts");
-import "@testing-library/jest-dom";
-import { fireEvent, render, screen } from "@testing-library/react";
 import React from "react";
-import { DatabaseAccount, Subscription } from "../../../Contracts/DataModels";
-import { useDatabaseAccounts } from "../../../hooks/useDatabaseAccounts";
-import { useSubscriptions } from "../../../hooks/useSubscriptions";
+import { render, fireEvent, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
 import { AccountSwitcher } from "./AccountSwitcher";
+import { useSubscriptions } from "../../../hooks/useSubscriptions";
+import { useDatabaseAccounts } from "../../../hooks/useDatabaseAccounts";
+import { DatabaseAccount, Subscription } from "../../../Contracts/DataModels";
 
 it("calls setAccount from parent component", () => {
   const armToken = "fakeToken";
@@ -25,7 +25,7 @@ it("calls setAccount from parent component", () => {
   expect(screen.getByLabelText("Subscription")).toHaveTextContent("Select a Subscription");
   fireEvent.click(screen.getByText("Select a Subscription"));
   fireEvent.click(screen.getByText(subscriptions[0].displayName));
-  expect(screen.getByLabelText("Cosmos DB Account")).toHaveTextContent("Select an Account");
+  expect(screen.getByLabelText("Cosmos DB Account Name")).toHaveTextContent("Select an Account");
   fireEvent.click(screen.getByText("Select an Account"));
   fireEvent.click(screen.getByText(accounts[0].name));
   expect(setDatabaseAccount).toHaveBeenCalledWith(accounts[0]);

src/Platform/Hosted/Components/SwitchAccount.tsx

@@ -1,6 +1,6 @@
+import { Dropdown } from "@fluentui/react";
 import * as React from "react";
 import { FunctionComponent } from "react";
-import { SearchableDropdown } from "../../../Common/SearchableDropdown";
 import { DatabaseAccount } from "../../../Contracts/DataModels";
 
 interface Props {
@@ -17,18 +17,23 @@ export const SwitchAccount: FunctionComponent<Props> = ({
   dismissMenu,
 }: Props) => {
   return (
-    <SearchableDropdown<DatabaseAccount>
-      label="Cosmos DB Account"
-      items={accounts}
-      selectedItem={selectedAccount}
-      onSelect={(account) => setSelectedAccountName(account.name)}
-      getKey={(account) => account.name}
-      getDisplayText={(account) => account.name}
-      placeholder="Select an Account"
-      filterPlaceholder="Search by Account name"
+    <Dropdown
+      label="Cosmos DB Account Name"
       className="accountSwitchAccountDropdown"
-      disabled={!accounts || accounts.length === 0}
-      onDismiss={dismissMenu}
+      options={accounts?.map((account) => ({
+        key: account.name,
+        text: account.name,
+        data: account,
+      }))}
+      onChange={(_, option) => {
+        setSelectedAccountName(String(option?.key));
+        dismissMenu();
+      }}
+      defaultSelectedKey={selectedAccount?.name}
+      placeholder={accounts && accounts.length === 0 ? "No Accounts Found" : "Select an Account"}
+      styles={{
+        callout: "accountSwitchAccountDropdownMenu",
+      }}
     />
   );
 };

src/Platform/Hosted/Components/SwitchSubscription.tsx

@@ -1,6 +1,6 @@
+import { Dropdown } from "@fluentui/react";
 import * as React from "react";
 import { FunctionComponent } from "react";
-import { SearchableDropdown } from "../../../Common/SearchableDropdown";
 import { Subscription } from "../../../Contracts/DataModels";
 
 interface Props {
@@ -15,16 +15,24 @@ export const SwitchSubscription: FunctionComponent<Props> = ({
   selectedSubscription,
 }: Props) => {
   return (
-    <SearchableDropdown<Subscription>
+    <Dropdown
       label="Subscription"
-      items={subscriptions}
-      selectedItem={selectedSubscription}
-      onSelect={(sub) => setSelectedSubscriptionId(sub.subscriptionId)}
-      getKey={(sub) => sub.subscriptionId}
-      getDisplayText={(sub) => sub.displayName}
-      placeholder="Select a Subscription"
-      filterPlaceholder="Search by Subscription name"
       className="accountSwitchSubscriptionDropdown"
+      options={subscriptions?.map((sub) => {
+        return {
+          key: sub.subscriptionId,
+          text: sub.displayName,
+          data: sub,
+        };
+      })}
+      onChange={(_, option) => {
+        setSelectedSubscriptionId(String(option?.key));
+      }}
+      defaultSelectedKey={selectedSubscription?.subscriptionId}
+      placeholder={subscriptions && subscriptions.length === 0 ? "No Subscriptions Found" : "Select a Subscription"}
+      styles={{
+        callout: "accountSwitchSubscriptionDropdownMenu",
+      }}
     />
   );
 };

test/component-fixtures/searchableDropdown/SearchableDropdownFixture.tsx

@@ -1,112 +0,0 @@
-import { initializeIcons, Stack } from "@fluentui/react";
-import * as React from "react";
-import * as ReactDOM from "react-dom";
-import { SearchableDropdown } from "../../../src/Common/SearchableDropdown";
-
-// Initialize Fluent UI icons
-initializeIcons();
-
-/**
- * Mock subscription data matching the Subscription interface shape.
- */
-interface MockSubscription {
-  subscriptionId: string;
-  displayName: string;
-  state: string;
-}
-
-/**
- * Mock database account data matching the DatabaseAccount interface shape.
- */
-interface MockDatabaseAccount {
-  id: string;
-  name: string;
-  location: string;
-  type: string;
-  kind: string;
-}
-
-const mockSubscriptions: MockSubscription[] = [
-  { subscriptionId: "sub-001", displayName: "Development Subscription", state: "Enabled" },
-  { subscriptionId: "sub-002", displayName: "Production Subscription", state: "Enabled" },
-  { subscriptionId: "sub-003", displayName: "Testing Subscription", state: "Enabled" },
-  { subscriptionId: "sub-004", displayName: "Staging Subscription", state: "Enabled" },
-  { subscriptionId: "sub-005", displayName: "QA Subscription", state: "Enabled" },
-];
-
-const mockAccounts: MockDatabaseAccount[] = [
-  {
-    id: "acc-001",
-    name: "cosmos-dev-westus",
-    location: "westus",
-    type: "Microsoft.DocumentDB/databaseAccounts",
-    kind: "GlobalDocumentDB",
-  },
-  {
-    id: "acc-002",
-    name: "cosmos-prod-eastus",
-    location: "eastus",
-    type: "Microsoft.DocumentDB/databaseAccounts",
-    kind: "GlobalDocumentDB",
-  },
-  {
-    id: "acc-003",
-    name: "cosmos-test-northeurope",
-    location: "northeurope",
-    type: "Microsoft.DocumentDB/databaseAccounts",
-    kind: "GlobalDocumentDB",
-  },
-  {
-    id: "acc-004",
-    name: "cosmos-staging-westus2",
-    location: "westus2",
-    type: "Microsoft.DocumentDB/databaseAccounts",
-    kind: "GlobalDocumentDB",
-  },
-];
-
-const SearchableDropdownTestFixture: React.FC = () => {
-  const [selectedSubscription, setSelectedSubscription] = React.useState<MockSubscription | null>(null);
-  const [selectedAccount, setSelectedAccount] = React.useState<MockDatabaseAccount | null>(null);
-
-  return (
-    <Stack tokens={{ childrenGap: 20 }} style={{ padding: 20, maxWidth: 400 }}>
-      <div data-test="subscription-dropdown">
-        <SearchableDropdown<MockSubscription>
-          label="Subscription"
-          items={mockSubscriptions}
-          selectedItem={selectedSubscription}
-          onSelect={(sub) => setSelectedSubscription(sub)}
-          getKey={(sub) => sub.subscriptionId}
-          getDisplayText={(sub) => sub.displayName}
-          placeholder="Select a Subscription"
-          filterPlaceholder="Search by Subscription name"
-          className="subscriptionDropdown"
-        />
-      </div>
-
-      <div data-test="account-dropdown">
-        <SearchableDropdown<MockDatabaseAccount>
-          label="Cosmos DB Account"
-          items={selectedSubscription ? mockAccounts : []}
-          selectedItem={selectedAccount}
-          onSelect={(account) => setSelectedAccount(account)}
-          getKey={(account) => account.id}
-          getDisplayText={(account) => account.name}
-          placeholder="Select an Account"
-          filterPlaceholder="Search by Account name"
-          className="accountDropdown"
-          disabled={!selectedSubscription}
-        />
-      </div>
-
-      {/* Display selection state for test assertions */}
-      <div data-test="selection-state">
-        <div data-test="selected-subscription">{selectedSubscription?.displayName || ""}</div>
-        <div data-test="selected-account">{selectedAccount?.name || ""}</div>
-      </div>
-    </Stack>
-  );
-};
-
-ReactDOM.render(<SearchableDropdownTestFixture />, document.getElementById("root"));

test/component-fixtures/searchableDropdown/searchableDropdown.html

@@ -1,11 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>SearchableDropdown Test Fixture</title>
-  </head>
-  <body>
-    <div id="root"></div>
-  </body>
-</html>

test/component-fixtures/searchableDropdown/searchableDropdown.spec.ts

@@ -1,251 +0,0 @@
-import { expect, test } from "@playwright/test";
-
-const FIXTURE_URL = "https://127.0.0.1:1234/searchableDropdownFixture.html";
-
-test.describe("SearchableDropdown Component", () => {
-  test.beforeEach(async ({ page }) => {
-    await page.goto(FIXTURE_URL);
-    await page.waitForSelector("[data-test='subscription-dropdown']");
-  });
-
-  test("renders subscription dropdown with label and placeholder", async ({ page }) => {
-    await expect(page.getByText("Subscription", { exact: true })).toBeVisible();
-    await expect(page.getByText("Select a Subscription")).toBeVisible();
-  });
-
-  test("renders account dropdown as disabled when no subscription is selected", async ({ page }) => {
-    const accountButton = page.locator("[data-test='account-dropdown'] button");
-    await expect(accountButton).toBeDisabled();
-  });
-
-  test("opens subscription dropdown and shows all mock items", async ({ page }) => {
-    await page.getByText("Select a Subscription").click();
-
-    await expect(page.getByText("Development Subscription")).toBeVisible();
-    await expect(page.getByText("Production Subscription")).toBeVisible();
-    await expect(page.getByText("Testing Subscription")).toBeVisible();
-    await expect(page.getByText("Staging Subscription")).toBeVisible();
-    await expect(page.getByText("QA Subscription")).toBeVisible();
-  });
-
-  test("filters subscription items by search text", async ({ page }) => {
-    await page.getByText("Select a Subscription").click();
-
-    const searchBox = page.getByPlaceholder("Search by Subscription name");
-    await searchBox.fill("Dev");
-
-    await expect(page.getByText("Development Subscription")).toBeVisible();
-    await expect(page.getByText("Production Subscription")).not.toBeVisible();
-    await expect(page.getByText("Testing Subscription")).not.toBeVisible();
-  });
-
-  test("performs case-insensitive filtering", async ({ page }) => {
-    await page.getByText("Select a Subscription").click();
-
-    const searchBox = page.getByPlaceholder("Search by Subscription name");
-    await searchBox.fill("production");
-
-    await expect(page.getByText("Production Subscription")).toBeVisible();
-    await expect(page.getByText("Development Subscription")).not.toBeVisible();
-  });
-
-  test("shows 'No items found' when search yields no results", async ({ page }) => {
-    await page.getByText("Select a Subscription").click();
-
-    const searchBox = page.getByPlaceholder("Search by Subscription name");
-    await searchBox.fill("NonexistentSubscription");
-
-    await expect(page.getByText("No items found")).toBeVisible();
-  });
-
-  test("selects a subscription and updates button text", async ({ page }) => {
-    await page.getByText("Select a Subscription").click();
-    await page.getByText("Development Subscription").click();
-
-    // Dropdown should close and show selected item
-    await expect(
-      page.locator("[data-test='subscription-dropdown']").getByText("Development Subscription"),
-    ).toBeVisible();
-    // External state should update
-    await expect(page.locator("[data-test='selected-subscription']")).toHaveText("Development Subscription");
-  });
-
-  test("enables account dropdown after subscription is selected", async ({ page }) => {
-    // Select a subscription first
-    await page.getByText("Select a Subscription").click();
-    await page.getByText("Production Subscription").click();
-
-    // Account dropdown should now be enabled
-    const accountButton = page.locator("[data-test='account-dropdown'] button");
-    await expect(accountButton).toBeEnabled();
-  });
-
-  test("shows account items after subscription selection", async ({ page }) => {
-    // Select subscription
-    await page.getByText("Select a Subscription").click();
-    await page.getByText("Development Subscription").click();
-
-    // Open account dropdown
-    await page.getByText("Select an Account").click();
-
-    await expect(page.getByText("cosmos-dev-westus")).toBeVisible();
-    await expect(page.getByText("cosmos-prod-eastus")).toBeVisible();
-    await expect(page.getByText("cosmos-test-northeurope")).toBeVisible();
-    await expect(page.getByText("cosmos-staging-westus2")).toBeVisible();
-  });
-
-  test("filters account items by search text", async ({ page }) => {
-    // Select subscription
-    await page.getByText("Select a Subscription").click();
-    await page.getByText("Testing Subscription").click();
-
-    // Open account dropdown and filter
-    await page.getByText("Select an Account").click();
-    const searchBox = page.getByPlaceholder("Search by Account name");
-    await searchBox.fill("prod");
-
-    await expect(page.getByText("cosmos-prod-eastus")).toBeVisible();
-    await expect(page.getByText("cosmos-dev-westus")).not.toBeVisible();
-  });
-
-  test("selects an account and updates both dropdowns", async ({ page }) => {
-    // Select subscription
-    await page.getByText("Select a Subscription").click();
-    await page.getByText("Staging Subscription").click();
-
-    // Select account
-    await page.getByText("Select an Account").click();
-    await page.getByText("cosmos-dev-westus").click();
-
-    // Verify both selections
-    await expect(page.locator("[data-test='selected-subscription']")).toHaveText("Staging Subscription");
-    await expect(page.locator("[data-test='selected-account']")).toHaveText("cosmos-dev-westus");
-  });
-
-  test("clears search filter when dropdown is closed and reopened", async ({ page }) => {
-    await page.getByText("Select a Subscription").click();
-
-    const searchBox = page.getByPlaceholder("Search by Subscription name");
-    await searchBox.fill("Dev");
-
-    // Select an item to close dropdown
-    await page.getByText("Development Subscription").click();
-
-    // Reopen dropdown
-    await page.locator("[data-test='subscription-dropdown']").getByText("Development Subscription").click();
-
-    // Search box should be cleared
-    const reopenedSearchBox = page.getByPlaceholder("Search by Subscription name");
-    await expect(reopenedSearchBox).toHaveValue("");
-
-    // All items should be visible again
-    await expect(page.getByText("Production Subscription")).toBeVisible();
-    await expect(page.getByText("Testing Subscription")).toBeVisible();
-  });
-
-  test("renders account dropdown with label and placeholder after subscription selected", async ({ page }) => {
-    await page.getByText("Select a Subscription").click();
-    await page.getByText("Development Subscription").click();
-
-    await expect(page.getByText("Cosmos DB Account")).toBeVisible();
-    await expect(page.getByText("Select an Account")).toBeVisible();
-  });
-
-  test("performs case-insensitive filtering on account dropdown", async ({ page }) => {
-    await page.getByText("Select a Subscription").click();
-    await page.getByText("Development Subscription").click();
-
-    await page.getByText("Select an Account").click();
-    const searchBox = page.getByPlaceholder("Search by Account name");
-    await searchBox.fill("COSMOS-TEST");
-
-    await expect(page.getByText("cosmos-test-northeurope")).toBeVisible();
-    await expect(page.getByText("cosmos-dev-westus")).not.toBeVisible();
-    await expect(page.getByText("cosmos-prod-eastus")).not.toBeVisible();
-    await expect(page.getByText("cosmos-staging-westus2")).not.toBeVisible();
-  });
-
-  test("shows 'No items found' in account dropdown when search yields no results", async ({ page }) => {
-    await page.getByText("Select a Subscription").click();
-    await page.getByText("Production Subscription").click();
-
-    await page.getByText("Select an Account").click();
-    const searchBox = page.getByPlaceholder("Search by Account name");
-    await searchBox.fill("nonexistent-account");
-
-    await expect(page.getByText("No items found")).toBeVisible();
-  });
-
-  test("clears account search filter when dropdown is closed and reopened", async ({ page }) => {
-    await page.getByText("Select a Subscription").click();
-    await page.getByText("Testing Subscription").click();
-
-    // Open account dropdown and filter
-    await page.getByText("Select an Account").click();
-    const searchBox = page.getByPlaceholder("Search by Account name");
-    await searchBox.fill("prod");
-
-    // Select an item to close
-    await page.getByText("cosmos-prod-eastus").click();
-
-    // Reopen and verify filter is cleared
-    await page.locator("[data-test='account-dropdown']").getByText("cosmos-prod-eastus").click();
-    const reopenedSearchBox = page.getByPlaceholder("Search by Account name");
-    await expect(reopenedSearchBox).toHaveValue("");
-
-    // All items visible again
-    await expect(page.getByText("cosmos-dev-westus")).toBeVisible();
-    await expect(page.getByText("cosmos-test-northeurope")).toBeVisible();
-    await expect(page.getByText("cosmos-staging-westus2")).toBeVisible();
-  });
-
-  test("account dropdown updates button text after selection", async ({ page }) => {
-    await page.getByText("Select a Subscription").click();
-    await page.getByText("QA Subscription").click();
-
-    await page.getByText("Select an Account").click();
-    await page.getByText("cosmos-test-northeurope").click();
-
-    // Button should show selected account name
-    await expect(page.locator("[data-test='account-dropdown']").getByText("cosmos-test-northeurope")).toBeVisible();
-    await expect(page.locator("[data-test='selected-account']")).toHaveText("cosmos-test-northeurope");
-  });
-
-  test("account dropdown shows all 4 mock accounts", async ({ page }) => {
-    await page.getByText("Select a Subscription").click();
-    await page.getByText("Staging Subscription").click();
-
-    await page.getByText("Select an Account").click();
-
-    await expect(page.getByText("cosmos-dev-westus")).toBeVisible();
-    await expect(page.getByText("cosmos-prod-eastus")).toBeVisible();
-    await expect(page.getByText("cosmos-test-northeurope")).toBeVisible();
-    await expect(page.getByText("cosmos-staging-westus2")).toBeVisible();
-  });
-
-  test("shows 'No Cosmos DB Accounts Found' when account list is empty (no subscription selected)", async ({
-    page,
-  }) => {
-    // The account dropdown shows "No Cosmos DB Accounts Found" when disabled with no items
-    const accountButtonText = page.locator("[data-test='account-dropdown'] button");
-    await expect(accountButtonText).toHaveText("No Cosmos DB Accounts Found");
-  });
-
-  test("full flow: select subscription, filter accounts, select account", async ({ page }) => {
-    // Step 1: Select a subscription
-    await page.getByText("Select a Subscription").click();
-    const subSearchBox = page.getByPlaceholder("Search by Subscription name");
-    await subSearchBox.fill("QA");
-    await page.getByText("QA Subscription").click();
-
-    // Step 2: Open account dropdown and filter
-    await page.getByText("Select an Account").click();
-    const accountSearchBox = page.getByPlaceholder("Search by Account name");
-    await accountSearchBox.fill("staging");
-    await page.getByText("cosmos-staging-westus2").click();
-
-    // Step 3: Verify final state
-    await expect(page.locator("[data-test='selected-subscription']")).toHaveText("QA Subscription");
-    await expect(page.locator("[data-test='selected-account']")).toHaveText("cosmos-staging-westus2");
-  });
-});

webpack.config.js

@@ -117,9 +117,6 @@ module.exports = function (_env = {}, argv = {}) {
     selfServe: "./src/SelfServe/SelfServe.tsx",
     connectToGitHub: "./src/GitHub/GitHubConnector.ts",
     ...(mode !== "production" && { testExplorer: "./test/testExplorer/TestExplorer.ts" }),
-    ...(mode !== "production" && {
-      searchableDropdownFixture: "./test/component-fixtures/searchableDropdown/SearchableDropdownFixture.tsx",
-    }),
   };
 
   const htmlWebpackPlugins = [
@@ -175,11 +172,6 @@ module.exports = function (_env = {}, argv = {}) {
             template: "test/testExplorer/testExplorer.html",
             chunks: ["testExplorer"],
           }),
-          new HtmlWebpackPlugin({
-            filename: "searchableDropdownFixture.html",
-            template: "test/component-fixtures/searchableDropdown/searchableDropdown.html",
-            chunks: ["searchableDropdownFixture"],
-          }),
         ]
       : []),
   ];