@sap-ux/control-property-editor 0.4.6 → 0.4.7

package/package.json

@@ -3,7 +3,7 @@
   "displayName": "Control Property Editor",
   "description": "Control Property Editor",
   "license": "Apache-2.0",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "main": "dist/app.js",
   "repository": {
     "type": "git",

package/src/panels/outline/Tree.tsx

@@ -46,6 +46,7 @@ export const Tree = (): ReactElement => {
         localStorage.getItem('theme') === 'high contrast' ? 'app-panel-hc-selected-bg' : 'app-panel-selected-bg';
 
     const tooltipEventListeners: Record<string, (event: MouseEvent) => void> = {};
+    let currentOpenTooltipId: string | null = null;
 
     useEffect(() => {
         if (selection.cell === undefined && selection.group === undefined && selectedControl !== undefined) {
@@ -101,6 +102,10 @@ export const Tree = (): ReactElement => {
             document.removeEventListener('click', tooltipEventListeners[tooltipId]);
             delete tooltipEventListeners[tooltipId];
         }
+
+        if (currentOpenTooltipId === tooltipId) {
+            currentOpenTooltipId = null;
+        }
     };
 
     /**
@@ -113,9 +118,14 @@ export const Tree = (): ReactElement => {
         e.preventDefault();
         const tooltip = document.getElementById(tooltipId);
 
+        if (currentOpenTooltipId && currentOpenTooltipId !== tooltipId) {
+            closeTooltip(currentOpenTooltipId);
+        }
+
         if (tooltip) {
             tooltip.style.visibility = 'visible';
             tooltip.style.opacity = '1';
+            currentOpenTooltipId = tooltipId;
 
             const handleCloseTooltip = (event: MouseEvent) => {
                 if (!tooltip.contains(event.target as Node)) {
@@ -283,24 +293,45 @@ export const Tree = (): ReactElement => {
         ) : (
             <></>
         );
+        const isExtensionPoint = item?.controlType === 'sap.ui.extensionpoint';
+        const tooltipId = `tooltip--${item?.name}`;
+
         return item && typeof itemIndex === 'number' && itemIndex > -1 ? (
             <div
                 aria-hidden
                 id={item.controlId}
                 className={classNames.join(' ')}
                 onClick={(): void => onSelectCell(item)}>
-                <div
+                <span
                     {...props}
-                    className={`tree-cell`}
-                    style={{
-                        paddingLeft: paddingValue,
-                        cursor: 'auto',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        display: 'block'
-                    }}>
-                    {item.name}
-                </div>
+                    data-testid={isExtensionPoint ? 'tooltip-container' : ''}
+                    style={{ paddingLeft: paddingValue }}
+                    className={`tree-cell ${isExtensionPoint ? 'tooltip-container' : ''}`}
+                    onContextMenu={(e) => isExtensionPoint && handleOpenTooltip(e, tooltipId)}>
+                    {isExtensionPoint && (
+                        <Icon className="right-chevron-icon extension-icon" iconName={UiIcons.DataSource} />
+                    )}
+                    <div
+                        style={{
+                            cursor: 'auto',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            display: 'block'
+                        }}
+                        title={isExtensionPoint ? item?.name : ''}>
+                        {item.name}
+                    </div>
+                    {isExtensionPoint && (
+                        <div id={tooltipId} className="tooltip">
+                            <button
+                                data-testid="tooltip-dialog-button"
+                                onClick={() => handleOpenFragmentDialog(item, tooltipId)}>
+                                {t('ADD_FRAGMENT_AT_EXTENSION_POINT')}
+                            </button>
+                        </div>
+                    )}
+                </span>
+
                 <div style={{ marginLeft: '10px', marginRight: '10px' }}>{indicator}</div>
             </div>
         ) : null;
@@ -424,7 +455,8 @@ export const Tree = (): ReactElement => {
                 onRenderCell={onRenderCell}
                 groups={groups}
                 onSelect={onSelectHeader}
-                groupProps={groupRenderProps}></UIList>
+                groupProps={groupRenderProps}
+            />
         </div>
     );
 };

package/test/unit/panels/outline/OutlinePanel.test.tsx

@@ -372,6 +372,66 @@ describe('OutlinePanel', () => {
         expect(tooltip).toHaveStyle({ visibility: 'hidden', opacity: '0' });
     });
 
+    test('should hide tooltip if another tooltip is already open', () => {
+        const model: OutlineNode[] = [
+            {
+                name: 'one',
+                controlId: '01',
+                children: [
+                    {
+                        name: 'ExtensionPoint',
+                        controlId: '04',
+                        children: [],
+                        controlType: 'sap.ui.extensionpoint',
+                        editable: true,
+                        visible: true
+                    },
+                    {
+                        name: 'ExtensionPoint2',
+                        controlId: '05',
+                        children: [],
+                        controlType: 'sap.ui.extensionpoint',
+                        editable: true,
+                        visible: true
+                    }
+                ],
+                controlType: 'name.space.one',
+                editable: true,
+                visible: true
+            }
+        ];
+        const initialState: State = {
+            deviceType: DeviceType.Desktop,
+            scale: 1,
+            outline: model,
+            filterQuery: filterInitOptions,
+            scenario: scenario.AdaptationProject,
+            selectedControl: undefined,
+            changes: {
+                pending: [],
+                saved: [],
+                controls: {}
+            },
+            icons: []
+        };
+
+        const tooltipId = 'tooltip--ExtensionPoint';
+        const tooltipId2 = 'tooltip--ExtensionPoint2';
+
+        const { container } = render(<OutlinePanel />, { initialState });
+        const spanElements = screen.getAllByTestId('tooltip-container'); // Array of three items
+
+        // Simulate a right-click event
+        fireEvent.contextMenu(spanElements[1]);
+        fireEvent.contextMenu(spanElements[2]);
+
+        const tooltip = container.querySelector(`#${tooltipId}`);
+        const tooltip2 = container.querySelector(`#${tooltipId2}`);
+
+        expect(tooltip).toHaveStyle({ visibility: 'hidden', opacity: '0' });
+        expect(tooltip2).toHaveStyle({ visibility: 'visible', opacity: '1' });
+    });
+
     test('do not expand to previously selected control', () => {
         const { store, container } = render(<OutlinePanel />);
         // clear default applied filters