@sap-ux/control-property-editor 0.2.4 → 0.3.1

package/package.json

@@ -3,7 +3,7 @@
   "displayName": "Control Property Editor",
   "description": "Control Property Editor",
   "license": "Apache-2.0",
-  "version": "0.2.4",
+  "version": "0.3.1",
   "main": "dist/app.js",
   "repository": {
     "type": "git",
@@ -47,10 +47,10 @@
     "esbuild-plugin-copy": "2.1.1",
     "@esbuild-plugins/node-modules-polyfill": "0.1.4",
     "autoprefixer": "10.4.7",
-    "postcss": "8.4.14",
+    "postcss": "8.4.31",
     "yargs-parser": "21.1.1",
-    "@sap-ux/ui-components": "1.11.19",
-    "@sap-ux-private/control-property-editor-common": "0.1.0"
+    "@sap-ux/ui-components": "1.11.21",
+    "@sap-ux-private/control-property-editor-common": "0.2.0"
   },
   "scripts": {
     "clean": "rimraf ./dist ./coverage *.tsbuildinfo",

package/src/middleware.ts

@@ -6,7 +6,8 @@ import {
     startPostMessageCommunication,
     changeProperty as externalChangeProperty,
     selectControl,
-    deletePropertyChanges
+    deletePropertyChanges,
+    addExtensionPoint
 } from '@sap-ux-private/control-property-editor-common';
 
 import type { Action } from './actions';
@@ -47,6 +48,10 @@ export const communicationMiddleware: Middleware<Dispatch<Action>> = (store: Mid
                     sendAction(action);
                     break;
                 }
+                case addExtensionPoint.type: {
+                    sendAction(action);
+                    break;
+                }
                 default:
             }
             return action;

package/src/panels/changes/UnknownChange.tsx

@@ -6,7 +6,7 @@ import { useDispatch } from 'react-redux';
 import styles from './UnknownChange.module.scss';
 import { UIIconButton, UiIcons, UIDialog } from '@sap-ux/ui-components';
 import type { PropertyChangeDeletionDetails } from '@sap-ux-private/control-property-editor-common';
-import { deletePropertyChanges, convertCamelCaseToPascalCase } from '@sap-ux-private/control-property-editor-common';
+import { convertCamelCaseToPascalCase, deletePropertyChanges } from '@sap-ux-private/control-property-editor-common';
 import { getFormattedDateAndTime } from './utils';
 
 export interface UnknownChangeProps {

package/src/panels/outline/OutlinePanel.scss

@@ -69,6 +69,50 @@
     opacity: 0.55;
 }
 
+.extension-icon {
+    margin-top: 2px;
+}
+
+.tooltip-container {
+    position: relative;
+}
+
+.tooltip {
+    background: var(--vscode-badge-background);
+    color: #fff;
+    width: auto;
+    padding: 0px 2px;
+    margin-left: -40px; /* Center the tooltip */
+    bottom: 95%; /* Position the tooltip above the text */
+    left: 50%;
+    border-radius: 4px;
+    position: absolute;
+    text-align: center;
+    z-index: 999;
+    opacity: 0;
+    visibility: hidden;
+    transition: opacity 0.3s;
+
+    button {
+        background-color: var(--vscode-textLink-foreground);
+        border: none;
+        color: white;
+        padding: 4px 8px;
+        text-align: center;
+        text-decoration: none;
+        display: inline-block;
+        font-size: 11px;
+        margin: 4px 2px;
+        cursor: pointer;
+        border-radius: 4px;
+        transition: all 0.1s ease-in-out;
+
+        &:hover {
+            opacity: 0.88;
+        }
+    }
+}
+
 .tree-row-icon {
     display: flex;
     flex-wrap: nowrap;
@@ -94,5 +138,3 @@
     background-color: var(--vscode-list-activeSelectionBackground);
     outline: 1px solid var(--vscode-contrastActiveBorder);
 }
-
-

package/src/panels/outline/Tree.tsx

@@ -5,7 +5,7 @@ import type { IGroup, IGroupRenderProps, IGroupHeaderProps } from '@fluentui/rea
 import { Icon } from '@fluentui/react';
 import { UIList, UiIcons } from '@sap-ux/ui-components';
 
