@sap-ux/control-property-editor 0.2.0

package/src/panels/outline/Tree.tsx

@@ -0,0 +1,393 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import type { ReactElement } from 'react';
+import { useSelector, useDispatch } from 'react-redux';
+import type { IGroup, IGroupRenderProps, IGroupHeaderProps } from '@fluentui/react';
+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 type { Control, OutlineNode } from '@sap-ux-private/control-property-editor-common';
+
+import type { RootState } from '../../store';
+import type { ControlChanges, FilterOptions } from '../../slice';
+import { FilterName } from '../../slice';
+import { NoControlFound } from './NoControlFound';
+import { adaptExpandCollapsed, getFilteredModel, isSame } from './utils';
+import { ChangeIndicator } from '../../components/ChangeIndicator';
+
+interface OutlineNodeItem extends OutlineNode {
+    level: number;
+    path: string[];
+}
+
+export const Tree = (): ReactElement => {
+    const dispatch = useDispatch();
+    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';
+
+    useEffect(() => {
+        if (selection.cell === undefined && selection.group === undefined && selectedControl !== undefined) {
+            updateSelectionFromPreview(selectedControl);
+        }
+
+        if (selection.cell !== undefined && selectedControl !== undefined) {
+            if (selection.cell.controlId !== selectedControl.id) {
+                updateSelectionFromPreview(selectedControl);
+            }
+        }
+
+        if (selection.group !== undefined && selectedControl !== undefined) {
+            if (selection.group.key !== selectedControl.id) {
+                updateSelectionFromPreview(selectedControl);
+            }
+        }
+    }, [selectedControl]);
+    useMemo(() => {
+        adaptExpandCollapsed(groups, collapsed);
+    }, [groups, collapsed, selection]);
+
+    const scrollRef = useCallback((node: Element) => {
+        if (node !== null) {
+            setTimeout(() => {
+                // make sure that tree is fully rendered
+                const rect = node.getBoundingClientRect();
+                const outlineContainer = document.getElementsByClassName('section--scrollable')[0];
+                if (rect.top <= 20 || rect.bottom >= outlineContainer?.clientHeight) {
+                    node.scrollIntoView(true);
+                }
+            }, 0);
+        }
+    }, []);
+
+    /**
+     * Find in group.
+     *
+     * @param control Control
+     * @param group IGroup
+     * @returns IGroup[] | undefined
+     */
+    function findInGroup(control: Control, group: IGroup): IGroup[] | undefined {
+        if (group.key === control.id) {
+            return [group];
+        }
+
+        if (group.children !== undefined) {
+            const result = findInGroups(control, group.children);
+            if (result) {
+                return [group, ...result];
+            }
+        }
+        return undefined;
+    }
+
+    /**
+     * Find in group collection.
+     *
+     * @param control Control
+     * @param groups  IGroup[]
+     * @returns IGroup[] | undefined
+     */
+    function findInGroups(control: Control, groups: IGroup[]): IGroup[] | undefined {
+        for (const group of groups) {
+            const result = findInGroup(control, group);
+            if (result !== undefined) {
+                return [group, ...result];
+            }
+        }
+        return undefined;
+    }
+
+    type CurrentType = IGroup | IGroup[] | undefined;
+
+    /**
+     * Sets current item.
+     *
+     * @param current CurrentType,
+     * @param segment string
+     * @returns CurrentType
+     */
+    function setCurrentItem(current: CurrentType, segment: string): CurrentType {
+        if (Array.isArray(current)) {
+            current = current[parseInt(segment, 10)];
+        } else if (current && segment === 'children') {
+            current = current.children;
+        } else {
+            current = undefined;
+        }
+        if (!Array.isArray(current) && current) {
+            current.isCollapsed = false;
+        }
+        return current;
+    }
+
+    /**
+     * Update selection from preview.
+     *
+     * @param control Control
+     */
+    function updateSelectionFromPreview(control: Control): void {
+        const item = items.find((item) => item.controlId === control.id);
+        const pathToGroup = findInGroups(control, groups);
+        if (pathToGroup) {
+            for (const group of pathToGroup) {
+                group.isCollapsed = false;
+            }
+            setSelection({
+                group: pathToGroup.slice(-1)[0],
+                cell: undefined
+            });
+        } else if (item) {
+            let current: CurrentType = groups;
+            for (const segment of item.path) {
+                current = setCurrentItem(current, segment);
+            }
+            setSelection({
+                group: undefined,
+                cell: item
+            });
+        } else if (selection.cell !== undefined || selection.group !== undefined) {
+            setSelection({
+                group: undefined,
+                cell: undefined
+            });
+        }
+    }
+
+    if (items.length === 0 && groups.length === 0) {
+        return <NoControlFound />;
+    }
+
+    const onSelectCell = (item: OutlineNodeItem): void => {
+        setSelection({
+            group: undefined,
+            cell: item
+        });
+        const action = selectControl(item.controlId);
+        dispatch(action);
+    };
+    const onSelectHeader = (node: IGroup | undefined): void => {
+        if (node) {
+            setSelection({
+                group: node,
+                cell: undefined
+            });
+            const name = (node.data.controlType as string).toLowerCase().startsWith('sap')
+                ? node.data.controlType
+                : 'Other Control Types';
+            reportTelemetry({ category: 'Outline Selection', controlName: name }).catch((error) => {
+                console.error(`Error in reporting telemetry`, error);
+            });
+            const action = selectControl(node.key);
+            dispatch(action);
+        }
+    };
+    const onRenderCell = (nestingDepth?: number, item?: OutlineNodeItem, itemIndex?: number): React.ReactNode => {
+        const paddingValue = (item?.level ?? 0) * 10 + 45;
+        const classNames: string[] = ['tree-row'];
+        const props: {
+            ref?: (node: HTMLDivElement) => void;
+        } = {};
+
+        if (selection.cell?.controlId === item?.controlId) {
+            props.ref = scrollRef;
+            classNames.push(selectedClassName);
+        }
+
+        const focus = filterQuery.find((item) => item.name === FilterName.focusEditable)?.value;
+        if (!item?.editable && focus === true) {
+            classNames.push('focusEditable');
+        }
+
+        const controlChange = controlChanges[item?.controlId ?? ''];
+        const indicator = controlChange ? (
+            <ChangeIndicator id={`${item?.controlId}--ChangeIndicator`} {...controlChange} />
+        ) : (
+            <></>
+        );
+        return item && typeof itemIndex === 'number' && itemIndex > -1 ? (
+            <div className={classNames.join(' ')} onClick={(): void => onSelectCell(item)} id={item.controlId}>
+                <div
+                    {...props}
+                    className={`tree-cell`}
+                    style={{
+                        paddingLeft: paddingValue,
+                        cursor: 'auto',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        display: 'block'
+                    }}>
+                    {item.name}
+                </div>
+                <div style={{ marginLeft: '10px', marginRight: '10px' }}>{indicator}</div>
+            </div>
+        ) : null;
+    };
+    const onToggleCollapse = (groupHeaderProps?: IGroupHeaderProps): void => {
+        if (groupHeaderProps?.onToggleCollapse && groupHeaderProps?.group) {
+            groupHeaderProps?.onToggleCollapse(groupHeaderProps?.group);
+        }
+
+        const isCollapsed = groupHeaderProps?.group?.isCollapsed;
+        if (groupHeaderProps?.group) {
+            if (isCollapsed) {
+                // set collapsed row
+                setCollapsed([...collapsed, groupHeaderProps.group]);
+            } else {
+                // filter expanded row
+                const filterNodes = collapsed.filter(
+                    (item) => !isSame(item.data.path, groupHeaderProps.group?.data.path)
+                );
+                setCollapsed(filterNodes);
+            }
+        }
+    };
+    const onRenderHeader = (groupHeaderProps?: IGroupHeaderProps): React.JSX.Element | null => {
+        const selectNode = selection.group?.key === groupHeaderProps?.group?.key ? selectedClassName : '';
+        let paddingValue = (groupHeaderProps?.group?.level ?? 0) * 10 + 15;
+        // add padding to compensate absence of chevron icon
+        if (groupHeaderProps?.group?.count === 0) {
+            paddingValue += 15;
+        }
+        const chevronTransform =
+            groupHeaderProps?.group?.key && groupHeaderProps.group.isCollapsed
+                ? 'right-chevron-icon'
+                : 'down-chevron-icon';
+        const groupName = `${groupHeaderProps?.group?.name}`;
+        const refProps: {
+            ref?: (node: HTMLDivElement) => void;
+        } = {};
+        if (selectNode) {
+            refProps.ref = scrollRef;
+        }
+        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 ?? ''];
+        const indicator = controlChange ? (
+            <ChangeIndicator id={`${groupHeaderProps?.group?.key ?? ''}--ChangeIndicator`} {...controlChange} />
+        ) : (
+            <></>
+        );
+        return (
+            <div
+                {...refProps}
+                className={`${selectNode} tree-row ${focusEditable}`}
+                onClick={(): void => onSelectHeader(groupHeaderProps?.group)}>
+                <span style={{ paddingLeft: paddingValue }} className={`tree-cell`}>
+                    {groupHeaderProps?.group?.count !== 0 && (
+                        <Icon
+                            className={`${chevronTransform}`}
+                            iconName={UiIcons.Chevron}
+                            onClick={(event) => {
+                                onToggleCollapse(groupHeaderProps);
+                                event.stopPropagation();
+                            }}
+                        />
+                    )}
+                    <div
+                        style={{
+                            cursor: 'pointer',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis'
+                        }}>
+                        {groupName}
+                    </div>
+                </span>
+                <div style={{ marginLeft: '10px', marginRight: '10px' }}>{indicator}</div>
+            </div>
+        );
+    };
+    const groupRenderProps: IGroupRenderProps = {
+        showEmptyGroups: true,
+        onRenderHeader
+    };
+
+    // workaround for UIList not exposing GroupedList props
+    const listProp: {
+        onShouldVirtualize: () => false;
+        usePageCache: boolean;
+    } = {
+        onShouldVirtualize: () => false,
+        usePageCache: true
+    };
+
+    return (
+        <div id="list-outline" className="app-panel-scroller">
+            <UIList
+                {...listProp}
+                items={items as never[]}
+                onRenderCell={onRenderCell}
+                groups={groups}
+                onSelect={onSelectHeader}
+                groupProps={groupRenderProps}></UIList>
+        </div>
+    );
+};
+
+/**
+ * Checks a child can be added.
+ *
+ * @param model OutlineNode[]
+ * @returns boolean
+ */
+function createGroupChild(model: OutlineNode[]): boolean {
+    let result = false;
+    for (const data of model) {
+        const children = data.children || [];
+        if (children.length > 0) {
+            result = true;
+            break;
+        }
+    }
+    return result;
+}
+
+/**
+ * Get groups.
+ *
+ * @param model OutlineNode[]
+ * @param items  OutlineNodeItem[]
+ * @param level number, default to 0
+ * @param path string
+ * @returns IGroup[]
+ */
+function getGroups(model: OutlineNode[], items: OutlineNodeItem[], level = 0, path: string[] = []): IGroup[] {
+    const group: IGroup[] = [];
+    for (let i = 0; i < model.length; i++) {
+        const data = model[i];
+        const children = data.children || [];
+        const count = children.length; // no of item for each group
+        const newPath = [...path, i.toString(), 'children'];
+        const newGroup = {
+            count,
+            key: `${data.controlId}`,
+            name: data.name,
+            startIndex: items.length,
+            level: level,
+            children: [] as IGroup[],
+            isCollapsed: count === 0,
+            data: { ...data, path: newPath }
+        };
+        const shouldCreate = createGroupChild(children);
+        newGroup.children = shouldCreate ? getGroups(children, items, level + 1, newPath) : [];
+        group.push(newGroup);
+        // add node children to item
+        if (!shouldCreate) {
+            children.forEach((item, i) => items.push({ ...item, level, path: [...newPath, i.toString()] }));
+        }
+    }
+    return group;
+}

