@sap-ux/control-property-editor 0.4.4 → 0.4.6

package/package.json

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

package/src/App.tsx

@@ -3,9 +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';
@@ -29,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(
@@ -39,11 +40,11 @@ export default function App(appProps: AppProps): ReactElement {
     }, []);
     const { t } = useTranslation();
     const dispatch = useAppDispatch();
-    const scenario = useSelector<RootState, Scenario>((state) => state.scenario);
     const [hideWarningDialog, setHideWarningDialog] = useLocalStorage('hide-warning-dialog', false);
     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`
@@ -51,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) => {
@@ -87,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">
@@ -94,22 +102,32 @@ 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>
-
+            {isAdpProject && (
+                <UIDialog
+                    hidden={!shouldShowDialogMessageForAdpProjects}
+                    dialogContentProps={{
+                        title: t('TOOL_DISCLAIMER_TITLE'),
+                        subText: dialogMessage
+                    }}
+                />
+            )}
             {scenario === 'FE_FROM_SCRATCH' ? (
                 <UIDialog
                     hidden={!isWarningDialogVisible}

package/src/panels/properties/DropdownEditor.tsx

@@ -50,7 +50,7 @@ export function DropdownEditor(propertyInputProps: PropertyInputProps<StringCont
             selectedKey={value}
             disabled={!isEnabled}
             autoComplete="on"
-            allowFreeform={true}
+            allowFreeform={false}
             text={text}
             errorMessage={errorMessage}
             options={options}

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/panels/properties/DropdownEditor.test.tsx

@@ -36,14 +36,14 @@ describe('DropdownEditor', () => {
         const dropDownEditor = screen.getByTestId(testId);
         const dropDownEditorInput = dropDownEditor.querySelector('input');
         jest.spyOn(window, 'setTimeout').mockImplementation((cb: any) => {
-            cb(undefined, undefined, 'test');
+            cb(undefined, undefined, 'option2');
         });
         if (dropDownEditorInput) {
             fireEvent.focus(dropDownEditorInput);
-            fireEvent.input(dropDownEditorInput, { target: { value: 'test' } });
+            fireEvent.input(dropDownEditorInput, { target: { value: 'option2' } });
             fireEvent.blur(dropDownEditorInput);
         }
-        expect(dispatch).toBeCalledTimes(2);
+        expect(dispatch).toBeCalledTimes(1);
     });
     test('valueChanged function', () => {
         const result = valueChanged('testControlId', 'testPropertyName', 'newValue', 'Button');