lib-user: Setup react-i18next for MainContent components

[goplayoutside3]

Package

lib-user

Linked Issue

Builds on top of #6559

Describe your changes

Setup react-i18next for the MainContent components

How to Review

The expected text should display for the above components when lib-user is run locally, in Storybook, or as app-root pages.

Checklist

PR Creator - Please cater the checklist to fit the review needed for your code changes.
PR Reviewer - Use the checklist during your review. Each point should be checkmarked or discussed before PR approval.

General

• Tests are passing locally and on Github
• Documentation is up to date and changelog has been updated if appropriate
• You can yarn panic && yarn bootstrap or docker-compose up --build and FEM works as expected
• FEM works in all major desktop browsers: Firefox, Chrome, Edge, Safari (Use Browserstack account as needed)

New Feature

• The PR creator has listed user actions to use when testing the new feature
• Unit tests are included for the new feature
• A storybook story has been created or updated
  • Example of SlideTutorial component with docgen comments, and its story

Post-merge

• This PR adds translations keys to English dictionary(s). See guidance for pulling new keys to Lokalise here.

[goplayoutside3]

Something I noticed while editing MainContent code is the <button> element in the Select components has an incorrect aria-label. It reads as "Selected: [object Object]" for the projects dropdown and the date range dropdown.

This is because Grommet's Select takes the value and puts it in the aria-label regardless if that value is an object or string. The helper functions that handle Select in MainContent span across multiple code files so I didn't want to get into a bug fix here, but just wondering if you're aware of this behavior and should I create an Issue?