diff --git a/app/helpers/react_components/localization/glossary_entries_list.rb b/app/helpers/react_components/localization/glossary_entries_list.rb
index 0bf67230f6..a4902aaac9 100644
--- a/app/helpers/react_components/localization/glossary_entries_list.rb
+++ b/app/helpers/react_components/localization/glossary_entries_list.rb
@@ -10,7 +10,8 @@ def to_s
glossary_entries:,
links: {
localization_glossary_entries_path: Exercism::Routes.localization_glossary_entries_path,
- endpoint: Exercism::Routes.api_localization_glossary_entries_path
+ endpoint: Exercism::Routes.api_localization_glossary_entries_path,
+ create_glossary_entry: Exercism::Routes.api_localization_glossary_entries_path
},
request: glossary_entries_list_request,
translation_locales: current_user.data.translator_locales
diff --git a/app/javascript/components/localization/glossary-entries/list/GlossaryEntriesTableListElement.tsx b/app/javascript/components/localization/glossary-entries/list/GlossaryEntriesTableListElement.tsx
index 3d800ffaca..31e4636c05 100644
--- a/app/javascript/components/localization/glossary-entries/list/GlossaryEntriesTableListElement.tsx
+++ b/app/javascript/components/localization/glossary-entries/list/GlossaryEntriesTableListElement.tsx
@@ -47,7 +47,7 @@ export function TranslationsWithStatus({
status,
}: {
locale: string
- status: 'unchecked' | 'approved' | 'rejected'
+ status: 'unchecked' | 'approved' | 'rejected' | 'proposed'
}) {
return (
diff --git a/app/javascript/components/localization/glossary-entries/list/LocaleSelect.tsx b/app/javascript/components/localization/glossary-entries/list/LocaleSelect.tsx
index b8468f06fe..2b88e76ea2 100644
--- a/app/javascript/components/localization/glossary-entries/list/LocaleSelect.tsx
+++ b/app/javascript/components/localization/glossary-entries/list/LocaleSelect.tsx
@@ -30,11 +30,34 @@ const LocaleOption = ({
)
}
-export function LocaleSelect() {
+export function LocaleSelect({
+ locales,
+ value,
+ onChange,
+ showAll = true,
+ label = 'Open the locale filter',
+}: {
+ locales?: string[]
+ value?: string
+ onChange?: (locale: string) => void
+ showAll?: boolean
+ label?: string
+} = {}) {
// ["hu", "de"] etc
- const { translationLocales } = useContext(GlossaryEntriesListContext)
- const [selectedLocale, setSelectedLocale] = useState
('')
- const { request, setQuery } = React.useContext(GlossaryEntriesListContext)
+ const context = useContext(GlossaryEntriesListContext)
+ const { translationLocales } = context || {}
+ const [internalSelectedLocale, setInternalSelectedLocale] =
+ useState('')
+ const { request, setQuery } = context || {}
+
+ // Use external props or fallback to internal state and context
+ const availableLocales = locales || translationLocales || []
+ const selectedLocale = value !== undefined ? value : internalSelectedLocale
+ const handleLocaleChange = onChange || setInternalSelectedLocale
+
+ const dropdownLength = showAll
+ ? availableLocales.length + 1
+ : availableLocales.length
const {
buttonAttributes,
@@ -43,7 +66,7 @@ export function LocaleSelect() {
itemAttributes,
setOpen,
open,
- } = useDropdown(translationLocales.length + 1, (i) => handleItemSelect(i), {
+ } = useDropdown(dropdownLength, (i) => handleItemSelect(i), {
placement: 'bottom',
modifiers: [
{
@@ -56,25 +79,29 @@ export function LocaleSelect() {
})
useEffect(() => {
- setQuery({ ...request.query, locale: selectedLocale || undefined })
- }, [selectedLocale])
+ // Only update query when used in context mode (not modal mode)
+ if (setQuery && request && onChange === undefined) {
+ setQuery({ ...request.query, locale: selectedLocale || undefined })
+ }
+ }, [selectedLocale, setQuery, request, onChange])
const handleItemSelect = useCallback(
(index: number) => {
- if (index === 0) {
- setSelectedLocale('')
+ if (showAll && index === 0) {
+ handleLocaleChange('')
} else {
- const locale = translationLocales[index - 1]
+ const localeIndex = showAll ? index - 1 : index
+ const locale = availableLocales[localeIndex]
if (locale) {
- setSelectedLocale(locale)
+ handleLocaleChange(locale)
}
}
setOpen(false)
},
- [translationLocales, setOpen]
+ [availableLocales, setOpen, handleLocaleChange, showAll]
)
- if (!translationLocales || translationLocales.length === 0) {
+ if (!availableLocales || availableLocales.length === 0) {
return null
}
@@ -83,11 +110,15 @@ export function LocaleSelect() {