-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore(ActionsColumn): removed tooltip prop
- Loading branch information
1 parent
dab41ef
commit 689501c
Showing
3 changed files
with
260 additions
and
14 deletions.
There are no files selected for viewing
131 changes: 131 additions & 0 deletions
131
packages/eslint-plugin-pf-codemods/lib/rules/v5/tableActionsColumn-removed-tooltipProp.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
}, | ||
}); | ||
}); | ||
} | ||
}, | ||
}; | ||
}, | ||
}; |
82 changes: 82 additions & 0 deletions
82
packages/eslint-plugin-pf-codemods/test/rules/v5/tableActionsColumn-removed-tooltipProp.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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: `<ActionsColumn items={[{tooltipProps: {content: "test"}}]} />`, | ||
}, | ||
// No @patternfly/react-table import | ||
{ | ||
code: `<ActionsColumn items={[{tooltip: "test"}]} />`, | ||
}, | ||
], | ||
invalid: [ | ||
// No existing tooltipProps prop | ||
{ | ||
code: `import { ActionsColumn } from '@patternfly/react-table'; <ActionsColumn items={[{tooltip: "test"}]} />`, | ||
output: `import { ActionsColumn } from '@patternfly/react-table'; <ActionsColumn items={[{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", | ||
}, | ||
], | ||
}, | ||
// Pre-existing tooltipProps prop | ||
{ | ||
code: `import { ActionsColumn } from '@patternfly/react-table'; <ActionsColumn items={[{tooltip: "test", tooltipProps: {direction: "top"}}]} />`, | ||
output: `import { ActionsColumn } from '@patternfly/react-table'; <ActionsColumn items={[{ tooltipProps: {content: "test", direction: "top"}}]} />`, | ||
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"}]; <ActionsColumn items={actionItems} />`, | ||
output: `import { ActionsColumn } from '@patternfly/react-table'; const actionItems = [{tooltipProps: { content: "test" }}]; <ActionsColumn items={actionItems} />`, | ||
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"}]; <ActionsColumn items={actionItems} />`, | ||
output: `import { ActionsColumn } from '@patternfly/react-table'; const actionItems = () => [{tooltipProps: { content: "test" }}]; <ActionsColumn items={actionItems} />`, | ||
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'; <ActionsColumn items={[{tooltip: tooltipContent}]} />`, | ||
output: `import { ActionsColumn } from '@patternfly/react-table'; const tooltipContet = 'test'; <ActionsColumn items={[{tooltipProps: { content: tooltipContent }}]} />`, | ||
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'; <ActionsColumn items={[{tooltip: <div>Test</div>}]} />`, | ||
output: `import { ActionsColumn } from '@patternfly/react-table'; <ActionsColumn items={[{tooltipProps: { content: <div>Test</div> }}]} />`, | ||
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", | ||
}, | ||
], | ||
}, | ||
], | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters