@sap-ux/control-property-editor 0.7.23 → 0.7.24

package/package.json

@@ -3,7 +3,7 @@
   "displayName": "Control Property Editor",
   "description": "Control Property Editor",
   "license": "Apache-2.0",
-  "version": "0.7.23",
+  "version": "0.7.24",
   "main": "dist/app.js",
   "repository": {
     "type": "git",
@@ -24,6 +24,7 @@
     "@types/remote-redux-devtools": "0.5.8",
     "@types/source-map-support": "0.5.10",
     "@types/react": "16.14.69",
+    "eslint": "9.39.1",
     "eslint-plugin-react": "7.37.5",
     "http-proxy-middleware": "3.0.5",
     "i18next": "25.10.10",
@@ -39,7 +40,7 @@
     "source-map-support": "0.5.21",
     "stream-browserify": "3.0.0",
     "ts-import-plugin": "3.0.0",
-    "ts-jest": "29.4.6",
+    "ts-jest": "29.4.9",
     "postcss-modules": "6.0.1",
     "ejs": "3.1.10",
     "@ui5/fs": "4.0.5",
@@ -47,7 +48,7 @@
     "esbuild-plugin-copy": "2.1.1",
     "@esbuild-plugins/node-modules-polyfill": "0.2.2",
     "uuid": "11.1.0",
-    "@sap-ux/ui-components": "2.1.5",
+    "@sap-ux/ui-components": "2.1.12",
     "@sap-ux-private/control-property-editor-common": "0.7.7"
   },
   "engines": {

package/src/components/ChangeIndicator.tsx

@@ -1,6 +1,8 @@
+import { UIIcon } from '@sap-ux/ui-components';
 import type { ReactElement } from 'react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { IconName } from '../../src/icons';
 
 interface ChangeIndicatorProps {
     saved: number;
@@ -18,64 +20,33 @@ interface ChangeIndicatorProps {
 export function ChangeIndicator(props: ChangeIndicatorProps): ReactElement {
     const { saved, pending, id } = props;
     const rest = { id };
-    const color = 'var(--vscode-terminal-ansiGreen)';
 
     if (saved > 0 && pending === 0) {
-        return (
-            <svg
-                role="img"
-                width="8"
-                height="8"
-                viewBox="0 0 8 8"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                {...rest}>
-                <ChangeIndicatorTooltip {...props} />
-                <circle cx="4" cy="4" r="4" fill={color} />
-            </svg>
-        );
+        return <UIIcon iconName={IconName.filledCircle} title={ChangeIndicatorTooltip(props)} {...rest} />;
     }
 
     if (pending > 0 && saved === 0) {
-        return (
-            <svg
-                role="img"
-                width="8"
-                height="8"
-                viewBox="0 0 8 8"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-                {...rest}>
-                <ChangeIndicatorTooltip {...props} />
-                <circle cx="4" cy="4" r="3.5" stroke={color} />
-            </svg>
-        );
+        return <UIIcon iconName={IconName.unfilledCircle} title={ChangeIndicatorTooltip(props)} {...rest} />;
     }
 
-    return (
-        <svg role="img" width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg" {...rest}>
-            <ChangeIndicatorTooltip {...props} />
-            <circle cx="4" cy="4" r="3.5" stroke={color} />
-            <path d="M4 8a4 4 0 1 0 0-8v8Z" fill={color} />
-        </svg>
-    );
+    return <UIIcon iconName={IconName.partiallyFilledCircle} title={ChangeIndicatorTooltip(props)} {...rest} />;
 }
 
 /**
  * React element for change indicator tooltip.
  *
  * @param changeIndicatorProps - ChangeIndicatorProps
- * @returns ReactElement
+ * @returns string
  */
-function ChangeIndicatorTooltip(changeIndicatorProps: ChangeIndicatorProps): ReactElement {
+function ChangeIndicatorTooltip(changeIndicatorProps: ChangeIndicatorProps): string {
     const { saved, pending, type } = changeIndicatorProps;
     const { t } = useTranslation();
     if (saved > 0 && pending === 0) {
-        return <title>{t('SAVED_CHANGES', { type: type })}</title>;
+        return t('SAVED_CHANGES', { type: type });
     }
 
     if (pending > 0 && saved === 0) {
-        return <title>{t('UNSAVED_CHANGES', { type: type })}</title>;
+        return t('UNSAVED_CHANGES', { type: type });
     }
-    return <title>{t('SAVED_AND_UNSAVED_CHANGES', { type: type })}</title>;
+    return t('SAVED_AND_UNSAVED_CHANGES', { type: type });
 }

package/src/icons.tsx

@@ -20,7 +20,10 @@ export enum IconName {
     grabber = 'grabber',
     themePainter = 'themePainter',
     chevronLeft = 'chevronLeft',
-    saveAndReload = 'saveAndReload'
+    saveAndReload = 'saveAndReload',
+    unfilledCircle = 'unfilledCircle',
+    filledCircle = 'filledCircle',
+    partiallyFilledCircle = 'partiallyFilledCircle'
 }
 
 export function registerAppIcons(): void {
@@ -232,6 +235,22 @@ export function registerAppIcons(): void {
                         </clipPath>
                     </defs>
                 </svg>
+            ),
+            unfilledCircle: (
+                <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="4" cy="4" r="3.5" stroke="var(--vscode-terminal-ansiGreen)" />
+                </svg>
+            ),
+            filledCircle: (
+                <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="4" cy="4" r="4" fill="var(--vscode-terminal-ansiGreen)" />
+                </svg>
+            ),
+            partiallyFilledCircle: (
+                <svg width="8" height="8" viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <circle cx="4" cy="4" r="3.5" stroke="var(--vscode-terminal-ansiGreen)" />
+                    <path d="M4 8a4 4 0 1 0 0-8v8Z" fill="var(--vscode-terminal-ansiGreen)" />
+                </svg>
             )
         }
     });

package/src/toolbar/ViewChanger.tsx

@@ -88,7 +88,7 @@ export function ViewChanger(): ReactElement {
         } else if (value) {
             const match = SCALE_INPUT_PATTERN.exec(value);
             if (match) {
-                const percent = parseInt(match[1], 10);
+                const percent = Number.parseInt(match[1], 10);
                 const newScale = percent / 100;
                 if (newScale >= MIN_SCALE && newScale <= MAX_SCALE) {
                     dispatch(changePreviewScale(newScale));

package/test/unit/components/ChangeIndicator.test.tsx

@@ -5,107 +5,30 @@ import { render } from '../utils';
 import { ChangeIndicator } from '../../../src/components/ChangeIndicator';
 
 describe('ChangeIndicator', () => {
-    test('saved changes', () => {
+    test('saved changes - shows tooltip on hover', () => {
         const { container } = render(<ChangeIndicator id={'change-indicator'} saved={1} pending={0} type="property" />);
-        expect(container.querySelector('svg')).toMatchInlineSnapshot(`
-            <svg
-              fill="none"
-              height="8"
-              id="change-indicator"
-              role="img"
-              viewBox="0 0 8 8"
-              width="8"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <title>
-                All changes on this property are saved
-              </title>
-              <circle
-                cx="4"
-                cy="4"
-                fill="var(--vscode-terminal-ansiGreen)"
-                r="4"
-              />
-            </svg>
-        `);
+        const icon = container.querySelector('i');
+        expect(icon).toHaveAttribute('title', 'All changes on this property are saved');
     });
 
-    test('pending changes', () => {
+    test('pending changes - shows tooltip on hover', () => {
         const { container } = render(<ChangeIndicator saved={0} pending={2} type="property" />);
-        expect(container.querySelector('svg')).toMatchInlineSnapshot(`
-            <svg
-              fill="none"
-              height="8"
-              role="img"
-              viewBox="0 0 8 8"
-              width="8"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <title>
-                All changes on this property are not saved
-              </title>
-              <circle
-                cx="4"
-                cy="4"
-                r="3.5"
-                stroke="var(--vscode-terminal-ansiGreen)"
-              />
-            </svg>
-        `);
+        const icon = container.querySelector('i');
+        expect(icon).toHaveAttribute('title', 'All changes on this property are not saved');
     });
 
-    test('pending and saved changes', () => {
+    test('pending and saved changes - shows tooltip on hover', () => {
         const { container } = render(<ChangeIndicator saved={3} pending={2} type="property" />);
-        expect(container.querySelector('svg')).toMatchInlineSnapshot(`
-            <svg
-              fill="none"
-              height="8"
-              role="img"
-              viewBox="0 0 8 8"
-              width="8"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <title>
-                This property has previously saved changes and currently unsaved changes
-              </title>
-              <circle
-                cx="4"
-                cy="4"
-                r="3.5"
-                stroke="var(--vscode-terminal-ansiGreen)"
-              />
-              <path
-                d="M4 8a4 4 0 1 0 0-8v8Z"
-                fill="var(--vscode-terminal-ansiGreen)"
-              />
-            </svg>
-        `);
+        const icon = container.querySelector('i');
+        expect(icon).toHaveAttribute(
+            'title',
+            'This property has previously saved changes and currently unsaved changes'
+        );
     });
 
-    test('do not add unknown properties', () => {
-        const { container } = render(
-            <ChangeIndicator id={'change-indicator'} saved={1} pending={0} {...{ xyz: 'abc ' }} type="property" />
-        );
-        expect(container.querySelector('svg')).toMatchInlineSnapshot(`
-            <svg
-              fill="none"
-              height="8"
-              id="change-indicator"
-              role="img"
-              viewBox="0 0 8 8"
-              width="8"
-              xmlns="http://www.w3.org/2000/svg"
-            >
-              <title>
-                All changes on this property are saved
-              </title>
-              <circle
-                cx="4"
-                cy="4"
-                fill="var(--vscode-terminal-ansiGreen)"
-                r="4"
-              />
-            </svg>
-        `);
+    test('id prop is applied to icon element', () => {
+        const { container } = render(<ChangeIndicator id={'change-indicator'} saved={1} pending={0} type="property" />);
+        const icon = container.querySelector('i');
+        expect(icon).toHaveAttribute('id', 'change-indicator');
     });
 });