@openmrs/esm-implementer-tools-app 9.0.3-pre.4788 → 9.0.3-pre.4809

package/src/ui-editor/ui-editor.test.tsx

@@ -0,0 +1,54 @@
+import { describe, expect, it } from 'vitest';
+import { type ExtensionInfo } from '@openmrs/esm-framework/src/internal';
+import { getExtensionOverlayTargets } from './ui-editor';
+
+// `extensions[name].instances` is an Array<ExtensionInstance> in the framework store. These tests
+// guard against regressing to an object-style traversal, which produced array indices as module
+// names and instance property names as slot names, so no overlay ever matched a real DOM node.
+const extensions = {
+  'nav-item': {
+    instances: [
+      { id: 'nav-item-0', slotName: 'top-nav-slot', slotModuleName: '@openmrs/esm-nav-app' },
+      { id: 'nav-item-1', slotName: 'side-nav-slot', slotModuleName: '@openmrs/esm-nav-app' },
+    ],
+  },
+  'patient-banner': {
+    instances: [{ id: 'patient-banner-0', slotName: 'patient-header-slot', slotModuleName: '@openmrs/esm-chart-app' }],
+  },
+} as unknown as Record<string, ExtensionInfo>;
+
+describe('getExtensionOverlayTargets', () => {
+  it('flattens the instances array into real slot, module, and id descriptors', () => {
+    const targets = getExtensionOverlayTargets(extensions);
+
+    expect(targets).toHaveLength(3);
+    expect(targets[0]).toMatchObject({
+      extensionName: 'nav-item',
+      slotName: 'top-nav-slot',
+      slotModuleName: '@openmrs/esm-nav-app',
+    });
+    expect(targets[0].extensionInstance.id).toBe('nav-item-0');
+    expect(targets[2]).toMatchObject({
+      extensionName: 'patient-banner',
+      slotName: 'patient-header-slot',
+      slotModuleName: '@openmrs/esm-chart-app',
+    });
+  });
+
+  it('does not surface array indices or instance property names (regression guard)', () => {
+    const targets = getExtensionOverlayTargets(extensions);
+
+    // Old object-traversal bug surfaced "0"/"1" as module names and "id"/"slotName"/"slotModuleName"
+    // as slot names, with an undefined instance id.
+    expect(targets.map((target) => target.slotModuleName)).not.toContain('0');
+    expect(targets.map((target) => target.slotName)).toEqual(
+      expect.not.arrayContaining(['id', 'slotName', 'slotModuleName']),
+    );
+    expect(targets.every((target) => typeof target.extensionInstance.id === 'string')).toBe(true);
+  });
+
+  it('returns an empty list when there are no extensions', () => {
+    expect(getExtensionOverlayTargets(undefined)).toEqual([]);
+    expect(getExtensionOverlayTargets({})).toEqual([]);
+  });
+});

package/src/ui-editor/ui-editor.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Button } from '@carbon/react';
 import {
   CloseIcon,
+  type ExtensionInfo,
   getExtensionInternalStore,
   useStore,
   useStoreWithActions,
@@ -26,6 +27,32 @@ interface SlotOverlayProps {
   colorScheme: 'blue' | 'green';
 }
 
+export interface ExtensionOverlayTarget {
+  extensionName: string;
+  slotModuleName: string;
+  slotName: string;
+  extensionInstance: ExtensionInfo['instances'][number];
+}
+
+/**
+ * Flattens `extensions[name].instances` into a flat list of overlay targets. `instances` is an
+ * `Array<ExtensionInstance>`, so it must be iterated directly. Treating it as a nested object (via
+ * `Object.entries`) yields array indices as the module name and instance property names as the slot
+ * name, so the generated selectors never match a real extension DOM node.
+ */
+export function getExtensionOverlayTargets(
+  extensions: Record<string, ExtensionInfo> | undefined,
+): Array<ExtensionOverlayTarget> {
+  return Object.entries(extensions ?? {}).flatMap(([extensionName, extensionInfo]) =>
+    (extensionInfo.instances ?? []).map((extensionInstance) => ({
+      extensionName,
+      slotModuleName: extensionInstance.slotModuleName,
+      slotName: extensionInstance.slotName,
+      extensionInstance,
+    })),
+  );
+}
+
 export default function UiEditor() {
   const { t } = useTranslation();
   const { slots, extensions } = useStore(getExtensionInternalStore());
@@ -67,25 +94,16 @@ export default function UiEditor() {
       .filter((x): x is NonNullable<typeof x> => Boolean(x));
   }, [slots]);
 
-  const extensionElements = useMemo(() => {
-    if (!extensions) {
-      return [];
-    }
-
-    return Object.entries(extensions).flatMap(([extensionName, extensionInfo]) =>
-      Object.entries(extensionInfo.instances).flatMap(([slotModuleName, bySlotName]) =>
-        Object.entries(bySlotName).map(([slotName, extensionInstance]) => ({
-          extensionName,
-          slotModuleName,
-          slotName,
-          extensionInstance,
-          element: document.querySelector(
-            `*[data-extension-slot-name="${slotName}"][data-extension-slot-module-name="${slotModuleName}"] *[data-extension-id="${extensionInstance.id}"]`,
-          ) as HTMLElement | null,
-        })),
-      ),
-    );
-  }, [extensions]);
+  const extensionElements = useMemo(
+    () =>
+      getExtensionOverlayTargets(extensions).map((target) => ({
+        ...target,
+        element: document.querySelector(
+          `*[data-extension-slot-name="${target.slotName}"][data-extension-slot-module-name="${target.slotModuleName}"] *[data-extension-id="${target.extensionInstance.id}"]`,
+        ) as HTMLElement | null,
+      })),
+    [extensions],
+  );
 
   return (
     <>