Skip to content

feat: render msgctxt chip in key dialog - #3523

Merged
Anty0 merged 1 commit into
mainfrom
jirikuchynka/po-msgctxt-v2
May 27, 2026
Merged

feat: render msgctxt chip in key dialog#3523
Anty0 merged 1 commit into
mainfrom
jirikuchynka/po-msgctxt-v2

Conversation

@Anty0

@Anty0 Anty0 commented May 26, 2026

Copy link
Copy Markdown
Member

Summary

  • The in-context KeyDialog and the ScreenshotWithLabels tooltip now use a new <KeyName> component that splits the key name on the U+0004 separator (set by tolgee-platform when importing gettext .po files with a msgctxt) and renders the msgctxt portion as a styled chip in front of the msgid.
  • Standalone implementation — no runtime dependency on @tginternal/editor to keep this package's bundle independent of release coordination.
  • The platform-side change introducing the separator and the matching chip visual lives in the companion tolgee-platform PR.

Companion PRs

Summary by CodeRabbit

  • New Features
    • Added improved key name rendering with enhanced formatting that visually distinguishes embedded metadata using dedicated styling
    • Updated the UI across dialogs and tooltips to consistently leverage the new key name display, improving visual clarity and presentation when viewing keys with associated metadata

Review Change Stack

When tolgee-platform encodes a gettext msgctxt in a key
name using the U+0004 separator, render the msgctxt portion
as a styled chip in front of the msgid inside the in-context
KeyDialog and screenshot label tooltips, matching the
visual used on the Tolgee platform side.
@coderabbitai

coderabbitai Bot commented May 26, 2026

Copy link
Copy Markdown

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 0d07ccc5-483f-403e-85d2-11913595de41

📥 Commits

Reviewing files that changed from the base of the PR and between bee8072 and 18bde86.

📒 Files selected for processing (3)
  • packages/web/src/package/ui/KeyDialog/KeyForm.tsx
  • packages/web/src/package/ui/KeyDialog/ScreenshotGallery/ScreenshotWithLabels.tsx
  • packages/web/src/package/ui/common/KeyName.tsx

Walkthrough

A new KeyName component is introduced to standardize key name rendering with message context badge support. It detects a special separator character and conditionally wraps the prefix in a styled badge. The component is then integrated into KeyForm and ScreenshotWithLabels to replace direct string rendering.

Changes

KeyName component and integration

Layer / File(s) Summary
KeyName component with separator handling
packages/web/src/package/ui/common/KeyName.tsx
New KeyName component renders a name string with conditional separator-based styling; portions before the \u0004 separator are wrapped in a message context badge (ScMsgctxt), with the remainder rendered as normal text.
KeyForm KeyName integration
packages/web/src/package/ui/KeyDialog/KeyForm.tsx
Imports and uses KeyName component to display the input value, replacing direct {input} rendering.
ScreenshotWithLabels KeyName integration
packages/web/src/package/ui/KeyDialog/ScreenshotGallery/ScreenshotWithLabels.tsx
Imports and uses KeyName component for tooltip title rendering with consistent message context styling.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A new component hops into view,
With badges for context, styled fresh and true,
Key names now shine with separator flair,
From forms to screenshots, styled everywhere!

🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately describes the main change: introducing msgctxt chip rendering in the key dialog through a new KeyName component.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ 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 jirikuchynka/po-msgctxt-v2

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

@Anty0
Anty0 requested review from bdshadow and dkrizan May 26, 2026 14:57
@Anty0
Anty0 merged commit 1949649 into main May 27, 2026
54 of 55 checks passed
JanCizmar pushed a commit to tolgee/tolgee-platform that referenced this pull request Jun 3, 2026
Supersedes #3459
Fixes #3053

## Summary
- **Import:** the PO parser now captures the optional `msgctxt` field.
On import, Tolgee stores the pair `(msgctxt, msgid)` as a single key
name using the U+0004 EOT separator — the same convention GNU Gettext
uses internally in MO files — so two entries with the same `msgid` but
different `msgctxt` remain distinct keys.
- **Export:** the PO exporter splits the key name on U+0004 and writes
the `msgctxt` line back before `msgid`. Plural fallback now uses the
split `msgid` instead of the raw key name.
- **Parser cleanup:** header detection now requires both `msgid` and
`msgctxt` to be empty, so a malformed msgctxt-only entry can't be
misread as the header block. The legacy `PO_MSGCTXT_NOT_SUPPORTED` file
issue is no longer emitted (the enum value stays in place for
back-compat with previously stored issues).
- **UI display:** a new `<KeyName>` component renders the `msgctxt`
portion as a styled chip in front of the `msgid` across all key-name
display sites (translations grid, simple/list view, single-key page
breadcrumb, activity log, import dialogs, translation-memory rows and
tooltips, branching/merge header, screenshot label tooltips). The window
title intentionally still shows the raw key — the chip cannot render in
a `document.title` string.
- **UI edit:** the `<Editor>` component gains a `keyName` mode that
wires a new CodeMirror plugin (`KeyNamePlugin` from
`@tginternal/editor`) decorating the U+0004 with an atomic widget.
Display and edit are now visually identical — the previous
substitution-based workaround (`keyNameForEditing`/`keyNameFromEdited` +
`␄` visible-char) is removed.
- **Vite config:** added `@codemirror/state`, `@codemirror/view`,
`@codemirror/lint` to `resolve.dedupe` to avoid the "multiple instances
of @codemirror/state" runtime error introduced when `preserveSymlinks:
true` is combined with the linked `@tginternal/editor` worktree.

## Notes
- Re-importing a `.po` file that was imported before this change (when
msgctxt was silently dropped) will create new keys for the `(msgctxt,
msgid)` pairs instead of updating the existing `msgid`-only keys.
Accepted breakage — most users import once.
- An empty `msgctxt ""` collapses to a plain key without a chip,
matching gettext semantics.

## Companion PRs
- editor: tolgee/editor#8
- tolgee-js: tolgee/tolgee-js#3523
- documentation: tolgee/documentation#1111

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

* **New Features**
* Full PO msgctxt support: import/export preserves and uses context to
disambiguate identical strings.
* Key display shows visual context indicators with a tooltip linking to
docs via a new KeyName component.
* Key editor gains a new "keyName" mode for viewing/editing keys with
context.
* Import ignores stray context-only entries to avoid header mis-parsing.

* **Tests**
* Added unit and end-to-end tests for msgctxt parsing, escaping,
import/export, fixtures and UI behavior.

* **Chores**
  * Editor package updated.

<!-- review_stack_entry_start -->

[![Review Change
Stack](https://storage.googleapis.com/coderabbit_public_assets/review-stack-in-coderabbit-ui.svg)](https://app.coderabbit.ai/change-stack/tolgee/tolgee-platform/pull/3694?utm_source=github_walkthrough&utm_medium=github&utm_campaign=change_stack)

<!-- review_stack_entry_end -->
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Anty0 added a commit to tolgee/documentation that referenced this pull request Jun 3, 2026
## Summary
- Adds a new **msgctxt and key names** section to
`platform/formats/po.mdx` explaining how Tolgee encodes the gettext
`msgctxt` field into key names using the U+0004 separator.
- Includes an example, a description of the UI chip rendering, and a
link to the GNU Gettext documentation on contexts.
- Mentions `msgctxt` in the existing Feature support paragraph.

## Companion PRs
- tolgee-platform: tolgee/tolgee-platform#3694
- tolgee-js: tolgee/tolgee-js#3523
- editor: tolgee/editor#8
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants