feat: Info Center for different type of messages #2909

IvoSG · 2025-02-12T07:27:51Z

Feat for #2511

add the InfoCenter message component to the RigthPanel.
Enhances in UIMessageBar component
Introduce new icon for clearAll
Log message in info center from preview-middleware-client in adaptation-project

…/2511/info_center

changeset-bot · 2025-02-12T07:27:59Z

🦋 Changeset detected

Latest commit: 4c9a8c3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 8 packages

Name	Type
@sap-ux/ui-components	Patch
@sap-ux-private/control-property-editor-common	Minor
@sap-ux/preview-middleware	Patch
@sap-ux-private/preview-middleware-client	Minor
@sap-ux/control-property-editor	Minor
@sap-ux/ui-prompting	Patch
@sap-ux-private/ui-prompting-examples	Patch
@sap-ux/create	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

packages/adp-tooling/package.json

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

packages/control-property-editor/src/panels/info-center/InfoCenter.scss

packages/control-property-editor/src/panels/info-center/InfoCenter.tsx

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

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

voicis · 2025-02-17T17:06:35Z

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

+    expandable?: boolean;
+    expanded?: boolean;
+    read?: boolean;
+    modal?: boolean;


We only need to define the data types that are required for communication between the client and the editor. All the UI state should be defined in control-property-editor.

voicis · 2025-02-17T17:07:17Z

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

+export const clearInfoCenterMessage = createExternalAction<number>('clear-info-center-message');
+export const clearAllInfoCenterMessages = createExternalAction<void>('clear-all-info-center-message');
 export const externalFileChange = createExternalAction<string>('external-file-change');
+export const toggleExpandMessage = createExternalAction<number>('toggle-expand-message');
+export const readMessage = createExternalAction<number>('read-message');
+export const expandableMessage = createExternalAction<number>('expandable-message');
+export const toggleModalMessage = createExternalAction<number>('toggle-modal-message');


All of these look like UI actions, so they should also be only defined in the control-property-editor.

voicis · 2025-02-17T17:39:11Z

packages/preview-middleware-client/src/cpe/outline/service.ts

