refactor: Integrate consistent-type-imports in FE packages (no-changelog)

[ivov]

https://linear.app/n8n/issue/N8N-6054/integrate-consistent-type-imports-in-fe-packages

[github-actions]

Great PR! Please pay attention to the following items before merging:

Files matching packages/**:

• If fixing bug, added test to cover scenario.
• If addressing forum or Github issue, added link to description.

Files matching packages/**/*.ts:

• Added unit tests to cover new or updated functionality.

Files matching **/*.vue:

• Used composition API for all new components.
• Added component or unit tests to cover functionality.

Files matching packages/design-system/**/*.vue:

• Used design system tokens (colors, spacings...) where possible.
• Updated Storybook with new component or updated functionality.

Make sure to check off this list before asking for review.

[codecov]

Codecov Report

Patch coverage: 92.79% and no project coverage change.

Comparison is base (725393d) 17.55% compared to head (449a13c) 17.56%.

Additional details and impacted files

@@           Coverage Diff           @@
##           master    #5951   +/-   ##
=======================================
  Coverage   17.55%   17.56%           
=======================================
  Files        2500     2500           
  Lines      114430   114446   +16     
  Branches    17858    17858           
=======================================
+ Hits        20092    20103   +11     
- Misses      93744    93749    +5     
  Partials      594      594           

Impacted Files	Coverage Δ
...esign-system/src/components/N8nDatatable/mixins.ts	0.00% <0.00%> (ø)
...n-system/src/components/N8nFormInput/validators.ts	0.00% <0.00%> (ø)
...ents/N8nNodeCreatorNode/NodeCreatorNode.stories.ts	0.00% <0.00%> (ø)
...ents/N8nRecycleScroller/RecycleScroller.stories.ts	0.00% <0.00%> (ø)
...m/src/components/N8nUsersList/UsersList.stories.ts	0.00% <0.00%> (ø)
...ackages/design-system/src/plugins/n8nComponents.ts	0.00% <0.00%> (ø)
.../src/components/SettingsLogStreaming/Helpers.ee.ts	0.00% <0.00%> (ø)
...components/SettingsLogStreaming/descriptions.ee.ts	0.00% <0.00%> (ø)
packages/editor-ui/src/mixins/history.ts	0.00% <0.00%> (ø)
...tor-ui/src/plugins/codemirror/completions/types.ts	0.00% <0.00%> (ø)
... and 84 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[netroy]

@edumaciel10 Please use regular comments when interacting on PRs here. All PR review comments by non team members are going to be marked as Spam.

[alexgrozav]

This is awesome!

[netroy]

The search bar is missing, and that is breaking some of the e2e tests

[ivov]

The search bar is missing

ESLint misfixed some imports. Re-fixed this one but likely happening in other spots because e2e are still failing, plus the root cause is unclear. Coming back to this later.

[ivov]

Did some more research but no luck yet:

• Looked at options for consistent-type-imports
• Experimented - simulating usage of the component as a value inside <script lang="ts" setup> e.g. import something from './somewhere'; const x = something; does not trigger a false positive. Non-detection of import usage inside the <template> seems to be the issue.
• Skimmed through possibly related issues:
  • [consistent-type-imports] ignore imports marked as used typescript-eslint/typescript-eslint#4508
  • Add support for scope analysis of <script setup> vuejs/vue-eslint-parser#144
  • [consistent-type-import] flags non-type-only imported type as a value import when used in a decorator typescript-eslint/typescript-eslint#3108
• Updated all ESLint packages to latest and restarted ESLint server:

{
  "name": "@n8n_io/eslint-config",
  "private": true,
  "version": "0.0.1",
  "devDependencies": {
    "@types/eslint": "~8.4.10",
    "@typescript-eslint/eslint-plugin": "~5.45.1",
    "@typescript-eslint/parser": "~5.45.1",
    "@vue/eslint-config-typescript": "~8.0.0",
    "eslint": "~8.28.0",
    "eslint-config-airbnb-typescript": "~17.0.0",
    "eslint-config-prettier": "~8.5.0",
    "eslint-import-resolver-typescript": "~3.5.5",
    "eslint-plugin-diff": "~2.0.1",
    "eslint-plugin-import": "~2.26.0",
    "eslint-plugin-n8n-local-rules": "~1.0",
    "eslint-plugin-prettier": "~4.2.1",
    "eslint-plugin-vue": "~7.17.0"
  },
  "scripts": {
    "clean": "rimraf .turbo",
    "test": "jest"
  }
}

[ivov]

As discussed with @cstuncsik, I will add a check to consistent-type-imports to ignore import statements where the path ends in .vue to prevent this misdetection on Vue files using Composition API.

[ivov]

Updated here: #6060