package/src/panels/outline/index.ts

@@ -0,0 +1 @@
+export * from './OutlinePanel';

package/src/panels/outline/utils.ts

@@ -0,0 +1,154 @@
+import type { OutlineNode } from '@sap-ux-private/control-property-editor-common';
+import type { FilterOptions } from '../../slice';
+import { FilterName } from '../../slice';
+import type { IGroup } from '@fluentui/react';
+
+const commonVisibleControls = [
+    'sap.ui.comp.smarttable.SmartTable',
+    'sap.m.Column',
+    'sap.ui.comp.smartfilterbar.SmartFilterBar',
+    'sap.ui.comp.filterbar.FilterItems',
+    'sap.m.Button',
+    'sap.m.MultiInput',
+    'sap.ui.comp.smartform.SmartForm',
+    'sap.ui.comp.smartform.Group',
+    'sap.ui.comp.smartform.GroupElement',
+    'sap.uxap.ObjectPageSection',
+    'sap.m.Bar',
+    'sap.m.OverflowToolbarButton',
+    'sap.m.MultiComboBox',
+    'sap.m.ComboBox',
+    'sap.m.OverflowToolbar',
+    'sap.m.Table',
+    'sap.m.Dialog',
+    'sap.ui.comp.ValueHelpDialog',
+    'sap.viz.ui5.controls.VizFrame',
+    'sap.ovp.ui.Card'
+];
+
+/**
+ * Filter model. If none of filter conditions meet, model without filter is returned.
+ *
+ * @param model OutlineNode[]
+ * @param filterOptions FilterOptions[]
+ * @returns OutlineNode[]
+ */
+export function getFilteredModel(model: OutlineNode[], filterOptions: FilterOptions[]): OutlineNode[] {
+    let filteredModel: OutlineNode[] = [];
+    for (const option of filterOptions) {
+        if (option.name === FilterName.query) {
+            if (filteredModel.length > 0) {
+                // filter based on filtered model
+                filteredModel = filterByQuery(filteredModel, option);
+            } else {
+                filteredModel = filterByQuery(model, option);
+            }
+        } else if (option.name === FilterName.focusCommonlyUsed) {
+            if (filteredModel.length > 0) {
+                // filter based on filtered model
+                filteredModel = filterByCommonlyUsedControls(filteredModel, option);
+            } else {
+                filteredModel = filterByCommonlyUsedControls(model, option);
+            }
+        }
+    }
+
+    return filteredModel;
+}
+
+/**
+ * Filter by options.
+ *
+ * @param model OutlineNode[]
+ * @param filterOption FilterOptions
+ * @returns OutlineNode[]
+ */
+function filterByQuery(model: OutlineNode[], filterOption: FilterOptions) {
+    const filteredModel: OutlineNode[] = [];
+    const query = (filterOption.value as string).toLocaleUpperCase();
+    if (query.length === 0) {
+        return model;
+    }
+    for (const item of model) {
+        let parentMatch = false;
+        const name = item.name.toLocaleUpperCase();
+        if (name.includes(query)) {
+            parentMatch = true;
+            // add node without its children
+            filteredModel.push({ ...item, children: [] });
+        }
+        if (item.children.length) {
+            const data = filterByQuery(item.children, filterOption);
+            if (data.length > 0) {
+                // children matched filter query
+                if (parentMatch) {
+                    // parent matched filter query and pushed already to `filterModel`. only  replace matched children
+                    filteredModel[filteredModel.length - 1].children = data;
+                } else {
+                    // add node and its matched children
+                    const newFilterModel = { ...item, children: data };
+                    filteredModel.push(newFilterModel);
+                }
+            }
+        }
+    }
+    return filteredModel;
+}
+
+/**
+ * Filter by commonly used control.
+ *
+ * @param model OutlineNode[]
+ * @param filterOption FilterOptions
+ * @returns OutlineNode[]
+ */
+function filterByCommonlyUsedControls(model: OutlineNode[], filterOption: FilterOptions) {
+    const filteredModel: OutlineNode[] = [];
+    const checked = filterOption.value as boolean;
+    if (!checked) {
+        return model;
+    }
+    for (const item of model) {
+        let parentMatch = false;
+        const controlType = item.controlType;
+        if (commonVisibleControls.includes(controlType)) {
+            parentMatch = true;
+            // add node without its children
+            filteredModel.push({ ...item, children: [] });
+        }
+        if (item.children.length) {
+            const data = filterByCommonlyUsedControls(item.children, filterOption);
+            if (data.length > 0) {
+                // children matched filter query
+                if (parentMatch) {
+                    // parent matched filter query and pushed already to `filterModel`. only  replace matched children
+                    filteredModel[filteredModel.length - 1].children = data;
+                } else {
+                    // add node and its matched children
+                    const newFilterModel = { ...item, children: data };
+                    filteredModel.push(newFilterModel);
+                }
+            }
+        }
+    }
+    return filteredModel;
+}
+
+export const isSame = (a: string[], b: string) => {
+    return JSON.stringify(a) === JSON.stringify(b);
+};
+
+export const adaptExpandCollapsed = (groups: IGroup[], collapsed: IGroup[]) => {
+    if (collapsed.length === 0) {
+        return;
+    }
+    for (const group of groups) {
+        const [collapsedResult] = collapsed.filter((data) => isSame(group.data.path, data.data.path));
+        if (collapsedResult) {
+            group.isCollapsed = true;
+        }
+        if (group.children) {
+            adaptExpandCollapsed(group.children, collapsed);
+        }
+    }
+};

