@sap-ux/control-property-editor 0.3.1 → 0.4.0

package/package.json

@@ -3,7 +3,7 @@
   "displayName": "Control Property Editor",
   "description": "Control Property Editor",
   "license": "Apache-2.0",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "main": "dist/app.js",
   "repository": {
     "type": "git",
@@ -50,7 +50,7 @@
     "postcss": "8.4.31",
     "yargs-parser": "21.1.1",
     "@sap-ux/ui-components": "1.11.21",
-    "@sap-ux-private/control-property-editor-common": "0.2.0"
+    "@sap-ux-private/control-property-editor-common": "0.3.0"
   },
   "scripts": {
     "clean": "rimraf ./dist ./coverage *.tsbuildinfo",

package/src/i18n/i18n.json

@@ -64,5 +64,6 @@
   "CONFIRM_CHANGE_SUMMARY_DELETE_SUBTEXT": "Are you sure you want to delete the change for this property? This action cannot be undone.",
   "NO_CONTROL_CHANGES_FOUND": "No Control Changes Found",
   "CHANGE": "Change",
-  "FILE": "File: "
+  "FILE": "File: ",
+  "CONTROL": "Selector Id: "
 }

package/src/panels/changes/ChangeStack.tsx

@@ -1,12 +1,10 @@
 import type { ReactElement } from 'react';
 import React from 'react';
-
 import { Stack } from '@fluentui/react';
-
 import type { Change, ValidChange } from '@sap-ux-private/control-property-editor-common';
 
 import { Separator } from '../../components';
-import type { ControlGroupProps, ControlPropertyChange } from './ControlGroup';
+import type { ControlGroupProps, ControlChange } from './ControlGroup';
 import { ControlGroup } from './ControlGroup';
 import type { UnknownChangeProps } from './UnknownChange';
 import { UnknownChange } from './UnknownChange';
