Set react/jsx-key to warn (#7024)

Author: hasparus

.eslintrc.cjs

@@ -55,14 +55,6 @@ module.exports = {
     'codegen.cjs',
     'tsup',
   ],
-  // parserOptions: {
-  //   ecmaVersion: 2020,
-  //   sourceType: 'module',
-  //   project: ['./tsconfig.eslint.json'],
-  // },
-  // parser: '@typescript-eslint/parser',
-  // plugins: [...guildConfig.plugins, 'hive'],
-  // extends: guildConfig.extends,
   overrides: [
     {
       // Setup GraphQL Parser
@@ -87,6 +79,10 @@ module.exports = {
         '@graphql-eslint/no-deprecated': 'error',
       },
     },
+    {
+      files: ['*.cjs'],
+      parserOptions: { ecmaVersion: 2020 },
+    },
     {
       files: ['packages/**/*.ts', 'packages/**/*.tsx', 'cypress/**/*.ts', 'cypress/**/*.tsx'],
       reportUnusedDisableDirectives: true,
@@ -189,13 +185,14 @@ module.exports = {
         'import/no-default-export': 'off',
         '@next/next/no-img-element': 'off',
         '@typescript-eslint/ban-types': 'off',
-        'react/jsx-key': 'off',
         'jsx-a11y/label-has-associated-control': 'off',
         'jsx-a11y/click-events-have-key-events': 'off',
         'jsx-a11y/no-static-element-interactions': 'off',
         '@next/next/no-html-link-for-pages': 'off',
         'unicorn/no-negated-condition': 'off',
         'no-implicit-coercion': 'off',
+
+        'react/jsx-key': 'warn',
       },
     },
     {

packages/web/app/src/components/organization/settings/oidc-integration-section.tsx

@@ -344,8 +344,8 @@ function OIDCMetadataFetcher(props: {
                 metadataResult.error.formErrors.fieldErrors.userinfo_endpoint?.[0],
               ]
                 .filter(Boolean)
-                .map(msg => (
-                  <p>{msg}</p>
+                .map((msg, i) => (
+                  <p key={i}>{msg}</p>
                 ))}
             </>
           ),

packages/web/app/src/pages/native-composition-diff.tsx

@@ -71,12 +71,16 @@ export function NativeCompositionDiff(props: NativeCompositionDiffProps): ReactN
       <Tabs>
         <TabsList>
           {nativeFederationCompatibility.results.map((result, index) =>
-            result ? <TabsTrigger value={String(index)}>Target {index}</TabsTrigger> : null,
+            result ? (
+              <TabsTrigger value={String(index)} key={index}>
+                Target {index}
+              </TabsTrigger>
+            ) : null,
           )}
         </TabsList>
         {nativeFederationCompatibility.results.map((result, index) =>
           result ? (
-            <TabsContent value={String(index)}>
+            <TabsContent value={String(index)} key={index}>
               <div>
                 <div>Supergraph Diff</div>
                 <div>
@@ -91,8 +95,8 @@ export function NativeCompositionDiff(props: NativeCompositionDiffProps): ReactN
                 <div>
                   {result.nativeCompositionResult.errors?.edges?.length ? (
                     <ul>
-                      {result.nativeCompositionResult.errors.edges.map(edge => (
-                        <li>{edge.node.message}</li>
+                      {result.nativeCompositionResult.errors.edges.map((edge, i) => (
+                        <li key={i}>{edge.node.message}</li>
                       ))}
                     </ul>
                   ) : (

packages/web/app/src/pages/target-app-version.tsx

@@ -227,8 +227,8 @@ function TargetAppVersionContent(props: {
                   </TableRow>
                 </TableHeader>
                 <TableBody>
-                  {data.data?.target?.appDeployment.documents?.edges.map(edge => (
-                    <TableRow>
+                  {data.data?.target?.appDeployment.documents?.edges.map((edge, i) => (
+                    <TableRow key={i}>
                       <TableCell>
                         <span className="rounded bg-gray-800 p-1 font-mono text-sm">
                           {edge.node.hash}

packages/web/app/src/pages/target-apps.tsx

@@ -295,8 +295,9 @@ function TargetAppsView(props: {
                 </TableRow>
               </TableHeader>
               <TableBody>
-                {data.data?.target?.appDeployments?.edges.map(edge => (
+                {data.data?.target?.appDeployments?.edges.map((edge, i) => (
                   <AppTableRow
+                    key={i}
                     organizationSlug={props.organizationSlug}
                     projectSlug={props.projectSlug}
                     targetSlug={props.targetSlug}

packages/web/docs/src/app/gateway/gateway-feature-tabs.tsx

@@ -56,6 +56,7 @@ export function GatewayFeatureTabs(props: { className?: string }) {
   return (
     <FeatureTabs
       highlights={highlights}
+      // eslint-disable-next-line react/jsx-key
       icons={[<PerformanceIcon />, <SecurityIcon />]}
       className={cn(
         'border-blue-200 [--tab-bg-dark:theme(colors.blue.300)] [--tab-bg:theme(colors.blue.200)]',

packages/web/docs/src/components/ecosystem-management/index.tsx

@@ -27,6 +27,7 @@ export function EcosystemManagementSection({ className }: { className?: string }
           </Heading>
           <ul className="mx-auto flex list-none flex-col gap-y-4 text-white/80 lg:gap-y-6">
             {[
+              // eslint-disable-next-line react/jsx-key
               <div className="text-white">
                 A complete ecosystem covering all your dev and production needs.
               </div>,

packages/web/docs/src/components/pricing/index.tsx

@@ -209,6 +209,7 @@ export function Pricing({ className }: { className?: string }): ReactElement {
                   icon={<OperationsIcon />}
                   category="Operations per month"
                   features={[
+                    // eslint-disable-next-line react/jsx-key
                     <span>
                       1M operations per month
                       <small className="block text-xs">Then $10 per million operations</small>
@@ -296,6 +297,7 @@ export function Pricing({ className }: { className?: string }): ReactElement {
                   features={[
                     'Dedicated Slack channel for support',
                     'White-glove onboarding',
+                    // eslint-disable-next-line react/jsx-key
                     <span>
                       GraphQL / APIs support and guidance from{' '}
                       <TextLink href="https://theguild.dev">The&nbsp;Guild</TextLink>