@openmrs/esm-implementer-tools-app 5.3.3-pre.1237 → 5.3.3-pre.1247

package/src/configuration/interactive-editor/value-editors/concept-search.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useMemo } from "react";
-import { useTranslation } from "react-i18next";
-import uniqueId from "lodash-es/uniqueId";
+import React, { useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import uniqueId from 'lodash-es/uniqueId';
 import {
   InlineLoading,
   Search,
@@ -8,9 +8,9 @@ import {
   StructuredListRow,
   StructuredListWrapper,
   Tile,
-} from "@carbon/react";
-import { Concept, useConceptLookup } from "./concept-search.resource";
-import styles from "./uuid-search.scss";
+} from '@carbon/react';
+import { Concept, useConceptLookup } from './concept-search.resource';
+import styles from './uuid-search.scss';
 
 interface ConceptSearchBoxProps {
   setConcept: (concept) => void;
@@ -20,7 +20,7 @@ interface ConceptSearchBoxProps {
 export function ConceptSearchBox({ setConcept, value }: ConceptSearchBoxProps) {
   const { t } = useTranslation();
   const id = useMemo(() => uniqueId(), []);
-  const [conceptToLookup, setConceptToLookup] = useState("");
+  const [conceptToLookup, setConceptToLookup] = useState('');
   const [selectedConcept, setSelectedConcept] = useState<string>(value);
   const { concepts, isSearchingConcepts } = useConceptLookup(conceptToLookup);
 
@@ -31,14 +31,12 @@ export function ConceptSearchBox({ setConcept, value }: ConceptSearchBoxProps) {
   const handleConceptUuidChange = (concept) => {
     setSelectedConcept(concept.uuid);
     setConcept(concept);
-    setConceptToLookup("");
+    setConceptToLookup('');
   };
 
   return (
     <div>
-      {selectedConcept && (
-        <p className={styles.activeUuid}>{selectedConcept}</p>
-      )}
+      {selectedConcept && <p className={styles.activeUuid}>{selectedConcept}</p>}
       <div className={styles.autocomplete}>
         <Search
           id={`searchbox-${id}`}
@@ -49,34 +47,21 @@ export function ConceptSearchBox({ setConcept, value }: ConceptSearchBoxProps) {
           autoCapitalize="off"
           aria-autocomplete="list"
           role="combobox"
-          aria-label={t("searchConceptHelperText", "Search concepts")}
+          aria-label={t('searchConceptHelperText', 'Search concepts')}
           aria-controls={`searchbox-${id}`}
           aria-expanded={concepts.length > 0}
-          placeholder={t("searchConceptHelperText", "Search concepts")}
+          placeholder={t('searchConceptHelperText', 'Search concepts')}
           onChange={handleSearchTermChange}
         />
         {(() => {
           if (!conceptToLookup) return null;
           if (isSearchingConcepts)
-            return (
-              <InlineLoading
-                className={styles.loader}
-                description={t("searching", "Searching") + "..."}
-              />
-            );
+            return <InlineLoading className={styles.loader} description={t('searching', 'Searching') + '...'} />;
           if (concepts && concepts.length && !isSearchingConcepts) {
             return (
-              <StructuredListWrapper
-                selection
-                id={`searchbox-${id}`}
-                className={styles.listbox}
-              >
+              <StructuredListWrapper selection id={`searchbox-${id}`} className={styles.listbox}>
                 {concepts.map((concept: Concept) => (
-                  <StructuredListRow
-                    key={concept.uuid}
-                    role="option"
-                    aria-selected="true"
-                  >
+                  <StructuredListRow key={concept.uuid} role="option" aria-selected="true">
                     <StructuredListCell
                       onClick={() => {
                         handleConceptUuidChange(concept);
@@ -92,9 +77,7 @@ export function ConceptSearchBox({ setConcept, value }: ConceptSearchBoxProps) {
           }
           return (
             <Tile className={styles.emptyResults}>
-              <span>
-                {t("noConceptsFoundText", "No matching concepts found")}
-              </span>
+              <span>{t('noConceptsFoundText', 'No matching concepts found')}</span>
             </Tile>
           );
         })()}

package/src/configuration/interactive-editor/value-editors/extension-slot-add.tsx

@@ -1,16 +1,11 @@
-import React, { useState, useEffect } from "react";
-import { MultiSelect } from "@carbon/react";
-import {
-  ExtensionInternalStore,
-  getExtensionInternalStore,
-} from "@openmrs/esm-framework/src/internal";
+import React, { useState, useEffect } from 'react';
+import { MultiSelect } from '@carbon/react';
+import { ExtensionInternalStore, getExtensionInternalStore } from '@openmrs/esm-framework/src/internal';
 
 const extensionInternalStore = getExtensionInternalStore();
 
 export function ExtensionSlotAdd({ value, setValue }) {
-  const [availableExtensions, setAvailableExtensions] = useState<Array<string>>(
-    []
-  );
+  const [availableExtensions, setAvailableExtensions] = useState<Array<string>>([]);
 
   useEffect(() => {
     function update(state: ExtensionInternalStore) {

package/src/configuration/interactive-editor/value-editors/extension-slot-order.tsx

@@ -1,10 +1,5 @@
-import React from "react";
+import React from 'react';
 
-export function ExtensionSlotOrder({
-  slotName,
-  slotModuleName,
-  value,
-  setValue,
-}) {
+export function ExtensionSlotOrder({ slotName, slotModuleName, value, setValue }) {
   return <div>Todo: compose array with extension lookup</div>;
 }

package/src/configuration/interactive-editor/value-editors/extension-slot-remove.tsx

@@ -1,13 +1,8 @@
-import React from "react";
-import { MultiSelect } from "@carbon/react";
-import { useAssignedExtensions } from "@openmrs/esm-framework";
+import React from 'react';
+import { MultiSelect } from '@carbon/react';
+import { useAssignedExtensions } from '@openmrs/esm-framework';
 
-export function ExtensionSlotRemove({
-  slotName,
-  slotModuleName,
-  value,
-  setValue,
-}) {
+export function ExtensionSlotRemove({ slotName, slotModuleName, value, setValue }) {
   const assignedIds = useAssignedExtensions(slotName).map((e) => e.id);
 
   return (

package/src/configuration/interactive-editor/value-editors/object-editor.tsx

@@ -1,16 +1,10 @@
-import React from "react";
-import {
-  StructuredListBody,
-  StructuredListCell,
-  StructuredListRow,
-  StructuredListWrapper,
-  Tile,
-} from "@carbon/react";
-import { ValueEditorField } from "./value-editor-field";
-import { ConfigValueDescriptor } from "../editable-value.component";
-import { Type } from "@openmrs/esm-framework";
-import cloneDeep from "lodash-es/cloneDeep";
-import styles from "./object-editor.styles.css";
+import React from 'react';
+import { StructuredListBody, StructuredListCell, StructuredListRow, StructuredListWrapper, Tile } from '@carbon/react';
+import { ValueEditorField } from './value-editor-field';
+import { ConfigValueDescriptor } from '../editable-value.component';
+import { Type } from '@openmrs/esm-framework';
+import cloneDeep from 'lodash-es/cloneDeep';
+import styles from './object-editor.styles.css';
 
 interface ObjectEditorProps {
   element: ConfigValueDescriptor;
@@ -18,17 +12,13 @@ interface ObjectEditorProps {
   setValue: (value: Object) => void;
 }
 
-export function ObjectEditor({
-  element,
-  valueObject,
-  setValue,
-}: ObjectEditorProps) {
+export function ObjectEditor({ element, valueObject, setValue }: ObjectEditorProps) {
   return (
     <Tile className={styles.objectEditor}>
       <StructuredListWrapper>
         <StructuredListBody>
           {Object.entries(element).map(([key, schema]) =>
-            !key.startsWith("_") ? (
+            !key.startsWith('_') ? (
               <StructuredListRow key={key}>
                 <StructuredListCell>
                   <ValueEditorField
@@ -60,7 +50,7 @@ export function ObjectEditor({
                   />
                 </StructuredListCell>
               </StructuredListRow>
-            ) : null
+            ) : null,
           )}
         </StructuredListBody>
       </StructuredListWrapper>

package/src/configuration/interactive-editor/value-editors/patient-identifier-type-search.tsx

@@ -1,17 +1,9 @@
-import React, { useState, useMemo } from "react";
-import uniqueId from "lodash-es/uniqueId";
-import {
-  usePatientIdentifierTypes,
-  PatientIdentifierType,
-} from "./patient-identifier-type.resource";
-import styles from "./uuid-search.scss";
-import { useTranslation } from "react-i18next";
-import {
-  Search,
-  StructuredListCell,
-  StructuredListRow,
-  StructuredListWrapper,
-} from "@carbon/react";
+import React, { useState, useMemo } from 'react';
+import uniqueId from 'lodash-es/uniqueId';
+import { usePatientIdentifierTypes, PatientIdentifierType } from './patient-identifier-type.resource';
+import styles from './uuid-search.scss';
+import { useTranslation } from 'react-i18next';
+import { Search, StructuredListCell, StructuredListRow, StructuredListWrapper } from '@carbon/react';
 
 interface PatientIdentifierTypeSearchBoxProps {
   value: string;
@@ -22,11 +14,9 @@ export function PatientIdentifierTypeSearchBox({
   setPatientIdentifierTypeUuid,
   value,
 }: PatientIdentifierTypeSearchBoxProps) {
-  const [searchTerm, setSearchTerm] = useState("");
-  const { data: patientIdentifierTypes, isLoading } =
-    usePatientIdentifierTypes();
-  const [activePatientIdentifierTypeUuid, setActivePatientIdentifierTypeUuid] =
-    useState<any>(value);
+  const [searchTerm, setSearchTerm] = useState('');
+  const { data: patientIdentifierTypes, isLoading } = usePatientIdentifierTypes();
+  const [activePatientIdentifierTypeUuid, setActivePatientIdentifierTypeUuid] = useState<any>(value);
   const { t } = useTranslation();
 
   const id = useMemo(() => uniqueId(), []);
@@ -34,27 +24,22 @@ export function PatientIdentifierTypeSearchBox({
   const handleUuidChange = (patientIdentifierType: PatientIdentifierType) => {
     setActivePatientIdentifierTypeUuid(patientIdentifierType.uuid);
     setPatientIdentifierTypeUuid(patientIdentifierType.uuid);
-    setSearchTerm("");
+    setSearchTerm('');
   };
 
   const handleSearchTermChange = (evt) => setSearchTerm(evt.target.value);
 
-  const filteredResults: Array<PatientIdentifierType> | undefined =
-    useMemo(() => {
-      if (!isLoading && searchTerm && searchTerm !== "") {
-        return patientIdentifierTypes?.filter((type) =>
-          type.display.toLowerCase().includes(searchTerm.toLowerCase())
-        );
-      } else {
-        return undefined;
-      }
-    }, [isLoading, searchTerm, patientIdentifierTypes]);
+  const filteredResults: Array<PatientIdentifierType> | undefined = useMemo(() => {
+    if (!isLoading && searchTerm && searchTerm !== '') {
+      return patientIdentifierTypes?.filter((type) => type.display.toLowerCase().includes(searchTerm.toLowerCase()));
+    } else {
+      return undefined;
+    }
+  }, [isLoading, searchTerm, patientIdentifierTypes]);
 
   return (
     <div>
-      {activePatientIdentifierTypeUuid && (
-        <p className={styles.activeUuid}>{activePatientIdentifierTypeUuid}</p>
-      )}
+      {activePatientIdentifierTypeUuid && <p className={styles.activeUuid}>{activePatientIdentifierTypeUuid}</p>}
       <div className={styles.autocomplete}>
         <Search
           id={`search-input-${id}`}
@@ -62,12 +47,7 @@ export function PatientIdentifierTypeSearchBox({
           type="text"
           size="sm"
           placeholder={
-            !isLoading
-              ? t(
-                  "searchPersonAttributeHelperText",
-                  "Person attribute type name"
-                )
-              : t("loading", "Loading")
+            !isLoading ? t('searchPersonAttributeHelperText', 'Person attribute type name') : t('loading', 'Loading')
           }
           onChange={handleSearchTermChange}
           value={searchTerm}
@@ -75,11 +55,7 @@ export function PatientIdentifierTypeSearchBox({
         />
         {searchTerm ? (
           filteredResults?.length ? (
-            <StructuredListWrapper
-              selection
-              className={styles.listbox}
-              id={`searchbox-${id}`}
-            >
+            <StructuredListWrapper selection className={styles.listbox} id={`searchbox-${id}`}>
               {filteredResults?.map((patientIdentifierType) => (
                 <StructuredListRow
                   key={patientIdentifierType.uuid}
@@ -96,9 +72,7 @@ export function PatientIdentifierTypeSearchBox({
               ))}
             </StructuredListWrapper>
           ) : (
-            <p className={styles.bodyShort01}>
-              {t("noPersonAttributeFoundText", "No matching results found")}
-            </p>
+            <p className={styles.bodyShort01}>{t('noPersonAttributeFoundText', 'No matching results found')}</p>
           )
         ) : null}
       </div>

package/src/configuration/interactive-editor/value-editors/patient-identifier-type.resource.tsx

@@ -1,6 +1,6 @@
-import useSWR from "swr";
-import { FetchResponse, openmrsFetch } from "@openmrs/esm-framework";
-import { useMemo } from "react";
+import useSWR from 'swr';
+import { FetchResponse, openmrsFetch } from '@openmrs/esm-framework';
+import { useMemo } from 'react';
 
 export interface PatientIdentifierType {
   uuid: string;
@@ -15,16 +15,16 @@ export function usePatientIdentifierTypes(): {
   data: Array<PatientIdentifierType> | undefined;
   isLoading: boolean;
 } {
-  const { data, error } = useSWR<
-    FetchResponse<PatientIdentifierTypeResponse>,
-    Error
-  >(`/ws/rest/v1/patientidentifiertype`, openmrsFetch);
+  const { data, error } = useSWR<FetchResponse<PatientIdentifierTypeResponse>, Error>(
+    `/ws/rest/v1/patientidentifiertype`,
+    openmrsFetch,
+  );
   const memoisedPatientIdentifierTypeData = useMemo(
     () => ({
       data: data?.data?.results,
       isLoading: !data && !error,
     }),
-    [data, error]
+    [data, error],
   );
 
   return memoisedPatientIdentifierTypeData;

package/src/configuration/interactive-editor/value-editors/person-attribute-search.resource.tsx

@@ -1,18 +1,13 @@
-import { openmrsFetch } from "@openmrs/esm-framework";
+import { openmrsFetch } from '@openmrs/esm-framework';
 
-export function fetchPersonAttributeTypeByUuid(
-  personAttributeTypeUuid: string
-) {
-  return openmrsFetch(
-    `/ws/rest/v1/personattributetype/${personAttributeTypeUuid}`,
-    {
-      method: "GET",
-    }
-  );
+export function fetchPersonAttributeTypeByUuid(personAttributeTypeUuid: string) {
+  return openmrsFetch(`/ws/rest/v1/personattributetype/${personAttributeTypeUuid}`, {
+    method: 'GET',
+  });
 }
 
 export function performPersonAttributeTypeSearch(query: string) {
   return openmrsFetch(`/ws/rest/v1/personattributetype/?q=${query}`, {
-    method: "GET",
+    method: 'GET',
   });
 }

package/src/configuration/interactive-editor/value-editors/person-attribute-search.tsx

@@ -1,29 +1,20 @@
-import React, { useState, useEffect, useMemo } from "react";
-import debounce from "lodash-es/debounce";
-import uniqueId from "lodash-es/uniqueId";
-import { performPersonAttributeTypeSearch } from "./person-attribute-search.resource";
-import styles from "./uuid-search.scss";
-import { useTranslation } from "react-i18next";
-import {
-  Search,
-  StructuredListCell,
-  StructuredListRow,
-  StructuredListWrapper,
-} from "@carbon/react";
+import React, { useState, useEffect, useMemo } from 'react';
+import debounce from 'lodash-es/debounce';
+import uniqueId from 'lodash-es/uniqueId';
+import { performPersonAttributeTypeSearch } from './person-attribute-search.resource';
+import styles from './uuid-search.scss';
+import { useTranslation } from 'react-i18next';
+import { Search, StructuredListCell, StructuredListRow, StructuredListWrapper } from '@carbon/react';
 
 interface PersonAttributeTypeSearchBoxProps {
   value: string;
   setPersonAttributeUuid: (personAttributeType) => void;
 }
 
-export function PersonAttributeTypeSearchBox({
-  setPersonAttributeUuid,
-  value,
-}: PersonAttributeTypeSearchBoxProps) {
-  const [searchTerm, setSearchTerm] = useState("");
+export function PersonAttributeTypeSearchBox({ setPersonAttributeUuid, value }: PersonAttributeTypeSearchBoxProps) {
+  const [searchTerm, setSearchTerm] = useState('');
   const [searchResults, setSearchResults] = useState([]);
-  const [activePersonAttributeUuid, setActivePersonAttributeUuid] =
-    useState<any>(value);
+  const [activePersonAttributeUuid, setActivePersonAttributeUuid] = useState<any>(value);
   const { t } = useTranslation();
   const searchTimeoutInMs = 300;
 
@@ -36,7 +27,7 @@ export function PersonAttributeTypeSearchBox({
   };
 
   const resetSearch = () => {
-    setSearchTerm("");
+    setSearchTerm('');
     setSearchResults([]);
   };
 
@@ -48,11 +39,9 @@ export function PersonAttributeTypeSearchBox({
     const ac = new AbortController();
 
     if (searchTerm && searchTerm.length >= 2) {
-      performPersonAttributeTypeSearch(searchTerm).then(
-        ({ data: { results } }) => {
-          setSearchResults(results.slice(0, 9));
-        }
-      );
+      performPersonAttributeTypeSearch(searchTerm).then(({ data: { results } }) => {
+        setSearchResults(results.slice(0, 9));
+      });
     } else {
       setSearchResults([]);
     }
@@ -61,9 +50,7 @@ export function PersonAttributeTypeSearchBox({
 
   return (
     <div>
-      {activePersonAttributeUuid && (
-        <p className={styles.activeUuid}>{activePersonAttributeUuid}</p>
-      )}
+      {activePersonAttributeUuid && <p className={styles.activeUuid}>{activePersonAttributeUuid}</p>}
       <div className={styles.autocomplete}>
         <Search
           id={`search-input-${id}`}
@@ -74,27 +61,17 @@ export function PersonAttributeTypeSearchBox({
           autoCapitalize="off"
           aria-autocomplete="list"
           role="combobox"
-          aria-label={t(
-            "searchPersonAttributeHelperText",
-            "Person attribute type name"
-          )}
+          aria-label={t('searchPersonAttributeHelperText', 'Person attribute type name')}
           aria-controls={`searchbox-${id}`}
           aria-expanded={searchResults.length > 0}
-          placeholder={t(
-            "searchPersonAttributeHelperText",
-            "Person attribute type name"
-          )}
+          placeholder={t('searchPersonAttributeHelperText', 'Person attribute type name')}
           onChange={($event) => {
             handleSearchTermChange($event.target.value);
           }}
         />
 
         {!!searchResults.length && (
-          <StructuredListWrapper
-            selection
-            className={styles.listbox}
-            id={`searchbox-${id}`}
-          >
+          <StructuredListWrapper selection className={styles.listbox} id={`searchbox-${id}`}>
             {searchResults.map((personAttributeType: any) => (
               <StructuredListRow
                 key={personAttributeType.uuid}
@@ -104,18 +81,14 @@ export function PersonAttributeTypeSearchBox({
                 }}
                 aria-selected="true"
               >
-                <StructuredListCell className={styles.smallListCell}>
-                  {personAttributeType.display}
-                </StructuredListCell>
+                <StructuredListCell className={styles.smallListCell}>{personAttributeType.display}</StructuredListCell>
               </StructuredListRow>
             ))}
           </StructuredListWrapper>
         )}
 
         {searchTerm && searchResults && !searchResults.length && (
-          <p className={styles.bodyShort01}>
-            {t("noPersonAttributeFoundText", "No matching results found")}
-          </p>
+          <p className={styles.bodyShort01}>{t('noPersonAttributeFoundText', 'No matching results found')}</p>
         )}
       </div>
     </div>

package/src/configuration/interactive-editor/value-editors/uuid-search.scss

@@ -1,9 +1,9 @@
-@use "@carbon/styles/scss/spacing";
-@use "@carbon/styles/scss/type";
-@import "../../../implementer-tools.styles.scss";
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@import '../../../implementer-tools.styles.scss';
 
 .activeUuid {
-  @include type.type-style("body-compact-01");
+  @include type.type-style('body-compact-01');
   color: $ui-05;
   margin-bottom: spacing.$spacing-03;
   padding-bottom: spacing.$spacing-03;
@@ -11,7 +11,7 @@
 }
 
 .autocomplete,
-.autocomplete > [role="combobox"] {
+.autocomplete > [role='combobox'] {
   position: relative;
   width: 20em;
 }
@@ -29,7 +29,7 @@
 }
 
 .emptyResults {
-  @include type.type-style("body-compact-01");
+  @include type.type-style('body-compact-01');
   background-color: $ui-02;
   color: $text-02;
   min-height: 1rem;

package/src/configuration/interactive-editor/value-editors/value-editor-field.tsx

@@ -1,17 +1,17 @@
-import React, { useState } from "react";
-import uniqueId from "lodash-es/uniqueId";
-import { Checkbox, NumberInput, TextInput } from "@carbon/react";
-import { Type } from "@openmrs/esm-framework";
-import { ConfigValueDescriptor } from "../editable-value.component";
-import { ValueType } from "../value-editor";
-import { ArrayEditor } from "./array-editor";
-import { ConceptSearchBox } from "./concept-search";
-import { ExtensionSlotAdd } from "./extension-slot-add";
-import { ExtensionSlotRemove } from "./extension-slot-remove";
-import { ObjectEditor } from "./object-editor";
-import { ExtensionSlotOrder } from "./extension-slot-order";
-import { PersonAttributeTypeSearchBox } from "./person-attribute-search";
-import { PatientIdentifierTypeSearchBox } from "./patient-identifier-type-search";
+import React, { useState } from 'react';
+import uniqueId from 'lodash-es/uniqueId';
+import { Checkbox, NumberInput, TextInput } from '@carbon/react';
+import { Type } from '@openmrs/esm-framework';
+import { ConfigValueDescriptor } from '../editable-value.component';
+import { ValueType } from '../value-editor';
+import { ArrayEditor } from './array-editor';
+import { ConceptSearchBox } from './concept-search';
+import { ExtensionSlotAdd } from './extension-slot-add';
+import { ExtensionSlotRemove } from './extension-slot-remove';
+import { ObjectEditor } from './object-editor';
+import { ExtensionSlotOrder } from './extension-slot-order';
+import { PersonAttributeTypeSearchBox } from './person-attribute-search';
+import { PatientIdentifierTypeSearchBox } from './patient-identifier-type-search';
 
 export interface ValueEditorFieldProps {
   element: ConfigValueDescriptor;
@@ -21,48 +21,26 @@ export interface ValueEditorFieldProps {
   onChange: (value: any) => void;
 }
 
-export function ValueEditorField({
-  element,
-  path,
-  valueType,
-  value,
-  onChange,
-}: ValueEditorFieldProps) {
-  const [id] = useState(uniqueId("value-editor-"));
+export function ValueEditorField({ element, path, valueType, value, onChange }: ValueEditorFieldProps) {
+  const [id] = useState(uniqueId('value-editor-'));
 
-  if (valueType === "remove" && !path) {
-    throw new Error(
-      "Programming error: ValueEditorField initialized for a 'remove' field, but no 'path' is available"
-    );
+  if (valueType === 'remove' && !path) {
+    throw new Error("Programming error: ValueEditorField initialized for a 'remove' field, but no 'path' is available");
   }
 
   return valueType === Type.Array ? (
     <ArrayEditor element={element} valueArray={value} setValue={onChange} />
   ) : valueType === Type.Boolean ? (
-    <Checkbox
-      id={id}
-      checked={value}
-      hideLabel
-      labelText=""
-      onChange={(event, { checked, id }) => onChange(checked)}
-    />
+    <Checkbox id={id} checked={value} hideLabel labelText="" onChange={(event, { checked, id }) => onChange(checked)} />
   ) : valueType === Type.ConceptUuid ? (
-    <ConceptSearchBox
-      value={value}
-      setConcept={(concept) => onChange(concept.uuid)}
-    />
+    <ConceptSearchBox value={value} setConcept={(concept) => onChange(concept.uuid)} />
   ) : valueType === Type.PersonAttributeTypeUuid ? (
     <PersonAttributeTypeSearchBox
       value={value}
-      setPersonAttributeUuid={(personAttributeTypeUuid) =>
-        onChange(personAttributeTypeUuid)
-      }
+      setPersonAttributeUuid={(personAttributeTypeUuid) => onChange(personAttributeTypeUuid)}
     />
   ) : valueType === Type.PatientIdentifierTypeUuid ? (
-    <PatientIdentifierTypeSearchBox
-      value={value}
-      setPatientIdentifierTypeUuid={(uuid) => onChange(uuid)}
-    />
+    <PatientIdentifierTypeSearchBox value={value} setPatientIdentifierTypeUuid={(uuid) => onChange(uuid)} />
   ) : valueType === Type.Number ? (
     <NumberInput
       id={id}
@@ -71,29 +49,24 @@ export function ValueEditorField({
       hideSteppers
     />
   ) : valueType === Type.String || valueType === Type.UUID ? (
-    <TextInput
-      id={id}
-      value={value}
-      labelText=""
-      onChange={(e) => onChange(e.target.value)}
-    />
-  ) : valueType === "add" ? (
+    <TextInput id={id} value={value} labelText="" onChange={(e) => onChange(e.target.value)} />
+  ) : valueType === 'add' ? (
     <ExtensionSlotAdd value={value ?? element._value} setValue={onChange} />
-  ) : valueType === "remove" && path ? (
+  ) : valueType === 'remove' && path ? (
     <ExtensionSlotRemove
       slotName={path[2]}
       slotModuleName={path[0]}
       value={value ?? element._value}
       setValue={onChange}
     />
-  ) : valueType === "order" && path ? (
+  ) : valueType === 'order' && path ? (
     <ExtensionSlotOrder
       slotName={path[2]}
       slotModuleName={path[0]}
       value={value ?? element._value}
       setValue={onChange}
     />
-  ) : valueType === "configure" && path ? (
+  ) : valueType === 'configure' && path ? (
     <>Todo</>
   ) : (
     <ObjectEditor element={element} valueObject={value} setValue={onChange} />