Microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-04-02 08:15:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

chat customizations: fix clipping (#304281)

Browse Source 
* fix: re-layout list when toggling browse mode in MCP/plugin widgets

When toggling browse mode, the back link appears/disappears but
layout() was never re-called, causing the list height to not
account for the changed chrome. This clipped the last entry.

Cache the last layout dimensions and re-call layout() after
toggling browse mode.

Fixes https://github.com/microsoft/vscode/issues/304139

* fix: register IProductService in AI customization component fixtures

The AICustomizationListWidget recently added a dependency on
IProductService but the component fixtures were not updated,
causing all AI customization fixtures to fail with
'depends on UNKNOWN service productService'.

* fix: address PR review — remove manual layout() in fixtures, fix null! in ParsedPromptFile
This commit is contained in:
Josh Spicer
2026-03-23 15:46:01 -07:00
committed by GitHub
parent 5785d325af
commit c3231e5f45
5 changed files with 448 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
.github/skills/chat-customizations-editor/SKILL.md vendored
View File

@@ -34,6 +34,53 @@ Principle: the UI widgets read everything from the descriptor — no harness-spe
Component explorer fixtures (see `component-fixtures` skill): `aiCustomizationListWidget.fixture.ts`, `aiCustomizationManagementEditor.fixture.ts` under `src/vs/workbench/test/browser/componentFixtures/`.
### Screenshotting specific tabs
The management editor fixture supports a `selectedSection` option to render any tab. Each tab has Dark/Light variants auto-generated by `defineThemedFixtureGroup`.
**Available fixture IDs** (use with `mcp_component-exp_screenshot`):
| Fixture ID pattern | Tab shown |
|---|---|
| `chat/aiCustomizations/aiCustomizationManagementEditor/AgentsTab/{Dark,Light}` | Agents |
| `chat/aiCustomizations/aiCustomizationManagementEditor/SkillsTab/{Dark,Light}` | Skills |
| `chat/aiCustomizations/aiCustomizationManagementEditor/InstructionsTab/{Dark,Light}` | Instructions |
| `chat/aiCustomizations/aiCustomizationManagementEditor/HooksTab/{Dark,Light}` | Hooks |
| `chat/aiCustomizations/aiCustomizationManagementEditor/PromptsTab/{Dark,Light}` | Prompts |
| `chat/aiCustomizations/aiCustomizationManagementEditor/McpServersTab/{Dark,Light}` | MCP Servers |
| `chat/aiCustomizations/aiCustomizationManagementEditor/PluginsTab/{Dark,Light}` | Plugins |
| `chat/aiCustomizations/aiCustomizationManagementEditor/LocalHarness/{Dark,Light}` | Default (Agents, Local harness) |
| `chat/aiCustomizations/aiCustomizationManagementEditor/CliHarness/{Dark,Light}` | Default (Agents, CLI harness) |
| `chat/aiCustomizations/aiCustomizationManagementEditor/ClaudeHarness/{Dark,Light}` | Default (Agents, Claude harness) |
| `chat/aiCustomizations/aiCustomizationManagementEditor/Sessions/{Dark,Light}` | Sessions window variant |
**Adding a new tab fixture:** Add a variant to the `defineThemedFixtureGroup` in `aiCustomizationManagementEditor.fixture.ts`:
```typescript
MyNewTab: defineComponentFixture({
labels: { kind: 'screenshot' },
render: ctx => renderEditor(ctx, {
harness: CustomizationHarness.VSCode,
selectedSection: AICustomizationManagementSection.MySection,
}),
}),
```
The `selectedSection` calls `editor.selectSectionById()` after `setInput`, which navigates to the specified tab and re-layouts.
### Populating test data
Each customization type requires its own mock path in `createMockPromptsService`:
- **Agents** — `getCustomAgents()` returns agent objects
- **Skills** — `findAgentSkills()` returns `IAgentSkill[]`
- **Prompts** — `getPromptSlashCommands()` returns `IChatPromptSlashCommand[]`
- **Instructions/Hooks** — `listPromptFiles()` filtered by `PromptsType`
- **MCP Servers** — `mcpWorkspaceServers`/`mcpUserServers` arrays passed to `IMcpWorkbenchService` mock
- **Plugins** — `IPluginMarketplaceService.installedPlugins` and `IAgentPluginService.plugins` observables
All test data lives in `allFiles` (prompt-based items) and the `mcpWorkspace/UserServers` arrays. Add enough items per category (8+) to invoke scrolling.
### Running unit tests
```bash
./scripts/test.sh --grep "applyStorageSourceFilter|customizationCounts"
npm run compile-check-ts-native && npm run valid-layers-check