@sap-ux/control-property-editor 0.2.0

package/src/slice.ts

@@ -0,0 +1,216 @@
+import type { SliceCaseReducers } from '@reduxjs/toolkit';
+import { createSlice, createAction } from '@reduxjs/toolkit';
+
+import type {
+    Control,
+    IconDetails,
+    OutlineNode,
+    PendingPropertyChange,
+    PropertyChange,
+    SavedPropertyChange
+} from '@sap-ux-private/control-property-editor-common';
+import {
+    changeStackModified,
+    controlSelected,
+    iconsLoaded,
+    outlineChanged,
+    propertyChanged,
+    propertyChangeFailed
+} from '@sap-ux-private/control-property-editor-common';
+import { DeviceType } from './devices';
+
+interface SliceState {
+    deviceType: DeviceType;
+    scale: number;
+
+    /**
+     * If set to true on resize the preview will be scaled to fit available space
+     */
+    fitPreview?: boolean;
+    selectedControl: Control | undefined;
+    outline: OutlineNode[];
+    filterQuery: FilterOptions[];
+    icons: IconDetails[];
+    changes: ChangesSlice;
+}
+
+export interface ChangesSlice {
+    controls: ControlChanges;
+    pending: PendingPropertyChange[];
+    saved: SavedPropertyChange[];
+}
+export interface ControlChanges {
+    [id: string]: ControlChangeStats;
+}
+
+export interface ControlChangeStats {
+    controlName: string;
+    pending: number;
+    saved: number;
+    properties: PropertyChanges;
+}
+
+export interface PropertyChanges {
+    [id: string]: PropertyChangeStats;
+}
+export interface PropertyChangeStats {
+    pending: number;
+    saved: number;
+    lastSavedChange?: SavedPropertyChange;
+    lastChange?: PendingPropertyChange;
+}
+
+export const enum FilterName {
+    focusEditable = 'focus-editable-controls',
+    focusCommonlyUsed = 'focus-commonly-used-controls',
+    query = 'query',
+    changeSummaryFilterQuery = 'change-summary-filter-query',
+    showEditableProperties = 'show-editable-properties'
+}
+export interface FilterOptions {
+    name: FilterName;
+    value: string | boolean;
+}
+const filterInitOptions: FilterOptions[] = [
+    { name: FilterName.focusEditable, value: true },
+    { name: FilterName.focusCommonlyUsed, value: true },
+    { name: FilterName.query, value: '' },
+    { name: FilterName.changeSummaryFilterQuery, value: '' },
+    { name: FilterName.showEditableProperties, value: true }
+];
+
+export const changeProperty = createAction<PropertyChange>('app/change-property');
+export const changePreviewScale = createAction<number>('app/change-preview-scale');
+export const changePreviewScaleMode = createAction<'fit' | 'fixed'>('app/change-preview-scale-mode');
+export const changeDeviceType = createAction<DeviceType>('app/change-device-type');
+export const filterNodes = createAction<FilterOptions[]>('app/filter-nodes');
+
+export const initialState = {
+    deviceType: DeviceType.Desktop,
+    scale: 1.0,
+    selectedControl: undefined,
+    outline: [],
+    filterQuery: filterInitOptions,
+    icons: [],
+    changes: {
+        controls: {},
+        pending: [],
+        saved: []
+    }
+};
+const slice = createSlice<SliceState, SliceCaseReducers<SliceState>, string>({
+    name: 'app',
+    initialState,
+    reducers: {},
+    extraReducers: (builder) =>
+        builder
+            .addMatcher(outlineChanged.match, (state, action: ReturnType<typeof outlineChanged>): void => {
+                state.outline = action.payload;
+            })
+            .addMatcher(controlSelected.match, (state, action: ReturnType<typeof controlSelected>): void => {
+                state.selectedControl = action.payload;
+            })
+            .addMatcher(changeDeviceType.match, (state, action: ReturnType<typeof changeDeviceType>): void => {
+                state.deviceType = action.payload;
+            })
+            .addMatcher(changePreviewScale.match, (state, action: ReturnType<typeof changePreviewScale>): void => {
+                state.scale = action.payload;
+            })
+            .addMatcher(
+                changePreviewScaleMode.match,
+                (state, action: ReturnType<typeof changePreviewScaleMode>): void => {
+                    state.fitPreview = action.payload === 'fit';
+                }
+            )
+            .addMatcher(iconsLoaded.match, (state, action: ReturnType<typeof iconsLoaded>): void => {
+                state.icons = action.payload;
+            })
+            .addMatcher(changeProperty.match, (state, action: ReturnType<typeof changeProperty>): void => {
+                if (state.selectedControl?.id === action.payload.controlId) {
+                    const index = state.selectedControl?.properties.findIndex(
+                        (property) => property.name === action.payload.propertyName
+                    );
+                    if (index !== -1) {
+                        state.selectedControl.properties[index].value = action.payload.value;
+                        state.selectedControl.properties[index].errorMessage = '';
+                    }
+                }
+            })
+            .addMatcher(propertyChanged.match, (state, action: ReturnType<typeof propertyChanged>): void => {
+                if (state.selectedControl?.id === action.payload.controlId) {
+                    const index = state.selectedControl?.properties.findIndex(
+                        (property) => property.name === action.payload.propertyName
+                    );
+                    if (index !== -1) {
+                        state.selectedControl.properties[index].value = action.payload.newValue;
+                    }
+                }
+            })
+            .addMatcher(filterNodes.match, (state, action: ReturnType<typeof filterNodes>): void => {
+                action.payload.forEach((item) => {
+                    const stateItem = state.filterQuery.find((filterItem) => filterItem.name === item.name);
+                    if (stateItem) {
+                        stateItem.value = item.value;
+                    }
+                });
+            })
+            .addMatcher(propertyChangeFailed.match, (state, action: ReturnType<typeof propertyChangeFailed>): void => {
+                if (state.selectedControl?.id === action.payload.controlId) {
+                    const index = state.selectedControl?.properties.findIndex(
+                        (property) => property.name === action.payload.propertyName
+                    );
+                    if (index !== -1) {
+                        state.selectedControl.properties[index].errorMessage = action.payload.errorMessage;
+                    }
+                }
+            })
+            .addMatcher(changeStackModified.match, (state, action: ReturnType<typeof changeStackModified>): void => {
+                state.changes.saved = action.payload.saved;
+                state.changes.pending = action.payload.pending;
+                state.changes.controls = {};
+                for (const change of [...action.payload.pending, ...action.payload.saved].reverse()) {
+                    const { controlId, propertyName, type, controlName } = change;
+                    const key = `${controlId}`;
+                    const control = state.changes.controls[key]
+                        ? {
+                              pending: state.changes.controls[key].pending,
+                              saved: state.changes.controls[key].saved,
+                              controlName: state.changes.controls[key].controlName,
+                              properties: state.changes.controls[key].properties
+                          }
+                        : {
+                              pending: 0,
+                              saved: 0,
+                              controlName: controlName ?? '',
+                              properties: {}
+                          };
+                    if (type === 'pending') {
+                        control.pending++;
+                    } else if (type === 'saved') {
+                        control.saved++;
+                    }
+                    const property = control.properties[propertyName]
+                        ? {
+                              pending: control.properties[propertyName].pending,
+                              saved: control.properties[propertyName].saved,
+                              lastSavedChange: control.properties[propertyName].lastSavedChange,
+                              lastChange: control.properties[propertyName].lastChange
+                          }
+                        : {
+                              pending: 0,
+                              saved: 0
+                          };
+                    if (change.type === 'pending') {
+                        property.pending++;
+                        property.lastChange = change;
+                    } else if (change.type === 'saved') {
+                        property.lastSavedChange = change;
+                        property.saved++;
+                    }
+                    control.properties[propertyName] = property;
+                    state.changes.controls[key] = control;
+                }
+            })
+});
+
+export default slice.reducer;

