refactor(EmptyState): extract helpers, fix(EmptyState): getElementChildText fix

packages/eslint-plugin-pf-codemods/src/rules/helpers/JSXAttributes.ts

@@ -0,0 +1,18 @@
+import { JSXElement, JSXAttribute } from "estree-jsx";
+
+export function getAttribute(node: JSXElement, attributeName: string) {
+  const attributes = node.openingElement.attributes.filter(
+    (attr) => attr.type === "JSXAttribute"
+  ) as JSXAttribute[];
+  return attributes.find((attr) => attr.name.name === attributeName);
+}
+
+export function getExpression(node?: JSXAttribute["value"]) {
+  if (!node) {
+    return;
+  }
+
+  if (node.type === "JSXExpressionContainer") {
+    return node.expression;
+  }
+}

packages/eslint-plugin-pf-codemods/src/rules/helpers/JSXElements.ts

@@ -0,0 +1,18 @@
+import { JSXElement } from "estree-jsx";
+
+export function getChildElementByName(node: JSXElement, name: string) {
+  return node.children?.find(
+    (child) =>
+      child.type === "JSXElement" &&
+      child.openingElement.name.type === "JSXIdentifier" &&
+      child.openingElement.name.name === name
+  ) as JSXElement | undefined;
+}
+
+export function nodeIsComponentNamed(node: JSXElement, componentName: string) {
+  if (node.openingElement.name.type === "JSXIdentifier") {
+    return node.openingElement.name.name === componentName;
+  }
+
+  return false;
+}

packages/eslint-plugin-pf-codemods/src/rules/helpers/getText.ts

@@ -0,0 +1,74 @@
+import { Rule } from "eslint";
+
+import {
+  JSXAttribute,
+  JSXElement,
+  JSXExpressionContainer,
+  JSXFragment,
+  Node,
+} from "estree-jsx";
+
+export function getAttributeText(
+  context: Rule.RuleContext,
+  attribute?: JSXAttribute
+) {
+  if (!attribute) {
+    return "";
+  }
+
+  return context.getSourceCode().getText(attribute);
+}
+
+export function getAttributeValueText(
+  context: Rule.RuleContext,
+  attribute?: JSXAttribute
+) {
+  if (!attribute || !attribute.value) {
+    return "";
+  }
+
+  return context.getSourceCode().getText(attribute.value);
+}
+
+export function getNodesText(context: Rule.RuleContext, nodes: Node[]) {
+  return nodes.map((node) => context.getSourceCode().getText(node)).join("");
+}
+
+export function getChildrenAsAttributeValueText(
+  context: Rule.RuleContext,
+  children: JSXElement["children"]
+) {
+  if (!children.length) {
+    return `""`;
+  }
+
+  // is a single text-only child
+  if (children.length === 1 && children[0].type === "JSXText") {
+    const childText = children[0].value.trim();
+
+    if (childText.includes(`"`)) {
+      return `{<>${childText}</>}`;
+    }
+
+    return `"${childText}"`;
+  }
+
+  const nonEmptyChildrenNodes = children.filter(
+    (child) => !(child.type === "JSXText" && child.value.trim() === "")
+  );
+
+  if (nonEmptyChildrenNodes.length === 1) {
+    const singleChild = nonEmptyChildrenNodes[0];
+    const singleChildText = context
+      .getSourceCode()
+      .getText(
+        singleChild as JSXExpressionContainer | JSXElement | JSXFragment
+      );
+
+    return singleChild.type === "JSXExpressionContainer"
+      ? singleChildText
+      : `{${singleChildText}}`;
+  }
+
+  return `{<>${getNodesText(context, children as Node[])}</>}`;
+}

packages/eslint-plugin-pf-codemods/src/rules/helpers/includesImport.ts

@@ -0,0 +1,10 @@
+import { ImportSpecifier } from "estree-jsx";
+
+export function includesImport(
+  importSpecifiers: ImportSpecifier[],
+  targetImport: string
+) {
+  return importSpecifiers.some(
+    (specifier) => specifier.imported.name === targetImport
+  );
+}

packages/eslint-plugin-pf-codemods/src/rules/helpers/index.ts

@@ -1,4 +1,8 @@
 export * from "./findAncestor";
 export * from "./helpers";
-export * from "./pfPackageMatches";
 export * from "./getFromPackage";
