Fix term popup not showing for uppercase terms

[baha-bouali]

Fixes #4474

Problem

Clicking a term in the source string did nothing when the term was stored with an uppercase first letter in the terminology database.

Cause

Highlight.tsx writes the term's stored text into data-match on the <mark> element. The click handler in OriginalString.tsx then looked it up with:

terms.terms?.filter((t) => t.text.toLowerCase() === markedTerm)

Only the left side was lowercased, so a term stored as Issue produced "issue" === "Issue". This resulted in no match, empty result, no popup. Terms stored lowercase were unaffected, which is why the failure only showed on capitalized entries.

Fix

Lowercase both sides of the comparison.

Testing

Created two local terms, one stored capitalized and one lowercase, each with a definition and an Arabic translation. Before the change, only the lowercase term opened its popup; after, both do.

Visual proof:

PR1.Pontoon.webm

[baha-bouali]

cc @flodolo

[flodolo]

Great job with the PR. The fix works, just need to fix formatting with prettier.

[baha-bouali]

Thanks! Fixed formatting with npm run prettier.
btw, and unrelated to this fix, I noticed that Hightlight.tsx:115 applies term regex using [a-zA-z]* rather than [a-zA-Z]*, which includes non-alphabetical characters. Was this intentional? Thanks!

[flodolo]

btw, and unrelated to this fix, I noticed that Hightlight.tsx:115 applies term regex using [a-zA-z]* rather than [a-zA-Z]*, which includes non-alphabetical characters. Was this intentional? Thanks!

I'll check with @eemeli, but feels like a typo (from #3014)

pontoon/translate/src/modules/placeable/components/Highlight.tsx

Line 115 in 1d860eb

const re = new RegExp(`\\b${escapeRegExp(term)}[a-zA-z]*\\b`, 'gi');

[flodolo]

Will file an issue for the regex, since it's indeed a typo.

Welcome to Pontoon. We also have a Matrix channel if you want to join
https://chat.mozilla.org/#/room/#pontoon:mozilla.org