@@ -87,19 +85,23 @@ function convertChanges(changes: Change[]): Item[] {
     const items: Item[] = [];
     let i = 0;
     while (i < changes.length) {
-        const change = changes[i];
+        const change: Change = changes[i];
+        let group: ControlGroupProps;
         if (change.type === 'saved' && change.kind === 'unknown') {
             items.push({
                 fileName: change.fileName,
-                timestamp: change.timestamp
+                timestamp: change.timestamp,
+                header: true,
+                controlId: change.controlId ?? ''
             });
             i++;
         } else {
-            const group: ControlGroupProps = {
+            group = {
                 controlId: change.controlId,
+                controlName: change.controlName,
                 text: convertCamelCaseToPascalCase(change.controlName),
                 changeIndex: i,
-                changes: [toPropertyChangeProps(change, i)]
+                changes: [classifyChange(change, i)]
             };
             items.push(group);
             i++;
@@ -112,7 +114,7 @@ function convertChanges(changes: Change[]): Item[] {
                 ) {
                     break;
                 }
-                group.changes.push(toPropertyChangeProps(nextChange, i));
+                group.changes.push(classifyChange(nextChange, i));
                 i++;
             }
         }
@@ -121,21 +123,33 @@ function convertChanges(changes: Change[]): Item[] {
 }
 
 /**
- * Converts a change to ControlPropertyChange.
+ * Classify Change for grouping.
  *
  * @param change ValidChange
  * @param changeIndex number
- * @returns ControlPropertyChange
+ * @returns ControlChange
  */
-function toPropertyChangeProps(change: ValidChange, changeIndex: number): ControlPropertyChange {
-    const { controlId, propertyName, value, controlName } = change;
-    const base = {
-        controlId,
-        controlName,
-        propertyName,
-        value,
-        changeIndex
-    };
+function classifyChange(change: ValidChange, changeIndex: number): ControlChange {
+    let base;
+    if (change.changeType === 'propertyChange' || change.changeType === 'propertyBindingChange') {
+        const { controlId, propertyName, value, controlName, changeType } = change;
+        base = {
+            controlId,
+            controlName,
+            propertyName,
+            value,
+            changeIndex,
+            changeType
+        };
+    } else {
+        const { controlId, controlName, changeType } = change;
+        base = {
+            controlId,
+            controlName,
+            changeIndex,
+            changeType
+        };
+    }
     if (change.type === 'pending') {
         const { isActive } = change;
         return {
@@ -154,28 +168,49 @@ function toPropertyChangeProps(change: ValidChange, changeIndex: number): Contro
 }
 
 /**
- * Returns true, if controlId is defined.
+ * Returns true, if controlName is defined.
  *
  * @param change ControlGroupProps | UnknownChangeProps
  * @returns boolean
  */
 export function isKnownChange(change: ControlGroupProps | UnknownChangeProps): change is ControlGroupProps {
-    return (change as ControlGroupProps).controlId !== undefined;
+    return (change as ControlGroupProps).controlName !== undefined;
 }
 
-const filterPropertyChanges = (changes: ControlPropertyChange[], query: string): ControlPropertyChange[] => {
+const filterPropertyChanges = (changes: ControlChange[], query: string): ControlChange[] => {
     return changes.filter((item) => {
-        return (
-            !query ||
-            item.propertyName.trim().toLowerCase().includes(query) ||
-            convertCamelCaseToPascalCase(item.propertyName.toString()).trim().toLowerCase().includes(query) ||
-            item.value.toString().trim().toLowerCase().includes(query) ||
-            convertCamelCaseToPascalCase(item.value.toString()).trim().toLowerCase().includes(query) ||
-            (item.timestamp && getFormattedDateAndTime(item.timestamp).trim().toLowerCase().includes(query))
-        );
+        if (item.propertyName) {
+            return (
+                !query ||
+                item.propertyName.trim().toLowerCase().includes(query) ||
+                convertCamelCaseToPascalCase(item.propertyName.toString()).trim().toLowerCase().includes(query) ||
+                item.value.toString().trim().toLowerCase().includes(query) ||
+                convertCamelCaseToPascalCase(item.value.toString()).trim().toLowerCase().includes(query) ||
+                (item.timestamp && getFormattedDateAndTime(item.timestamp).trim().toLowerCase().includes(query))
+            );
+        } else if (item.changeType) {
+            const changeType = convertCamelCaseToPascalCase(item.changeType);
+            return !query || changeType.trim().toLowerCase().includes(query);
+        }
     });
 };
 
+const isQueryMatchesChange = (item: UnknownChangeProps, query: string): boolean => {
+    const parts = item.fileName.split('_');
+    const changeName = parts[parts.length - 1];
+    const name = convertCamelCaseToPascalCase(changeName + 'Change');
+    let dateTime = '';
+    if (item.timestamp) {
+        dateTime = getFormattedDateAndTime(item.timestamp).trim();
+    }
+    return (
+        !query ||
+        item.fileName.trim().toLowerCase().includes(query) ||
+        name.trim().toLowerCase().includes(query) ||
+        dateTime.toLowerCase().includes(query)
+    );
+};
+
 /**
  * Filter group in change stack.
  *
@@ -191,6 +226,9 @@ function filterGroup(model: Item[], query: string): Item[] {
     for (const item of model) {
         let parentMatch = false;
         if (!isKnownChange(item)) {
+            if (isQueryMatchesChange(item, query)) {
+                filteredModel.push({ ...item, changes: [] });
+            }
             continue;
         }
         const name = item.text.trim().toLowerCase();

package/src/panels/changes/ChangesPanel.module.scss

@@ -3,7 +3,6 @@
     margin: 17px 15px 10px 15px;
     flex-direction: row;
     align-items: center;
-    overflow-y: auto;
 }
 
 .noData {

package/src/panels/changes/ChangesPanel.tsx

@@ -17,6 +17,22 @@ import { ChangeStackHeader } from './ChangeStackHeader';
 
 import styles from './ChangesPanel.module.scss';
 
+export interface ChangeProps {
+    controlId: string;
+    controlName: string;
+    changeIndex: number;
+    changeType: string;
+    propertyName: string;
+    value: string | number | boolean;
+    isActive: boolean;
+    timestamp?: number;
+    fileName?: string;
+    /**
+     * Class used for showing and hiding actions
+     */
+    actionClassName: string;
+}
+
 /**
  * React element for ChangePanel.
  *

package/src/panels/changes/ControlGroup.tsx

@@ -5,18 +5,20 @@ import { Link, Stack } from '@fluentui/react';
 import { useAppDispatch } from '../../store';
 import { selectControl } from '@sap-ux-private/control-property-editor-common';
 
-import type { PropertyChangeProps } from './PropertyChange';
+import type { ChangeProps } from './ChangesPanel';
 import { PropertyChange } from './PropertyChange';
+import { OtherChange } from './OtherChange';
 
 import styles from './ControlGroup.module.scss';
 
 export interface ControlGroupProps {
     text: string;
     controlId: string;
+    controlName: string;
     changeIndex: number;
-    changes: ControlPropertyChange[];
+    changes: ControlChange[];
 }
-export type ControlPropertyChange = Omit<PropertyChangeProps, 'actionClassName'>;
+export type ControlChange = Omit<ChangeProps, 'actionClassName'>;
 
 /**
  * React Element for control groups.
@@ -50,10 +52,16 @@ export function ControlGroup(controlGroupProps: ControlGroupProps): ReactElement
             </Stack.Item>
             {changes.map((change) => (
                 <Stack.Item
-                    data-testid={`${stackName}-${controlId}-${change.propertyName}-${change.changeIndex}`}
+                    data-testid={`${stackName}-${controlId}-${change.propertyName ?? change.changeType}-${
+                        change.changeIndex
+                    }`}
                     key={`${change.changeIndex}`}
                     className={styles.item}>
-                    <PropertyChange {...change} actionClassName={styles.actions} />
+                    {['propertyChange', 'propertyBindingChange'].includes(change.changeType) ? (
+                        <PropertyChange {...change} actionClassName={styles.actions} />
+                    ) : (
+                        <OtherChange {...change} actionClassName={styles.actions} />
+                    )}
                 </Stack.Item>
             ))}
         </Stack>

package/src/panels/changes/OtherChange.module.scss

@@ -0,0 +1,13 @@
+.text {
+    color: var(--vscode-editor-foreground);
+}
+
+.text {
+    margin-right: 5px;
+    line-height: 18px;
+    display: inline-block;
+}
+
+.changeType {
+    overflow-wrap: anywhere;
+}

package/src/panels/changes/OtherChange.tsx

@@ -0,0 +1,41 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+
+import { Stack, Text } from '@fluentui/react';
+import { convertCamelCaseToPascalCase } from '@sap-ux-private/control-property-editor-common';
+
+import styles from './OtherChange.module.scss';
+import type { ChangeProps } from './ChangesPanel';
+
+/**
+ * React element for Other change.
+ *
+ * @param OtherChangeProps OtherChangeProps
+ * @returns ReactElement
+ */
+export function OtherChange(OtherChangeProps: Readonly<ChangeProps>): ReactElement {
+    const { changeType, isActive } = OtherChangeProps;
+    return (
+        <Stack
+            tokens={{
+                childrenGap: 5
+            }}
+            className={styles.container}
+            style={{
+                opacity: isActive ? 1 : 0.4
+            }}>
+            <Stack.Item className={styles.changeType}>
+                <Stack
+                    horizontal
+                    horizontalAlign={'space-between'}
+                    tokens={{
+                        childrenGap: 5
+                    }}>
+                    <Stack.Item>
+                        <Text className={styles.text}>{convertCamelCaseToPascalCase(changeType)}</Text>
+                    </Stack.Item>
+                </Stack>
+            </Stack.Item>
+        </Stack>
+    );
+}

package/src/panels/changes/PropertyChange.module.scss

@@ -15,10 +15,6 @@
     opacity: 0.5;
 }
 
-.valueIcon svg path {
-    fill: #ffffff !important;
-}
-
 .property {
     overflow-wrap: anywhere;
 }

package/src/panels/changes/PropertyChange.tsx

@@ -12,21 +12,7 @@ import { IconName } from '../../icons';
 
 import styles from './PropertyChange.module.scss';
 import { getFormattedDateAndTime } from './utils';
-
-export interface PropertyChangeProps {
-    controlId: string;
-    controlName: string;
-    changeIndex: number;
-    propertyName: string;
-    value: string | number | boolean;
-    isActive: boolean;
-    timestamp?: number;
-    fileName?: string;
-    /**
-     * Class used for showing and hiding actions
-     */
-    actionClassName: string;
-}
+import type { ChangeProps } from './ChangesPanel';
 
 /**
  * React element for property change.
@@ -34,7 +20,7 @@ export interface PropertyChangeProps {
  * @param propertyChangeProps PropertyChangeProps
  * @returns ReactElement
  */
-export function PropertyChange(propertyChangeProps: PropertyChangeProps): ReactElement {
+export function PropertyChange(propertyChangeProps: Readonly<ChangeProps>): ReactElement {
     const { controlId, propertyName, value, isActive, timestamp, fileName, actionClassName } = propertyChangeProps;
     const { t } = useTranslation();
     const dispatch = useDispatch();

package/src/panels/changes/UnknownChange.module.scss

@@ -9,8 +9,43 @@
     white-space: nowrap;
     color: var(--vscode-editor-foreground);
     width: 240px;
+    direction: rtl;
+    text-align: left;
+}
+.fileLabel {
+    min-width: 30px;
+    margin-top: 5px;
+}
+.fileText {
+    margin-top: 5px;
+    line-height: 18px;
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    color: var(--vscode-editor-foreground);
+    width: 210px;
+    direction: rtl;
+    text-align: left;
+}
+.controlLabel {
+    min-width: 75px;
+    margin-top: 5px;
+}
+.controlText {
+    margin-top: 5px;
+    line-height: 18px;
+    display: inline-block;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    color: var(--vscode-editor-foreground);
+    width: 165px;
+    direction: rtl;
+    text-align: left;
 }
 .timestamp {
+    margin-top: 5px;
     color: var(--vscode-editor-foreground);
     font-size: 11px;
     line-height: 15px;
@@ -19,7 +54,7 @@
 }
 .textHeader {
     display: inline-block;
-    color: var(--vscode-textLink-foreground);
+    color: var(--vscode-foreground);
     font-size: 13px;
     font-weight: bold;
     text-overflow: ellipsis;

package/src/panels/changes/UnknownChange.tsx

@@ -12,6 +12,8 @@ import { getFormattedDateAndTime } from './utils';
 export interface UnknownChangeProps {
     fileName: string;
     timestamp?: number;
+    controlId?: string;
+    header?: boolean;
 }
 
 /**
@@ -21,7 +23,7 @@ export interface UnknownChangeProps {
  * @returns ReactElement
  */
 export function UnknownChange(unknownChangeProps: UnknownChangeProps): ReactElement {
-    const { fileName, timestamp } = unknownChangeProps;
+    const { fileName, timestamp, header, controlId } = unknownChangeProps;
     const { t } = useTranslation();
     const dispatch = useDispatch();
     const [dialogState, setDialogState] = useState<PropertyChangeDeletionDetails | undefined>(undefined);
@@ -46,14 +48,27 @@ export function UnknownChange(unknownChangeProps: UnknownChangeProps): ReactElem
                 <Stack.Item className={styles.property}>
                     <Stack horizontal>
                         <Stack.Item>
-                            <Text className={styles.textHeader}>
-                                {name} {t('CHANGE')}
-                            </Text>
-                            <Text className={styles.text} title={fileName}>
-                                {t('FILE')}
-                                {fileName}
-                            </Text>
+                            {header && (
+                                <Text className={styles.textHeader}>
+                                    {name} {t('CHANGE')}
+                                </Text>
+                            )}
+                            <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>
+
                         {fileName && (
                             <Stack.Item className={styles.actions}>
                                 <UIIconButton

package/src/panels/changes/index.tsx

@@ -1,3 +1,3 @@
 export { isKnownChange } from './ChangeStack';
 export { ChangesPanel } from './ChangesPanel';
-export { ControlGroupProps, ControlPropertyChange } from './ControlGroup';
+export { ControlGroupProps, ControlChange } from './ControlGroup';

package/src/panels/properties/PropertyDocumentation.tsx

@@ -6,11 +6,7 @@ import { Text, Stack } from '@fluentui/react';
 
 import { UIIcon, UIIconButton, UiIcons } from '@sap-ux/ui-components';
 
-import type {
-    Control,
-    SavedPropertyChange,
-    PendingPropertyChange
-} from '@sap-ux-private/control-property-editor-common';
+import type { Control, SavedPropertyChange, PendingChange } from '@sap-ux-private/control-property-editor-common';
 import { Separator } from '../../components';
 import type { RootState } from '../../store';
 
@@ -42,7 +38,7 @@ export function PropertyDocumentation(propDocProps: PropertyDocumentationProps):
               pending: number;
               saved: number;
               lastSavedChange?: SavedPropertyChange;
-              lastChange?: PendingPropertyChange;
+              lastChange?: PendingChange;
           }
         | undefined
     >((state) => state.changes.controls[control?.id ?? '']?.properties[propertyName]);