diff --git a/core/http/react-ui/src/components/addons/addonState.js b/core/http/react-ui/src/components/addons/addonState.js
index 8572d976cc..4eeb4ea3b0 100644
--- a/core/http/react-ui/src/components/addons/addonState.js
+++ b/core/http/react-ui/src/components/addons/addonState.js
@@ -86,6 +86,44 @@ export function localizedText(app, field, language) {
return fallback || ''
}
+// An installed record with its title and description in the user's language,
+// for the dialogs and cards that name an add-on. The English text stays in
+// englishTitle and englishDescription, which the search reads too.
+export function localizeRecord(rec, language) {
+ if (!rec) return rec
+ return {
+ ...rec,
+ title: localizedText(rec, 'title', language) || rec.title,
+ description: localizedText(rec, 'description', language),
+ englishTitle: rec.title,
+ englishDescription: rec.description || '',
+ }
+}
+
+// A library entry with its title and description in the user's language. The
+// entry carries the other languages in titles and descriptions (from the
+// library); a language without text, and English, keep the entry's own text.
+export function localizeEntry(entry, language) {
+ if (!entry) return entry
+ return {
+ ...entry,
+ title: localizedText({ id: entry.id, name: entry.title, title: entry.title, titles: entry.titles }, 'title', language) || entry.title,
+ description: localizedText({ description: entry.description, descriptions: entry.descriptions }, 'description', language),
+ englishTitle: entry.title,
+ englishDescription: entry.description || '',
+ }
+}
+
+// One page of library entries in the alphabetical order of the user's language,
+// by the title that the person reads. The id breaks a tie, so the order is
+// stable. It orders the page as drawn; the library still pages by its own key.
+export function sortEntriesByTitle(entries, language) {
+ let collator
+ try { collator = new Intl.Collator(language || undefined, { sensitivity: 'base', numeric: true }) } catch { collator = new Intl.Collator(undefined, { sensitivity: 'base', numeric: true }) }
+ const title = (e) => localizeEntry(e, language).title || e.id
+ return [...(entries || [])].sort((a, b) => collator.compare(title(a), title(b)) || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0))
+}
+
// The name to show for an add-on the list does not carry (not installed, or
// not usable by this viewer): its identifier with a capital first letter, so
// the page says "Voice" and not "voice".
diff --git a/core/http/react-ui/src/components/catalog/CatalogView.jsx b/core/http/react-ui/src/components/catalog/CatalogView.jsx
index c8d9a7cf16..3cf3533d49 100644
--- a/core/http/react-ui/src/components/catalog/CatalogView.jsx
+++ b/core/http/react-ui/src/components/catalog/CatalogView.jsx
@@ -18,10 +18,11 @@ import './catalog.css'
// onQueryChange (nextQuery) => void
// renderEntry (entry) => node, one list item body
// reloadToken change it to search again with the same query
+// orderEntries optional (entries) => entries, the order of one page as drawn
// describeError (error) => string for a failed search
//
// Every search is cancelled when the query changes or the view unmounts.
-export default function CatalogView({ adapter, query, onQueryChange, renderEntry, reloadToken = 0, describeError, emptyTitle, emptyText, searchLabel, pageSize = adapter.pageSize || PAGE_SIZE }) {
+export default function CatalogView({ adapter, query, onQueryChange, renderEntry, reloadToken = 0, orderEntries, describeError, emptyTitle, emptyText, searchLabel, pageSize = adapter.pageSize || PAGE_SIZE }) {
const { t } = useTranslation('addons')
const normalized = useMemo(() => normalizeQuery(query), [query])
const key = queryKey(normalized)
@@ -106,7 +107,7 @@ export default function CatalogView({ adapter, query, onQueryChange, renderEntry
/>
) : (
- {state.entries.map(entry => (
+ {(orderEntries ? orderEntries(state.entries) : state.entries).map(entry => (
- {renderEntry(entry)}
))}
diff --git a/core/http/react-ui/src/utils/addonTiles.js b/core/http/react-ui/src/utils/addonTiles.js
index afdd7a1292..2e4875f939 100644
--- a/core/http/react-ui/src/utils/addonTiles.js
+++ b/core/http/react-ui/src/utils/addonTiles.js
@@ -21,6 +21,9 @@ export function tileFromApp(app, { language = 'en' } = {}) {
id: app.id,
source: 'app',
title: localizedText(app, 'title', language) || app.id,
+ // The English name, so a search finds the add-on by it in any language.
+ englishTitle: app.title || app.id,
+ englishDescription: app.description || '',
titleKey: '',
description: localizedText(app, 'description', language) || '',
icon: app.icon || '',
@@ -39,6 +42,8 @@ export function tileFromBuiltin(entry) {
id: entry.id,
source: 'builtin',
title: entry.id,
+ englishTitle: entry.id,
+ englishDescription: '',
titleKey: entry.titleKey || '',
description: '',
icon: '',
@@ -54,10 +59,14 @@ export function tileFromBuiltin(entry) {
export function buildTiles(apps, builtin, { language = 'en' } = {}) {
const first = (builtin || []).map(tileFromBuiltin)
const taken = new Set(first.map(t => t.id))
+ // The apps are in the alphabetical order of the language of the user, by the
+ // title they read; the id breaks a tie so the order is stable.
+ let collator
+ try { collator = new Intl.Collator(language || undefined, { sensitivity: 'base', numeric: true }) } catch { collator = new Intl.Collator(undefined, { sensitivity: 'base', numeric: true }) }
const rest = [...(apps || [])]
.filter(a => !taken.has(a.id))
- .sort((a, b) => (a.id < b.id ? -1 : a.id > b.id ? 1 : 0))
.map(a => tileFromApp(a, { language }))
+ .sort((a, b) => collator.compare(a.title, b.title) || (a.id < b.id ? -1 : a.id > b.id ? 1 : 0))
return [...first, ...rest]
}
@@ -65,7 +74,10 @@ export function buildTiles(apps, builtin, { language = 'en' } = {}) {
export function filterTiles(tiles, query, titleOf = (t) => t.title) {
const q = String(query || '').trim().toLowerCase()
if (!q) return tiles
- return tiles.filter(t => titleOf(t).toLowerCase().includes(q) || t.description.toLowerCase().includes(q))
+ // The text in the user's language and the English text both count, so a
+ // person finds an add-on by the name they know it by.
+ const hit = (text) => String(text || '').toLowerCase().includes(q)
+ return tiles.filter(t => hit(titleOf(t)) || hit(t.description) || hit(t.englishTitle) || hit(t.englishDescription) || hit(t.id))
}
// The pinned tiles, in the order the user chose. A pin without a tile (hidden,
diff --git a/core/http/react-ui/src/utils/addonsApi.js b/core/http/react-ui/src/utils/addonsApi.js
index 6369ce5b95..ac2dd5a099 100644
--- a/core/http/react-ui/src/utils/addonsApi.js
+++ b/core/http/react-ui/src/utils/addonsApi.js
@@ -280,6 +280,9 @@ export function createAddonsCatalogAdapter(api, { pageSize = 24 } = {}) {
id: release.id ?? release.addonId,
title: release.name || (release.id ?? release.addonId),
description: release.description || release.ui?.description || '',
+ // The other languages of the title and description, from the library.
+ titles: release.ui?.titles || {},
+ descriptions: release.ui?.descriptions || {},
version: release.version,
sourceId: release.sourceId,
// The kind of the entry: addon when the library does not say.
diff --git a/core/http/react-ui/tests/unit/addonhomecommands.test.mjs b/core/http/react-ui/tests/unit/addonhomecommands.test.mjs
index fd89679a59..57234ad86f 100644
--- a/core/http/react-ui/tests/unit/addonhomecommands.test.mjs
+++ b/core/http/react-ui/tests/unit/addonhomecommands.test.mjs
@@ -113,7 +113,7 @@ test('Home addons: disabled failed ready transitions remain pollable and restart
test('Home addons: Studio manifest is consumed generically and live Home has no identity branches', () => {
const manifest = JSON.parse(readFileSync(new URL('../../../../../addons/studio/manifest.json', import.meta.url)))
const ui = manifest.capabilities.ui
- const commands = ui.homeCommands.map(c => ({...c, page:c.page || ui.mainPage, label:c.label || ui.title, icon:c.icon || 'puzzle'}))
+ const commands = ui.homeCommands.map(c => ({...c, page:c.page || ui.mainPage, label:c.label || (typeof ui.title === 'string' ? ui.title : ui.title.en), icon:c.icon || 'puzzle'}))
const installed = app(manifest.id, commands); installed.ui.pages = ui.pages
const menu = availableCommands('home', {addonRegistry:snapshot([installed])})
assert.ok(menu.some(c => c.cmd === '/studio'))
diff --git a/core/http/react-ui/tests/unit/addons.test.mjs b/core/http/react-ui/tests/unit/addons.test.mjs
index 03467963f3..d52e085449 100644
--- a/core/http/react-ui/tests/unit/addons.test.mjs
+++ b/core/http/react-ui/tests/unit/addons.test.mjs
@@ -12,9 +12,10 @@ import {
import {
resolveTab, visibleTabs, resolveManage, stateChip, appActions, localizedText, toolSummary,
shortDigest, updateStatus, formatBytes, rangeText, parseEntryKey, addedByAddon, addedByEntry, screenshotsOf, listState, featuredEntries,
- attentionOf, sortByAttention, filterByState, hueOf, monogram, versionLabel, skillShadowNotes, skillsOf,
+ attentionOf, sortByAttention, filterByState, hueOf, monogram, versionLabel, skillShadowNotes, skillsOf, localizeEntry, localizeRecord, sortEntriesByTitle,
operationOf, upgradingTitles, staleKind, saveLastKnown, loadLastKnown,
} from '../../src/components/addons/addonState.js'
+import { buildTiles, filterTiles } from '../../src/utils/addonTiles.js'
import { createAddonsApi, createAddonsCatalogAdapter, AddonsError } from '../../src/utils/addonsApi.js'
import { runLifecycle, settleOperation, unavailableWait } from '../../src/components/addons/lifecycleFlow.js'
import { createActionBook, effectOutcome } from '../../src/components/addons/actionBook.js'
@@ -661,3 +662,71 @@ test('addons: the last list of a tab stands in for a page loaded while the owner
saveLastKnown(broken, 'a', [])
assert.equal(loadLastKnown(broken, 'a'), null)
})
+
+test('translations: a library entry shows its title and description in the user language and falls back to English per field', () => {
+ const entry = { id: 'tables', key: 's/tables/1', title: 'Tables', description: 'Databases.', titles: { it: 'Tabelle', 'pt-BR': 'Tabelas' }, descriptions: { it: 'Database.' } }
+ const it = localizeEntry(entry, 'it')
+ assert.equal(it.title, 'Tabelle')
+ assert.equal(it.description, 'Database.')
+ assert.equal(it.englishTitle, 'Tables')
+ assert.equal(it.key, 's/tables/1')
+ assert.equal(localizeEntry(entry, 'it-IT').title, 'Tabelle')
+ const pt = localizeEntry(entry, 'pt-BR')
+ assert.equal(pt.title, 'Tabelas')
+ assert.equal(pt.description, 'Databases.')
+ assert.equal(localizeEntry(entry, 'pt').title, 'Tabelas')
+ assert.equal(localizeEntry(entry, 'en').title, 'Tables')
+ assert.equal(localizeEntry(entry, 'de').title, 'Tables')
+ assert.equal(localizeEntry({ id: 'x', title: 'X', description: '' }, 'it').title, 'X')
+ assert.equal(localizeEntry(null, 'it'), null)
+})
+
+test('translations: an installed record is named in the user language in dialogs and keeps the English text', () => {
+ const rec = { id: 'tables', title: 'Tables', titles: { en: 'Tables', it: 'Tabelle' }, description: 'Databases.', descriptions: { en: 'Databases.', it: 'Database.' } }
+ const it = localizeRecord(rec, 'it')
+ assert.equal(it.title, 'Tabelle')
+ assert.equal(it.englishTitle, 'Tables')
+ assert.equal(it.description, 'Database.')
+ assert.equal(localizeRecord(rec, 'en').title, 'Tables')
+ assert.equal(localizeRecord({ id: 'x' }, 'it').title, 'x', 'the identifier is the title of last resort')
+})
+
+test('translations: the library adapter carries the languages of the entry', async () => {
+ const release = { id: 'tables', name: 'Tables', description: 'Databases.', version: '1.0.0', sourceId: 'main', ui: { title: 'Tables', description: 'Databases.', titles: { it: 'Tabelle' }, descriptions: { it: 'Database.' } } }
+ const api = { dispatch: async () => ({ releases: [release], total: 1 }) }
+ const adapter = createAddonsCatalogAdapter(api)
+ const { entries } = await adapter.search({ text: '', page: 1 })
+ assert.deepEqual(entries[0].titles, { it: 'Tabelle' })
+ assert.deepEqual(entries[0].descriptions, { it: 'Database.' })
+ const plain = createAddonsCatalogAdapter({ dispatch: async () => ({ releases: [{ id: 'x', name: 'X', version: '1', sourceId: 'main' }], total: 1 }) })
+ const out = await plain.search({ text: '', page: 1 })
+ assert.deepEqual(out.entries[0].titles, {})
+})
+
+test('translations: the installed list is searched by the translated and by the English name', () => {
+ const apps = [
+ { id: 'tables', title: 'Tables', titles: { en: 'Tables', it: 'Tabelle' }, description: 'Databases.', descriptions: { it: 'Database di tabelle.' }, enabled: true, state: 'running' },
+ { id: 'voice', title: 'Voice', titles: { it: 'Voce' }, description: 'Speak.', enabled: true, state: 'running' },
+ ]
+ const tiles = buildTiles(apps, [], { language: 'it' })
+ assert.deepEqual(tiles.map(t => t.title), ['Tabelle', 'Voce'])
+ const ids = (q) => filterTiles(tiles, q).map(t => t.id)
+ assert.deepEqual(ids('tabelle'), ['tables'])
+ assert.deepEqual(ids('TABLES'), ['tables'])
+ assert.deepEqual(ids('voce'), ['voice'])
+ assert.deepEqual(ids('voice'), ['voice'])
+ assert.deepEqual(ids('database di'), ['tables'])
+ assert.deepEqual(ids('zzz'), [])
+ assert.equal(filterTiles(tiles, '').length, 2)
+})
+
+test('translations: the lists are in the alphabetical order of the user language', () => {
+ const entries = [{ id: 'face', title: 'Face', titles: { it: 'Volto' } }, { id: 'fine-tuning', title: 'Fine-tuning' }, { id: 'discord', title: 'Discord' }, { id: 'tables', title: 'Tables', titles: { it: 'Tabelle' } }]
+ assert.deepEqual(sortEntriesByTitle(entries, 'it').map(e => e.id), ['discord', 'fine-tuning', 'tables', 'face'])
+ assert.deepEqual(sortEntriesByTitle(entries, 'en').map(e => e.id), ['discord', 'face', 'fine-tuning', 'tables'])
+ assert.deepEqual(sortEntriesByTitle(entries, 'xx-not-a-tag').map(e => e.id), ['discord', 'face', 'fine-tuning', 'tables'])
+ assert.deepEqual(sortEntriesByTitle(null, 'it'), [])
+ const apps = entries.map(e => ({ ...e, enabled: true, state: 'running' }))
+ assert.deepEqual(buildTiles(apps, [], { language: 'it' }).map(t => t.id), ['discord', 'fine-tuning', 'tables', 'face'])
+ assert.deepEqual(buildTiles(apps, [], { language: 'en' }).map(t => t.id), ['discord', 'face', 'fine-tuning', 'tables'])
+})
diff --git a/core/http/react-ui/tests/unit/providerstrings.test.mjs b/core/http/react-ui/tests/unit/providerstrings.test.mjs
index ffc937549f..0985e647ad 100644
--- a/core/http/react-ui/tests/unit/providerstrings.test.mjs
+++ b/core/http/react-ui/tests/unit/providerstrings.test.mjs
@@ -38,8 +38,13 @@ function providerNames() {
// when it cannot be an ordinary word (long or hyphenated).
names.add(m.id[0].toUpperCase() + m.id.slice(1))
if (m.id.length >= 7 || m.id.includes('-')) names.add(m.id)
+ // The English title is the name. A translation of it is the same name in
+ // the language of the reader and is often an ordinary word there (the
+ // Korean for web, the Chinese for sandbox), so it is not matched; the
+ // translated strings live in the add-on package.
const t = c.ui?.title
- for (const v of typeof t === 'string' ? [t] : Object.values(t || {})) if (typeof v === 'string' && v) names.add(v)
+ const english = typeof t === 'string' ? t : t?.en
+ if (typeof english === 'string' && english) names.add(english)
}
return [...names]
}