*
- {confirmContainer}
+
+ {confirmContainer}
+
{
setInputCollectionName(newInput);
}}
@@ -141,15 +161,15 @@ export const DeleteCollectionConfirmationPane: FunctionComponent
{shouldRecordFeedback() && (
-
+
{t(Keys.panes.deleteCollection.feedbackTitle)}
-
+
{t(Keys.panes.deleteCollection.feedbackReason, { collectionName })}
Confirm by typing the container id
@@ -45,9 +55,27 @@ exports[`Delete Collection Confirmation Pane submit() should call delete collect
required={true}
styles={
{
+ "field": {
+ "backgroundColor": "var(--colorNeutralBackground1)",
+ "color": "var(--colorNeutralForeground1)",
+ },
"fieldGroup": {
+ "backgroundColor": "var(--colorNeutralBackground1)",
+ "borderColor": "var(--colorNeutralStroke1)",
+ "selectors": {
+ ":hover": {
+ "borderColor": "var(--colorNeutralStroke1Hover)",
+ },
+ },
"width": 300,
},
+ "subComponentStyles": {
+ "label": {
+ "root": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
}
}
value=""
diff --git a/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx b/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx
index c8823766f..a9473efcb 100644
--- a/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx
+++ b/src/Explorer/Panes/DeleteDatabaseConfirmationPanel.tsx
@@ -20,6 +20,24 @@ import { useSelectedNode } from "../useSelectedNode";
import { PanelInfoErrorComponent, PanelInfoErrorProps } from "./PanelInfoErrorComponent";
import { RightPaneForm, RightPaneFormProps } from "./RightPaneForm/RightPaneForm";
+const themedTextFieldStyles = {
+ fieldGroup: {
+ width: 300,
+ backgroundColor: "var(--colorNeutralBackground1)",
+ borderColor: "var(--colorNeutralStroke1)",
+ selectors: {
+ ":hover": { borderColor: "var(--colorNeutralStroke1Hover)" },
+ },
+ },
+ field: {
+ color: "var(--colorNeutralForeground1)",
+ backgroundColor: "var(--colorNeutralBackground1)",
+ },
+ subComponentStyles: {
+ label: { root: { color: "var(--colorNeutralForeground1)" } },
+ },
+};
+
interface DeleteDatabaseConfirmationPanelProps {
refreshDatabases: () => Promise;
}
@@ -143,12 +161,14 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent
*
- {confirmDatabase}
+
+ {confirmDatabase}
+
{
setDatabaseInput(newInput);
}}
@@ -158,15 +178,15 @@ export const DeleteDatabaseConfirmationPanel: FunctionComponent
{isLastNonEmptyDatabase() && (
-
+
{t(Keys.panes.deleteDatabase.feedbackTitle)}
-
+
{t(Keys.panes.deleteDatabase.feedbackReason, { databaseName: getDatabaseName() })}
{
diff --git a/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap b/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap
index ed87acb0a..db4b69e21 100644
--- a/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap
+++ b/src/Explorer/Panes/__snapshots__/DeleteDatabaseConfirmationPanel.test.tsx.snap
@@ -356,10 +356,20 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
*
Confirm by typing the Database id (name)
@@ -373,9 +383,27 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
required={true}
styles={
{
+ "field": {
+ "backgroundColor": "var(--colorNeutralBackground1)",
+ "color": "var(--colorNeutralForeground1)",
+ },
"fieldGroup": {
+ "backgroundColor": "var(--colorNeutralBackground1)",
+ "borderColor": "var(--colorNeutralStroke1)",
+ "selectors": {
+ ":hover": {
+ "borderColor": "var(--colorNeutralStroke1Hover)",
+ },
+ },
"width": 300,
},
+ "subComponentStyles": {
+ "label": {
+ "root": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
}
}
>
@@ -699,20 +727,40 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
>
Help us improve Azure Cosmos DB!
What is the reason why you are deleting this Database?
@@ -725,9 +773,27 @@ exports[`Delete Database Confirmation Pane Should call delete database 1`] = `
rows={3}
styles={
{
+ "field": {
+ "backgroundColor": "var(--colorNeutralBackground1)",
+ "color": "var(--colorNeutralForeground1)",
+ },
"fieldGroup": {
+ "backgroundColor": "var(--colorNeutralBackground1)",
+ "borderColor": "var(--colorNeutralStroke1)",
+ "selectors": {
+ ":hover": {
+ "borderColor": "var(--colorNeutralStroke1Hover)",
+ },
+ },
"width": 300,
},
+ "subComponentStyles": {
+ "label": {
+ "root": {
+ "color": "var(--colorNeutralForeground1)",
+ },
+ },
+ },
}
}
>
diff --git a/src/Explorer/Tree/ResourceTree.tsx b/src/Explorer/Tree/ResourceTree.tsx
index 2405be01e..47d442687 100644
--- a/src/Explorer/Tree/ResourceTree.tsx
+++ b/src/Explorer/Tree/ResourceTree.tsx
@@ -1,5 +1,12 @@
-import { Tree, TreeItemValue, TreeOpenChangeData, TreeOpenChangeEvent } from "@fluentui/react-components";
-import { Home16Regular } from "@fluentui/react-icons";
+import {
+ Button,
+ Input,
+ Tree,
+ TreeItemValue,
+ TreeOpenChangeData,
+ TreeOpenChangeEvent,
+} from "@fluentui/react-components";
+import { ArrowSortDown20Regular, ArrowSortUp20Regular, Home16Regular, Search20Regular } from "@fluentui/react-icons";
import { AuthType } from "AuthType";
import { useTreeStyles } from "Explorer/Controls/TreeComponent/Styles";
import { TreeNode, TreeNodeComponent } from "Explorer/Controls/TreeComponent/TreeNodeComponent";
@@ -55,6 +62,11 @@ export const ResourceTree: React.FC = ({ explorer }: Resource
sampleDataResourceTokenCollection: state.sampleDataResourceTokenCollection,
}));
const databasesFetchedSuccessfully = useDatabases((state) => state.databasesFetchedSuccessfully);
+ const searchText = useDatabases((state) => state.searchText);
+ const setSearchText = useDatabases((state) => state.setSearchText);
+ const sortOrder = useDatabases((state) => state.sortOrder);
+ const setSortOrder = useDatabases((state) => state.setSortOrder);
+ const pinnedDatabaseIds = useDatabases((state) => state.pinnedDatabaseIds);
const { isCopilotEnabled, isCopilotSampleDBEnabled } = useQueryCopilot((state) => ({
isCopilotEnabled: state.copilotEnabled,
isCopilotSampleDBEnabled: state.copilotSampleDBEnabled,
@@ -63,8 +75,24 @@ export const ResourceTree: React.FC = ({ explorer }: Resource
const databaseTreeNodes = useMemo(() => {
return userContext.authType === AuthType.ResourceToken
? createResourceTokenTreeNodes(resourceTokenCollection)
- : createDatabaseTreeNodes(explorer, isNotebookEnabled, databases, refreshActiveTab);
- }, [resourceTokenCollection, databases, isNotebookEnabled, refreshActiveTab]);
+ : createDatabaseTreeNodes(
+ explorer,
+ isNotebookEnabled,
+ databases,
+ refreshActiveTab,
+ searchText,
+ sortOrder,
+ pinnedDatabaseIds,
+ );
+ }, [
+ resourceTokenCollection,
+ databases,
+ isNotebookEnabled,
+ refreshActiveTab,
+ searchText,
+ sortOrder,
+ pinnedDatabaseIds,
+ ]);
const isSampleDataEnabled =
isCopilotEnabled &&
@@ -114,46 +142,65 @@ export const ResourceTree: React.FC = ({ explorer }: Resource
} else {
return [...headerNodes, ...databaseTreeNodes];
}
+ // headerNodes is intentionally excluded — it depends only on isFabricMirrored() which is stable.
+ // eslint-disable-next-line react-hooks/exhaustive-deps
}, [databaseTreeNodes, sampleDataNodes]);
// Track complete DatabaseLoad scenario (start, tree rendered, interactive)
useDatabaseLoadScenario(databaseTreeNodes, databasesFetchedSuccessfully);
useEffect(() => {
- // Compute open items based on node.isExpanded
- const updateOpenItems = (node: TreeNode, parentNodeId: string): void => {
- // This will look for ANY expanded node, event if its parent node isn't expanded
- // and add it to the openItems list
+ const expandedIds: TreeItemValue[] = [];
+ const collectExpandedIds = (node: TreeNode, parentNodeId: string | undefined): void => {
const globalId = parentNodeId === undefined ? node.label : `${parentNodeId}/${node.label}`;
-
if (node.isExpanded) {
- let found = false;
- for (const id of openItems) {
- if (id === globalId) {
- found = true;
- break;
- }
- }
- if (!found) {
- setOpenItems((prevOpenItems) => [...prevOpenItems, globalId]);
- }
+ expandedIds.push(globalId);
}
-
if (node.children) {
for (const child of node.children) {
- updateOpenItems(child, globalId);
+ collectExpandedIds(child, globalId);
}
}
};
- rootNodes.forEach((n) => updateOpenItems(n, undefined));
- }, [rootNodes, openItems, setOpenItems]);
+ rootNodes.forEach((n) => collectExpandedIds(n, undefined));
+
+ if (expandedIds.length > 0) {
+ setOpenItems((prevOpenItems) => {
+ const prevSet = new Set(prevOpenItems);
+ const newIds = expandedIds.filter((id) => !prevSet.has(id));
+ return newIds.length > 0 ? [...prevOpenItems, ...newIds] : prevOpenItems;
+ });
+ }
+ }, [rootNodes]);
const handleOpenChange = (event: TreeOpenChangeEvent, data: TreeOpenChangeData) =>
setOpenItems(Array.from(data.openItems));
+ const toggleSortOrder = () => {
+ setSortOrder(sortOrder === "az" ? "za" : "az");
+ };
+
return (
+ {userContext.authType !== AuthType.ResourceToken && databases.length > 0 && (
+ = new Set(),
): TreeNode[] => {
- const databaseTreeNodes: TreeNode[] = databases.map((database: ViewModels.Database) => {
+ // Filter databases based on search text (cache lowercase to avoid repeated conversion)
+ const lowerSearch = searchText.toLowerCase();
+ const filteredDatabases = searchText
+ ? databases.filter((db) => db.id().toLowerCase().includes(lowerSearch))
+ : databases;
+
+ // Sort: pinned first, then by name (A-Z or Z-A) within each group
+ const orderedDatabases = [...filteredDatabases].sort((first, second) => {
+ const isFirstPinned = pinnedDatabaseIds.has(first.id());
+ const isSecondPinned = pinnedDatabaseIds.has(second.id());
+ if (isFirstPinned !== isSecondPinned) {
+ return isFirstPinned ? -1 : 1;
+ }
+ const firstName = first.id();
+ const secondName = second.id();
+ return sortOrder === "az"
+ ? firstName.localeCompare(secondName, undefined, { sensitivity: "base" })
+ : secondName.localeCompare(firstName, undefined, { sensitivity: "base" });
+ });
+
+ const databaseTreeNodes: TreeNode[] = orderedDatabases.map((database: ViewModels.Database) => {
const buildDatabaseChildNodes = (databaseNode: TreeNode) => {
databaseNode.children = [];
if (database.isDatabaseShared() && configContext.platform !== Platform.Fabric) {
@@ -170,13 +202,24 @@ export const createDatabaseTreeNodes = (
}
};
+ const isPinned = pinnedDatabaseIds.has(database.id());
+
+ const databaseIcon = isPinned ? (
+
+ ;
+ setSearchText: (searchText: string) => void;
+ setSortOrder: (sortOrder: DatabaseSortOrder) => void;
+ togglePinDatabase: (databaseId: string) => void;
+ isPinned: (databaseId: string) => boolean;
updateDatabase: (database: ViewModels.Database) => void;
addDatabases: (databases: ViewModels.Database[]) => void;
deleteDatabase: (database: ViewModels.Database) => void;
@@ -27,11 +37,41 @@ interface DatabasesState {
validateCollectionId: (databaseId: string, collectionId: string) => Promise;
}
+const loadPinnedDatabases = (): Set => {
+ const stored = LocalStorageUtility.getEntryObject(StorageKey.PinnedDatabases);
+ return new Set(Array.isArray(stored) ? stored : []);
+};
+
+const loadSortOrder = (): DatabaseSortOrder => {
+ const stored = LocalStorageUtility.getEntryString(StorageKey.DatabaseSortOrder);
+ return stored === "az" || stored === "za" ? stored : "az";
+};
+
export const useDatabases: UseStore = create((set, get) => ({
databases: [],
resourceTokenCollection: undefined,
sampleDataResourceTokenCollection: undefined,
databasesFetchedSuccessfully: false,
+ searchText: "",
+ sortOrder: loadSortOrder(),
+ pinnedDatabaseIds: loadPinnedDatabases(),
+ setSearchText: (searchText: string) => set({ searchText }),
+ setSortOrder: (sortOrder: DatabaseSortOrder) => {
+ LocalStorageUtility.setEntryString(StorageKey.DatabaseSortOrder, sortOrder);
+ set({ sortOrder });
+ },
+ togglePinDatabase: (databaseId: string) => {
+ const current = get().pinnedDatabaseIds;
+ const updated = new Set(current);
+ if (updated.has(databaseId)) {
+ updated.delete(databaseId);
+ } else {
+ updated.add(databaseId);
+ }
+ LocalStorageUtility.setEntryObject(StorageKey.PinnedDatabases, [...updated]);
+ set({ pinnedDatabaseIds: updated });
+ },
+ isPinned: (databaseId: string) => get().pinnedDatabaseIds.has(databaseId),
updateDatabase: (updatedDatabase: ViewModels.Database) =>
set((state) => {
const updatedDatabases = state.databases.map((database: ViewModels.Database) => {
@@ -45,29 +85,27 @@ export const useDatabases: UseStore = create((set, get) => ({
}),
addDatabases: (databases: ViewModels.Database[]) =>
set((state) => ({
- databases: [...state.databases, ...databases].sort((db1, db2) => db1.id().localeCompare(db2.id())),
+ databases: [...state.databases, ...databases],
})),
deleteDatabase: (database: ViewModels.Database) =>
- set((state) => ({ databases: state.databases.filter((db) => database.id() !== db.id()) })),
+ set((state) => {
+ const updated = new Set(state.pinnedDatabaseIds);
+ if (updated.delete(database.id())) {
+ LocalStorageUtility.setEntryObject(StorageKey.PinnedDatabases, [...updated]);
+ }
+ return {
+ databases: state.databases.filter((db) => database.id() !== db.id()),
+ pinnedDatabaseIds: updated,
+ };
+ }),
clearDatabases: () => set(() => ({ databases: [] })),
isSaveQueryEnabled: () => {
- const savedQueriesDatabase: ViewModels.Database = _.find(
- get().databases,
- (database: ViewModels.Database) => database.id() === Constants.SavedQueries.DatabaseName,
+ const savedQueriesDatabase = get().databases.find(
+ (database) => database.id() === Constants.SavedQueries.DatabaseName,
);
- if (!savedQueriesDatabase) {
- return false;
- }
- const savedQueriesCollection: ViewModels.Collection =
- savedQueriesDatabase &&
- _.find(
- savedQueriesDatabase.collections(),
- (collection: ViewModels.Collection) => collection.id() === Constants.SavedQueries.CollectionName,
- );
- if (!savedQueriesCollection) {
- return false;
- }
- return true;
+ return !!savedQueriesDatabase
+ ?.collections()
+ ?.find((collection) => collection.id() === Constants.SavedQueries.CollectionName);
},
findDatabaseWithId: (databaseId: string, isSampleDatabase?: boolean) => {
return isSampleDatabase === undefined
@@ -100,44 +138,24 @@ export const useDatabases: UseStore = create((set, get) => ({
return true;
},
loadDatabaseOffers: async () => {
- await Promise.all(
- get().databases?.map(async (database: ViewModels.Database) => {
- await database.loadOffer();
- }),
- );
+ await Promise.all(get().databases.map((database: ViewModels.Database) => database.loadOffer()));
},
loadAllOffers: async () => {
await Promise.all(
- get().databases?.map(async (database: ViewModels.Database) => {
- await database.loadOffer();
- await database.loadCollections();
+ get().databases.map(async (database: ViewModels.Database) => {
+ await Promise.all([database.loadOffer(), database.loadCollections()]);
await Promise.all(
- (database.collections() || []).map(async (collection: ViewModels.Collection) => {
- await collection.loadOffer();
- }),
+ (database.collections() || []).map((collection: ViewModels.Collection) => collection.loadOffer()),
);
}),
);
},
isFirstResourceCreated: () => {
const databases = get().databases;
-
- if (!databases || databases.length === 0) {
+ if (databases.length === 0) {
return false;
}
-
- return databases.some((database) => {
- // user has created at least one collection
- if (database.collections()?.length > 0) {
- return true;
- }
- // user has created a database with shared throughput
- if (database.offer()) {
- return true;
- }
- // use has created an empty database without shared throughput
- return false;
- });
+ return databases.some((database) => database.collections()?.length > 0 || !!database.offer());
},
findSelectedDatabase: (): ViewModels.Database => {
const selectedNode = useSelectedNode.getState().selectedNode;
@@ -145,7 +163,7 @@ export const useDatabases: UseStore = create((set, get) => ({
return undefined;
}
if (selectedNode.nodeKind === "Database") {
- return _.find(get().databases, (database: ViewModels.Database) => database.id() === selectedNode.id());
+ return get().databases.find((database) => database.id() === selectedNode.id());
}
if (selectedNode.nodeKind === "Collection") {
diff --git a/src/Main.tsx b/src/Main.tsx
index 43e1a90f6..4b06d0c53 100644
--- a/src/Main.tsx
+++ b/src/Main.tsx
@@ -82,6 +82,32 @@ const useStyles = makeStyles({
backgroundColor: "var(--colorNeutralBackground1)",
color: "var(--colorNeutralForeground1)",
},
+ splashContainer: {
+ zIndex: 5,
+ position: "absolute",
+ left: 0,
+ top: 0,
+ width: "100%",
+ height: "100%",
+ backgroundColor: "var(--colorNeutralBackground1)",
+ opacity: "0.7",
+ },
+ splashContent: {
+ display: "flex",
+ flexDirection: "column",
+ height: "100%",
+ textAlign: "center",
+ justifyContent: "center",
+ },
+ splashTitle: {
+ fontSize: "13px",
+ color: "var(--colorNeutralForeground1)",
+ margin: "6px 6px 12px 6px",
+ },
+ splashText: {
+ marginTop: "12px",
+ color: "var(--colorNeutralForeground2)",
+ },
});
const App = (): JSX.Element => {
@@ -234,15 +260,15 @@ function LoadingExplorer(): JSX.Element {
const styles = useStyles();
return (
+ setSearchText(data?.value || "")}
+ size="small"
+ contentBefore={
+ )}
-
-
+
+
diff --git a/src/Shared/StorageUtility.ts b/src/Shared/StorageUtility.ts
index 7f5c275ce..598f1d6a6 100644
--- a/src/Shared/StorageUtility.ts
+++ b/src/Shared/StorageUtility.ts
@@ -36,6 +36,8 @@ export enum StorageKey {
AppState,
MongoGuidRepresentation,
IgnorePartitionKeyOnDocumentUpdate,
+ PinnedDatabases,
+ DatabaseSortOrder,
}
export const hasRUThresholdBeenConfigured = (): boolean => {
+
Welcome to Azure Cosmos DB
-+
Connecting...