-import { selectControl, reportTelemetry } from '@sap-ux-private/control-property-editor-common';
+import { selectControl, reportTelemetry, addExtensionPoint } from '@sap-ux-private/control-property-editor-common';
 import type { Control, OutlineNode } from '@sap-ux-private/control-property-editor-common';
 
 import type { RootState } from '../../store';
@@ -22,23 +22,29 @@ interface OutlineNodeItem extends OutlineNode {
 
 export const Tree = (): ReactElement => {
     const dispatch = useDispatch();
+
+    const [collapsed, setCollapsed] = useState<IGroup[]>([]);
     const [selection, setSelection] = useState<{ group: undefined | IGroup; cell: undefined | OutlineNodeItem }>({
         group: undefined,
         cell: undefined
     });
-    const [collapsed, setCollapsed] = useState<IGroup[]>([]);
+
     const filterQuery = useSelector<RootState, FilterOptions[]>((state) => state.filterQuery);
     const selectedControl = useSelector<RootState, Control | undefined>((state) => state.selectedControl);
     const controlChanges = useSelector<RootState, ControlChanges>((state) => state.changes.controls);
     const model: OutlineNode[] = useSelector<RootState, OutlineNode[]>((state) => state.outline);
+
     const { groups, items } = useMemo(() => {
         const items: OutlineNodeItem[] = [];
         const filteredModel = getFilteredModel(model, filterQuery);
         return { groups: getGroups(filteredModel, items), items };
     }, [model, filterQuery, selection]);
+
     const selectedClassName =
         localStorage.getItem('theme') === 'high contrast' ? 'app-panel-hc-selected-bg' : 'app-panel-selected-bg';
 
+    const tooltipEventListeners: Record<string, (event: MouseEvent) => void> = {};
+
     useEffect(() => {
         if (selection.cell === undefined && selection.group === undefined && selectedControl !== undefined) {
             updateSelectionFromPreview(selectedControl);
@@ -73,6 +79,63 @@ export const Tree = (): ReactElement => {
         }
     }, []);
 
+    /**
+     * Closes a tooltip and removes the associated event listener.
+     *
+     * @param tooltipId The unique identifier for the tooltip.
+     * @param eventListener The specific event listener to remove (optional).
+     */
+    const closeTooltip = (tooltipId: string, eventListener?: (event: MouseEvent) => void) => {
+        const tooltip = document.getElementById(tooltipId);
+
+        if (tooltip) {
+            tooltip.style.visibility = 'hidden';
+            tooltip.style.opacity = '0';
+        }
+
+        if (eventListener) {
+            document.removeEventListener('click', eventListener);
+        } else if (tooltipId in tooltipEventListeners) {
+            document.removeEventListener('click', tooltipEventListeners[tooltipId]);
+            delete tooltipEventListeners[tooltipId];
+        }
+    };
+
+    /**
+     * Handles the opening of a tooltip and associates an event listener with it.
+     *
+     * @param e The click event that triggered the tooltip.
+     * @param tooltipId The unique identifier for the tooltip.
+     */
+    const handleOpenTooltip = (e: React.MouseEvent<HTMLSpanElement, MouseEvent>, tooltipId: string) => {
+        e.preventDefault();
+        const tooltip = document.getElementById(tooltipId);
+
+        if (tooltip) {
+            tooltip.style.visibility = 'visible';
+            tooltip.style.opacity = '1';
+
+            const handleCloseTooltip = (event: MouseEvent) => {
+                if (!tooltip.contains(event.target as Node)) {
+                    closeTooltip(tooltipId, handleCloseTooltip);
+                }
+            };
+
+            tooltipEventListeners[tooltipId] = handleCloseTooltip;
+
+            document.addEventListener('click', handleCloseTooltip);
+        } else {
+            console.warn(`Tooltip with id ${tooltipId} not found`);
+        }
+    };
+
+    const handleOpenFragmentDialog = (data: OutlineNode, tooltipId: string) => {
+        if (data.controlType === 'sap.ui.extensionpoint') {
+            closeTooltip(tooltipId);
+            dispatch(addExtensionPoint(data));
+        }
+    };
+
     /**
      * Find in group.
      *
@@ -219,7 +282,11 @@ export const Tree = (): ReactElement => {
             <></>
         );
         return item && typeof itemIndex === 'number' && itemIndex > -1 ? (
-            <div className={classNames.join(' ')} onClick={(): void => onSelectCell(item)} id={item.controlId}>
+            <div
+                aria-hidden
+                id={item.controlId}
+                className={classNames.join(' ')}
+                onClick={(): void => onSelectCell(item)}>
                 <div
                     {...props}
                     className={`tree-cell`}
@@ -273,6 +340,7 @@ export const Tree = (): ReactElement => {
         if (selectNode) {
             refProps.ref = scrollRef;
         }
+        const isExtensionPoint = groupHeaderProps?.group?.data?.controlType === 'sap.ui.extensionpoint';
         const focus = filterQuery.filter((item) => item.name === FilterName.focusEditable)[0].value as boolean;
         const focusEditable = !groupHeaderProps?.group?.data?.editable && focus ? 'focusEditable' : '';
         const controlChange = controlChanges[groupHeaderProps?.group?.key ?? ''];
@@ -281,12 +349,20 @@ export const Tree = (): ReactElement => {
         ) : (
             <></>
         );
+
+        const tooltipId = `tooltip--${groupName}`;
+
         return (
             <div
                 {...refProps}
+                aria-hidden
                 className={`${selectNode} tree-row ${focusEditable}`}
                 onClick={(): void => onSelectHeader(groupHeaderProps?.group)}>
-                <span style={{ paddingLeft: paddingValue }} className={`tree-cell`}>
+                <span
+                    style={{ paddingLeft: paddingValue }}
+                    data-testid="tooltip-container"
+                    className={`tree-cell ${isExtensionPoint ? 'tooltip-container' : ''}`}
+                    onContextMenu={(e) => isExtensionPoint && handleOpenTooltip(e, tooltipId)}>
                     {groupHeaderProps?.group?.count !== 0 && (
                         <Icon
                             className={`${chevronTransform}`}
@@ -297,14 +373,27 @@ export const Tree = (): ReactElement => {
                             }}
                         />
                     )}
+                    {isExtensionPoint && (
+                        <Icon className={`${chevronTransform} extension-icon`} iconName={UiIcons.DataSource} />
+                    )}
                     <div
                         style={{
                             cursor: 'pointer',
                             overflow: 'hidden',
                             textOverflow: 'ellipsis'
-                        }}>
+                        }}
+                        title={isExtensionPoint ? groupName : ''}>
                         {groupName}
                     </div>
+                    {isExtensionPoint && (
+                        <div id={tooltipId} className="tooltip">
+                            <button
+                                data-testid="tooltip-dialog-button"
+                                onClick={() => handleOpenFragmentDialog(groupHeaderProps?.group?.data, tooltipId)}>
+                                Add Fragment at Extension Point
+                            </button>
+                        </div>
+                    )}
                 </span>
                 <div style={{ marginLeft: '10px', marginRight: '10px' }}>{indicator}</div>
             </div>
@@ -381,6 +470,7 @@ function getGroups(model: OutlineNode[], items: OutlineNodeItem[], level = 0, pa
             isCollapsed: count === 0,
             data: { ...data, path: newPath }
         };
+
         const shouldCreate = createGroupChild(children);
         newGroup.children = shouldCreate ? getGroups(children, items, level + 1, newPath) : [];
         group.push(newGroup);

package/src/panels/outline/utils.ts

@@ -23,7 +23,8 @@ const commonVisibleControls = [
     'sap.m.Dialog',
     'sap.ui.comp.ValueHelpDialog',
     'sap.viz.ui5.controls.VizFrame',
-    'sap.ovp.ui.Card'
+    'sap.ovp.ui.Card',
+    'sap.ui.extensionpoint'
 ];
 
 /**

package/test/unit/middleware.test.ts

@@ -113,4 +113,24 @@ describe('communication middleware', () => {
         `);
         expect(sendActionfn).toHaveBeenCalledTimes(1);
     });
+
+    test('add extension point - send action', () => {
+        const action = common.addExtensionPoint({ controlId: 'control1' } as common.OutlineNode);
+        const next = jest.fn().mockReturnValue(action);
+        jest.mock('@sap-ux-private/control-property-editor-common', () => {
+            return {
+                addExtensionPoint: { type: '[ext] add-extension-point' }
+            };
+        });
+        const result = middleWare(next)(action);
+        expect(result).toMatchInlineSnapshot(`
+            Object {
+              "payload": Object {
+                "controlId": "control1",
+              },
+              "type": "[ext] add-extension-point",
+            }
+        `);
+        expect(sendActionfn).toHaveBeenCalledTimes(1);
+    });
 });

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

@@ -232,6 +232,14 @@ describe('OutlinePanel', () => {
                 controlType: 'sap.ui.comp.smarttable.SmartTable',
                 editable: true,
                 visible: true
+            },
+            {
+                name: 'ExtensionPoint',
+                controlId: '04',
+                children: [],
+                controlType: 'sap.ui.extensionpoint',
+                editable: true,
+                visible: true
             }
         ];
         const initialState: State = {
@@ -263,6 +271,94 @@ describe('OutlinePanel', () => {
         const SmartTable = screen.getByText(/SmartTable/i);
         expect(SmartTable).toBeInTheDocument();
     });
+
+    test('handleOpenTooltip should show and hide the tooltip', () => {
+        const model: OutlineNode[] = [
+            {
+                name: 'ExtensionPoint',
+                controlId: '04',
+                children: [],
+                controlType: 'sap.ui.extensionpoint',
+                editable: true,
+                visible: true
+            }
+        ];
+        const initialState: State = {
+            deviceType: DeviceType.Desktop,
+            scale: 1,
+            outline: model,
+            filterQuery: filterInitOptions,
+            selectedControl: undefined,
+            changes: {
+                pending: [],
+                saved: [],
+                controls: {}
+            },
+            icons: []
+        };
+
+        const tooltipId = 'tooltip--ExtensionPoint';
+
+        const { container } = render(<OutlinePanel />, { initialState });
+        const spanElement = screen.getByTestId('tooltip-container');
+
+        // Simulate a right-click event
+        fireEvent.contextMenu(spanElement);
+
+        const tooltip = container.querySelector(`#${tooltipId}`);
+
+        expect(tooltip).toHaveStyle({ visibility: 'visible', opacity: '1' });
+
+        // Close the tooltip
+        fireEvent.click(document); // Simulate a click outside the tooltip
+
+        expect(tooltip).toHaveStyle({ visibility: 'hidden', opacity: '0' });
+    });
+
+    test('should show and hide when clicking button to open dialog', () => {
+        const model: OutlineNode[] = [
+            {
+                name: 'ExtensionPoint',
+                controlId: '04',
+                children: [],
+                controlType: 'sap.ui.extensionpoint',
+                editable: true,
+                visible: true
+            }
+        ];
+        const initialState: State = {
+            deviceType: DeviceType.Desktop,
+            scale: 1,
+            outline: model,
+            filterQuery: filterInitOptions,
+            selectedControl: undefined,
+            changes: {
+                pending: [],
+                saved: [],
+                controls: {}
+            },
+            icons: []
+        };
+
+        const tooltipId = 'tooltip--ExtensionPoint';
+
+        const { container } = render(<OutlinePanel />, { initialState });
+        const spanElement = screen.getByTestId('tooltip-container');
+        const buttonElement = screen.getByTestId('tooltip-dialog-button');
+
+        // Simulate a right-click event
+        fireEvent.contextMenu(spanElement);
+
+        const tooltip = container.querySelector(`#${tooltipId}`);
+
+        expect(tooltip).toHaveStyle({ visibility: 'visible', opacity: '1' });
+
+        // Close the tooltip
+        fireEvent.click(buttonElement); // Simulate a click on the tooltip button
+
+        expect(tooltip).toHaveStyle({ visibility: 'hidden', opacity: '0' });
+    });
+
     test('do not expand to previously selected control', () => {
         const { store, container } = render(<OutlinePanel />);
         // clear default applied filters