-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(UnavailableContent): update props to use bodyText (#737)
* feat(UnavailableContent): replace props with bodyText, change statusPageLinkText button * feat(UnavailableContent): only rename unavailableTitleText prop
- Loading branch information
1 parent
23a45ce
commit 045a156
Showing
10 changed files
with
306 additions
and
58 deletions.
There are no files selected for viewing
19 changes: 19 additions & 0 deletions
19
...odyTextPropsUpdate/component-groups-unavailableContent-bodyText-props-update.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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% | ||
| ``` | ||
|
|
140 changes: 140 additions & 0 deletions
140
...tentBodyTextPropsUpdate/component-groups-unavailableContent-bodyText-props-update.test.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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: `<UnavailableContent unavailableBodyPreStatusLinkText="Visit our" statusPageLinkText="custom status page" unavailableBodyPostStatusLinkText="for more info." />`, | ||
| }, | ||
| { | ||
| code: `import { UnavailableContent } from '@patternfly/react-component-groups'; <UnavailableContent someOtherProp />`, | ||
| }, | ||
| // default import but folder not specified | ||
| { | ||
| code: `import UnavailableContent from '@patternfly/react-component-groups'; <UnavailableContent statusPageLinkText="custom status page" />`, | ||
| }, | ||
| ], | ||
| invalid: [ | ||
| // with both pre and post status link text, default statusPageLinkText | ||
| { | ||
| code: `import { UnavailableContent } from '@patternfly/react-component-groups'; | ||
| <UnavailableContent | ||
| unavailableBodyPreStatusLinkText="Visit our" | ||
| unavailableBodyPostStatusLinkText="for more info." | ||
| />`, | ||
| output: `import { UnavailableContent } from '@patternfly/react-component-groups'; | ||
| <UnavailableContent | ||
| bodyText="Visit our ${defaultStatusText} for more info." | ||
| />`, | ||
| errors: [ | ||
| { | ||
| message: renameMessage, | ||
| type: "JSXOpeningElement", | ||
| }, | ||
| ], | ||
| }, | ||
| // with only pre status link text, default statusPageLinkText | ||
| { | ||
| code: `import { UnavailableContent } from '@patternfly/react-component-groups'; | ||
| <UnavailableContent unavailableBodyPreStatusLinkText="Visit our" />`, | ||
| output: `import { UnavailableContent } from '@patternfly/react-component-groups'; | ||
| <UnavailableContent bodyText="Visit our ${defaultStatusText} ${defaultPostStatusText}" />`, | ||
| errors: [ | ||
| { | ||
| message: renameMessage, | ||
| type: "JSXOpeningElement", | ||
| }, | ||
| ], | ||
| }, | ||
| // with only post status link text, default statusPageLinkText | ||
| { | ||
| code: `import { UnavailableContent } from '@patternfly/react-component-groups'; | ||
| <UnavailableContent unavailableBodyPostStatusLinkText="for more info." />`, | ||
| output: `import { UnavailableContent } from '@patternfly/react-component-groups'; | ||
| <UnavailableContent bodyText="${defaultPreStatusText} ${defaultStatusText} for more info." />`, | ||
| errors: [ | ||
| { | ||
| message: renameMessage, | ||
| type: "JSXOpeningElement", | ||
| }, | ||
| ], | ||
| }, | ||
| // with custom statusPageLinkText | ||
| { | ||
| code: `import { UnavailableContent } from '@patternfly/react-component-groups'; | ||
| <UnavailableContent statusPageLinkText="custom status page" />`, | ||
| output: `import { UnavailableContent } from '@patternfly/react-component-groups'; | ||
| <UnavailableContent statusPageLinkText="Custom status page" />`, | ||
| errors: [ | ||
| { | ||
| message: statusPageMessage, | ||
| type: "JSXOpeningElement", | ||
| }, | ||
| ], | ||
| }, | ||
| // with custom statusPageLinkText in a variable | ||
| { | ||
| code: `import { UnavailableContent } from '@patternfly/react-component-groups'; | ||
| const statusPageLinkText = "custom status page"; | ||
| <UnavailableContent statusPageLinkText={statusPageLinkText} />`, | ||
| output: `import { UnavailableContent } from '@patternfly/react-component-groups'; | ||
| const statusPageLinkText = "custom status page"; | ||
| <UnavailableContent 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'; | ||
| <UnavailableContent | ||
| unavailableBodyPreStatusLinkText="Visit our" | ||
| unavailableBodyPostStatusLinkText="for more info." | ||
| statusPageLinkText="custom status page" | ||
| />`, | ||
| output: `import { UnavailableContent } from '@patternfly/react-component-groups'; | ||
| <UnavailableContent | ||
| bodyText="Visit our custom status page for more info." | ||
| statusPageLinkText="Custom status page" | ||
| />`, | ||
| errors: [ | ||
| { | ||
| message: statusPageMessage, | ||
| type: "JSXOpeningElement", | ||
| }, | ||
| { | ||
| message: renameMessage, | ||
| type: "JSXOpeningElement", | ||
| }, | ||
| ], | ||
| }, | ||
| // default import | ||
| { | ||
| code: `import UC from '@patternfly/react-component-groups/dist/dynamic/UnavailableContent'; | ||
| <UC statusPageLinkText="custom status page" />`, | ||
| output: `import UC from '@patternfly/react-component-groups/dist/dynamic/UnavailableContent'; | ||
| <UC statusPageLinkText="Custom status page" />`, | ||
| errors: [ | ||
| { | ||
| message: statusPageMessage, | ||
| type: "JSXOpeningElement", | ||
| }, | ||
| ], | ||
| }, | ||
| ], | ||
| }); |
99 changes: 99 additions & 0 deletions
99
...leContentBodyTextPropsUpdate/component-groups-unavailableContent-bodyText-props-update.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
| ); | ||
| }, | ||
| }); | ||
| }, | ||
| }; | ||
| }, | ||
| }; |
13 changes: 13 additions & 0 deletions
13
...eContentBodyTextPropsUpdate/componentGroupsUnavailableContentBodyTextPropsUpdateInput.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| import { UnavailableContent } from "@patternfly/react-component-groups"; | ||
|
|
||
| export const ComponentGroupsUnavailableContentBodyTextPropsUpdateInput = () => ( | ||
| <> | ||
| <UnavailableContent | ||
| unavailableBodyPreStatusLinkText="Visit our" | ||
| unavailableBodyPostStatusLinkText="for more info." | ||
| statusPageLinkText="custom status page" | ||
| /> | ||
| <UnavailableContent unavailableBodyPreStatusLinkText="Visit our" /> | ||
| <UnavailableContent unavailableBodyPostStatusLinkText="for more info." /> | ||
| </> | ||
| ); |
12 changes: 12 additions & 0 deletions
12
...ContentBodyTextPropsUpdate/componentGroupsUnavailableContentBodyTextPropsUpdateOutput.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { UnavailableContent } from "@patternfly/react-component-groups"; | ||
|
|
||
| export const ComponentGroupsUnavailableContentBodyTextPropsUpdateInput = () => ( | ||
| <> | ||
| <UnavailableContent | ||
| bodyText="Visit our custom status page for more info." | ||
| statusPageLinkText="Custom status page" | ||
| /> | ||
| <UnavailableContent bodyText="Visit our status page for known outages." /> | ||
| <UnavailableContent bodyText="Try refreshing the page. If the problem persists, contact your organization administrator or visit our status page for more info." /> | ||
| </> | ||
| ); |
8 changes: 1 addition & 7 deletions
8
...vailableContentRenameProps/component-groups-unavailable-content-rename-props.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.