JS-1388 Fix S6767 false positive: props accessed via dynamic bracket notation (#6577)

Co-authored-by: Vibe Bot <vibe-bot@sonarsource.com>
Co-authored-by: Claude <noreply@anthropic.com>

Author: 3 people

its/ruling/src/test/expected/ant-design/typescript-S6767.json

@@ -3,14 +3,6 @@
 41,
 41
 ],
-"ant-design:components/config-provider/index.tsx": [
-60,
-61,
-65,
-73,
-76,
-80
-],
 "ant-design:components/input/ClearableLabeledInput.tsx": [
 32,
 40,

packages/jsts/src/rules/S6767/decorator.ts

@@ -79,6 +79,15 @@ function hasPropsCall(root: estree.Node, keys: SourceCode.VisitorKeys): boolean
     return true;
   }
 
+  // Check if this is a computed MemberExpression with props (for props[key] or this.props[key])
+  if (
+    root.type === 'MemberExpression' &&
+    root.computed &&
+    propsArgPatterns.some(p => p(root.object))
+  ) {
+    return true;
+  }
+
   // Recursively check all children
   return childrenOf(root, keys).some(child => hasPropsCall(child, keys));
 }

packages/jsts/src/rules/S6767/unit.test.ts

@@ -164,6 +164,42 @@ MyComponent.propTypes = {
     });
   });
 
+  it('should not report props accessed via computed bracket notation', () => {
+    const ruleTester = new NoTypeCheckingRuleTester();
+
+    ruleTester.run('no-unused-prop-types', rule, {
+      valid: [
+        {
+          // FP: props[key] computed access
+          code: `
+function AnimationComponent(props) {
+  const key = 'offsetX';
+  return <div value={props[key]} />;
+}
+AnimationComponent.propTypes = {
+  offsetX: PropTypes.number,
+};
+`,
+        },
+        {
+          // FP: this.props[key] computed access
+          code: `
+class VictoryAxis extends React.Component {
+  render() {
+    const key = 'offsetX';
+    return <div>{this.props[key]}</div>;
+  }
+}
+VictoryAxis.propTypes = {
+  offsetX: PropTypes.number,
+};
+`,
+        },
+      ],
+      invalid: [],
+    });
+  });
+
   it('should exercise TypeScript type-checking paths (Strategy C in react helpers)', () => {
     const ruleTester = new RuleTester({
       parserOptions: {
@@ -220,6 +256,31 @@ interface MyComponentProps {
 function MyComponent(props: MyComponentProps) {
   return <SomeComponent {...props} />;
 }
+`,
+          filename: fixtureFile,
+        },
+        {
+          // FP: TypeScript class component with this.props[key] — Strategy C matches
+          // VictoryAxisProps to VictoryAxis via matchesClassProps, hasPropsCall finds computed MemberExpression.
+          code: `
+declare const React: any;
+interface VictoryAxisProps {
+  offsetX?: number;
+  offsetY?: number;
+}
+class VictoryAxis extends React.Component<VictoryAxisProps> {
+  props: VictoryAxisProps;
+  static animationWhitelist: Array<keyof VictoryAxisProps> = ['offsetX', 'offsetY'];
+  animate() {
+    return VictoryAxis.animationWhitelist.reduce((acc: Record<string, unknown>, key) => {
+      acc[key] = this.props[key];
+      return acc;
+    }, {});
+  }
+  render() {
+    return <div>{this.animate()}</div>;
+  }
+}
 `,
           filename: fixtureFile,
         },
@@ -350,6 +411,34 @@ Wrapper.propTypes = { onClick: PropTypes.func };
     });
   });
 
+  it('upstream rule should report dynamic bracket notation FP pattern (sentinel: remove decorator check if this fails)', () => {
+    // Confirms that the upstream eslint-plugin-react no-unused-prop-types rule DOES raise
+    // issues when props are accessed via computed bracket notation (props[key], this.props[key]).
+    // If this test starts failing, the upstream rule has been fixed and the computed
+    // MemberExpression handling in the S6767 decorator can be removed.
+    const upstreamRule = rules['no-unused-prop-types'];
+    const ruleTester = new NoTypeCheckingRuleTester();
+
+    ruleTester.run('no-unused-prop-types (upstream, bracket notation)', upstreamRule, {
+      valid: [],
+      invalid: [
+        {
+          // upstream does not track props[key] computed bracket access
+          code: `
+function AnimationComponent(props) {
+  const key = 'offsetX';
+  return <div value={props[key]} />;
+}
+AnimationComponent.propTypes = {
+  offsetX: PropTypes.number,
+};
+`,
+          errors: 1,
+        },
+      ],
+    });
+  });
+
   it('upstream rule should NOT report state interface properties when TypeScript type info is available', () => {
     // Confirms that the upstream rule uses TypeScript type information to distinguish
     // state types from props types. AnchorState (used as the second type parameter of