feat(mailing-lists): implement view page and edit mode improvements #219

asithade · 2026-01-05T23:28:37Z

Summary

Add mailing list detail view page with breadcrumb navigation and settings display
Add subscribers placeholder component for future functionality
Add RouterLink navigation from table titles to view page
Display group name as read-only in edit mode (cannot be changed after creation)
Fix double-prefixing bug when populating form in edit mode
Fix API tag name for getMailingListById
Add audience access and visibility label constants
Update type labels to be more descriptive

🤖 Generated with Claude Code

LFXV2-952 - Add mailing list detail view page with breadcrumb, settings display - Add subscribers placeholder component for future functionality - Add RouterLink navigation from table titles to view page - Display group name as read-only in edit mode - Fix double-prefixing bug when populating form in edit mode - Fix API tag name for getMailingListById - Add audience access and visibility label constants - Update type labels to be more descriptive 🤖 Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Asitha de Silva <[email protected]>

coderabbitai · 2026-01-05T23:28:49Z

Walkthrough

Adds a mailing list detail view and subscribers component, makes mailing list name read-only in edit mode, updates routing and service query key, and adjusts mailing-list label constants and visibility/audience mappings.

Changes

Cohort / File(s)	Summary
Mailing List Basic Info (Edit/Create UI) `apps/lfx-one/src/app/modules/mailing-lists/components/mailing-list-basic-info/mailing-list-basic-info.component.ts`, `apps/lfx-one/src/app/modules/mailing-lists/components/mailing-list-basic-info/mailing-list-basic-info.component.html`	Added `@Input() isEditMode` and conditional template: read-only name preview in edit mode; editable input with validation in create mode.
Mailing List Subscribers (New Component + Styles + Template) `apps/lfx-one/src/app/modules/mailing-lists/components/mailing-list-subscribers/mailing-list-subscribers.component.ts`, `apps/lfx-one/src/app/modules/mailing-lists/components/mailing-list-subscribers/mailing-list-subscribers.component.html`, `apps/lfx-one/src/app/modules/mailing-lists/components/mailing-list-subscribers/mailing-list-subscribers.component.scss`	New `MailingListSubscribersComponent` and `MailingListSubscriber` interface; template renders paginated table, per-row actions, and an empty state placeholder; SCSS adds host styling.
Mailing List Manage (Parent wiring + form patching fix) `apps/lfx-one/src/app/modules/mailing-lists/mailing-list-manage/mailing-list-manage.component.html`, `apps/lfx-one/src/app/modules/mailing-lists/mailing-list-manage/mailing-list-manage.component.ts`	Passes `isEditMode` to basic-info child; when populating form in edit mode, strips non-primary service prefix from `group_name` to avoid double-prefixing.
Mailing List Table (Linking UI) `apps/lfx-one/src/app/modules/mailing-lists/components/mailing-list-table/mailing-list-table.component.ts`, `apps/lfx-one/src/app/modules/mailing-lists/components/mailing-list-table/mailing-list-table.component.html`	Added `RouterLink` and converted titles to router links navigating to `/mailing-lists/{uid}` with link styling.
Mailing List View (New Detail Page + Styles) `apps/lfx-one/src/app/modules/mailing-lists/mailing-list-view/mailing-list-view.component.ts`, `apps/lfx-one/src/app/modules/mailing-lists/mailing-list-view/mailing-list-view.component.html`, `apps/lfx-one/src/app/modules/mailing-lists/mailing-list-view/mailing-list-view.component.scss`	New standalone `MailingListViewComponent`: loads mailing list by route ID via service, exposes signals for data/loading/error, computes derived labels/links, provides refresh/error handling, and renders metadata, linked committees, features, and subscribers section; SCSS adds host and spinner animation.
Routing `apps/lfx-one/src/app/modules/mailing-lists/mailing-lists.routes.ts`	Added lazy-loaded `:id` route guarded by `authGuard` to load `MailingListViewComponent`.
Backend Service Query `apps/lfx-one/src/server/services/mailing-list.service.ts`	Changed filter key when fetching by ID from `mailing_list_uid` to `groupsio_mailing_list_uid`.
Shared Constants `packages/shared/src/constants/mailing-list.constants.ts`	Adjusted `MAILING_LIST_TYPE_LABELS` wording; added `MAILING_LIST_AUDIENCE_ACCESS_LABELS` and `MAILING_LIST_VISIBILITY_LABELS` mappings.

