TabTitleText

packages/eslint-plugin-pf-codemods/index.js

@@ -11,7 +11,7 @@ const rules = {
   "select-rename-isExpanded": require('./lib/rules/select-rename-isExpanded'),
   "title-require-heading-level": require('./lib/rules/title-require-heading-level'),
   "title-size": require('./lib/rules/title-size'),
-  "wizard-text": require('./lib/rules/wizard-text'),
+  "wizard-rename-text": require('./lib/rules/wizard-rename-text'),
   "wizard-rename-hasBodyPadding": require('./lib/rules/wizard-rename-hasBodyPadding'),
   "wizard-remove-props": require('./lib/rules/wizard-remove-props'),
   "background-image-src-enum": require('./lib/rules/background-image-src-enum'),
@@ -30,6 +30,7 @@ const rules = {
   "remove-isPseudo-props": require('./lib/rules/remove-isPseudo-props'),
   "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'),
 };
 
 module.exports = {

packages/eslint-plugin-pf-codemods/lib/helpers.js

@@ -98,9 +98,22 @@ function renameComponent(componentMap, message) {
   }
 }
 
+function addImport(context, fixer, package, currentImport, newImport) {
+  const specifierToAddTo = getPackageImports(context, package)
+    .filter(specifier => !currentImport || specifier.imported.name === currentImport)
+    .pop();
+
+  if (!specifierToAddTo) {
+    return [];
+  }
+
+  return fixer.insertTextAfter(specifierToAddTo, `, ${newImport}`);
+}
+
 module.exports = {
   getPackageImports,
   renameProp,
   renameProps,
-  renameComponent
+  renameComponent,
+  addImport
 }

packages/eslint-plugin-pf-codemods/lib/rules/chipgroup-remove-chipgrouptoolbaritem.js

@@ -10,7 +10,7 @@ module.exports = {
 
     return !chipGroupImport ? {} : {
       JSXElement(node) {
-        if (chipGroupToolbarItemImport.local.name === node.openingElement.name.name) {
+        if (chipGroupToolbarItemImport && chipGroupToolbarItemImport.local.name === node.openingElement.name.name) {
           const hasSingleChipGroupParent = node.parent
             && node.parent.openingElement.name.name === chipGroupImport.local.name
             && node.parent.children.filter(child => child.type === 'JSXElement').length === 1;

packages/eslint-plugin-pf-codemods/lib/rules/dropdown-rename-icon.js

@@ -10,7 +10,7 @@ module.exports = {
 
     return !imports ? {} : {
       JSXElement(node) {
-        if (dropdownItemImport.local.name === node.openingElement.name.name) {
+        if (dropdownItemImport && dropdownItemImport.local.name === node.openingElement.name.name) {
           const dropdownIcons = node.children.filter(child =>
             child.openingElement &&
             child.openingElement.name.name === dropdownItemIconImport.local.name

packages/eslint-plugin-pf-codemods/lib/rules/tab-title-text.js

@@ -0,0 +1,56 @@
+const { getPackageImports, addImport } = require('../helpers');
+
+// https://github.com/patternfly/patternfly-react/pull/4146
+module.exports = {
+  create: function(context) {
+    const tabImport = getPackageImports(context, '@patternfly/react-core')
+      .filter(specifier => specifier.imported.name === 'Tab');
+
+    return tabImport.length ? {
+      JSXOpeningElement(node) {
+        if (tabImport.map(imp => imp.local.name).includes(node.name.name)) {
+          const attribute = node.attributes.find(node => node.name.name === 'title');
+          if (attribute) {
+            const { value } = attribute;
+            let replacement;
+            if (value.type === 'Literal') {
+              // i.e. title="Title"
+              replacement = fixer => [
+                fixer.replaceText(attribute.value, `{<TabTitleText>${attribute.value.value}</TabTitleText>}`)
+              ];
+            } else if (value.type === 'JSXExpressionContainer') {
+              if (value.expression.type === 'Literal') {
+                // i.e. title={'Title'} or title={100}
+                replacement = fixer => [
+                  fixer.replaceText(attribute.value, `{<TabTitleText>${attribute.value.expression.value}</TabTitleText>}`)
+                ];
+              } else if (value.expression.type === 'Identifier') {
+                // i.e. title={myVariable}
+                replacement = fixer => [
+                  fixer.replaceText(attribute.value, `{<TabTitleText>{${attribute.value.expression.name}}</TabTitleText>}`)
+                ];
+              } else if (value.expression.type === 'JSXElement' && value.expression.openingElement.name.name !== 'TabTitleText') {
+                // i.e. title={<Mycomp2 />}
+                replacement = fixer => [
+                  fixer.insertTextBefore(attribute.value.expression, `<TabTitleText>`),
+                  fixer.insertTextAfter(attribute.value.expression, `</TabTitleText>`)
+                ];
+              }
+            }
+            if (replacement) {
+              context.report({
+                node,
+                message: `title needs to be wrapped with the TabTitleText and/or TabTitleIcon component`,
+                fix(fixer) {
+                  return replacement(fixer).concat(
+                    addImport(context, fixer, '@patternfly/react-core', 'Tab', 'TabTitleText')
+                  );
+                }
+              });
+            }
+          }
+        }
+      }
+    } : {};
+  }
+};

packages/eslint-plugin-pf-codemods/test/rules/tab-title-text.js

@@ -0,0 +1,24 @@
+const ruleTester = require('./ruletester');
+const rule = require('../../lib/rules/tab-title-text');
+
+ruleTester.run("tab-title-text", rule, {
+  valid: [
+    {
+      code: `import { Tab, TabTitleText } from '@patternfly/react-core'; <Tab title={<TabTitleText>Title</TabTitleText>}>Content</Tab>`,
+    },
+    {
+      // No @patternfly/react-core import
+      code: `<Tab title="Non-PF component">Content</Tab>`,
+    }
+  ],
+  invalid: [
+    {
+      code:   `import { Tab } from '@patternfly/react-core'; <Tab title="Title">Content</Tab>`,
+      output: `import { Tab, TabTitleText } from '@patternfly/react-core'; <Tab title={<TabTitleText>Title</TabTitleText>}>Content</Tab>`,
+      errors: [{
+        message: `title needs to be wrapped with the TabTitleText and/or TabTitleIcon component`,
+        type: "JSXOpeningElement",
+      }]
+    },
+  ]
+});

test/test.tsx

@@ -24,3 +24,13 @@ export const MyButtonWithCustomEnum = (
   <Button variant={MyPfEnums.plain} />
 )
 
+import { Tab } from '@patternfly/react-core';
+const tabText = <TabTitleText>After</TabTitleText>;
+const TabTextComp = () => <TabTitleText>After</TabTitleText>;
+export const TestTab = <Tab title="hello">Content</Tab>;
+export const TestTab2 = <Tab title={<TabTitleText>hello</TabTitleText>}>Content</Tab>;
+export const TestTab3 = <Tab title={'hello'}>Content</Tab>;
+export const TestTab3a = <Tab title={5}>Content</Tab>;
+export const TestTab4 = <Tab title={tabText}>Content</Tab>;
+export const TestTab5 = <Tab title={<TabTextComp />}>Content</Tab>;
+export const TestTab6 = <Tab title={<div>hello</div>}>Content</Tab>;