fix attribute checker to only look for in Tooltip

Author: broccolinisoup

src/configs/recommended.js

@@ -17,6 +17,7 @@ module.exports = {
     'primer-react/new-color-css-vars': 'error',
     'primer-react/a11y-explicit-heading': 'error',
     'primer-react/new-color-css-vars-have-fallback': 'error',
+    'primer-react/use-next-tooltip': 'error',
   },
   settings: {
     github: {

src/index.js

@@ -7,6 +7,7 @@ module.exports = {
     'new-color-css-vars': require('./rules/new-color-css-vars'),
     'a11y-explicit-heading': require('./rules/a11y-explicit-heading'),
     'new-color-css-vars-have-fallback': require('./rules/new-color-css-vars-have-fallback'),
+    'use-next-tooltip': require('./rules/use-next-tooltip'),
   },
   configs: {
     recommended: require('./configs/recommended'),

src/rules/__tests__/use-next-tooltip.test.js

@@ -38,6 +38,14 @@ ruleTester.run('use-next-tooltip', rule, {
       ],
       output: `import {ActionList, ActionMenu, Button} from '@primer/react';\nimport {Tooltip} from '@primer/react/experimental';\n<Tooltip text="tooltip text"><Button>Button</Button></Tooltip>`,
     },
+    {
+      code: `import {ActionList, ActionMenu, Button, Tooltip} from '@primer/react';\n<Tooltip aria-label="tooltip text"><Button aria-label="test">Button</Button></Tooltip>`,
+      errors: [
+        {messageId: 'useNextTooltip', line: 1},
+        {messageId: 'useTextProp', line: 2},
+      ],
+      output: `import {ActionList, ActionMenu, Button} from '@primer/react';\nimport {Tooltip} from '@primer/react/experimental';\n<Tooltip text="tooltip text"><Button aria-label="test">Button</Button></Tooltip>`,
+    },
     {
       code: `import {ActionList, ActionMenu, Tooltip, Button} from '@primer/react';\n<Tooltip aria-label="tooltip text" noDelay={true} wrap={true} align="left"><Button>Button</Button></Tooltip>`,
       errors: [
@@ -47,7 +55,7 @@ ruleTester.run('use-next-tooltip', rule, {
         {messageId: 'wrapRemoved', line: 2},
         {messageId: 'alignRemoved', line: 2},
       ],
-      output: `import {ActionList, ActionMenu, Button} from '@primer/react';\nimport {Tooltip} from '@primer/react/experimental';\n<Tooltip text="tooltip text" ><Button>Button</Button></Tooltip>`,
+      output: `import {ActionList, ActionMenu, Button} from '@primer/react';\nimport {Tooltip} from '@primer/react/experimental';\n<Tooltip text="tooltip text"   ><Button>Button</Button></Tooltip>`,
     },
   ],
 })

src/rules/use-next-tooltip.js

@@ -1,4 +1,6 @@
 'use strict'
+const {getJSXOpeningElementAttribute} = require('../utils/get-jsx-opening-element-attribute')
+const {getJSXOpeningElementName} = require('../utils/get-jsx-opening-element-name')
 
 module.exports = {
   meta: {
@@ -28,9 +30,7 @@ module.exports = {
           specifier => specifier.imported && specifier.imported.name === 'Tooltip',
         )
 
-        const hasOtherImports = node.specifiers.some(
-          specifier => specifier.imported && specifier.imported.name !== 'Tooltip',
-        )
+        const hasOtherImports = node.specifiers.length > 1
         if (!hasTooltip) {
           return
         }
@@ -46,10 +46,26 @@ module.exports = {
               const tooltipSpecifier = node.specifiers.find(
                 specifier => specifier.imported && specifier.imported.name === 'Tooltip',
               )
+
+              const tokensToRemove = [' ', ',']
+              const tooltipIsFirstImport = tooltipSpecifier === node.specifiers[0]
+              const tooltipIsLastImport = tooltipSpecifier === node.specifiers[node.specifiers.length - 1]
+              const tooltipIsNotFirstOrLastImport = !tooltipIsFirstImport && !tooltipIsLastImport
+
+              const sourceCode = context.getSourceCode()
+              const canRemoveBefore = tooltipIsNotFirstOrLastImport
+                ? false
+                : tokensToRemove.includes(sourceCode.getTokenBefore(tooltipSpecifier).value)
+              const canRemoveAfter = tokensToRemove.includes(sourceCode.getTokenAfter(tooltipSpecifier).value)
+              const start = canRemoveBefore
+                ? sourceCode.getTokenBefore(tooltipSpecifier).range[0]
+                : tooltipSpecifier.range[0]
+              const end = canRemoveAfter
+                ? sourceCode.getTokenAfter(tooltipSpecifier).range[1] + 1
+                : tooltipSpecifier.range[1]
               return [
                 // remove tooltip specifier and the space and comma after it
-                fixer.removeRange([tooltipSpecifier.range[0], tooltipSpecifier.range[1] + 2]),
-                // fixer.remove(tooltipSpecifier),
+                fixer.removeRange([start, end]),
                 fixer.insertTextAfterRange(
                   [node.range[1], node.range[1]],
                   `\nimport {Tooltip} from '@primer/react/experimental';`,
@@ -59,40 +75,48 @@ module.exports = {
           },
         })
       },
-      JSXAttribute(node) {
-        if (node.name.name === 'aria-label') {
+      JSXOpeningElement(node) {
+        const openingElName = getJSXOpeningElementName(node)
+        if (openingElName !== 'Tooltip') {
+          return
+        }
+        const ariaLabel = getJSXOpeningElementAttribute(node, 'aria-label')
+        if (ariaLabel !== undefined) {
           context.report({
             node,
             messageId: 'useTextProp',
             fix(fixer) {
-              return fixer.replaceText(node.name, 'text')
+              return fixer.replaceText(ariaLabel.name, 'text')
             },
           })
         }
-        if (node.name.name === 'noDelay') {
+        const noDelay = getJSXOpeningElementAttribute(node, 'noDelay')
+        if (noDelay !== undefined) {
           context.report({
             node,
             messageId: 'noDelayRemoved',
             fix(fixer) {
-              return fixer.remove(node)
+              return fixer.remove(noDelay)
             },
           })
         }
-        if (node.name.name === 'wrap') {
+        const wrap = getJSXOpeningElementAttribute(node, 'wrap')
+        if (wrap !== undefined) {
           context.report({
             node,
             messageId: 'wrapRemoved',
             fix(fixer) {
-              return fixer.remove(node)
+              return fixer.remove(wrap)
             },
           })
         }
-        if (node.name.name === 'align') {
+        const align = getJSXOpeningElementAttribute(node, 'align')
+        if (align !== undefined) {
           context.report({
             node,
             messageId: 'alignRemoved',
             fix(fixer) {
-              return fixer.remove(node)
+              return fixer.remove(align)
             },
           })
         }