Sequence Diagram(s)

sequenceDiagram
    autonumber
    actor User
    participant Router
    participant MailingListViewComponent as View
    participant MailingListService as Service
    participant API

    User->>Router: Navigate to /mailing-lists/:id
    Router->>View: instantiate with route id
    View->>View: loading = true
    View->>Service: getMailingListById(id)
    Service->>API: GET /api/mailing-lists?groupsio_mailing_list_uid=:id

    alt Success
        API-->>Service: 200 { mailingList }
        Service-->>View: mailingList data
        View->>View: compute signals (breadcrumbs, labels, counts)
        View->>View: loading = false
        View->>User: render detail page (metadata, features, subscribers)
    else Error
        API-->>Service: error
        Service-->>View: throw/catch error
        View->>View: loading = false, error = true
        View->>User: show error, notify, navigate back
    end

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Possibly related PRs

feat(mailing-lists): implement create and edit functionality #217: Modifies mailing-list-basic-info with isEditMode input and conditional create/edit rendering (strong overlap).
feat(mailing-lists): add mailing lists dashboard #216: Changes across mailing-lists feature (routes, table, constants, service) that align with parts of this diff.

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately reflects the main changes: implementing a mailing list view page and edit mode improvements with read-only group name display.
Description check	✅ Passed	The description is directly related to the changeset, listing all major changes including view page, subscribers component, navigation, edit mode, API fix, and constants updates.
Linked Issues check	✅ Passed	All coding objectives from LFXV2-952 are implemented: view page with breadcrumbs and settings [new component], subscribers placeholder [new component], RouterLink navigation [table updates], read-only group name in edit mode [basic-info conditional rendering and isEditMode input], prefix stripping [manage component logic], API tag fix [service], and constant labels [mailing-list.constants].
Out of Scope Changes check	✅ Passed	All changes align with LFXV2-952 objectives; no extraneous modifications detected. Updates to routes, constants, and components are all directly related to the linked issue requirements.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch feat/LFXV2-952

📜 Recent review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 1a6da01 and 5d52934.

📒 Files selected for processing (2)

apps/lfx-one/src/app/modules/mailing-lists/mailing-list-view/mailing-list-view.component.html
apps/lfx-one/src/app/modules/mailing-lists/mailing-list-view/mailing-list-view.component.ts

🚧 Files skipped from review as they are similar to previous changes (2)

apps/lfx-one/src/app/modules/mailing-lists/mailing-list-view/mailing-list-view.component.html
apps/lfx-one/src/app/modules/mailing-lists/mailing-list-view/mailing-list-view.component.ts

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

Copilot

Pull request overview

This PR implements a comprehensive mailing list detail view page with improvements to the edit mode workflow. The changes add functionality to view mailing list details, navigate between list and detail views, prevent double-prefixing bugs in edit mode, and make the group name read-only after creation. The PR also includes new label constants for audience access and visibility, and updates type labels for better clarity.

Adds a new mailing list detail view page with breadcrumb navigation, settings display, and placeholder subscribers component
Fixes API tag naming bug and double-prefixing issue when populating forms in edit mode
Makes group name read-only in edit mode (cannot be changed after creation)

Reviewed changes

