Skip to content

Adds defensive check when generating language text in the language dropdown #5465

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
bjester merged 4 commits into from
Nov 11, 2025
Merged

Adds defensive check when generating language text in the language dropdown #5465

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
c0e1304
Adds defensive check when generating language text in the language dr…
akolson Oct 10, 2025
3e43f88
Display multiple languages option if multiple nodes with different la…
akolson Oct 30, 2025
ee6a3af
Improve language check + clean up
akolson Nov 3, 2025
da2ae21
Reverts null check in LanguageDropdown
akolson Nov 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion contentcuration/contentcuration/frontend/shared/views/LanguageDropdown.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,8 @@
},
methods: {
languageText(item) {
const firstNativeName = item.native_name.split(',')[0].trim();
const nativeName = item?.native_name || '';
const firstNativeName = nativeName.split(',')[0].trim();

@bjester bjester Oct 10, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think similarly to the node title defensive check, we should be trying to understand why this is happening and whether it's indicative of another issue. I imported shared/leUtils/Languages.js in a Node REPL and all of them had a native_name.

> Array.from(LanguagesMap.values()).filter(l => !l.native_name)
[]

Also, in the Studio database, all languages have it too.
image

@akolson akolson Oct 21, 2025

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The bug is triggered when trying to edit multiple resources with differing languages. In such cases, and empty object ({}) is returned, thus the bug. The above should be an acceptable fix, I think. However, I have posted here for designers to have their thoughts on UX.

@bjester bjester Oct 21, 2025

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We'll see what design says. If they prefer to keep it as is, perhaps we can use a Symbol to explicitly handle this situation, which will be specific enough that we wouldn't suppress any other possible issues.

@akolson akolson Oct 24, 2025

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Based on designs recommendation, a "new" language "Mixed (Mix)" will be added Languages.vue. The wording could change after string review but should be sufficient for now.

@akolson akolson Oct 24, 2025

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update: Looks like we don't need to add a new type afterall. We already have "Multiple languages (mull)" option in places.

return this.$tr('languageItemText', { language: firstNativeName, code: item.id });
},
},
Expand Down
32 changes: 31 additions & 1 deletion contentcuration/contentcuration/frontend/shared/views/__tests__/languageDropdown.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { mount } from '@vue/test-utils';
import { mount, shallowMount } from '@vue/test-utils';
import LanguageDropdown from '../LanguageDropdown.vue';
import TestForm from './TestForm.vue';
import { LanguagesList } from 'shared/leUtils/Languages';
Expand Down Expand Up @@ -61,4 +61,34 @@ describe('languageDropdown', () => {
await wrapper.vm.$nextTick();
expect(wrapper.find('.error--text').exists()).toBe(true);
});

it('returns formatted language text when native_name is present', () => {
const wrapper = shallowMount(LanguageDropdown, {
mocks: {
$tr: (key, params) => `${params.language} (${params.code})`,
},
});
const item = { native_name: 'Español,Spanish', id: 'es' };
expect(wrapper.vm.languageText(item)).toBe('Español (es)');
});

it('returns formatted language text when native_name is an empty string', () => {
const wrapper = shallowMount(LanguageDropdown, {
mocks: {
$tr: (key, params) => `${params.language} (${params.code})`,
},
});
const item = { native_name: '', id: 'de' };
expect(wrapper.vm.languageText(item)).toBe(' (de)');
});

it('returns formatted language text when native_name is missing', () => {
const wrapper = shallowMount(LanguageDropdown, {
mocks: {
$tr: (key, params) => `${params.language} (${params.code})`,
},
});
const item = { id: 'fr' };
expect(wrapper.vm.languageText(item)).toBe(' (fr)');
});
});