random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2026-02-04 09:33:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

added search icon and updated the text

Browse Source
This commit is contained in:
Sakshi Gupta
2026-02-03 16:17:46 +05:30
parent e8aab14bd1
commit da97d70ea6
4 changed files with 10 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Common/SearchableDropdown.tsx
View File

@@ -125,6 +125,7 @@ export const SearchableDropdown = <T,>({
value={filterText} value={filterText}
onChange={(_, newValue) => setFilterText(newValue || "")} onChange={(_, newValue) => setFilterText(newValue || "")}
styles={customSearchBoxStyles} styles={customSearchBoxStyles}
showIcon={true}
/> />
<Stack styles={listContainerStyles}> <Stack styles={listContainerStyles}>
{filteredItems && filteredItems.length > 0 ? ( {filteredItems && filteredItems.length > 0 ? (

12
src/Platform/Hosted/Components/AccountSwitcher.test.tsx
View File

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

4
src/Platform/Hosted/Components/SwitchAccount.tsx
View File

@@ -18,14 +18,14 @@ export const SwitchAccount: FunctionComponent<Props> = ({
}: Props) => { }: Props) => {
return ( return (
<SearchableDropdown<DatabaseAccount> <SearchableDropdown<DatabaseAccount>
label="Cosmos DB Account Name" label="Cosmos DB Account"
items={accounts} items={accounts}
selectedItem={selectedAccount} selectedItem={selectedAccount}
onSelect={(account) => setSelectedAccountName(account.name)} onSelect={(account) => setSelectedAccountName(account.name)}
getKey={(account) => account.name} getKey={(account) => account.name}
getDisplayText={(account) => account.name} getDisplayText={(account) => account.name}
placeholder="Select an Account" placeholder="Select an Account"
filterPlaceholder="Filter accounts" filterPlaceholder="Search by Account name"
className="accountSwitchAccountDropdown" className="accountSwitchAccountDropdown"
disabled={!accounts || accounts.length === 0} disabled={!accounts || accounts.length === 0}
onDismiss={dismissMenu} onDismiss={dismissMenu}

2
src/Platform/Hosted/Components/SwitchSubscription.tsx
View File

@@ -23,7 +23,7 @@ export const SwitchSubscription: FunctionComponent<Props> = ({
getKey={(sub) => sub.subscriptionId} getKey={(sub) => sub.subscriptionId}
getDisplayText={(sub) => sub.displayName} getDisplayText={(sub) => sub.displayName}
placeholder="Select a Subscription" placeholder="Select a Subscription"
filterPlaceholder="Filter subscriptions" filterPlaceholder="Search by Subscription name"
className="accountSwitchSubscriptionDropdown" className="accountSwitchSubscriptionDropdown"
/> />
); );