Skip to content

feat(davinci-client): add QRCode collector support#562

Open
ryanbas21 wants to merge 1 commit intomainfrom
qr-code
Open

feat(davinci-client): add QRCode collector support#562
ryanbas21 wants to merge 1 commit intomainfrom
qr-code

Conversation

@ryanbas21
Copy link
Copy Markdown
Collaborator

@ryanbas21 ryanbas21 commented Mar 30, 2026

Jira

https://pingidentity.atlassian.net/browse/SDKS-4686

Summary

  • Adds QR_CODE field type support to the DaVinci client SDK, enabling applications to render QR codes returned by DaVinci flows
  • Introduces QrCodeCollector (NoValueCollector family) with output.src (base64 data URI) and output.fallbackText (manual pairing key)
  • Wires QR_CODE field dispatch in the node reducer with defensive fallbacks for malformed server responses
  • Adds QR code rendering component to the sample davinci-app

Changes

davinci-client

  • davinci.types.ts — New QrCodeField type (type: 'QR_CODE', key, content, fallbackText?)
  • collector.types.ts — New QrCodeCollectorBase interface with src and fallbackText in output
  • collector.utils.tsreturnQrCodeCollector factory with defensive fallbacks matching returnNoValueCollector pattern
  • node.reducer.tsQR_CODE early return before switch (same pattern as LABEL)
  • node.types.ts / types.tsQrCodeCollector registered in Collectors union and public API

davinci-app (sample)

  • components/qr-code.ts — Renders QR code <img> with fallback text, checks collector.error
  • main.ts — Wires QrCodeCollector branch into render loop
  • server-configs.ts — Adds QR code flow test config

Tests

  • 5 unit tests for returnQrCodeCollector (happy path, missing fallbackText, missing content, missing key, accumulated errors)
  • 1 reducer integration test for QR_CODE field dispatch
  • Type-level test updates for Collectors union

Test plan

  • 232 tests pass (nx run @forgerock/davinci-client:nxTest)
  • Typecheck clean for davinci-client and davinci-app
  • App builds successfully
  • Manual: navigate to http://localhost:5829/?clientId=c12743f9-08e8-4420-a624-71bbb08e9fe1 and verify QR code renders
Screenshot 2026-03-30 at 1 36 39 PM

Summary by CodeRabbit

  • New Features

    • Added QR code collector support: renders QR code images with optional manual code text and integrates into the collector flow.
  • Tests

    • Added unit and integration tests covering QR code collector creation, error cases, and reducer behavior.
  • Chores

    • Updated server client configuration and added a release changeset for the client package.

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Mar 30, 2026

🦋 Changeset detected

Latest commit: 65a6b01

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages
Name Type
@forgerock/davinci-client Minor
@forgerock/device-client Minor
@forgerock/journey-client Minor
@forgerock/oidc-client Minor
@forgerock/protect Minor
@forgerock/sdk-types Minor
@forgerock/sdk-utilities Minor
@forgerock/iframe-manager Minor
@forgerock/sdk-logger Minor
@forgerock/sdk-oidc Minor
@forgerock/sdk-request-middleware Minor
@forgerock/storage Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@coderabbitai
Copy link
Copy Markdown

coderabbitai bot commented Mar 30, 2026

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a7f18c07-f421-46ae-b589-48c90cb6fa53

📥 Commits

Reviewing files that changed from the base of the PR and between 16433eb and eb68c9c.

📒 Files selected for processing (13)
  • .changeset/fast-ways-rest.md
  • e2e/davinci-app/components/qr-code.ts
  • e2e/davinci-app/main.ts
  • e2e/davinci-app/server-configs.ts
  • packages/davinci-client/src/lib/collector.types.ts
  • packages/davinci-client/src/lib/collector.utils.test.ts
  • packages/davinci-client/src/lib/collector.utils.ts
  • packages/davinci-client/src/lib/davinci.types.ts
  • packages/davinci-client/src/lib/node.reducer.test.ts
  • packages/davinci-client/src/lib/node.reducer.ts
  • packages/davinci-client/src/lib/node.types.test-d.ts
  • packages/davinci-client/src/lib/node.types.ts
  • packages/davinci-client/src/types.ts
