Web staff client does not work properly when Czech is switched on

[Linda Jansova]

Using Blake’s test server localized to Czech (https://bugsquash3.mobiusconsortium.org/eg/staff/) (from the main branch), it can be seen that although the staff client is supposed to be in Czech, it frequently switches to English, provides mixed Czech-English interfaces (in cases when translation is actually available), does not properly show its splash page and has missing labels for two top-level items (along with "ů" instead of a home icon).

To reproduce:
Step 1: Go to https://bugsquash3.mobiusconsortium.org/eg/opac/home and keep Czech as the selected language.

Step 2: Change the browser URL to https://bugsquash3.mobiusconsortium.org/eg/staff/ and log in using admin / demo 123.

Step 3: Register your workstation.

Step 4: Log in again using your workstation.

Step 5: Check the splash screen.

Step 6: Go to the patron search screen (https://bugsquash3.mobiusconsortium.org/eg/staff/circ/patron/search).

Step 7: Go to the catalog search screen (https://bugsquash3.mobiusconsortium.org/eg2/cs-CZ/staff/catalog/search).

Findings:
Step 1: The OPAC interface is in Czech.

Step 2: The staff client interface (the login screen) is partly in English, partly in Czech. Search in the menu is translated; also Username and Password are in Czech and Čeština shows up as a selected language in the top right corner of the screen. All the other strings keep being in English.

Step 3: The staff client interface (for registering a workstation) is in Czech but the home icon is replaced by the letter ů (the last letter from Domů, a Czech translation of Home) and two of the top-level main menu items (Search and Cataloging in English) do not have an appropriate label; instead, they are only reprensented by arrows pointing down.

Step 4: The login screen is entirely in Czech, with the home icon and the two menu item labels missing.

Step 5: The splash screen is entirely in Czech, with the home icon and the two menu item labels missing again. The splash screen itself only shows the Evergreen logo, two (left and right) empty boxes (rectangles) with a pale green top and the middle box contains only a search box and a very basic search button (with no label).

Step 6: The staff client interface for patron search is mostly in English, e.g., in the main menu only Search (Hledat in Czech) is in Czech; all the other top-level menu items are in English. The main part of the page shows some strings in Czech and some in English. This page has "eg", not "eg2" in the path.

Step 7: The staff client interface for catalog search is in Czech, including the menu (but again, with the missing home item and the two missing menu item labels). This page has "eg2" in the path.

This behavior prevents us from upgrading as most of the Czech librarians working with Evergreen are not fluent in English.

There has already been a discussion on the same topic in the Evergreen-general mailing list: http://list.evergreen-ils.org/pipermail/evergreen-general/2023-July/002038.html.

Another thread from 2020 focused on the missing home icon: http://list.evergreen-ils.org/pipermail/evergreen-general/2020-November/000172.html.

[Linda Jansova (skolkova-s)]

There is a related bug focusing on missing translations: https://bugs.launchpad.net/evergreen/+bug/1968041.

[Eva Cerninakova (ece)]

I went through the steps Linda described with the same results.

I also compared results got on Blake's test server bugsquash3.mobiusconsortium.org with our test server containing SPOK (Czech Evergreen Common Catalog) data and  found that in angularized interfaces the localization works the same way both, on the  bugsquash3.mobiusconsortium.org and the SPOK catalog test server - see the attachments. The only exception is the staff home page - see the attachment staff_splash.png.

However, the old interfaces - like Patron Search, Z39.50 Import, Pending Patron and others are displayed as unlocalized on bugsquash3.mobiusconsortium.org, while they are localized in the test SPOK catalog.

I compared eg-vhost.conf file  from bugsquash3.mobiusconsortium.org  catalog (https://bugsquash3.mobiusconsortium.org/eg_vhost.conf.txt)to the same file from the test SPOK catalog. Thereare definitely some differences (see the attachment Diff-results-eg-vhost.conf.txt).

[Eva Cerninakova (ece)]

I looked closely at the "ů" problem described in Linda's step 3 that is related to the "home" translation and icon.

  The string "home" is located in Open-ILS/src/eg2/src/app/staff/nav.component.html, line 9:

  1 <nav id="staff-navbar" aria-label="Main Navigation" i18n-aria-label class="navbar fixed-top navbar-expand navbar-default">
   2 <div class="collapse navbar-collapse">
   3 <div class="navbar-nav">
   4 <div class="nav-item">
   5 <a i18n class="nav-link with-material-icon nav-link-home"
   6 routerLink="/staff/"
   7 egAccessKey keyCtx="navbar" i18n-keySpec i18n-keyDesc
   8 keySpec="alt+h" keyDesc="Navigate Home">
   9 <span class="material-icons">home</span>
  10 </a>
  11 </div>
  12 </div>

while the translation string in the POEditor is

 <ph name="START_TAG_SPAN"><ex>&lt;span&gt;</ex></ph>home<ph name="CLOSE_TAG_SPAN"><ex>&lt;/span&gt;</ex></ph>

I wondered if "home" is not just a name for some element that should not be translated based on the fact that line 8 contains an "alt" element with the value "navigate home" and the "home" string itself has the "material-icon" class. However, I tested how the "home icon" is interpreted by the screen reader (using NVDA) both in Czech and English localization, and the screen reader output is "domů" respectively "home", not "přejít domů" respectively "navigate home". So I am in doubt whether the "home" in the translation string should be translated at all.

[Linda Jansova (skolkova-s)]

As I noted in the discussion thread in the Evergreen-general mailing list, it seems to me that eg_vhost.conf (https://git.evergreen-ils.org/?p=Evergreen.git;a=blob;f=Open-ILS/examples/apache_24/eg_vhost.conf.in;h=e6ead9303423bfa54ac92c7c85cbb75e9ac0f316;hb=2f3a35f6fa7f8f3d5bb3ea4dc3b35a8c1b5452fd and now also https://bugsquash3.mobiusconsortium.org/eg_vhost.conf.txt) does not include any rewrite rules covering the cases of going from eg2 to eg and back.

The section under

981 # /eg2/ client setup and locale configuration.

only deals with eg2...

Steps 6 and 7 in the scenario described in this bug correspond to this; the /eg2 page is in Czech (albeit with some issues as noted above) and the /eg page is in English.

[Linda Jansova (skolkova-s)]

One more thing related to the "ů" question:

Perhaps line 9 of the file

https://git.evergreen-ils.org/?p=Evergreen.git;a=blob;f=Open-ILS/src/eg2/src/app/staff/nav.component.html;h=4777bf861a836da88d31e0fc0922d275a3be30e3;hb=HEAD

should not be:

<span class="material-icons">home</span>

but rather:

<span i18n class="material-icons">home</span>

Currently, the i18n piece is included on line 5 (where one finds the parent element):

<a i18n class="nav-link with-material-icon nav-link-home"

But similar pieces of code in the file use the i18n attribute not for the parent elements but for each of the element which should be translated - in this case it is the "span" element.

That also seems to correspond with the Angular documentation which - when dealing with where the "i18n" should go - says: "Place it on every element tag that contains fixed text you want to translate." (https://angular.io/guide/i18n-common-prepare#translate-inline-text-without-html-element).

[Linda Jansova (skolkova-s)]

Judging from https://www.redpin.eu/blog.html, it may well be that using the i18n attribute for the innermost elements will also help us get rid of the conversions of characters like < and > to HTML entities (which can be seen in Poeditor in Eva's example mentioned in comment #16 to this bug: https://bugs.launchpad.net/evergreen/+bug/2032753/comments/16).

[Linda Jansova (skolkova-s)]

I have also had a look at https://angular.io/guide/i18n-common-deploy. The Angular documentation says: "Specify the "baseHref" for each locale in your angular.json workspace build configuration file." The angular.json file in Evergreen (https://git.evergreen-ils.org/?p=Evergreen.git;a=blob;f=Open-ILS/src/eg2/angular.json;hb=04bb7b1486a5d8a4e964ceb4a6980fc9c4ef290a) seems to use just one baseHref (under architect, not under projects as it is used in the example included in the Angular documentation). Maybe it is okay as it is but I thought it may be worth mentioning it anyway as it could help (in one way or another) squash this bug :-).

[Linda Jansova (skolkova-s)]

Maybe also this issue from angular/angular-cli (Add baseHref setting to the sourceLocale, especially clydin's comment giving a particular example) could be useful: https://github.com/angular/angular-cli/issues/17144.

[Jane Sandberg (sandbergja)]

Findings #2 and #6 should be resolved by https://github.com/mcoia/eg-docker/pull/14 when building new docker images.

I 100% agree with the diagnosis of finding #3 that Linda provided in comment #18, I should have a branch to correct that soon.

[Stephanie Leary (stephanieleary)]

Elements containing Material Icons must *not* be translated as a whole; the keywords correspond to icons, and they must be given in English.

This means that for a button or link containing both words and an icon, we need to remove the i18n attribute on the parent element and provide two inner spans, one with the words and the i18n attribute, and one for the icon without i18n.

For a button containing only an icon, there should not be an i18n attribute, only i18n-title and i18n-aria-label as needed.

On the test server, you can inspect the navigation button containing the the erroneous ů in the browser. If you replace "Domů" with "home" inside the material-icons span, the home icon reappears.

The branch on bug 1615714 fixes a lot of button icon/i18n issues along with the ARIA labels.

[Blake GH (bmagic)]

I've reinstalled bugsquash3 to include the docker changes from Jane! And it does seem to have solved findings #2 and #6. And it would seem that findings #4 is resolved. I would like to note that the old AngularJS splash screen flashes for a split second after login, and I'm pretty sure it looked good for the amount of time I was allowed to see it before it redirected to the Angular splash screen. Which, is still missing a bunch of the DOM.

[Linda Jansova (skolkova-s)]

Thank you very much, Jane, Stephanie and Blake!

I have just tried https://bugsquash3.mobiusconsortium.org/eg/staff/ but it seems to be redirecting to https://bugsquash3.mobiusconsortium.org/eg2/staff/ which shows a 404 error. But I guess I have been too quick and you are just working on it, so I'll try again later :-).

[Linda Jansova (skolkova-s)]

I'm following up on my previous comment regarding the bugsquash3 server:

I have tried to manually change the eg2 address to eg.

Sometimes (I guess these were cases when there had been no interface with the eg path) it redirected to the splash page (e.g., https://bugsquash3.mobiusconsortium.org/eg/staff/booking/pickup shows the splash page; it is not actually a redirect per se; rather, one sees the URL https://bugsquash3.mobiusconsortium.org/eg/staff/booking/pickup in the browser address bar but the page which is shown is the splash page).

In other cases (e.g. manually changing https://bugsquash3.mobiusconsortium.org/eg2/staff/cat/vandelay/import to https://bugsquash3.mobiusconsortium.org/eg/staff/cat/vandelay/import) I saw a 404 again (when it redirected to https://bugsquash3.mobiusconsortium.org/eg2/staff/).

To sum up, whatever I managed to see (apart from the 404 errors, obviously) was in Czech (this is probably due to the fact that only Czech is still enabled on the bugsquash3 server).

[Jane Sandberg (sandbergja)]

A note that this pull request should get rid of those 404s in docker builds: https://github.com/mcoia/eg-docker/pull/16

[Jane Sandberg (sandbergja)]

Here is a branch to resolve finding #3, by not translating the material icon name and by bringing in the missing translations from POEditor: user/sandbergja/lp2032753-angular-i18n-corrections

Here is a link: https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/user/sandbergja/lp2032753-angular-i18n-corrections

To test:
* Set up a cs-CZ eg2. You can do this in at least two ways:
    - build a docker image using add_evergreen_language_support
    - manually editing Open-ILS/src/eg2/src/environments/environment.prod.ts and eg_vhost.conf, then building and installing angular with --configuration production
* Go to the staff client. Confirm that:
    - Navbar entries are in Czech
    - No navbar entries are missing
    - The home icon displays

[Linda Jansova (skolkova-s)]

Following up on comment #27 - we have just tested the docker container (our own install this time) and so we can confirm that the 404s no longer seem to be appearing :-).

[Jane Sandberg (sandbergja)]

I created a separate ticket for Findings #5: bug 2037426

[Linda Jansova (skolkova-s)]

Using Blake's bugsqash3 test server (https://bugsquash3.mobiusconsortium.org/eg2/staff/) I can confirm that

    - Navbar entries are in Czech
    - No navbar entries are missing
    - The home icon displays

:-)

Thank you very much once again!

[Linda Jansova (skolkova-s)]

I have added a new bug which is a kind of a follow-up to the current one and focuses on untranslated column headers in the staff client: https://bugs.launchpad.net/evergreen/+bug/2042915.

[Jane Sandberg (sandbergja)]

Thanks for your testing, Linda! Would you be willing to sign off on this fix? You can do so in a comment here on launchpad, using the format given in step 3a here: https://wiki.evergreen-ils.org/doku.php?id=dev:testing_code&s[]=consent&s[]=signing

[Linda Jansova (skolkova-s)]

I have tested this code and consent to signing off on it with my name, Linda Jansova, and my email address, <email address hidden>.

[Jane Sandberg (sandbergja)]

Thanks, Linda! I've pushed this to branches rel_3_10, rel_3_11, and main, for inclusion in 3.10.4, 3.11.2, and 3.12.0.

[Linda Jansova (skolkova-s)]

Thank you very much, Jane!