@sap-ux/control-property-editor 0.4.21 → 0.4.23

package/src/middleware.ts

@@ -8,7 +8,11 @@ import {
     selectControl,
     deletePropertyChanges,
     addExtensionPoint,
-    reloadApplication
+    reloadApplication,
+    undo,
+    redo,
+    save,
+    setAppMode
 } from '@sap-ux-private/control-property-editor-common';
 
 import { changeProperty } from './slice';
@@ -47,6 +51,10 @@ export const communicationMiddleware: Middleware<Dispatch<ExternalAction>> = (st
                 }
                 case reloadApplication.type:
                 case deletePropertyChanges.type:
+                case setAppMode.type:
+                case undo.type:
+                case redo.type:
+                case save.type:
                 case selectControl.type:
                 case addExtensionPoint.type: {
                     sendAction(action);

package/src/panels/index.ts

@@ -1,2 +1,2 @@
-export { PropertiesPanel } from './properties';
 export { LeftPanel } from './LeftPanel';
+export { PropertiesList } from './properties';

package/src/panels/properties/index.ts

@@ -0,0 +1 @@
+export { PropertiesList } from './PropertiesList';

package/src/slice.ts

@@ -21,7 +21,11 @@ import {
     showMessage,
     scenario,
     reloadApplication,
-    storageFileChanged
+    storageFileChanged,
+    setAppMode,
+    setUndoRedoEnablement,
+    setSaveEnablement,
+    appLoaded
 } from '@sap-ux-private/control-property-editor-common';
 import { DeviceType } from './devices';
 
@@ -42,6 +46,13 @@ interface SliceState {
     changes: ChangesSlice;
     dialogMessage: ShowMessage | undefined;
     fileChanges?: string[];
+    appMode: 'navigation' | 'adaptation';
+    changeStack: {
+        canUndo: boolean;
+        canRedo: boolean;
+    };
+    canSave: boolean;
+    isAppLoading: boolean;
 }
 
 export interface ChangesSlice {
@@ -120,7 +131,15 @@ export const initialState: SliceState = {
         saved: [],
         pendingChangeIds: []
     },
-    dialogMessage: undefined
+    dialogMessage: undefined,
+    appMode: 'adaptation',
+
+    changeStack: {
+        canUndo: false,
+        canRedo: false
+    },
+    canSave: false,
+    isAppLoading: true
 };
 const slice = createSlice<SliceState, SliceCaseReducers<SliceState>, string>({
     name: 'app',
@@ -265,6 +284,7 @@ const slice = createSlice<SliceState, SliceCaseReducers<SliceState>, string>({
             })
             .addMatcher(reloadApplication.match, (state): void => {
                 state.fileChanges = [];
+                state.isAppLoading = true;
             })
             .addMatcher(storageFileChanged.match, (state, action: ReturnType<typeof storageFileChanged>): void => {
                 const fileName = action.payload;
@@ -272,6 +292,21 @@ const slice = createSlice<SliceState, SliceCaseReducers<SliceState>, string>({
                     state.changes.pendingChangeIds.push(fileName);
                 }
             })
+            .addMatcher(setAppMode.match, (state, action: ReturnType<typeof setAppMode>): void => {
+                state.appMode = action.payload;
+            })
+            .addMatcher(
+                setUndoRedoEnablement.match,
+                (state, action: ReturnType<typeof setUndoRedoEnablement>): void => {
+                    state.changeStack = action.payload;
+                }
+            )
+            .addMatcher(setSaveEnablement.match, (state, action: ReturnType<typeof setSaveEnablement>): void => {
+                state.canSave = action.payload;
+            })
+            .addMatcher(appLoaded.match, (state): void => {
+                state.isAppLoading = false;
+            })
 });
 
 export const { setProjectScenario } = slice.actions;

package/src/{panels/properties → toolbar}/DeviceSelector.tsx

@@ -2,7 +2,7 @@ import type { ReactElement } from 'react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { DeviceType } from '../../devices';
+import { DeviceType } from '../devices';
 
 import type { DeviceToggleProps } from './DeviceToggle';
 import { DeviceToggle } from './DeviceToggle';

package/src/{panels/properties → toolbar}/DeviceToggle.tsx

@@ -4,9 +4,9 @@ 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';
+import type { DeviceType } from '../devices';
+import { changeDeviceType } from '../slice';
+import type { RootState } from '../store';
 
 export interface DeviceToggleProps {
     deviceType: DeviceType;
@@ -19,7 +19,7 @@ export interface DeviceToggleProps {
  * @param deviceToggleProps DeviceToggleProps
  * @returns ReactElement
  */
-export function DeviceToggle(deviceToggleProps: DeviceToggleProps): ReactElement {
+export function DeviceToggle(deviceToggleProps: Readonly<DeviceToggleProps>): ReactElement {
     const { deviceType, tooltip } = deviceToggleProps;
     const dispatch = useDispatch();
     const selectedDeviceType = useSelector<RootState, DeviceType>((state) => state.deviceType);

package/src/toolbar/ModeSwitcher.scss

@@ -0,0 +1,16 @@
+ .mode-switcher {
+    display: flex;
+    align-items: center;
+
+    .ms-Button { 
+        border-radius: 3px;
+        margin-right: 1px;
+        &-label {
+            font-weight: bold;
+        }
+    }
+ 
+    .ms-Label {
+        margin-right: 10px;
+    }
+} 

package/src/toolbar/ModeSwitcher.tsx

@@ -0,0 +1,52 @@
+import type { ReactElement } from 'react';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { setAppMode } from '@sap-ux-private/control-property-editor-common';
+import { UIDefaultButton, UILabel } from '@sap-ux/ui-components';
+
+import type { RootState } from '../store';
+
+import './ModeSwitcher.scss';
+
+/**
+ * React element for ModeSwitch.
+ *
+ * @returns ReactElement
+ */
+export function ModeSwitcher(): ReactElement {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+
+    const mode = useSelector<RootState, 'navigation' | 'adaptation'>((state) => state.appMode);
+    const disabled = useSelector<RootState, boolean>((state) => state.isAppLoading);
+
+    const handleAdaptationClick = useCallback(() => {
+        dispatch(setAppMode('adaptation'));
+    }, [dispatch]);
+
+    const handleNavigationClick = useCallback(() => {
+        dispatch(setAppMode('navigation'));
+    }, [dispatch]);
+
+    return (
+        <div className="mode-switcher">
+            <UILabel>{t('MODE')}:</UILabel>
+            <UIDefaultButton
+                transparent={true}
+                checked={mode === 'adaptation'}
+                onClick={handleAdaptationClick}
+                disabled={disabled}>
+                {t('EDIT')}
+            </UIDefaultButton>
+            <UIDefaultButton
+                transparent={true}
+                checked={mode === 'navigation'}
+                onClick={handleNavigationClick}
+                disabled={disabled}>
+                {t('LIVE')}
+            </UIDefaultButton>
+        </div>
+    );
+}

package/src/{components → toolbar}/ToolBar.scss

@@ -1,4 +1,3 @@
-// Copied over from App modeler
 .ui-toolbar {
     // We do not need fixed if we use flexes
     position: static;
@@ -9,11 +8,19 @@
     }
     // Move to right edge
     .column-right {
-        justify-content: flex-end;
+        width: 300px; // corresponds to .app-panel width
         flex-grow: 0;
     }
     .column-left {
+        width: 300px; // corresponds to .app-panel width
         overflow: hidden;
+        flex-grow: 0;
+    }
+    .column-center {
+        justify-content: flex-start;
+        .mode-switcher {
+            margin-right: 30px;
+        }
     }
     .ui-toolbar__content {
         justify-content: space-between;
@@ -36,4 +43,30 @@
     .ui-divider {
         margin: 0;
     }
+
+    .ms-Label {
+        margin-top: 0px;
+    }
 }
+
+.right-panel-toolbar .ui-toolbar__column__content{
+    display: flex;
+    width: 100%;
+    .rt-panel-tb-left-container {
+        display: flex;
+        flex-grow: 1;
+        align-items: center;
+        height: 100%;
+    }
+    .rt-panel-tb-right-container {
+        display: flex;
+    }
+}
+
+.app-title {
+    font-style: normal;
+    font-weight: bold;
+    font-size: 16px;
+    line-height: 16px;
+    color: var(--vscode-foreground);
+}

package/src/toolbar/ToolBar.tsx

@@ -0,0 +1,56 @@
+import type { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { UIFocusZone, UILabel, UIToolbar, UIToolbarColumn } from '@sap-ux/ui-components';
+import type { Scenario } from '@sap-ux-private/control-property-editor-common';
+
+import type { RootState } from '../store';
+import { Separator, ThemeSelectorCallout } from '../components';
+
+import { ViewChanger } from './ViewChanger';
+import { DeviceSelector } from './DeviceSelector';
+import { ModeSwitcher } from './ModeSwitcher';
+import { UndoRedoSaveActions } from './UndoRedoSaveActions';
+
+import './ToolBar.scss';
+
+export interface ToolbarProps {
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+}
+/**
+ * React element with children.
+ *
+ * @returns ReactElement
+ */
+export function Toolbar(): ReactElement {
+    const { t } = useTranslation();
+    const scenario = useSelector<RootState, Scenario>((state) => state.scenario);
+    return (
+        <UIFocusZone>
+            <UIToolbar>
+                <UIToolbarColumn className="column-left">
+                    <UILabel className="app-title">
+                        {scenario === 'ADAPTATION_PROJECT' ? t('APP_TITLE_ADAPTATION_EDITOR') : t('APP_TITLE')}
+                    </UILabel>
+                </UIToolbarColumn>
+                <UIToolbarColumn className="column-center">
+                    <ModeSwitcher />
+                    <UndoRedoSaveActions />
+                </UIToolbarColumn>
+                <UIToolbarColumn className="column-right right-panel-toolbar">
+                    <div className="rt-panel-tb-left-container">
+                        <ThemeSelectorCallout />
+                        <Separator direction="vertical" style={{ marginLeft: '10px', marginRight: '10px' }} />
+                        <ViewChanger />
+                    </div>
+                    <div className="rt-panel-tb-right-container">
+                        <DeviceSelector />
+                    </div>
+                </UIToolbarColumn>
+            </UIToolbar>
+        </UIFocusZone>
+    );
+}

package/src/toolbar/UndoRedoSaveActions.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import type { ReactElement } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { redo, save, undo } from '@sap-ux-private/control-property-editor-common';
+import { UIIconButton, UiIcons } from '@sap-ux/ui-components';
+
+import type { RootState } from '../store';
+import { Separator } from '../components';
+
+/**
+ * React element for Undo, Redo and Save.
+ *
+ * @returns ReactElement
+ */
+export function UndoRedoSaveActions(): ReactElement {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const changeStack = useSelector<RootState, { canRedo: boolean; canUndo: boolean }>((state) => state.changeStack);
+    const canSave = useSelector<RootState, boolean>((state) => state.canSave);
+    const isLoading = useSelector<RootState, boolean>((state) => state.isAppLoading);
+    return (
+        <>
+            <UIIconButton
+                id="undo-button"
+                iconProps={{
+                    iconName: UiIcons.Undo
+                }}
+                title={t('UNDO')}
+                onClick={(): void => {
+                    dispatch(undo());
+                }}
+                disabled={!changeStack.canUndo || isLoading}
+            />
+            <UIIconButton
+                id="redo-button"
+                iconProps={{
+                    iconName: UiIcons.Redo
+                }}
+                title={t('REDO')}
+                onClick={(): void => {
+                    dispatch(redo());
+                }}
+                disabled={!changeStack.canRedo || isLoading}
+            />
+            <Separator direction="vertical" style={{ marginLeft: '10px', marginRight: '10px' }} />
+            <UIIconButton
+                id="save-button"
+                iconProps={{
+                    iconName: UiIcons.Save
+                }}
+                title={t('SAVE')}
+                onClick={(): void => {
+                    dispatch(save());
+                }}
+                disabled={!canSave || isLoading}
+            />
+        </>
+    );
+}

package/src/{panels/properties → toolbar}/ViewChanger.tsx

@@ -6,8 +6,8 @@ import { useDispatch, useSelector } from 'react-redux';
 import type { UIComboBoxOption, UIComboBoxRef } from '@sap-ux/ui-components';
 import { UIComboBox, UIIconButton, UiIcons } from '@sap-ux/ui-components';
 
-import type { RootState } from '../../store';
-import { changePreviewScale, changePreviewScaleMode } from '../../slice';
+import type { RootState } from '../store';
+import { changePreviewScale, changePreviewScaleMode } from '../slice';
 
 import styles from './ViewChanger.module.scss';
 

package/src/toolbar/index.ts

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

package/test/unit/App.test.tsx

@@ -6,12 +6,12 @@ import { render, mockDomEventListener } from './utils';
 import { initI18n } from '../../src/i18n';
 
 import App from '../../src/App';
-import { controlSelected, scenario, showMessage } from '@sap-ux-private/control-property-editor-common';
+import { controlSelected, scenario } 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 { FilterName, SliceState, changePreviewScale, initialState } from '../../src/slice';
+import { FilterName, changePreviewScale, initialState } from '../../src/slice';
 
 jest.useFakeTimers({ advanceTimers: true });
 const windowEventListenerMock = mockDomEventListener(window);
@@ -207,7 +207,12 @@ test('renders warning message for "ADAPTATION_PROJECT" scenario', async () => {
         dialogMessage: {
             message: 'Some Text',
             shouldHideIframe: false
-        }
+        },
+        changeStack: {
+            canUndo: true,
+            canRedo: true
+        },
+        canSave: true
     };
     render(<App previewUrl="" scenario="ADAPTATION_PROJECT" />, { initialState });
 

package/test/unit/middleware.test.ts

@@ -133,4 +133,93 @@ describe('communication middleware', () => {
         `);
         expect(sendActionfn).toHaveBeenCalledTimes(1);
     });
+
+    test('undo - send action', () => {
+        const action = common.undo();
+        const next = jest.fn().mockReturnValue(action);
+        jest.mock('@sap-ux-private/control-property-editor-common', () => {
+            return {
+                undo: { type: '[ext] undo' }
+            };
+        });
+        const result = middleWare(next)(action);
+        expect(result).toMatchInlineSnapshot(`
+            Object {
+              "payload": undefined,
+              "type": "[ext] undo",
+            }
+        `);
+        expect(sendActionfn).toHaveBeenCalledTimes(1);
+    });
+
+    test('redo - send action', () => {
+        const action = common.redo();
+        const next = jest.fn().mockReturnValue(action);
+        jest.mock('@sap-ux-private/control-property-editor-common', () => {
+            return {
+                redo: { type: '[ext] redo' }
+            };
+        });
+        const result = middleWare(next)(action);
+        expect(result).toMatchInlineSnapshot(`
+            Object {
+              "payload": undefined,
+              "type": "[ext] redo",
+            }
+        `);
+        expect(sendActionfn).toHaveBeenCalledTimes(1);
+    });
+
+    test('save - send action', () => {
+        const action = common.save();
+        const next = jest.fn().mockReturnValue(action);
+        jest.mock('@sap-ux-private/control-property-editor-common', () => {
+            return {
+                save: { type: '[ext] save' }
+            };
+        });
+        const result = middleWare(next)(action);
+        expect(result).toMatchInlineSnapshot(`
+            Object {
+              "payload": undefined,
+              "type": "[ext] save",
+            }
+        `);
+        expect(sendActionfn).toHaveBeenCalledTimes(1);
+    });
+
+    test('setAppMode(adaptation) mode - send action', () => {
+        const action = common.setAppMode('adaptation');
+        const next = jest.fn().mockReturnValue(action);
+        jest.mock('@sap-ux-private/control-property-editor-common', () => {
+            return {
+                setAppMode: { type: '[ext] setAppMode' }
+            };
+        });
+        const result = middleWare(next)(action);
+        expect(result).toMatchInlineSnapshot(`
+            Object {
+              "payload": "adaptation",
+              "type": "[ext] set-app-mode",
+            }
+        `);
+        expect(sendActionfn).toHaveBeenCalledTimes(1);
+    });
+    test('setAppMode(navigation) mode - send action', () => {
+        const action = common.setAppMode('navigation');
+        const next = jest.fn().mockReturnValue(action);
+        jest.mock('@sap-ux-private/control-property-editor-common', () => {
+            return {
+                setAppMode: { type: '[ext] setAppMode' }
+            };
+        });
+        const result = middleWare(next)(action);
+        expect(result).toMatchInlineSnapshot(`
+            Object {
+              "payload": "navigation",
+              "type": "[ext] set-app-mode",
+            }
+        `);
+        expect(sendActionfn).toHaveBeenCalledTimes(1);
+    });
 });

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

@@ -534,7 +534,11 @@ describe('OutlinePanel', () => {
             },
             icons: [],
             dialogMessage: undefined,
-            isAdpProject: false
+            isAdpProject: false,
+            appMode: 'adaptation',
+            canSave: false,
+            changeStack: { canRedo: false, canUndo: false },
+            isAppLoading: true
         };
         const { container } = render(<OutlinePanel />, { initialState });
 

package/test/unit/panels/properties/ViewChanger.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { fireEvent, screen } from '@testing-library/react';
 
-import { ViewChanger } from '../../../../src/panels/properties/ViewChanger';
+import { ViewChanger } from '../../../../src/toolbar/ViewChanger';
 import { initI18n } from '../../../../src/i18n';
 
 import { render } from '../../utils';

package/test/unit/slice.test.ts

@@ -402,7 +402,8 @@ describe('main redux slice', () => {
                     reloadApplication()
                 )
             ).toStrictEqual({
-                fileChanges: []
+                fileChanges: [],
+                isAppLoading: true
             });
         });
     });

package/test/unit/toolbar/ModeSwitcher.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { render } from '../utils';
+import { initI18n } from '../../../src/i18n';
+
+import { ModeSwitcher } from '../../../src/toolbar/ModeSwitcher';
+import { mockResizeObserver } from '../../utils/utils';
+import { initIcons } from '@sap-ux/ui-components';
+import { appLoaded, setAppMode } from '@sap-ux-private/control-property-editor-common';
+import { initialState } from '../../../src/slice';
+
+beforeAll(() => {
+    mockResizeObserver();
+    initI18n();
+    initIcons();
+});
+
+test('renders ModeSwitcher', () => {
+    const { dispatch, store } = render(<ModeSwitcher />, { initialState });
+    store.dispatch(appLoaded());
+    dispatch.mockClear();
+
+    expect(screen.getByText(/mode:/i)).toBeDefined();
+    const themeCalloutContent = screen.getAllByRole('button');
+    expect(themeCalloutContent).toHaveLength(2);
+
+    expect(screen.getByText(/mode:/i)).toBeInTheDocument();
+    const editBtn = screen.getByRole('button', { name: /edit/i });
+    expect(editBtn).toBeInTheDocument();
+
+    const liveBtn = screen.getByRole('button', { name: /live/i });
+    expect(liveBtn).toBeInTheDocument();
+
+    liveBtn.click();
+    expect(dispatch).toBeCalledWith(setAppMode('navigation'));
+
+    editBtn.click();
+    expect(dispatch).toBeCalledWith(setAppMode('adaptation'));
+});

package/test/unit/toolbar/UndoRedoSaveActions.test.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { render } from '../utils';
+import { initI18n } from '../../../src/i18n';
+
+import { UndoRedoSaveActions } from '../../../src/toolbar/UndoRedoSaveActions';
+import { mockResizeObserver } from '../../utils/utils';
+import { initIcons } from '@sap-ux/ui-components';
+import {
+    setUndoRedoEnablement,
+    setSaveEnablement,
+    appLoaded,
+    redo,
+    save,
+    undo
+} from '@sap-ux-private/control-property-editor-common';
+import { initialState } from '../../../src/slice';
+
+beforeAll(() => {
+    mockResizeObserver();
+    initI18n();
+    initIcons();
+});
+
+test('renders UndoRedoSaveActions', () => {
+    const { dispatch, store } = render(<UndoRedoSaveActions />, { initialState });
+
+    // update state
+    store.dispatch(setUndoRedoEnablement({ canRedo: true, canUndo: true }));
+    store.dispatch(setSaveEnablement(true));
+    store.dispatch(appLoaded());
+
+    dispatch.mockClear();
+
+    const themeCalloutContent = screen.getAllByRole('button');
+    expect(themeCalloutContent).toHaveLength(3);
+
+    const undoBtn = screen.getByRole('button', { name: /undo/i });
+    expect(undoBtn).toBeInTheDocument();
+
+    const redoBtn = screen.getByRole('button', { name: /redo/i });
+    expect(redoBtn).toBeInTheDocument();
+
+    const saveBtn = screen.getByRole('button', { name: /save/i });
+    expect(saveBtn).toBeInTheDocument();
+
+    undoBtn.click();
+    expect(dispatch).toBeCalledWith(undo());
+
+    redoBtn.click();
+    expect(dispatch).toBeCalledWith(redo());
+
+    saveBtn.click();
+    expect(dispatch).toBeCalledWith(save());
+});