✅ Files skipped from review due to trivial changes (5)
  • packages/davinci-client/src/lib/node.types.test-d.ts
  • .changeset/fast-ways-rest.md
  • packages/davinci-client/src/types.ts
  • packages/davinci-client/src/lib/node.types.ts
  • packages/davinci-client/src/lib/collector.utils.test.ts
🚧 Files skipped from review as they are similar to previous changes (8)
  • packages/davinci-client/src/lib/node.reducer.ts
  • e2e/davinci-app/main.ts
  • packages/davinci-client/src/lib/davinci.types.ts
  • packages/davinci-client/src/lib/node.reducer.test.ts
  • packages/davinci-client/src/lib/collector.types.ts
  • e2e/davinci-app/components/qr-code.ts
  • packages/davinci-client/src/lib/collector.utils.ts
  • e2e/davinci-app/server-configs.ts

📝 Walkthrough

Walkthrough

Adds QR code collector support: new field and collector types, factory and reducer integration, tests, an e2e UI component to render QR codes (with fallback text and error handling), and an updated e2e server config entry.

Changes

Cohort / File(s) Summary
Type System & Public Types
packages/davinci-client/src/lib/collector.types.ts, packages/davinci-client/src/lib/davinci.types.ts, packages/davinci-client/src/lib/node.types.ts, packages/davinci-client/src/types.ts
Introduced QrCodeField and QrCodeCollector types; extended ReadOnlyFields, NoValueCollectorTypes, NoValueCollectors, and Collectors unions to include QR code variants.
Collector Utilities & Tests
packages/davinci-client/src/lib/collector.utils.ts, packages/davinci-client/src/lib/collector.utils.test.ts
Added returnQrCodeCollector(field, idx) factory producing QrCodeCollector with validation and error accumulation; added unit tests covering success and error cases.
Reducer & Node Tests
packages/davinci-client/src/lib/node.reducer.ts, packages/davinci-client/src/lib/node.reducer.test.ts, packages/davinci-client/src/lib/node.types.test-d.ts
Reducer now maps QR_CODE fields to returnQrCodeCollector; expanded initial collector types and added tests validating collector shape and IDs.
E2E App UI
e2e/davinci-app/components/qr-code.ts, e2e/davinci-app/main.ts
Added QR code component that appends an image (src from collector.output.src) and optional fallback text to a provided form element; integrated component into main collector render loop.
E2E Server Configs
e2e/davinci-app/server-configs.ts
Removed revoke scope from an existing client config and added a new OAuth client entry with openid profile email scope and Ping well-known URL.
Release Metadata
.changeset/fast-ways-rest.md
Added changeset declaring a minor release bump for davinci-client documenting QR code collector support.

Sequence Diagram(s)

mermaid
sequenceDiagram
participant Field as DaVinci Field (QR_CODE)
participant Reducer as Node Reducer
participant Collector as QrCodeCollector (factory)
participant UI as e2e QR Component
participant Form as HTMLFormElement

Field->>Reducer: dispatch node/next with field
Reducer->>Collector: returnQrCodeCollector(field, idx)
Collector-->>Reducer: QrCodeCollector (with output, error)
Reducer-->>UI: pass collector to rendering loop
UI->>Form: append image / fallback text or error message

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

  • ancheetah
  • cerebrl

Poem

I nibble on pixels, hop with glee,
A tiny QR blossom for you and me,
Squares align, a silent little dance,
Collected tokens get their chance—
Hooray for code and rabbit prance! 🐰

