fix(LoginPage): updated markup for LoginMainHeader (#752)

* fix(LoginPage): updated markup for LoginMainHeader

* Added description to importdec matches helper

* PR feedback

* Updated import declaration to return boolean

---------

Co-authored-by: adamviktora <[email protected]>

packages/eslint-plugin-pf-codemods/src/ruleCustomization.ts

@@ -27,6 +27,7 @@ export const warningRules = [
   "horizontalSubnav-warn-ariaLabel",
   "jumpLinksItem-warn-markup-change",
   "label-warn-truncated-default",
+  "loginMainHeader-warn-updated-markup",
   "logViewer-moved-styles",
   "menuItemAction-warn-update-markup",
   "menuToggle-warn-iconOnly-toggle",

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

@@ -24,7 +24,8 @@ export * from "./interfaces";
 export * from "./isReactIcon";
 export * from "./JSXAttributes";
 export * from "./makeJSXElementSelfClosing";
-export * from "./nodeMatches";
+export * from "./nodeMatches/checkMatchingImportDeclaration";
+export * from "./nodeMatches/checkMatchingJSXOpeningElement";
 export * from "./pfPackageMatches";
 export * from "./removeElement";
 export * from "./removeEmptyLineAfter";

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

@@ -0,0 +1,30 @@
+import { ImportDeclaration, ImportSpecifier } from "estree-jsx";
+import { pfPackageMatches } from "../pfPackageMatches";
+
+function checkSpecifierExists(
+  node: ImportDeclaration,
+  importSpecifier: ImportSpecifier
+) {
+  return node.specifiers.some(
+    (specifier) =>
+      specifier.type === "ImportSpecifier" &&
+      specifier.imported.name === importSpecifier.imported.name
+  );
+}
+
+/** Used to check whether the current ImportDeclaration node matches at least 1 of the import specifiers. */
+export function checkMatchingImportDeclaration(
+  node: ImportDeclaration,
+  imports: ImportSpecifier | ImportSpecifier[],
+  packageName: string = "@patternfly/react-core"
+) {
+  if (!pfPackageMatches(packageName, node.source.value)) {
+    return false;
+  }
+
+  if (Array.isArray(imports)) {
+    return imports.some((imp) => checkSpecifierExists(node, imp));
+  }
+
+  return checkSpecifierExists(node, imports);
+}

packages/eslint-plugin-pf-codemods/src/rules/helpers/nodeMatches.ts → packages/eslint-plugin-pf-codemods/src/rules/helpers/nodeMatches/checkMatchingJSXOpeningElement.ts

@@ -4,6 +4,7 @@ import {
   ImportDefaultSpecifier,
 } from "estree-jsx";
 
+/** Used to check whether the current JSXOpeningElement node matches at least 1 of the import specifiers. */
 export function checkMatchingJSXOpeningElement(
   node: JSXOpeningElement,
   imports:

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

@@ -1,5 +1,6 @@
 import { ImportDeclaration } from "estree-jsx";
 
+// TODO: Swap the params so that packageName has a default value of pf/react-core and can be optional
 export function pfPackageMatches(
   packageName: string,
   nodeSrc: ImportDeclaration["source"]["value"]

packages/eslint-plugin-pf-codemods/src/rules/v6/loginMainHeaderWarnUpdatedMarkup/loginMainHeader-warn-updated-markup.md

@@ -0,0 +1,3 @@
+### loginMainHeader-warn-updated-markup [(#10880)](https://github.com/patternfly/patternfly-react/pull/10880)
+
+The markup for LoginMainHeader - which is used internally within LoginPage - has been updated, now using a `div` wrapper instead of a `header` element wrapper.

packages/eslint-plugin-pf-codemods/src/rules/v6/loginMainHeaderWarnUpdatedMarkup/loginMainHeader-warn-updated-markup.test.ts

@@ -0,0 +1,91 @@
+const ruleTester = require("../../ruletester");
+import * as rule from "./loginMainHeader-warn-updated-markup";
+
+ruleTester.run("loginMainHeader-warn-updated-markup", rule, {
+  valid: [
+    {
+      code: `<LoginMainHeader />`,
+    },
+    {
+      code: `import { LoginMainHeader } from 'somewhere-else'`,
+    },
+    {
+      code: `<LoginPage />`,
+    },
+    {
+      code: `import { LoginPage } from 'somewhere-else'`,
+    },
+  ],
+  invalid: [
+    {
+      code: `import { LoginMainHeader } from '@patternfly/react-core';`,
+      output: `import { LoginMainHeader } from '@patternfly/react-core';`,
+      errors: [
+        {
+          message: `The markup for LoginMainHeader has been updated, now using a div wrapper instead of a header element wrapper.`,
+          type: "ImportDeclaration",
+        },
+      ],
+    },
+    {
+      code: `import { LoginPage } from '@patternfly/react-core';`,
+      output: `import { LoginPage } from '@patternfly/react-core';`,
+      errors: [
+        {
+          message: `The markup for LoginMainHeader (which is used internally within LoginPage) has been updated, now using a div wrapper instead of a header element wrapper.`,
+          type: "ImportDeclaration",
+        },
+      ],
+    },
+    {
+      code: `import { LoginPage, LoginMainHeader, Button } from '@patternfly/react-core';`,
+      output: `import { LoginPage, LoginMainHeader, Button } from '@patternfly/react-core';`,
+      errors: [
+        {
+          message: `The markup for LoginMainHeader (which is used internally within LoginPage) has been updated, now using a div wrapper instead of a header element wrapper.`,
+          type: "ImportDeclaration",
+        },
+      ],
+    },
+    {
+      code: `import { LoginMainHeader as CustomThing } from '@patternfly/react-core';`,
+      output: `import { LoginMainHeader as CustomThing } from '@patternfly/react-core';`,
+      errors: [
+        {
+          message: `The markup for LoginMainHeader has been updated, now using a div wrapper instead of a header element wrapper.`,
+          type: "ImportDeclaration",
+        },
+      ],
+    },
+    {
+      code: `import { LoginMainHeader } from '@patternfly/react-core/dist/esm/components/LoginPage/index.js';`,
+      output: `import { LoginMainHeader } from '@patternfly/react-core/dist/esm/components/LoginPage/index.js';`,
+      errors: [
+        {
+          message: `The markup for LoginMainHeader has been updated, now using a div wrapper instead of a header element wrapper.`,
+          type: "ImportDeclaration",
+        },
+      ],
+    },
+    {
+      code: `import { LoginMainHeader } from '@patternfly/react-core/dist/js/components/LoginPage/index.js';`,
+      output: `import { LoginMainHeader } from '@patternfly/react-core/dist/js/components/LoginPage/index.js';`,
+      errors: [
+        {
+          message: `The markup for LoginMainHeader has been updated, now using a div wrapper instead of a header element wrapper.`,
+          type: "ImportDeclaration",
+        },
+      ],
+    },
+    {
+      code: `import { LoginMainHeader } from '@patternfly/react-core/dist/dynamic/components/LoginPage/index.js';`,
+      output: `import { LoginMainHeader } from '@patternfly/react-core/dist/dynamic/components/LoginPage/index.js';`,
+      errors: [
+        {
+          message: `The markup for LoginMainHeader has been updated, now using a div wrapper instead of a header element wrapper.`,
+          type: "ImportDeclaration",
+        },
+      ],
+    },
+  ],
+});

packages/eslint-plugin-pf-codemods/src/rules/v6/loginMainHeaderWarnUpdatedMarkup/loginMainHeader-warn-updated-markup.ts

@@ -0,0 +1,35 @@
+import { Rule } from "eslint";
+import { ImportDeclaration } from "estree-jsx";
+import { getFromPackage, checkMatchingImportDeclaration } from "../../helpers";
+
+// https://github.com/patternfly/patternfly-react/pull/10880
+module.exports = {
+  meta: {},
+  create: function (context: Rule.RuleContext) {
+    const basePackage = "@patternfly/react-core";
+    const { imports: loginImports } = getFromPackage(context, basePackage, [
+      "LoginPage",
+      "LoginMainHeader",
+    ]);
+
+    return !loginImports.length
+      ? {}
+      : {
+          ImportDeclaration(node: ImportDeclaration) {
+            if (checkMatchingImportDeclaration(node, loginImports)) {
+              const hasLoginPageImport = loginImports.find(
+                (imp) => imp.imported.name === "LoginPage"
+              );
+              context.report({
+                node,
+                message: `The markup for LoginMainHeader${
+                  hasLoginPageImport
+                    ? " (which is used internally within LoginPage)"
+                    : ""
+                } has been updated, now using a div wrapper instead of a header element wrapper.`,
+              });
+            }
+          },
+        };
+  },
+};

packages/eslint-plugin-pf-codemods/src/rules/v6/loginMainHeaderWarnUpdatedMarkup/loginMainHeaderWarnUpdatedMarkupInput.tsx

@@ -0,0 +1,8 @@
+import { LoginMainHeader, LoginPage } from "@patternfly/react-core";
+
+export const LoginMainHeaderWarnUpdatedMarkupInput = () => (
+  <>
+    <LoginPage />
+    <LoginMainHeader />
+  </>
+);

packages/eslint-plugin-pf-codemods/src/rules/v6/loginMainHeaderWarnUpdatedMarkup/loginMainHeaderWarnUpdatedMarkupOutput.tsx

@@ -0,0 +1,8 @@
+import { LoginMainHeader, LoginPage } from "@patternfly/react-core";
+
+export const LoginMainHeaderWarnUpdatedMarkupInput = () => (
+  <>
+    <LoginPage />
+    <LoginMainHeader />
+  </>
+);