(fix) O3-4898: Implementer tools: Prevent crash when hovering over tree-level descriptions (#1485)

* (fix) Implementer tools: Prevent crash when hovering over tree-level descriptions

* fix: use Object.hasOwn() and revert en.json changes

* fix: add type guards and fix lodash.unset usage in implementer tools

- Add type checks before Object.hasOwn() to prevent TypeError on null/undefined values
- Fix improper use of lodash.unset by cloning state before mutation
- Follows immutable state update patterns to prevent store corruption

* test: add unit tests for type guards and lodash.unset fix

- Add tests to verify type guards prevent TypeError on null/undefined values
- Add tests to verify immutable state update pattern with lodash.unset
- Ensures changes follow best practices and prevent store corruption

* Fixup: Complete type guards and improve type safety in config-subtree component

Adds type guards for _source and _description properties to prevent runtime crashes when
accessing metadata on non-leaf config nodes. Also removes unused parameters and adds explicit
TypeScript type annotations for better type safety.

* Normalize line endings in translation files to LF

Converts CRLF (Windows) line endings to LF (Unix) to match repository convention.

* Replace non-canonical tests with canonical component-level test

Previous tests were not canonical and did not test the component-level behavior. Rather,
they test implementation details. They also used non-canonical imports instead of Jest
globals and are not colocated properly to the code they were testing.

---------

Co-authored-by: Dennis Kigen <kigen.work@gmail.com>

Author: RajPrakash681

packages/apps/esm-implementer-tools-app/src/configuration/configuration.test.tsx

@@ -361,4 +361,38 @@ describe('Configuration', () => {
       // expect(mockSetTemporaryConfigValue).toHaveBeenCalledWith(["@openmrs/luigi", "favoriteNumbers"], [5, 11, 13]);
     }
   });
+
+  it('handles hovering over config tree items without crashing', async () => {
+    const user = userEvent.setup();
+
+    implementerToolsConfigStore.setState({
+      config: {
+        '@openmrs/mario': {
+          hasHat: mockImplToolsConfig['@openmrs/mario'].hasHat,
+          weapons: {
+            gloves: {
+              _type: Type.Number,
+              _default: 0,
+              _value: 2,
+              _source: 'provided',
+            },
+          },
+        },
+      },
+    });
+
+    renderConfiguration();
+
+    // Find and hover over a leaf node (hasHat)
+    const hasHatElement = await screen.findByText('hasHat');
+    await user.hover(hasHatElement);
+
+    // Find and hover over a branch node (weapons) - this should not crash
+    const weaponsElement = await screen.findByText('weapons');
+    await user.hover(weaponsElement);
+
+    // Both elements should still be in the document (no crash occurred)
+    expect(hasHatElement).toBeInTheDocument();
+    expect(weaponsElement).toBeInTheDocument();
+  });
 });

packages/apps/esm-implementer-tools-app/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>
+          );
+        })}
     </>
   );
 }

packages/apps/esm-implementer-tools-app/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}