@sap-ux/control-property-editor 0.4.3 → 0.4.5

package/package.json

@@ -3,7 +3,7 @@
   "displayName": "Control Property Editor",
   "description": "Control Property Editor",
   "license": "Apache-2.0",
-  "version": "0.4.3",
+  "version": "0.4.5",
   "main": "dist/app.js",
   "repository": {
     "type": "git",
@@ -49,8 +49,8 @@
     "autoprefixer": "10.4.7",
     "postcss": "8.4.31",
     "yargs-parser": "21.1.1",
-    "@sap-ux-private/control-property-editor-common": "0.3.1",
-    "@sap-ux/ui-components": "1.13.3"
+    "@sap-ux/ui-components": "1.13.4",
+    "@sap-ux-private/control-property-editor-common": "0.3.1"
   },
   "scripts": {
     "clean": "rimraf ./dist ./coverage *.tsbuildinfo",

package/src/App.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { UIDialog, UILink, UIToggle } from '@sap-ux/ui-components';
-
+import type { Scenario } from '@sap-ux-private/control-property-editor-common';
 import { PropertiesPanel, LeftPanel } from './panels';
 import { useLocalStorage } from './use-local-storage';
 import type { RootState } from './store';
@@ -27,6 +27,9 @@ export interface AppProps {
  */
 export default function App(appProps: AppProps): ReactElement {
     const { previewUrl } = appProps;
+    const scenario = useSelector<RootState, Scenario>((state) => state.scenario);
+    const isAdpProject = scenario === 'ADAPTATION_PROJECT';
+
     useEffect(() => {
         const sheet = window.document.styleSheets[0];
         sheet.insertRule(
@@ -41,6 +44,7 @@ export default function App(appProps: AppProps): ReactElement {
     const [isWarningDialogVisible, setWarningDialogVisibility] = useState(() => hideWarningDialog !== true);
 
     const [isInitialized, setIsInitialized] = useState(false);
+    const [shouldShowDialogMessageForAdpProjects, setShouldShowDialogMessageForAdpProjects] = useState(false);
 
     const previewWidth = useSelector<RootState, string>(
         (state) => `${DEVICE_WIDTH_MAP.get(state.deviceType) ?? DEFAULT_DEVICE_WIDTH}px`
@@ -48,6 +52,7 @@ export default function App(appProps: AppProps): ReactElement {
     const previewScale = useSelector<RootState, number>((state) => state.scale);
     const fitPreview = useSelector<RootState, boolean>((state) => state.fitPreview ?? false);
     const windowSize = useWindowSize();
+    const dialogMessage = useSelector<RootState, string | undefined>((state) => state.dialogMessage);
 
     const containerRef = useCallback(
         (node) => {
@@ -84,6 +89,12 @@ export default function App(appProps: AppProps): ReactElement {
         setWarningDialogVisibility(false);
     }
 
+    useEffect(() => {
+        if (dialogMessage && isAdpProject) {
+            setShouldShowDialogMessageForAdpProjects(true);
+        }
+    }, [dialogMessage]);
+
     return (
         <div className="app">
             <section className="app-panel app-panel-left">
@@ -91,46 +102,60 @@ export default function App(appProps: AppProps): ReactElement {
             </section>
             <section ref={containerRef} className="app-content">
                 <div className="app-canvas">
-                    <iframe
-                        className="app-preview"
-                        id="preview"
-                        style={{
-                            width: previewWidth,
-                            transform: `scale(${previewScale})`
-                        }}
-                        src={previewUrl}
-                        title={t('APPLICATION_PREVIEW_TITLE')}
-                    />
+                    {!shouldShowDialogMessageForAdpProjects && (
+                        <iframe
+                            className="app-preview"
+                            id="preview"
+                            style={{
+                                width: previewWidth,
+                                transform: `scale(${previewScale})`
+                            }}
+                            src={previewUrl}
+                            title={t('APPLICATION_PREVIEW_TITLE')}
+                        />
+                    )}
                 </div>
             </section>
             <section className="app-panel app-panel-right">
                 <PropertiesPanel />
             </section>
-
-            <UIDialog
-                hidden={!isWarningDialogVisible}
-                closeButtonAriaLabel={t('CLOSE')}
-                dialogContentProps={{
-                    title: t('TOOL_DISCLAIMER_TITLE'),
-                    subText: t('TOOL_DISCLAIMER_TEXT')
-                }}
-                acceptButtonText={t('OK')}
-                onAccept={closeWarningDialog}>
-                <UILink href="https://ui5.sap.com/#/topic/03265b0408e2432c9571d6b3feb6b1fd">
-                    {t('FE_DOCUMENTATION_LINK_TEXT')}
-                </UILink>
-                <UIToggle
-                    className="space space-toggle"
-                    label={t('DONT_SHOW_WARNING_ON_START')}
-                    inlineLabel
-                    inlineLabelLeft
-                    labelFlexGrow
-                    checked={hideWarningDialog}
-                    onChange={(_event, checked = false): void => {
-                        setHideWarningDialog(checked);
+            {isAdpProject && (
+                <UIDialog
+                    hidden={!shouldShowDialogMessageForAdpProjects}
+                    dialogContentProps={{
+                        title: t('TOOL_DISCLAIMER_TITLE'),
+                        subText: dialogMessage
                     }}
                 />
-            </UIDialog>
+            )}
+            {scenario === 'FE_FROM_SCRATCH' ? (
+                <UIDialog
+                    hidden={!isWarningDialogVisible}
+                    closeButtonAriaLabel={t('CLOSE')}
+                    dialogContentProps={{
+                        title: t('TOOL_DISCLAIMER_TITLE'),
+                        subText: t('TOOL_DISCLAIMER_TEXT')
+                    }}
+                    acceptButtonText={t('OK')}
+                    onAccept={closeWarningDialog}>
+                    <UILink href="https://ui5.sap.com/#/topic/03265b0408e2432c9571d6b3feb6b1fd">
+                        {t('FE_DOCUMENTATION_LINK_TEXT')}
+                    </UILink>
+                    <UIToggle
+                        className="space space-toggle"
+                        label={t('DONT_SHOW_WARNING_ON_START')}
+                        inlineLabel
+                        inlineLabelLeft
+                        labelFlexGrow
+                        checked={hideWarningDialog}
+                        onChange={(_event, checked = false): void => {
+                            setHideWarningDialog(checked);
+                        }}
+                    />
+                </UIDialog>
+            ) : (
+                <></>
+            )}
         </div>
     );
 }

package/src/slice.ts

@@ -17,6 +17,7 @@ import {
     outlineChanged,
     propertyChanged,
     propertyChangeFailed,
+    showMessage,
     scenario,
     scenarioLoaded
 } from '@sap-ux-private/control-property-editor-common';
@@ -36,6 +37,7 @@ interface SliceState {
     scenario: Scenario;
     icons: IconDetails[];
     changes: ChangesSlice;
+    dialogMessage: string | undefined;
 }
 
 export interface ChangesSlice {
@@ -101,7 +103,8 @@ export const initialState = {
         controls: {},
         pending: [],
         saved: []
-    }
+    },
+    dialogMessage: undefined
 };
 const slice = createSlice<SliceState, SliceCaseReducers<SliceState>, string>({
     name: 'app',
@@ -219,6 +222,9 @@ const slice = createSlice<SliceState, SliceCaseReducers<SliceState>, string>({
                     state.changes.controls[key] = control;
                 }
             })
+            .addMatcher(showMessage.match, (state, action: ReturnType<typeof showMessage>): void => {
+                state.dialogMessage = action.payload;
+            })
 });
 
 export default slice.reducer;

package/test/unit/App.test.tsx

@@ -6,7 +6,7 @@ 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 { controlSelected, scenarioLoaded } 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';
@@ -163,8 +163,17 @@ test('renders properties', () => {
     expect(notFoundException).toBeTruthy();
 });
 
-test('renders warning dialog', async () => {
+test('does not render warning dialog', async () => {
     render(<App previewUrl="" />);
+    const dialogContent = screen.queryByText(
+        /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).not.toBeInTheDocument();
+});
+
+test('renders warning dialog for "FE_FROM_SCRATCH" scenario', async () => {
+    const { store } = render(<App previewUrl="" />, { initialState });
+    store.dispatch(scenarioLoaded('FE_FROM_SCRATCH'));
     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
     );