package/src/store.ts

@@ -0,0 +1,19 @@
+import { configureStore, compose, applyMiddleware } from '@reduxjs/toolkit';
+import { useDispatch } from 'react-redux';
+import { communicationMiddleware } from './middleware';
+import reducer from './slice';
+
+declare let window: Window & { __REDUX_DEVTOOLS_EXTENSION_COMPOSE__: <R>(data: R) => R };
+const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?? compose;
+
+export const store = configureStore({
+    reducer,
+    devTools: false,
+    middleware: [],
+    enhancers: [composeEnhancers(applyMiddleware(communicationMiddleware))]
+});
+
+export type AppDispatch = typeof store.dispatch;
+export const useAppDispatch = (): AppDispatch => useDispatch<AppDispatch>();
+
+export type RootState = ReturnType<typeof store.getState>;

package/src/use-local-storage.ts

@@ -0,0 +1,40 @@
+import type React from 'react';
+import { useState, useEffect } from 'react';
+
+/**
+ * Get full control key.
+ *
+ * @param key string
+ * @returns string - key value
+ */
+function fullKey(key: string): string {
+    return `com.sap.ux.control-property-editor.${key}`;
+}
+/**
+ * Use local storage.
+ *
+ * @param key string
+ * @param defaultValue T
+ * @returns [value, setValue] [T, React.Dispatch<T>]
+ */
+export function useLocalStorage<T>(key: string, defaultValue: T): [T, React.Dispatch<T>] {
+    const [value, setValue] = useState(() => {
+        const savedValue = localStorage.getItem(fullKey(key));
+
+        if (!savedValue) {
+            return defaultValue;
+        }
+
+        try {
+            return JSON.parse(savedValue);
+        } catch (e) {
+            return defaultValue;
+        }
+    });
+
+    useEffect(() => {
+        localStorage.setItem(fullKey(key), JSON.stringify(value));
+    }, [key, value]);
+
+    return [value, setValue];
+}

