Add ETH and ROLV to Language Lookup Dropdown

[rdonigian]

Addresses #1701

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds ETH and ROLV columns to the Language lookup: updates GraphQL fragment to fetch code fields, extends LookupField to accept custom option rendering, implements a Paper-based dropdown with header and fixed-width code columns, and adds Jest/RTL tests covering rendering and search results.

Changes

Cohort / File(s)	Summary
LanguageField implementation & tests src/components/form/Lookup/Language/LanguageField.tsx, src/components/form/Lookup/Language/LanguageField.test.tsx, src/components/form/Lookup/Language/LanguageLookup.graphql	Implements LanguageDropdownPaper (Paper header + minWidth), adds fixed-width ETH/ROLV columns and renderOption to present language rows with truncated name plus ETH/ROLV codes; updates GraphQL fragment to include ethnologue { code { value } } and registryOfLanguageVarietiesCode { value }; adds tests that stub session, mock Apollo queries, and assert combobox, header, and row rendering (including fallback name handling and multi-result rendering).
LookupField enhancement src/components/form/Lookup/LookupField.tsx	Adds optional renderOption prop (passed as renderOptionOverride) and uses it for Autocomplete’s renderOption, falling back to prior default rendering when not provided.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

• Convert Language List to Datagrid #1644: Adds ethnologue and registry code fields to language GraphQL fragments and UI columns, closely related to the ETH/ROLV additions in this PR.

🚥 Pre-merge checks | ✅ 1 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Description check	❓ Inconclusive	No description was provided by the author, making it impossible to assess relevance to the changeset.	Add a pull request description explaining the purpose and context of adding ETH and ROLV codes to the Language Lookup dropdown.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main change: adding ETH and ROLV code columns to the Language Lookup dropdown interface.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch add-eth-rolv-to-language-lookup

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/form/Lookup/Language/LanguageField.tsx`:
- Around line 1-2: The import for MUI's Box in LanguageField.tsx is from
'@mui/system' but should come from '@mui/material'; update the import statement
so Box is imported alongside Paper and PaperProps from '@mui/material' (i.e.,
ensure the module specifier for Box matches Paper/PaperProps), then run the
linter/build to confirm no other import inconsistencies remain.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: b32d45da-2af2-4516-82a0-365b333c2e9d

📥 Commits

Reviewing files that changed from the base of the PR and between 4b16ad9 and e662bfe.

📒 Files selected for processing (4)

• src/components/form/Lookup/Language/LanguageField.test.tsx
• src/components/form/Lookup/Language/LanguageField.tsx
• src/components/form/Lookup/Language/LanguageLookup.graphql
• src/components/form/Lookup/LookupField.tsx

[coderabbitai]

🧹 Nitpick comments (2)

src/components/form/Lookup/Language/LanguageField.tsx (1)

83-83: Nullable code values will render as empty — verify this is the intended UX.

Both ethnologue.code.value and registryOfLanguageVarietiesCode.value are typed as SecuredStringNullable per the GraphQL fragment, meaning they can be null. The current implementation silently renders nothing for null values, which creates an empty column cell. If a placeholder (e.g., — or N/A) is preferred for clarity, consider adding a fallback.

Optional: add fallback for null codes

           >
-            {option.ethnologue.code.value}
+            {option.ethnologue.code.value ?? '—'}
           </Box>

           >
-            {option.registryOfLanguageVarietiesCode.value}
+            {option.registryOfLanguageVarietiesCode.value ?? '—'}
           </Box>

Also applies to: 94-94

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/form/Lookup/Language/LanguageField.tsx` at line 83, The
Ethnologue/registry code fields are SecuredStringNullable and currently render
empty when null; update the LanguageField rendering to provide a clear fallback
(e.g., "—" or "N/A") instead of an empty cell by checking
option.ethnologue.code.value and option.registryOfLanguageVarietiesCode.value
before outputting them; modify the JSX in LanguageField (where it references
option.ethnologue.code.value and option.registryOfLanguageVarietiesCode.value)
to render the value if present or the chosen placeholder when null.

src/components/form/Lookup/Language/LanguageField.test.tsx (1)

129-156: Consider adding a test for the "Create" option rendering.

The renderOption in LanguageField.tsx handles a string option case with Create "${option}". This path isn't covered by the current tests. Adding coverage would ensure the create-new-language flow renders correctly.

Example test for create option

it('shows create option for unmatched input', async () => {
  const input = setup([searchMock('Xyz', [])]); // empty results
  search(input, 'Xyz');

  await waitFor(() => {
    expect(screen.getByText('Create "Xyz"')).toBeInTheDocument();
  });
});

Note: This may require the useSession mock to return appropriate powers (e.g., ['CreateLanguage']) for the create option to appear.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/components/form/Lookup/Language/LanguageField.test.tsx` around lines 129
- 156, Add a test that covers the string-option "Create" branch in
LanguageField's renderOption by simulating no search results and an unmatched
input so the UI shows Create "Xyz": update the test (LanguageField.test.tsx) to
call setup and search (using existing setup, search and searchMock helpers) with
an empty result array for the query (e.g., 'Xyz'), mock useSession to include
the CreateLanguage permission/power so the create option is allowed, then
waitFor and assert that the text Create "Xyz" is in the document; focus on
exercising the renderOption string branch and reuse setup/searchMock to avoid
duplicating wiring.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/components/form/Lookup/Language/LanguageField.test.tsx`:
- Around line 129-156: Add a test that covers the string-option "Create" branch
in LanguageField's renderOption by simulating no search results and an unmatched
input so the UI shows Create "Xyz": update the test (LanguageField.test.tsx) to
call setup and search (using existing setup, search and searchMock helpers) with
an empty result array for the query (e.g., 'Xyz'), mock useSession to include
the CreateLanguage permission/power so the create option is allowed, then
waitFor and assert that the text Create "Xyz" is in the document; focus on
exercising the renderOption string branch and reuse setup/searchMock to avoid
duplicating wiring.

In `@src/components/form/Lookup/Language/LanguageField.tsx`:
- Line 83: The Ethnologue/registry code fields are SecuredStringNullable and
currently render empty when null; update the LanguageField rendering to provide
a clear fallback (e.g., "—" or "N/A") instead of an empty cell by checking
option.ethnologue.code.value and option.registryOfLanguageVarietiesCode.value
before outputting them; modify the JSX in LanguageField (where it references
option.ethnologue.code.value and option.registryOfLanguageVarietiesCode.value)
to render the value if present or the chosen placeholder when null.

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 30e2ee96-8366-4731-a52c-b7c8f2be82bc

📥 Commits

Reviewing files that changed from the base of the PR and between e662bfe and c92a746.

📒 Files selected for processing (2)

• src/components/form/Lookup/Language/LanguageField.test.tsx
• src/components/form/Lookup/Language/LanguageField.tsx

[brentkulwicki]

I still don't understand how Etherum applies to Bible translations, but LGTM 😹