Localization: Dynamic localization redirections

Related to #49 (closed)

Step 1: What is changing in this MR?

Improve the accessibility and user experience of the application by implementing a reusable method that automatically redirects users to the localized version of a page. This method can be applied to every link in the application, ensuring that users are directed to the correct localized version whenever available.

Furthermore, to avoid redirecting users to a localized version of another domain's page, this method also verifies whether the next page is in the same domain before redirecting.

To further enhance the user experience, the CMD + click event has been validated to open the links in a new tab after they have been redirected to the correct localized version of the page. This ensures that users can easily navigate between different localized versions of the pages without losing track of their original location.

Be Review App

export const redirectToLocalizedLink = (path: string, event) => {
  const isCmdTyped = event.ctrlKey || event.metaKey;

  if (path.startsWith("/")) {
    const flatLang = localStorage.getItem("lang");
    let selectedLang: Language;

    if (flatLang) {
      selectedLang = JSON.parse(flatLang);
      const selectedLangPath = `${selectedLang.path}${path}`;
      checkIfUrlExists(selectedLangPath).then((exists) =>
        redirectToUrl(exists ? selectedLangPath : path, isCmdTyped)
      );
    } else {
      redirectToUrl(path, isCmdTyped);
    }
  } else {
    redirectToUrl(path, isCmdTyped);
  }
};

Step 2: Ensure that your changes comply with the following, where applicable:

• I, the Assignee, have run Axe tools on any updated pages, and fixed the relevant accessibility issues.
• These changes meet a specific OKR or item in our Quarterly Plan.
• These changes work on both Safari, Chrome, and Firefox.
• These changes have been reviewed for Visual Quality Assurance and Functional Quality Assurance on Mobile, Desktop, and Tablet.
• These changes work with our Google Analytics and SEO tools.
• These changes have been documented as expected.

Step 3: Add the appropriate labels for triage

This MR will have dex-approval::2-standard automatically applied, but please update it as follows. If deciding between two levels, go with the higher of the two:

1. dex-approval::1-minor
   1. Example of the type of change: typos or content changes.
      1. Anyone on the Digital Experience team can approve and merge.
      2. Once approved by the Digital Experience team, the MR creator can merge.
   2. Example of the type of change: /customers filter is displaying the wrong results.
      1. Anyone on the Digital Experience team can approve and merge.
      2. Once approved by the Digital Experience team, the MR creator can merge.
2. dex-approval::2-standard
   1. Example of the type of change: re-arranging components on a page.
      1. Once the Digital Experience team approves, members of the Digital Experience team can merge.
      2. Members of the Digital Experience team should keep their Managers informed.
      3. Manager’s discretion to align with the Director of Digital Experience or not.
   2. Example of the type of change: Adding new pages.
      1. Managers of Digital Experience can approve and merge.
      2. Manager should align with Director, Digital Experience.
3. dex-approval::3-key-page
   1. Example of the type of change: Changing Nav
      1. Directors and Managers of Digital Experience need to align.
      2. Managers of Digital Experience can approve and merge.
   2. Example of the type of change: Changes to key drivers of traffic and/or business goals etc. (Homepage, Pricing Page, Why GitLab).
      1. Director, Digital Experience can approve and merge.
      2. Director, Digital Experience will keep Marketing leadership informed of all Major Changes.
4. dex-approval::4-legal
   1. Example of the type of change: Any changes to company information, board/director information, etc.
      1. Legal and Director of Digital Experience must approve.
   2. Example of the type of change: Changes to sign-up workflows or alteration/omission of footers/links to anything legal-related.
      1. Legal and Director of Digital Experience must approve.

Step 4: Tag the appropriate person for review

Depending on which label is used, you may tag the following people as a Reviewer on this MR:

1. Level 1: Any member of the Digital Experience Team
2. Level 2: Any member of the Digital Experience team
3. Level 3: Ping @gitlab-com/marketing/digital-experience in a comment. This will tag the Digital Experience Leadership team, and they can review. When in doubt, tag @mpreuss as a reviewer.
4. Level 4: This will need Legal approval. Tag @mpreuss and he can loop in the legal team.