IS-11241 Rename HaapiStepper UI components to HaapiStepper<Name>UI by aleixsuau · Pull Request #144 · curityio/ui-kit

aleixsuau · 2026-04-22T07:00:14Z

Summary

Rename the 6 public UI components (Actions, Link, Links, Messages, ClientOperation, HaapiSelector) plus HaapiStepperForm and the message-element factory to the established HaapiStepper<Name>UI convention (matching existing HaapiStepperStepUI, HaapiStepperFormFieldUI, etc.).
Motivation: disambiguate React components from the HAAPI data interfaces they render (HaapiStepperLink vs HaapiStepperLinkUI, etc.), prevent future import collisions, and make the UI vs data layer obvious at a glance.
Scope is intentionally limited to UI components — types, hooks, contexts, and render-interceptor types are unchanged.
Fixes stale HaapiUIStep and dead Form.tsx references in README and JSDoc along the way.

Test plan

Runtime smoke test: dev server + HAAPI flow covering each renamed component (authenticator selector, form step, links, messages, client-operation step)

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>

Copilot

Pull request overview

This PR standardizes naming for HAAPI Stepper public React UI components by renaming them to the established HaapiStepper<Name>UI convention, reducing ambiguity/collisions with similarly named HAAPI data types, and updates exports, tests, and documentation accordingly.

Changes:

Rename public UI components (eg Actions, Links, Messages, Link, ClientOperation, HaapiSelector, HaapiStepperForm) to HaapiStepper<Name>UI and update all internal usages.
Rename the messages element factory export to defaultHaapiStepperMessageElementFactory and update references.
Update barrel exports and various JSDoc/README examples to reference the new component names.

Reviewed changes

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

Show a summary per file

File	Description
src/login-web-app/src/haapi-stepper/util/generic-render-interceptor.tsx	Updates JSDoc example to use the renamed link UI component.
src/login-web-app/src/haapi-stepper/ui/messages/defaultHaapiStepperMessageElementFactory.tsx	Renames the exported default message element factory.
src/login-web-app/src/haapi-stepper/ui/messages/HaapiStepperMessagesUI.tsx	Renames `Messages` component and updates factory import/usage.
src/login-web-app/src/haapi-stepper/ui/links/defaultHaapiStepperLinkElementFactory.tsx	Updates default link element factory to use `HaapiStepperLinkUI`.
src/login-web-app/src/haapi-stepper/ui/links/HaapiStepperLinksUI.tsx	Renames `Links` component and its props interface.
src/login-web-app/src/haapi-stepper/ui/links/HaapiStepperLinksUI.spec.tsx	Updates tests to import/render `HaapiStepperLinksUI`.
src/login-web-app/src/haapi-stepper/ui/links/HaapiStepperLinkUI.tsx	Renames `Link` component to `HaapiStepperLinkUI`.
src/login-web-app/src/haapi-stepper/ui/links/HaapiStepperLinkUI.spec.tsx	Updates tests to import/render `HaapiStepperLinkUI`.
src/login-web-app/src/haapi-stepper/ui/index.ts	Updates UI barrel exports to the new component names.
src/login-web-app/src/haapi-stepper/ui/actions/defaultHaapiStepperActionElementFactory.tsx	Updates action rendering factory to use renamed UI components (form/selector/client operation).
src/login-web-app/src/haapi-stepper/ui/actions/HaapiStepperActionsUI.tsx	Renames `Actions` component and its props interface.
src/login-web-app/src/haapi-stepper/ui/actions/HaapiStepperActionsUI.spec.tsx	Updates tests to import/render `HaapiStepperActionsUI`.
src/login-web-app/src/haapi-stepper/feature/steps/HaapiStepperStepUI.tsx	Switches step UI to use the renamed UI components for actions/links/messages.
src/login-web-app/src/haapi-stepper/feature/steps/HaapiStepperStepUI.spec.tsx	Updates tests that compose actions UI to use `HaapiStepperActionsUI`.
src/login-web-app/src/haapi-stepper/feature/stepper/HaapiStepper.tsx	Updates JSDoc examples to reference `HaapiStepperStepUI` and renamed UI components.
src/login-web-app/src/haapi-stepper/feature/index.ts	Updates feature barrel exports to renamed UI components.
src/login-web-app/src/haapi-stepper/feature/actions/selector/HaapiStepperSelectorUI.tsx	Renames selector UI component and updates nested form UI usage.
src/login-web-app/src/haapi-stepper/feature/actions/form/HaapiStepperFormUI.tsx	Renames form UI component and updates JSDoc references/examples accordingly.
src/login-web-app/src/haapi-stepper/feature/actions/form/HaapiStepperFormUI.spec.tsx	Updates form UI tests to import/render `HaapiStepperFormUI`.
src/login-web-app/src/haapi-stepper/feature/actions/form/HaapiStepperFormContext.ts	Updates the hook error message to reference `<HaapiStepperFormUI>`.
src/login-web-app/src/haapi-stepper/feature/actions/client-operation/HaapiStepperClientOperationUI.tsx	Renames client operation UI component and its props interface + docs example.
src/login-web-app/src/haapi-stepper/README.md	Updates README examples/links and documents the new naming convention.

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