-                            shouldHideIframe: false
+                        showInfoCenterMessage({
+                            message: {
+                                title: 'Reuse components detected',


Title should also use texts from message bundle.

Done for all texts

voicis · 2025-02-17T17:40:13Z

packages/ui-components/src/components/UISection/UISplitter.scss

@@ -19,6 +19,7 @@ $splitter-focus-border: 1px solid var(--vscode-focusBorder);
    background-color: var(--vscode-panelSection-border);
    position: absolute;
    outline: none;
+    z-index: 2;


Why was this needed? It seems that info center panel overlaps a bit the splitter, but that seems like an issue with info center panels styling not the splitter, because other components are not affected.

Reverted and fixed in the info center styles

voicis · 2025-02-17T17:56:38Z

packages/control-property-editor/src/panels/info-center/InfoCenter.tsx

+                            </Text>
+                            {isExpandable && (
+                                <Text className="more-less" onClick={() => dispatch(toggleExpandMessage(index))}>
+                                    {isExpanded ? 'Less' : 'More'}


All the UI texts should use i18n.

voicis · 2025-02-17T17:56:51Z

packages/control-property-editor/src/panels/info-center/InfoCenter.tsx

+                            <UIDialog
+                                hidden={!isOpenedModal}
+                                dialogContentProps={{
+                                    title: 'Error Details'


Same as above.

…x-tools into feat/2511/info_center

815are

checked ui-components:

code changes are easy to understand - I did not notice issue
tests are added for additional message types

packages/control-property-editor/src/panels/info-center/InfoCenter.tsx

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

voicis · 2025-02-21T14:43:02Z

packages/control-property-editor/src/panels/info-center/InfoCenter.scss

+}
+
+.message-description {
+    display: -webkit-box;


Having a short comment why browser prefixes are needed here would be good as we generally try to avoid them and that this is required for the line-clamp is not obvious.

Added comment description

voicis · 2025-02-21T15:51:34Z

packages/control-property-editor/src/panels/info-center/InfoCenter.scss

+    background-color: var(--vscode-actionBar-toggledBackground) !important;
+}
+
+.message-title {


Each component should have a dedicated style file. Message related styles should be in InfoMessageItem.scss file

Divided into separate files

voicis · 2025-02-21T16:31:10Z

packages/preview-middleware-client/src/messagebundle.properties

@@ -35,7 +35,7 @@ ADP_ADD_FRAGMENT_NOTIFICATION = Note: The "{0}.fragment.xml" fragment will be cr
 ADP_ADD_FRAGMENT_WITH_TEMPLATE_NOTIFICATION = Note: The "{0}.fragment.xml" fragment will be created once you save the changes.
 ADP_ADD_TWO_FRAGMENTS_WITH_TEMPLATE_NOTIFICATION = Note: The "{0}.fragment.xml" and "{1}.fragment.xml" fragments will be created once you save the changes.
 ADP_SYNC_VIEWS_MESSAGE = Synchronous views are detected for this application. Controller extensions are not supported for such views and will be disabled.
-ADP_REUSE_COMPONENTS_MESSAGE = Reuse components are detected for some views in this application. Controller extensions, adding fragments and manifest changes are not supported for such views and will be disabled.
+ADP_REUSE_COMPONENTS_MESSAGE = Reuse components detected | Reuse components are detected for some views in this application. Controller extensions, adding fragments and manifest changes are not supported for such views and will be disabled.


This is rather confusing, looking at this text it is not clear that it is actually used for two different things.

Please add a new entry for the title instead of combining two and then splitting.

A new entry for the title was added

voicis · 2025-02-21T16:39:08Z

packages/preview-middleware-client/src/cpe/outline/service.ts

-                            shouldHideIframe: false
+                        showInfoCenterMessage({
+                            type: MessageBarType.warning,
+                            title: title.trim(),


We shouldn't need to perform any operations on the texts. Changes should be done in .properties files.

voicis · 2025-02-21T16:41:21Z

packages/preview-middleware-client/src/cpe/outline/service.ts

@@ -35,6 +40,7 @@ export class OutlineService extends EventTarget {
        const resourceBundle = await getTextBundle();
        const key = 'ADP_REUSE_COMPONENTS_MESSAGE';
        const message = resourceBundle.getText(key) ?? key;


This probably can be converted into one liner passing the key without variable, getText should already return the value of key if the text is not found.

packages/control-property-editor/src/panels/info-center/InfoCenter.tsx

packages/control-property-editor/src/panels/info-center/InfoMessageItem.tsx

… documentation

…x-tools into feat/2511/info_center

.changeset/yellow-hairs-peel.md

packages/control-property-editor/src/panels/info-center/InfoMessageItem.tsx

Co-authored-by: Nikita B. <[email protected]>

sonarqubecloud · 2025-02-27T14:43:04Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
98.4% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

IvoSG added 14 commits October 30, 2024 16:37

feat: add info center structure for different type of messages

06316d8

feat: add new type in message bar

4de81f1

Merge branch 'main' of https://github.com/SAP/open-ux-tools into feat…

8cade68

…/2511/info_center

feat: fixed position of info center header

e7c1711

Merge branch 'main' of https://github.com/SAP/open-ux-tools into feat…

c125093

…/2511/info_center

Merge branch 'main' of https://github.com/SAP/open-ux-tools into feat…

4a873ab

…/2511/info_center

Merge branch 'main' of https://github.com/SAP/open-ux-tools into feat…

5ea858c

…/2511/info_center

refactor: align designed items

9dff9c8

feat: add messages read status

aa79bc9

feat: expandable messages with text and clamps

c8e459c

feat: modal for detailed errors and enhancements

99ba6e4

Merge branch 'main' of https://github.com/SAP/open-ux-tools into feat…

edf64ea

…/2511/info_center

refactor: improove styles and change remove all icon

4ccfa02

Merge branch 'main' of https://github.com/SAP/open-ux-tools into feat…

75b05b9

…/2511/info_center

IvoSG added feature New feature or request ui-components @sap-ux/ui-components preview-middleware-client control-property-editor @sap-ux/control-property-editor control-property-editor-common @sap-ux-private/control-property-editor-common labels Feb 12, 2025

IvoSG requested review from a team as code owners February 12, 2025 07:27

IvoSG added 2 commits February 12, 2025 09:36

test: wrong description for warning case

725995d

chore: add cset

e3b104a

nikmace requested changes Feb 12, 2025

View reviewed changes

IvoSG and others added 3 commits February 12, 2025 12:20

fix: lint errors and remove unused dependency

5d210ca

fix: resolve review comments and fix unit test case

6ddd4c5

Linting auto fix commit

2ee6ef8

nikmace self-requested a review February 12, 2025 13:27

voicis reviewed Feb 17, 2025

View reviewed changes

IvoSG and others added 10 commits February 20, 2025 09:38

chore: encasements and code review comments

6d7021b

Merge branch 'feat/2511/info_center' of https://github.com/SAP/open-u…

c30fc96

…x-tools into feat/2511/info_center

test: adapt reuse component test

aa94b11

Merge branch 'main' into feat/2511/info_center

a3cd84b

Merge branch 'main' into feat/2511/info_center

ee8eaf6

test: fix tests and typo

468ac97

Merge branch 'feat/2511/info_center' of https://github.com/SAP/open-u…

c5a0c71

…x-tools into feat/2511/info_center

Merge branch 'main' into feat/2511/info_center

cf843ab

test: improve coverage and resolve sonar issue

c77f424

Linting auto fix commit

7524267

IvoSG requested a review from voicis February 21, 2025 13:00

815are previously approved these changes Feb 21, 2025

View reviewed changes

voicis reviewed Feb 21, 2025

View reviewed changes

nikmace requested changes Feb 24, 2025

View reviewed changes

packages/control-property-editor/src/panels/info-center/InfoMessageItem.tsx Show resolved Hide resolved

packages/control-property-editor/src/panels/info-center/InfoMessageItem.tsx Outdated Show resolved Hide resolved

IvoSG added 2 commits February 25, 2025 13:05

chore: Refactored code for improved structure and added comprehensive…

be40877

… documentation

Merge branch 'feat/2511/info_center' of https://github.com/SAP/open-u…

26b10f5

…x-tools into feat/2511/info_center

IvoSG dismissed 815are’s stale review via 26b10f5 February 25, 2025 11:10

IvoSG and others added 2 commits February 25, 2025 16:05

test: fix dispatch issue for expandable messages

f47d9cb

Merge branch 'main' into feat/2511/info_center

7cd9981

IvoSG requested review from nikmace and voicis February 25, 2025 14:26

nikmace requested changes Feb 26, 2025

View reviewed changes

.changeset/yellow-hairs-peel.md Outdated Show resolved Hide resolved

packages/control-property-editor/src/panels/info-center/InfoMessageItem.tsx Outdated Show resolved Hide resolved

chore: code encasement

abbd178

Co-authored-by: Nikita B. <[email protected]>

nikmace self-requested a review February 26, 2025 13:16

IvoSG and others added 3 commits February 27, 2025 10:41

Merge branch 'main' into feat/2511/info_center

a3890c8

changeset: update

3e54ceb

Merge branch 'main' into feat/2511/info_center

4c9a8c3

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Info Center for different type of messages #2909

feat: Info Center for different type of messages #2909

IvoSG commented Feb 12, 2025

changeset-bot bot commented Feb 12, 2025 •

edited

Loading

voicis Feb 17, 2025

IvoSG Feb 21, 2025

voicis Feb 17, 2025

IvoSG Feb 21, 2025

voicis Feb 17, 2025

IvoSG Feb 21, 2025

voicis Feb 17, 2025

IvoSG Feb 21, 2025

voicis Feb 17, 2025

IvoSG Feb 21, 2025

voicis Feb 17, 2025

IvoSG Feb 21, 2025

815are left a comment

voicis Feb 21, 2025

IvoSG Feb 25, 2025

voicis Feb 21, 2025

IvoSG Feb 25, 2025

voicis Feb 21, 2025

IvoSG Feb 25, 2025

voicis Feb 21, 2025

IvoSG Feb 25, 2025

voicis Feb 21, 2025

IvoSG Feb 25, 2025

sonarqubecloud bot commented Feb 27, 2025

feat: Info Center for different type of messages #2909

Are you sure you want to change the base?

feat: Info Center for different type of messages #2909

Conversation

IvoSG commented Feb 12, 2025

changeset-bot bot commented Feb 12, 2025 • edited Loading

🦋 Changeset detected

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

815are left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sonarqubecloud bot commented Feb 27, 2025

Quality Gate passed

changeset-bot bot commented Feb 12, 2025 •

edited

Loading