QC guide for React 18 upgrade

[bobular]

This is a guide for how to test the sites following the React 18 upgrade for the client code.

For checking if a bug was already on the live/production site:

• @aurreco-uga will provide a VectorBase dev site on the live/production site branch that will emulate live sites
• ortho, mbio and clinepi still have live production sites.

Outreach

• snackbars - do they still work and look OK? These can be tested as follows: 1. genomics site after changing organism preferences, 2. MapVEu when marker selections (click on markers) are made and various help is given, also notifications when selected markers go off-screen. (due to these changes)
• do EDA viz thumbnails still all work (plotly plots, simple EDA/clinepi map viz, faceted plots, mbio networks etc) - because these are complex and brittle
• check the confirm dialogue for analysis deletion works https://qa.clinepidb.org/ce.b34/app/workspace/analyses (due to these changes)
• check that legacy map redirects (e.g. 'view on map' links from the release 64 notes) work. Not sure how we will test this on qa?? (code changes here)
• check scroll-to-top button works - should be present in bottom-right (example below) on any website page after you scroll down a bit (code change)
• check behaviour of thumbnails at top of gene page (note that these are static images, not dynamic screenshots) (code changes)

Developers

• we should enable https://react.dev/reference/react/StrictMode in all the dev servers and do testing while watching the console for errors and warnings (due to the use of the new React 18 Root API here https://github.com/VEuPathDB/web-monorepo/pull/1100/files?diff=split&w=1#diff-22503c1ed6527d2698b5d45ff08a9c39a5910f7fa21c278fe4408acae56dfa57R130 - and see discussion here Replacing render with createRoot reactwg/react-18#5) - note that we're not explicitly using new "concurrency" features but other behaviour may be subtly different
• explain and test registerCustomElement here that is used on some record pages here. Presumably this is something to do with the image rendered near the top of this compound record page.

[dmfalke]

• explain and test registerCustomElement here that is used on some record pages here. Presumably this is something to do with the image rendered near the top of this compound record page.

Good idea. This was an early experiment to allow using custom html tags in the wdk model xml, to use react components.