JS-366: detect commented JSX attributes in S125 (#6812)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: vdiez

its/ruling/src/test/expected/console/typescript-S125.json

@@ -11,6 +11,9 @@
 "console:src/views/FunctionsView/FunctionLogs/Log.tsx": [
 6
 ],
+"console:src/views/FunctionsView/FunctionPopup/TestLog.tsx": [
+90
+],
 "console:src/views/PermissionsView/PermissionsList/ModelPermissions/ModelPermissionList.tsx": [
 13
 ],
@@ -28,14 +31,28 @@
 264
 ],
 "console:src/views/Settings/Export/Export.tsx": [
-15
+15,
+103,
+106,
+110
+],
+"console:src/views/models/DatabrowserView/Cell/IntCell.tsx": [
+23
 ],
 "console:src/views/models/DatabrowserView/DatabrowserView.tsx": [
-230
+230,
+290,
+291,
+292
 ],
 "console:src/views/models/FieldPopup/Constraints.tsx": [
 209
 ],
+"console:src/views/models/ModelHeader.tsx": [
+229,
+230,
+233
+],
 "console:src/views/playground/PlaygroundView/PlaygroundView.tsx": [
 127
 ]

its/ruling/src/test/expected/react-cloud-music/javascript-S125.json

@@ -9,6 +9,9 @@
 "react-cloud-music:src/application/User/Login/index.jsx": [
 36
 ],
+"react-cloud-music:src/baseUI/confirm/index.jsx": [
+89
+],
 "react-cloud-music:src/baseUI/scroll/index.jsx": [
 65
 ]

packages/analysis/src/jsts/rules/S125/rule.ts