package/src/use-window-size.ts

@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react';
+
+import { debounce } from '@sap-ux-private/control-property-editor-common';
+
+export interface WindowSize {
+    width: number | undefined;
+    height: number | undefined;
+}
+
+/**
+ * Gets state of window size.
+ *
+ * @returns WindowSize
+ */
+export function useWindowSize(): WindowSize {
+    const [windowSize, setWindowSize] = useState<WindowSize>({
+        width: undefined,
+        height: undefined
+    });
+
+    useEffect(() => {
+        const handleResize = debounce(() => {
+            setWindowSize({
+                width: window.innerWidth,
+                height: window.innerHeight
+            });
+        }, 500);
+
+        window.addEventListener('resize', handleResize);
+
+        setWindowSize({
+            width: window.innerWidth,
+            height: window.innerHeight
+        });
+
+        return (): void => window.removeEventListener('resize', handleResize);
+    }, []);
+    return windowSize;
+}

package/src/variables.scss

@@ -0,0 +1,2 @@
+$defaultFontSize: 13px;
+$sectionHeaderFontSize: 11px;

package/test/unit/App.test.tsx

@@ -0,0 +1,207 @@
+import React from 'react';
+import { fireEvent, screen } from '@testing-library/react';
+import { initIcons } from '@sap-ux/ui-components';
+
+import { render, mockDomEventListener } from './utils';
+import { initI18n } from '../../src/i18n';
+
+import App from '../../src/App';
+import { controlSelected } from '@sap-ux-private/control-property-editor-common';
+import { mockResizeObserver } from '../utils/utils';
+import { InputType } from '../../src/panels/properties/types';
+import { registerAppIcons } from '../../src/icons';
+import { DeviceType } from '../../src/devices';
+import { changePreviewScale, initialState } from '../../src/slice';
+
+jest.useFakeTimers({ advanceTimers: true });
+const windowEventListenerMock = mockDomEventListener(window);
+beforeAll(() => {
+    mockResizeObserver();
+    initI18n();
+    registerAppIcons();
+    initIcons();
+    // JSDom does not implement this and an error was being
+    // thrown from jest-axe because of it.
+    (window as any).getComputedStyle = jest.fn();
+});
+
+test('renders empty properties panel', () => {
+    render(<App previewUrl="" />);
+    const noControlSelected = screen.getByText(/No control selected/i);
+    expect(noControlSelected).toBeInTheDocument();
+
+    const selectControlText = screen.getByText(/Select a control on the canvas to see and modify its properties/i);
+    expect(selectControlText).toBeInTheDocument();
+
+    const controlSelectIcon = screen.getByTestId('Control-Property-Editor-No-Control-Selected');
+    expect(controlSelectIcon).toBeInTheDocument();
+});
+
+test('renders properties', () => {
+    const { store } = render(<App previewUrl="" />);
+    const propNameString = 'activeIcon';
+    const propNameDropDown = 'ariaHasPopup';
+    const propNameCheckbox = 'visible';
+    const propNameCheckboxExpression = 'random';
+    const propNameDropDownExpression = 'sync';
+    store.dispatch(
+        controlSelected({
+            id: 'v2flex::sap.suite.ui.generic.template.ListReport.view.ListReport::SEPMRA_C_PD_Product--addEntry',
+            type: 'sap.m.Button',
+            properties: [
+                {
+                    type: 'string',
+                    editor: 'input',
+                    name: propNameString,
+                    value: '',
+                    isEnabled: true,
+                    readableName: ''
+                },
+                {
+                    type: 'string',
+                    editor: 'dropdown',
+                    name: propNameDropDown,
+                    value: 'None',
+                    isEnabled: true,
+                    readableName: '',
+                    options: [
+                        {
+                            key: 'None',
+                            text: 'None'
+                        },
+                        {
+                            key: 'Menu',
+                            text: 'Menu'
+                        },
+                        {
+                            key: 'ListBox',
+                            text: 'ListBox'
+                        },
+                        {
+                            key: 'Tree',
+                            text: 'Tree'
+                        },
+                        {
+                            key: 'Grid',
+                            text: 'Grid'
+                        },
+                        {
+                            key: 'Dialog',
+                            text: 'Dialog'
+                        }
+                    ]
+                },
+                {
+                    type: 'boolean',
+                    editor: 'checkbox',
+                    name: propNameCheckbox,
+                    value: true,
+                    isEnabled: true,
+                    readableName: 'test check'
+                },
+                {
+                    type: 'string',
+                    editor: 'dropdown',
+                    options: [],
+                    name: propNameDropDownExpression,
+                    value: '{ dropDownDynamicExpression }',
+                    isEnabled: true,
+                    readableName: ''
+                },
+                {
+                    type: 'boolean',
+                    editor: 'checkbox',
+                    name: propNameCheckboxExpression,
+                    isEnabled: true,
+                    value: '{ checkBoxDynamicExpression }',
+                    readableName: 'test check dynamic expression'
+                },
+                {
+                    type: 'string',
+                    editor: 'unknown',
+                    name: 'unknownprop',
+                    isEnabled: true,
+                    value: 'checkBoxDynamicExpression',
+                    readableName: 'test check dynamic expression'
+                }
+            ]
+        })
+    );
+    const visiblePropertyLabel = screen.getByTestId(`${propNameCheckbox}--Label`);
+    expect(visiblePropertyLabel).toBeInTheDocument();
+
+    const buttonTrue = screen.getByTestId(`${propNameCheckbox}--InputTypeToggle--${InputType.booleanTrue}`);
+    expect(buttonTrue.getAttribute('aria-pressed')).toBe('true');
+    expect(buttonTrue).toBeInTheDocument();
+
+    const buttonFalse = screen.getByTestId(`${propNameCheckbox}--InputTypeToggle--${InputType.booleanFalse}`);
+    expect(buttonFalse.getAttribute('aria-pressed')).toBe('false');
+    expect(buttonFalse).toBeInTheDocument();
+
+    const buttonExpression = screen.getByTestId(`${propNameCheckbox}--InputTypeToggle--${InputType.expression}`);
+    expect(buttonExpression.getAttribute('aria-pressed')).toBe('false');
+    expect(buttonExpression).toBeInTheDocument();
+
+    const dropdownButtonExp2 = screen.getByTestId(
+        `${propNameDropDownExpression}--InputTypeToggle--${InputType.expression}`
+    );
+    expect(dropdownButtonExp2.getAttribute('aria-pressed')).toBe('true');
+    expect(dropdownButtonExp2).toBeInTheDocument();
+
+    const checkButtonExp2 = screen.getByTestId(
+        `${propNameCheckboxExpression}--InputTypeToggle--${InputType.expression}`
+    );
+    expect(checkButtonExp2.getAttribute('aria-pressed')).toBe('true');
+    expect(checkButtonExp2).toBeInTheDocument();
+
+    let notFoundException = null;
+    try {
+        screen.getByTestId(`${propNameCheckbox}--StringEditor`);
+    } catch (e) {
+        notFoundException = e;
+    }
+    expect(notFoundException).toBeTruthy();
+});
+
+test('renders warning dialog', async () => {
+    render(<App previewUrl="" />);
+    const dialogContent = screen.getByText(
+        /The Control Property Editor enables you to change control properties and behavior directly. These changes may not have the desired effect with Fiori elements applications. Please consult documentation to learn which changes are supported./i
+    );
+    expect(dialogContent).toBeInTheDocument();
+    const okButton = screen.getByText(/ok/i);
+    expect(okButton).toBeInTheDocument();
+    fireEvent.click(okButton);
+});
+
+const testCases = [
+    {
+        deviceType: DeviceType.Desktop,
+        expectedScale: 460 / 1200
+    },
+    {
+        deviceType: DeviceType.Tablet,
+        expectedScale: 460 / 720
+    }
+];
+
+for (const testCase of testCases) {
+    test(`Test resize - fitPreview=true, device=${testCase.deviceType}`, async () => {
+        const stateTemp = JSON.parse(JSON.stringify(initialState));
+        stateTemp.fitPreview = true;
+        stateTemp.deviceType = testCase.deviceType;
+
+        const { dispatch } = render(<App previewUrl="" />, {
+            initialState: stateTemp
+        });
+        await new Promise((resolve) => setTimeout(resolve, 1));
+        global.window.innerWidth = 111;
+        global.window.innerHeight = 2222;
+        dispatch.mockReset();
+        jest.spyOn(HTMLElement.prototype, 'clientWidth', 'get').mockImplementation(() => 500);
+        windowEventListenerMock.simulateEvent('resize', {});
+        // Debounce timeout within resize + within use effect
+        jest.advanceTimersByTime(3000);
+        expect(dispatch).toBeCalledWith(changePreviewScale(testCase.expectedScale));
+    });
+}

