(refactor) O3-4221: Replace validation with zod

package.json

@@ -27,7 +27,7 @@
   "devDependencies": {
     "@babel/core": "^7.11.6",
     "@carbon/react": "^1.71.0",
-    "@openmrs/esm-framework": "next",
+    "@openmrs/esm-framework": "^6.0.1-pre.2553",
     "@openmrs/esm-patient-common-lib": "next",
     "@playwright/test": "1.48.2",
     "@swc/core": "^1.2.165",
@@ -65,7 +65,7 @@
     "jest-cli": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.1",
-    "openmrs": "next",
+    "openmrs": "^6.0.1-pre.2553",
     "prettier": "^3.1.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",

packages/esm-service-queues-app/package.json

@@ -38,7 +38,10 @@
   },
   "dependencies": {
     "@carbon/react": "^1.71.0",
-    "lodash-es": "^4.17.15"
+    "@hookform/resolvers": "^3.9.1",
+    "lodash-es": "^4.17.15",
+    "react-hook-form": "^7.54.0",
+    "zod": "^3.24.1"
   },
   "peerDependencies": {
     "@openmrs/esm-framework": "5.x",

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

@@ -4,6 +4,12 @@ import { render, screen } from '@testing-library/react';
 import { useLayoutType } from '@openmrs/esm-framework';
 import QueueServiceForm from './queue-service-form.workspace';
 
+jest.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string, defaultValue: string) => defaultValue,
+  }),
+}));
+
 const defaultProps = {
   closeWorkspace: jest.fn(),
   promptBeforeClosing: jest.fn(),
@@ -32,9 +38,22 @@ jest.mock('../create-queue-entry/hooks/useQueueLocations', () => ({
   }),
 }));
 