Copilot · 2026-04-22T07:19:23Z

@@ -117,8 +117,8 @@ type SetCurrentStepAndUpdateHistoryFn = (
 * import { HaapiStepper } from './HaapiStepper';
 * import { useHaapiStepper } from './useHaapiStepper';
 * import { Form } from '../actions/form/Form';


The JSDoc example imports Form from ../actions/form/Form, but that file/component doesn’t exist in this package (the form UI is HaapiStepperFormUI). Update the example to import and render HaapiStepperFormUI so the snippet is copy/pasteable.

Suggested change

* import { Form } from '../actions/form/Form';

* import { HaapiStepperFormUI as Form } from '../actions/form/HaapiStepperFormUI';

Copilot · 2026-04-22T07:19:24Z

- *       {selectorActions?.map(action => <HaapiSelector key={action.kind} action={action} onSubmit={nextStep} />)}
- *       {clientOperationActions?.map((action) => (<ClientOperation key={action.kind} action={action} onAction={nextStep} /> ))}
+ *       {selectorActions?.map(action => <HaapiStepperSelectorUI key={action.kind} action={action} onSubmit={nextStep} />)}
+ *       {clientOperationActions?.map((action) => (<HaapiStepperClientOperationUI key={action.kind} action={action} onAction={nextStep} /> ))}


In the same JSDoc example, selectorActions is referenced but not defined/destructured from currentStep.dataHelpers, so the snippet won’t type-check/run as written. Either destructure selectorActions alongside formActions/clientOperationActions, or remove that mapping from the example.

Copilot · 2026-04-22T07:19:24Z

+* [HaapiStepperSelectorUI](./feature/actions/selector/HaapiStepperSelectorUI.tsx)
+* [HaapiStepperClientOperationUI](./feature/actions/client-operation/HaapiStepperClientOperationUI.tsx)
+* [HaapiStepperMessagesUI](./ui/messages/HaapiStepperMessagesUI.tsx)
+* [HaapiStepperMessageUI](./ui/messages/HaapiStepperMessageUI.tsx)


The README links to ./ui/messages/HaapiStepperMessageUI.tsx, but there is no such file/component under ui/messages (only HaapiStepperMessagesUI.tsx and the default element factory exist). Either add the missing HaapiStepperMessageUI component or remove/fix this link to avoid dead documentation references.

Suggested change

* [HaapiStepperMessageUI](./ui/messages/HaapiStepperMessageUI.tsx)

Copilot · 2026-04-22T07:19:24Z

+Check out [the HaapiStepperStepUI documentation and usage examples](./feature/steps/HaapiStepperStepUI.tsx).





The section header was renamed to “HAAPI Stepper UI Components”, but earlier in the README there’s still a link to #haapi-ui-components. This will break the in-page anchor unless the earlier link is updated (or the header/anchor is kept compatible).

Suggested change

<a id="haapi-ui-components"></a>

- HaapiStepper.tsx JSDoc example: import HaapiStepperFormUI (not the non-existent `Form` from `../actions/form/Form`), use it in place of <Form>, and destructure `selectorActions` from `currentStep.dataHelpers` so the snippet is copy/pasteable and type-checks. - README: drop the dangling link to HaapiStepperMessageUI (that component is extracted in IS-10847 / PR #145, not in this one). - README: fix the stale `#haapi-ui-components` anchors — the section was renamed to "HAAPI Stepper UI Components", so update the two in-page links to `#haapi-stepper-ui-components`. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

aleixsuau mentioned this pull request Apr 22, 2026

IS-10847 Extract HaapiStepperMessageUI component #145

Draft

1 task

aleixsuau requested review from Copilot, luisgoncalves, urre and vahag-curity April 22, 2026 07:07

Copilot started reviewing on behalf of aleixsuau April 22, 2026 07:15 View session

Copilot AI reviewed Apr 22, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

IS-11241 Rename HaapiStepper UI components to HaapiStepper<Name>UI#144

IS-11241 Rename HaapiStepper UI components to HaapiStepper<Name>UI#144
aleixsuau wants to merge 2 commits intointegration/IS-5161/login-web-appfrom
feature/IS-11241/rename-haapistepper-ui-components

aleixsuau commented Apr 22, 2026 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 22, 2026

Uh oh!

Copilot AI Apr 22, 2026

Uh oh!

Copilot AI Apr 22, 2026

Uh oh!

Copilot AI Apr 22, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	* import { Form } from '../actions/form/Form';
	* import { HaapiStepperFormUI as Form } from '../actions/form/HaapiStepperFormUI';

		Check out [the HaapiStepperStepUI documentation and usage examples](./feature/steps/HaapiStepperStepUI.tsx).

Conversation

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

Uh oh!

Summary

Test plan

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 22, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 22, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

aleixsuau commented Apr 22, 2026 •

edited

Loading