package/test/unit/appIndex.test.ts

@@ -0,0 +1,23 @@
+import { start } from '../../src/index';
+import * as i18n from '../../src/i18n';
+import * as icons from '../../src/icons';
+import * as initIcon from '@sap-ux/ui-components/dist/components/Icons'; // bug in TS 4.6 https://github.com/microsoft/TypeScript/issues/43081
+import ReactDOM from 'react-dom';
+
+describe('index', () => {
+    const i18nSpy = jest.spyOn(i18n, 'initI18n');
+    const iconsSpy = jest.spyOn(icons, 'registerAppIcons');
+    // ts-ignore
+    const initIconSpy = jest.spyOn(initIcon, 'initIcons');
+    const reactSpy = jest.spyOn(ReactDOM, 'render').mockReturnValue();
+
+    test('start', () => {
+        const previewUrl = 'URL';
+        const rootElementId = 'root';
+        start({ previewUrl, rootElementId });
+        expect(i18nSpy).toHaveBeenCalledTimes(1);
+        expect(iconsSpy).toHaveBeenCalledTimes(1);
+        expect(initIconSpy).toHaveBeenCalledTimes(1);
+        expect(reactSpy).toHaveBeenCalledTimes(1);
+    });
+});

package/test/unit/components/ChangeIndicator.test.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+
+import { render } from '../utils';
+import { initI18n } from '../../../src/i18n';
+
+import { ChangeIndicator } from '../../../src/components/ChangeIndicator';
+import { mockResizeObserver } from '../../utils/utils';
+import { initIcons } from '@sap-ux/ui-components';
+
+beforeAll(() => {
+    mockResizeObserver();
+    initI18n();
+    initIcons();
+});
+
+describe('ChangeIndicator', () => {
+    test('saved changes', () => {
+        const { container } = render(<ChangeIndicator id={'change-indicator'} saved={1} pending={0} />);
+        expect(container.querySelector('svg')).toMatchInlineSnapshot(`
+            <svg
+              fill="none"
+              height="8"
+              id="change-indicator"
+              role="img"
+              viewBox="0 0 8 8"
+              width="8"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                Modified & Saved
+              </title>
+              <circle
+                cx="4"
+                cy="4"
+                fill="var(--vscode-terminal-ansiGreen)"
+                r="4"
+              />
+            </svg>
+        `);
+    });
+
+    test('pending changes', () => {
+        const { container } = render(<ChangeIndicator saved={0} pending={2} />);
+        expect(container.querySelector('svg')).toMatchInlineSnapshot(`
+            <svg
+              fill="none"
+              height="8"
+              role="img"
+              viewBox="0 0 8 8"
+              width="8"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                Modified & Unsaved
+              </title>
+              <circle
+                cx="4"
+                cy="4"
+                r="3.5"
+                stroke="var(--vscode-terminal-ansiGreen)"
+              />
+            </svg>
+        `);
+    });
+
+    test('pending and saved changes', () => {
+        const { container } = render(<ChangeIndicator saved={3} pending={2} />);
+        expect(container.querySelector('svg')).toMatchInlineSnapshot(`
+            <svg
+              fill="none"
+              height="8"
+              role="img"
+              viewBox="0 0 8 8"
+              width="8"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                Saved & Unsaved
+              </title>
+              <circle
+                cx="4"
+                cy="4"
+                r="3.5"
+                stroke="var(--vscode-terminal-ansiGreen)"
+              />
+              <path
+                d="M4 8a4 4 0 1 0 0-8v8Z"
+                fill="var(--vscode-terminal-ansiGreen)"
+              />
+            </svg>
+        `);
+    });
+
+    test('do not add unknown properties', () => {
+        const { container } = render(
+            <ChangeIndicator id={'change-indicator'} saved={1} pending={0} {...{ xyz: 'abc ' }} />
+        );
+        expect(container.querySelector('svg')).toMatchInlineSnapshot(`
+            <svg
+              fill="none"
+              height="8"
+              id="change-indicator"
+              role="img"
+              viewBox="0 0 8 8"
+              width="8"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>
+                Modified & Saved
+              </title>
+              <circle
+                cx="4"
+                cy="4"
+                fill="var(--vscode-terminal-ansiGreen)"
+                r="4"
+              />
+            </svg>
+        `);
+    });
+});