Tweak proposal modal, and LocaleSelect-or

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

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 (
     <div className="translations-statuses">

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<string>('')
-  const { request, setQuery } = React.useContext(GlossaryEntriesListContext)
+  const context = useContext(GlossaryEntriesListContext)
+  const { translationLocales } = context || {}
+  const [internalSelectedLocale, setInternalSelectedLocale] =
+    useState<string>('')
+  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() {
       <button
         className="current-track gap-8"
         style={{ minWidth: '200px' }}
-        aria-label="Open the locale filter"
+        aria-label={label}
         {...buttonAttributes}
       >
         <div className="track-title">
-          {selectedLocale ? nameForLocale(selectedLocale) : 'All'}
+          {selectedLocale
+            ? nameForLocale(selectedLocale)
+            : showAll
+            ? 'All'
+            : 'Select locale'}
         </div>
         {selectedLocale && (
           <span className="flag">{flagForLocale(selectedLocale)}</span>
@@ -101,29 +132,32 @@ export function LocaleSelect() {
       {open ? (
         <div {...panelAttributes} className="--options">
           <ul {...listAttributes}>
-            <li key="all" {...itemAttributes(0)}>
-              <label className="c-radio-wrapper">
-                <input
-                  type="radio"
-                  onChange={() => {
-                    setSelectedLocale('')
-                    setOpen(false)
-                  }}
-                  checked={selectedLocale === ''}
-                  name="locale_filter"
-                />
-                <div className="row gap-8">
-                  <div className="title">All</div>
-                </div>
-              </label>
-            </li>
-            {translationLocales.map((locale, i) => {
+            {showAll && (
+              <li key="all" {...itemAttributes(0)}>
+                <label className="c-radio-wrapper">
+                  <input
+                    type="radio"
+                    onChange={() => {
+                      handleLocaleChange('')
+                      setOpen(false)
+                    }}
+                    checked={selectedLocale === ''}
+                    name="locale_filter"
+                  />
+                  <div className="row gap-8">
+                    <div className="title">All</div>
+                  </div>
+                </label>
+              </li>
+            )}
+            {availableLocales.map((locale, i) => {
+              const itemIndex = showAll ? i + 1 : i
               return (
-                <li key={locale} {...itemAttributes(i + 1)}>
+                <li key={locale} {...itemAttributes(itemIndex)}>
                   <LocaleOption
                     locale={locale}
                     onChange={() => {
-                      setSelectedLocale(locale)
+                      handleLocaleChange(locale)
                       setOpen(false)
                     }}
                     checked={selectedLocale === locale}

app/javascript/components/localization/glossary-entries/list/Table.tsx

@@ -1,6 +1,6 @@
 import { SearchInput } from '@/components/common'
 import { useDebounce } from '@uidotdev/usehooks'
-import React, { useCallback, useEffect, useState } from 'react'
+import React, { useCallback, useContext, useEffect, useState } from 'react'
 import { GlossaryEntriesListContext } from '.'
 import { GlossaryEntriesTableList } from './GlossaryEntriesTableList'
 import { Tabs } from './Tabs'
@@ -72,14 +72,24 @@ function ProposeTermModal({
   isOpen: boolean
   onClose: () => void
 }) {
+  const { links, translationLocales } = useContext(GlossaryEntriesListContext)
   const [term, setTerm] = useState<string>('')
   const [description, setDescription] = useState<string>('')
+  const [locale, setLocale] = useState<string>(translationLocales[0])
+  const [translation, setTranslation] = useState<string>('')
 
   const onSave = useCallback(() => {
     const fetch = sendRequest({
-      endpoint: '',
+      endpoint: links.createGlossaryEntry,
       method: 'POST',
-      body: JSON.stringify({ term, description }),
+      body: JSON.stringify({
+        glossary_entry: {
+          term,
+          llm_instructions: description,
+          locale,
+          translation,
+        },
+      }),
     })
 
     fetch.fetch
@@ -91,7 +101,7 @@ function ProposeTermModal({
         toast.error('Failed to propose a new term.', e)
         console.error(e)
       })
-  }, [term, description])
+  }, [term, description, locale, translation])
 
   return (
     <Modal open={isOpen} onClose={onClose}>
@@ -111,7 +121,6 @@ function ProposeTermModal({
               placeholder="Enter term"
             />
 
-            {/* GENERATE NOTE ABOUT WHAT A GLOSSARY TERM IS*/}
             <p className="text-p text-textColor6 leading-130">
               A glossary term is a word or phrase that has a specific meaning
               within a particular context or field.
@@ -132,13 +141,44 @@ function ProposeTermModal({
               className="w-full border border-gray-300 rounded px-12 py-8 mb-8"
               placeholder="Enter description"
             ></textarea>
-            {/* GENERATE NOTE ABOUT WHAT A GLOSSARY TERM DESCRIPTION IS*/}
             <p className="text-p text-textColor6 leading-130">
               A glossary term description provides additional context or
               explanation about the term, helping users understand its usage and
               significance.
             </p>
           </div>
+          <div>
+            <label className="block font-semibold mb-4 text-h6">Locale</label>
+            <LocaleSelect
+              locales={[...(translationLocales || [])]}
+              value={locale}
+              onChange={setLocale}
+              showAll={false}
+              label="Select locale"
+            />
+            <p className="text-p text-textColor6 leading-130 mt-8">
+              Select the language locale for this glossary term.
+            </p>
+          </div>
+          <div>
+            <label
+              className="block font-semibold mb-4 text-h6"
+              htmlFor="translation"
+            >
+              Translation
+            </label>
+            <input
+              type="text"
+              id="translation"
+              value={translation}
+              onChange={(e) => setTranslation(e.target.value)}
+              className="w-full border border-gray-300 rounded px-12 py-8 mb-8"
+              placeholder="Enter translation"
+            />
+            <p className="text-p text-textColor6 leading-130">
+              Provide the translated term or phrase in the selected locale.
+            </p>
+          </div>
           <div className="flex items-center gap-8">
             <button
               onClick={onSave}

app/javascript/components/localization/glossary-entries/types.d.ts

@@ -55,29 +55,13 @@ type GlossaryEntriesListProps = {
       initialData: GlossaryEntriesListData
     }
   }
-  links?: { localizationGlossaryEntriesPath: string; endpoint: string }
+  links: {
+    localizationGlossaryEntriesPath: string
+    endpoint: string
+    createGlossaryEntry: string
+  }
 }
 
-// {
-//   "glossaryEntry": {
-//       "uuid": "f1ebf3cd-c7f0-4c89-bb67-aa90b0cc50c1",
-//       "locale": "de",
-//       "term": "subscription",
-//       "translation": "Abonnement",
-//       "status": "unchecked",
-//       "llmInstructions": "A recurring monthly donation to Exercism. Use the term for subscription or recurring payment",
-//       "proposals": []
-//   },
-//   "currentUserId": 1530,
-//   "links": {
-//       "glossaryEntriesListPage": "http://local.exercism.io:3020/localization/glossary_entries",
-//       "approveLlmTranslation": "http://local.exercism.io:3020/api/v2/localization/translations/f1ebf3cd-c7f0-4c89-bb67-aa90b0cc50c1/approve_llm_version",
-//       "createProposal": "http://local.exercism.io:3020/api/v2/localization/glossary_entries/GLOSSARY_ENTRY_ID/proposals?id=ID",
-//       "approveProposal": "http://local.exercism.io:3020/api/v2/localization/glossary_entries/GLOSSARY_ENTRY_ID/proposals/ID/approve",
-//       "rejectProposal": "http://local.exercism.io:3020/api/v2/localization/glossary_entries/GLOSSARY_ENTRY_ID/proposals/ID/reject",
-//       "updateProposal": "http://local.exercism.io:3020/api/v2/localization/glossary_entries/GLOSSARY_ENTRY_ID/proposals/ID"
-//   }
-// }
 type GlossaryEntriesShowProps = {
   glossaryEntry: GlossaryEntry
   currentUserId: number