(fix) Improvements following code refactor/rename

src/api/api.ts

@@ -113,7 +113,7 @@ export async function fetchOpenMRSForm(nameOrUUID: string): Promise<OpenmrsForm
  * @param {OpenmrsForm} form - The OpenMRS form object.
  * @returns {Promise<any | null>} - A Promise that resolves to the fetched ClobData or null if not found.
  */
-export async function fetchClobdata(form: OpenmrsForm): Promise<any | null> {
+export async function fetchClobData(form: OpenmrsForm): Promise<any | null> {
   if (!form) {
     return null;
   }

src/components/inputs/content-switcher/content-switcher.component.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import classNames from 'classnames';
-import { FormGroup, ContentSwitcher as Switcher, Switch } from '@carbon/react';
+import { FormGroup, ContentSwitcher as CdsContentSwitcher, Switch } from '@carbon/react';
 import { useField } from 'formik';
 import { isInlineView } from '../../../utils/form-helper';
 import { isEmpty } from '../../../validators/form-validator';
@@ -69,7 +69,11 @@ export const ContentSwitcher: React.FC<FormFieldProps> = ({ question, onChange,
           [styles.errorLegend]: errors.length > 0,
           [styles.boldedLegend]: errors.length === 0,
         })}>
-        <Switcher onChange={handleChange} selectedIndex={selectedIndex} className={styles.selectedOption} size="md">
+        <CdsContentSwitcher
+          onChange={handleChange}
+          selectedIndex={selectedIndex}
+          className={styles.selectedOption}
+          size="md">
           {question.questionOptions.answers.map((option, index) => (
             <Switch
               name={option.concept || option.value}
@@ -78,7 +82,7 @@ export const ContentSwitcher: React.FC<FormFieldProps> = ({ question, onChange,
               disabled={question.disabled}
             />
           ))}
-        </Switcher>
+        </CdsContentSwitcher>
       </FormGroup>
     )
   );

src/components/inputs/multi-select/multi-select.component.tsx

@@ -42,12 +42,15 @@ export const MultiSelect: React.FC<FormFieldProps> = ({ question, onChange, hand
     }
   }, [question['submission']]);
 
-  const initiallySelectedQuestionItems = [];
-  question.questionOptions.answers.forEach((item) => {
-    if (field.value?.includes(item.concept)) {
-      initiallySelectedQuestionItems.push(item);
-    }
-  });
+  const initiallySelectedQuestionItems = useMemo(() => {
+    const selectedItems = [];
+    question.questionOptions.answers.forEach((item) => {
+      if (field.value?.includes(item.concept)) {
+        selectedItems.push(item);
+      }
+    });
+    return selectedItems;
+  }, [question, field.value]);
 
   const handleSelectItemsChange = ({ selectedItems }) => {
     setTouched(true);

src/components/inputs/tooltip/tooltip.component.tsx

@@ -12,12 +12,10 @@ interface TooltipProps {
 export const Tooltip: React.FC<TooltipProps> = ({ field }) => {
   const { t } = useTranslation();
   return (
-    <span>
-      <CarbonTooltip align="top" label={t(field.questionInfo)} description={t(field.questionInfo)}>
-        <button className={styles.tooltip} type="button" data-testid={field.id}>
-          <Information />
-        </button>
-      </CarbonTooltip>
-    </span>
+    <CarbonTooltip align="top" label={t(field.questionInfo)} description={t(field.questionInfo)}>
+      <button className={styles.tooltip} type="button" data-testid={field.id}>
+        <Information />
+      </button>
+    </CarbonTooltip>
   );
 };

src/components/inputs/ui-select-extended/ui-select-extended.component.tsx

@@ -15,10 +15,10 @@ import { isInlineView } from '../../../utils/form-helper';
 import RequiredFieldLabel from '../../required-field-label/required-field-label.component';
 import styles from './ui-select-extended.scss';
 
-const UISelectExtended: React.FC<FormFieldProps> = ({ question, handler, onChange, previousValue }) => {
+const UiSelectExtended: React.FC<FormFieldProps> = ({ question, handler, onChange, previousValue }) => {
   const { t } = useTranslation();
   const [field, meta] = useField(question.id);
-  const { setFieldValue, encounterContext, layoutType, workspaceLayout, fields } = React.useContext(FormContext);
+  const { setFieldValue, encounterContext, layoutType, workspaceLayout } = React.useContext(FormContext);
   const [items, setItems] = useState([]);
   const [warnings, setWarnings] = useState([]);
   const [errors, setErrors] = useState([]);
@@ -181,4 +181,4 @@ const UISelectExtended: React.FC<FormFieldProps> = ({ question, handler, onChang
   );
 };
 
-export default UISelectExtended;
+export default UiSelectExtended;

src/components/inputs/ui-select-extended/ui-select-extended.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent, waitFor, act, screen } from '@testing-library/react';
-import UISelectExtended from './ui-select-extended.component';
+import UiSelectExtended from './ui-select-extended.component';
 import { EncounterContext, FormContext } from '../../../form-context';
 import { Formik } from 'formik';
 import { ObsSubmissionHandler } from '../../../submission-handlers/base-handlers';
@@ -59,7 +59,7 @@ const renderForm = (intialValues) => {
             isSubmitting: false,
             formFieldHandlers: { obs: ObsSubmissionHandler },
           }}>
-          <UISelectExtended question={question} onChange={jest.fn()} handler={ObsSubmissionHandler} />
+          <UiSelectExtended question={question} onChange={jest.fn()} handler={ObsSubmissionHandler} />
         </FormContext.Provider>
       )}
     </Formik>,
