IS-11275 LWA: viewName built-in UIs (first: BankID wait UI) by aleixsuau · Pull Request #150 · curityio/ui-kit

aleixsuau · 2026-04-29T08:37:27Z

Jira: https://curity.atlassian.net/browse/IS-11275

Summary

Adds the built-in viewName UIs feature. The first use case covered is the BankID view name (authenticator/bankid/wait/index) to display:

Persistent spinner while polling status is pending (independent of loading).
QR code link rendered above the actions.

Read added docs (ui-kit/src/login-web-app/src/haapi-stepper/README.md:117, and ui-kit/src/login-web-app/src/haapi-stepper/feature/steps/HaapiStepperStepUI.tsx:84) and tests (ui-kit/src/login-web-app/src/haapi-stepper/feature/steps/HaapiStepperStepUI.tsx:84) for more details.

Test plan

Manual smoke against a running BankID flow (spinner persists during `pending`, drops on `done`/`failed`; QR rendered above the action group)

Notes

This branch is on top of `feature/IS-11241/rename-haapistepper-ui-components` and depends on the renames there. Once IS-11241 lands on `integration/IS-5161/login-web-app`, this branch should rebase onto integration.
The opt-in default (`undefined`) means existing consumers don't visibly change after this lands; new built-ins are purely additive.

Copilot

Pull request overview

Introduces an opt-in “viewName built-in UIs” mechanism for HaapiStepperStepUI, with an initial built-in UI implementation for the BankID polling view (authenticator/bankid/wait/index) to improve UX (persistent polling spinner + QR link positioning).

Changes:

Adds a viewName-to-built-in-UI registry (getViewNameBuiltInUI, enum + map) and integrates it into HaapiStepperStepUI behind the enableViewNameBuiltInUIs prop.
Implements BankIdViewNameBuiltInUI to show a polling-status-based spinner and render the QR link above actions.
Extends test mocks and adds unit tests + README docs covering the new opt-in behavior.

Reviewed changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
`src/login-web-app/src/haapi-stepper/util/tests/mocks.ts`	Adds BankID polling step and QR link helpers for new tests.
`src/login-web-app/src/haapi-stepper/feature/viewnames/viewname.types.ts`	Introduces enum of viewNames with built-in UIs.
`src/login-web-app/src/haapi-stepper/feature/viewnames/viewname-built-in-uis.ts`	Adds registry + selection logic for built-in UIs.
`src/login-web-app/src/haapi-stepper/feature/viewnames/index.ts`	Barrel exports for the new viewnames feature.
`src/login-web-app/src/haapi-stepper/feature/viewnames/BankIdViewNameBuiltInUI.tsx`	BankID-specific built-in UI rendering.
`src/login-web-app/src/haapi-stepper/feature/steps/HaapiStepperStepUI.tsx`	Integrates built-in UI selection via new `enableViewNameBuiltInUIs` prop.
`src/login-web-app/src/haapi-stepper/feature/steps/HaapiStepperStepUI.spec.tsx`	Adds tests validating built-in UI opt-in + BankID behavior.
`src/login-web-app/src/haapi-stepper/README.md`	Documents the new built-in UI feature and how to enable it.

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

Copilot · 2026-04-29T08:54:00Z

