feat(collectionView): add Index Management tab#732
Open
khelanmodi wants to merge 1 commit into
Open
Conversation
Contributor
There was a problem hiding this comment.
Pull request overview
Adds a new Indexes tab to the existing CollectionView webview, including a front-end scaffold for listing and managing collection indexes (create, delete, hide/unhide) backed by a new mongoClusters.indexView tRPC router.
Changes:
- Introduces the new
indexView/webview area (tab component, table/footer, create + confirm dialogs, formatting/classification utils, constants, styling). - Adds an
indexViewRoutertRPC router and mounts it undermongoClusters.indexViewin the root webviewappRouter. - Updates CollectionView + toolbar behavior to expose the Indexes tab, hide the query editor on that tab, and swap the primary toolbar action to “Create Index” via a custom window event.
Reviewed changes
Copilot reviewed 16 out of 16 changed files in this pull request and generated 8 comments.
Show a summary per file
| File | Description |
|---|---|
| src/webviews/documentdb/indexView/utils/indexType.ts | Classifies indexes into badge categories for the table “Type” column. |
| src/webviews/documentdb/indexView/utils/format.ts | Adds formatting helpers for bytes, ops, and date/tooltip strings. |
| src/webviews/documentdb/indexView/types.ts | Defines IndexRow view-model + create-index input types. |
| src/webviews/documentdb/indexView/indexViewRouter.ts | New tRPC router implementing list/create/drop/hide/unhide and field suggestions. |
| src/webviews/documentdb/indexView/indexView.scss | Styling for the Indexes tab layout, table, and dialog controls. |
| src/webviews/documentdb/indexView/IndexesTab.tsx | Main Indexes tab component (fetching, dialogs, hide/unhide, delete flow). |
| src/webviews/documentdb/indexView/constants.ts | Central constants (thresholds, directions, event name, id index name). |
| src/webviews/documentdb/indexView/components/IndexTypeBadgeView.tsx | Renders Fluent UI badge for index type. |
| src/webviews/documentdb/indexView/components/IndexTable.tsx | Renders the indexes table + action buttons and tooltips. |
| src/webviews/documentdb/indexView/components/IndexFooterBar.tsx | Renders footer totals (indexes/memory/usage) as a live region. |
| src/webviews/documentdb/indexView/components/CreateIndexDialog.tsx | Create Index dialog UI + validation and payload shaping. |
| src/webviews/documentdb/indexView/components/ConfirmDialog.tsx | Reusable confirm dialog wrapper for destructive/caution actions. |
| src/webviews/documentdb/collectionView/components/toolbar/ToolbarMainView.tsx | Switches primary toolbar action to “Create Index” when on Indexes tab. |
| src/webviews/documentdb/collectionView/CollectionView.tsx | Adds Indexes tab, hides QueryEditor on Indexes, renders IndexesTab panel. |
| src/webviews/_integration/appRouter.ts | Mounts mongoClusters.indexView router. |
| l10n/bundle.l10n.json | Adds localization entries for newly introduced UI strings. |
| relationship="description" | ||
| withArrow | ||
| > | ||
| <span>{formatOps(idx.usageOps)}</span> |
Comment on lines
+87
to
+94
| <Button | ||
| appearance="subtle" | ||
| size="small" | ||
| icon={<DeleteRegular />} | ||
| aria-label={l10n.t('Delete index {0}', idx.name)} | ||
| disabled={isProtected} | ||
| onClick={() => onDelete(idx)} | ||
| /> |
Comment on lines
+107
to
+118
| <Button | ||
| appearance="subtle" | ||
| size="small" | ||
| icon={idx.hidden ? <EyeRegular /> : <EyeOffRegular />} | ||
| aria-label={ | ||
| idx.hidden | ||
| ? l10n.t('Unhide index {0}', idx.name) | ||
| : l10n.t('Hide index {0}', idx.name) | ||
| } | ||
| disabled={isProtected} | ||
| onClick={() => onToggleHidden(idx)} | ||
| /> |
Comment on lines
+72
to
+75
| </Tooltip> | ||
| </TableCell> | ||
| <TableCell>{formatDate(idx.usageSince)}</TableCell> | ||
| <TableCell>{idx.notes ?? ''}</TableCell> |
|
|
||
| return ( | ||
| <div className="indexView"> | ||
| {isLoading && <ProgressBar thickness="large" shape="square" className="progressBar" />} |
| : ASC_DIRECTION, | ||
| }) | ||
| } | ||
| aria-label={l10n.t('Sort direction')} |
| // 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')} |
Comment on lines
+353
to
+357
| .mutation(async ({ input, ctx }) => { | ||
| const myCtx = ctx as WithTelemetry<RouterContext>; | ||
| const client = await ClustersClient.getClient(myCtx.clusterId); | ||
| await client.unhideIndex(myCtx.databaseName, myCtx.collectionName, input.indexName); | ||
| return { ok: true }; |
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>
khelanmodi
force-pushed
the
dev/khelanmodi/index-management-ui
branch
from
98e708c to
72ddf92
Compare
Contributor
✅ Code Quality Checks
This comment is updated automatically on each push. |
Contributor
📦 Build Size Report
Download artifact · updated automatically on each push. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
feat(collectionView): Index Management tab
Summary
Adds an Indexes tab inside the existing
CollectionView(betweenResults and Query Insights) for managing collection indexes from the
extension. This PR contains the UI / front-end scaffold. The tRPC
router that brokers calls to
ClustersClientis in place, but everyintegration point is annotated for the backend engineer to validate
end-to-end against the real cluster surface.
What ships in this PR (UI only)
CollectionView(no new webview, no new command,no new context-menu entry). Renders when
selectedTab === 'tab_indexes'.toolbar swaps its Find Query action for Create Index while on the
Indexes tab. Triggered via a
documentdb:openCreateIndexcustom eventso the toolbar stays decoupled from the tab internals.
Indexes tab; visible on Results / Query Insights as before.
(with tooltip showing the time window), Created, Notes, Actions
(Delete, Hide/Unhide). The pencil/Edit action has been removed for
this iteration — see follow-ups below.
SchemaStore),per-field asc/desc, type selector (Single Field / TTL / Geospatial /
Text) with type-specific options (unique + sparse for single-field,
expiry for TTL), optional name + notes, ≥1-field / ≥1-type validation,
and the large-collection warning banner (>
LARGE_COLLECTION_THRESHOLD_DOCS= 1,000,000 documents).— no new colors, fonts, spacing units, or runtime dependencies.
Backend integration surface — for the backend engineer
All UI ↔ backend traffic flows through one file:
The top of the file has a
BACKEND INTEGRATION SURFACEbanner andevery procedure is preceded by a
// BACKEND INTEGRATION POINT — <procedureName>block that documents:ClustersClientmethod is currently called,Search the file for
BACKEND INTEGRATION POINTto walk through them.Procedure inventory
getInfolistIndexesClustersClient.listIndexes+getCollectionStats+getIndexStatsgetCollectionDocumentCountClustersClient.getCollectionStatsgetFieldSuggestionsSchemaStore.getInstance().getKnownFields(in-process; no backend call)createIndexClustersClient.createIndexdropIndexClustersClient.dropIndexhideIndex/unhideIndexClustersClient.{hide,unhide}IndexAll of the above
ClustersClientmethods already exist; the router callsthem through their existing signatures and shapes the response into the
view-model types in
./types.ts. If you need to change the underlyingtransport (capability gating, batching, caching, server-side endpoint),
do it inside the procedure — the webview never needs to know.
Known follow-ups (not blocking this PR)
behaviour and surface a better error if the index is mid-build.
don't support
collMod { hidden }. Return a typed error so the UIcan disable the toggle proactively.
IndexRow.notespersistence — the field is read-only today;wire up storage when product confirms scope.
$search, vector) are intentionally notsurfaced in v1 — confirm we want to keep them filtered out.
this PR. If product wants it back, the agreed pattern is "delete +
open Create dialog pre-filled".
Files changed
src/webviews/documentdb/collectionView/CollectionView.tsxsrc/webviews/documentdb/collectionView/components/toolbar/ToolbarMainView.tsxsrc/webviews/documentdb/indexView/(new folder)src/webviews/_integration/appRouter.tsmongoClusters.indexView.Local testing
npm run buildVerification
npm run l10nnpm run prettier-fixnpm run lintnpx jest --no-coveragenpm run buildnpm run package