+jest.mock('@openmrs/esm-framework', () => {
+  return {
+    showSnackbar: jest.fn(),
+    restBaseUrl: '/ws/rest/v1',
+    useLayoutType: jest.fn(),
+
+    useExtensionSlot: jest.requireActual('@openmrs/esm-framework').useExtensionSlot,
+
+    importDynamic: jest.fn(),
+  };
+});
+
 describe('QueueServiceForm', () => {
   beforeEach(() => {
     mockUseLayoutType.mockReturnValue('tablet');
+    jest.clearAllMocks();
   });
 
   it('should display required error messages when form is submitted with missing fields', async () => {
@@ -60,6 +79,8 @@ describe('QueueServiceForm', () => {
     await user.selectOptions(serviceSelect, '6f017eb0-b035-4acd-b284-da45f5067502');
     await user.selectOptions(locationSelect, '34567eb0-b035-4acd-b284-da45f5067502');
 
+    const submitButton = screen.getByText('Save');
+    await user.click(submitButton);
     expect(queueNameInput).toHaveValue('Test Queue');
     expect(serviceSelect).toHaveValue('6f017eb0-b035-4acd-b284-da45f5067502');
     expect(locationSelect).toHaveValue('34567eb0-b035-4acd-b284-da45f5067502');

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

@@ -1,5 +1,9 @@
 import React, { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
+import { useForm, Controller } from 'react-hook-form';
+import * as z from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+
 import {
   Button,
   ButtonSet,
@@ -18,85 +22,84 @@ import { saveQueue, useServiceConcepts } from './queue-service.resource';
 import { useQueueLocations } from '../create-queue-entry/hooks/useQueueLocations';
 import styles from './queue-service-form.scss';
 
+const QueueServiceSchema = z.object({
+  queueName: z.string().min(1, { message: 'Queue name is required' }),
+  queueConcept: z.string().min(1, { message: 'Queue concept is required' }),
+  userLocation: z.string().min(1, { message: 'Queue location is required' }),
+});
+type QueueServiceFormData = z.infer<typeof QueueServiceSchema>;
+
 const QueueServiceForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace }) => {
   const { t } = useTranslation();
   const { queueConcepts } = useServiceConcepts();
   const { queueLocations } = useQueueLocations();
-  const [queueName, setQueueName] = useState('');
-  const [queueConcept, setQueueConcept] = useState('');
-  const [isMissingName, setMissingName] = useState(false);
-  const [isMissingQueue, setMissingQueue] = useState(false);
-  const [isMissingLocation, setMissingLocation] = useState(false);
-  const [userLocation, setUserLocation] = useState('');
-
-  const createQueue = useCallback(
-    (event) => {
-      event.preventDefault();
-
-      if (!queueName) {
-        setMissingName(true);
-        return;
-      }
-      if (!queueConcept) {
-        setMissingQueue(true);
-        return;
-      }
-      if (!userLocation) {
-        setMissingLocation(true);
-        return;
-      }
 
-      setMissingName(false);
-      setMissingQueue(false);
-      setMissingLocation(false);
+  const {
+    control,
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<QueueServiceFormData>({
+    resolver: zodResolver(QueueServiceSchema),
+    defaultValues: {
+      queueName: '',
+      queueConcept: '',
+      userLocation: '',
+    },
+  });
 
-      saveQueue(queueName, queueConcept, queueName, userLocation).then(
-        ({ status }) => {
-          if (status === 201) {
-            showSnackbar({
-              title: t('addQueue', 'Add queue'),
-              kind: 'success',
-              subtitle: t('queueAddedSuccessfully', 'Queue added successfully'),
-            });
-            closeWorkspace();
-            mutate(`${restBaseUrl}/queue?${userLocation}`);
-            mutate(`${restBaseUrl}/queue?location=${userLocation}`);
-          }
-        },
-        (error) => {
+  const createQueue = (data: QueueServiceFormData) => {
+    saveQueue(data.queueName, data.queueConcept, data.queueName, data.userLocation).then(
+      ({ status }) => {
+        if (status === 201) {
           showSnackbar({
-            title: t('errorAddingQueue', 'Error adding queue'),
-            kind: 'error',
-            isLowContrast: false,
-            subtitle: error?.message,
+            title: t('addQueue', 'Add queue'),
+            kind: 'success',
+            subtitle: t('queueAddedSuccessfully', 'Queue added successfully'),
           });
-        },
-      );
-    },
-    [queueName, queueConcept, userLocation, t, closeWorkspace],
-  );
+          closeWorkspace();
+          mutate(`${restBaseUrl}/queue?${data.userLocation}`);
+          mutate(`${restBaseUrl}/queue?location=${data.userLocation}`);
+        }
+      },
+      (error) => {
+        showSnackbar({
+          title: t('errorAddingQueue', 'Error adding queue'),
+          kind: 'error',
+          isLowContrast: false,
+          subtitle: error?.message,
+        });
+      },
+    );
+  };
 
   return (
-    <Form onSubmit={createQueue} className={styles.form}>
+    <Form onSubmit={handleSubmit(createQueue)} className={styles.form}>
       <Stack gap={4} className={styles.grid}>
         <Column>
           <Layer className={styles.input}>
-            <TextInput
-              id="queueName"
-              invalidText="Required"
-              labelText={t('queueName', 'Queue name')}
-              onChange={(event) => setQueueName(event.target.value)}
-              value={queueName}
+            <Controller
+              name="queueName"
+              control={control}
+              render={({ field }) => (
+                <TextInput
+                  {...field}
+                  id="queueName"
+                  invalidText={errors.queueName?.message}
+                  invalid={!!errors.queueName}
+                  labelText={t('queueName', 'Queue name')}
+                />
+              )}
             />
-            {isMissingName && (
+            {errors.queueName && (
               <section>
                 {/* TODO: Use a zod schema instead of this */}
                 <InlineNotification
                   style={{ margin: '0', minWidth: '100%' }}
                   kind="error"
                   lowContrast
                   title={t('missingQueueName', 'Missing queue name')}
-                  subtitle={t('addQueueName', 'Please add a queue name')}
+                  subtitle={errors.queueName.message}
                 />
               </section>
             )}
@@ -105,31 +108,37 @@ const QueueServiceForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace }) =
 
         <Column>
           <Layer className={styles.input}>
-            <Select
-              labelText={t('selectServiceType', 'Select a service type')}
-              id="queueConcept"
-              invalidText="Required"
-              onChange={(event) => setQueueConcept(event.target.value)}
-              value={queueConcept}>
-              {!queueConcept && <SelectItem text={t('selectServiceType', 'Select a service type')} value="" />}
-              {queueConcepts.length === 0 && (
-                <SelectItem text={t('noServicesAvailable', 'No services available')} value="" />
+            <Controller
+              name="queueConcept"
+              control={control}
+              render={({ field }) => (
+                <Select
+                  {...field}
+                  labelText={t('selectServiceType', 'Select a service type')}
+                  id="queueConcept"
+                  invalidText={errors.queueConcept?.message}>
+                  {!field.value && <SelectItem text={t('selectServiceType', 'Select a service type')} value="" />}
+                  {queueConcepts.length === 0 && (
+                    <SelectItem text={t('noServicesAvailable', 'No services available')} value="" />
+                  )}
+                  {queueConcepts?.length > 0 &&
+                    queueConcepts.map((concept) => (
+                      <SelectItem key={concept.uuid} text={concept.display} value={concept.uuid}>
+                        {concept.display}
+                      </SelectItem>
+                    ))}
+                </Select>
               )}
-              {queueConcepts?.length > 0 &&
-                queueConcepts.map((concept) => (
-                  <SelectItem key={concept.uuid} text={concept.display} value={concept.uuid}>
-                    {concept.display}
-                  </SelectItem>
-                ))}
-            </Select>
-            {isMissingQueue && (
+            />
+
+            {errors.queueConcept && (
               <section>
                 <InlineNotification
                   style={{ margin: '0', minWidth: '100%' }}
                   kind="error"
                   lowContrast
                   title={t('missingService', 'Missing service')}
-                  subtitle={t('selectServiceType', 'Select a service type')}
+                  subtitle={errors.queueConcept.message}
                 />
               </section>
             )}
@@ -138,31 +147,37 @@ const QueueServiceForm: React.FC<DefaultWorkspaceProps> = ({ closeWorkspace }) =
 
         <Column>
           <Layer className={styles.input}>
-            <Select
-              id="location"
-              invalidText="Required"
-              labelText={t('selectALocation', 'Select a location')}
-              onChange={(event) => setUserLocation(event.target.value)}
-              value={userLocation}>
-              {!userLocation && <SelectItem text={t('selectALocation', 'Select a location')} value="" />}
-              {queueLocations.length === 0 && (
-                <SelectItem text={t('noLocationsAvailable', 'No locations available')} value="" />
+            <Controller
+              name="userLocation"
+              control={control}
+              render={({ field }) => (
+                <Select
+                  {...field}
+                  id="location"
+                  invalidText="Required"
+                  labelText={t('selectALocation', 'Select a location')}>
+                  {!field.value && <SelectItem text={t('selectALocation', 'Select a location')} value="" />}
+                  {queueLocations.length === 0 && (
+                    <SelectItem text={t('noLocationsAvailable', 'No locations available')} value="" />
+                  )}
+                  {queueLocations?.length > 0 &&
+                    queueLocations.map((location) => (
+                      <SelectItem key={location.id} text={location.name} value={location.id}>
+                        {location.name}
+                      </SelectItem>
+                    ))}
+                </Select>
               )}
-              {queueLocations?.length > 0 &&
-                queueLocations.map((location) => (
-                  <SelectItem key={location.id} text={location.name} value={location.id}>
-                    {location.name}
-                  </SelectItem>
-                ))}
-            </Select>
-            {isMissingLocation && (
+            />
+
+            {errors.userLocation && (
               <section>
                 <InlineNotification
                   style={{ margin: '0', minWidth: '100%' }}
                   kind="error"
                   lowContrast
                   title={t('missingLocation', 'Missing location')}
-                  subtitle={t('pleaseSelectLocation', 'Please select a location')}
+                  subtitle={errors.userLocation.message}
                 />
               </section>
             )}

packages/esm-service-queues-app/translations/en.json

@@ -9,7 +9,6 @@
   "addPatientToQueue": "Add patient to queue",
   "addProviderQueueRoom": "Add provider queue room",
   "addQueue": "Add queue",
-  "addQueueName": "Please add a queue name",
   "addQueueRoom": "Add queue room",
   "addQueueRoomName": "Please add a queue room name",
   "addQueueRoomService": "Please add a queue room service",
@@ -129,7 +128,6 @@
   "patients": "Patients",
   "patientsCurrentlyInQueue": "Patients currently in queue",
   "phoneNumber": "Phone number",
-  "pleaseSelectLocation": "Please select a location",
   "previousPage": "Previous page",
   "previousVisit": "Previous visit",
   "priority": "Priority",