From 689501c4e2afd68a788e22287bc17dec6cb3f38a Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Thu, 20 Jul 2023 16:22:37 -0400 Subject: [PATCH] chore(ActionsColumn): removed tooltip prop --- .../tableActionsColumn-removed-tooltipProp.js | 131 ++++++++++++++++++ .../tableActionsColumn-removed-tooltipProp.js | 82 +++++++++++ packages/pf-codemods/README.md | 61 ++++++-- 3 files changed, 260 insertions(+), 14 deletions(-) create mode 100644 packages/eslint-plugin-pf-codemods/lib/rules/v5/tableActionsColumn-removed-tooltipProp.js create mode 100644 packages/eslint-plugin-pf-codemods/test/rules/v5/tableActionsColumn-removed-tooltipProp.js diff --git a/packages/eslint-plugin-pf-codemods/lib/rules/v5/tableActionsColumn-removed-tooltipProp.js b/packages/eslint-plugin-pf-codemods/lib/rules/v5/tableActionsColumn-removed-tooltipProp.js new file mode 100644 index 000000000..ca3f3f2b4 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/lib/rules/v5/tableActionsColumn-removed-tooltipProp.js @@ -0,0 +1,131 @@ +const { getFromPackage, findVariableDeclaration } = require("../../helpers"); + +// https://github.com/patternfly/patternfly-react/pull/9382 +module.exports = { + meta: { fixable: "code" }, + create: function (context) { + const { imports } = getFromPackage(context, "@patternfly/react-table"); + + const actionsColumnImport = imports.find( + (specifier) => specifier.imported.name === "ActionsColumn" + ); + + return !actionsColumnImport + ? {} + : { + JSXOpeningElement(node) { + if (actionsColumnImport.local?.name !== node.name?.name) { + return; + } + + const itemsProp = node.attributes.find( + (attr) => attr.name?.name === "items" + ); + const getItemsFromVariable = (variableDeclaration) => { + const variableNodeProperty = variableDeclaration?.defs?.[0]?.node; + + if ( + variableNodeProperty?.init?.type === "ArrowFunctionExpression" + ) { + return variableNodeProperty.init.body?.elements; + } + + if (variableNodeProperty?.init?.type === "ArrayExpression") { + return variableNodeProperty.init.elements; + } + }; + + let itemsPropValue; + if (itemsProp.value.expression?.type === "Identifier") { + const currentScope = context.getSourceCode().getScope(node); + const itemsPropDeclaration = findVariableDeclaration( + itemsProp.value.expression.name, + currentScope + ); + itemsPropValue = getItemsFromVariable(itemsPropDeclaration); + } else { + itemsPropValue = itemsProp.value.expression?.elements; + } + + const getItemsWithTooltipProp = (itemsArray) => + itemsArray?.filter((element) => + element?.properties?.find( + (property) => property?.key?.name === "tooltip" + ) + ); + + const itemsWithTooltip = getItemsWithTooltipProp(itemsPropValue); + + if (itemsWithTooltip.length) { + const getTooltipPropValue = (tooltipProp) => { + const { type, value, name } = tooltipProp.value; + + if (type === "Literal") { + return `"${value}"`; + } + + if (type === "Identifier") { + return `${name}`; + } + + if (type === "JSXElement") { + return context.getSourceCode().getText(tooltipProp.value); + } + }; + + itemsWithTooltip.forEach((itemWithTooltip) => { + context.report({ + node, + message: `The "tooltip" property has been removed from ActionsColumn's "item" prop interface. Instead a "content" property should be passed into the "tooltipProps" property of the "items" interface.`, + fix(fixer) { + const fixes = []; + const tooltipProperty = itemWithTooltip.properties.find( + (property) => property.key.name === "tooltip" + ); + const tooltipPropValue = + getTooltipPropValue(tooltipProperty); + const tooltipPropsProperty = + itemWithTooltip.properties.find( + (property) => property.key.name === "tooltipProps" + ); + const tooltipPropsContent = + tooltipPropsProperty?.value?.properties?.find( + (prop) => prop?.key?.name === "content" + ); + + if (tooltipPropsProperty && !tooltipPropsContent) { + fixes.push( + fixer.insertTextBefore( + tooltipPropsProperty.value.properties[0], + `content: ${tooltipPropValue}, ` + ) + ); + + const tooltipPropertyHasComma = + context.getSourceCode().getTokenAfter(tooltipProperty) + .value === ","; + const { range } = tooltipProperty; + fixes.push( + fixer.removeRange([ + range[0], + tooltipPropertyHasComma ? range[1] + 1 : range[1], + ]) + ); + } else if (!tooltipPropsProperty && tooltipProperty) { + fixes.push( + fixer.replaceText( + tooltipProperty, + `tooltipProps: { content: ${tooltipPropValue} }` + ) + ); + } + + return fixes; + }, + }); + }); + } + }, + }; + }, +}; diff --git a/packages/eslint-plugin-pf-codemods/test/rules/v5/tableActionsColumn-removed-tooltipProp.js b/packages/eslint-plugin-pf-codemods/test/rules/v5/tableActionsColumn-removed-tooltipProp.js new file mode 100644 index 000000000..4d48bb274 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/test/rules/v5/tableActionsColumn-removed-tooltipProp.js @@ -0,0 +1,82 @@ +const ruleTester = require("../../ruletester"); +const rule = require("../../../lib/rules/v5/tableActionsColumn-removed-tooltipProp"); + +ruleTester.run("tableActionsColumn-removed-tooltipProp", rule, { + valid: [ + { + code: ``, + }, + // No @patternfly/react-table import + { + code: ``, + }, + ], + invalid: [ + // No existing tooltipProps prop + { + code: `import { ActionsColumn } from '@patternfly/react-table'; `, + output: `import { ActionsColumn } from '@patternfly/react-table'; `, + errors: [ + { + message: `The "tooltip" property has been removed from ActionsColumn's "item" prop interface. Instead a "content" property should be passed into the "tooltipProps" property of the "items" interface.`, + type: "JSXOpeningElement", + }, + ], + }, + // Pre-existing tooltipProps prop + { + code: `import { ActionsColumn } from '@patternfly/react-table'; `, + output: `import { ActionsColumn } from '@patternfly/react-table'; `, + errors: [ + { + message: `The "tooltip" property has been removed from ActionsColumn's "item" prop interface. Instead a "content" property should be passed into the "tooltipProps" property of the "items" interface.`, + type: "JSXOpeningElement", + }, + ], + }, + // Variable identifier + { + code: `import { ActionsColumn } from '@patternfly/react-table'; const actionItems = [{tooltip: "test"}]; `, + output: `import { ActionsColumn } from '@patternfly/react-table'; const actionItems = [{tooltipProps: { content: "test" }}]; `, + errors: [ + { + message: `The "tooltip" property has been removed from ActionsColumn's "item" prop interface. Instead a "content" property should be passed into the "tooltipProps" property of the "items" interface.`, + type: "JSXOpeningElement", + }, + ], + }, + // Arrow function identifier + { + code: `import { ActionsColumn } from '@patternfly/react-table'; const actionItems = () => [{tooltip: "test"}]; `, + output: `import { ActionsColumn } from '@patternfly/react-table'; const actionItems = () => [{tooltipProps: { content: "test" }}]; `, + errors: [ + { + message: `The "tooltip" property has been removed from ActionsColumn's "item" prop interface. Instead a "content" property should be passed into the "tooltipProps" property of the "items" interface.`, + type: "JSXOpeningElement", + }, + ], + }, + // Variable for tooltip prop value + { + code: `import { ActionsColumn } from '@patternfly/react-table'; const tooltipContet = 'test'; `, + output: `import { ActionsColumn } from '@patternfly/react-table'; const tooltipContet = 'test'; `, + errors: [ + { + message: `The "tooltip" property has been removed from ActionsColumn's "item" prop interface. Instead a "content" property should be passed into the "tooltipProps" property of the "items" interface.`, + type: "JSXOpeningElement", + }, + ], + }, + // JSXElement for tooltip prop value + { + code: `import { ActionsColumn } from '@patternfly/react-table'; Test}]} />`, + output: `import { ActionsColumn } from '@patternfly/react-table'; Test }}]} />`, + errors: [ + { + message: `The "tooltip" property has been removed from ActionsColumn's "item" prop interface. Instead a "content" property should be passed into the "tooltipProps" property of the "items" interface.`, + type: "JSXOpeningElement", + }, + ], + }, + ], +}); diff --git a/packages/pf-codemods/README.md b/packages/pf-codemods/README.md index cbcf7b92e..485a6b980 100644 --- a/packages/pf-codemods/README.md +++ b/packages/pf-codemods/README.md @@ -1268,6 +1268,20 @@ const myVariant = EmptyStateVariant.sm; ``` +### Examples + +In: + +```tsx +import { Dropdown } from '@patternfly/react-core/next'; +``` + +Out: + +```tsx +import { Dropdown /* data-codemods */ } from '@patternfly/react-core'; +``` + ### expandable-section-rename-displaySize-large [(#8206)](https://github.com/patternfly/patternfly-react/pull/8206) We've renamed the `large` prop value of `displaySize` to `lg`. @@ -2020,20 +2034,6 @@ The placement Nav flyouts in the DOM has been changed, if you have Nav elements We've promoted the "Next" implementations of our Dropdown, Select, and Wizard components and they are now our default implementation. This rule will update import and/or export paths. -### Examples - -In: - -```tsx -import { Dropdown } from '@patternfly/react-core/next'; -``` - -Out: - -```tsx -import { Dropdown /* data-codemods */ } from '@patternfly/react-core'; -``` - ### no-unused-imports-v5 This rule, when run with `--fix` option, removes all unused imports from `patternfly/react` packages. It is a cleanup rule which will run after all the rules. @@ -2855,6 +2855,39 @@ Table and TableComposable's `ActionsColumn` has been updated to use our new impl `collapseAllAriaLabel` on `ThExpandType` has been updated to a `string` from `''`. Workarounds casting this property to an empty string are no longer required. +### tableActionsColumn-removed-tooltipProp [(#9382)](https://github.com/patternfly/patternfly-react/pull/9382) + +The "tooltip" property has been removed from ActionsColumn's "item" prop interface. Instead a "content" property should be passed into the "tooltipProps" property of the "items" interface. + +#### Examples + +In: + +```jsx + + + +const actionItems = [{tooltip: "test"}]; + + +const actionItems = () => [{tooltip: "test"}]; + +``` + +Out: + +```jsx + + + +const actionItems = [{tooltipProps: { content: "test" }}]; + + +const actionItems = () => [{tooltipProps: { content: "test" }}]; + +``` + + ### tableComposable-remove-hasSelectableRowCaption [(#8352)](https://github.com/patternfly/patternfly-react/pull/8352) We've removed the deprecated `hasSelectableRowCaption` prop.