Page MenuHomePhabricator

Changing languages causes tabs to switch
Closed, ResolvedPublicBUG REPORT

Description

Context

In views with several tabs, such as "Add or remove tools", changing the language while on any other tab than the first one causes the view to switch to the first tab.

To reproduce:

  1. Go to "Add or Remove tools"
  2. Click the second tab ("Submit toolinfo.json url")
  3. Change the language to French
  4. View bounces back to the first tab ("Create a new tool")

If you have filled in part of the form before you change languages and get bounced back to the first tab, the data you have filled in persists, making it seem that the form component itself doesn't reload.

User Story

As a Toolhub user changing my language,
I want to remain in the same view
so that I don't have to repeat my actions

Acceptance Criteria

Event Timeline

I think this is related to the use of :key="item.label" that I noticed in T296283#7525393. The label is not a stable identifier because it is a localized string.

bd808 triaged this task as Medium priority.Dec 2 2021, 11:07 PM
sdkim subscribed.

@Slst2020 Do you know if this occurs anywhere else other than the Add/remove tool page?

@Slst2020 Do you know if this occurs anywhere else other than the Add/remove tool page?

Yes, it also occurs on the Developer settings page.

I think I have found something that makes the selected tab stay through the locale switch. In the setLocale method of vue/store/locale.js we use vm.$router.push to add the new locale to the query string. When I change that to also preserve anything already in the query string the selected tab seems to stay selected.

diff --git i/vue/src/store/locale.js w/vue/src/store/locale.js
index 23d06ab..2b0826c 100644
--- i/vue/src/store/locale.js
+++ w/vue/src/store/locale.js
@@ -145,7 +145,9 @@ export const actions = {

             // Show the locale in the query string if it changed
             if ( !initial && vm.$route.query.uselang !== locale ) {
-                vm.$router.push( { query: { uselang: locale } } );
+                vm.$router.push( {
+                    query: { ...vm.$route.query, uselang: locale }
+                } );
             }

             // Update our OpenAPI schema using the new locale, but only if the

I tested this with the patch for T296738: Tab names are not updated when the language changes also applied, so there may be combined effects with the changes there to make the tab key invariant across locale switches.

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

[wikimedia/toolhub@main] bug: preserve active tab state across locale changes

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

bd808 changed the task status from Open to In Progress.Dec 15 2021, 5:36 PM
bd808 claimed this task.
bd808 moved this task from Groomed/Ready to Review on the Toolhub board.

Change 747552 merged by jenkins-bot:

[wikimedia/toolhub@main] bug: preserve active tab state across locale changes

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

bd808 changed the task status from In Progress to Open.Dec 21 2021, 1:22 AM
bd808 moved this task from To Do to Needs Review/Feedback on the User-bd808 board.

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

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

This has been deployed to production.