🚥 Pre-merge checks | ✅ 3
✅ Passed checks (3 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and specifically describes the main feature being added: QR Code collector support for the davinci-client package.
Description check ✅ Passed The pull request description is comprehensive and well-structured, including JIRA ticket reference, clear summary, detailed changes by package, test plan with results, and manual verification steps.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

✏️ 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 qr-code

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

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

@nx-cloud
Copy link
Copy Markdown
Contributor

nx-cloud bot commented Mar 30, 2026

View your CI Pipeline Execution ↗ for commit 65a6b01

Command Status Duration Result
nx run-many -t build --no-agents ✅ Succeeded <1s View ↗
nx affected -t build lint test typecheck e2e-ci ✅ Succeeded 1m View ↗

☁️ Nx Cloud last updated this comment at 2026-03-30 21:02:51 UTC

@codecov-commenter
Copy link
Copy Markdown

codecov-commenter commented Mar 30, 2026

Codecov Report

❌ Patch coverage is 93.33333% with 2 lines in your changes missing coverage. Please review.
✅ Project coverage is 14.86%. Comparing base (5d6747a) to head (6b95a67).
⚠️ Report is 14 commits behind head on main.

Files with missing lines Patch % Lines
packages/davinci-client/src/lib/collector.utils.ts 92.59% 2 Missing ⚠️

❌ Your project status has failed because the head coverage (14.86%) is below the target coverage (40.00%). You can increase the head coverage or adjust the target coverage.

Additional details and impacted files
@@             Coverage Diff             @@
##             main     #562       +/-   ##
===========================================
- Coverage   70.90%   14.86%   -56.05%     
===========================================
  Files          53      153      +100     
  Lines        2021    26292    +24271     
  Branches      377     1067      +690     
===========================================
+ Hits         1433     3907     +2474     
- Misses        588    22385    +21797     
Files with missing lines Coverage Δ
packages/davinci-client/src/lib/collector.types.ts 100.00% <ø> (ø)
packages/davinci-client/src/lib/davinci.types.ts 100.00% <ø> (ø)
packages/davinci-client/src/lib/node.reducer.ts 67.93% <100.00%> (ø)
packages/davinci-client/src/lib/node.types.ts 100.00% <ø> (ø)
packages/davinci-client/src/types.ts 50.00% <ø> (ø)
packages/davinci-client/src/lib/collector.utils.ts 81.00% <92.59%> (ø)

... and 95 files with indirect coverage changes

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new bot commented Mar 30, 2026

Open in StackBlitz

@forgerock/davinci-client

pnpm add https://pkg.pr.new/ForgeRock/ping-javascript-sdk/@forgerock/davinci-client@562

@forgerock/device-client

pnpm add https://pkg.pr.new/ForgeRock/ping-javascript-sdk/@forgerock/device-client@562

@forgerock/journey-client

pnpm add https://pkg.pr.new/ForgeRock/ping-javascript-sdk/@forgerock/journey-client@562

@forgerock/oidc-client

pnpm add https://pkg.pr.new/ForgeRock/ping-javascript-sdk/@forgerock/oidc-client@562

@forgerock/protect

pnpm add https://pkg.pr.new/ForgeRock/ping-javascript-sdk/@forgerock/protect@562

@forgerock/sdk-types

pnpm add https://pkg.pr.new/ForgeRock/ping-javascript-sdk/@forgerock/sdk-types@562

@forgerock/sdk-utilities

pnpm add https://pkg.pr.new/ForgeRock/ping-javascript-sdk/@forgerock/sdk-utilities@562

@forgerock/iframe-manager

pnpm add https://pkg.pr.new/ForgeRock/ping-javascript-sdk/@forgerock/iframe-manager@562

@forgerock/sdk-logger

pnpm add https://pkg.pr.new/ForgeRock/ping-javascript-sdk/@forgerock/sdk-logger@562

@forgerock/sdk-oidc

pnpm add https://pkg.pr.new/ForgeRock/ping-javascript-sdk/@forgerock/sdk-oidc@562

@forgerock/sdk-request-middleware

pnpm add https://pkg.pr.new/ForgeRock/ping-javascript-sdk/@forgerock/sdk-request-middleware@562

@forgerock/storage

pnpm add https://pkg.pr.new/ForgeRock/ping-javascript-sdk/@forgerock/storage@562

commit: 65a6b01

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 30, 2026

Deployed 10852f2 to https://ForgeRock.github.io/ping-javascript-sdk/pr-562/10852f274efb8f49119ab33422db4ea7490e178d branch gh-pages in ForgeRock/ping-javascript-sdk

@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Mar 30, 2026

📦 Bundle Size Analysis

📦 Bundle Size Analysis

🚨 Significant Changes

🔻 @forgerock/device-client - 0.0 KB (-9.7 KB, -100.0%)
🔻 @forgerock/journey-client - 0.0 KB (-87.8 KB, -100.0%)

📊 Minor Changes

📉 @forgerock/device-client - 9.7 KB (-0.0 KB)
📈 @forgerock/davinci-client - 41.6 KB (+0.4 KB)

➖ No Changes

@forgerock/sdk-utilities - 11.2 KB
@forgerock/sdk-request-middleware - 4.5 KB
@forgerock/iframe-manager - 2.4 KB
@forgerock/sdk-oidc - 4.8 KB
@forgerock/storage - 1.5 KB
@forgerock/sdk-logger - 1.6 KB
@forgerock/oidc-client - 24.9 KB
@forgerock/protect - 150.1 KB
@forgerock/journey-client - 87.8 KB
@forgerock/sdk-types - 7.9 KB


14 packages analyzed • Baseline from latest main build

Legend

🆕 New package
🔺 Size increased
🔻 Size decreased
➖ No change

ℹ️ How bundle sizes are calculated
  • Current Size: Total gzipped size of all files in the package's dist directory
  • Baseline: Comparison against the latest build from the main branch
  • Files included: All build outputs except source maps and TypeScript build cache
  • Exclusions: .map, .tsbuildinfo, and .d.ts.map files

🔄 Updated automatically on each push to this PR

Add QR_CODE field type support to the DaVinci client SDK,
enabling applications to render QR codes returned by DaVinci flows.

- Add QrCodeField type and QrCodeCollectorBase interface
- Add returnQrCodeCollector factory with defensive fallbacks
- Wire QR_CODE dispatch in node reducer (early return, same as LABEL)
- Export QrCodeCollector in public API types
- Add QR code component and config to sample davinci-app
- Add unit tests for factory and reducer integration
Copy link
Copy Markdown

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
e2e/davinci-app/components/qr-code.ts (1)

10-14: Consider adding a data-testid to the error element for e2e test coverage.

This would enable testing error scenarios in automated tests.

🧪 Proposed improvement
   if (collector.error) {
     const errorEl = document.createElement('p');
     errorEl.innerText = `QR Code error: ${collector.error}`;
+    errorEl.setAttribute('data-testid', 'qr-code-error');
     formEl.appendChild(errorEl);
     return;
   }
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@e2e/davinci-app/components/qr-code.ts` around lines 10 - 14, Add a
data-testid attribute to the error paragraph so e2e tests can select it: when
handling collector.error in the QR code component (the branch that creates
errorEl and appends to formEl), set errorEl.dataset.testid = 'qr-code-error' (or
use errorEl.setAttribute('data-testid', 'qr-code-error')) before appending; keep
the existing innerText and return behavior unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@e2e/davinci-app/components/qr-code.ts`:
- Around line 10-14: Add a data-testid attribute to the error paragraph so e2e
tests can select it: when handling collector.error in the QR code component (the
branch that creates errorEl and appends to formEl), set errorEl.dataset.testid =
'qr-code-error' (or use errorEl.setAttribute('data-testid', 'qr-code-error'))
before appending; keep the existing innerText and return behavior unchanged.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 554b1372-8058-424c-9dda-d435ac4bab4a

📥 Commits

Reviewing files that changed from the base of the PR and between 67c2191 and 16433eb.

📒 Files selected for processing (12)
  • e2e/davinci-app/components/qr-code.ts
  • e2e/davinci-app/main.ts
  • e2e/davinci-app/server-configs.ts
  • packages/davinci-client/src/lib/collector.types.ts
  • packages/davinci-client/src/lib/collector.utils.test.ts
  • packages/davinci-client/src/lib/collector.utils.ts
  • packages/davinci-client/src/lib/davinci.types.ts
  • packages/davinci-client/src/lib/node.reducer.test.ts
  • packages/davinci-client/src/lib/node.reducer.ts
  • packages/davinci-client/src/lib/node.types.test-d.ts
  • packages/davinci-client/src/lib/node.types.ts
  • packages/davinci-client/src/types.ts

nx-cloud[bot]

This comment was marked as outdated.

Copy link
Copy Markdown
Contributor

@nx-cloud nx-cloud bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nx Cloud has identified a flaky task in your failed CI:

🔂 Since the failure was identified as flaky, we triggered a CI rerun by adding an empty commit to this branch.

Nx Cloud View detailed reasoning in Nx Cloud ↗

🔔 Heads up, your workspace has pending recommendations ↗ to auto-apply fixes for similar failures.


🎓 Learn more about Self-Healing CI on nx.dev

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Development

Successfully merging this pull request may close these issues.

2 participants