[frontend] Initial approach to dynamic update of Title and Language for pages

[ParamConstructor]

Proposed changes

This PR is to address Accessibility Issues of Issues (#6606 and #6607)

• Change page title when navigating across the platform #6606
• Change depending on the selected language #6607

It has been applied only to the Root (for Language), Dashboard page, and the pages under Analysis (i.e. Reports, Groupings, Notes, Malware Analysis, and External References) to demonstrate the approach. If accepted, a future PR can be used to update the other pages using the useHeader component.

If the user's profile has selected "automatic", the page language will be determined by the navigator/browser language setting (i.e. navigator.language ).

Update: June 20, 2024

Uses a hook, versus the React Helmet module in initial commits to address @richard-julien comment/request to simplify the approach.

Related issues

None

Checklist

• [X] I consider the submitted work as finished
• [X] I tested the code for its functionality
• [X] (N/A) I wrote test cases for the relevant uses case (coverage and e2e)
• [ ] I added/update the relevant documentation (either on github or on notion)
• [X] Where necessary I refactored code to improve the overall quality

[codecov[bot]]

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 67.55%. Comparing base (3355b5f) to head (4e1a38a).

Additional details and impacted files

@@            Coverage Diff             @@
##           master    #7374      +/-   ##
==========================================
- Coverage   67.55%   67.55%   -0.01%     
==========================================
  Files         567      567              
  Lines       69903    69903              
  Branches     5936     5936              
==========================================
- Hits        47223    47220       -3     
- Misses      22680    22683       +3     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

[richard-julien]

Im a bit worried about the library used, that seems pretty old and not maintains anymore React helmet async, last release Oct 8, 2018 React helmet, last release Jun 8, 2020

Could we try a more standard approach with hook and useEffect? One more remark for lang that i think can be setup in root loading?

[ParamConstructor]

@richard-julien - https://www.npmjs.com/package/react-helmet-async - was released last month? React-Helmet was replaced by it (the aysc version) and deprecated (https://www.npmjs.com/package/react-helmet).

[ParamConstructor]

@richard-julien - Updated to use a hook and not a specific module. The language is set only in the Root.