Merge branch 'package-config-common' of https://github.com/SAP/open-u…

…x-tools into package-config-common

packages/control-property-editor-common/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sap-ux-private/control-property-editor-common
 
+## 0.5.2
+
+### Patch Changes
+
+-   8f442a6: Usability improvements for Quick Actions that add fragments
+
 ## 0.5.1
 
 ### Patch Changes

packages/control-property-editor-common/package.json

@@ -3,7 +3,7 @@
     "displayName": "Control Property Editor Common",
     "description": "A common module for Control Property Editor react app and ui5",
     "license": "Apache-2.0",
-    "version": "0.5.1",
+    "version": "0.5.2",
     "main": "dist/index.js",
     "repository": {
         "type": "git",

packages/control-property-editor-common/src/api.ts

@@ -299,9 +299,7 @@ export const save = createExternalAction<void>('save');
 export const quickActionListChanged = createExternalAction<QuickActionGroup[]>('quick-action-list-changed');
 export const updateQuickAction = createExternalAction<QuickAction>('update-quick-action');
 export const executeQuickAction = createExternalAction<QuickActionExecutionPayload>('execute-quick-action');
-export const numberOfChangesRequiringReloadChanged = createExternalAction<number>(
-    'number-of-changes-requiring-reload-changed'
-);
+export const setApplicationRequiresReload = createExternalAction<boolean>('set-application-requires-reload');
 
 export type ExternalAction =
     | ReturnType<typeof iconsLoaded>
@@ -325,6 +323,6 @@ export type ExternalAction =
     | ReturnType<typeof save>
     | ReturnType<typeof appLoaded>
     | ReturnType<typeof quickActionListChanged>
-    | ReturnType<typeof numberOfChangesRequiringReloadChanged>
+    | ReturnType<typeof setApplicationRequiresReload>
     | ReturnType<typeof updateQuickAction>
     | ReturnType<typeof executeQuickAction>;

packages/control-property-editor/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sap-ux/control-property-editor
 
+## 0.5.9
+
+### Patch Changes
+
+-   8f442a6: Usability improvements for Quick Actions that add fragments
+
 ## 0.5.8
 
 ### Patch Changes

packages/control-property-editor/package.json

@@ -3,7 +3,7 @@
     "displayName": "Control Property Editor",
     "description": "Control Property Editor",
     "license": "Apache-2.0",
-    "version": "0.5.8",
+    "version": "0.5.9",
     "main": "dist/app.js",
     "repository": {
         "type": "git",

packages/control-property-editor/src/slice.ts

@@ -15,7 +15,7 @@ import type {
     ShowMessage
 } from '@sap-ux-private/control-property-editor-common';
 import {
-    numberOfChangesRequiringReloadChanged,
+    setApplicationRequiresReload,
     changeStackModified,
     controlSelected,
     iconsLoaded,
@@ -61,7 +61,7 @@ interface SliceState {
         canRedo: boolean;
     };
     canSave: boolean;
-    pendingChangesRequiresSaveAndReload: boolean;
+    applicationRequiresReload: boolean;
     isAppLoading: boolean;
     quickActions: QuickActionGroup[];
 }
@@ -149,7 +149,7 @@ export const initialState: SliceState = {
         canRedo: false
     },
     canSave: false,
-    pendingChangesRequiresSaveAndReload: false,
+    applicationRequiresReload: false,
     isAppLoading: true,
     quickActions: []
 };
@@ -280,9 +280,12 @@ const slice = createSlice<SliceState, SliceCaseReducers<SliceState>, string>({
                 state.dialogMessage = action.payload;
             })
             .addMatcher(fileChanged.match, (state, action: ReturnType<typeof fileChanged>): void => {
+                const firstFile = action.payload[0] ?? '';
+                const separator = firstFile.indexOf('\\') > -1 ? '\\' : '/';
+
                 const newFileChanges = action.payload.filter((changedFile) => {
                     const idx = state.changes.pendingChangeIds.findIndex((pendingFile) =>
-                        changedFile.includes(pendingFile)
+                        changedFile.includes(pendingFile.replace(/\//g, separator))
                     );
                     if (idx > -1) {
                         state.changes.pendingChangeIds.splice(idx, 1);
@@ -324,9 +327,9 @@ const slice = createSlice<SliceState, SliceCaseReducers<SliceState>, string>({
                 state.isAppLoading = false;
             })
             .addMatcher(
-                numberOfChangesRequiringReloadChanged.match,
-                (state, action: ReturnType<typeof numberOfChangesRequiringReloadChanged>): void => {
-                    state.pendingChangesRequiresSaveAndReload = action.payload > 0;
+                setApplicationRequiresReload.match,
+                (state, action: ReturnType<typeof setApplicationRequiresReload>): void => {
+                    state.applicationRequiresReload = action.payload;
                 }
             )
             .addMatcher(

packages/control-property-editor/src/toolbar/UndoRedoSaveActions.tsx

@@ -23,11 +23,9 @@ export function UndoRedoSaveActions(): ReactElement {
     const canSave = useSelector<RootState, boolean>((state) => state.canSave);
     const isLoading = useSelector<RootState, boolean>((state) => state.isAppLoading);
     const fileChanges = useSelector<RootState, string[] | undefined>((state) => state.fileChanges) ?? [];
-    const pendingChangesRequiresSaveAndReload = useSelector<RootState, boolean>(
-        (state) => state.pendingChangesRequiresSaveAndReload
-    );
+    const applicationRequiresReload = useSelector<RootState, boolean>((state) => state.applicationRequiresReload);
     const { pending } = useSelector<RootState, ChangesSlice>((state) => state.changes);
-    const saveAndReload = (fileChanges.length > 0 && pending.length > 0) || pendingChangesRequiresSaveAndReload;
+    const saveAndReload = (fileChanges.length > 0 && pending.length > 0) || applicationRequiresReload;
     return (
         <>
             <UIIconButton

packages/control-property-editor/test/unit/slice.test.ts

@@ -1,7 +1,7 @@
 import {
     changeStackModified,
     iconsLoaded,
-    numberOfChangesRequiringReloadChanged,
+    setApplicationRequiresReload,
     propertyChanged,
     propertyChangeFailed,
     quickActionListChanged,
@@ -297,19 +297,19 @@ describe('main redux slice', () => {
             deviceType: DeviceType.Desktop
         });
     });
-    describe('numberOfChangesRequiringReloadChanged', () => {
+    describe('setApplicationRequiresReload', () => {
         test('one change requires reload', () => {
             expect(
-                reducer({ pendingChangesRequiresSaveAndReload: false } as any, numberOfChangesRequiringReloadChanged(1))
+                reducer({ applicationRequiresReload: false } as any, setApplicationRequiresReload(true))
             ).toStrictEqual({
-                pendingChangesRequiresSaveAndReload: true
+                applicationRequiresReload: true
             });
         });
         test('no changes require reload', () => {
             expect(
-                reducer({ pendingChangesRequiresSaveAndReload: true } as any, numberOfChangesRequiringReloadChanged(0))
+                reducer({ applicationRequiresReload: true } as any, setApplicationRequiresReload(false))
             ).toStrictEqual({
-                pendingChangesRequiresSaveAndReload: false
+                applicationRequiresReload: false
             });
         });
     });

packages/control-property-editor/test/unit/toolbar/UndoRedoSaveActions.test.tsx

@@ -11,7 +11,7 @@ import {
     redo,
     save,
     undo,
-    numberOfChangesRequiringReloadChanged,
+    setApplicationRequiresReload,
     reloadApplication
 } from '@sap-ux-private/control-property-editor-common';
 
@@ -54,7 +54,7 @@ describe('toolbar', () => {
         // update state
         store.dispatch(setUndoRedoEnablement({ canRedo: true, canUndo: true }));
         store.dispatch(setSaveEnablement(true));
-        store.dispatch(numberOfChangesRequiringReloadChanged(5));
+        store.dispatch(setApplicationRequiresReload(true));
         store.dispatch(appLoaded());
 
         dispatch.mockClear();

packages/create/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @sap-ux/create
 
+## 0.8.22
+
+### Patch Changes
+
+-   Updated dependencies [8f442a6]
+    -   @sap-ux/preview-middleware@0.16.70
+
 ## 0.8.21
 
 ### Patch Changes

packages/create/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@sap-ux/create",
     "description": "SAP Fiori tools module to add or remove features",
-    "version": "0.8.21",
+    "version": "0.8.22",
     "repository": {
         "type": "git",
         "url": "https://github.com/SAP/open-ux-tools.git",

packages/preview-middleware-client/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sap-ux-private/preview-middleware-client
 
+## 0.11.6
+
+### Patch Changes
+
+-   8f442a6: Usability improvements for Quick Actions that add fragments
+
 ## 0.11.5
 
 ### Patch Changes

packages/preview-middleware-client/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sap-ux-private/preview-middleware-client",
-    "version": "0.11.5",
+    "version": "0.11.6",
     "description": "Client-side coding hosted by the preview middleware",
     "repository": {
         "type": "git",

packages/preview-middleware-client/src/adp/controllers/AddFragment.controller.ts

@@ -21,7 +21,12 @@ import OverlayRegistry from 'sap/ui/dt/OverlayRegistry';
 import type ElementOverlay from 'sap/ui/dt/ElementOverlay';
 
 /** sap.ui.fl */
-import {type AddFragmentChangeContentType} from 'sap/ui/fl/Change';
+import { type AddFragmentChangeContentType } from 'sap/ui/fl/Change';
+
+import { setApplicationRequiresReload } from '@sap-ux-private/control-property-editor-common';
+
+import { getResourceModel, getTextBundle } from '../../i18n';
+import { CommunicationService } from '../../cpe/communication-service';
 
 import ControlUtils from '../control-utils';
 import CommandExecutor from '../command-executor';
@@ -38,20 +43,30 @@ interface CreateFragmentProps {
 const radix = 10;
 
 type AddFragmentModel = JSONModel & {
+    getProperty(sPath: '/title'): string;
+    getProperty(sPath: '/completeView'): boolean;
     getProperty(sPath: '/newFragmentName'): string;
     getProperty(sPath: '/selectedIndex'): number;
     getProperty(sPath: '/selectedAggregation/value'): string;
 };
 
+export interface AddFragmentOptions {
+    title: string;
+    aggregation?: string;
+}
+
 /**
  * @namespace open.ux.preview.client.adp.controllers
  */
 export default class AddFragment extends BaseDialog<AddFragmentModel> {
-    constructor(name: string, overlays: UI5Element, rta: RuntimeAuthoring, private aggregation?: string) {
+    constructor(name: string, overlays: UI5Element, rta: RuntimeAuthoring, private options: AddFragmentOptions) {
         super(name);
         this.rta = rta;
         this.overlays = overlays;
-        this.model = new JSONModel();
+        this.model = new JSONModel({
+            title: options.title,
+            completeView: options.aggregation === undefined
+        });
         this.ui5Version = sap.ui.version;
         this.commandExecutor = new CommandExecutor(this.rta);
     }
@@ -67,7 +82,9 @@ export default class AddFragment extends BaseDialog<AddFragmentModel> {
         this.setEscapeHandler();
 
         await this.buildDialogData();
+        const resourceModel = await getResourceModel('open.ux.preview.client');
 
+        this.dialog.setModel(resourceModel, 'i18n');
         this.dialog.setModel(this.model);
 
         this.dialog.open();
@@ -153,9 +170,11 @@ export default class AddFragment extends BaseDialog<AddFragmentModel> {
             targetAggregation
         };
 
-        await this.createFragmentChange(fragmentData);
+        const templateName = await this.createFragmentChange(fragmentData);
 
-        notifyUser(`Note: The '${fragmentName}.fragment.xml' fragment will be created once you save the change.`, 8000);
+        const textKey = templateName ? 'ADP_ADD_FRAGMENT_WITH_TEMPLATE_NOTIFICATION' : 'ADP_ADD_FRAGMENT_NOTIFICATION';
+        const bundle = await getTextBundle();
+        notifyUser(bundle.getText(textKey, [fragmentName]), 8000);
 
         this.handleDialogClose();
     }
@@ -184,7 +203,7 @@ export default class AddFragment extends BaseDialog<AddFragmentModel> {
             }
             return false;
         });
-        const defaultAggregation = this.aggregation ?? controlMetadata.getDefaultAggregationName();
+        const defaultAggregation = this.options.aggregation ?? controlMetadata.getDefaultAggregationName();
         const selectedControlName = controlMetadata.getName();
 
         let selectedControlChildren: string[] | number[] = Object.keys(
@@ -262,7 +281,7 @@ export default class AddFragment extends BaseDialog<AddFragmentModel> {
      *
      * @param fragmentData Fragment Data
      */
-    private async createFragmentChange(fragmentData: CreateFragmentProps) {
+    private async createFragmentChange(fragmentData: CreateFragmentProps): Promise<string | undefined> {
         const { fragmentName, index, targetAggregation } = fragmentData;
 
         const flexSettings = this.rta.getFlexSettings();
@@ -290,8 +309,10 @@ export default class AddFragment extends BaseDialog<AddFragmentModel> {
             const preparedChange = command.getPreparedChange();
             const content = preparedChange.getContent();
             preparedChange.setContent({ ...content, templateName });
+            CommunicationService.sendAction(setApplicationRequiresReload(true));
         }
         await this.commandExecutor.pushAndExecuteCommand(command);
+        return templateName;
     }
 
     private getFragmentTemplateName(targetAggregation: string): string {

packages/preview-middleware-client/src/adp/extension-point.ts

@@ -8,7 +8,7 @@ import { ExternalAction, addExtensionPoint } from '@sap-ux-private/control-prope
 
 import { Deferred, createDeferred } from './utils';
 
-import { SubscribeFunction } from '../cpe/types';
+import { CommunicationService } from '../cpe/communication-service';
 import { DialogNames, handler } from './init-dialogs';
 
 type ActionService = {
@@ -50,11 +50,10 @@ export default class ExtensionPointService {
     /**
      * Initializes communication with CPE, and the extension point plugin.
      *
-     * @param subscribe Handles actions from CPE
      */
-    public init(subscribe: SubscribeFunction) {
+    public init() {
         this.initPlugin();
-        subscribe(async (action: ExternalAction): Promise<void> => {
+        CommunicationService.subscribe(async (action: ExternalAction): Promise<void> => {
             if (addExtensionPoint.match(action)) {
                 try {
                     const { controlId, name } = action.payload;

packages/preview-middleware-client/src/adp/init-dialogs.ts

@@ -14,13 +14,14 @@ import FlUtils from 'sap/ui/fl/Utils';
 /** sap.ui.dt */
 import type ElementOverlay from 'sap/ui/dt/ElementOverlay';
 
-import AddFragment from './controllers/AddFragment.controller';
+import AddFragment, { AddFragmentOptions } from './controllers/AddFragment.controller';
 import ControllerExtension from './controllers/ControllerExtension.controller';
 import { ExtensionPointData } from './extension-point';
 import ExtensionPoint from './controllers/ExtensionPoint.controller';
 import ManagedObject from 'sap/ui/base/ManagedObject';
 import { isReuseComponent } from '../cpe/utils';
 import { Ui5VersionInfo } from '../utils/version';
+import { getTextBundle } from '../i18n';
 
 export const enum DialogNames {
     ADD_FRAGMENT = 'AddFragment',
@@ -118,25 +119,24 @@ export const getAddFragmentItemText = (overlay: ElementOverlay) => {
  * @param rta Runtime Authoring
  * @param dialogName Dialog name
  * @param extensionPointData Control ID
- * @param aggregation Name of aggregation that should be selected when dialog is opened
+ * @param options Dialog options
  */
 export async function handler(
     overlay: UI5Element,
     rta: RuntimeAuthoring,
     dialogName: DialogNames,
     extensionPointData?: ExtensionPointData,
-    aggregation?: string
+    options: Partial<AddFragmentOptions> = {}
 ): Promise<void> {
     let controller: Controller;
+    const resources = await getTextBundle();
 
     switch (dialogName) {
         case DialogNames.ADD_FRAGMENT:
-            controller = new AddFragment(
-                `open.ux.preview.client.adp.controllers.${dialogName}`,
-                overlay,
-                rta,
-                aggregation
-            );
+            controller = new AddFragment(`open.ux.preview.client.adp.controllers.${dialogName}`, overlay, rta, {
+                aggregation: options.aggregation,
+                title: resources.getText(options.title ?? 'ADP_ADD_FRAGMENT_DIALOG_TITLE')
+            });
             break;
         case DialogNames.CONTROLLER_EXTENSION:
             controller = new ControllerExtension(`open.ux.preview.client.adp.controllers.${dialogName}`, overlay, rta);