feat(collectionView): add Index Management tab

Adds an Indexes tab inside the existing CollectionView (between Results and Query Insights) for managing collection indexes:

- Indexes tab in CollectionView (no new webview, no new command, no context-menu entry)

- Top-toolbar Create Index button (replaces Find Query on the Indexes tab)

- Find Query editor hidden on the Indexes tab

- Index table: Name, Type (color pill), Fields, Memory, Usage (tooltip), Created, Notes, Actions (Delete, Hide/Unhide)

- Create Index dialog: field picker (SchemaStore), per-field asc/desc, type selector with type-specific options, large-collection warning, validation

- Footer with totals; ConfirmDialog for destructive delete

- Reuses Fluent UI v9 + existing theme tokens; no new runtime dependencies

Backend integration: all UI <-> backend traffic flows through src/webviews/documentdb/indexView/indexViewRouter.ts. Every procedure has a BACKEND INTEGRATION POINT comment block for the backend engineer documenting expected shape, currently-called ClustersClient method, and follow-ups.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: khelanmodi

l10n/bundle.l10n.json

@@ -51,6 +51,12 @@ export async function openCollectionViewInternal(
             skip?: number;
             limit?: number;
         };
+        /**
+         * Optional tab to land on when the view opens. When invoked from the
+         * "Indexes" tree node we pass `'tab_indexes'` so the user lands
+         * directly on the Index Management tab instead of Documents.
+         */
+        initialTab?: 'tab_result' | 'tab_indexes' | 'tab_queryInsights';
     },
 ): Promise<void> {
     /**
@@ -79,6 +85,7 @@ export async function openCollectionViewInternal(
         collectionName: props.collectionName,
         feedbackSignalsEnabled: feedbackSignalsEnabled,
         initialQuery: props.initialQuery,
+        initialTab: props.initialTab,
     });
 
     // Clean up the ClusterSession when the tab is closed

src/commands/openCollectionView/openCollectionView.ts

@@ -137,8 +137,29 @@ export class IndexesItem implements TreeElement, TreeElementWithExperience, Tree
             contextValue: this.contextValue,
             label: l10n.t('Indexes'),
             description,
+            tooltip: l10n.t('Double-click to open the index management view'),
             iconPath: new vscode.ThemeIcon('combine'), // TODO: create our onw icon here, this one's shape can change
             collapsibleState: vscode.TreeItemCollapsibleState.Collapsed,
+            // Reuse the existing collection-view "open from tree" command so we
+            // pick up the double-click debounce + telemetry wrapping for free.
+            // Passing `initialTab: 'tab_indexes'` makes the Indexes tab the
+            // first thing the user sees.
+            command: {
+                title: l10n.t('Open Indexes'), // unused, but required by TreeItem
+                command: 'vscode-documentdb.command.internal.containerView.openFromTree',
+                arguments: [
+                    {
+                        id: this.id,
+                        viewTitle: `${this.collectionInfo.name}`,
+                        clusterId: this.cluster.clusterId,
+                        clusterDisplayName: this.cluster.name,
+                        viewId: this.cluster.viewId,
+                        databaseName: this.databaseInfo.name,
+                        collectionName: this.collectionInfo.name,
+                        initialTab: 'tab_indexes',
+                    },
+                ],
+            },
         };
     }
 }

src/tree/documentdb/IndexesItem.ts

@@ -32,6 +32,7 @@ import { openSurvey, promptAfterActionEventually } from '../../utils/survey';
 import { UsageImpact } from '../../utils/surveyTypes';
 import { collectionsViewRouter as collectionViewRouter } from '../documentdb/collectionView/collectionViewRouter';
 import { documentsViewRouter as documentViewRouter } from '../documentdb/documentView/documentsViewRouter';
+import { indexViewRouter } from '../documentdb/indexView/indexViewRouter';
 import { WEBVIEW_CONFIG } from './configuration';
 import { publicProcedure, publicProcedureWithTelemetry, router, type WithTelemetry } from './trpc';
 
@@ -188,6 +189,7 @@ export const appRouter = router({
     mongoClusters: {
         documentView: documentViewRouter,
         collectionView: collectionViewRouter,
+        indexView: indexViewRouter,
     },
 });
 

src/webviews/_integration/appRouter.ts

@@ -13,6 +13,7 @@ import { useTrpcClient } from '../../_integration/useTrpcClient';
 import { Announcer } from '../../components/accessibility';
 import { useSelectiveContextMenuPrevention } from '../../components/useSelectiveContextMenuPrevention';
 import { setCompletionContext } from '../../query-language-support';
+import { IndexesTab } from '../indexView/IndexesTab';
 import './collectionView.scss';
 import {
     CollectionViewContext,
@@ -122,8 +123,12 @@ export const CollectionView = (): JSX.Element => {
     // TODO: it's a potential data duplication in the end, consider moving it into the global context of the view
     const [currentQueryResults, setCurrentQueryResults] = useState<QueryResults>();
 
-    // Track which tab is currently active
-    const [selectedTab, setSelectedTab] = useState<'tab_result' | 'tab_queryInsights'>('tab_result');
+    // Track which tab is currently active. Honors `configuration.initialTab`
+    // so an external caller (e.g. the "Indexes" tree node) can open the view
+    // pre-pinned to the Index Management tab.
+    const [selectedTab, setSelectedTab] = useState<'tab_result' | 'tab_indexes' | 'tab_queryInsights'>(
+        () => configuration.initialTab ?? 'tab_result',
+    );
 
     // keep Refs updated with the current state
     const currentQueryResultsRef = useRef(currentQueryResults);
@@ -566,55 +571,57 @@ export const CollectionView = (): JSX.Element => {
                 />
 
                 <div className="toolbarMainView">
-                    <ToolbarMainView />
+                    <ToolbarMainView selectedTab={selectedTab} />
                 </div>
 
-                <QueryEditor
-                    onExecuteRequest={() => {
-                        // Get all query values from the editor at once
-                        const query = currentContext.queryEditor?.getCurrentQuery() ?? {
-                            filter: '{  }',
-                            project: '{  }',
-                            sort: '{  }',
-                            skip: 0,
-                            limit: 0,
-                        };
-
-                        setCurrentContext((prev) => ({
-                            ...prev,
-                            activeQuery: {
-                                ...prev.activeQuery,
-                                queryText: query.filter, // deprecated: kept in sync with filter
-                                filter: query.filter,
-                                project: query.project,
-                                sort: query.sort,
-                                skip: query.skip,
-                                limit: query.limit,
-                                pageNumber: 1,
-                                executionIntent: 'initial',
-                            },
-                        }));
-
-                        trpcClient.common.reportEvent
-                            .mutate({
-                                eventName: 'executeQuery',
-                                properties: {
-                                    ui: 'shortcut',
-                                },
-                                measurements: {
-                                    queryLenth: query.filter.length,
+                {selectedTab !== 'tab_indexes' && (
+                    <QueryEditor
+                        onExecuteRequest={() => {
+                            // Get all query values from the editor at once
+                            const query = currentContext.queryEditor?.getCurrentQuery() ?? {
+                                filter: '{  }',
+                                project: '{  }',
+                                sort: '{  }',
+                                skip: 0,
+                                limit: 0,
+                            };
+
+                            setCurrentContext((prev) => ({
+                                ...prev,
+                                activeQuery: {
+                                    ...prev.activeQuery,
+                                    queryText: query.filter, // deprecated: kept in sync with filter
+                                    filter: query.filter,
+                                    project: query.project,
+                                    sort: query.sort,
+                                    skip: query.skip,
+                                    limit: query.limit,
+                                    pageNumber: 1,
+                                    executionIntent: 'initial',
                                 },
-                            })
-                            .catch((error) => {
-                                console.debug('Failed to report an event:', error);
-                            });
-                    }}
-                />
+                            }));
+
+                            trpcClient.common.reportEvent
+                                .mutate({
+                                    eventName: 'executeQuery',
+                                    properties: {
+                                        ui: 'shortcut',
+                                    },
+                                    measurements: {
+                                        queryLenth: query.filter.length,
+                                    },
+                                })
+                                .catch((error) => {
+                                    console.debug('Failed to report an event:', error);
+                                });
+                        }}
+                    />
+                )}
 
                 <TabList
                     selectedValue={selectedTab}
                     onTabSelect={(_event, data) => {
-                        const newTab = data.value as 'tab_result' | 'tab_queryInsights';
+                        const newTab = data.value as 'tab_result' | 'tab_indexes' | 'tab_queryInsights';
 
                         // Report tab switching telemetry
                         trpcClient.common.reportEvent
@@ -634,7 +641,10 @@ export const CollectionView = (): JSX.Element => {
                     style={{ marginTop: '-10px' }}
                 >
                     <Tab id="tab.results" value="tab_result">
-                        Results
+                        {l10n.t('Documents')}
+                    </Tab>
+                    <Tab id="tab.indexes" value="tab_indexes">
+                        {l10n.t('Indexes')}
                     </Tab>
                     <Tab id="tab.queryInsights" value="tab_queryInsights">
                         <div style={{ display: 'flex', alignItems: 'center', gap: '6px' }}>
@@ -690,6 +700,8 @@ export const CollectionView = (): JSX.Element => {
                     </>
                 )}
 
+                {selectedTab === 'tab_indexes' && <IndexesTab collectionName={configuration.collectionName} />}
+
                 {selectedTab === 'tab_queryInsights' && <QueryInsightsMain />}
             </div>
         </CollectionViewContext.Provider>

src/webviews/documentdb/collectionView/CollectionView.tsx

@@ -37,6 +37,13 @@ export type CollectionViewWebviewConfigurationType = {
         skip?: number;
         limit?: number;
     };
+    /**
+     * Optional tab to land on when the view opens. Defaults to `tab_result`
+     * (the Documents tab). Used when the user double-clicks the "Indexes"
+     * node in the tree so the Index Management tab is the first thing
+     * they see.
+     */
+    initialTab?: 'tab_result' | 'tab_indexes' | 'tab_queryInsights';
 };
 
 export class CollectionViewController extends WebviewControllerBase<CollectionViewWebviewConfigurationType> {

src/webviews/documentdb/collectionView/collectionViewController.ts

@@ -22,6 +22,7 @@ import {
     useOverflowMenu,
 } from '@fluentui/react-components';
 import {
+    AddRegular,
     ArrowClockwiseRegular,
     ArrowExportRegular,
     ArrowImportRegular,
@@ -38,21 +39,31 @@ import { useConfiguration } from '@microsoft/vscode-ext-react-webview';
 import * as l10n from '@vscode/l10n';
 import { useContext, type JSX } from 'react';
 import { useTrpcClient } from '../../../../_integration/useTrpcClient';
+import { OPEN_CREATE_INDEX_EVENT } from '../../../indexView/constants';
 import { CollectionViewContext } from '../../collectionViewContext';
 import { type CollectionViewWebviewConfigurationType } from '../../collectionViewController';
 import { useHideScrollbarsDuringResize } from '../../hooks/useHideScrollbarsDuringResize';
 import { ToolbarDividerTransparent } from './ToolbarDividerTransparent';
 
-export const ToolbarMainView = (): JSX.Element => {
+export interface ToolbarMainViewProps {
+    /**
+     * Which CollectionView tab is currently active. The primary toolbar
+     * swaps its leading action button to match (Find Query on Results /
+     * Query Insights, Create Index on Indexes).
+     */
+    selectedTab?: 'tab_result' | 'tab_indexes' | 'tab_queryInsights';
+}
+
+export const ToolbarMainView = ({ selectedTab }: ToolbarMainViewProps): JSX.Element => {
     return (
         <>
-            <ToolbarQueryOperations />
+            <ToolbarQueryOperations selectedTab={selectedTab} />
             <ToolbarSecondaryActions />
         </>
     );
 };
 
-const ToolbarQueryOperations = (): JSX.Element => {
+const ToolbarQueryOperations = ({ selectedTab }: ToolbarMainViewProps): JSX.Element => {
     /**
      * Use the `useTrpcClient` hook to get the tRPC client
      */
@@ -160,15 +171,32 @@ const ToolbarQueryOperations = (): JSX.Element => {
 
     return (
         <Toolbar size="small" checkedValues={checkedValues} onCheckedValueChange={handleCheckedValueChange}>
-            <ToolbarButton
-                aria-label={l10n.t('Execute the find query')}
-                disabled={currentContext.isLoading}
-                icon={<PlayRegular />}
-                onClick={handleExecuteQuery}
-                appearance="primary"
-            >
-                {l10n.t('Find Query')}
-            </ToolbarButton>
+            {selectedTab === 'tab_indexes' ? (
+                // On the Indexes tab the primary action is creating a new
+                // index. We dispatch a window-level CustomEvent that the
+                // IndexesTab component listens for; this keeps the toolbar
+                // free of any direct coupling to the IndexesTab internals.
+                <ToolbarButton
+                    aria-label={l10n.t('Create a new index')}
+                    icon={<AddRegular />}
+                    appearance="primary"
+                    onClick={() => {
+                        window.dispatchEvent(new CustomEvent(OPEN_CREATE_INDEX_EVENT));
+                    }}
+                >
+                    {l10n.t('Create Index')}
+                </ToolbarButton>
+            ) : (
+                <ToolbarButton
+                    aria-label={l10n.t('Execute the find query')}
+                    disabled={currentContext.isLoading}
+                    icon={<PlayRegular />}
+                    onClick={handleExecuteQuery}
+                    appearance="primary"
+                >
+                    {l10n.t('Find Query')}
+                </ToolbarButton>
+            )}
 
             <ToolbarDividerTransparent />