Copilot reviewed 15 out of 15 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
`packages/shared/src/constants/mailing-list.constants.ts`	Adds audience access and visibility label constants; updates type labels to be more descriptive
`apps/lfx-one/src/server/services/mailing-list.service.ts`	Fixes API tag name from `mailing_list_uid` to `groupsio_mailing_list_uid`
`apps/lfx-one/src/app/modules/mailing-lists/mailing-lists.routes.ts`	Adds new `:id` route for mailing list detail view
`apps/lfx-one/src/app/modules/mailing-lists/mailing-list-view/mailing-list-view.component.ts`	Implements new view component with computed signals for displaying mailing list details
`apps/lfx-one/src/app/modules/mailing-lists/mailing-list-view/mailing-list-view.component.html`	Template for detail view showing breadcrumbs, settings, linked committees, and subscribers
`apps/lfx-one/src/app/modules/mailing-lists/mailing-list-view/mailing-list-view.component.scss`	Minimal styles for view component including spinner animation
`apps/lfx-one/src/app/modules/mailing-lists/mailing-list-manage/mailing-list-manage.component.ts`	Fixes double-prefixing bug by stripping prefix when populating form in edit mode
`apps/lfx-one/src/app/modules/mailing-lists/mailing-list-manage/mailing-list-manage.component.html`	Passes `isEditMode` flag to basic info component
`apps/lfx-one/src/app/modules/mailing-lists/components/mailing-list-table/mailing-list-table.component.ts`	Adds RouterLink import for navigation
`apps/lfx-one/src/app/modules/mailing-lists/components/mailing-list-table/mailing-list-table.component.html`	Updates table titles to be clickable links to detail view
`apps/lfx-one/src/app/modules/mailing-lists/components/mailing-list-subscribers/mailing-list-subscribers.component.ts`	Placeholder component for future subscriber functionality
`apps/lfx-one/src/app/modules/mailing-lists/components/mailing-list-subscribers/mailing-list-subscribers.component.html`	Template for subscribers table with placeholder empty state
`apps/lfx-one/src/app/modules/mailing-lists/components/mailing-list-subscribers/mailing-list-subscribers.component.scss`	Basic styles for subscribers component
`apps/lfx-one/src/app/modules/mailing-lists/components/mailing-list-basic-info/mailing-list-basic-info.component.ts`	Adds `isEditMode` input property
`apps/lfx-one/src/app/modules/mailing-lists/components/mailing-list-basic-info/mailing-list-basic-info.component.html`	Shows group name as read-only in edit mode with informational message

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

apps/lfx-one/src/app/modules/mailing-lists/mailing-list-view/mailing-list-view.component.html

apps/lfx-one/src/app/modules/mailing-lists/mailing-list-view/mailing-list-view.component.ts

apps/lfx-one/src/app/modules/mailing-lists/mailing-lists.routes.ts

packages/shared/src/constants/mailing-list.constants.ts

coderabbitai

Actionable comments posted: 6

Fix all issues with AI Agents 🤖

In
@apps/lfx-one/src/app/modules/mailing-lists/components/mailing-list-subscribers/mailing-list-subscribers.component.html:
- Around line 62-70: Update the empty state copy in the ng-template labeled
#emptymessage inside the mailing-list-subscribers.component.html to use clearer,
non-technical messaging; replace "No subscribers yet" and the secondary line
referencing "once the API integration is complete" with something like
"Subscriber management functionality coming soon" (or similar) so the
placeholder communicates that the feature is forthcoming rather than implying
backend work status.

In
@apps/lfx-one/src/app/modules/mailing-lists/mailing-list-view/mailing-list-view.component.html:
- Around line 110-117: The button label concatenation for the lfx-button uses
"'Manage' + committeeLabel.plural" and is missing a space; update the [label]
expression on the lfx-button in mailing-list-view.component.html to include a
space between "Manage" and committeeLabel.plural (e.g., include "Manage " or use
string interpolation) so the rendered label reads "Manage <pluralLabel>" while
leaving other attributes like size, severity, [outlined],
[routerLink]="editRoute()" and data-testid unchanged.

In
@apps/lfx-one/src/app/modules/mailing-lists/mailing-list-view/mailing-list-view.component.ts:
- Around line 136-141: When the route param is missing the code sets
this.error.set(true) but never clears the loading state; inside the switchMap
block where mailingListId is checked (the mailingListId = params?.get('id')
branch), also call this.loading.set(false) before returning of(null) so loading
is reset; update the switchMap branch that handles the missing mailingListId to
set loading false and then set error true and return of(null).

In @apps/lfx-one/src/app/modules/mailing-lists/mailing-lists.routes.ts:
- Around line 19-23: The ':id' route is declared before the more specific
':id/edit' route causing the edit route to never match; move the route object
for ':id/edit' so it appears before the ':id' route in the routes array
(preserving its loadComponent, canActivate/authGuard, and any other properties)
so that ':id/edit' is matched first and ':id' remains as the fallback for plain
id paths.

In @apps/lfx-one/src/server/services/mailing-list.service.ts:
- Line 211: Replace the tags value that currently uses the incorrect key
`groupsio_mailing_list_uid:${mailingListId}` with the established API tag key
`mailing_list_uid:${mailingListId}` so the `tags` parameter (where
`mailingListId` is interpolated) follows the same resource-specific naming
pattern (similar to `type: 'groupsio_service'` using `service_uid`) and ensures
correct API queries.

🧹 Nitpick comments (3)

