mirror of
https://github.com/Azure/cosmos-explorer.git
synced 2026-01-27 21:54:15 +00:00
Compare commits
1 Commits
users/nish
...
users/saks
| Author | SHA1 | Date | |
|---|---|---|---|
|
9b2fb0c04e |
@@ -1,72 +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 chevronStyles: React.CSSProperties = {
|
||||
position: "absolute",
|
||||
right: "8px",
|
||||
top: "50%",
|
||||
transform: "translateY(-50%)",
|
||||
pointerEvents: "none",
|
||||
};
|
||||
|
||||
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",
|
||||
},
|
||||
};
|
||||
@@ -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();
|
||||
});
|
||||
});
|
||||
@@ -1,155 +0,0 @@
|
||||
import {
|
||||
Callout,
|
||||
DefaultButton,
|
||||
DirectionalHint,
|
||||
ISearchBoxStyles,
|
||||
Label,
|
||||
SearchBox,
|
||||
Stack,
|
||||
Text,
|
||||
} from "@fluentui/react";
|
||||
import * as React from "react";
|
||||
import { useCallback, useMemo, useRef, useState } from "react";
|
||||
import {
|
||||
buttonLabelStyles,
|
||||
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 = useCallback(() => {
|
||||
setIsOpen(false);
|
||||
setFilterText("");
|
||||
}, []);
|
||||
|
||||
const filteredItems = useMemo(
|
||||
() => items?.filter((item) => getDisplayText(item).toLowerCase().includes(filterText.toLowerCase())),
|
||||
[items, filterText, getDisplayText],
|
||||
);
|
||||
|
||||
const handleDismiss = useCallback(() => {
|
||||
closeDropdown();
|
||||
onDismiss?.();
|
||||
}, [closeDropdown, onDismiss]);
|
||||
|
||||
const handleButtonClick = useCallback(() => {
|
||||
if (disabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
setIsOpen(!isOpen);
|
||||
}, [isOpen, disabled]);
|
||||
|
||||
const handleSelect = useCallback(
|
||||
(item: T) => {
|
||||
onSelect(item);
|
||||
closeDropdown();
|
||||
},
|
||||
[onSelect, 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}>
|
||||
<DefaultButton
|
||||
id={buttonId}
|
||||
className={className}
|
||||
onClick={handleButtonClick}
|
||||
styles={buttonStyles}
|
||||
disabled={disabled}
|
||||
>
|
||||
<Text styles={buttonLabelStyles}>{buttonLabel}</Text>
|
||||
<span style={chevronStyles}>▼</span>
|
||||
</DefaultButton>
|
||||
</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}
|
||||
/>
|
||||
<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>
|
||||
);
|
||||
};
|
||||
@@ -16,7 +16,7 @@ import {
|
||||
import { useIndexingPolicyStore } from "Explorer/Tabs/QueryTab/ResultsView";
|
||||
import { useDatabases } from "Explorer/useDatabases";
|
||||
import { isFabricNative } from "Platform/Fabric/FabricUtil";
|
||||
import { isCapabilityEnabled, isVectorSearchEnabled } from "Utils/CapabilityUtils";
|
||||
import { isVectorSearchEnabled } from "Utils/CapabilityUtils";
|
||||
import { isRunningOnPublicCloud } from "Utils/CloudUtils";
|
||||
import * as React from "react";
|
||||
import DiscardIcon from "../../../../images/discard.svg";
|
||||
@@ -70,6 +70,7 @@ import {
|
||||
getMongoNotification,
|
||||
getTabTitle,
|
||||
hasDatabaseSharedThroughput,
|
||||
isDataMaskingEnabled,
|
||||
isDirty,
|
||||
parseConflictResolutionMode,
|
||||
parseConflictResolutionProcedure,
|
||||
@@ -1073,8 +1074,8 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
|
||||
|
||||
newCollection.fullTextPolicy = this.state.fullTextPolicy;
|
||||
|
||||
// Only send data masking policy if it was modified (dirty)
|
||||
if (this.state.isDataMaskingDirty && isCapabilityEnabled(Constants.CapabilityNames.EnableDynamicDataMasking)) {
|
||||
// Only send data masking policy if it was modified (dirty) and data masking is enabled
|
||||
if (this.state.isDataMaskingDirty && isDataMaskingEnabled(this.collection.dataMaskingPolicy?.())) {
|
||||
newCollection.dataMaskingPolicy = this.state.dataMaskingContent;
|
||||
}
|
||||
|
||||
@@ -1463,15 +1464,7 @@ export class SettingsComponent extends React.Component<SettingsComponentProps, S
|
||||
});
|
||||
}
|
||||
|
||||
// Check if DDM should be enabled
|
||||
const shouldEnableDDM = (): boolean => {
|
||||
const hasDataMaskingCapability = isCapabilityEnabled(Constants.CapabilityNames.EnableDynamicDataMasking);
|
||||
const isSqlAccount = userContext.apiType === "SQL";
|
||||
|
||||
return isSqlAccount && hasDataMaskingCapability; // Only show for SQL accounts with DDM capability
|
||||
};
|
||||
|
||||
if (shouldEnableDDM()) {
|
||||
if (isDataMaskingEnabled(this.collection.dataMaskingPolicy?.())) {
|
||||
const dataMaskingComponentProps: DataMaskingComponentProps = {
|
||||
shouldDiscardDataMasking: this.state.shouldDiscardDataMasking,
|
||||
resetShouldDiscardDataMasking: this.resetShouldDiscardDataMasking,
|
||||
|
||||
@@ -1,12 +1,10 @@
|
||||
import { MessageBar, MessageBarType, Stack } from "@fluentui/react";
|
||||
import * as monaco from "monaco-editor";
|
||||
import * as React from "react";
|
||||
import * as Constants from "../../../../Common/Constants";
|
||||
import * as DataModels from "../../../../Contracts/DataModels";
|
||||
import { isCapabilityEnabled } from "../../../../Utils/CapabilityUtils";
|
||||
import { loadMonaco } from "../../../LazyMonaco";
|
||||
import { titleAndInputStackProps, unsavedEditorWarningMessage } from "../SettingsRenderUtils";
|
||||
import { isDirty as isContentDirty } from "../SettingsUtils";
|
||||
import { isDataMaskingEnabled, isDirty as isContentDirty } from "../SettingsUtils";
|
||||
|
||||
export interface DataMaskingComponentProps {
|
||||
shouldDiscardDataMasking: boolean;
|
||||
@@ -140,7 +138,7 @@ export class DataMaskingComponent extends React.Component<DataMaskingComponentPr
|
||||
};
|
||||
|
||||
public render(): JSX.Element {
|
||||
if (!isCapabilityEnabled(Constants.CapabilityNames.EnableDynamicDataMasking)) {
|
||||
if (!isDataMaskingEnabled(this.props.dataMaskingContent)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
|
||||
@@ -2,6 +2,8 @@ import * as Constants from "../../../Common/Constants";
|
||||
import * as DataModels from "../../../Contracts/DataModels";
|
||||
import * as ViewModels from "../../../Contracts/ViewModels";
|
||||
import { isFabricNative } from "../../../Platform/Fabric/FabricUtil";
|
||||
import { userContext } from "../../../UserContext";
|
||||
import { isCapabilityEnabled } from "../../../Utils/CapabilityUtils";
|
||||
import { MongoIndex } from "../../../Utils/arm/generatedClients/cosmos/types";
|
||||
|
||||
const zeroValue = 0;
|
||||
@@ -88,6 +90,19 @@ export const hasDatabaseSharedThroughput = (collection: ViewModels.Collection):
|
||||
return database?.isDatabaseShared() && !collection.offer();
|
||||
};
|
||||
|
||||
export const isDataMaskingEnabled = (dataMaskingPolicy?: DataModels.DataMaskingPolicy): boolean => {
|
||||
const isSqlAccount = userContext.apiType === "SQL";
|
||||
if (!isSqlAccount) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const hasDataMaskingCapability = isCapabilityEnabled(Constants.CapabilityNames.EnableDynamicDataMasking);
|
||||
const hasDataMaskingPolicyFromCollection =
|
||||
dataMaskingPolicy?.includedPaths?.length > 0 || dataMaskingPolicy?.excludedPaths?.length > 0;
|
||||
|
||||
return hasDataMaskingCapability || hasDataMaskingPolicyFromCollection;
|
||||
};
|
||||
|
||||
export const parseConflictResolutionMode = (modeFromBackend: string): DataModels.ConflictResolutionMode => {
|
||||
// Backend can contain different casing as it does case-insensitive comparisson
|
||||
if (!modeFromBackend) {
|
||||
|
||||
@@ -604,6 +604,60 @@ exports[`SettingsComponent renders 1`] = `
|
||||
/>
|
||||
</Stack>
|
||||
</PivotItem>
|
||||
<PivotItem
|
||||
headerButtonProps={
|
||||
{
|
||||
"data-test": "settings-tab-header/DataMaskingTab",
|
||||
}
|
||||
}
|
||||
headerText="Masking Policy (preview)"
|
||||
itemKey="DataMaskingTab"
|
||||
key="DataMaskingTab"
|
||||
style={
|
||||
{
|
||||
"backgroundColor": "var(--colorNeutralBackground1)",
|
||||
"color": "var(--colorNeutralForeground1)",
|
||||
"marginTop": 20,
|
||||
}
|
||||
}
|
||||
>
|
||||
<Stack
|
||||
styles={
|
||||
{
|
||||
"root": {
|
||||
"backgroundColor": "var(--colorNeutralBackground1)",
|
||||
"color": "var(--colorNeutralForeground1)",
|
||||
},
|
||||
}
|
||||
}
|
||||
>
|
||||
<DataMaskingComponent
|
||||
dataMaskingContent={
|
||||
{
|
||||
"excludedPaths": [
|
||||
"/excludedPath",
|
||||
],
|
||||
"includedPaths": [],
|
||||
"isPolicyEnabled": true,
|
||||
}
|
||||
}
|
||||
dataMaskingContentBaseline={
|
||||
{
|
||||
"excludedPaths": [
|
||||
"/excludedPath",
|
||||
],
|
||||
"includedPaths": [],
|
||||
"isPolicyEnabled": true,
|
||||
}
|
||||
}
|
||||
onDataMaskingContentChange={[Function]}
|
||||
onDataMaskingDirtyChange={[Function]}
|
||||
resetShouldDiscardDataMasking={[Function]}
|
||||
shouldDiscardDataMasking={false}
|
||||
validationErrors={[]}
|
||||
/>
|
||||
</Stack>
|
||||
</PivotItem>
|
||||
<PivotItem
|
||||
headerButtonProps={
|
||||
{
|
||||
|
||||
@@ -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>
|
||||
<Dropdown
|
||||
label="Cosmos DB Account Name"
|
||||
items={accounts}
|
||||
selectedItem={selectedAccount}
|
||||
onSelect={(account) => setSelectedAccountName(account.name)}
|
||||
getKey={(account) => account.name}
|
||||
getDisplayText={(account) => account.name}
|
||||
placeholder="Select an Account"
|
||||
filterPlaceholder="Filter accounts"
|
||||
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",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -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="Filter subscriptions"
|
||||
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",
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user