From 5af1bbe9f6806ec82a7d0c9d68282096a527a962 Mon Sep 17 00:00:00 2001
From: Ayush Pahwa <ayush@appsmith.com>
Date: Tue, 12 Nov 2024 20:05:28 +0800
Subject: [PATCH] feat: feature flag for eslint migration (#36543)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description

This PR introduces a feature flag to control the ESLint migration.

Fixes #36542

## Automation

/test js sanity

### :mag: Cypress test results
<!-- This is an auto-generated comment: Cypress test results  -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/11795470649>
> Commit: ac773e1ccb4a3e67159ac21e4abc757f5f959693
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=11795470649&attempt=2"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.JS, @tag.Sanity`
> Spec:
> <hr>Tue, 12 Nov 2024 11:58:31 UTC
<!-- end of auto-generated comment: Cypress test results  -->


## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [x] No


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced a new feature flag, `rollout_eslint_enabled`, for managing
ESLint functionality.
- Added an enumeration for linter versions, including `"JSHINT"` and
`"ESLINT"`.
- Implemented a function to dynamically determine the linter version
based on the feature flag.

- **Bug Fixes**
- Enhanced linting error handling by updating the linter version
dynamically instead of using a hardcoded value.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
---
 app/client/src/ce/entities/FeatureFlag.ts      |  2 ++
 app/client/src/plugins/Linting/constants.ts    |  5 +++++
 .../plugins/Linting/utils/getLintingErrors.ts  | 18 +++++++++++++++++-
 3 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/app/client/src/ce/entities/FeatureFlag.ts b/app/client/src/ce/entities/FeatureFlag.ts
index 4196cf40f4..413547130d 100644
--- a/app/client/src/ce/entities/FeatureFlag.ts
+++ b/app/client/src/ce/entities/FeatureFlag.ts
@@ -30,6 +30,7 @@ export const FEATURE_FLAG = {
   release_actions_redesign_enabled: "release_actions_redesign_enabled",
   rollout_remove_feature_walkthrough_enabled:
     "rollout_remove_feature_walkthrough_enabled",
+  rollout_eslint_enabled: "rollout_eslint_enabled",
   release_drag_drop_building_blocks_enabled:
     "release_drag_drop_building_blocks_enabled",
   rollout_side_by_side_enabled: "rollout_side_by_side_enabled",
@@ -71,6 +72,7 @@ export const DEFAULT_FEATURE_FLAG_VALUE: FeatureFlags = {
   ab_appsmith_ai_query: false,
   release_actions_redesign_enabled: false,
   rollout_remove_feature_walkthrough_enabled: true,
+  rollout_eslint_enabled: false,
   rollout_side_by_side_enabled: false,
   release_layout_conversion_enabled: false,
   release_anvil_toggle_enabled: false,
diff --git a/app/client/src/plugins/Linting/constants.ts b/app/client/src/plugins/Linting/constants.ts
index 6ea64ce263..492f104f17 100644
--- a/app/client/src/plugins/Linting/constants.ts
+++ b/app/client/src/plugins/Linting/constants.ts
@@ -2,6 +2,11 @@ import { ECMA_VERSION } from "@shared/ast";
 import type { LintOptions } from "jshint";
 import isEntityFunction from "./utils/isEntityFunction";
 
+export enum LINTER_TYPE {
+  "JSHINT" = "JSHint",
+  "ESLINT" = "ESLint",
+}
+
 export const lintOptions = (globalData: Record<string, boolean>) =>
   ({
     indent: 2,
diff --git a/app/client/src/plugins/Linting/utils/getLintingErrors.ts b/app/client/src/plugins/Linting/utils/getLintingErrors.ts
index eccbe7d0af..9a01b0b8de 100644
--- a/app/client/src/plugins/Linting/utils/getLintingErrors.ts
+++ b/app/client/src/plugins/Linting/utils/getLintingErrors.ts
@@ -25,6 +25,7 @@ import {
   IGNORED_LINT_ERRORS,
   lintOptions,
   SUPPORTED_WEB_APIS,
+  LINTER_TYPE,
 } from "../constants";
 import type { getLintingErrorsProps } from "../types";
 import { JSLibraries } from "workers/common/JSLibrary";
@@ -38,9 +39,23 @@ import { generate } from "astring";
 import getInvalidModuleInputsError from "ee/plugins/Linting/utils/getInvalidModuleInputsError";
 import { objectKeys } from "@appsmith/utils";
 import { profileFn } from "UITelemetry/generateWebWorkerTraces";
+import { WorkerEnv } from "workers/Evaluation/handlers/workerEnv";
+import { FEATURE_FLAG } from "ee/entities/FeatureFlag";
 
 const EvaluationScriptPositions: Record<string, Position> = {};
 
+function getLinterType() {
+  let linterType = LINTER_TYPE.JSHINT;
+
+  const flagValues = WorkerEnv.getFeatureFlags();
+
+  if (flagValues?.[FEATURE_FLAG.rollout_eslint_enabled]) {
+    linterType = LINTER_TYPE.ESLINT;
+  }
+
+  return linterType;
+}
+
 function getEvaluationScriptPosition(scriptType: EvaluationScriptType) {
   if (isEmpty(EvaluationScriptPositions)) {
     // We are computing position of <<script>> in our templates.
@@ -194,6 +209,7 @@ export default function getLintingErrors({
   scriptType,
   webworkerTelemetry,
 }: getLintingErrorsProps): LintError[] {
+  const linterType = getLinterType();
   const scriptPos = getEvaluationScriptPosition(scriptType);
   const lintingGlobalData = generateLintingGlobalData(data);
   const lintingOptions = lintOptions(lintingGlobalData);
@@ -202,7 +218,7 @@ export default function getLintingErrors({
     "Linter",
     // adding some metrics to compare the performance changes with eslint
     {
-      linter: "JSHint",
+      linter: linterType,
       linesOfCodeLinted: originalBinding.split("\n").length,
       codeSizeInChars: originalBinding.length,
     },