chore(EmptyState): Address PR feedback

patternfly · Feb 27, 2024 · 016ba54 · 016ba54
1 parent b51fa4b
commit 016ba54
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 25 deletions.
diff --git a/.../v6/emptyStateHeaderMoveIntoEmptyState/emptyStateHeader-move-into-emptyState.md b/.../v6/emptyStateHeaderMoveIntoEmptyState/emptyStateHeader-move-into-emptyState.md
@@ -1,6 +1,8 @@
 ### emptyStateHeader-move-into-emptyState [(#9947)](https://github.com/patternfly/patternfly-react/pull/9947)
 
-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.
+EmptyStateHeader and EmptyStateIcon are now rendered internally within EmptyState and should only be customized using props. Content passed to the `icon` prop on EmptyState will also be wrapped by EmptyStateIcon automatically.
+
+Additionally, the `titleText` prop is now required on EmptyState.
 
 #### Examples
 

diff --git a/...rules/v6/emptyStateHeaderMoveIntoEmptyState/emptyStateHeader-move-into-emptyState.test.ts b/...rules/v6/emptyStateHeaderMoveIntoEmptyState/emptyStateHeader-move-into-emptyState.test.ts
@@ -148,6 +148,31 @@ ruleTester.run("emptyStateHeader-move-into-emptyState", rule, {
         },
       ],
     },
+    {
+      // without an EmptyStateHeader or titleText
+      code: `import { EmptyState } from "@patternfly/react-core";
+      
+      export const EmptyStateHeaderMoveIntoEmptyStateInput = () => (
+        <EmptyState>
+          Foo bar
+        </EmptyState>
+      );
+      `,
+      output: `import { EmptyState } from "@patternfly/react-core";
+      
+      export const EmptyStateHeaderMoveIntoEmptyStateInput = () => (
+        <EmptyState>
+          Foo bar
+        </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. You must manually supply a titleText prop.`,
+          type: "JSXElement",
+        },
+      ],
+    },
     {
       // with both titleText and children
       code: `import {

diff --git a/.../src/rules/v6/emptyStateHeaderMoveIntoEmptyState/emptyStateHeader-move-into-emptyState.ts b/.../src/rules/v6/emptyStateHeaderMoveIntoEmptyState/emptyStateHeader-move-into-emptyState.ts
@@ -4,10 +4,7 @@ import {
   ImportDeclaration,
   ImportSpecifier,
   JSXAttribute,
-  Literal,
   Node,
-  Expression,
-  ClassExpression,
   JSXText,
   JSXExpressionContainer,
   JSXSpreadChild,
@@ -25,24 +22,24 @@ module.exports = {
     const pkg = "@patternfly/react-core";
     const { imports } = getFromPackage(context, pkg);
 
-    function allOfType(nodes: Node[], type: string) {
-      return nodes.every((specifier) => specifier.type === type);
-    }
+    const allOfType = (nodes: Node[], type: string) =>
+      nodes.every((specifier) => specifier.type === type);
 
     const includesImport = (
       arr: ImportDeclaration["specifiers"],
       targetImport: string
-    ) =>
-      arr.some(
+    ) => {
+      if (!allOfType(arr, "ImportSpecifier")) {
+        return false;
+      }
+
+      return arr.some(
         (specifier) =>
-          allOfType(arr, "ImportSpecifier") &&
           (specifier as ImportSpecifier).imported.name === targetImport
       );
+    };
 
-    if (
-      !includesImport(imports, "EmptyStateHeader") ||
-      !includesImport(imports, "EmptyState")
-    ) {
+    if (!includesImport(imports, "EmptyState")) {
       return {};
     }
 
@@ -101,6 +98,10 @@ module.exports = {
         return value.value;
       }
 
+      if (value.type === "JSXExpressionContainer") {
+        return context.getSourceCode().getText(value.expression);
+      }
+
       return "";
     };
 
@@ -135,20 +136,21 @@ module.exports = {
     };
 
     return {
-      ImportDeclaration(node: ImportDeclaration) {
-        if (
-          !pfPackageMatches(pkg, node.source.value) ||
-          !includesImport(node.specifiers, "EmptyStateHeader")
-        ) {
-          return;
-        }
-      },
       JSXElement(node: JSXElement) {
         if (!isComponentNode(node, "EmptyState")) {
           return;
         }
 
         const header = getChildElementByName("EmptyStateHeader", node);
+        const emptyStateTitleTextAttribute = getAttribute(node, "titleText");
+
+        if (!header && !emptyStateTitleTextAttribute) {
+          context.report({
+            node,
+            message: `${baseMessage} You must manually supply a titleText prop to EmptyState.`,
+          });
+          return;
+        }
 
         if (!header || header.type !== "JSXElement") {
           return;
@@ -165,7 +167,7 @@ module.exports = {
         if (!titleTextAttribute && !headerChildren.length) {
           context.report({
             node,
-            message: `${baseMessage} You must manually supply a titleText prop, then you can rerun this codemod.`,
+            message: `${baseMessage} You must manually supply a titleText prop to EmptyState, then you can rerun this codemod.`,
           });
           return;
         }
@@ -202,8 +204,12 @@ module.exports = {
           emptyStateIconComponent &&
           getAttribute(emptyStateIconComponent, "icon");
 
-        const emptyStateIconComponentColorAttribute = emptyStateIconComponent && getAttribute(emptyStateIconComponent, "color");
-        const emptyStateIconComponentColor = getAttributeText(emptyStateIconComponentColorAttribute);
+        const emptyStateIconComponentColorAttribute =
+          emptyStateIconComponent &&
+          getAttribute(emptyStateIconComponent, "color");
+        const emptyStateIconComponentColor = getAttributeText(
+          emptyStateIconComponentColorAttribute
+        );
 
         if (emptyStateIconComponentColor) {
           context.report({