(test) Fix warnings raised when running tests

src/components/group/ohri-obs-group.component.tsx

@@ -27,9 +27,11 @@ export const OHRIObsGroup: React.FC<ObsGroupProps> = ({ question, onChange, dele
       });
     }
   }, [question.questions]);
+
   const groupContent = groupMembersControlMap
     .filter((groupMemberMapItem) => !!groupMemberMapItem && !groupMemberMapItem.field.isHidden)
     .map((groupMemberMapItem, index) => {
+      const keyId = groupMemberMapItem.field.id + '-' + index;
       const { control, field } = groupMemberMapItem;
       if (control) {
         const questionFragment = React.createElement(control, {
@@ -41,7 +43,7 @@ export const OHRIObsGroup: React.FC<ObsGroupProps> = ({ question, onChange, dele
         });
 
         return (
-          <div className={classNames(styles.flexColumn, styles.obsGroupColumn)}>
+          <div className={classNames(styles.flexColumn, styles.obsGroupColumn)} key={keyId}>
             <div className={styles.parentResizer}>
               {questionFragment}
               <div
@@ -59,8 +61,10 @@ export const OHRIObsGroup: React.FC<ObsGroupProps> = ({ question, onChange, dele
         );
       }
     });
+
   if (groupContent && deleteControl) {
     groupContent.push(deleteControl);
   }
+
   return <div className={styles.flexRow}>{groupContent}</div>;
 };

src/components/inputs/number/ohri-number.component.tsx

@@ -72,8 +72,8 @@ const OHRINumber: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler,
         invalid={!isFieldRequiredError && errors.length > 0}
         invalidText={errors[0]?.message}
         label={question.label}
-        max={question.questionOptions.max || undefined}
-        min={question.questionOptions.min || undefined}
+        max={Number(question.questionOptions.max) || undefined}
+        min={Number(question.questionOptions.min) || undefined}
         name={question.id}
         value={field.value || ''}
         allowEmpty={true}

src/components/inputs/radio/ohri-radio.component.tsx

@@ -72,7 +72,7 @@ const OHRIRadio: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler,
               return (
                 <RadioButton
                   id={`${question.id}-${answer.label}`}
-                  labelText={answer.label}
+                  labelText={answer.label ?? ''}
                   value={answer.concept}
                   key={index}
                 />

src/components/inputs/select/ohri-dropdown.component.tsx

@@ -86,7 +86,7 @@ const OHRIDropdown: React.FC<OHRIFormFieldProps> = ({ question, onChange, handle
           invalid={!isFieldRequiredError && errors.length > 0}
           invalidText={errors.length && errors[0].message}
           warn={warnings.length > 0}
-          warnText={warnings.length && warnings[0].message}
+          warnText={warnings.length ? warnings[0].message : ''}
         />
       </div>
     )

src/components/inputs/text/ohri-text.component.tsx

@@ -75,7 +75,7 @@ const OHRIText: React.FC<OHRIFormFieldProps> = ({ question, onChange, handler, p
             name={question.id}
             value={field.value || ''}
             disabled={question.disabled}
-            readOnly={question.readonly}
+            readOnly={Boolean(question.readonly)}
             invalid={!isFieldRequiredError && errors.length > 0}
             invalidText={errors.length && errors[0].message}
             warn={warnings.length > 0}

src/components/repeat/ohri-repeat.component.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useId, useState } from 'react';
 import { FormGroup, Button } from '@carbon/react';
 import { Add, TrashCan } from '@carbon/react/icons';
 import { useFormikContext } from 'formik';
@@ -16,8 +16,10 @@ export const showAddButton = (limit: string | number, counter: number) => {
   return !Number.isNaN(repeatLimit) && repeatLimit > 0 ? counter < repeatLimit : true;
 };
 
-export const OHRIRepeat: React.FC<OHRIFormFieldProps> = ({ question, onChange }) => {
+const OHRIRepeat: React.FC<OHRIFormFieldProps> = ({ question, onChange }) => {
   const { t } = useTranslation();
+  const id = useId();
+
   const {
     fields: allFormFields,
     encounterContext,
@@ -105,25 +107,25 @@ export const OHRIRepeat: React.FC<OHRIFormFieldProps> = ({ question, onChange })
   };
 
   const nodes = obsGroups.map((question, index) => {
+    const keyId = question.id + '-' + index;
     const deleteControl =
       obsGroups.length > 1 && encounterContext.sessionMode !== 'view' ? (
-        <div>
-          <div className={styles.removeButton}>
-            <Button
-              renderIcon={() => <TrashCan size={16} />}
-              kind="danger--tertiary"
-              onClick={() => removeNthRow(question)}
-              hasIconOnly
-            />
-          </div>
+        <div key={keyId} className={styles.removeButton}>
+          <Button
+            className={styles.button}
+            renderIcon={() => <TrashCan size={16} />}
+            kind="danger--tertiary"
+            onClick={() => removeNthRow(question)}>
+            <span>{t('removeGroup', 'Remove group')}</span>
+          </Button>
         </div>
       ) : null;
 
     return (
-      <>
+      <div key={keyId}>
         {index !== 0 && (
           <div>
-            <hr className={styles.separator} />
+            <hr className={styles.divider} />
           </div>
         )}
         <div className={styles.obsGroupContainer}>
@@ -134,17 +136,18 @@ export const OHRIRepeat: React.FC<OHRIFormFieldProps> = ({ question, onChange })
             deleteControl={index !== 0 ? deleteControl : null}
           />
         </div>
-      </>
+      </div>
     );
   });
 
   encounterContext.sessionMode != 'view' &&
     nodes.push(
-      <div>
+      <div key={id}>
         {showAddButton(question.questionOptions.repeatOptions?.limit, counter) && (
           <Button
+            className={styles.button}
+            iconDescription={t('add', 'Add')}
             renderIcon={() => <Add size={16} />}
-            className={styles.repeatButton}
             kind="tertiary"
             onClick={() => {
               const nextCount = counter + 1;
@@ -167,3 +170,5 @@ export const OHRIRepeat: React.FC<OHRIFormFieldProps> = ({ question, onChange })
     )
   );
 };
+
+export default OHRIRepeat;

src/components/repeat/ohri-repeat.scss

@@ -14,15 +14,23 @@
   margin-left: 0.5rem;
 }
 
-.obsGroupContainer {
-  margin: 1rem 0rem;
+.button {
+  svg {
+    margin-left: 1rem;
+  }
 }
 
-.separator {
-  margin-bottom: 1rem;
+.obsGroupContainer {
+  margin: 1rem 0rem 2rem;
 }
 
 .container {
   margin-top: 0.65rem;
   margin-bottom: 2rem;
 }
+
+.divider {
+  border: 1.5px solid #e0e0e0;
+  border-bottom: none;
+  margin: 2rem 0;
+}

src/components/section/ohri-form-section.scss

@@ -46,3 +46,8 @@
 .controlWidthConstrained {
   max-width: 18rem;
 }
+
+.flexColumn {
+  display: flex;
+  flex-direction: column;
+}

src/ohri-form.component.test.tsx

@@ -379,7 +379,7 @@ describe('OHRI Forms:', () => {
     });
   });
 
-  describe('Calcuated values', () => {
+  describe('Calculated values', () => {
     afterEach(() => {
       cleanup();
     });
@@ -641,7 +641,7 @@ describe('OHRI Forms:', () => {
       //Add repeat group
       await act(async () => fireEvent.click(addButton));
 
-      const deleteButton = await screen.findByRole('button', { name: 'danger' });
+      const deleteButton = await screen.findByRole('button', { name: /remove group/i });
       femaleRadios = await findAllRadioGroupMembers(screen, 'Female');
       maleRadios = await findAllRadioGroupMembers(screen, 'Male');
       birthDateFields = await findAllTextOrDateInputs(screen, 'Date of Birth');

src/ohri-form.component.tsx

@@ -283,7 +283,9 @@ const OHRIForm: React.FC<OHRIFormProps> = ({
         setSubmitting(false);
       }}>
       {(props) => {
-        setIsFormTouched(props.dirty);
+        useEffect(() => {
+          setIsFormTouched(props.dirty);
+        }, [props.dirty]);
 
         return (
           <Form className={classNames('cds--form', 'no-padding', styles.ohriForm)} ref={ref}>

src/registry/inbuilt-components/inbuiltControls.ts

@@ -14,7 +14,7 @@ import OHRIDropdown from '../../components/inputs/select/ohri-dropdown.component
 import OHRITextArea from '../../components/inputs/text-area/ohri-text-area.component';
 import OHRIText from '../../components/inputs/text/ohri-text.component';
 import OHRIToggle from '../../components/inputs/toggle/ohri-toggle.component';
-import { OHRIRepeat } from '../../components/repeat/ohri-repeat.component';
+import OHRIRepeat from '../../components/repeat/ohri-repeat.component';
 import File from '../../components/inputs/file/file.component';
 import { RegistryItem } from '../registry';
 import { controlTemplates } from './control-templates';

src/utils/common-expression-helpers.ts

@@ -304,7 +304,7 @@ export class CommonExpressionHelpers {
         return o === lastReferenceValue;
       });
       const SDValue = refObjectKeys[lastValueIndex];
-      formattedSDValue = SDValue.replace('SD', '');
+      formattedSDValue = SDValue?.replace('SD', '');
       if (formattedSDValue.includes('neg')) {
         formattedSDValue = formattedSDValue.substring(1, 0);
         formattedSDValue = '-' + formattedSDValue;
@@ -353,7 +353,7 @@ export class CommonExpressionHelpers {
         return o === lastReferenceValue;
       });
       const SDValue = refObjectKeys[lastValueIndex];
-      formattedSDValue = SDValue.replace('SD', '');
+      formattedSDValue = SDValue?.replace('SD', '');
       if (formattedSDValue.includes('neg')) {
         formattedSDValue = formattedSDValue.substring(1, 0);
         formattedSDValue = '-' + formattedSDValue;
@@ -398,7 +398,7 @@ export class CommonExpressionHelpers {
         return o === lastReferenceValue;
       });
       const SDValue = refObjectKeys[lastValueIndex];
-      formattedSDValue = SDValue.replace('SD', '');
+      formattedSDValue = SDValue?.replace('SD', '');
       if (formattedSDValue.includes('neg')) {
         formattedSDValue = formattedSDValue.substring(1, 0);
         formattedSDValue = '-' + formattedSDValue;