Skip to content

Update Storybook to 10 and fix lint errors #4287

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
d10c wants to merge 7 commits into
base: main
Choose a base branch
from
Draft

Update Storybook to 10 and fix lint errors #4287

d10c wants to merge 7 commits into from

Conversation

@d10c
Copy link
Contributor

@d10c d10c commented Feb 3, 2026 •
edited
Loading

Commits

  • Bump the storybook group in /extensions/ql-vscode with 7 updates

  • Fix TypeScript config for Storybook 10.x compatibility

    • Files: .storybook/tsconfig.json, src/stories/tsconfig.json
    • Why: Storybook 10.x uses subpath exports that require moduleResolution: "bundler" instead of "node"
    • Changes: Updated module resolution strategy and added allowImportingTsExtensions and noEmit flags

  • Fix redundant await in Promise.all in ast-builder

    • File: src/language-support/ast-viewer/ast-builder.ts
    • Error: 3 instances of @typescript-eslint/await-thenable (lines 36-38)
    • Why: Using await inside Promise.all([await x, await y]) defeats parallelism
    • Fix: Removed redundant await keywords inside the array

  • Fix non-Promise values in Promise.all in extension.ts

    • File: src/extension.ts
    • Error: @typescript-eslint/await-thenable at line 200
    • Why: Passing {} and an uninvoked async function to Promise.all()
    • Fix: Changed {} to Promise.resolve() and invoked async function with ()

  • Fix event handler type and Promise handling in query-server-client

    • File: src/query-server/query-server-client.ts
    • Error: @typescript-eslint/await-thenable at line 163
    • Why: Type mismatch - handlers can return void or Promise<void>
    • Fix: Updated types to void | Promise<void> and wrapped calls in Promise.resolve()

  • Fix mixed undefined/Promise values in Promise.all in updates.ts

    • File: src/databases/github-databases/updates.ts
    • Error: @typescript-eslint/await-thenable at line 172
    • Why: Map callbacks return either undefined or Promise<void>
    • Fix: Made early returns explicit and filtered out undefined values with type guard

  • Fix TypeScript type errors for @vscode-elements API changes

    • Fixed 11 event handler type mismatches (ChangeEvent/InputEvent → Event)
    • Changed VscodeButton appearance="primary" to secondary={false}
    • Fixed 4 ref type errors (HTMLElement | undefined → HTMLDivElement)
    • Updated 11 view component files

dependabot bot and others added 7 commits January 29, 2026 13:13
@dependabot
Bump the storybook group in /extensions/ql-vscode with 7 updates
51fe5c3 
Bumps the storybook group in /extensions/ql-vscode with 7 updates:

| Package | From | To |
| --- | --- | --- |
| [@storybook/addon-a11y](https://github.com/storybookjs/storybook/tree/HEAD/code/addons/a11y) | `9.1.17` | `10.2.1` |
| [@storybook/addon-docs](https://github.com/storybookjs/storybook/tree/HEAD/code/addons/docs) | `9.1.17` | `10.2.1` |
| [@storybook/addon-links](https://github.com/storybookjs/storybook/tree/HEAD/code/addons/links) | `9.1.17` | `10.2.1` |
| [@storybook/icons](https://github.com/storybookjs/icons) | `1.6.0` | `2.0.1` |
| [@storybook/react](https://github.com/storybookjs/storybook/tree/HEAD/code/renderers/react) | `9.1.17` | `10.2.1` |
| [@storybook/react-vite](https://github.com/storybookjs/storybook/tree/HEAD/code/frameworks/react-vite) | `9.1.17` | `10.2.1` |
| [storybook](https://github.com/storybookjs/storybook/tree/HEAD/code/core) | `9.1.17` | `10.2.1` |


Updates `@storybook/addon-a11y` from 9.1.17 to 10.2.1
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v10.2.1/code/addons/a11y)

Updates `@storybook/addon-docs` from 9.1.17 to 10.2.1
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v10.2.1/code/addons/docs)

Updates `@storybook/addon-links` from 9.1.17 to 10.2.1
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v10.2.1/code/addons/links)

Updates `@storybook/icons` from 1.6.0 to 2.0.1
- [Release notes](https://github.com/storybookjs/icons/releases)
- [Changelog](https://github.com/storybookjs/icons/blob/main/CHANGELOG.md)
- [Commits](storybookjs/icons@v1.6.0...v2.0.1)

Updates `@storybook/react` from 9.1.17 to 10.2.1
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v10.2.1/code/renderers/react)

Updates `@storybook/react-vite` from 9.1.17 to 10.2.1
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v10.2.1/code/frameworks/react-vite)

Updates `storybook` from 9.1.17 to 10.2.1
- [Release notes](https://github.com/storybookjs/storybook/releases)
- [Changelog](https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md)
- [Commits](https://github.com/storybookjs/storybook/commits/v10.2.1/code/core)

---
updated-dependencies:
- dependency-name: "@storybook/addon-a11y"
  dependency-version: 10.2.1
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: storybook
- dependency-name: "@storybook/addon-docs"
  dependency-version: 10.2.1
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: storybook
- dependency-name: "@storybook/addon-links"
  dependency-version: 10.2.1
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: storybook
- dependency-name: "@storybook/icons"
  dependency-version: 2.0.1
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: storybook
- dependency-name: "@storybook/react"
  dependency-version: 10.2.1
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: storybook
- dependency-name: "@storybook/react-vite"
  dependency-version: 10.2.1
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: storybook
- dependency-name: storybook
  dependency-version: 10.2.1
  dependency-type: direct:development
  update-type: version-update:semver-major
  dependency-group: storybook
...

Signed-off-by: dependabot[bot] <support@github.com>
@d10c
Fix TypeScript config for Storybook 10.x compatibility
beded4b 
This commit updates TypeScript compiler options in Storybook-related
configuration files to support Storybook 10.x's module resolution
requirements.

Problem:
Storybook 10.x changed its package structure to use subpath exports
(e.g., 'storybook/manager-api', 'storybook/theming'). These subpath
exports require modern TypeScript module resolution strategies to work
correctly. The legacy 'node' module resolution strategy doesn't
understand package.json 'exports' fields, causing TypeScript to fail
resolving Storybook imports.

Changes:
- Changed moduleResolution from 'node' to 'bundler' in both
  .storybook/tsconfig.json and src/stories/tsconfig.json
- Added 'allowImportingTsExtensions: true' to support TypeScript
  extension imports in bundler mode
- Added 'noEmit: true' since these configs are for type-checking only,
  not compilation

This fixes the underlying module resolution issues that were causing
ESLint's TypeScript parser to fail during the lint-ci step.

Files modified:
- extensions/ql-vscode/.storybook/tsconfig.json
- extensions/ql-vscode/src/stories/tsconfig.json
@d10c
Fix redundant await in Promise.all in ast-builder
911f880 
This commit removes redundant 'await' keywords inside a Promise.all()
call that were causing ESLint errors.

Problem:
ESLint rule '@typescript-eslint/await-thenable' detected that the code
was using 'await' on expressions that were already being passed to
Promise.all(). This is redundant and incorrect:

  await Promise.all([
    await this.cli.bqrsDecode(...),  // ❌ redundant await
    await this.cli.bqrsDecode(...),  // ❌ redundant await
    await this.cli.bqrsDecode(...),  // ❌ redundant await
  ]);

The 'await' inside the array causes each promise to be awaited
sequentially before being added to the array, defeating the purpose
of Promise.all() which is to run them in parallel. ESLint's stricter
type checking (enabled by the Storybook 10 upgrade) now catches this.

Solution:
Remove the redundant 'await' keywords inside the Promise.all() array.
The outer 'await Promise.all(...)' is sufficient:

  await Promise.all([
    this.cli.bqrsDecode(...),  // ✓ returns Promise
    this.cli.bqrsDecode(...),  // ✓ returns Promise
    this.cli.bqrsDecode(...),  // ✓ returns Promise
  ]);

This fixes 3 ESLint errors:
  src/language-support/ast-viewer/ast-builder.ts:36:7
  src/language-support/ast-viewer/ast-builder.ts:37:7
  src/language-support/ast-viewer/ast-builder.ts:38:7

File modified:
- extensions/ql-vscode/src/language-support/ast-viewer/ast-builder.ts
@d10c
Fix non-Promise values in Promise.all in extension.ts
b6a6d27 
This commit fixes incorrect usage of Promise.all() where non-Promise
values were being passed, causing ESLint errors.

Problem:
The restartQueryServer command was passing an array to Promise.all()
containing:
1. A Promise (queryRunner.restartQueryServer)
2. Either a Promise or an empty object {} (conditional expression)
3. An async function (not invoked, so not a Promise)

ESLint rule '@typescript-eslint/await-thenable' detected this error:
  src/extension.ts:200:11
  Unexpected iterable of non-Promise (non-"Thenable") values passed
  to promise aggregator

The issues were:
- Line 199: Using `{}` as a fallback instead of a resolved Promise
- Line 200: Declaring an async function but not invoking it (missing
  the `()` to actually call the function and get its Promise)

Solution:
1. Replace `{}` with `Promise.resolve()` to maintain type consistency
2. Wrap the async function in an IIFE (Immediately Invoked Function
   Expression) by adding `()` at the end: `(async () => { ... })()`

This ensures Promise.all() receives an array of actual Promise objects,
allowing it to properly await all operations in parallel.

File modified:
- extensions/ql-vscode/src/extension.ts
@d10c
Fix event handler type and Promise handling in query-server-client
8793d0b 
This commit fixes incorrect type signatures and Promise handling for
query server event handlers that were causing ESLint errors.

Problem:
The queryServerStartListeners were typed to return 'void', but actual
usage in the codebase shows they can be async functions returning
'Promise<void>'. This mismatch caused two issues:

1. Type mismatch: The onStart() method in query-runner.ts accepts
   callbacks typed as '(progress) => Promise<void>', but the listener
   registration was typed as '(progress) => void'

2. ESLint error at line 163: When calling Promise.all() on the array
   of handler results, ESLint detected that handlers might return void
   instead of Promise, triggering '@typescript-eslint/await-thenable':
   'Unexpected iterable of non-Promise values passed to promise
   aggregator'

Solution:
1. Update type signatures to allow both synchronous (void) and
   asynchronous (Promise<void>) handlers:
   - Changed listener array type from '() => void' to
     '() => void | Promise<void>'
   - Updated onDidStartQueryServer parameter type to match

2. Wrap handler invocations in Promise.resolve() to ensure they always
   return a Promise, regardless of whether the handler is sync or async:
   - Changed: handler(progress)
   - To: Promise.resolve(handler(progress))

This makes Promise.all() safe to use with mixed sync/async handlers
while maintaining backward compatibility with existing code.

File modified:
- extensions/ql-vscode/src/query-server/query-server-client.ts
@d10c
Fix mixed undefined/Promise values in Promise.all in updates.ts
ee33e31 
This commit fixes incorrect usage of Promise.all() where the mapped
array could contain undefined values mixed with Promises, causing
ESLint errors.

Problem:
The downloadDatabaseUpdateFromGitHub function was passing an array to
Promise.all() where map callbacks could return either:
- undefined (when no update is found for a database)
- A Promise<void> (from the withProgress call)

ESLint rule '@typescript-eslint/await-thenable' detected this error at
line 172: 'Unexpected iterable of non-Promise (non-"Thenable") values
passed to promise aggregator'

The code pattern was:
  await Promise.all(
    selectedDatabases.map((database) => {
      const update = updates.find(...);
        return;  // ❌ returns undefined
      }
      return withProgress(...);  // ✓ returns Promise
    })
  );

This creates an array like [Promise, undefined, Promise, undefined]
which violates Promise.all()'s type contract expecting all Promises.

Solution:
1. Change early return from 'return;' to 'return undefined;' for
   explicit clarity
2. Filter out undefined values before passing to Promise.all() using a
   type guard:
   .filter((p): p is Promise<void> => p !== undefined)

This ensures Promise.all() receives only actual Promise objects while
maintaining the same runtime behavior (skipping databases without
updates).

File modified:
- extensions/ql-vscode/src/databases/github-databases/updates.ts
@d10c
Fix TypeScript type errors for @vscode-elements API changes
ad655c8 
This commit fixes TypeScript type errors in view components caused by
breaking changes in the @vscode-elements/react-elements library that
was updated as part of the Storybook 10 upgrade.

Problem:
The @vscode-elements/react-elements library changed its event handler
types and component prop APIs:

1. Event handlers now expect native DOM Event types (Event, InputEvent)
   instead of React's synthetic event types (ChangeEvent<T>). The
   library uses Lit web components which emit native events, not React
   synthetic events.

2. VscodeButton's API changed from `appearance="primary"` to
   `secondary={false}` for primary button styling.

3. Component refs must use specific element types (HTMLDivElement)
   instead of generic HTMLElement | undefined.

TypeScript Errors Fixed:
- 11 event handler type mismatches where code used ChangeEvent or
  InputEvent when Event was expected
- 1 VscodeButton prop error (appearance doesn't exist)
- 4 ref type errors (HTMLElement | undefined vs HTMLDivElement)

Changes by Category:

Event Handler Fixes:
- CodeFlowsDropdown.tsx: Changed ChangeEvent<HTMLSelectElement> to Event
- ModelTypeTextbox.tsx: Changed ChangeEvent<HTMLSelectElement> to InputEvent
- ModelAlertsSort.tsx: Changed InputEvent to Event
- RepositoriesFilter.tsx: Changed InputEvent to Event
- RepositoriesResultFormat.tsx: Changed InputEvent to Event
- RepositoriesSort.tsx: Changed InputEvent to Event
- RepoRow.tsx: Changed ChangeEvent<HTMLInputElement> to Event

All event handlers now cast e.target to the appropriate element type
(HTMLSelectElement, HTMLInputElement) to access properties like .value
and .checked.

Component API Fixes:
- VariantAnalysisActions.tsx: Changed `appearance="primary"` to
  `secondary={false}` on VscodeButton

Ref Type Fixes:
- DataGrid.tsx: Changed DataGridRow and DataGridCell ref types from
  `React.Ref<HTMLElement | undefined>` to `React.Ref<HTMLDivElement>`
- TextButton.tsx: Made $size prop optional in styled component
- MethodRow.tsx: Changed ModelableMethodRow and UnmodelableMethodRow
  forwardRef types from `HTMLElement | undefined` to `HTMLDivElement`,
  and changed useRef from `useRef<HTMLElement | undefined>(undefined)`
  to `useRef<HTMLDivElement>(null)`

These changes align the codebase with the updated @vscode-elements
library APIs while maintaining the same runtime behavior.

Files modified:
- extensions/ql-vscode/src/view/common/CodePaths/CodeFlowsDropdown.tsx
- extensions/ql-vscode/src/view/common/DataGrid.tsx
- extensions/ql-vscode/src/view/common/TextButton.tsx
- extensions/ql-vscode/src/view/model-alerts/ModelAlertsSort.tsx
- extensions/ql-vscode/src/view/model-editor/MethodRow.tsx
- extensions/ql-vscode/src/view/model-editor/ModelTypeTextbox.tsx
- extensions/ql-vscode/src/view/variant-analysis/RepoRow.tsx
- extensions/ql-vscode/src/view/variant-analysis/RepositoriesFilter.tsx
- extensions/ql-vscode/src/view/variant-analysis/RepositoriesResultFormat.tsx
- extensions/ql-vscode/src/view/variant-analysis/RepositoriesSort.tsx
- extensions/ql-vscode/src/view/variant-analysis/VariantAnalysisActions.tsx
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Awaiting requested review from Copilot Copilot will automatically review once the pull request is marked ready for review

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@d10c