package/src/panels/properties/Clipboard.tsx

@@ -0,0 +1,44 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { Icon } from '@fluentui/react';
+import { UICallout, UICalloutContentPadding, UiIcons } from '@sap-ux/ui-components';
+import { useTranslation } from 'react-i18next';
+import { defaultFontSize } from './constants';
+
+export interface ClipboardProps {
+    label: string;
+}
+
+/**
+ * React element for Clipboard.
+ *
+ * @param clipBoardProps ClipboardProps
+ * @returns ReactElement
+ */
+export function Clipboard(clipBoardProps: ClipboardProps): ReactElement {
+    const { label } = clipBoardProps;
+    const { t } = useTranslation();
+    return (
+        <UICallout
+            styles={{
+                calloutMain: {
+                    minWidth: 0,
+                    padding: '5px 10px 5px 10px',
+                    outline: '1px solid var(--vscode-terminal-ansiGreen) !important',
+                    fontSize: defaultFontSize
+                }
+            }}
+            target={`#${label.replace(/\s/g, '')}--copy`}
+            isBeakVisible={false}
+            gapSpace={5}
+            directionalHint={9}
+            contentPadding={UICalloutContentPadding.None}>
+            <span data-testid="copied-to-clipboard-popup" style={{ display: 'flex', alignItems: 'center' }}>
+                <Icon iconName={UiIcons.Success} />
+                <span data-testid="copied-to-clipboard-message" style={{ marginLeft: '5px' }}>
+                    {t('COPIED_TO_CLIPBOARD')}
+                </span>
+            </span>
+        </UICallout>
+    );
+}

