Re-enable MDX documentation support in Storybook v10 #4263

Copilot · 2026-01-19T15:29:38Z

Completes the Storybook v10 migration by restoring MDX documentation pages that were temporarily disabled in the previous fix.

Changes

Install @storybook/addon-docs: Required for MDX support in Storybook v10 (no longer included by default)
Update .storybook/main.ts: Add addon-docs to addons array and re-enable *.mdx files in stories glob
Fix import path in Overview.mdx: Change from @storybook/blocks to @storybook/addon-docs/blocks (blocks are now exported as subpath)

// .storybook/main.ts
const config: StorybookConfig = {
-  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
+    "@storybook/addon-docs",
     "@storybook/addon-links",
     "@storybook/addon-a11y",
     "./vscode-theme-addon/preset.ts",
   ],
};

Screenshot

Overview documentation page now renders correctly with all content, images, and links:

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

storybook.js.org
- Triggering command: /usr/local/bin/node node /home/REDACTED/work/vscode-codeql/vscode-codeql/extensions/ql-vscode/node_modules/.bin/storybook build (dns block)
- Triggering command: /usr/local/bin/node node /home/REDACTED/work/vscode-codeql/vscode-codeql/extensions/ql-vscode/node_modules/.bin/storybook dev -p 6006 (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Configure Actions setup steps to set up my environment, which run before the firewall is enabled
Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

Original prompt

Fix the failing GitHub Actions workflow build
Analyze the workflow logs, identify the root cause of the failure, and implement a fix.
Job ID: 60801511444
Job URL: https://github.com/github/vscode-codeql/actions/runs/21141448950/job/60801511444

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

…rily disabling MDX - Convert require.resolve() to ES module syntax using import.meta.url - Remove MDX files from stories config to fix build (MDX support needs proper addon configuration) Co-authored-by: d10c <[email protected]>

- Install @storybook/addon-docs package - Add addon-docs to the addons configuration in main.ts - Update Overview.mdx to use @storybook/addon-docs/blocks import path - Re-enable MDX files in stories configuration - Verify build succeeds with MDX documentation included Co-authored-by: d10c <[email protected]>

Co-authored-by: d10c <[email protected]>

…low-lint-again Fix TypeScript type errors in VSCode Elements event handlers and refs

Copilot

Pull request overview

This PR completes the Storybook v10 migration by re-enabling MDX documentation support and fixing TypeScript compatibility issues introduced by the upgrade. The changes include adding the @storybook/addon-docs package, updating import paths, and addressing various TypeScript type errors in React components.

Changes:

Added @storybook/addon-docs dependency and re-enabled MDX files in Storybook configuration
Updated MDX import path from @storybook/blocks to @storybook/addon-docs/blocks for Storybook v10 compatibility
Fixed TypeScript type errors in event handlers and React refs across multiple components

Reviewed changes

Copilot reviewed 15 out of 16 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
extensions/ql-vscode/.storybook/main.ts	Added `@storybook/addon-docs` to addons array to enable MDX support
extensions/ql-vscode/.storybook/vscode-theme-addon/preset.ts	Converted from CommonJS `require.resolve` to ESM `join(__dirname, ...)`
extensions/ql-vscode/src/stories/Overview.mdx	Updated import path to `@storybook/addon-docs/blocks` for Storybook v10
extensions/ql-vscode/package.json	Added `@storybook/addon-docs` ^10.1.11 dependency
extensions/ql-vscode/package-lock.json	Updated lock file with new addon-docs dependency and related packages
extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisActions.tsx	Removed `appearance="primary"` prop from export button
extensions/ql-vscode/src/view/variant-analysis/RepositoriesSort.tsx	Changed event handler type from `InputEvent` to `Event`
extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx	Changed event handler type from `InputEvent` to `Event`
extensions/ql-vscode/src/view/variant-analysis/RepositoriesFilter.tsx	Changed event handler type from `InputEvent` to `Event`
extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx	Changed event handler from `ChangeEvent<HTMLInputElement>` to `Event`
extensions/ql-vscode/src/view/model-editor/ModelTypeTextbox.tsx	Changed event handler from `ChangeEvent<HTMLSelectElement>` to `Event` with `HTMLInputElement` cast
extensions/ql-vscode/src/view/model-editor/MethodRow.tsx	Updated ref types from `HTMLElement \| undefined` to `HTMLDivElement` with `null`
extensions/ql-vscode/src/view/model-alerts/ModelAlertsSort.tsx	Changed event handler type from `InputEvent` to `Event`
extensions/ql-vscode/src/view/common/TextButton.tsx	Made `$size` prop optional in styled component
extensions/ql-vscode/src/view/common/DataGrid.tsx	Updated ref types from `HTMLElement \| undefined` to `HTMLDivElement`
extensions/ql-vscode/src/view/common/CodePaths/CodeFlowsDropdown.tsx	Changed event handler from `ChangeEvent<HTMLSelectElement>` to `Event`

Files not reviewed (1)

extensions/ql-vscode/package-lock.json: Language not supported

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-20T16:31:19Z

extensions/ql-vscode/src/view/model-editor/ModelTypeTextbox.tsx

+  const handleChange = useCallback((e: Event) => {
+    const target = e.target as HTMLInputElement;


The event handler type has been changed from ChangeEvent<HTMLSelectElement> to Event with a cast to HTMLInputElement. This is inconsistent - VscodeTextfield is an input element, so the type should be ChangeEvent<HTMLInputElement> to be both accurate and consistent with other similar input handlers in the codebase (e.g., in RenamingInput.tsx).

Copilot · 2026-01-20T16:31:19Z

extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisActions.tsx

              filteredText: "Copy filtered repositories as a list",
            })}
          </Button>
          <Button


