chore(ActionsColumn): removed tooltip prop (#535)

* chore(ActionsColumn): removed tooltip prop * Fix build error * Reverted dropdown Next example being moved * Updated valid test
patternfly · Jul 21, 2023 · 8d19341 · 8d19341
1 parent dab41ef
commit 8d19341
Show file tree

Hide file tree

Showing 3 changed files with 246 additions and 0 deletions.
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
@@ -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
@@ -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: `import { ActionsColumn } from '@patternfly/react-table'; <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",
+        },
+      ],
+    },
+  ],
+});
diff --git a/packages/pf-codemods/README.md b/packages/pf-codemods/README.md
@@ -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
+<ActionsColumn items={[{tooltip: "test"}]} />
+<ActionsColumn items={[{tooltip: "test", tooltipProps: {direction: "top"}}]} />
+
+const actionItems = [{tooltip: "test"}];
+<ActionsColumn items={actionItems} />
+
+const actionItems = () => [{tooltip: "test"}];
+<ActionsColumn items={actionItems} />
+```
+
+Out:
+
+```jsx
+<ActionsColumn items={[{tooltipProps: { content: "test" }}]} />
+<ActionsColumn items={[{ tooltipProps: {content: "test", direction: "top"}}]} />
+
+const actionItems = [{tooltipProps: { content: "test" }}];
+<ActionsColumn items={actionItems} />
+
+const actionItems = () => [{tooltipProps: { content: "test" }}];
+<ActionsColumn items={actionItems} />
+```
+
+
 ### tableComposable-remove-hasSelectableRowCaption [(#8352)](https://github.com/patternfly/patternfly-react/pull/8352)
 
 We've removed the deprecated `hasSelectableRowCaption` prop.