@sap-ux/control-property-editor 0.5.21 → 0.5.22

package/package.json

@@ -3,7 +3,7 @@
   "displayName": "Control Property Editor",
   "description": "Control Property Editor",
   "license": "Apache-2.0",
-  "version": "0.5.21",
+  "version": "0.5.22",
   "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/ui-components": "1.19.0",
-    "@sap-ux-private/control-property-editor-common": "0.5.4"
+    "@sap-ux/ui-components": "1.20.1",
+    "@sap-ux-private/control-property-editor-common": "0.5.5"
   },
   "scripts": {
     "clean": "rimraf --glob dist coverage *.tsbuildinfo",

package/src/panels/changes/ChangeStack.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Stack } from '@fluentui/react';
 import type { Change } from '@sap-ux-private/control-property-editor-common';
 import {
+    CONTROL_CHANGE_KIND,
     convertCamelCaseToPascalCase,
     PENDING_CHANGE_TYPE,
     PROPERTY_CHANGE_KIND,
@@ -22,6 +23,8 @@ import type { FilterOptions } from '../../slice';
 import { FilterName } from '../../slice';
 import type { RootState } from '../../store';
 import { getFormattedDateAndTime } from './utils';
+import type { ControlItemProps } from './ControlChange';
+import { ControlChange } from './ControlChange';
 
 export interface ChangeStackProps {
     changes: Change[];
@@ -44,31 +47,57 @@ export function ChangeStack(changeStackProps: ChangeStackProps): ReactElement {
     const stackName = changes[0].type === PENDING_CHANGE_TYPE ? 'unsaved-changes-stack' : 'saved-changes-stack';
     return (
         <Stack data-testid={stackName} tokens={{ childrenGap: 5, padding: '5px 0px 5px 0px' }}>
-            {groups.map((item, i) => [
-                isControlGroup(item) ? (
-                    <Stack.Item
-                        data-testid={`${stackName}-${item.controlId}-${item.index}`}
-                        key={`${item.controlId}-${item.index}`}>
-                        <ControlGroup {...item} />
-                    </Stack.Item>
-                ) : (
-                    <Stack.Item key={`${item.fileName}`}>
-                        <UnknownChange {...item} />
-                    </Stack.Item>
-                ),
-
-                i + 1 < groups.length ? (
-                    <Stack.Item key={getKey(i)}>
-                        <Separator className={styles.item} />
-                    </Stack.Item>
-                ) : (
-                    <></>
-                )
-            ])}
+            {groups.map((item, i) => [renderChangeItem(item, stackName), renderSeparator(i, groups)])}
         </Stack>
     );
 }
 
+/**
+ * Renders the appropriate change item component based on the type of the item.
+ *
+ * @param item - The current item from the group to be rendered.
+ * @param stackName - The name of the stack used for test IDs.
+ * @returns The rendered change item (`ControlGroup`, `ControlChange`, or `UnknownChange`).
+ */
+function renderChangeItem(item: Item, stackName: string): ReactElement {
+    if (isPropertyGroup(item)) {
+        return (
+            <Stack.Item
+                data-testid={`${stackName}-${item.controlId}-${item.index}`}
+                key={`${item.controlId}-${item.index}`}>
+                <ControlGroup {...item} />
+            </Stack.Item>
+        );
+    } else if (isControlItem(item)) {
+        return (
+            <Stack.Item key={`${item.fileName}`}>
+                <ControlChange {...item} />
+            </Stack.Item>
+        );
+    } else {
+        return (
+            <Stack.Item key={`${item.fileName}`}>
+                <UnknownChange {...item} />
+            </Stack.Item>
+        );
+    }
+}
+
+/**
+ * Renders a separator between items, except for the last one.
+ *
+ * @param i - The index of the current item in the group.
+ * @param groups - The array of all groups to check if it's the last item.
+ * @returns {ReactElement | null} The rendered separator or `null` if it's the last item.
+ */
+function renderSeparator(i: number, groups: Item[]): ReactElement | null {
+    return i + 1 < groups.length ? (
+        <Stack.Item key={getKey(i)}>
+            <Separator className={styles.item} />
+        </Stack.Item>
+    ) : null;
+}
+
 /**
  * Generate react attribute key.
  *
@@ -79,13 +108,13 @@ function getKey(i: number): string {
     return `${i}-separator`;
 }
 
-type Item = ControlGroupProps | UnknownChangeProps;
+type Item = ControlGroupProps | UnknownChangeProps | ControlItemProps;
 
 /**
- * Method to convert changes to unknown or control group.
+ * Converts an array of changes into an array of items, grouping changes by controlId and handling different kinds of changes.
  *
- * @param changes Change[]
- * @returns Item[]
+ * @param {Change[]} changes - An array of changes to be converted.
+ * @returns {Item[]} An array of items, some of which may be control groups.
  */
 function convertChanges(changes: Change[]): Item[] {
     const items: Item[] = [];
@@ -93,28 +122,24 @@ function convertChanges(changes: Change[]): Item[] {
     while (i < changes.length) {
         const change: Change = changes[i];
         let group: ControlGroupProps;
-        if (change.kind === UNKNOWN_CHANGE_KIND && change.type === SAVED_CHANGE_TYPE) {
-            items.push({
-                fileName: change.fileName,
-                timestamp: change.timestamp,
-                header: true,
-                controlId: change.controlId ?? ''
-            });
+        if (change.kind === UNKNOWN_CHANGE_KIND) {
+            items.push(handleUnknownChange(change));
+            i++;
+        } else if (change.kind === CONTROL_CHANGE_KIND) {
+            items.push(handleControlChange(change));
             i++;
         } else {
-            group = {
-                controlId: change.controlId,
-                controlName: change.controlName,
-                text: convertCamelCaseToPascalCase(change.controlName),
-                index: i,
-                changes: [change]
-            };
+            group = handleGroupedChange(change, i);
             items.push(group);
             i++;
             while (i < changes.length) {
                 // We don't need to add header again if the next control is the same
                 const nextChange = changes[i];
-                if (nextChange.kind === UNKNOWN_CHANGE_KIND || change.controlId !== nextChange.controlId) {
+                if (
+                    nextChange.kind === UNKNOWN_CHANGE_KIND ||
+                    nextChange.kind === CONTROL_CHANGE_KIND ||
+                    change.controlId !== nextChange.controlId
+                ) {
                     break;
                 }
                 group.changes.push(nextChange);
@@ -125,16 +150,76 @@ function convertChanges(changes: Change[]): Item[] {
     return items;
 }
 
+/**
+ * Handles changes of kind `unknown` and creates an item with a header.
+ *
+ * @param {Change} change - The change object of kind `unknown`.
+ * @returns {Item} An item object containing the filename and header information.
+ */
+function handleUnknownChange(change: Change): Item {
+    return {
+        fileName: change.fileName,
+        header: true,
+        timestamp: change.type === SAVED_CHANGE_TYPE ? change.timestamp : undefined
+    };
+}
+
+/**
+ * Handles changes of kind `control` and creates an item with controlId and type.
+ *
+ * @param {Change} change - The change object of kind `control`.
+ * @returns {Item} An item object containing the filename, controlId, type, and optional timestamp.
+ */
+function handleControlChange(change: Change & { controlId: string }): Item {
+    return {
+        fileName: change.fileName,
+        controlId: change.controlId,
+        timestamp: change.type === SAVED_CHANGE_TYPE ? change.timestamp : undefined,
+        type: change.type
+    };
+}
+
+/**
+ * Handles grouped changes by initializing a control group with a list of changes that share the same controlId.
+ *
+ * @param {Change} change - The initial change object to start the group.
+ * @param {number} i - The index of the initial change in the list.
+ * @returns {ControlGroupProps} A control group object containing grouped changes.
+ */
+function handleGroupedChange(
+    change: Change & { controlId: string; controlName: string },
+    i: number
+): ControlGroupProps {
+    return {
+        controlId: change.controlId,
+        controlName: change.controlName,
+        text: convertCamelCaseToPascalCase(change.controlName),
+        index: i,
+        changes: [change],
+        timestamp: change.type === SAVED_CHANGE_TYPE ? change.timestamp : undefined
+    };
+}
+
 /**
  * Checks if item is of type {@link ControlGroupProps}.
  *
- * @param item ControlGroupProps | UnknownChangeProps
+ * @param item ControlGroupProps | UnknownChangeProps | ControlItemProps
  * @returns boolean
  */
-function isControlGroup(item: ControlGroupProps | UnknownChangeProps): item is ControlGroupProps {
+function isPropertyGroup(item: ControlGroupProps | UnknownChangeProps | ControlItemProps): item is ControlGroupProps {
     return (item as ControlGroupProps).controlName !== undefined;
 }
 
+/**
+ * Checks if item is of type {@link ControlItemProps}.
+ *
+ * @param item UnknownChangeProps | ControlItemProps
+ * @returns boolean
+ */
+function isControlItem(item: UnknownChangeProps | ControlItemProps): item is ControlItemProps {
+    return item?.controlId !== undefined;
+}
+
 const filterPropertyChanges = (changes: Change[], query: string): Change[] => {
     return changes.filter((item): boolean => {
         if (item.kind === PROPERTY_CHANGE_KIND) {
@@ -184,7 +269,7 @@ function filterGroup(model: Item[], query: string): Item[] {
     }
     for (const item of model) {
         let parentMatch = false;
-        if (!isControlGroup(item)) {
+        if (!isPropertyGroup(item)) {
             if (isQueryMatchesChange(item, query)) {
                 filteredModel.push({ ...item, changes: [] });
             }

package/src/panels/changes/ControlChange.tsx

@@ -0,0 +1,139 @@
+import type { ReactElement } from 'react';
+import React, { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Text, Stack, Link } from '@fluentui/react';
+import { useDispatch } from 'react-redux';
+import styles from './UnknownChange.module.scss';
+import { UIIconButton, UiIcons, UIDialog } from '@sap-ux/ui-components';
+import type {
+    PropertyChangeDeletionDetails,
+    PENDING_CHANGE_TYPE
+} from '@sap-ux-private/control-property-editor-common';
+import {
+    SAVED_CHANGE_TYPE,
+    convertCamelCaseToPascalCase,
+    deletePropertyChanges,
+    selectControl
+} from '@sap-ux-private/control-property-editor-common';
+import { getFormattedDateAndTime } from './utils';
+
+export interface ControlItemProps {
+    fileName: string;
+    timestamp?: number;
+    controlId: string;
+    type: typeof SAVED_CHANGE_TYPE | typeof PENDING_CHANGE_TYPE;
+}
+
+/**
+ * React element for control change in the change stack.
+ *
+ * @param {Readonly<ControlItemProps>} props - The props object.
+ * @param {string} props.controlId - The ID of the control being changed.
+ * @param {string} props.fileName - The name of the file associated with the change.
+ * @param {number} [props.timestamp] - The timestamp of the change, optional.
+ * @param {string} props.type - The type of the change (e.g., 'saved' | 'pending').
+ * @returns {ReactElement} A React element that renders the control change UI.
+ */
+export function ControlChange({ controlId, fileName, timestamp, type }: Readonly<ControlItemProps>): ReactElement {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const [dialogState, setDialogState] = useState<PropertyChangeDeletionDetails | undefined>(undefined);
+
+    const name = useMemo(() => {
+        const parts = fileName.split('_');
+        const changeName = parts[parts.length - 1];
+        return convertCamelCaseToPascalCase(changeName);
+    }, [fileName]);
+
+    const onConfirmDelete = (): void => {
+        if (dialogState) {
+            dispatch(deletePropertyChanges(dialogState));
+            setDialogState(undefined);
+        }
+    };
+
+    const onCancelDelete = (): void => {
+        setDialogState(undefined);
+    };
+
+    return (
+        <>
+            <Stack className={styles.item}>
+                <Stack.Item className={styles.property}>
+                    <Stack horizontal>
+                        <Stack.Item>
+                            <Link
+                                className={styles.textHeader}
+                                onClick={(): void => {
+                                    const action = selectControl(controlId);
+                                    dispatch(action);
+                                }}
+                                style={{
+                                    color: 'var(--vscode-textLink-foreground)',
+                                    fontSize: '13px',
+                                    fontWeight: 'bold',
+                                    textOverflow: 'ellipsis',
+                                    whiteSpace: 'nowrap',
+                                    overflowX: 'hidden',
+                                    lineHeight: '18px'
+                                }}>
+                                {name} {t('CHANGE')}
+                            </Link>
+
+                            <Stack horizontal>
+                                <Stack.Item className={styles.fileLabel}>{t('FILE')}</Stack.Item>
+                                <Stack.Item className={styles.fileText} title={fileName}>
+                                    {fileName}
+                                </Stack.Item>
+                            </Stack>
+                            {controlId && (
+                                <Stack horizontal>
+                                    <Stack.Item className={styles.controlLabel}>{t('CONTROL')}</Stack.Item>
+                                    <Stack.Item className={styles.controlText} title={controlId}>
+                                        {controlId}
+                                    </Stack.Item>
+                                </Stack>
+                            )}
+                        </Stack.Item>
+
+                        {type === SAVED_CHANGE_TYPE && (
+                            <Stack.Item className={styles.actions}>
+                                <UIIconButton
+                                    iconProps={{ iconName: UiIcons.TrashCan }}
+                                    onClick={(): void => {
+                                        setDialogState({
+                                            controlId: '',
+                                            propertyName: '',
+                                            fileName
+                                        });
+                                    }}
+                                />
+                            </Stack.Item>
+                        )}
+                    </Stack>
+                </Stack.Item>
+                {timestamp && (
+                    <Stack.Item>
+                        <Stack horizontal horizontalAlign="space-between">
+                            <Text className={styles.timestamp}>{getFormattedDateAndTime(timestamp ?? 0)}</Text>
+                        </Stack>
+                    </Stack.Item>
+                )}
+            </Stack>
+
+            {dialogState && (
+                <UIDialog
+                    hidden={dialogState === undefined}
+                    onAccept={onConfirmDelete}
+                    acceptButtonText={t('CONFIRM_DELETE')}
+                    cancelButtonText={t('CANCEL_DELETE')}
+                    onCancel={onCancelDelete}
+                    dialogContentProps={{
+                        title: t('CONFIRM_OTHER_CHANGE_DELETE_TITLE'),
+                        subText: t('CONFIRM_OTHER_CHANGE_DELETE_SUBTEXT', { name })
+                    }}
+                />
+            )}
+        </>
+    );
+}

package/src/panels/changes/ControlGroup.tsx

@@ -1,13 +1,12 @@
-import type { ReactElement } from 'react';
 import React from 'react';
+import type { ReactElement } from 'react';
 import { Link, Stack } from '@fluentui/react';
 
-import { useAppDispatch } from '../../store';
-import type { Change } from '@sap-ux-private/control-property-editor-common';
 import { PROPERTY_CHANGE_KIND, SAVED_CHANGE_TYPE, selectControl } from '@sap-ux-private/control-property-editor-common';
+import type { Change } from '@sap-ux-private/control-property-editor-common';
 
 import { PropertyChange } from './PropertyChange';
-import { OtherChange } from './OtherChange';
+import { useAppDispatch } from '../../store';
 
 import styles from './ControlGroup.module.scss';
 
@@ -17,6 +16,7 @@ export interface ControlGroupProps {
     controlName: string;
     index: number;
     changes: Change[];
+    timestamp?: number;
 }
 
 /**
@@ -59,9 +59,7 @@ export function ControlGroup(controlGroupProps: ControlGroupProps): ReactElement
                         className={styles.item}>
                         {change.kind === PROPERTY_CHANGE_KIND ? (
                             <PropertyChange change={change} actionClassName={styles.actions} />
-                        ) : (
-                            <OtherChange change={change} actionClassName={styles.actions} />
-                        )}
+                        ) : null}
                     </Stack.Item>
                 );
             })}

package/src/slice.ts

@@ -35,7 +35,8 @@ import {
     applicationModeChanged,
     UNKNOWN_CHANGE_KIND,
     SAVED_CHANGE_TYPE,
-    PENDING_CHANGE_TYPE
+    PENDING_CHANGE_TYPE,
+    PROPERTY_CHANGE_KIND
 } from '@sap-ux-private/control-property-editor-common';
 import { DeviceType } from './devices';
 
@@ -158,6 +159,53 @@ export const initialState: SliceState = {
     quickActions: []
 };
 
+/**
+ * Process a control and update the control stats.
+ *
+ * @param control The control to update
+ * @param changeType The type of change
+ */
+const processControl = (control: ControlChangeStats, changeType: string): void => {
+    if (changeType === PENDING_CHANGE_TYPE) {
+        control.pending++;
+    } else if (changeType === SAVED_CHANGE_TYPE) {
+        control.saved++;
+    }
+};
+
+/**
+ * Process a property change and update the property stats.
+ *
+ * @param control The control to update
+ * @param change The change to process
+ */
+const processPropertyChange = (
+    control: ControlChangeStats,
+    change: PendingPropertyChange | SavedPropertyChange
+): void => {
+    const { propertyName } = change;
+
+    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_CHANGE_TYPE) {
+        property.pending++;
+        property.lastChange = change;
+    } else if (change.type === SAVED_CHANGE_TYPE) {
+        property.lastSavedChange = change;
+        property.saved++;
+    }
+    control.properties[propertyName] = property;
+};
+
 const slice = createSlice<SliceState, SliceCaseReducers<SliceState>, string>({
     name: 'app',
     initialState,
@@ -238,7 +286,7 @@ const slice = createSlice<SliceState, SliceCaseReducers<SliceState>, string>({
                     if (change.kind === UNKNOWN_CHANGE_KIND) {
                         continue;
                     }
-                    const { controlId, propertyName, type, controlName } = change;
+                    const { controlId, type } = change;
                     const key = `${controlId}`;
                     const control = state.changes.controls[key]
                         ? {
@@ -250,33 +298,14 @@ const slice = createSlice<SliceState, SliceCaseReducers<SliceState>, string>({
                         : {
                               pending: 0,
                               saved: 0,
-                              controlName: controlName ?? '',
+                              controlName: change.kind === PROPERTY_CHANGE_KIND ? change.controlName : '',
                               properties: {}
                           };
-                    if (type === PENDING_CHANGE_TYPE) {
-                        control.pending++;
-                    } else if (type === SAVED_CHANGE_TYPE) {
-                        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_CHANGE_TYPE) {
-                        property.pending++;
-                        property.lastChange = change;
-                    } else if (change.type === SAVED_CHANGE_TYPE) {
-                        property.lastSavedChange = change;
-                        property.saved++;
+                    processControl(control, type);
+                    if (change.kind === PROPERTY_CHANGE_KIND) {
+                        processPropertyChange(control, change);
                     }
-                    control.properties[propertyName] = property;
+
                     state.changes.controls[key] = control;
                 }
             })