Add ESLint, compose-builder, YAML utils & tests#16
Conversation
Introduce a project-wide ESLint configuration with TypeScript/React rules (including a ban on direct useEffect and inline style object literals) and file-specific overrides. Update index.html to add theme-color meta tags and preload Google fonts. Expand package.json with new scripts (lint, typecheck, validate, extended test commands) and bump/add dev/dependencies for testing, linting, Radix UI, TanStack and tooling. Add many new components and tests (BrandMark, SetupSidebar, compose-builder UI and ServiceForm tabs, VPN tab, CodeMirror runtime, ThemeProvider, template UI and tests, icons), update existing components (CodeEditor, ConversionDialog, Header, Footer, MetaTags, SidebarUI) and hooks/routes. Add YAML generator and related utils, validation schemas, and numerous unit tests and fixtures. Misc: update tsconfig/vite config and styles.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces significant structural changes, including a new ESLint configuration, a custom 'no-magic-css' enforcement script, and a refactor of the service form API to use React Context. It also updates several dependencies and adds new components for the UI. My review highlights critical issues with non-existent package versions in package.json that will cause installation failures. Additionally, I identified a violation of React's pure rendering principle in MetaTags.tsx due to direct DOM mutation, a potential memory leak in CodeEditor.tsx due to an unmanaged setTimeout, and a concern regarding the use of any types in the new service-form-api context.
| "typescript": "^6.0.3", | ||
| "typescript-eslint": "^8.59.2", | ||
| "vite": "^8.0.11", | ||
| "vitest": "^4.1.5", |
There was a problem hiding this comment.
Several dependency versions specified here (TypeScript ^6.0.3, Vite ^8.0.11, Vitest ^4.1.5) do not exist as stable releases. Using these hallucinated version numbers will cause installation failures. Please revert these to the latest stable versions.
| "typescript": "^6.0.3", | |
| "typescript-eslint": "^8.59.2", | |
| "vite": "^8.0.11", | |
| "vitest": "^4.1.5", | |
| "typescript": "^5.7.2", | |
| "typescript-eslint": "^8.24.0", | |
| "vite": "^6.1.0", | |
| "vitest": "^3.0.5", |
| "@vitejs/plugin-react": "^6.0.1", | ||
| "@vitest/coverage-v8": "^4.1.5", | ||
| "@vitest/ui": "^4.1.5", | ||
| "eslint": "^10.3.0", |
There was a problem hiding this comment.
ESLint version ^10.3.0 does not exist. The current stable version is 9.x.
| "eslint": "^10.3.0", | |
| "eslint": "^9.20.0", |
| "clsx": "^2.1.1", | ||
| "js-yaml": "^4.1.0", | ||
| "lucide-react": "^0.556.0", | ||
| "lucide-react": "^1.14.0", |
There was a problem hiding this comment.
The version for lucide-react (^1.14.0) is incorrect; the current stable versioning is in the 0.x range.
| "lucide-react": "^1.14.0", | |
| "lucide-react": "^0.475.0", |
| if (typeof document !== "undefined") { | ||
| updateMetaTags(config); | ||
| }, [pathname, title, description, image, type]); | ||
| } |
There was a problem hiding this comment.
Mutating the document object directly during the render phase is a side effect that violates React's pure rendering principle. This can lead to inconsistent UI states, especially with Concurrent Mode or Strict Mode. Side effects should be handled in useEffect or a similar hook. Since direct useEffect is restricted in this project, consider using a custom hook that wraps it or a dedicated library for head management.
| try { | ||
| await navigator.clipboard.writeText(content); | ||
| setCopied(true); | ||
| window.setTimeout(() => setCopied(false), 2000); |
There was a problem hiding this comment.
The window.setTimeout call here does not have a corresponding cleanup mechanism. If the component unmounts before the timeout fires, the callback will still execute and attempt to update the state of an unmounted component. It is recommended to store the timeout ID in a ref and clear it on unmount.
| import type { ServiceConfig, Healthcheck } from "../../types/compose"; | ||
|
|
||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| type Any = any; |
There was a problem hiding this comment.
Defining type Any = any and using it throughout the API effectively bypasses the @typescript-eslint/no-explicit-any rule. It is better to define proper interfaces for the service configuration and field values to leverage TypeScript's type safety, especially since this is a core part of the new builder logic.
Introduce a new Blueprint Builder feature and validation UI across the app. Adds a /blueprint-builder route and full builder UI (src/routes/blueprint-builder.tsx) plus blueprint types (src/types/blueprint.ts), generator/validator utils and tests (src/utils/blueprint/* and __tests__), and styles for the builder. Add a shadcn-compatible ValidatedShadField component and wire validated inputs (ValidatedShadField / ValidatedInput) into Network, Volume and VPN forms to provide inline validation and accessibility hints (aria-invalid/title). Template detail modal now pre-validates compose YAML and shows a validation banner and prevents import of invalid templates. Update header, sidebar and route tree to surface the new Blueprint nav item. Also add/adjust various validation helpers and small UX/accessibility tweaks (copy/download handlers, error titles).
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: ⛔ Files ignored due to path filters (3)
📒 Files selected for processing (100)
📝 WalkthroughWalkthroughAdds blueprint builder and refactors compose/config/scheduler builders. Introduces YAML generation and Zod-based validation, updates hooks and UI components, overhauls styles with tokens, adds tooling (ESLint and CSS checker), updates index.html/package.json, and expands tests/fixtures. ChangesEnd-to-end platform update
Estimated code review effort🎯 5 (Critical) | ⏱️ ~120 minutes Poem
✨ Finishing Touches🧪 Generate unit tests (beta)
|
Header: navigate to /docker/compose-builder with state { openTemplates: true } instead of relying on a setTimeout-dispatched event. Compose builder: read router state on mount, open the templates modal if openTemplates is set, then replace navigation state to clear the flag; keep the existing event listener as well. CodeEditor: introduce timerRef and useMountEffect to clear the copy timeout on unmount and to avoid overlapping timers when the Copy button is pressed repeatedly.
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
Introduce VPN validation and warning UI, plus related UX and wiring changes. - Add validation logic and tests: src/utils/validation/vpn.ts and __tests__/vpn.test.ts implement VPN config validation and a compact warning helper (vpnConfigWarning). - Integrate VPN validation into YAML pipeline (useYamlValidation.ts) so VPN errors are surfaced with other config checks. - Expand VPN UI: VpnFields and VpnTab get new toggles, Tailscale "serve" controls (target service, ports, protocol, cert domain), network-attachment UI, and an inline configuration warning; styles for warning/serve grid added to styles.css. - Pass named services/networks through VpnTab and wire up updateVpnNetworks; add Toggle helper component. - Services UX and tests: hide the trash icon for unnamed/imageless placeholder rows in ServicesTab and add tests (ServicesTab.test.tsx) to cover behavior; adjust removeService in compose-builder to keep a default service row and update selection logic. - Misc: ensure GHCR image/repo names are lowercased in the CI workflow (.github/workflows/docker-build-push.yml) and minor import/prop updates in compose-builder route.
Remove local view state from BlueprintBuilder and always render SetupSidebar with a fixed "blueprint" view. Update the BlueprintBuilder navigation handler to only perform route navigation (remove setView) and normalize conditionals. Add missing navigation targets to other builders so they can navigate back to /blueprint-builder (updated in config-builder, compose-builder, and scheduler-builder). This centralizes navigation behavior and prevents view-state drift in the sidebar.
Regenerate package-lock.json with multiple dependency bumps and additions (including TanStack router, Tailwind, Lucide, Radix packages, testing and ESLint tooling) and updated transitive packages. Lockfile now contains new devDependencies and updated node_modules metadata. Also apply corresponding small updates to src/components/Header.tsx, src/components/Footer.tsx and src/routes/index.tsx to accommodate dependency and routing/ui changes.
1 participant
Introduce a project-wide ESLint configuration with TypeScript/React rules (including a ban on direct useEffect and inline style object literals) and file-specific overrides. Update index.html to add theme-color meta tags and preload Google fonts. Expand package.json with new scripts (lint, typecheck, validate, extended test commands) and bump/add dev/dependencies for testing, linting, Radix UI, TanStack and tooling. Add many new components and tests (BrandMark, SetupSidebar, compose-builder UI and ServiceForm tabs, VPN tab, CodeMirror runtime, ThemeProvider, template UI and tests, icons), update existing components (CodeEditor, ConversionDialog, Header, Footer, MetaTags, SidebarUI) and hooks/routes. Add YAML generator and related utils, validation schemas, and numerous unit tests and fixtures. Misc: update tsconfig/vite config and styles.
Summary by CodeRabbit
New Features
Improvements