+export const BankIdViewNameBuiltInUI = ({ currentStep, nextStep }: HaapiStepperAPIWithRequiredCurrentStep) => {
+  const { messages, actions, links } = currentStep.dataHelpers;
+  const isQrLink = (link: HaapiStepperLink) => link.subtype?.startsWith('image/') ?? false;
+  const qrLink = links.find(isQrLink);
+  const nonQrLinks = links.filter(link => !isQrLink(link));
+  const isPollingPending =
+    currentStep.type === HAAPI_STEPS.POLLING && currentStep.properties.status === HAAPI_POLLING_STATUS.PENDING;
+
+  return (
+    <Well>
+      {isPollingPending && <Spinner width={48} height={48} mode="fullscreen" data-testid="bankid-spinner" />}
+      <HaapiStepperMessagesUI messages={messages} />
+      {qrLink && <HaapiStepperLinksUI links={[qrLink]} onClick={nextStep} />}
+      <HaapiStepperActionsUI actions={actions?.all} onAction={nextStep} />
+      {nonQrLinks.length > 0 && <HaapiStepperLinksUI links={nonQrLinks} onClick={nextStep} />}


This built-in UI renders a spinner only when status === PENDING, but (unlike the generic HaapiStepperStepUI shell) it does not render any loading indicator when loading === true. As a result, when the polling step transitions (e.g. status becomes DONE/FAILED and a next step is being fetched), users may see no spinner even though the stepper is loading.

Suggestion: incorporate the stepper loading flag here (the prop is available via HaapiStepperAPIWithRequiredCurrentStep) so that a spinner is shown when loading is true, in addition to the "pending" spinner behavior.

Rename the six UI components (Actions, Link, Links, Messages, ClientOperation, HaapiSelector) plus HaapiStepperForm and the message element factory to the existing HaapiStepper<Name>UI convention. This disambiguates the React components from the HAAPI data interfaces they render (HaapiStepperLink vs HaapiStepperLinkUI, etc.), preventing import collisions and making it obvious at a glance which layer is being referenced. Also fixes stale HaapiUIStep and Form.tsx references in README and JSDoc. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

luisgoncalves · 2026-05-07T15:24:47Z


+### ViewName built-in UIs
+
+Some HAAPI viewNames (`step.metadata.viewName`) need a UI that the generic step rendering can't deliver well. For example, the **BankID** screen needs to render a spinner while the polling status is `pending`, not only while `loading` is true, and lifts the QR code above the actions.


I think we don't need to be so specific here. Maybe just say some UIs need more tailored behavior or so.
Also no need to have such details in the table below.

luisgoncalves · 2026-05-07T15:29:30Z

+) => {
+  return createMockStep(HAAPI_STEPS.POLLING, {
+    metadata: {
+      templateArea: 'lwa',


Detail: perhaps avoid having template areas if they are not needed. This is just a side-effect of the local dev setup, but it could be misleading for people reading these tests.

luisgoncalves · 2026-05-07T15:51:17Z


+### ViewName built-in UIs
+
+Some HAAPI viewNames (`step.metadata.viewName`) need a UI that the generic step rendering can't deliver well. For example, the **BankID** screen needs to render a spinner while the polling status is `pending`, not only while `loading` is true, and lifts the QR code above the actions.


Btw: I think that "render a spinner while the polling status is pending" should be the default behavior for any polling step. I see you considered it out of scope of this ticket - and I recall there was more to be discussed about loading indicators - but please don't forget about that.

luisgoncalves · 2026-05-07T15:52:31Z

+ *
+ * The HaapiStepperStepUI component also provides built-in UIs for specific HAAPI `viewName`s that require a more
+ * tailored UI than the generic step shell can provide (e.g. the BankID QR code step, which requires lifting
+ * the QR code up and showing a spinner while polling).


Again, I don't think this is needed as it makes it look like the default is flawed.

luisgoncalves · 2026-05-07T15:54:01Z

+ * - `false` or `undefined` to keep all built-ins disabled (every view renders through the
+ *   generic shell).
+ *
+ * Composition: the matching viewName built-in UI is rendered after the `stepRenderInterceptor` has processed the


aleixsuau requested review from Copilot, luisgoncalves, urre and vahag-curity April 29, 2026 08:37

Copilot started reviewing on behalf of aleixsuau April 29, 2026 08:47 View session

aleixsuau marked this pull request as ready for review April 29, 2026 08:49

Copilot AI reviewed Apr 29, 2026

View reviewed changes

aleixsuau force-pushed the feature/IS-11241/rename-haapistepper-ui-components branch from 429ab4c to 66b0634 Compare April 30, 2026 13:24

aleixsuau changed the base branch from feature/IS-11241/rename-haapistepper-ui-components to integration/IS-5161/login-web-app May 7, 2026 09:40

aleixsuau and others added 2 commits May 7, 2026 11:47

IS-11275 Add viewName built-in UIs (first: BankID wait UI).

e2ec03d

aleixsuau force-pushed the feature/IS-11275/viewname-default-render-interceptors branch from 872d350 to e2ec03d Compare May 7, 2026 09:50

urre approved these changes May 7, 2026

View reviewed changes

luisgoncalves reviewed May 7, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

IS-11275 LWA: viewName built-in UIs (first: BankID wait UI)#150

IS-11275 LWA: viewName built-in UIs (first: BankID wait UI)#150
aleixsuau wants to merge 2 commits intointegration/IS-5161/login-web-appfrom
feature/IS-11275/viewname-default-render-interceptors

aleixsuau commented Apr 29, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Copilot AI Apr 29, 2026

Uh oh!

luisgoncalves May 7, 2026

Uh oh!

luisgoncalves May 7, 2026

Uh oh!

Uh oh!

luisgoncalves May 7, 2026

Uh oh!

luisgoncalves May 7, 2026

Uh oh!

luisgoncalves May 7, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants


		### ViewName built-in UIs

		Some HAAPI viewNames (`step.metadata.viewName`) need a UI that the generic step rendering can't deliver well. For example, the BankID screen needs to render a spinner while the polling status is `pending`, not only while `loading` is true, and lifts the QR code above the actions.

Conversation

aleixsuau commented Apr 29, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Test plan

Notes

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Copilot AI Apr 29, 2026

Choose a reason for hiding this comment

Uh oh!

luisgoncalves May 7, 2026

Choose a reason for hiding this comment

Uh oh!

luisgoncalves May 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

luisgoncalves May 7, 2026

Choose a reason for hiding this comment

Uh oh!

luisgoncalves May 7, 2026

Choose a reason for hiding this comment

Uh oh!

luisgoncalves May 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

aleixsuau commented Apr 29, 2026 •

edited

Loading