Skip to content

chore(Lint): extend FE linter rules - #8819

Draft
talissoncosta wants to merge 6 commits into
mainfrom
chore/lint-review-rules
Draft

talissoncosta wants to merge 6 commits into
mainfrom
chore/lint-review-rules

Conversation

@talissoncosta

@talissoncosta talissoncosta commented Oct 21, 2026 •

Copy link
Copy Markdown
Contributor

Thanks for submitting a PR! Please check the boxes below:

  • I have read the Contributing Guide.
  • I have added information to docs/ if required so people know about the feature.
  • I have filled in the "Changes" section below.
  • I have filled in the "How did you test this code" section below.

Changes

Closes #8832

Turns the review comments we keep repeating (see #8805) into lint rules, so review can focus on the change itself.

Only changed lines are checked, so the existing backlog doesn't block anyone. ESLint runs in CI and in the pre-commit hook; SCSS is checked in CI only. For a real exception, disable the rule on that line with a reason.

Rule Instead
style prop SCSS class with tokens; a CSS custom property for runtime values
data-test, byId, [data-test] locators getByRole / getByLabel
btn-with-icon, <Button theme='icon'> IconButton
hex / rgb / hsl literals in JS/TS colour tokens (token, palette, icon and docs files exempt)
hex and .dark (not .dark-*) in added SCSS lines, via Stylelint and reviewdog tokens (_tokens.scss, _primitives.scss, docs exempt)
iconLeft / iconRight icons as children
role='button' BareButton
Bootstrap 4 class names Bootstrap 5 names
as and ! assertions annotations, type guards
fetch(), including window.fetch and globalThis.fetch RTK Query
dangerouslySetInnerHTML (disable with a reason when sanitised)
IonIcon and ionicons project SVGs via Icon
Flux store imports (warning only) RTK Query

Also:

  • e2e/ is no longer ignored by ESLint, so the selector rules apply there. Prettier and import alias stay off for it.
  • The pre-commit hook sets LINT_STAGED, which switches eslint-plugin-diff to staged mode. Before this, pre-commit linted whole files.

How did you test this code?

  • A fixture file with one of each violation: every rule fires, and as const, href='#section', ms-2 and fw-bold don't.
  • Pre-commit: an edit to PanelSearch.tsx (16 existing errors) commits fine, and a new style prop in it is blocked.
  • CI, with a temporary commit adding 3 lines to OnboardingTerminal.scss (which already has 17 hex colours): the job failed with 2 annotations (the new hex and .dark), .dark-mode and the old hex were ignored. The commit was then dropped.
  • IonIcon, ionicons, window.fetch and globalThis.fetch are flagged; .dark-mode in SCSS isn't.
  • CI=true ESLINT_PLUGIN_DIFF_COMMIT=origin/main npm run lint passes on this branch.

talissoncosta and others added 3 commits October 21, 2026 15:10
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@vercel

vercel Bot commented Oct 21, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

3 Skipped Deployments
Project Deployment Actions Updated
docs Ignored Ignored Preview Oct 22, 2026 8:26am UTC
flagsmith-frontend-preview Ignored Ignored Preview Oct 22, 2026 8:26am UTC
flagsmith-frontend-staging Ignored Ignored Preview Oct 22, 2026 8:26am UTC

Request Review

@coderabbitai

coderabbitai Bot commented Oct 21, 2026 •

Copy link
Copy Markdown

Review in Change Stack →

Important

Draft PR not reviewed

Draft PRs are not automatically reviewed by default.

  • Trigger a manual review

To automatically review draft PRs, update your CodeRabbit configuration:

reviews:
  auto_review:
    drafts: true
📝 Walkthrough

The frontend ESLint configuration now checks selected JavaScript and JSX patterns on changed lines. Pre-commit linting selects staged lines, and E2E files are included in ESLint processing. A new SCSS checker scans added lines in staged or CI diffs. The pre-commit hook, npm scripts, and pull request workflow invoke the checker.

Priority: ⬇️ Low

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: 🔵 Low · up to bcaf4

The changed-line lint rule can miss prohibited Bootstrap classes in template literals; fix the matcher before relying on this enforcement.

- [ ] Autofix · Keep fixing CodeRabbit findings and required CI, and resolving merge conflicts

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.

❤️ Share

Comment @coderabbitai help to get the list of available commands.

@codecov

codecov Bot commented Oct 21, 2026 •

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.88%. Comparing base (c582d5b) to head (742715d).
⚠️ Report is 8 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #8819   +/-   ##
=======================================
  Coverage   98.88%   98.88%           
=======================================
  Files        1683     1683           
  Lines       70275    70275           
=======================================
  Hits        69489    69489           
  Misses        786      786           

☔ View full report in Codecov by Harness.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 3


ℹ️ Review info
⚙️ Run configuration
  • Configuration used: Organization UI
  • Review profile: ASSERTIVE
  • Plan: Advanced
  • Run ID: e98bd409-bfda-4e80-a2be-77e13c8f5b5d
📥 Commits

Reviewing files that changed from the base of the PR and between d031dbe and 3b1f91f.

📒 Files selected for processing: 6
  • .github/workflows/frontend-pull-request.yml
  • .husky/pre-commit
  • frontend/.eslintignore
  • frontend/.eslintrc.js
  • frontend/bin/check-scss.js
  • frontend/package.json
💤 Files with no reviewable changes: 1
  • frontend/.eslintignore

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 7 remain after this review.

Comment thread frontend/.eslintrc.js Outdated
Comment thread frontend/.eslintrc.js
Comment thread frontend/bin/check-scss.js Outdated
…ching .dark-*

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@github-actions github-actions Bot added chore and removed chore labels Oct 21, 2026
@talissoncosta talissoncosta changed the title chore(Lint): Add lint rules for patterns we repeat in review chore(Lint): introduce FE linter rules Oct 21, 2026
@talissoncosta talissoncosta changed the title chore(Lint): introduce FE linter rules chore(Lint): extend FE linter rules Oct 21, 2026

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Caution

Some comments are outside the diff and can’t be posted inline due to GitHub limitations.

⚠️ Outside diff range comments (1)

🟡 Minor · Match template literals in the Bootstrap class restriction. · .eslintrc.js:26-64

frontend/.eslintrc.js:26-64
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win

Match template literals in the Bootstrap class restriction.

The selector only matches Literal descendants. The reachable IdentityTraits example stores font-weight-medium in a TemplateElement, so the lint rule does not report this disallowed Bootstrap class.

Suggested fix
-      "JSXAttribute[name.name='className'] Literal[value=/(^|\\s)(font-weight-[a-z]+|float-(left|right)|text-(left|right)|[mp][lr]-([0-9]|auto))(\\s|$)/]",
+      "JSXAttribute[name.name='className'] :matches(Literal[value=/(^|\\s)(font-weight-[a-z]+|float-(left|right)|text-(left|right)|[mp][lr]-([0-9]|auto))(\\s|$)/], TemplateElement[value.raw=/(^|\\s)(font-weight-[a-z]+|float-(left|right)|text-(left|right)|[mp][lr]-([0-9]|auto))(\\s|$)/])",

ℹ️ Review info
⚙️ Run configuration
  • Configuration used: Organization UI
  • Review profile: ASSERTIVE
  • Plan: Advanced
  • Run ID: bbd1d21e-4211-4191-b0cc-f7b7afbca308
📥 Commits

Reviewing files that changed from the base of the PR and between 3b1f91f and bcaf4e7.

📒 Files selected for processing: 2
  • frontend/.eslintrc.js
  • frontend/bin/check-scss.js

Included review availability: This review used your included allowance. Your plan provides up to 8 included reviews per hour; 7 remain after this review.

@talissoncosta
talissoncosta marked this pull request as ready for review October 22, 2026 08:12
@talissoncosta
talissoncosta requested review from a team as code owners October 22, 2026 08:12
@talissoncosta
talissoncosta requested review from kyle-ssg and removed request for a team October 22, 2026 08:12
@github-actions github-actions Bot removed the chore label Oct 22, 2026
@github-actions

github-actions Bot commented Oct 22, 2026 •

Copy link
Copy Markdown
Contributor

Docker builds report

Image Build Status Security report
ghcr.io/flagsmith/flagsmith-frontend:pr-8819 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith-api:pr-8819 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith:pr-8819 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith-private-cloud:pr-8819 Finished ✅ Results ✅
ghcr.io/flagsmith/flagsmith-api-test:pr-8819 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-e2e:pr-8819 Finished ✅ Skipped

@github-actions github-actions Bot added the chore label Oct 22, 2026
@talissoncosta
talissoncosta marked this pull request as draft October 22, 2026 08:12
@github-actions

github-actions Bot commented Oct 22, 2026 •

Copy link
Copy Markdown
Contributor
✅ private-cloud · depot-ubuntu-latest-arm-16 — run #22654 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  2 passed

Details

stats  2 tests across 2 suites
duration  46.5 seconds
commit  bcaf4e7
info  🔄 Run: #22654 (attempt 1)

🗂️ Previous results
✅ private-cloud · depot-ubuntu-latest-16 — run #22654 (attempt 1)

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  4 passed

Details

stats  4 tests across 4 suites
duration  58 seconds
commit  bcaf4e7
info  🔄 Run: #22654 (attempt 1)

✅ oss · depot-ubuntu-latest-arm-16 — run #22654 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  37.2 seconds
commit  bcaf4e7
info  🔄 Run: #22654 (attempt 1)

✅ oss · depot-ubuntu-latest-16 — run #22654 (attempt 1)

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  31.3 seconds
commit  bcaf4e7
info  🔄 Run: #22654 (attempt 1)

@github-actions

Copy link
Copy Markdown
Contributor

Visual Regression

24 screenshots compared. See report for details.
View full report

Replaces bin/check-scss.js.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
@talissoncosta
talissoncosta force-pushed the chore/lint-review-rules branch from 70ace75 to 742715d Compare October 22, 2026 08:26
@github-actions github-actions Bot added chore and removed chore labels Oct 22, 2026

This branch was successfully deployed

2 active (outdated) deployments
Preview – flagsmith-frontend-staging — 8e934c29 Deployed Oct 22, 2026 by vercel[bot]
Preview – flagsmith-frontend-preview — 8e934c29 Deployed Oct 22, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

chore front-end Issue related to the React Front End Dashboard

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Extend linter rules for FE

1 participant