feat(Select,Dropdown): renamed itemId prop (#493)

* feat(Select,Dropdown): renamed itemId prop

* Removed react next logic

Author: thatblindgeye

packages/eslint-plugin-pf-codemods/lib/rules/v5/selectDropdown-rename-itemId.js

@@ -0,0 +1,39 @@
+const { getFromPackage, renamePropsOnNode } = require("../../helpers");
+const renames = {
+  SelectOption: {
+    itemId: {
+      newName: "value",
+      message: (node) =>
+        `itemId prop for ${node?.name?.name} has been renamed to value`,
+    },
+  },
+  DropdownItem: {
+    itemId: {
+      newName: "value",
+      message: (node) =>
+        `itemId prop for ${node?.name?.name} has been renamed to value`,
+    },
+  },
+};
+
+// https://github.com/patternfly/patternfly-react/pull/9175
+module.exports = {
+  meta: { fixable: "code" },
+  create: function (context) {
+    const { imports: coreImports } = getFromPackage(
+      context,
+      "@patternfly/react-core"
+    );
+    const selectAndDropdownImports = coreImports.filter((imp) =>
+      ["SelectOption", "DropdownItem"].includes(imp.imported?.name)
+    );
+
+    return !selectAndDropdownImports.length
+      ? {}
+      : {
+          JSXOpeningElement(node) {
+            renamePropsOnNode(context, selectAndDropdownImports, node, renames);
+          },
+        };
+  },
+};

packages/eslint-plugin-pf-codemods/test/rules/v5/selectDropdown-rename-itemId.js

@@ -0,0 +1,91 @@
+const ruleTester = require("../../ruletester");
+const rule = require("../../../lib/rules/v5/selectDropdown-rename-itemId");
+
+ruleTester.run("selectDropdown-rename-itemId", rule, {
+  valid: [
+    {
+      code: `import { SelectOption } from '@patternfly/react-core'; <SelectOption />`,
+    },
+    {
+      code: `import { SelectOption } from '@patternfly/react-core'; <SelectOption value />`,
+    },
+    {
+      code: `import { DropdownItem } from '@patternfly/react-core'; <DropdownItem />`,
+    },
+    {
+      code: `import { DropdownItem } from '@patternfly/react-core'; <DropdownItem value />`,
+    },
+    {
+      // No @patternfly/react-core import
+      code: `<SelectOption itemId />`,
+    },
+    {
+      // No @patternfly/react-core import
+      code: `<DropdownItem itemId />`,
+    },
+  ],
+  invalid: [
+    {
+      code: `import { SelectOption } from '@patternfly/react-core'; <SelectOption itemId="test" />`,
+      output: `import { SelectOption } from '@patternfly/react-core'; <SelectOption value="test" />`,
+      errors: [
+        {
+          message: `itemId prop for SelectOption has been renamed to value`,
+          type: "JSXOpeningElement",
+        },
+      ],
+    },
+    {
+      code: `import { DropdownItem } from '@patternfly/react-core'; <DropdownItem itemId="test" />`,
+      output: `import { DropdownItem } from '@patternfly/react-core'; <DropdownItem value="test" />`,
+      errors: [
+        {
+          message: `itemId prop for DropdownItem has been renamed to value`,
+          type: "JSXOpeningElement",
+        },
+      ],
+    },
+    // Import from dist
+    {
+      code: `import { SelectOption } from '@patternfly/react-core/dist/esm/components/Select/index.js'; <SelectOption itemId="test" />`,
+      output: `import { SelectOption } from '@patternfly/react-core/dist/esm/components/Select/index.js'; <SelectOption value="test" />`,
+      errors: [
+        {
+          message: `itemId prop for SelectOption has been renamed to value`,
+          type: "JSXOpeningElement",
+        },
+      ],
+    },
+    {
+      code: `import { DropdownItem } from '@patternfly/react-core/dist/esm/components/Dropdown/index.js'; <DropdownItem itemId="test" />`,
+      output: `import { DropdownItem } from '@patternfly/react-core/dist/esm/components/Dropdown/index.js'; <DropdownItem value="test" />`,
+      errors: [
+        {
+          message: `itemId prop for DropdownItem has been renamed to value`,
+          type: "JSXOpeningElement",
+        },
+      ],
+    },
+    // Aliased import
+    {
+      code: `import { SelectOption as PFSO } from '@patternfly/react-core'; <PFSO itemId="test" />`,
+      output: `import { SelectOption as PFSO } from '@patternfly/react-core'; <PFSO value="test" />`,
+      errors: [
+        {
+          message: `itemId prop for PFSO has been renamed to value`,
+          type: "JSXOpeningElement",
+        },
+      ],
+    },
+    {
+      code: `import { DropdownItem as PFDI } from '@patternfly/react-core'; <PFDI itemId="test" />`,
+      output: `import { DropdownItem as PFDI } from '@patternfly/react-core'; <PFDI value="test" />`,
+      errors: [
+        {
+          message: `itemId prop for PFDI has been renamed to value`,
+          type: "JSXOpeningElement",
+        },
+      ],
+    },
+  ],
+});

packages/pf-codemods/README.md

@@ -2409,6 +2409,26 @@ import {
 </>;
 ```
 
+### selectDropdown-rename-itemId [(#9175)](https://github.com/patternfly/patternfly-react/pull/9175)
+
+The `itemId` prop for our new implementation of SelectOption and DropdownItem has been renamed to `value`.
+
+#### Examples
+
+In:
+
+```jsx
+<SelectOption itemId="Option 1" />
+<DropdownItem itemId="Item 1" />
+```
+
+Out:
+
+```jsx
+<SelectOption value="Option 1" />
+<DropdownItem value="Item 1" />
+```
+
 ### simpleList-remove-isCurrent [(#8132)](https://github.com/patternfly/patternfly-react/pull/8132)
 
 We've removed the deprecated the `isCurrent` prop. This rule wil replace it with `isActive`.

test/test.tsx

@@ -111,6 +111,7 @@ import {
   SelectOption,
   WizardBody as WizardBodyNext,
   WizardFooter,
+  DropdownItem as NextDropdownItem,
 } from "@patternfly/react-core/next";
 import {
   Table,
@@ -251,6 +252,7 @@ const alertVariantOption = AlertVariant.default;
   <Nav flyout={"menu"} />
   <Nav onSelect={(foo) => handler(foo)} onToggle={(foo) => handler(foo)} />
   <Nav variant='horizontal-subnav' />
+  <NextDropdownItem itemId='test' />
   <NotificationBadge isRead />
   <NotificationBadge isRead={false} />
   <NotificationBadge isRead={isRead} />
@@ -295,7 +297,7 @@ const alertVariantOption = AlertVariant.default;
   <Select variant={SelectVariant.single}>
     <SelectOpt />
   </Select>
-  <SelectOption hasCheck />
+  <SelectOption hasCheck itemId='test' />
   <SelectToggle onToggle={} />
   <Slider onChange={(foo) => handler(foo)} />
   <Spinner isSVG />