+export * from "./getText";
+export * from "./includesImport";
+export * from "./JSXAttributes";
+export * from "./JSXElements";
+export * from "./pfPackageMatches";

packages/eslint-plugin-pf-codemods/src/rules/v6/emptyStateHeaderMoveIntoEmptyState/emptyStateHeader-move-into-emptyState.test.ts

@@ -119,7 +119,7 @@ ruleTester.run("emptyStateHeader-move-into-emptyState", rule, {
       ],
     },
     {
-      // without any EmptyStateHeader props but with children
+      // without any EmptyStateHeader props but with children as text
       code: `import {
         EmptyState,
         EmptyStateHeader,
@@ -148,6 +148,112 @@ ruleTester.run("emptyStateHeader-move-into-emptyState", rule, {
         },
       ],
     },
+    {
+      // without any EmptyStateHeader props but with children as single JSXElement
+      code: `import {
+        EmptyState,
+        EmptyStateHeader,
+      } from "@patternfly/react-core";
+
+      export const EmptyStateHeaderMoveIntoEmptyStateInput = () => (
+        <EmptyState>
+          <EmptyStateHeader>
+            <h1>Foo bar</h1>
+          </EmptyStateHeader>
+        </EmptyState>
+      );
+      `,
+      output: `import {
+        EmptyState,
+        EmptyStateHeader,
+      } from "@patternfly/react-core";
+
+      export const EmptyStateHeaderMoveIntoEmptyStateInput = () => (
+        <EmptyState     titleText={<h1>Foo bar</h1>}>
+          </EmptyState>
+      );
+      `,
+      errors: [
+        {
+          message: `EmptyStateHeader has been moved inside of the EmptyState component and is now only customizable using props, and the EmptyStateIcon component now wraps content passed to the icon prop automatically. Additionally, the titleText prop is now required on EmptyState.`,
+          type: "JSXElement",
+        },
+      ],
+    },
+    {
+      // without any EmptyStateHeader props but with children as single JSXExpressionContainer
+      code: `import {
+        EmptyState,
+        EmptyStateHeader,
+      } from "@patternfly/react-core";
+
+      const title = "Some title";
+
+      export const EmptyStateHeaderMoveIntoEmptyStateInput = () => (
+        <EmptyState>
+          <EmptyStateHeader>
+            {title}
+          </EmptyStateHeader>
+        </EmptyState>
+      );
+      `,
+      output: `import {
+        EmptyState,
+        EmptyStateHeader,
+      } from "@patternfly/react-core";
+
+      const title = "Some title";
+
+      export const EmptyStateHeaderMoveIntoEmptyStateInput = () => (
+        <EmptyState     titleText={title}>
+          </EmptyState>
+      );
+      `,
+      errors: [
+        {
+          message: `EmptyStateHeader has been moved inside of the EmptyState component and is now only customizable using props, and the EmptyStateIcon component now wraps content passed to the icon prop automatically. Additionally, the titleText prop is now required on EmptyState.`,
+          type: "JSXElement",
+        },
+      ],
+    },
+    {
+      // without any EmptyStateHeader props but with children consisting of multiple elements
+      code: `import {
+        EmptyState,
+        EmptyStateHeader,
+      } from "@patternfly/react-core";
+
+      const title = "Some title";
+
+      export const EmptyStateHeaderMoveIntoEmptyStateInput = () => (
+        <EmptyState>
+          <EmptyStateHeader>
+            {title} followed by some text
+          </EmptyStateHeader>
+        </EmptyState>
+      );
+      `,
+      output: `import {
+        EmptyState,
+        EmptyStateHeader,
+      } from "@patternfly/react-core";
+
+      const title = "Some title";
+
+      export const EmptyStateHeaderMoveIntoEmptyStateInput = () => (
+        <EmptyState     titleText={<>
+            {title} followed by some text
+          </>}>
+          </EmptyState>
+      );
+      `,
+      errors: [
+        {
+          message: `EmptyStateHeader has been moved inside of the EmptyState component and is now only customizable using props, and the EmptyStateIcon component now wraps content passed to the icon prop automatically. Additionally, the titleText prop is now required on EmptyState.`,
+          type: "JSXElement",
+        },
+      ],
+    },
     {
       // without an EmptyStateHeader or titleText
       code: `import { EmptyState } from "@patternfly/react-core";