Build locale-management component for Edit Contentlet (isolated: Storybook + tests)

[erickgonzalez]

Description

Create a new locale-management component for the edit content screen of the new Edit Contentlet. Build and validate it in isolation first (Storybook + unit tests) before injecting it into the screen — the goal is to surface edge cases and missed scenarios early, and to verify whether the endpoint response provides everything the component needs.

The component renders two layouts driven by the number of locales:

Few locales (≤ 5)

• Inline card under the accordion.
• Locales grouped under Translated (first) and Pending titles, each with a count.
• Single-line rows: Language en-XX, with a Default chip at the right when applicable.
• Rows are selectable — selecting a locale switches to it (same behavior as the many-locales view).
• Manage locales link pinned in the card footer.

Many locales (> 5)

• Inline card under the accordion.
• Card has search + segmented filter (All / Translated / Pending) + the full list.
• Selecting a locale updates the selected option shown at the top of the locale list.
• Manage locales link pinned at the bottom of the list.

Manage locales link

• Hidden when the user lacks Languages portlet access.
• When visible and clicked, redirects to the Languages/Locales portlet.

Acceptance Criteria

Deliverable (isolation)

• Component is implemented as a standalone Angular component, not yet wired into the edit content screen
• Storybook stories cover every state: few (≤5) and many (>5), Translated/Pending groupings, Default chip present/absent, and empty/edge states
• Unit tests (Spectator/Jest) cover rendering logic, the ≤5 vs >5 branch, grouping/counts, selection, and the Manage-locales permission gate
• A short note documents any gaps found in the endpoint response (data the component needs but the API does not return)

Few locales (≤ 5)

• With ≤5 locales, the component renders as an inline card under the accordion
• Locales are grouped under Translated (shown first) and Pending, each with a count
• Each row is a single line showing Language en-XX
• A Default chip appears at the right of the row for the default locale only
• Selecting a row switches to that locale (consistent with the many-locales view)
• A Manage locales link is pinned in the card footer

Many locales (> 5)

• With >5 locales, the component renders as an inline card under the accordion
• The card shows a search input, a segmented filter (All / Translated / Pending), and the full list
• The segmented filter narrows the list to All / Translated / Pending respectively
• Search filters the list by language
• Selecting a locale updates the selected option shown at the top of the locale list
• A Manage locales link is pinned at the bottom of the list

Manage locales — permission & navigation

• The Manage locales link is not rendered when the user lacks Languages portlet access
• When the user has Languages portlet access, the link is shown
• Clicking the link redirects to the Languages/Locales portlet

Edge cases

• Exactly 5 locales renders the few layout; exactly 6 renders the many layout
• When all locales are translated, the Pending group/count is empty (or hidden) and Translated shows the full count
• When all locales are pending, the Translated group/count is empty (or hidden)
• A single locale renders correctly with the Default chip
• Counts in the group titles match the actual number of rows in each group

Priority

Medium

Additional Context

locales.mp4