Add support for non-english zendesk #2207
Conversation
name of the title element seems to be translated in to the language zendesk is using so we chck the language of zendesk and fetch the element in the localized name
There was a problem hiding this comment.
Hey @davidlienhard! 👋
Thank you for submitting a PR fixing the Zendesk integration. 🙌
Your solution is working fine, but I think we can come up with a more stable selector that is locale independent.
The last time we fixed the selector, we thought that using a selector aiming at the aria-label would guarantee a stable selector, that would resist any potential UI changes.
But we forgot to take into consideration that the aria-label value changes according to the user's locale. 😓
I added a comment suggesting a change to the selector, that makes is locale independent.
If you are able to make the change, I'm happy to re-review and then approve it! 🙌
Thank you for your contribution!
src/content/zendesk.js
Outdated
| const language = document.querySelector("html").lang || 'en' | ||
|
|
||
| const translations = { | ||
| 'en': 'Subject', | ||
| 'de': "Betreff" | ||
| } | ||
|
|
||
| const elementName = translations[language] || 'Subject' | ||
| const input = elem.querySelector('input[aria-label='+elementName+']'); |
There was a problem hiding this comment.
As I said in the PR's review comment, this should be a better locale independent selector.
It uses the data-test-id attribute that usually it's pretty stable, since it generally is used internally for E2E tests.
| const language = document.querySelector("html").lang || 'en' | |
| const translations = { | |
| 'en': 'Subject', | |
| 'de': "Betreff" | |
| } | |
| const elementName = translations[language] || 'Subject' | |
| const input = elem.querySelector('input[aria-label='+elementName+']'); | |
| const input = elem.querySelector('input[data-test-id="omni-header-subject"]') |
|
Hi @nunofmn Please take a look and let me know if changes are required. Best regards, David |
There was a problem hiding this comment.
Perfect, LGTM! 👌 🚀
Thank you for your contribution @davidlienhard! 🙌
nunofmn
changed the title
|
Great, thank you for the merge. Looking forward to the next release! |
Please remember the Contributing Guidelines ❤️
🌟 What does this PR do?
We are using the Zendesk UI from 2021. The Toggl integration is working, but only fetching the ticket number and not the name. But the title would be really helpful for us.
Currently Toggl is searching for an element with aria-label Subject. But this does not exist in the German version of Zendesk, as is named Betreff.
This PR fetches the language of Zendesk from the
<html>node, reads the correct Label-Name from the translation array (which can be extended for other languages) and the reads the title.🐛 Recommendations for testing
You would need to test the Toggle integration in Zendesk with english and german language. Toggle schould add the ticket id and subject for tracking.
📝 Links to relevant issues or information