(refactor) O3-4347: Migrate queue forms to react-hook-form and zod #1442

Muppasanipraneeth · 2025-01-15T12:00:58Z

Requirements

This PR has a title that briefly describes the work done including the ticket number. If there is a ticket, make sure your PR title includes a conventional commit label. See existing PR titles for inspiration.
My work conforms to the OpenMRS 3.0 Styleguide and design documentation.
My work includes tests or is validated by existing tests.

Summary

This PR refactors several forms in the Service Queues app to use React Hook Form and Zod. These forms include the following:

Add provider to queue room form
Add new queue service room form

This PR:

Migrates form handling concerns to React Hook Form and zod schema validation replacing manual form state.
Converts uncontrolled form components to controlled components
Improves error handling and user feedback
Adds proper TypeScript types for form data
Adapts test coverage to cover the new behavior

Screenshots

Before

After

Related Issue

https://issues.openmrs.org/browse/O3-4347

Other

Muppasanipraneeth · 2025-01-15T12:01:36Z

@denniskigen

denniskigen · 2025-01-21T12:55:52Z

Please add a description to your PR and format the PR title to match the convention.

Muppasanipraneeth · 2025-01-21T13:32:36Z

Please add a description to your PR and format the PR title to match the convention.

updated @denniskigen

denniskigen · 2025-01-28T21:16:24Z

Unrelated pro-tip: shorter branch names are always better.

denniskigen

Thanks for kicking this off, @Muppasanipraneeth. I've left some comments.

...ges/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.component.tsx

packages/esm-service-queues-app/src/queue-rooms/queue-room-form.workspace.tsx

...ges/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.component.tsx

packages/esm-service-queues-app/src/queue-rooms/queue-room-form.workspace.tsx

denniskigen · 2025-01-28T21:56:26Z

packages/esm-service-queues-app/src/queue-rooms/queue-room-form.workspace.tsx