package/src/panels/properties/DeviceSelector.tsx

@@ -0,0 +1,40 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { DeviceType } from '../../devices';
+
+import type { DeviceToggleProps } from './DeviceToggle';
+import { DeviceToggle } from './DeviceToggle';
+
+/**
+ * React element for Device Selector.
+ *
+ * @returns ReactElement
+ */
+export function DeviceSelector(): ReactElement {
+    const { t } = useTranslation();
+
+    const deviceProps: DeviceToggleProps[] = [
+        {
+            deviceType: DeviceType.Desktop,
+            tooltip: t('DEVICE_TYPE_DESKTOP')
+        },
+        {
+            deviceType: DeviceType.Tablet,
+            tooltip: t('DEVICE_TYPE_TABLET')
+        },
+        {
+            deviceType: DeviceType.Phone,
+            tooltip: t('DEVICE_TYPE_PHONE')
+        }
+    ];
+
+    return (
+        <>
+            {deviceProps.map((props: DeviceToggleProps) => (
+                <DeviceToggle key={props.deviceType} {...props} />
+            ))}
+        </>
+    );
+}

package/src/panels/properties/DeviceToggle.tsx

@@ -0,0 +1,39 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import type { AnyAction } from 'redux';
+import { UIIconButton } from '@sap-ux/ui-components';
+
+import type { DeviceType } from '../../devices';
+import { changeDeviceType } from '../../slice';
+import type { RootState } from '../../store';
+
+export interface DeviceToggleProps {
+    deviceType: DeviceType;
+    tooltip: string;
+}
+
+/**
+ * React element for device toggle.
+ *
+ * @param deviceToggleProps DeviceToggleProps
+ * @returns ReactElement
+ */
+export function DeviceToggle(deviceToggleProps: DeviceToggleProps): ReactElement {
+    const { deviceType, tooltip } = deviceToggleProps;
+    const dispatch = useDispatch();
+    const selectedDeviceType = useSelector<RootState, DeviceType>((state) => state.deviceType);
+    const checked = deviceType === selectedDeviceType;
+    return (
+        <UIIconButton
+            id={`device-toggle-${deviceType}`}
+            iconProps={{
+                iconName: deviceType
+            }}
+            title={tooltip}
+            toggle={true}
+            checked={checked}
+            onClick={(): AnyAction => dispatch(changeDeviceType(deviceType))}
+        />
+    );
+}