apps/lfx-one/src/app/modules/mailing-lists/components/mailing-list-subscribers/mailing-list-subscribers.component.html (1)
7-15: Consider adding a tooltip to explain the disabled state.

The "Add Subscriber" button is disabled without explanation. Since this is a placeholder component, consider adding a tooltip (e.g., "Coming soon") to help users understand why the action is unavailable.
🔎 Example with tooltip
     <lfx-button
       icon="fa-light fa-user-plus"
       label="Add Subscriber"
       size="small"
       severity="secondary"
       [outlined]="true"
       [disabled]="true"
+      pTooltip="Subscriber management coming soon"
+      tooltipPosition="left"
       data-testid="mailing-list-add-subscriber-button">
     </lfx-button>
Note: This assumes PrimeNG tooltip directive is available. If not, you can use an LFX wrapper or alternative tooltip solution.
packages/shared/src/constants/mailing-list.constants.ts (1)
52-55: Consider a more type-safe approach for boolean-keyed labels.

Using string literals 'true' and 'false' as keys works but requires string coercion at call sites (e.g., String(isPublic)). A simple helper function or a different structure could improve type safety:
🔎 Alternative approach
// Option 1: Helper function approach
export const getMailingListVisibilityLabel = (isPublic: boolean): string =>
  isPublic ? 'Public' : 'Members Only';

// Option 2: Keep current structure (acceptable as-is)
apps/lfx-one/src/app/modules/mailing-lists/components/mailing-list-subscribers/mailing-list-subscribers.component.ts (1)
11-23: Consider moving interface to shared package.

Per coding guidelines, shared types and interfaces should be centralized in @lfx-one/shared. While this is marked as a placeholder, if the interface will be used across components or services when the API is integrated, it should live in packages/shared/src/interfaces/.

Additionally, consider defining enums for deliveryMode and role instead of inline union types for better maintainability, per coding guidelines.
🔎 Suggested structure in shared package
// packages/shared/src/enums/mailing-list.enum.ts
export enum MailingListSubscriberDeliveryMode {
  INDIVIDUAL = 'individual',
  DIGEST = 'digest',
  NONE = 'none',
}

export enum MailingListSubscriberRole {
  OWNER = 'owner',
  MODERATOR = 'moderator',
  MEMBER = 'member',
}

// packages/shared/src/interfaces/mailing-list.interface.ts
export interface MailingListSubscriber {
  uid: string;
  name: string;
  email: string;
  title?: string;
  organization?: string;
  deliveryMode: MailingListSubscriberDeliveryMode;
  role: MailingListSubscriberRole;
}

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between fee0fef and 1a6da01.

📒 Files selected for processing (15)

apps/lfx-one/src/app/modules/mailing-lists/components/mailing-list-basic-info/mailing-list-basic-info.component.html
apps/lfx-one/src/app/modules/mailing-lists/components/mailing-list-basic-info/mailing-list-basic-info.component.ts
apps/lfx-one/src/app/modules/mailing-lists/components/mailing-list-subscribers/mailing-list-subscribers.component.html
apps/lfx-one/src/app/modules/mailing-lists/components/mailing-list-subscribers/mailing-list-subscribers.component.scss
apps/lfx-one/src/app/modules/mailing-lists/components/mailing-list-subscribers/mailing-list-subscribers.component.ts
apps/lfx-one/src/app/modules/mailing-lists/components/mailing-list-table/mailing-list-table.component.html
apps/lfx-one/src/app/modules/mailing-lists/components/mailing-list-table/mailing-list-table.component.ts
apps/lfx-one/src/app/modules/mailing-lists/mailing-list-manage/mailing-list-manage.component.html
apps/lfx-one/src/app/modules/mailing-lists/mailing-list-manage/mailing-list-manage.component.ts
apps/lfx-one/src/app/modules/mailing-lists/mailing-list-view/mailing-list-view.component.html
apps/lfx-one/src/app/modules/mailing-lists/mailing-list-view/mailing-list-view.component.scss
apps/lfx-one/src/app/modules/mailing-lists/mailing-list-view/mailing-list-view.component.ts
apps/lfx-one/src/app/modules/mailing-lists/mailing-lists.routes.ts
apps/lfx-one/src/server/services/mailing-list.service.ts
packages/shared/src/constants/mailing-list.constants.ts

🧰 Additional context used

📓 Path-based instructions (9)

{apps,packages}/**/*.{ts,tsx,js,html,scss,css}