Display warning on preview environment to notify users if page is Mozart #12038
Conversation
…en code deployed to test environment
karinathomasbbc
changed the title
karinathomasbbc
changed the title
| const [isPreview, setIsPreview] = useState(false); | ||
|
|
||
| useEffect(() => { | ||
| const hostnameMatchesPreview = window.location.hostname.match(/preview/g); | ||
| const isPreviewEnvironment = | ||
| hostnameMatchesPreview && hostnameMatchesPreview.length > 0; | ||
|
|
||
| setIsPreview(isPreviewEnvironment); | ||
| }, []); | ||
|
|
There was a problem hiding this comment.
Just need to double check that no CLS or LCP issues happen or any weird behaviour with child components, as using state might cause a re-render.
Not actually sure if react does a re-render when you set an already false state value to false, hopefully it's clever enough, or you could be doubly safe and just set the state when isPreviewEnvironment is true
There was a problem hiding this comment.
Gosh I never thought about LCP/CLS 😬 Luckily this is only on the preview environment, but all the same, it's best to check. I'll ensure not to set state unless preview env is true & see if that causes a re-render or not.
There was a problem hiding this comment.
But of course this code will run regardless of which environment it's on. I'll do a quick comparison between the test environment & preview with this banner to see if there's a difference in Web Vital scores.
There was a problem hiding this comment.
It should be fine, as I don't think there's anything that will actually make react change anything in the DOM, but best to double check
Resolves JIRA N/A
Overall changes
Displays a warning on the preview environment if a page is rendered by Mozart (meaning that it cannot pick up changes from branch/PR)
Code changes
Add an indicator component to the header/footer
Add
requestServiceChainto the request contextTesting
Locally - cannot test on preview for pages not routed directy to Simorgh as they are rendering the test.bbc.com version
Unit tests
Preview environment: indicator not displayed for pages routed directly to Simorgh
Helpful Links
Add Links to useful resources related to this PR if applicable.
Coding Standards
Repository use guidelines