[WEB-5136] refactor: update admin ESLint configuration and refactor imports to use type imports#7955
Conversation
… imports to use type imports - Enhanced ESLint configuration by adding new rules for import consistency and type imports. - Refactored multiple files to replace regular imports with type imports for better clarity and performance. - Ensured consistent use of type imports across the application to align with TypeScript best practices.
|
Linked to Plane Work Item(s) This comment was auto-generated by Plane |
WalkthroughThe pull request introduces ESLint rule updates and refactors many TypeScript/React files to use type-only imports. It splits mixed imports into separate type and value imports across app pages, components, hooks, and stores. One component adjusts react-hook-form imports by separating type Control from value Controller. No runtime logic changes. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx (1)
3-4: Approve type-only import separation
The separation ofFCinto a type-only import is correct. Since the project uses the modern JSX transform (jsx: "react-jsx"), the defaultReactimport isn’t required—remove it and keep only the hooks import:-import type { FC } from "react"; -import React, { useMemo, useState } from "react"; +import type { FC } from "react"; +import { useMemo, useState } from "react";
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (54)
apps/admin/.eslintrc.js(1 hunks)apps/admin/app/(all)/(dashboard)/ai/form.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/ai/layout.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx(2 hunks)apps/admin/app/(all)/(dashboard)/authentication/github/layout.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/authentication/gitlab/layout.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx(2 hunks)apps/admin/app/(all)/(dashboard)/authentication/google/layout.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/authentication/layout.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/authentication/page.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/email/layout.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/email/test-email-modal.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/general/form.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/general/intercom.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/general/layout.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/header.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/image/form.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/image/layout.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/layout.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/sidebar.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/workspace/layout.tsx(1 hunks)apps/admin/app/(all)/(dashboard)/workspace/page.tsx(1 hunks)apps/admin/app/(all)/(home)/auth-banner.tsx(1 hunks)apps/admin/app/(all)/(home)/auth-helpers.tsx(1 hunks)apps/admin/app/(all)/(home)/sign-in-form.tsx(1 hunks)apps/admin/app/(all)/instance.provider.tsx(1 hunks)apps/admin/app/(all)/store.provider.tsx(1 hunks)apps/admin/app/(all)/user.provider.tsx(1 hunks)apps/admin/app/layout.tsx(1 hunks)apps/admin/ce/components/authentication/authentication-modes.tsx(1 hunks)apps/admin/core/components/authentication/authentication-method-card.tsx(1 hunks)apps/admin/core/components/authentication/email-config-switch.tsx(1 hunks)apps/admin/core/components/authentication/github-config.tsx(1 hunks)apps/admin/core/components/authentication/gitlab-config.tsx(1 hunks)apps/admin/core/components/authentication/google-config.tsx(1 hunks)apps/admin/core/components/authentication/password-config-switch.tsx(1 hunks)apps/admin/core/components/common/banner.tsx(1 hunks)apps/admin/core/components/common/controller-input.tsx(1 hunks)apps/admin/core/components/instance/failure.tsx(1 hunks)apps/admin/core/components/instance/instance-not-ready.tsx(1 hunks)apps/admin/core/components/instance/setup-form.tsx(1 hunks)apps/admin/core/hooks/store/use-instance.tsx(1 hunks)apps/admin/core/hooks/store/use-theme.tsx(1 hunks)apps/admin/core/hooks/store/use-user.tsx(1 hunks)apps/admin/core/hooks/store/use-workspace.tsx(1 hunks)apps/admin/core/store/instance.store.ts(2 hunks)apps/admin/core/store/root.store.ts(1 hunks)apps/admin/core/store/theme.store.ts(1 hunks)apps/admin/core/store/user.store.ts(1 hunks)apps/admin/core/store/workspace.store.ts(1 hunks)
🧰 Additional context used
🧠 Learnings (3)
📚 Learning: 2025-10-09T20:42:31.843Z
Learnt from: lifeiscontent
PR: makeplane/plane#7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T20:42:31.843Z
Learning: In the makeplane/plane repository, React types are globally available through TypeScript configuration. Type annotations like React.FC, React.ReactNode, etc. can be used without explicitly importing the React namespace. The codebase uses the modern JSX transform, so React imports are not required for JSX or type references.
Applied to files:
apps/admin/app/(all)/(dashboard)/authentication/layout.tsxapps/admin/app/(all)/store.provider.tsxapps/admin/app/(all)/(dashboard)/email/test-email-modal.tsxapps/admin/app/(all)/(dashboard)/sidebar.tsxapps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsxapps/admin/app/layout.tsxapps/admin/app/(all)/(dashboard)/image/form.tsxapps/admin/app/(all)/instance.provider.tsxapps/admin/app/(all)/(home)/auth-banner.tsxapps/admin/app/(all)/(dashboard)/general/form.tsxapps/admin/core/components/authentication/authentication-method-card.tsxapps/admin/app/(all)/(home)/auth-helpers.tsxapps/admin/app/(all)/(home)/sign-in-form.tsxapps/admin/app/(all)/(dashboard)/general/intercom.tsx
📚 Learning: 2025-10-09T22:12:26.424Z
Learnt from: lifeiscontent
PR: makeplane/plane#7922
File: apps/admin/app/(all)/(dashboard)/ai/form.tsx:19-19
Timestamp: 2025-10-09T22:12:26.424Z
Learning: When `types/react` is installed in a TypeScript project (which is standard for React + TypeScript codebases), React types (React.FC, React.ReactNode, React.ComponentProps, etc.) are globally available by design. These type annotations can and should be used without explicitly importing the React namespace. This is a TypeScript/DefinitelyTyped feature, not codebase-specific configuration.
Applied to files:
apps/admin/app/(all)/instance.provider.tsx
📚 Learning: 2025-09-02T08:14:49.260Z
Learnt from: sriramveeraghanta
PR: makeplane/plane#7697
File: apps/web/app/(all)/[workspaceSlug]/(projects)/header.tsx:12-13
Timestamp: 2025-09-02T08:14:49.260Z
Learning: The star-us-link.tsx file in apps/web/app/(all)/[workspaceSlug]/(projects)/ already has "use client" directive at the top, making it a proper Client Component for hook usage.
Applied to files:
apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: Build and lint web apps
- GitHub Check: Analyze (javascript)
🔇 Additional comments (66)
apps/admin/app/(all)/(dashboard)/image/form.tsx (1)
2-6: Type-only imports look great
FC,IFormattedInstanceConfiguration, andTInstanceImageConfigurationKeysare used purely as types, so converting them toimport typeeliminates unnecessary runtime dependencies without behavioral impact. Nice cleanup.apps/admin/core/components/instance/instance-not-ready.tsx (1)
3-3: LGTM!Correct use of type-only import for
FC, which is only used for type annotation. This aligns with the PR objective of enforcing type imports across the codebase.apps/admin/app/(all)/(dashboard)/image/layout.tsx (1)
1-2: LGTM! Type-only imports correctly applied.The conversion to
import typesyntax is correct for bothReactNodeandMetadata, as they are exclusively used as type annotations. This refactoring improves clarity and aligns with TypeScript best practices.apps/admin/app/(all)/store.provider.tsx (1)
3-4: LGTM!The import split correctly separates the type-only import of
ReactNodefrom the value import ofcreateContext. This aligns with TypeScript best practices and the PR's objective to use type-only imports where possible.apps/admin/ce/components/authentication/authentication-modes.tsx (1)
6-10: LGTM! Type imports correctly applied.The three types are used exclusively in type positions (function signatures and type definitions), making this refactor to
import typeappropriate and aligned with TypeScript best practices.apps/admin/app/(all)/(home)/auth-banner.tsx (1)
1-4: LGTM! Type-only imports correctly applied.The conversion to type-only imports is correct:
FCis only used as a type annotation (line 11)TAdminAuthErrorInfois only used in type positions (lines 7-8)This refactor improves build performance and code clarity while maintaining identical runtime behavior.
apps/admin/app/(all)/(dashboard)/header.tsx (1)
3-3: LGTM! Type-only import correctly applied.The conversion to a type-only import is appropriate since
FCis used exclusively for type annotations in this file (lines 14 and 26). This follows TypeScript best practices by eliminating unnecessary runtime imports and improving tree-shaking.apps/admin/app/(all)/(home)/auth-helpers.tsx (1)
1-8: LGTM! Import refactoring is correct and follows TypeScript best practices.The refactoring correctly separates type-only imports from value imports:
ReactNode→ type-only (used only for type annotation)TAdminAuthErrorInfo,TGetBaseAuthenticationModeProps,TInstanceAuthenticationModes→ type-only (used only for type annotations)SUPPORT_EMAIL,EAdminAuthErrorCodes→ value imports (used at runtime)This improves type clarity and enables better tree-shaking.
apps/admin/app/(all)/user.provider.tsx (1)
3-4: LGTM! Correct separation of type and value imports.The refactoring correctly splits React imports into type-only imports (
FC,ReactNode) and value imports (useEffect). This follows TypeScript best practices, improves tree-shaking, and makes the import intent explicit.apps/admin/core/components/authentication/authentication-method-card.tsx (1)
3-3: LGTM! Type-only import correctly applied.The change to
import type { FC }is correct sinceFCis only used for type annotation (line 17). This aligns with TypeScript best practices and the PR's objective to use type-only imports, potentially reducing the runtime bundle size.apps/admin/core/components/instance/setup-form.tsx (1)
3-4: LGTM! Import refactoring correctly separates types from values.The change properly splits the React import into a type-only import for
FCand a separate value import for the runtime hooks. This aligns with TypeScript best practices and the ESLint rules introduced in this PR.apps/admin/core/components/instance/failure.tsx (1)
2-2: LGTM!The type-only import for
FCis correct since it's used exclusively as a type annotation.apps/admin/core/components/common/controller-input.tsx (1)
4-5: LGTM!Correctly splits the import into type-only (
Control) and value (Controller) imports. This follows best practices sinceControlis only used for type annotations whileControlleris rendered as a component.apps/admin/app/(all)/(dashboard)/authentication/layout.tsx (1)
1-2: LGTM!Type-only imports for
ReactNodeandMetadataare correct as both are used exclusively in type annotations.apps/admin/app/(all)/(dashboard)/workspace/layout.tsx (1)
1-2: LGTM!Type-only imports are correctly applied for
ReactNodeandMetadata.apps/admin/app/(all)/(dashboard)/email/layout.tsx (1)
1-2: LGTM!Type-only imports for
ReactNodeandMetadataare correctly applied.apps/admin/app/(all)/(dashboard)/general/form.tsx (2)
2-2: LGTM!Type-only import for
FCis correct.
9-9: LGTM!Type-only imports for
IInstanceandIInstanceAdminare correctly applied as both interfaces are used exclusively in type annotations.apps/admin/app/(all)/(dashboard)/authentication/github/layout.tsx (1)
1-2: LGTM!Type-only imports for
ReactNodeandMetadataare correctly applied.apps/admin/core/components/authentication/password-config-switch.tsx (1)
6-6: LGTM!Type-only import for
TInstanceAuthenticationMethodKeysis correct as it's used exclusively in type annotations.apps/admin/app/(all)/(dashboard)/ai/layout.tsx (1)
1-2: LGTM! Correct use of type-only imports.The conversion to type-only imports for
ReactNodeandMetadatais appropriate since both are used exclusively in type positions.apps/admin/app/(all)/instance.provider.tsx (1)
1-1: LGTM! Proper separation of type and runtime imports.The conversion to type-only imports for
FCandReactNodeis correct, while runtime dependencies likeobserveranduseSWRremain as regular imports.apps/admin/app/(all)/(dashboard)/authentication/google/layout.tsx (1)
1-2: LGTM! Consistent with type-only import pattern.Correctly converts
ReactNodeandMetadatato type-only imports, consistent with other layout files in this PR.apps/admin/app/(all)/(dashboard)/sidebar-help-section.tsx (1)
3-4: LGTM! Excellent example of proper import splitting.This correctly separates type-only imports (
FC) from runtime imports (useState,useRef). The distinction is appropriate sinceFCis used only for type annotation while the hooks are invoked at runtime.apps/admin/app/(all)/(dashboard)/authentication/gitlab/layout.tsx (1)
1-2: LGTM! Consistent refactoring.Type-only imports are correctly applied, maintaining consistency with other authentication layout files.
apps/admin/core/components/authentication/gitlab-config.tsx (1)
10-10: LGTM! Correct type-only import.The
TInstanceAuthenticationMethodKeystype is used exclusively in thePropstype definition, making the type-only import appropriate.apps/admin/app/(all)/(dashboard)/general/layout.tsx (1)
1-2: LGTM! Consistent pattern.Type-only imports correctly applied, following the same pattern as other layout files in this refactor.
apps/admin/app/layout.tsx (1)
1-2: LGTM! Root layout follows consistent pattern.The root layout correctly applies type-only imports for
ReactNodeandMetadata, maintaining consistency with the entire refactor.apps/admin/app/(all)/(dashboard)/email/test-email-modal.tsx (1)
1-2: LGTM! Correct separation of type and runtime imports.The refactoring correctly identifies
FCas a type-only import while keepingReact,useEffect, anduseStateas runtime imports.Reactis needed at runtime forReact.Fragmentusage throughout the component.apps/admin/app/(all)/(dashboard)/layout.tsx (1)
3-4: LGTM! Proper type-only import usage.The changes correctly separate type imports (
FC,ReactNode) from runtime imports (useEffect), aligning with TypeScript best practices and the PR's objective.apps/admin/app/(all)/(dashboard)/sidebar.tsx (1)
3-4: LGTM! Clean import refactoring.The split between type-only (
FC) and runtime imports (useEffect,useRef) is correct and follows the established pattern across the codebase.apps/admin/core/components/common/banner.tsx (1)
1-1: LGTM! Minimal and correct type-only import.Since the component only uses
FCfor type annotation and doesn't require runtime React features, the type-only import is appropriate.apps/admin/core/store/workspace.store.ts (1)
5-7: LGTM! Appropriate type-only imports for store types.The refactoring correctly identifies that
IWorkspace,TLoader,TPaginationInfo, andCoreRootStoreare used exclusively for type annotations, not runtime logic.apps/admin/app/(all)/(dashboard)/authentication/github/form.tsx (3)
3-4: LGTM! Correct type-runtime import split.The refactoring appropriately separates
FCas a type-only import while keepinguseStateas a runtime import.
13-13: LGTM! Proper type-only imports from @plane/types.Configuration and key types are correctly imported as type-only since they're used exclusively for type annotations.
19-22: LGTM! Well-structured component and type imports.The pattern of separating type imports (
TControllerInputFormField,TCopyField) from runtime component imports (ControllerInput,CopyField) is clean and consistent with the refactoring approach.apps/admin/app/(all)/(home)/sign-in-form.tsx (2)
3-4: LGTM! Correct separation of type and runtime React imports.The refactoring appropriately keeps runtime hooks as regular imports while moving
FCto type-only.
8-9: LGTM! Proper handling of constant imports.The split between type-only imports (
EAdminAuthErrorCodes,TAdminAuthErrorInfo) and runtime imports (API_BASE_URL) is correct. Even thoughEAdminAuthErrorCodesis an enum, it's only used for type assertions (line 101), not runtime logic.apps/admin/app/(all)/(dashboard)/ai/form.tsx (2)
2-2: LGTM! Minimal and correct type-only import.The
FCtype is appropriately imported as type-only since it's used exclusively for component type annotation.
7-10: LGTM! Clean separation of type and component imports.The refactoring correctly identifies types (
IFormattedInstanceConfiguration,TInstanceAIConfigurationKeys,TControllerInputFormField) as type-only while keeping the runtime component (ControllerInput) as a regular import.apps/admin/core/components/authentication/google-config.tsx (1)
10-10: LGTM! Correct type-only import refactor.The conversion to
import typeis appropriate sinceTInstanceAuthenticationMethodKeysis only used as a type annotation (line 18). This improves build performance by removing unnecessary runtime imports.apps/admin/app/(all)/(dashboard)/workspace/create/form.tsx (1)
10-10: LGTM! Proper type-only import.The refactor to
import typeis correct.IWorkspaceis only used for type annotations (lines 24, 38, 42) with no runtime value usage.apps/admin/core/components/authentication/github-config.tsx (1)
10-10: LGTM! Consistent type-only import refactor.Correctly converted to
import typesinceTInstanceAuthenticationMethodKeysis only used as a type annotation (line 18). This aligns with the pattern across other authentication config components.apps/admin/core/components/authentication/email-config-switch.tsx (1)
6-6: LGTM! Correct type-only import.The conversion to
import typeis appropriate asTInstanceAuthenticationMethodKeysis only used for type annotation (line 14).apps/admin/core/store/user.store.ts (1)
3-8: LGTM! Properly split type and value imports.The import refactoring correctly separates:
- Type-only imports:
TUserStatus,IUser,CoreRootStore(used only as type annotations)- Value import:
EUserStatus(used at runtime for enum member access on lines 81, 86)This maintains correct runtime behavior while improving build performance.
apps/admin/app/(all)/(dashboard)/authentication/gitlab/form.tsx (3)
1-2: LGTM! Correct React import split.Properly separates
FC(type-only, used for type annotation on line 28) fromuseState(runtime hook, used on line 31).
10-10: LGTM! Appropriate type-only imports.Both
IFormattedInstanceConfigurationandTInstanceGitlabAuthenticationConfigurationKeysare correctly imported as types since they're only used for type annotations (lines 23, 26, 39).
15-18: LGTM! Well-structured component import separation.Correctly separates type definitions (
TControllerInputFormField,TCopyField) from component implementations (ControllerInput,CopyField). Types are used for annotations (lines 50, 112) while components are rendered (lines 173, 204).apps/admin/app/(all)/(dashboard)/authentication/google/form.tsx (3)
2-3: LGTM! Correct React import separation.Properly splits
FC(type-only) fromuseState(runtime hook), consistent with the pattern ingitlab/form.tsx.
12-12: LGTM! Appropriate type-only imports.Both types are correctly imported as type-only since they're used exclusively for type annotations (lines 25, 28, 42).
17-20: LGTM! Consistent component import structure.Correctly separates type definitions from component implementations, matching the pattern established across authentication form files.
apps/admin/app/(all)/(dashboard)/general/intercom.tsx (2)
3-4: LGTM! Proper React import split.Correctly separates
FC(type annotation on line 17) fromuseState(runtime hook on line 22).
8-8: LGTM! Correct type-only import.
IFormattedInstanceConfigurationis appropriately imported as a type since it's only used for parameter type annotation (line 39).apps/admin/.eslintrc.js (1)
4-17: LGTM! Well-configured ESLint rules for type imports.The ESLint configuration correctly enforces TypeScript type-only imports with appropriate preferences:
- Separates type imports from value imports (
separate-type-imports)- Enforces top-level type specifiers (
prefer-top-level)- Prevents type import side effects
- Uses
import/no-duplicatesinstead of the native rule for better TypeScript supportapps/admin/app/(all)/(dashboard)/authentication/page.tsx (1)
8-8: LGTM! Correct type-only import.
TInstanceConfigurationKeysis only used as a type annotation for thekeyparameter (Line 27), making the type-only import appropriate and correct.apps/admin/core/store/theme.store.ts (1)
3-3: LGTM! Correct type-only import.
CoreRootStoreis only used as a type annotation for the constructor's private parameter (Line 24), making the type-only import appropriate.apps/admin/core/hooks/store/use-instance.tsx (1)
4-4: LGTM! Correct type-only import.
IInstanceStoreis only used as a return type annotation (Line 6), making the type-only import appropriate.apps/admin/core/hooks/store/use-theme.tsx (1)
4-4: LGTM! Correct type-only import.
IThemeStoreis only used as a return type annotation (Line 6), making the type-only import appropriate.apps/admin/app/(all)/(dashboard)/workspace/page.tsx (1)
11-11: LGTM! Correct type-only import.
TInstanceConfigurationKeysis only used as a type annotation for thekeyparameter (Line 40), making the type-only import appropriate.apps/admin/core/hooks/store/use-user.tsx (1)
4-4: LGTM! Correct type-only import.
IUserStoreis only used as a return type annotation (Line 6), making the type-only import appropriate.apps/admin/core/hooks/store/use-workspace.tsx (1)
4-4: LGTM! Correct type-only import.
IWorkspaceStoreis only used as a return type annotation (Line 6), making the type-only import appropriate.apps/admin/core/store/instance.store.ts (3)
4-5: LGTM! Correct separation of type and value imports.The split correctly identifies that
TInstanceStatusis used only for type annotations (lines 22, 42) whileEInstanceStatusis used as a runtime value (line 116). This improves tree-shaking and makes the distinction between compile-time and runtime dependencies explicit.
7-14: LGTM! Proper type-only import for interface types.All these types from
@plane/typesare used exclusively in type positions throughout the file (interface definitions, method signatures, property types). The type-only import is correct and aligns with TypeScript best practices.
16-16: LGTM! Correct type-only import for CoreRootStore.
CoreRootStoreis used only as a type annotation for the constructor parameter (line 50). The actual runtime value is provided by the caller, and property access (e.g.,this.store.themeon line 103) operates on the runtime value, not the imported type. This type-only import is correct.apps/admin/core/store/root.store.ts (1)
3-10: LGTM! Clean separation of interface and implementation imports.The refactoring correctly separates type-only imports for the interfaces (used in property declarations on lines 15-18) from value imports for the concrete classes (used for instantiation on lines 21-24 and 36-39). This pattern is idiomatic TypeScript and improves code clarity by explicitly distinguishing compile-time types from runtime dependencies.
apps/admin/app/(all)/(dashboard)/email/email-config-form.tsx (1)
9-9: Perfect type import separation!The refactoring correctly identifies and separates:
- Type-only imports:
IFormattedInstanceConfiguration,TInstanceEmailConfigurationKeys, andTControllerInputFormField- Value import:
ControllerInput(used as JSX component)This improves build performance and makes the import intentions explicit.
Also applies to: 13-14
2 participants
Description
Type of Change
Summary by CodeRabbit