The appearance prop has been removed from this Button component. However, this removal changes the visual appearance of the "Export results" button. Consider whether this was intentional or if this button should maintain its primary appearance for consistency with the UI design. If this change is intentional due to a design update, it should be documented in the PR description.

Suggested change

<Button

<Button

appearance="primary"

Copilot · 2026-01-20T16:31:20Z

extensions/ql-vscode/src/view/variant-analysis/RepositoriesSort.tsx

 export const RepositoriesSort = ({ value, onChange, className }: Props) => {
  const handleInput = useCallback(
-    (e: InputEvent) => {
+    (e: Event) => {


The event handler type has been changed from ChangeEvent<HTMLSelectElement> to Event, which is inconsistent with other similar components in the codebase (e.g., ModelInputDropdown.tsx, ModelKindDropdown.tsx, ModelOutputDropdown.tsx, ModelTypeDropdown.tsx). The more specific ChangeEvent<HTMLSelectElement> type provides better type safety and is the standard React type for select element change handlers. Consider using the same type as other similar components for consistency.

Copilot · 2026-01-20T16:31:20Z

extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx

 }: Props) => {
  const handleInput = useCallback(
-    (e: InputEvent) => {
+    (e: Event) => {


The event handler type has been changed from ChangeEvent<HTMLSelectElement> to Event, which is inconsistent with other similar components in the codebase. The more specific ChangeEvent<HTMLSelectElement> type provides better type safety and is the standard React type for select element change handlers. Consider using the same type as other similar components for consistency.

Copilot · 2026-01-20T16:31:20Z

extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx

+    (e: Event) => {
+      const target = e.target as HTMLInputElement;
      // This is called on first render, but we don't really care about this value
-      if (e.target.checked === undefined) {
+      if (target.checked === undefined) {
        return;
      }

      if (!repository.id) {
        return;
      }

-      onSelectedChange?.(repository.id, e.target.checked);
+      onSelectedChange?.(repository.id, target.checked);


The event handler type has been changed from ChangeEvent<HTMLInputElement> to Event, which is inconsistent with other similar components in the codebase. The more specific ChangeEvent<HTMLInputElement> type provides better type safety and is the standard React type for checkbox change handlers. Additionally, the original code that imported ChangeEvent from React should be retained for this purpose.

Copilot · 2026-01-20T16:31:21Z

extensions/ql-vscode/src/view/common/CodePaths/CodeFlowsDropdown.tsx

+    (e: Event) => {
+      const selectedOption = e.target as HTMLSelectElement;


The event handler type has been changed from ChangeEvent<HTMLSelectElement> to Event, which is inconsistent with other similar components in the codebase. The more specific ChangeEvent<HTMLSelectElement> type provides better type safety and is the standard React type for select element change handlers. Consider using the same type as other similar components for consistency.

Copilot · 2026-01-20T16:31:21Z

extensions/ql-vscode/package.json

    "@storybook/addon-a11y": "^10.1.11",
+    "@storybook/addon-docs": "^10.1.11",
    "@storybook/addon-links": "^10.1.11",
    "@storybook/components": "^8.6.14",


The @storybook/components package is at version 8.6.14, which is incompatible with Storybook v10.1.11. This package should be upgraded to a version that is compatible with Storybook v10 (e.g., ^10.1.11) to avoid potential runtime issues and compatibility problems.

Suggested change

"@storybook/components": "^8.6.14",

"@storybook/components": "^10.1.11",

Copilot · 2026-01-20T16:31:22Z

extensions/ql-vscode/src/view/variant-analysis/RepositoriesFilter.tsx

 export const RepositoriesFilter = ({ value, onChange, className }: Props) => {
  const handleInput = useCallback(
-    (e: InputEvent) => {
+    (e: Event) => {


The event handler type has been changed from ChangeEvent<HTMLSelectElement> to Event, which is inconsistent with other similar components in the codebase. The more specific ChangeEvent<HTMLSelectElement> type provides better type safety and is the standard React type for select element change handlers. Consider using the same type as other similar components for consistency.

Copilot · 2026-01-20T16:31:22Z

extensions/ql-vscode/src/view/model-alerts/ModelAlertsSort.tsx

 export const ModelAlertsSort = ({ value, onChange, className }: Props) => {
  const handleInput = useCallback(
-    (e: InputEvent) => {
+    (e: Event) => {


The event handler type has been changed from ChangeEvent<HTMLSelectElement> to Event, which is inconsistent with other similar components in the codebase. The more specific ChangeEvent<HTMLSelectElement> type provides better type safety and is the standard React type for select element change handlers. Consider using the same type as other similar components for consistency.

Initial plan

794be4c

Copilot AI assigned Copilot and d10c Jan 19, 2026

Copilot started work on behalf of d10c January 19, 2026 15:30 View session

Copilot AI changed the title ~~[WIP] Fix failing GitHub Actions workflow build~~ Fix Storybook build failure - convert preset.ts to ES modules Jan 19, 2026

Copilot finished work on behalf of d10c January 19, 2026 15:41

Copilot AI requested a review from d10c January 19, 2026 15:41

Copilot started work on behalf of d10c January 19, 2026 15:45 View session

Copilot AI changed the title ~~Fix Storybook build failure - convert preset.ts to ES modules~~ Re-enable MDX documentation support in Storybook v10 Jan 19, 2026

Copilot finished work on behalf of d10c January 19, 2026 15:57

Copilot AI and others added 5 commits January 19, 2026 16:07

Initial plan

6a1c391

Fix TypeScript type errors in event handlers and refs

45b5828

Co-authored-by: d10c <[email protected]>

Fix MethodRow ref types to match DataGridCell

1d805dd

Co-authored-by: d10c <[email protected]>

Fix useRef type in MethodRow parent component

42b1cb7

Co-authored-by: d10c <[email protected]>

Merge pull request #4264 from github/copilot/fix-github-actions-workf…

e01f33c

…low-lint-again Fix TypeScript type errors in VSCode Elements event handlers and refs

d10c approved these changes Jan 20, 2026

View reviewed changes

d10c marked this pull request as ready for review January 20, 2026 16:26

d10c requested review from a team as code owners January 20, 2026 16:26

Copilot AI review requested due to automatic review settings January 20, 2026 16:26

d10c merged commit 849f2a4 into copilot/fix-github-actions-workflow-lint Jan 20, 2026
15 checks passed

d10c deleted the copilot/fix-github-actions-workflow-again branch January 20, 2026 16:26

Copilot started reviewing on behalf of d10c January 20, 2026 16:27 View session

Copilot AI reviewed Jan 20, 2026

View reviewed changes

d10c mentioned this pull request Jan 20, 2026

Fix Storybook 10 compatibility after Dependabot upgrade #4262

Draft

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Re-enable MDX documentation support in Storybook v10 #4263

Re-enable MDX documentation support in Storybook v10 #4263

Uh oh!

Copilot AI commented Jan 19, 2026 •

edited

Loading

Uh oh!

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Copilot AI Jan 20, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		const handleChange = useCallback((e: Event) => {
		const target = e.target as HTMLInputElement;

		(e: Event) => {
		const selectedOption = e.target as HTMLSelectElement;

	"@storybook/components": "^8.6.14",
	"@storybook/components": "^10.1.11",

Re-enable MDX documentation support in Storybook v10 #4263

Re-enable MDX documentation support in Storybook v10 #4263

Uh oh!

Conversation

Copilot AI commented Jan 19, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changes

Screenshot

I tried to connect to the following addresses, but was blocked by firewall rules:

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 20, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Jan 19, 2026 •

edited

Loading