chore: Add ESLint rule to prevent unsafe in operator checks (#4312)

Author: Who-is-PS

eslint.config.mjs

@@ -115,6 +115,13 @@ export default tsEslint.config(
         'line',
         [' Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.', ' SPDX-License-Identifier: Apache-2.0'],
       ],
+      'no-restricted-syntax': [
+        'error',
+        {
+          selector: 'BinaryExpression[operator="in"][left.type="Literal"]',
+          message: 'Prefer a type guard function with `keyof` instead of raw `in` checks.',
+        },
+      ],
       'no-warning-comments': 'warn',
       'simple-import-sort/imports': [
         'error',

pages/alert/runtime-content.page.tsx

@@ -69,6 +69,7 @@ awsuiPlugins.alertContent.registerContentReplacer({
       !!(
         context.content &&
         typeof context.content === 'object' &&
+        // eslint-disable-next-line no-restricted-syntax -- Runtime duck typing on unknown plugin content
         'props' in context.content &&
         typeof context.content.props.children === 'string' &&
         context.content.props.children.match('Access denied')

pages/multiselect/multiselect.sync.example.page.tsx

@@ -30,6 +30,7 @@ const onBlur = () => {
 };
 
 export default function MultiselectPage() {
+  // eslint-disable-next-line no-restricted-syntax -- Page demo: filtering option groups from flat options
   const selectableOptions = options.filter(o => !o.disabled && !('options' in o));
   const [selectedOptions1, setSelectedOptions1] = React.useState<MultiselectProps.Options>([
     selectableOptions[10],

pages/multiselect/permutations.page.tsx

@@ -32,7 +32,9 @@ const options: MultiselectProps.Options = [
   { value: 'more4', label: 'More options with very long texts 4' },
 ];
 
+// eslint-disable-next-line no-restricted-syntax -- Page demo: option/group discrimination
 const _getGroupOptions = (option: OptionDefinition | OptionGroup) => ('options' in option ? option.options : [option]);
+// eslint-disable-next-line no-restricted-syntax -- Page demo: option/group discrimination
 const _getFirstChild = (option: OptionDefinition | OptionGroup) => ('options' in option ? option.options[0] : option);
 
 const permutations = createPermutations<MultiselectProps & { inlineTokens?: boolean }>([

pages/multiselect/screenshot.page.tsx

@@ -50,6 +50,7 @@ export default function MultiselectPage() {
         ...option,
         disabled: false,
         options:
+          // eslint-disable-next-line no-restricted-syntax -- Page demo: option/group discrimination
           'options' in option && option.options.length
             ? option.options.map(childOption => ({ ...childOption, disabled: false }))
             : undefined,
@@ -59,6 +60,7 @@ export default function MultiselectPage() {
     ? groupedOptions
     : groupedOptions.reduce(
         (previousValue: MultiselectProps.Options, currentValue: MultiselectProps.Option) =>
+          // eslint-disable-next-line no-restricted-syntax -- Page demo: option/group discrimination
           'options' in currentValue && (currentValue as OptionGroup).options?.length
             ? [...previousValue, ...(currentValue as OptionGroup).options]
             : [...previousValue, currentValue],

pages/table/grouped-table/grouped-table-data.tsx

@@ -59,6 +59,7 @@ export interface GroupDefinition {
 }
 
 export function isGroupRow(row: TransactionRow): row is TransactionRowGroup {
+  // eslint-disable-next-line no-restricted-syntax -- Union type discrimination for TransactionRow
   return 'children' in row;
 }
 

src/__a11y__/a11y-page-object.ts

@@ -79,6 +79,7 @@ export default class A11yPageObject extends BasePageObject {
       runOptions
     );
 
+    // eslint-disable-next-line no-restricted-syntax -- Test utility: runtime check on axe result
     if ('error' in response) {
       throw response.error;
     }

src/app-layout/runtime-drawer/index.tsx

@@ -87,10 +87,12 @@ function mapRuntimeHeaderActionsToHeaderActions(
   return runtimeHeaderActions.map(runtimeHeaderAction => {
     return {
       ...runtimeHeaderAction,
+      // eslint-disable-next-line no-restricted-syntax -- Runtime plugin API: property not in TS type
       ...('iconSvg' in runtimeHeaderAction &&
         runtimeHeaderAction.iconSvg && {
           iconSvg: convertRuntimeTriggerToReactNode(runtimeHeaderAction.iconSvg),
         }),
+      // eslint-disable-next-line no-restricted-syntax -- Runtime plugin API: property not in TS type
       ...('pressedIconSvg' in runtimeHeaderAction &&
         runtimeHeaderAction.pressedIconSvg && {
           iconSvg: convertRuntimeTriggerToReactNode(runtimeHeaderAction.pressedIconSvg),

src/app-layout/visual-refresh-toolbar/state/use-app-layout.tsx

@@ -254,6 +254,7 @@ export const useAppLayout = (
       return;
     }
 
+    // eslint-disable-next-line no-restricted-syntax -- postMessage validation: runtime data shape check
     if (!('payload' in message && 'id' in message.payload)) {
       metrics.sendOpsMetricObject('awsui-widget-drawer-incorrect-payload', {
         type: message.type,

src/error-boundary/__tests__/error-boundary.test.tsx

@@ -43,6 +43,7 @@ function Recursive({ boundaries }: { boundaries: BoundaryTestSpec[] }) {
       </div>
     ),
   };
+  // eslint-disable-next-line no-restricted-syntax -- Test: runtime error type check
   return 'onError' in props ? <ErrorBoundary {...props} /> : <BuiltInErrorBoundary {...props} />;
 }
 
@@ -436,6 +437,7 @@ describe('error propagation and suppressNested', () => {
   ])('suppressNested and suppressible: $description', ({ boundaries, expected }) => {
     render(<Recursive boundaries={boundaries} />);
     expect(findHeader().getElement()).toHaveTextContent(expected);
+    // eslint-disable-next-line no-restricted-syntax -- Test: runtime error type check
     for (const { onError, errorBoundaryId } of boundaries.filter(b => 'onError' in b)) {
       if (errorBoundaryId === expected) {
         expect(onError).toHaveBeenCalledWith({
@@ -546,6 +548,7 @@ describe('built-in error boundaries', () => {
   ])('suppressing built-in boundaries, $description', ({ boundaries, expected }) => {
     render(<Recursive boundaries={boundaries} />);
     expect(findBoundary()!.getElement().parentElement!.textContent).toBe(expected);
+    // eslint-disable-next-line no-restricted-syntax -- Test: runtime error type check
     for (const { onError, errorBoundaryId } of boundaries.filter(b => 'onError' in b)) {
       if (errorBoundaryId && expected.includes(errorBoundaryId)) {
         expect(onError).toHaveBeenCalledWith({