Page MenuHomePhabricator

Changing languages does not always change the language across the whole page
Closed, ResolvedPublicBUG REPORT

Description

See the screenshot for an example.

This happens in the following views:

  • Add or Remove Tools
  • Crawler History: chart labels don't update
  • Developer Settings
  • Create a New List

Reloading the page solves this.

All the other views seem to work as expected (Home, API, Audit logs...)

Screenshot 2021-11-23 at 10.59.58.png (980×2 px, 129 KB)

Event Timeline

For both the tab labels and form elements on the add/remove tools page, the messages are setup as members of the data() structures of the respective Vue components. This looks to me like a case where that type of configuration, even though it is using this.$t( message ), is not leaving Vue with a data model reconciliation connection between the rendered messages and the active message catalog. Basically Vue doesn't know to update these strings when the locale is switched because it's rendered DOM is missing the state tracking needed to power its reactivity system. I haven't checked the other cases mentioned but I'm pretty sure they are the same problem.

https://github.com/apertureless/vue-chartjs/blob/develop/src/mixins/index.js is a thing that one of the libraries we use contains to create reactivity for a similar issue.

Using Vue's data hook to set localize strings seems to be at least part of the problem here. See https://github.com/kazupon/vue-i18n/issues/303#issuecomment-445554892 for discussion of a fix for functionally the same problem.

Applying this diff to src/views/AddRemoveTools.vue makes the tab labels reactive to locale change for me:

diff --git i/vue/src/views/AddRemoveTools.vue w/vue/src/views/AddRemoveTools.vue
index 3e73ed2..4acb249 100644
--- i/vue/src/views/AddRemoveTools.vue
+++ w/vue/src/views/AddRemoveTools.vue
@@ -15,7 +15,7 @@
                 <v-tabs v-model="tab">
                     <v-tab
                         v-for="item in items"
-                        :key="item.label"
+                        :key="item.href"
                         :href="'#' + item.href"
                     >
                         {{ item.label }}
@@ -49,9 +49,19 @@ export default {
         CreateNewTool,
         RegisterToolUrl
     },
-    data() {
-        return {
-            items: [
+    computed: {
+        tab: {
+            set( tab ) {
+                this.$router.replace( {
+                    query: { ...this.$route.query, tab }
+                } );
+            },
+            get() {
+                return this.$route.query.tab;
+            }
+        },
+        items() {
+            return [
                 {
                     href: 'tool-create',
                     label: this.$t( 'createnewtool' ),
@@ -63,18 +73,6 @@ export default {
                     component: 'RegisterToolUrl'
                 }
             ]
-        };
-    },
-    computed: {
-        tab: {
-            set( tab ) {
-                this.$router.replace( {
-                    query: { ...this.$route.query, tab }
-                } );
-            },
-            get() {
-                return this.$route.query.tab;
-            }
         }
     },
     metaInfo() {

The change to the the :key in the v-for loop may not be needed at all, but it seemed like a good idea to chose a stable key for indexing rather than a localized string.

This does indeed seem to solve the previous lack of reactivity when changing languages but it has a side effect: if you change language settings midway through filling out a form, changing languages resets the form whereas before any filled in fields would be persisted.

Adding to this: implementing the change above leaves the form field help text untranslated after a language change. However, the "this field is required" error message does get translated!

The current behavior is the opposite: the help text is translated, but not the error message.

Adding to this: implementing the change above leaves the form field help text untranslated after a language change. However, the "this field is required" error message does get translated!

The current behavior is the opposite: the help text is translated, but not the error message.

The help text should be coming from the OpenAPI schema data fetched from the backend GET /api/schema/ endpoint. That data is actually fetched as asyncComputed data in an embedding component like vue/src/components/tools/CreateNewTool.vue and then passed into each <InputWidget/> as a property. The fetching is done with methods exposed by vue/src/store/api.js which include some attempts at caching to reduce round trips to the backend OpenAPI endpoint. It looks like these may need to be updated to be more aware of locale state changes which happen in the nearby vue/src/store/locale.js Vuex module.

Slst2020 changed the task status from Open to In Progress.Dec 13 2021, 12:59 PM
Slst2020 added a project: User-Slst2020.
Slst2020 moved this task from To Do to Doing on the User-Slst2020 board.

Dividing this task into smaller subtasks:

  • Make tab titles reactive in Add or Remove Tools & Developer Settings
  • Make form fields reactive in Add or Remove Tools, Developer Settings & Create a new list
  • Make "this field is required" text reactive in all of the above-mentioned forms

Change 746944 had a related patch set uploaded (by Slavina Stefanova; author: Slavina Stefanova):

[wikimedia/toolhub@main] bug: Make form fields reactive to language change

https://gerrit.wikimedia.org/r/746944

Change 746944 merged by jenkins-bot:

[wikimedia/toolhub@main] bug: Make form fields reactive to language change

https://gerrit.wikimedia.org/r/746944

Slst2020 changed the task status from In Progress to Open.Dec 16 2021, 8:52 AM
Slst2020 moved this task from Doing to Blocked on the User-Slst2020 board.

Removed "Make chart labels reactive in Crawler history " from the to-do list to create a separate task (T297860). The chart component seems to have deeper reactivity issues than just the chart labels not updating with a language change.

Change 749220 had a related patch set uploaded (by BryanDavis; author: Bryan Davis):

[operations/deployment-charts@master] toolhub: Bump container version to 2021-12-20-122341-production

https://gerrit.wikimedia.org/r/749220

There are two subtasks left from this task that I'm unlikely to work on more right now so I'm creating separate tasks and putting them in the backlog:

  • Chart label reactivity (and chart reactivity in general): T297860
  • i18n reactivity of 'this field is required' text not working: T298234
Slst2020 moved this task from Blocked to Done on the User-Slst2020 board.

Change 749220 merged by jenkins-bot:

[operations/deployment-charts@master] toolhub: Bump container version to 2021-12-23-121200-production

https://gerrit.wikimedia.org/r/749220