From da97d70ea6b53c1ffb1a2523d425bb810dafd5ad Mon Sep 17 00:00:00 2001
From: Sakshi Gupta <sakshig@microsoft.com>
Date: Tue, 3 Feb 2026 16:17:46 +0530
Subject: [PATCH] added search icon and updated the text

---
 src/Common/SearchableDropdown.tsx                    |  1 +
 .../Hosted/Components/AccountSwitcher.test.tsx       | 12 ++++++------
 src/Platform/Hosted/Components/SwitchAccount.tsx     |  4 ++--
 .../Hosted/Components/SwitchSubscription.tsx         |  2 +-
 4 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/Common/SearchableDropdown.tsx b/src/Common/SearchableDropdown.tsx
index 54a5fd16d..870ded3c0 100644
--- a/src/Common/SearchableDropdown.tsx
+++ b/src/Common/SearchableDropdown.tsx
@@ -125,6 +125,7 @@ export const SearchableDropdown = <T,>({
               value={filterText}
               onChange={(_, newValue) => setFilterText(newValue || "")}
               styles={customSearchBoxStyles}
+              showIcon={true}
             />
             <Stack styles={listContainerStyles}>
               {filteredItems && filteredItems.length > 0 ? (
diff --git a/src/Platform/Hosted/Components/AccountSwitcher.test.tsx b/src/Platform/Hosted/Components/AccountSwitcher.test.tsx
index 51e3c47f2..6de8e1571 100644
--- a/src/Platform/Hosted/Components/AccountSwitcher.test.tsx
+++ b/src/Platform/Hosted/Components/AccountSwitcher.test.tsx
@@ -1,12 +1,12 @@
 jest.mock("../../../hooks/useSubscriptions");
 jest.mock("../../../hooks/useDatabaseAccounts");
-import React from "react";
-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 { 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 { AccountSwitcher } from "./AccountSwitcher";
 
 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 Name")).toHaveTextContent("Select an Account");
+  expect(screen.getByLabelText("Cosmos DB Account")).toHaveTextContent("Select an Account");
   fireEvent.click(screen.getByText("Select an Account"));
   fireEvent.click(screen.getByText(accounts[0].name));
   expect(setDatabaseAccount).toHaveBeenCalledWith(accounts[0]);
diff --git a/src/Platform/Hosted/Components/SwitchAccount.tsx b/src/Platform/Hosted/Components/SwitchAccount.tsx
index 346ea8cef..72fb6b46a 100644
--- a/src/Platform/Hosted/Components/SwitchAccount.tsx
+++ b/src/Platform/Hosted/Components/SwitchAccount.tsx
@@ -18,14 +18,14 @@ export const SwitchAccount: FunctionComponent<Props> = ({
 }: Props) => {
   return (
     <SearchableDropdown<DatabaseAccount>
-      label="Cosmos DB Account Name"
+      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="Filter accounts"
+      filterPlaceholder="Search by Account name"
       className="accountSwitchAccountDropdown"
       disabled={!accounts || accounts.length === 0}
       onDismiss={dismissMenu}
diff --git a/src/Platform/Hosted/Components/SwitchSubscription.tsx b/src/Platform/Hosted/Components/SwitchSubscription.tsx
index 9a78b2a5f..6b3bae932 100644
--- a/src/Platform/Hosted/Components/SwitchSubscription.tsx
+++ b/src/Platform/Hosted/Components/SwitchSubscription.tsx
@@ -23,7 +23,7 @@ export const SwitchSubscription: FunctionComponent<Props> = ({
       getKey={(sub) => sub.subscriptionId}
       getDisplayText={(sub) => sub.displayName}
       placeholder="Select a Subscription"
-      filterPlaceholder="Filter subscriptions"
+      filterPlaceholder="Search by Subscription name"
       className="accountSwitchSubscriptionDropdown"
     />
   );