+  const onSubmit = async (data: QueueRoomFormData) => {
+    try {
+      // here doubt why queueName twice // name: string, description: string, queueUuid: string
+      const response = await saveQueueRoom(data.queueRoomName, data.queueRoomName, data.queueRoomService);


Per this liquibase file, description is a String value that represents "an optional description for the queue room".

While I understand why the original author defaulted to using the queue room name as the description (since we're not explicitly collecting this information from the user), I don't see any reason why we shouldn't collect a proper description. @chibongho, @donaldkibet are you aware of any specific reason why we don't have a queue room description field in the form?

...ges/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.component.tsx

packages/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.test.tsx

...ges/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.component.tsx

packages/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.test.tsx

...ges/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.component.tsx

packages/esm-service-queues-app/src/queue-rooms/queue-room-form.workspace.tsx

Muppasanipraneeth · 2025-01-29T14:43:00Z

as of now not passing any thing to subtitle=""

{errorFetchingQueueRooms && (
    <InlineNotification  
      className={styles.errorNotification}
      kind="error"
      onClick={() => {}}
      subtitle={""}
      title={t('errorFetchingQueueRooms', 'Error fetching queue rooms')}
    />
  )}

Muppasanipraneeth · 2025-01-29T16:31:23Z

this is after adding inlineloading

packages/esm-service-queues-app/src/queue-rooms/queue-room-form.workspace.tsx

packages/esm-service-queues-app/src/queue-rooms/queue-room-form.test.tsx

packages/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.scss

...ges/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.component.tsx

packages/esm-service-queues-app/src/queue-rooms/queue-room-form.workspace.tsx

...ges/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.component.tsx

…dd-provider-queue-room.component.tsx

…rm.workspace.tsx

…ue room forms

denniskigen

LGTM. Thanks, @Muppasanipraneeth!

…penmrs#1442) * added zod and react from hook * update room selection test assertions * Refactor form validation logic with Zod and React hooks * Update packages/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.component.tsx * fixed test * updated packages/esm-service-queues-app/src/queue-rooms/queue-room-form.workspace.tsx * updated en.json * added inlinenotification for fetching queue room * added notification style * update return of the useQueueRooms hook * updated test * updated test * added inline loding for submit button and standralize field name * updated en.json * refactor: standardize error messages and improve accessibility in queue room forms * Minor tweaks --------- Co-authored-by: Dennis Kigen <[email protected]>

Muppasanipraneeth marked this pull request as draft January 15, 2025 12:01

Muppasanipraneeth changed the title ~~(refactor) : 03-4347 Refactor queue service form with react-hook-form and zod~~ (refactor) o3-4347 :Refactor queue service form with react-hook-form and zod Jan 21, 2025

Muppasanipraneeth changed the title ~~(refactor) o3-4347 :Refactor queue service form with react-hook-form and zod~~ (refactor) O3-4347: Refactor queue service form with react-hook-form and zod Jan 21, 2025

Muppasanipraneeth marked this pull request as ready for review January 21, 2025 13:33

denniskigen reviewed Jan 28, 2025

View reviewed changes

...ges/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.component.tsx Outdated Show resolved Hide resolved

denniskigen reviewed Jan 28, 2025

View reviewed changes

...ges/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.component.tsx Outdated Show resolved Hide resolved

denniskigen reviewed Jan 28, 2025

View reviewed changes

...ges/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.component.tsx Outdated Show resolved Hide resolved

...ges/esm-service-queues-app/src/add-provider-queue-room/add-provider-queue-room.component.tsx Outdated Show resolved Hide resolved

Muppasanipraneeth requested a review from denniskigen January 29, 2025 08:45

denniskigen reviewed Jan 29, 2025

View reviewed changes

denniskigen requested review from chibongho and donaldkibet January 29, 2025 13:10

denniskigen changed the title ~~(refactor) O3-4347: Refactor queue service form with react-hook-form and zod~~ (refactor) O3-4347: Migrate queue forms to react-hook-form and zod Jan 29, 2025

denniskigen reviewed Jan 29, 2025

View reviewed changes

denniskigen reviewed Jan 30, 2025

View reviewed changes

Muppasanipraneeth added 5 commits January 30, 2025 15:23

added zod and react from hook

63ec31d

update room selection test assertions

acc2945

Refactor form validation logic with Zod and React hooks

536c49a

Update packages/esm-service-queues-app/src/add-provider-queue-room/a…

8945db1

…dd-provider-queue-room.component.tsx

fixed test

af6c81b

Muppasanipraneeth and others added 11 commits January 30, 2025 15:23

updated packages/esm-service-queues-app/src/queue-rooms/queue-room-fo…

a691134

…rm.workspace.tsx

updated en.json

1833cb1

added inlinenotification for fetching queue room

1021d51

added notification style

474aaf5

update return of the useQueueRooms hook

3e09249

updated test

030ffe8

updated test

429a221

added inline loding for submit button and standralize field name

9d9e924

updated en.json

be0157b

refactor: standardize error messages and improve accessibility in que…

f1dfcc4

…ue room forms

Minor tweaks

90178d7

denniskigen force-pushed the O3-4347-use-react-hook-form-and-zod-in-the-queue-service-form-for-new-service-room-and-provider-queue-room branch from 32f1e4b to 90178d7 Compare January 30, 2025 17:56

denniskigen approved these changes Jan 30, 2025

View reviewed changes

denniskigen merged commit 9555252 into openmrs:main Jan 30, 2025
6 checks passed

NethmiRodrigo mentioned this pull request Feb 17, 2025

(chore): Release version 8.3.0 #1485

Draft

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

(refactor) O3-4347: Migrate queue forms to react-hook-form and zod #1442

(refactor) O3-4347: Migrate queue forms to react-hook-form and zod #1442

Muppasanipraneeth commented Jan 15, 2025 •

edited by denniskigen

Loading

Muppasanipraneeth commented Jan 15, 2025

denniskigen commented Jan 21, 2025

Muppasanipraneeth commented Jan 21, 2025

denniskigen commented Jan 28, 2025

denniskigen left a comment

denniskigen Jan 28, 2025 •

edited

Loading

Muppasanipraneeth commented Jan 29, 2025

Muppasanipraneeth commented Jan 29, 2025

denniskigen left a comment

(refactor) O3-4347: Migrate queue forms to react-hook-form and zod #1442

(refactor) O3-4347: Migrate queue forms to react-hook-form and zod #1442

Conversation

Muppasanipraneeth commented Jan 15, 2025 • edited by denniskigen Loading

Requirements

Summary

Screenshots

Before

After

Related Issue

Other

Muppasanipraneeth commented Jan 15, 2025

denniskigen commented Jan 21, 2025

Muppasanipraneeth commented Jan 21, 2025

denniskigen commented Jan 28, 2025

denniskigen left a comment

Choose a reason for hiding this comment

denniskigen Jan 28, 2025 • edited Loading

Choose a reason for hiding this comment

Muppasanipraneeth commented Jan 29, 2025

Muppasanipraneeth commented Jan 29, 2025

this is after adding inlineloading

denniskigen left a comment

Choose a reason for hiding this comment

Muppasanipraneeth commented Jan 15, 2025 •

edited by denniskigen

Loading

denniskigen Jan 28, 2025 •

edited

Loading