Nav list variant (#57)

* added rule and test for NavList variant being removed * added rule and test for NavList variant being removed, final product... * added rule and test for NavList variant being removed, final product... * fixed tests and Const... * Removed hard coded value types from const * Updated logic to handle NavList with no Nav component in same file... * Added another valid test case. * fixed test case where if we have a variant prop with no value we will remove the prop * Added additional test case for no parent Nav with no value variant prop... * removed debug statement left behind * refactored var 'navImportName' to const, no need to set it two different ways, * restructure the file a bit, for better readability
patternfly · May 28, 2020 · 07ec1cc · 07ec1cc
1 parent 46b1237
commit 07ec1cc
Show file tree

Hide file tree

Showing 4 changed files with 184 additions and 3 deletions.
diff --git a/packages/eslint-plugin-pf-codemods/index.js b/packages/eslint-plugin-pf-codemods/index.js
@@ -31,6 +31,7 @@ const rules = {
   "label-remove-isCompact": require('./lib/rules/label-remove-isCompact'),
   "rename-noPadding": require('./lib/rules/rename-noPadding'),
   "tab-title-text": require('./lib/rules/tab-title-text'),
+  "nav-list-variant": require('./lib/rules/nav-list-variant'),
   "table-removed-transforms": require('./lib/rules/table-removed-transforms'),
   "select-rename-checkbox": require('./lib/rules/select-rename-checkbox'),
   "remove-unused-imports": require('./lib/rules/remove-unused-imports'),

diff --git a/packages/eslint-plugin-pf-codemods/lib/helpers.js b/packages/eslint-plugin-pf-codemods/lib/helpers.js
@@ -54,7 +54,7 @@ function renameProp(components, propMap, message, replaceAttribute) {
   return function(context) {
     const imports = getPackageImports(context, '@patternfly/react-core')
       .filter(specifier => components.includes(specifier.imported.name));
-      
+
     return imports.length === 0 ? {} : {
       JSXOpeningElement(node) {
         if (imports.find(imp => imp.local.name === node.name.name)) {
@@ -126,10 +126,10 @@ function ensureImports(context, node, package, imports) {
 }
 
 module.exports = {
+  ensureImports,
   getPackageImports,
   renameProp,
   renameProps,
   renameProps0,
   renameComponent,
-  ensureImports
-}
+}
diff --git a/packages/eslint-plugin-pf-codemods/lib/rules/nav-list-variant.js b/packages/eslint-plugin-pf-codemods/lib/rules/nav-list-variant.js
@@ -0,0 +1,55 @@
+const { getPackageImports } = require('../helpers');
+
+// https://github.com/patternfly/patternfly-react/pull/4225
+module.exports = {
+  create: function(context) {
+    const imports = getPackageImports(context, '@patternfly/react-core')
+        .filter(specifier => ['NavList', 'Nav'].includes(specifier.imported.name));
+    const navImport = imports.find(imp => imp.imported.name === 'Nav');
+    const NavListImport = imports.find(imp => imp.imported.name === 'NavList');
+
+    return !NavListImport ? {} : {
+      JSXElement(node) {
+        if (NavListImport.local.name === node.openingElement.name.name) {
+          const navImportName = "Nav";
+          const variantAttr = node.openingElement.attributes.find(attribute => {
+            return attribute.name.name === 'variant'
+          });
+          const variantVal = context.getSourceCode().getText(variantAttr) || '"horizontal" | "default" | "tertiary"';
+
+          let hasNavParent;
+          if (navImport) {
+            hasNavParent = node.parent
+                && node.parent.openingElement.name.name === navImport.local.name
+                && node.parent.children.filter(child => child.type === 'JSXElement').length === 1;
+          }
+
+          if (variantAttr) {
+            if (variantAttr.value !== null) {
+              context.report({
+                node,
+                message: `variant has been removed from ${node.openingElement.name.name}, use <${navImportName} ${variantVal}> instead`,
+                fix(fixer) {
+                  const fixes = [fixer.replaceText(variantAttr, '')];
+                  if (hasNavParent) {
+                    fixes.push(fixer.insertTextAfter(node.parent.openingElement.name, ' ' + variantVal))
+                  }
+                  return fixes;
+                }
+              });
+            } else {
+              context.report({
+                node,
+                message: `variant has been removed from ${node.openingElement.name.name}, use <${navImportName} variant={"horizontal" | "default" | "tertiary"}> instead`,
+                fix(fixer) {
+                  const fixes = [fixer.replaceText(variantAttr, '')];
+                  return fixes;
+                }
+              });
+            }
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/packages/eslint-plugin-pf-codemods/test/rules/nav-list-variant.js b/packages/eslint-plugin-pf-codemods/test/rules/nav-list-variant.js
@@ -0,0 +1,125 @@
+const ruleTester = require('./ruletester');
+const rule = require('../../lib/rules/nav-list-variant');
+
+ruleTester.run("nav-list-variant", rule, {
+  valid: [
+    {
+      code: `import { Nav, NavList } from '@patternfly/react-core';
+<Nav variant="tertiary">
+    <NavList>
+        some item
+    </NavList>
+</Nav>`
+    },
+    {
+      code: `import { NavList } from '@patternfly/react-core';
+    <NavList>
+        some item
+    </NavList>`
+    }
+  ],
+  invalid: [
+    {
+      code: `import { Nav, NavList } from '@patternfly/react-core';
+<Nav>
+    <NavList variant="default">
+        some item
+    </NavList>
+</Nav>`,
+      output: `import { Nav, NavList } from '@patternfly/react-core';
+<Nav variant="default">
+    <NavList >
+        some item
+    </NavList>
+</Nav>`,
+      errors: [{
+        message: `variant has been removed from NavList, use <Nav variant="default"> instead`,
+        type: "JSXElement",
+      }]
+    },
+    {
+      code: `import { Nav, NavList } from '@patternfly/react-core';
+<Nav>
+    <NavList variant="tertiary">
+        some item
+    </NavList>
+</Nav>`,
+      output: `import { Nav, NavList } from '@patternfly/react-core';
+<Nav variant="tertiary">
+    <NavList >
+        some item
+    </NavList>
+</Nav>`,
+      errors: [{
+        message: `variant has been removed from NavList, use <Nav variant="tertiary"> instead`,
+        type: "JSXElement",
+      }]
+    },
+    {
+      code:   `import { Nav, NavList } from '@patternfly/react-core';
+<Nav>
+    <NavList variant="horizontal">
+        some item
+    </NavList>
+</Nav>`,
+      output: `import { Nav, NavList } from '@patternfly/react-core';
+<Nav variant="horizontal">
+    <NavList >
+        some item
+    </NavList>
+</Nav>`,
+      errors: [{
+        message: `variant has been removed from NavList, use <Nav variant="horizontal"> instead`,
+        type: "JSXElement",
+      }]
+    },
+    {
+      code: `import { Nav, NavList } from '@patternfly/react-core';
+<Nav>
+    <NavList variant>
+        some item
+    </NavList>
+</Nav>`,
+      output: `import { Nav, NavList } from '@patternfly/react-core';
+<Nav>
+    <NavList >
+        some item
+    </NavList>
+</Nav>`,
+      errors: [{
+        message: `variant has been removed from NavList, use <Nav variant={"horizontal" | "default" | "tertiary"}> instead`,
+        type: "JSXElement",
+      }]
+    },
+    {
+      code: `import { NavList } from '@patternfly/react-core';
+    <NavList variant>
+        some item
+    </NavList>`,
+      output: `import { NavList } from '@patternfly/react-core';
+    <NavList >
+        some item
+    </NavList>`,
+      errors: [{
+        message: `variant has been removed from NavList, use <Nav variant={"horizontal" | "default" | "tertiary"}> instead`,
+        type: "JSXElement",
+      }]
+    },
+    {
+      code: `import { NavList } from '@patternfly/react-core';
+<NavList variant="horizontal">
+    some item
+</NavList>`,
+      output: `import { NavList } from '@patternfly/react-core';
+<NavList >
+    some item
+</NavList>`,
+      errors: [{
+        message: `variant has been removed from NavList, use <Nav variant="horizontal"> instead`,
+        type: "JSXElement",
+      }]
+    }
+  ]
+});
+
+