@@ -35,6 +35,7 @@ const DOCUMENTATION_PREFIX_PATTERN = /^(e\.g[.:]|for example\b|examples?:)/i;
 // Cheap prefilter: any meaningful JS statement must contain at least one of these characters,
 // or be an import/export with a string literal (side-effect imports have no punctuation)
 const CODE_CHAR_PATTERN = /[;{}()=<>]|\bimport\s+['"]|\bexport\s/;
+const JSX_ATTRIBUTE_WRAPPER = '_S125Wrapper';
 
 const recognizer = new CodeRecognizer(0.9, new JavaScriptFootPrint());
 
@@ -174,23 +175,22 @@ function containsCode(value: string, context: Rule.RuleContext) {
     return false;
   }
 
-  try {
-    const options = {
-      ...context.languageOptions?.parserOptions,
-      filePath: `placeholder${path.extname(context.filename)}`,
-      programs: undefined,
-      project: undefined,
-    };
-    //In case of Vue parser: we will use the JS/TS parser instead of the Vue parser
-    const parser =
-      context.languageOptions?.parserOptions?.parser ?? context.languageOptions?.parser;
-    const result =
-      'parse' in parser ? parser.parse(value, options) : parser.parseForESLint(value, options).ast;
-    const program = result as AST.Program;
+  const options = {
+    ...context.languageOptions?.parserOptions,
+    filePath: `placeholder${path.extname(context.filename)}`,
+    programs: undefined,
+    project: undefined,
+  };
+  //In case of Vue parser: we will use the JS/TS parser instead of the Vue parser
+  const parser = context.languageOptions?.parserOptions?.parser ?? context.languageOptions?.parser;
+  const program = parseWithRuleParser(value, parser, options);
+
+  if (program) {
     return program.body.length > 0 && !isExclusion(program.body, value, program, context);
-  } catch {
-    return false;
   }
+
+  const wrappedProgram = parseWithRuleParser(wrapAsJsxTag(value), parser, options);
+  return hasValidJsxAttributeCode(wrappedProgram);
 }
 
 function couldBeJsCode(input: string): boolean {
@@ -252,3 +252,58 @@ function isDocumentationExample(value: string): boolean {
   const stripped = firstLine.replace(/^(?:\/\/\s*)+/, '').trim();
   return DOCUMENTATION_PREFIX_PATTERN.test(stripped);
 }
+
+function parseWithRuleParser(
+  value: string,
+  parser: NonNullable<Rule.RuleContext['languageOptions']['parser']>,
+  options: Rule.RuleContext['languageOptions']['parserOptions'],
+): AST.Program | null {
+  try {
+    return (
+      'parse' in parser ? parser.parse(value, options) : parser.parseForESLint(value, options).ast
+    ) as AST.Program;
+  } catch {
+    return null;
+  }
+}
+
+function wrapAsJsxTag(value: string): string {
+  return `<${JSX_ATTRIBUTE_WRAPPER} ${value} />`;
+}
+
+function hasValidJsxAttributeCode(program: AST.Program | null): boolean {
+  if (program?.body.length !== 1) {
+    return false;
+  }
+
+  const statement = program.body[0] as TSESTree.Statement;
+  if (statement.type !== 'ExpressionStatement' || statement.expression.type !== 'JSXElement') {
+    return false;
+  }
+
+  const jsxElement = statement.expression;
+  if (jsxElement.openingElement.name.type !== 'JSXIdentifier') {
+    return false;
+  }
+
+  if (jsxElement.openingElement.name.name !== JSX_ATTRIBUTE_WRAPPER) {
+    return false;
+  }
+
+  const attributes = jsxElement.openingElement.attributes;
+  return attributes.length > 0 && attributes.every(isValidJsxAttribute);
+}
+
+function isValidJsxAttribute(
+  attribute: TSESTree.JSXAttribute | TSESTree.JSXSpreadAttribute,
+): boolean {
+  if (attribute.type === 'JSXSpreadAttribute') {
+    return true;
+  }
+
+  if (attribute.name.type !== 'JSXIdentifier') {
+    return false;
+  }
+
+  return attribute.value !== null;
+}

packages/analysis/src/jsts/rules/S125/unit.test.ts

@@ -159,6 +159,18 @@ describe('S125', () => {
           // FP: "e.g:" colon variant is a documentation example
           code: `// e.g: step.where(condition);`,
         },
+        {
+          // FP guard for JSX fallback: prose with "TODO:" and JSX-like text should not be flagged
+          code: `
+const Calendar = () => {
+  return (
+    <DateCalendar
+      // TODO: implement views={options}
+      value={1234}
+    />
+  );
+};`,
+        },
       ],
       invalid: [
         {
@@ -384,6 +396,80 @@ let x = 0;`,
             },
           ],
         },
+        {
+          // JSX attributes commented in TSX should be reported as commented-out code
+          code: `
+const Calendar: React.FC = () => {
+  return (
+    <DateCalendar
+      data-testid="header-calendar"
+      value={1234}
+      openTo="year"
+      // views={["year"]}
+      // maxDate={new Date()}
+      onChange={date => {
+        console.log(date);
+      }}
+    />
+  );
+};`,
+          errors: [
+            {
+              messageId: 'commentedCode',
+              suggestions: [
+                {
+                  desc: 'Remove this commented out code',
+                  output: `
+const Calendar: React.FC = () => {
+  return (
+    <DateCalendar
+      data-testid="header-calendar"
+      value={1234}
+      openTo="year"
+      
+      onChange={date => {
+        console.log(date);
+      }}
+    />
+  );
+};`,
+                },
+              ],
+            },
+          ],
+        },
+        {
+          // JSX attributes commented in JS should also be reported
+          filename: 'placeholder.js',
+          code: `
+const Calendar = () => {
+  return (
+    <DateCalendar
+      // views={["year"]}
+      value={1234}
+    />
+  );
+};`,
+          errors: [
+            {
+              messageId: 'commentedCode',
+              suggestions: [
+                {
+                  desc: 'Remove this commented out code',
+                  output: `
+const Calendar = () => {
+  return (
+    <DateCalendar
+      
+      value={1234}
+    />
+  );
+};`,
+                },
+              ],
+            },
+          ],
+        },
       ],
     });
   });