@@ -87,7 +87,7 @@ jest.mock('../../../registry/registry', () => ({
   }),
 }));
 
-describe('UISelectExtended Component', () => {
+describe('UiSelectExtended Component', () => {
   it('renders with items from the datasource', async () => {
     await act(async () => {
       await renderForm({});
@@ -101,7 +101,7 @@ describe('UISelectExtended Component', () => {
       expect(question.value).toBe(null);
     });
 
-    //Click on the UISelectExtendedWidget to open the dropdown
+    //Click on the UiSelectExtendedWidget to open the dropdown
     fireEvent.click(uiSelectExtendedWidget);
 
     // Assert that all three items are displayed
@@ -118,7 +118,7 @@ describe('UISelectExtended Component', () => {
     // setup
     const uiSelectExtendedWidget = screen.getByLabelText('Transfer Location');
 
-    //Click on the UISelectExtendedWidget to open the dropdown
+    //Click on the UiSelectExtendedWidget to open the dropdown
     fireEvent.click(uiSelectExtendedWidget);
 
     // Find the list item for 'Naguru' and click it to select
@@ -150,7 +150,7 @@ describe('UISelectExtended Component', () => {
     // setup
     const uiSelectExtendedWidget = screen.getByLabelText('Transfer Location');
 
-    //Click on the UISelectExtendedWidget to open the dropdown
+    //Click on the UiSelectExtendedWidget to open the dropdown
     fireEvent.click(uiSelectExtendedWidget);
 
     // Type 'Nag' in the input field to filter items

src/components/value/view/field-value-view.component.tsx

@@ -11,15 +11,14 @@ interface FieldValueViewProps {
 }
 export const FieldValueView: React.FC<FieldValueViewProps> = ({ label, conceptName, value, isInline }) => (
   <>
-    {isInline && (
+    {isInline ? (
       <div className={styles.inlineFlexRow}>
         <div className={styles.inlineFlexColumn}>
           <LabelField value={label} tooltipText={conceptName} />
         </div>
         <div className={styles.inlineFlexColumn}>{value ? <ValueDisplay value={value} /> : <ValueEmpty />}</div>
       </div>
-    )}
-    {!isInline && (
+    ) : (
       <div className={styles.readonly}>
         <div className={styles.formField}>
           <LabelField value={label} tooltipText={conceptName} />

src/hooks/useClobData.tsx

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { FormSchema, OpenmrsForm } from '../types';
 import useSWRImmutable from 'swr/immutable';
 
-export function useClobdata(form: OpenmrsForm) {
+export function useClobData(form: OpenmrsForm) {
   const valueReferenceUuid = useMemo(
     () => form?.resources?.find(({ name }) => name === 'JSON schema').valueReference,
     [form],
@@ -16,6 +16,6 @@ export function useClobdata(form: OpenmrsForm) {
   return {
     clobdata: data?.data,
     clobdataError: error || null,
-    isLoadingClobdata: (!data && !error) || false,
+    isLoadingClobData: (!data && !error) || false,
   };
 }

src/hooks/useFormJson.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react';
 import { FormSchemaTransformer, FormSchema, FormSection, ReferencedForm } from '../types';
 import { isTrue } from '../utils/boolean-utils';
 import { applyFormIntent } from '../utils/forms-loader';
-import { fetchOpenMRSForm, fetchClobdata } from '../api/api';
+import { fetchOpenMRSForm, fetchClobData } from '../api/api';
 import { getRegisteredFormSchemaTransformers } from '../registry/registry';
 import { moduleName } from '../globals';
 
@@ -49,7 +49,7 @@ export async function loadFormJson(
   formSessionIntent?: string,
 ): Promise<FormSchema> {
   const openmrsFormResponse = await fetchOpenMRSForm(formIdentifier);
-  const clobDataResponse = await fetchClobdata(openmrsFormResponse);
+  const clobDataResponse = await fetchClobData(openmrsFormResponse);
   const transformers = await getRegisteredFormSchemaTransformers();
   const formJson: FormSchema = clobDataResponse
     ? { ...clobDataResponse, uuid: openmrsFormResponse.uuid }

src/registry/inbuilt-components/inbuiltControls.ts

@@ -18,7 +18,7 @@ import Markdown from '../../components/inputs/markdown/markdown.component';
 import FixedValue from '../../components/inputs/fixed-value/fixed-value.component';
 import ExtensionParcel from '../../components/extension/extension-parcel.component';
 import WorkspaceLauncher from '../../components/inputs/workspace-launcher/workspace-launcher.component';
-import UISelectExtended from '../../components/inputs/ui-select-extended/ui-select-extended.component';
+import UiSelectExtended from '../../components/inputs/ui-select-extended/ui-select-extended.component';
 
 /**
  * @internal
@@ -103,8 +103,8 @@ export const inbuiltControls: Array<RegistryItem<React.ComponentType<FormFieldPr
     type: 'datetime',
   },
   {
-    name: 'UISelectExtended',
-    component: UISelectExtended,
+    name: 'UiSelectExtended',
+    component: UiSelectExtended,
     type: 'ui-select-extended',
   },
   {

src/registry/inbuilt-components/template-component-map.ts

@@ -1,20 +1,20 @@
-import UISelectExtended from '../../components/inputs/ui-select-extended/ui-select-extended.component';
+import UiSelectExtended from '../../components/inputs/ui-select-extended/ui-select-extended.component';
 
 export const templateToComponentMap = [
   {
     name: 'drug',
-    baseControlComponent: UISelectExtended,
+    baseControlComponent: UiSelectExtended,
   },
   {
     name: 'problem',
-    baseControlComponent: UISelectExtended,
+    baseControlComponent: UiSelectExtended,
   },
   {
     name: 'encounter-provider',
-    baseControlComponent: UISelectExtended,
+    baseControlComponent: UiSelectExtended,
   },
   {
     name: 'encounter-location',
-    baseControlComponent: UISelectExtended,
+    baseControlComponent: UiSelectExtended,
   },
 ];

src/submission-handlers/base-handlers.ts

@@ -155,13 +155,13 @@ export const EncounterLocationSubmissionHandler: SubmissionHandler = {
   handleFieldSubmission: (field: FormField, value: any, context: EncounterContext) => {
     return null;
   },
-  getInitialValue: (encounter: any, field: FormField) => {
+  getInitialValue: (encounter: { location: { name: string; uuid: string } }, field: FormField) => {
     return {
       display: encounter.location.name,
       uuid: encounter.location.uuid,
     };
   },
-  getDisplayValue: (field: FormField, value) => {
+  getDisplayValue: (field: FormField, value: { display: string }) => {
     return value.display;
   },
 };