diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentBodyTextPropsUpdate/component-groups-unavailableContent-bodyText-props-update.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentBodyTextPropsUpdate/component-groups-unavailableContent-bodyText-props-update.md new file mode 100644 index 000000000..9746c9708 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentBodyTextPropsUpdate/component-groups-unavailableContent-bodyText-props-update.md @@ -0,0 +1,19 @@ +### component-groups-unavailableContent-bodyText-props-update [(react-component-groups/#244)](https://github.com/patternfly/react-component-groups/pull/244) + +In react-component-groups, we have replaced UnavailableContent's props `unavailableBodyPreStatusLinkText` and `unavailableBodyPostStatusLinkText` with one `bodyText` prop. +Also status page link button has changed to a primary button. Consider capitalizing the `statusPageLinkText` prop. + +#### Examples + +In: + +```jsx +%inputExample% +``` + +Out: + +```jsx +%outputExample% +``` + diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentBodyTextPropsUpdate/component-groups-unavailableContent-bodyText-props-update.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentBodyTextPropsUpdate/component-groups-unavailableContent-bodyText-props-update.test.ts new file mode 100644 index 000000000..67751f029 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentBodyTextPropsUpdate/component-groups-unavailableContent-bodyText-props-update.test.ts @@ -0,0 +1,140 @@ +const ruleTester = require("../../ruletester"); +import * as rule from "./component-groups-unavailableContent-bodyText-props-update"; + +const renameMessage = + "In react-component-groups, we have replaced UnavailableContent's props `unavailableBodyPreStatusLinkText` and `unavailableBodyPostStatusLinkText` with one `bodyText` prop."; +const statusPageMessage = + "In react-component-groups, UnavailableContent's status page link button has changed to a primary button. Consider capitalizing the `statusPageLinkText` prop."; + +const defaultPreStatusText = + "Try refreshing the page. If the problem persists, contact your organization administrator or visit our"; +const defaultPostStatusText = "for known outages."; +const defaultStatusText = "status page"; + +ruleTester.run("componentGroupsUnavailableContentBodyTextPropsUpdate", rule, { + valid: [ + { + code: ``, + }, + { + code: `import { UnavailableContent } from '@patternfly/react-component-groups'; `, + }, + // default import but folder not specified + { + code: `import UnavailableContent from '@patternfly/react-component-groups'; `, + }, + ], + invalid: [ + // with both pre and post status link text, default statusPageLinkText + { + code: `import { UnavailableContent } from '@patternfly/react-component-groups'; + `, + output: `import { UnavailableContent } from '@patternfly/react-component-groups'; + `, + errors: [ + { + message: renameMessage, + type: "JSXOpeningElement", + }, + ], + }, + // with only pre status link text, default statusPageLinkText + { + code: `import { UnavailableContent } from '@patternfly/react-component-groups'; + `, + output: `import { UnavailableContent } from '@patternfly/react-component-groups'; + `, + errors: [ + { + message: renameMessage, + type: "JSXOpeningElement", + }, + ], + }, + // with only post status link text, default statusPageLinkText + { + code: `import { UnavailableContent } from '@patternfly/react-component-groups'; + `, + output: `import { UnavailableContent } from '@patternfly/react-component-groups'; + `, + errors: [ + { + message: renameMessage, + type: "JSXOpeningElement", + }, + ], + }, + // with custom statusPageLinkText + { + code: `import { UnavailableContent } from '@patternfly/react-component-groups'; + `, + output: `import { UnavailableContent } from '@patternfly/react-component-groups'; + `, + errors: [ + { + message: statusPageMessage, + type: "JSXOpeningElement", + }, + ], + }, + // with custom statusPageLinkText in a variable + { + code: `import { UnavailableContent } from '@patternfly/react-component-groups'; + const statusPageLinkText = "custom status page"; + `, + output: `import { UnavailableContent } from '@patternfly/react-component-groups'; + const statusPageLinkText = "custom status page"; + `, + errors: [ + { + message: statusPageMessage, + type: "JSXOpeningElement", + }, + ], + }, + // with both pre and post status link text, custom statusPageLinkText + { + code: `import { UnavailableContent } from '@patternfly/react-component-groups'; + `, + output: `import { UnavailableContent } from '@patternfly/react-component-groups'; + `, + errors: [ + { + message: statusPageMessage, + type: "JSXOpeningElement", + }, + { + message: renameMessage, + type: "JSXOpeningElement", + }, + ], + }, + // default import + { + code: `import UC from '@patternfly/react-component-groups/dist/dynamic/UnavailableContent'; + `, + output: `import UC from '@patternfly/react-component-groups/dist/dynamic/UnavailableContent'; + `, + errors: [ + { + message: statusPageMessage, + type: "JSXOpeningElement", + }, + ], + }, + ], +}); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentBodyTextPropsUpdate/component-groups-unavailableContent-bodyText-props-update.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentBodyTextPropsUpdate/component-groups-unavailableContent-bodyText-props-update.ts new file mode 100644 index 000000000..46d00c077 --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentBodyTextPropsUpdate/component-groups-unavailableContent-bodyText-props-update.ts @@ -0,0 +1,99 @@ +import { Rule } from "eslint"; +import { JSXAttribute, JSXOpeningElement } from "estree-jsx"; +import { + getAllImportsFromPackage, + checkMatchingJSXOpeningElement, + getAttribute, + getAttributeValue, +} from "../../helpers"; + +// https://github.com/patternfly/react-component-groups/pull/244 +module.exports = { + meta: { fixable: "code" }, + create: function (context: Rule.RuleContext) { + const basePackage = "@patternfly/react-component-groups"; + const componentImports = getAllImportsFromPackage(context, basePackage, [ + "UnavailableContent", + ]); + + return !componentImports.length + ? {} + : { + JSXOpeningElement(node: JSXOpeningElement) { + if (!checkMatchingJSXOpeningElement(node, componentImports)) { + return; + } + + const statusPageLinkTextProp = getAttribute( + node, + "statusPageLinkText" + ); + const statusPageLinkTextString: string = + getAttributeValue(context, statusPageLinkTextProp?.value) ?? + "status page"; + + if (statusPageLinkTextProp && statusPageLinkTextString.length) { + const firstChar = statusPageLinkTextString.charAt(0); + + if (firstChar !== firstChar.toUpperCase()) { + context.report({ + node, + message: + "In react-component-groups, UnavailableContent's status page link button has changed to a primary button. Consider capitalizing the `statusPageLinkText` prop.", + fix(fixer) { + return fixer.replaceText( + statusPageLinkTextProp.value!, + `"${firstChar.toUpperCase()}${statusPageLinkTextString.slice( + 1 + )}"` + ); + }, + }); + } + } + + const preStatusLinkTextProp = getAttribute( + node, + "unavailableBodyPreStatusLinkText" + ); + const postStatusLinkTextProp = getAttribute( + node, + "unavailableBodyPostStatusLinkText" + ); + + if (!preStatusLinkTextProp && !postStatusLinkTextProp) { + return; + } + + const preStatusLinkTextString = + getAttributeValue(context, preStatusLinkTextProp?.value) ?? + "Try refreshing the page. If the problem persists, contact your organization administrator or visit our"; + const postStatusLinkTextString = + getAttributeValue(context, postStatusLinkTextProp?.value) ?? + "for known outages."; + + const bodyTextAttribute = `bodyText="${preStatusLinkTextString} ${statusPageLinkTextString} ${postStatusLinkTextString}"`; + + context.report({ + node, + message: + "In react-component-groups, we have replaced UnavailableContent's props `unavailableBodyPreStatusLinkText` and `unavailableBodyPostStatusLinkText` with one `bodyText` prop.", + fix(fixer) { + if (preStatusLinkTextProp && postStatusLinkTextProp) { + return [ + fixer.replaceText(preStatusLinkTextProp, bodyTextAttribute), + fixer.remove(postStatusLinkTextProp), + ]; + } + + return fixer.replaceText( + (preStatusLinkTextProp || + postStatusLinkTextProp) as JSXAttribute, + bodyTextAttribute + ); + }, + }); + }, + }; + }, +}; diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentBodyTextPropsUpdate/componentGroupsUnavailableContentBodyTextPropsUpdateInput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentBodyTextPropsUpdate/componentGroupsUnavailableContentBodyTextPropsUpdateInput.tsx new file mode 100644 index 000000000..99086645f --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentBodyTextPropsUpdate/componentGroupsUnavailableContentBodyTextPropsUpdateInput.tsx @@ -0,0 +1,13 @@ +import { UnavailableContent } from "@patternfly/react-component-groups"; + +export const ComponentGroupsUnavailableContentBodyTextPropsUpdateInput = () => ( + <> + + + + +); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentBodyTextPropsUpdate/componentGroupsUnavailableContentBodyTextPropsUpdateOutput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentBodyTextPropsUpdate/componentGroupsUnavailableContentBodyTextPropsUpdateOutput.tsx new file mode 100644 index 000000000..0dd51fc1d --- /dev/null +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentBodyTextPropsUpdate/componentGroupsUnavailableContentBodyTextPropsUpdateOutput.tsx @@ -0,0 +1,12 @@ +import { UnavailableContent } from "@patternfly/react-component-groups"; + +export const ComponentGroupsUnavailableContentBodyTextPropsUpdateInput = () => ( + <> + + + + +); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentRenameProps/component-groups-unavailable-content-rename-props.md b/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentRenameProps/component-groups-unavailable-content-rename-props.md index 511eea51d..40db0257a 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentRenameProps/component-groups-unavailable-content-rename-props.md +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentRenameProps/component-groups-unavailable-content-rename-props.md @@ -1,12 +1,6 @@ ### component-groups-unavailable-content-rename-props [(react-component-groups/#145)](https://github.com/patternfly/react-component-groups/pull/145) -The UnavailableContent component of React Component Groups has had the following props renamed: - -| Old prop name | New prop name | -| ----------------------------------- | ------------------ | -| `unavailableTitleText` | `titleText` | -| `unavailableBodyPreStatusLinkText` | `preLinkBodyText` | -| `unavailableBodyPostStatusLinkText` | `postLinkBodyText` | +The UnavailableContent component of React Component Groups has had the `unavailableTitleText` prop renamed to `titleText`. #### Examples diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentRenameProps/component-groups-unavailable-content-rename-props.test.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentRenameProps/component-groups-unavailable-content-rename-props.test.ts index 94d90e991..94926dec1 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentRenameProps/component-groups-unavailable-content-rename-props.test.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentRenameProps/component-groups-unavailable-content-rename-props.test.ts @@ -1,18 +1,13 @@ const ruleTester = require("../../ruletester"); import * as rule from "./component-groups-unavailable-content-rename-props"; -const renames = [ - { oldName: "unavailableTitleText", newName: "titleText" }, - { oldName: "unavailableBodyPreStatusLinkText", newName: "preLinkBodyText" }, - { oldName: "unavailableBodyPostStatusLinkText", newName: "postLinkBodyText" }, -]; - -const errors = renames.map( - ({ oldName, newName }: { oldName: string; newName: string }) => ({ - message: `The \`${oldName}\` prop for UnavailableContent has been renamed to \`${newName}\`.`, +const errors = [ + { + message: + "The unavailableTitleText prop for UnavailableContent has been renamed to titleText.", type: "JSXOpeningElement", - }) -); + }, +]; ruleTester.run("component-groups-unavailable-content-rename-props", rule, { valid: [ @@ -25,33 +20,33 @@ ruleTester.run("component-groups-unavailable-content-rename-props", rule, { ], invalid: [ { - code: `import { UnavailableContent } from '@patternfly/react-component-groups'; `, - output: `import { UnavailableContent } from '@patternfly/react-component-groups'; `, + code: `import { UnavailableContent } from '@patternfly/react-component-groups'; `, + output: `import { UnavailableContent } from '@patternfly/react-component-groups'; `, errors, }, { - code: `import { UnavailableContent } from '@patternfly/react-component-groups'; const foo = "foo"; const bar = "bar"; const bash = "bash"; `, - output: `import { UnavailableContent } from '@patternfly/react-component-groups'; const foo = "foo"; const bar = "bar"; const bash = "bash"; `, + code: `import { UnavailableContent } from '@patternfly/react-component-groups'; const foo = "foo"; `, + output: `import { UnavailableContent } from '@patternfly/react-component-groups'; const foo = "foo"; `, errors, }, { - code: `import { UnavailableContent } from '@patternfly/react-component-groups/dist/js/UnavailableContent'; `, - output: `import { UnavailableContent } from '@patternfly/react-component-groups/dist/js/UnavailableContent'; `, + code: `import { UnavailableContent } from '@patternfly/react-component-groups/dist/js/UnavailableContent'; `, + output: `import { UnavailableContent } from '@patternfly/react-component-groups/dist/js/UnavailableContent'; `, errors, }, { - code: `import { UnavailableContent } from '@patternfly/react-component-groups/dist/esm/UnavailableContent'; `, - output: `import { UnavailableContent } from '@patternfly/react-component-groups/dist/esm/UnavailableContent'; `, + code: `import { UnavailableContent } from '@patternfly/react-component-groups/dist/esm/UnavailableContent'; `, + output: `import { UnavailableContent } from '@patternfly/react-component-groups/dist/esm/UnavailableContent'; `, errors, }, { - code: `import { UnavailableContent } from '@patternfly/react-component-groups/dist/dynamic/UnavailableContent'; `, - output: `import { UnavailableContent } from '@patternfly/react-component-groups/dist/dynamic/UnavailableContent'; `, + code: `import { UnavailableContent } from '@patternfly/react-component-groups/dist/dynamic/UnavailableContent'; `, + output: `import { UnavailableContent } from '@patternfly/react-component-groups/dist/dynamic/UnavailableContent'; `, errors, }, { - code: `import UC from '@patternfly/react-component-groups/dist/dynamic/UnavailableContent'; `, - output: `import UC from '@patternfly/react-component-groups/dist/dynamic/UnavailableContent'; `, + code: `import UC from '@patternfly/react-component-groups/dist/dynamic/UnavailableContent'; `, + output: `import UC from '@patternfly/react-component-groups/dist/dynamic/UnavailableContent'; `, errors, }, ], diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentRenameProps/component-groups-unavailable-content-rename-props.ts b/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentRenameProps/component-groups-unavailable-content-rename-props.ts index 6e8affcb9..8ec195c3c 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentRenameProps/component-groups-unavailable-content-rename-props.ts +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentRenameProps/component-groups-unavailable-content-rename-props.ts @@ -3,28 +3,12 @@ import { Renames } from "../../helpers/renameSinglePropOnNode"; // https://github.com/patternfly/react-component-groups/pull/145 -const formatMessage = (oldPropName: string, newPropName: string) => - `The \`${oldPropName}\` prop for UnavailableContent has been renamed to \`${newPropName}\`.`; - const renames: Renames = { UnavailableContent: { unavailableTitleText: { newName: "titleText", - message: formatMessage("unavailableTitleText", "titleText"), - }, - unavailableBodyPreStatusLinkText: { - newName: "preLinkBodyText", - message: formatMessage( - "unavailableBodyPreStatusLinkText", - "preLinkBodyText" - ), - }, - unavailableBodyPostStatusLinkText: { - newName: "postLinkBodyText", - message: formatMessage( - "unavailableBodyPostStatusLinkText", - "postLinkBodyText" - ), + message: + "The unavailableTitleText prop for UnavailableContent has been renamed to titleText.", }, }, }; diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentRenameProps/componentGroupsUnavailableContentRenamePropsInput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentRenameProps/componentGroupsUnavailableContentRenamePropsInput.tsx index e09355015..c98f2067a 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentRenameProps/componentGroupsUnavailableContentRenamePropsInput.tsx +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentRenameProps/componentGroupsUnavailableContentRenamePropsInput.tsx @@ -1,9 +1,5 @@ import { UnavailableContent } from "@patternfly/react-component-groups"; export const ComponentGroupsUnavailableContentRenamePropsInput = () => ( - + ); diff --git a/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentRenameProps/componentGroupsUnavailableContentRenamePropsOutput.tsx b/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentRenameProps/componentGroupsUnavailableContentRenamePropsOutput.tsx index 1d9a2372a..1321d87b6 100644 --- a/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentRenameProps/componentGroupsUnavailableContentRenamePropsOutput.tsx +++ b/packages/eslint-plugin-pf-codemods/src/rules/v6/componentGroupsUnavailableContentRenameProps/componentGroupsUnavailableContentRenamePropsOutput.tsx @@ -1,9 +1,5 @@ import { UnavailableContent } from "@patternfly/react-component-groups"; export const ComponentGroupsUnavailableContentRenamePropsInput = () => ( - + );