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() {