feat(component groups): rename various components (#776)

* feat(renameComponents helper): rename node when default import matches component name * feat(dataCodemodsCleanup): include component-groups package * feat(codemod): rename ContentHeader to PageHeader * feat(codemod): rename InvalidObject to MissingPage * feat(codemod): rename NotAuthorized to UnauthorizedAccess
patternfly · Sep 24, 2024 · aa1d152 · aa1d152
1 parent 57f41a2
commit aa1d152
Show file tree

Hide file tree

Showing 21 changed files with 511 additions and 160 deletions.
diff --git a/packages/eslint-plugin-pf-codemods/src/rules/helpers/renameComponent.ts b/packages/eslint-plugin-pf-codemods/src/rules/helpers/renameComponent.ts
@@ -49,7 +49,17 @@ function getFixes(
     );
   }
 
-  const shouldRenameNode =
+  let shouldRenameNode = false;
+
+  if (
+    nodeImport.type === "ImportDefaultSpecifier" &&
+    nodeImport.local.name === oldName
+  ) {
+    shouldRenameNode = true;
+    fixes.push(fixer.replaceText(nodeImport, newName));
+  }
+
+  shouldRenameNode ||=
     isNamedImport && nodeImport.imported.name === nodeImport.local.name;
 
   if (shouldRenameNode) {

diff --git a/...HeaderRenameToPageHeader/component-groups-contentHeader-rename-to-pageHeader.md b/...HeaderRenameToPageHeader/component-groups-contentHeader-rename-to-pageHeader.md
@@ -0,0 +1,18 @@
+### component-groups-contentHeader-rename-to-pageHeader [(react-component-groups/#313)](https://github.com/patternfly/react-component-groups/pull/313)
+
+In react-component-groups, we've renamed ContentHeader component to PageHeader
+
+#### Examples
+
+In:
+
+```jsx
+%inputExample%
+```
+
+Out:
+
+```jsx
+%outputExample%
+```
+
diff --git a/...ntentHeaderRenameToPageHeader/component-groups-contentHeader-rename-to-pageHeader.test.ts b/...ntentHeaderRenameToPageHeader/component-groups-contentHeader-rename-to-pageHeader.test.ts
@@ -0,0 +1,57 @@
+const ruleTester = require("../../ruletester");
+import * as rule from "./component-groups-contentHeader-rename-to-pageHeader";
+
+const errors = [
+  {
+    message: `ContentHeader has been renamed to PageHeader.`,
+    type: "JSXOpeningElement",
+  },
+];
+
+ruleTester.run("component-groups-contentHeader-rename-to-pageHeader", rule, {
+  valid: [
+    // missing import
+    {
+      code: `<ContentHeader />`,
+    },
+    // import from wrong package
+    {
+      code: `import { ContentHeader } from '@patternfly/react-core'; <ContentHeader />`,
+    },
+  ],
+  invalid: [
+    {
+      code: `import { ContentHeader } from '@patternfly/react-component-groups'; <ContentHeader />`,
+      output: `import { PageHeader } from '@patternfly/react-component-groups'; <PageHeader data-codemods />`,
+      errors,
+    },
+    // named import with alias
+    {
+      code: `import { ContentHeader as Header } from '@patternfly/react-component-groups'; <Header />`,
+      output: `import { PageHeader as Header } from '@patternfly/react-component-groups'; <Header />`,
+      errors,
+    },
+    // default imports
+    {
+      code: `import ContentHeader from '@patternfly/react-component-groups/dist/cjs/ContentHeader/index'; <ContentHeader />`,
+      output: `import PageHeader from '@patternfly/react-component-groups/dist/cjs/PageHeader/index'; <PageHeader data-codemods />`,
+      errors,
+    },
+    {
+      code: `import ContentHeader from '@patternfly/react-component-groups/dist/esm/ContentHeader/index'; <ContentHeader />`,
+      output: `import PageHeader from '@patternfly/react-component-groups/dist/esm/PageHeader/index'; <PageHeader data-codemods />`,
+      errors,
+    },
+    {
+      code: `import ContentHeader from '@patternfly/react-component-groups/dist/dynamic/ContentHeader'; <ContentHeader />`,
+      output: `import PageHeader from '@patternfly/react-component-groups/dist/dynamic/PageHeader'; <PageHeader data-codemods />`,
+      errors,
+    },
+    // default import with name not matching the component name
+    {
+      code: `import Header from '@patternfly/react-component-groups/dist/dynamic/ContentHeader'; <Header />`,
+      output: `import Header from '@patternfly/react-component-groups/dist/dynamic/PageHeader'; <Header />`,
+      errors,
+    },
+  ],
+});
diff --git a/...upsContentHeaderRenameToPageHeader/component-groups-contentHeader-rename-to-pageHeader.ts b/...upsContentHeaderRenameToPageHeader/component-groups-contentHeader-rename-to-pageHeader.ts
@@ -0,0 +1,12 @@
+import { renameComponent } from "../../helpers/renameComponent";
+
+// https://github.com/patternfly/react-component-groups/pull/313
+module.exports = {
+  meta: { fixable: "code" },
+  create: renameComponent(
+    {
+      ContentHeader: "PageHeader",
+    },
+    "@patternfly/react-component-groups"
+  ),
+};
diff --git a/...psContentHeaderRenameToPageHeader/componentGroupsContentHeaderRenameToPageHeaderInput.tsx b/...psContentHeaderRenameToPageHeader/componentGroupsContentHeaderRenameToPageHeaderInput.tsx
@@ -0,0 +1,5 @@
+import { ContentHeader } from "@patternfly/react-component-groups";
+
+export const ComponentGroupsContentHeaderRenameToPageHeaderInput = () => (
+  <ContentHeader />
+);
diff --git a/...sContentHeaderRenameToPageHeader/componentGroupsContentHeaderRenameToPageHeaderOutput.tsx b/...sContentHeaderRenameToPageHeader/componentGroupsContentHeaderRenameToPageHeaderOutput.tsx
@@ -0,0 +1,5 @@
+import { PageHeader } from "@patternfly/react-component-groups";
+
+export const ComponentGroupsContentHeaderRenameToPageHeaderInput = () => (
+  <PageHeader data-codemods />
+);
diff --git a/...mponentGroupsInvalidObjectRenameProps/component-groups-invalidObject-rename-props.test.ts b/...mponentGroupsInvalidObjectRenameProps/component-groups-invalidObject-rename-props.test.ts
@@ -6,88 +6,99 @@ const renameMap = {
   invalidObjectBodyText: "bodyText",
 };
 
-const errors = Object.entries(renameMap).map(([oldName, newName]) => ({
-  message: `The ${oldName} prop for InvalidObject has been renamed to ${newName}.`,
-  type: "JSXOpeningElement",
-}));
+const getErrors = (component: string) =>
+  Object.entries(renameMap).map(([oldName, newName]) => ({
+    message: `The ${oldName} prop for ${component} has been renamed to ${newName}.`,
+    type: "JSXOpeningElement",
+  }));
 
-ruleTester.run("component-groups-invalidObject-rename-props", rule, {
-  valid: [
+const components = ["InvalidObject", "MissingPage"];
+
+const valid = components
+  .map((component) => [
     {
-      code: `<InvalidObject invalidObjectTitleText="" />`,
+      code: `<${component} invalidObjectTitleText="" />`,
     },
     {
-      code: `<InvalidObject invalidObjectBodyText="" />`,
+      code: `<${component} invalidObjectBodyText="" />`,
     },
     {
-      code: `import { InvalidObject } from '@patternfly/react-component-groups'; <InvalidObject someOtherProp />`,
+      code: `import { ${component} } from '@patternfly/react-component-groups'; <${component} someOtherProp />`,
     },
-  ],
-  invalid: [
+  ])
+  .flat();
+
+const invalid = components
+  .map((component) => [
     {
-      code: `import { InvalidObject } from '@patternfly/react-component-groups';
-      <InvalidObject
-        invalidObjectTitleText="Sample title text"
-        invalidObjectBodyText="Sample body text"
-      />`,
-      output: `import { InvalidObject } from '@patternfly/react-component-groups';
-      <InvalidObject
-        titleText="Sample title text"
-        bodyText="Sample body text"
-      />`,
-      errors,
+      code: `import { ${component} } from '@patternfly/react-component-groups';
+    <${component}
+      invalidObjectTitleText="Sample title text"
+      invalidObjectBodyText="Sample body text"
+    />`,
+      output: `import { ${component} } from '@patternfly/react-component-groups';
+    <${component}
+      titleText="Sample title text"
+      bodyText="Sample body text"
+    />`,
+      errors: getErrors(component),
     },
     {
-      code: `import InvalidObject from '@patternfly/react-component-groups/dist/cjs/InvalidObject/index';
-      <InvalidObject
-        invalidObjectTitleText="Sample title text"
-        invalidObjectBodyText="Sample body text"
-      />`,
-      output: `import InvalidObject from '@patternfly/react-component-groups/dist/cjs/InvalidObject/index';
-      <InvalidObject
-        titleText="Sample title text"
-        bodyText="Sample body text"
-      />`,
-      errors,
+      code: `import ${component} from '@patternfly/react-component-groups/dist/cjs/${component}/index';
+    <${component}
+      invalidObjectTitleText="Sample title text"
+      invalidObjectBodyText="Sample body text"
+    />`,
+      output: `import ${component} from '@patternfly/react-component-groups/dist/cjs/${component}/index';
+    <${component}
+      titleText="Sample title text"
+      bodyText="Sample body text"
+    />`,
+      errors: getErrors(component),
     },
     {
-      code: `import InvalidObject from '@patternfly/react-component-groups/dist/esm/InvalidObject/index';
-      <InvalidObject
-        invalidObjectTitleText="Sample title text"
-        invalidObjectBodyText="Sample body text"
-      />`,
-      output: `import InvalidObject from '@patternfly/react-component-groups/dist/esm/InvalidObject/index';
-      <InvalidObject
-        titleText="Sample title text"
-        bodyText="Sample body text"
-      />`,
-      errors,
+      code: `import ${component} from '@patternfly/react-component-groups/dist/esm/${component}/index';
+    <${component}
+      invalidObjectTitleText="Sample title text"
+      invalidObjectBodyText="Sample body text"
+    />`,
+      output: `import ${component} from '@patternfly/react-component-groups/dist/esm/${component}/index';
+    <${component}
+      titleText="Sample title text"
+      bodyText="Sample body text"
+    />`,
+      errors: getErrors(component),
     },
     {
-      code: `import InvalidObject from '@patternfly/react-component-groups/dist/dynamic/InvalidObject';
-      <InvalidObject
-        invalidObjectTitleText="Sample title text"
-        invalidObjectBodyText="Sample body text"
-      />`,
-      output: `import InvalidObject from '@patternfly/react-component-groups/dist/dynamic/InvalidObject';
-      <InvalidObject
-        titleText="Sample title text"
-        bodyText="Sample body text"
-      />`,
-      errors,
+      code: `import ${component} from '@patternfly/react-component-groups/dist/dynamic/${component}';
+    <${component}
+      invalidObjectTitleText="Sample title text"
+      invalidObjectBodyText="Sample body text"
+    />`,
+      output: `import ${component} from '@patternfly/react-component-groups/dist/dynamic/${component}';
+    <${component}
+      titleText="Sample title text"
+      bodyText="Sample body text"
+    />`,
+      errors: getErrors(component),
     },
     {
-      code: `import InvObj from '@patternfly/react-component-groups/dist/dynamic/InvalidObject';
-      <InvObj
-        invalidObjectTitleText="Sample title text"
-        invalidObjectBodyText="Sample body text"
-      />`,
-      output: `import InvObj from '@patternfly/react-component-groups/dist/dynamic/InvalidObject';
-      <InvObj
-        titleText="Sample title text"
-        bodyText="Sample body text"
-      />`,
-      errors,
+      code: `import InvObj from '@patternfly/react-component-groups/dist/dynamic/${component}';
+    <InvObj
+      invalidObjectTitleText="Sample title text"
+      invalidObjectBodyText="Sample body text"
+    />`,
+      output: `import InvObj from '@patternfly/react-component-groups/dist/dynamic/${component}';
+    <InvObj
+      titleText="Sample title text"
+      bodyText="Sample body text"
+    />`,
+      errors: getErrors(component),
     },
-  ],
+  ])
+  .flat();
+
+ruleTester.run("component-groups-invalidObject-rename-props", rule, {
+  valid,
+  invalid,
 });
diff --git a/...v6/componentGroupsInvalidObjectRenameProps/component-groups-invalidObject-rename-props.ts b/...v6/componentGroupsInvalidObjectRenameProps/component-groups-invalidObject-rename-props.ts
@@ -3,20 +3,27 @@ import { Renames } from "../../helpers/renameSinglePropOnNode";
 
 // https://github.com/patternfly/react-component-groups/pull/145
 
-const formatMessage = (oldPropName: string, newPropName: string) =>
-  `The ${oldPropName} prop for InvalidObject has been renamed to ${newPropName}.`;
+const formatMessage = (
+  component: string,
+  oldPropName: string,
+  newPropName: string
+) =>
+  `The ${oldPropName} prop for ${component} has been renamed to ${newPropName}.`;
 
-const renames: Renames = {
-  InvalidObject: {
-    invalidObjectTitleText: {
-      newName: "titleText",
-      message: formatMessage("invalidObjectTitleText", "titleText"),
-    },
-    invalidObjectBodyText: {
-      newName: "bodyText",
-      message: formatMessage("invalidObjectBodyText", "bodyText"),
-    },
+const getPropsRenames = (component: string) => ({
+  invalidObjectTitleText: {
+    newName: "titleText",
+    message: formatMessage(component, "invalidObjectTitleText", "titleText"),
+  },
+  invalidObjectBodyText: {
+    newName: "bodyText",
+    message: formatMessage(component, "invalidObjectBodyText", "bodyText"),
   },
+});
+
+const renames: Renames = {
+  InvalidObject: getPropsRenames("InvalidObject"),
+  MissingPage: getPropsRenames("MissingPage"),
 };
 
 module.exports = {

diff --git a/...jectRenameToMissingPage/component-groups-invalidObject-rename-to-missingPage.md b/...jectRenameToMissingPage/component-groups-invalidObject-rename-to-missingPage.md
@@ -0,0 +1,18 @@
+### component-groups-invalidObject-rename-to-missingPage [(react-component-groups/#313)](https://github.com/patternfly/react-component-groups/pull/313)
+
+In react-component-groups, we've renamed InvalidObject component to MissingPage
+
+#### Examples
+
+In:
+
+```jsx
+%inputExample%
+```
+
+Out:
+
+```jsx
+%outputExample%
+```
+