@openmrs/esm-implementer-tools-app 8.0.1-pre.3459 → 8.0.1-pre.3473

package/src/configuration/interactive-editor/config-subtree.component.tsx

@@ -10,20 +10,21 @@ export interface ConfigSubtreeProps {
 }
 
 export function ConfigSubtree({ config, path = [] }: ConfigSubtreeProps) {
-  function setActiveItemDescriptionOnMouseEnter(thisPath, key, value) {
+  function setActiveItemDescriptionOnMouseEnter(thisPath: Array<string>, value: any) {
     if (!implementerToolsStore.getState().configPathBeingEdited) {
+      const isLeaf = value && typeof value === 'object' && Object.hasOwn(value, '_value');
       implementerToolsStore.setState({
         activeItemDescription: {
           path: thisPath,
-          source: value._source,
-          description: value._description,
-          value: JSON.stringify(value._value),
+          source: isLeaf ? value._source : undefined,
+          description: isLeaf ? value._description : undefined,
+          value: isLeaf ? JSON.stringify(value._value) : undefined,
         },
       });
     }
   }
 
-  function removeActiveItemDescriptionOnMouseLeave(thisPath) {
+  function removeActiveItemDescriptionOnMouseLeave(thisPath: Array<string>) {
     const state = implementerToolsStore.getState();
     if (isEqual(state.activeItemDescription?.path, thisPath) && !isEqual(state.configPathBeingEdited, thisPath)) {
       implementerToolsStore.setState({ activeItemDescription: undefined });
@@ -32,25 +33,27 @@ export function ConfigSubtree({ config, path = [] }: ConfigSubtreeProps) {
 
   return (
     <>
-      {Object.entries(config).map(([key, value], i) => {
-        const thisPath = path.concat([key]);
-        const isLeaf = value.hasOwnProperty('_value') || value.hasOwnProperty('_type');
-        return (
-          <Subtree
-            label={key}
-            leaf={isLeaf}
-            onMouseEnter={() => setActiveItemDescriptionOnMouseEnter(thisPath, key, value)}
-            onMouseLeave={() => removeActiveItemDescriptionOnMouseLeave(thisPath)}
-            key={`subtree-${thisPath.join('.')}`}
-          >
-            {isLeaf ? (
-              <EditableValue path={thisPath} element={value} />
-            ) : (
-              <ConfigSubtree config={value} path={thisPath} />
-            )}
-          </Subtree>
-        );
-      })}
+      {Object.entries(config)
+        .filter(([key]) => !key.startsWith('_'))
+        .map(([key, value]) => {
+          const thisPath = path.concat([key]);
+          const isLeaf = value && typeof value === 'object' && Object.hasOwn(value, '_value');
+          return (
+            <Subtree
+              label={key}
+              leaf={isLeaf}
+              onMouseEnter={() => setActiveItemDescriptionOnMouseEnter(thisPath, value)}
+              onMouseLeave={() => removeActiveItemDescriptionOnMouseLeave(thisPath)}
+              key={`subtree-${thisPath.join('.')}`}
+            >
+              {isLeaf ? (
+                <EditableValue path={thisPath} element={value} />
+              ) : (
+                <ConfigSubtree config={value} path={thisPath} />
+              )}
+            </Subtree>
+          );
+        })}
     </>
   );
 }

package/src/configuration/interactive-editor/editable-value.component.tsx

@@ -125,7 +125,9 @@ export default function EditableValue({ path, element, customType }: EditableVal
                 hasIconOnly
                 onClick={() => {
                   clearConfigErrors(path.join('.'));
-                  temporaryConfigStore.setState(unset(temporaryConfigStore.getState(), ['config', ...path]) as any);
+                  const state = cloneDeep(temporaryConfigStore.getState());
+                  unset(state, ['config', ...path]);
+                  temporaryConfigStore.setState(state);
                 }}
               />
             ) : null}

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

@@ -14,7 +14,7 @@ import { useConceptLookup } from './concept-search.resource';
 import styles from './uuid-search.scss';
 
 interface ConceptSearchBoxProps {
-  setConcept: (concept) => void;
+  setConcept: (concept: Concept) => void;
   value: string;
 }
 
@@ -25,11 +25,11 @@ export function ConceptSearchBox({ setConcept, value }: ConceptSearchBoxProps) {
   const [selectedConcept, setSelectedConcept] = useState<string>(value);
   const { concepts, isSearchingConcepts } = useConceptLookup(conceptToLookup);
 
-  const handleSearchTermChange = (event) => {
+  const handleSearchTermChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setConceptToLookup(event.target.value);
   };
 
-  const handleConceptUuidChange = (concept) => {
+  const handleConceptUuidChange = (concept: Concept) => {
     setSelectedConcept(concept.uuid);
     setConcept(concept);
     setConceptToLookup('');
@@ -47,7 +47,6 @@ export function ConceptSearchBox({ setConcept, value }: ConceptSearchBoxProps) {
           autoComplete="off"
           autoCapitalize="off"
           aria-autocomplete="list"
-          role="combobox"
           aria-label={t('searchConceptHelperText', 'Search concepts')}
           aria-controls={`searchbox-${id}`}
           aria-expanded={concepts.length > 0}