Kobo integration page improvements

[nielsVoogt]

AB#43520

REF: AB#44468

Describe your changes

• Adding third column with recommended types
• Moving order
• Adding numbered list inside the flow
• Generic layout changes -> before/after kobo integration
• E2E edits (minor changes)

Checklist before requesting a code review

• I have performed a self-review of my code
• I have addressed all Copilot comments
• I have asked the design team to review these changes
• I have edited existing E2E tests to match new situation
• I have made sure that all automated checks pass before requesting a review
• I do not need any deviation from our PR guidelines

Portal preview-deployment

https://happy-rock-0411d2003-8823.westeurope.3.azurestaticapps.net

[Copilot]

🟡 Changes recommended

Unresolved critical and moderate findings remain in test setup, Kobo recommendations, and FSP action handling.

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Improves the Kobo integration setup flow with clearer instructions, recommended field types, FSP handling, and reusable clipboard controls.

Changes:

• Reorganizes the Kobo integration flow and adds numbered steps.
• Adds recommended field types and FSP answer guidance.
• Updates layouts, localization, and clipboard functionality.

File summaries

File	Changes and review findings
interfaces/portal/src/locale/messages.xlf	Updates extracted localization messages.
interfaces/portal/src/app/pages/program-settings-registration-data/program-settings-registration-data.page.html	Adds numbered integration steps.
interfaces/portal/src/app/pages/program-settings-registration-data/components/required-attributes/required-attributes.component.ts	Adds recommended type mappings and clipboard integration. Critical (1 vote): multi-FSP Select Many conflicts with backend validation. Moderate (3 votes): scope tooltip still contains xxxx. Moderate (2 votes): tel should map to Text, not Number. Nit (2 votes): destructure helper parameters.
interfaces/portal/src/app/pages/program-settings-registration-data/components/required-attributes/required-attributes.component.html	Adds the three-column requirements table. Moderate (3 votes): single-FSP guidance should use the hidden-field behavior instead of multi-FSP prompts.
interfaces/portal/src/app/pages/program-settings-registration-data/components/kobo-integration-card/kobo-integration-card.component.ts	Adds FSP checks, dialog handling, and navigation. Critical (3 votes): missing test dependency mocking causes a NullInjectorError. Moderate (3 votes): link action is not gated during pending or failed queries. Moderate (1 vote): no-FSP navigation targets the wrong page and needs permission gating.
interfaces/portal/src/app/pages/program-settings-registration-data/components/kobo-integration-card/kobo-integration-card.component.html	Updates the card layout and no-FSP dialog.
interfaces/portal/src/app/pages/program-settings-fsps/components/fsp-configuration-card/fsp-configuration-card.component.ts	Registers the shared clipboard component.
interfaces/portal/src/app/pages/program-settings-fsps/components/fsp-configuration-card/fsp-configuration-card.component.html	Uses the shared clipboard button.
interfaces/portal/src/app/components/copy-to-clipboard-button/copy-to-clipboard.component.ts	Adds reusable clipboard functionality.

Review details

Suppressed comments (1)

interfaces/portal/src/app/pages/program-settings-registration-data/components/kobo-integration-card/kobo-integration-card.component.ts:239

• This action is shown when no FSP configurations exist, but it navigates to the FSP integration page. That page only integrates FSPs already added to the program and explicitly tells users with no FSPs to add them on Program Information (the Budget card), so clicking “Select FSPs” cannot resolve this blocking state. Navigate to the page where program FSP membership is edited and gate the action with the corresponding permission.

    await this.router.navigate([
      '/',
      AppRoutes.program,
      this.programId(),
      AppRoutes.programSettings,
      AppRoutes.programSettingsFsps,
    ]);

• Files reviewed: 9/9 changed files
• Comments generated: 7
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[Copilot]

🟡 Changes recommended

Loading-state handling, FSP navigation and permissions, zero-FSP guidance, and the component test require correction.

Get a fresh assessment by requesting another Copilot review.

Review details

Suppressed comments (2)

interfaces/portal/src/app/pages/program-settings-registration-data/components/required-attributes/required-attributes.component.html:46

• This instruction is grammatically unclear: “options automatic field” and “answers values” do not identify what users must match. Rewrite it clearly, then regenerate messages.xlf; for example: “Ask this in the form. Each option's automatic value must exactly match the corresponding answer value shown to the right.”

              Ask this in the form. The options automatic field must match the
              answers values to the right exactly.

interfaces/portal/src/app/pages/program-settings-registration-data/components/kobo-integration-card/kobo-integration-card.component.ts:225

• This sends users to the FSP integration page, but when no FSP is selected that page only displays “No FSPs found” and directs users to Program Information (fsp-configuration-list.component.html:15-22). The actual FSP selector is in the Program Information budget form, so this recovery button currently leads to a dead end.

      AppRoutes.program,
      this.programId(),
      AppRoutes.programSettings,
      AppRoutes.programSettingsFsps,

• Files reviewed: 12/12 changed files
• Comments generated: 5
• Review effort level: Balanced