From 2d897fb8593c6f4418434b85d6584a41b5110d9a Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Mon, 6 Mar 2023 09:33:11 -0500 Subject: [PATCH 1/7] feat(DataList): added event param to callback --- packages/eslint-plugin-pf-codemods/index.js | 7 +- .../v5/dataList-warn-updated-callback.js | 31 +++++ .../lib/rules/v5/onToggle-warn-event.js | 44 +++--- .../rules/v5/dataList-warn-updated-callback | 36 +++++ .../test/rules/v5/onToggle-warn-event.js | 130 ++++-------------- packages/pf-codemods/README.md | 8 ++ test/test.tsx | 15 +- 7 files changed, 148 insertions(+), 123 deletions(-) create mode 100644 packages/eslint-plugin-pf-codemods/lib/rules/v5/dataList-warn-updated-callback.js create mode 100644 packages/eslint-plugin-pf-codemods/test/rules/v5/dataList-warn-updated-callback diff --git a/packages/eslint-plugin-pf-codemods/index.js b/packages/eslint-plugin-pf-codemods/index.js index be6d68e80..e495f31ac 100644 --- a/packages/eslint-plugin-pf-codemods/index.js +++ b/packages/eslint-plugin-pf-codemods/index.js @@ -1,7 +1,11 @@ const createListOfRules = (version) => { const rules = {}; require("glob") - .sync(require.resolve('@patternfly/eslint-plugin-pf-codemods').replace('index.js', `lib/rules/v${version}/*.js`)) + .sync( + require + .resolve("@patternfly/eslint-plugin-pf-codemods") + .replace("index.js", `lib/rules/v${version}/*.js`) + ) .forEach(function (file) { const ruleName = /.*\/([^.]+)/.exec(file)[1]; rules[ruleName] = require(`./lib/rules/v${version}/${ruleName}`); @@ -17,6 +21,7 @@ const warningRules = [ "applicationLauncher-warn-input", "card-warn-component", "charts-tooltip-warning", + "dataList-warn-updated-callback", "datePicker-warn-appendTo-default-value-changed", "horizontalSubnav-ariaLabel", "onToggle-warn-event", diff --git a/packages/eslint-plugin-pf-codemods/lib/rules/v5/dataList-warn-updated-callback.js b/packages/eslint-plugin-pf-codemods/lib/rules/v5/dataList-warn-updated-callback.js new file mode 100644 index 000000000..817273ce5 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/lib/rules/v5/dataList-warn-updated-callback.js @@ -0,0 +1,31 @@ +const { getPackageImports } = require("../../helpers"); + +// https://github.com/patternfly/patternfly-react/pull/8723 +module.exports = { + meta: {}, + create: function (context) { + const imports = getPackageImports(context, "@patternfly/react-core").filter( + (specifier) => specifier.imported.name === "DataList" + ); + + return imports.length === 0 + ? {} + : { + JSXOpeningElement(node) { + if ( + imports + .map((imp) => imp.imported.name) + .includes(node.name.name) && + node.attributes.find( + (attr) => attr.name.name === "onSelectDataListItem" + ) + ) { + context.report({ + node, + message: `The "onSelectDataListItem" prop for DataList has been updated to include the event parameter as its first parameter. "onSelectDataListItem" handlers may require an update.`, + }); + } + }, + }; + }, +}; diff --git a/packages/eslint-plugin-pf-codemods/lib/rules/v5/onToggle-warn-event.js b/packages/eslint-plugin-pf-codemods/lib/rules/v5/onToggle-warn-event.js index 8b73f0b73..6115a64fc 100644 --- a/packages/eslint-plugin-pf-codemods/lib/rules/v5/onToggle-warn-event.js +++ b/packages/eslint-plugin-pf-codemods/lib/rules/v5/onToggle-warn-event.js @@ -3,27 +3,33 @@ const { getPackageImports } = require("../../helpers"); // https://github.com/patternfly/patternfly-react/pull/8667 module.exports = { create: function (context) { - const onToggleAPIUpdateList = ['ApplicationLauncher', 'BadgeToggle', 'DropdownToggle', 'KebabToggle', 'Toggle', 'Select', 'SelectToggle']; - const imports = getPackageImports( - context, - "@patternfly/react-core" - ).filter((specifier) => onToggleAPIUpdateList.includes(specifier.imported.name)); + const onToggleAPIUpdateList = [ + "ApplicationLauncher", + "BadgeToggle", + "DropdownToggle", + "KebabToggle", + "Toggle", + "Select", + "SelectToggle", + ]; + const imports = getPackageImports(context, "@patternfly/react-core").filter( + (specifier) => onToggleAPIUpdateList.includes(specifier.imported.name) + ); - return imports.length === 0 + return imports.length === 0 ? {} : { - JSXOpeningElement(node) { - if ( - imports - .map((imp) => imp.local.name) - .includes(node.name.name) - ) { - context.report({ - node, - message: `${node.name.name} onToggle prop has been updated to include the event parameter as its first parameter. onToggle handlers may require an update.`, - }); - } - }, - }; + JSXOpeningElement(node) { + if ( + imports.map((imp) => imp.local.name).includes(node.name.name) && + node.attributes.find((attr) => attr.name.name === "onToggle") + ) { + context.report({ + node, + message: `${node.name.name} onToggle prop has been updated to include the event parameter as its first parameter. onToggle handlers may require an update.`, + }); + } + }, + }; }, }; diff --git a/packages/eslint-plugin-pf-codemods/test/rules/v5/dataList-warn-updated-callback b/packages/eslint-plugin-pf-codemods/test/rules/v5/dataList-warn-updated-callback new file mode 100644 index 000000000..be2b1b4ab3 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/test/rules/v5/dataList-warn-updated-callback @@ -0,0 +1,36 @@ +const ruleTester = require("../../ruletester"); +const rule = require("../../../lib/rules/v5/dataList-warn-updated-callback"); + +ruleTester.run("dataList-warn-updated-callback", rule, { + valid: [ + { + code: `import { DataList } from '@patternfly/react-core'; ;`, + }, + { + // No @patternfly/react-core import + code: `;`, + }, + ], + invalid: [ + { + code: `import { DataList } from '@patternfly/react-core'; ;`, + output: `import { DataList } from '@patternfly/react-core'; ;`, + errors: [ + { + message: `The "onSelectDataListItem" prop for DataList has been updated to include the event parameter as its first parameter. "onSelectDataListItem" handlers may require an update.`, + type: "JSXOpeningElement", + }, + ], + }, + { + code: `import { DataList as PFdl } from '@patternfly/react-core'; ;`, + output: `import { DataList as PFdl } from '@patternfly/react-core'; ;`, + errors: [ + { + message: `The "onSelectDataListItem" prop for DataList has been updated to include the event parameter as its first parameter. "onSelectDataListItem" handlers may require an update.`, + type: "JSXOpeningElement", + }, + ], + }, + ], +}); diff --git a/packages/eslint-plugin-pf-codemods/test/rules/v5/onToggle-warn-event.js b/packages/eslint-plugin-pf-codemods/test/rules/v5/onToggle-warn-event.js index afcb1ac74..63c589d9f 100644 --- a/packages/eslint-plugin-pf-codemods/test/rules/v5/onToggle-warn-event.js +++ b/packages/eslint-plugin-pf-codemods/test/rules/v5/onToggle-warn-event.js @@ -1,107 +1,35 @@ -const ruleTester = require('../../ruletester'); -const rule = require('../../../lib/rules/v5/onToggle-warn-event'); +const ruleTester = require("../../ruletester"); +const rule = require("../../../lib/rules/v5/onToggle-warn-event"); +const onToggleAPIUpdateList = [ + "ApplicationLauncher", + "BadgeToggle", + "DropdownToggle", + "KebabToggle", + "Toggle", + "Select", + "SelectToggle", +]; ruleTester.run("onToggle-warn-event", rule, { valid: [ - { - code: ``, - }, - { - code: ``, - }, - { - code: ``, - }, - { - code: ``, - }, - { - code: ``, - }, - { - code: ``, - }, - { - code: `import { SelectToggle } from '@foo/bar'; `, - } + ...onToggleAPIUpdateList.map((component) => ({ + code: `import { ${component} } from '@patternfly/react-core'; <${component} />;`, + })), + // No @patternfly/react-core import + ...onToggleAPIUpdateList.map((component) => ({ + code: `<${component} onToggle />;`, + })), ], invalid: [ - { - code: `import { ApplicationLauncher } from '@patternfly/react-core'; ;`, - output: `import { ApplicationLauncher } from '@patternfly/react-core'; ;`, - errors: [{ - message: `ApplicationLauncher onToggle prop has been updated to include the event parameter as its first parameter. onToggle handlers may require an update.`, - type: "JSXOpeningElement", - }] - }, - { - code: `import { BadgeToggle } from '@patternfly/react-core'; ;`, - output: `import { BadgeToggle } from '@patternfly/react-core'; ;`, - errors: [{ - message: `BadgeToggle onToggle prop has been updated to include the event parameter as its first parameter. onToggle handlers may require an update.`, - type: "JSXOpeningElement", - }] - }, - { - code: `import { DropdownToggle } from '@patternfly/react-core'; ;`, - output: `import { DropdownToggle } from '@patternfly/react-core'; ;`, - errors: [{ - message: `DropdownToggle onToggle prop has been updated to include the event parameter as its first parameter. onToggle handlers may require an update.`, - type: "JSXOpeningElement", - }] - }, - { - code: `import { KebabToggle } from '@patternfly/react-core'; ;`, - output: `import { KebabToggle } from '@patternfly/react-core'; ;`, - errors: [{ - message: `KebabToggle onToggle prop has been updated to include the event parameter as its first parameter. onToggle handlers may require an update.`, - type: "JSXOpeningElement", - }] - }, - { - code: `import { Toggle } from '@patternfly/react-core'; ;`, - output: `import { Toggle } from '@patternfly/react-core'; ;`, - errors: [{ - message: `Toggle onToggle prop has been updated to include the event parameter as its first parameter. onToggle handlers may require an update.`, - type: "JSXOpeningElement", - }] - }, - { - code: `import { Select } from '@patternfly/react-core'; ;`, - errors: [{ - message: `Select onToggle prop has been updated to include the event parameter as its first parameter. onToggle handlers may require an update.`, - type: "JSXOpeningElement", - }] - }, - { - code: `import { SelectToggle } from '@patternfly/react-core'; ;`, - output: `import { SelectToggle } from '@patternfly/react-core'; ;`, - errors: [{ - message: `SelectToggle onToggle prop has been updated to include the event parameter as its first parameter. onToggle handlers may require an update.`, - type: "JSXOpeningElement", - }] - }, - ] + ...onToggleAPIUpdateList.map((component) => ({ + code: `import { ${component} } from '@patternfly/react-core'; <${component} onToggle />;`, + output: `import { ${component} } from '@patternfly/react-core'; <${component} onToggle />;`, + errors: [ + { + message: `${component} onToggle prop has been updated to include the event parameter as its first parameter. onToggle handlers may require an update.`, + type: "JSXOpeningElement", + }, + ], + })), + ], }); diff --git a/packages/pf-codemods/README.md b/packages/pf-codemods/README.md index ed64f9c4a..65d0cebe7 100644 --- a/packages/pf-codemods/README.md +++ b/packages/pf-codemods/README.md @@ -329,6 +329,12 @@ Out: ``` +### dataList-warn-updated-callback [(#8723)](https://github.com/patternfly/patternfly-react/pull/8723) + +We've updated the `onSelectDataListItem` prop for DataList to include the `event` as its first parameter. Handlers may require an update. + +This rule will raise a warning, but will not make any changes. + ### datePicker-warn-appendTo-default-value-changed [(#8636)](https://github.com/patternfly/patternfly-react/pull/8636) The default value of the `appendTo` prop on DatePicker has been updated, which may cause markup changes that require updating selectors in tests. This rule will raise a warning, but will not make any changes. @@ -543,6 +549,8 @@ Out: We've updated the `onToggle` function to include the `event` as its first parameter for the following components: `ApplicationLauncher`, `BadgeToggle`, `DropdownToggle`, `KebabToggle`, `Toggle`, `Select`, and `SelectToggle`. Handlers for these components may require an update. +This rule will raise a warning, but will not make any changes. + ### pageheader-update-logoComponent [(#8655)](https://github.com/patternfly/patternfly-react/pull/8655) We've updated `PageHeader`'s logo to only be an anchor if an `href` is specified, otherwise it will be a `span`. Explicitly declared `logoComponent` properties will remain unchanged, but if it is not specified a default will be added. diff --git a/test/test.tsx b/test/test.tsx index 69e80b573..3f70f8456 100644 --- a/test/test.tsx +++ b/test/test.tsx @@ -11,12 +11,15 @@ import { AccordionExpandableContent, Alert, ApplicationLauncher, + BadgeToggle, Button, Card, + DataList, DatePicker, DropdownItem, DropdownToggle, FileUpload, + KebabToggle, KEY_CODES, MenuItem, MenuItemAction, @@ -26,6 +29,8 @@ import { NumberInput, Pagination, Popover, + Select, + SelectToggle, Spinner, Tabs, Toggle, @@ -45,12 +50,16 @@ const newTheme = getCustomTheme("1", "2", "3"); <> + +