[MNT-25175] configured scripts to execute are listed by node id and not by script name (#10969)

* [MNT-25175] Styles and title for non editable property

* [MNT-25175] Unit test

lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.html

@@ -3,7 +3,7 @@
         <div *ngSwitchDefault>
         <div *ngIf="!isEditable"
             [attr.data-automation-id]="'card-select-label-' + property.key"
-            class="adf-property-label"
+            class="adf-property-label adf-property-label-non-editable"
             >{{ property.label | translate }}
         </div>
             <div class="adf-property-field">
@@ -12,6 +12,7 @@
                     class="adf-property-value adf-property-read-only"
                     [attr.data-automation-id]="'select-readonly-value-' + property.key"
                     data-automation-class="read-only-value"
+                    [title]="property.displayValue | async | translate"
                 >
                     {{ property.displayValue | async | translate }}
                 </div>

lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss

@@ -49,6 +49,10 @@
     }
 
     .adf-property-read-only {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        cursor: default;
         padding: 6px 0;
         border-bottom: 1px solid var(--adf-metadata-property-panel-border-color);
         color: var(--adf-metadata-property-panel-title-color);
@@ -61,4 +65,11 @@
     .adf-property-readonly-value {
         color: var(--adf-metadata-property-panel-label-color);
     }
+
+    .adf-property-label {
+        &-non-editable {
+            cursor: default;
+            font-size: 10px;
+        }
+    }
 }

lib/core/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.spec.ts

@@ -27,6 +27,7 @@ import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { NoopTranslateModule } from '../../../testing/noop-translate.module';
 import { UnitTestingUtils } from '../../../testing/unit-testing-utils';
 import { CardViewUpdateService } from '../../services/card-view-update.service';
+import { DebugElement } from '@angular/core';
 
 describe('CardViewSelectItemComponent', () => {
     let loader: HarnessLoader;
@@ -78,6 +79,8 @@ describe('CardViewSelectItemComponent', () => {
     });
 
     describe('Rendering', () => {
+        const getReadOnlyElement = (): DebugElement => testingUtils.getByDataAutomationClass('read-only-value');
+
         it('should render custom label when editable is set to false', () => {
             component.property = new CardViewSelectItemModel({
                 ...mockDefaultProps,
@@ -95,14 +98,22 @@ describe('CardViewSelectItemComponent', () => {
 
             component.ngOnChanges({});
             fixture.detectChanges();
-
-            const readOnly = testingUtils.getByDataAutomationClass('read-only-value');
             const selectBox = testingUtils.getByDataAutomationClass('select-box');
 
-            expect(readOnly).not.toBeNull();
+            expect(getReadOnlyElement()).not.toBeNull();
             expect(selectBox).toBeNull();
         });
 
+        it('should read only value have title', () => {
+            component.property = new CardViewSelectItemModel({
+                ...mockDefaultProps,
+                editable: false
+            });
+
+            fixture.detectChanges();
+            expect(getReadOnlyElement().nativeElement.title).toBe('Two');
+        });
+
         it('should be possible edit selectBox item', async () => {
             component.property = new CardViewSelectItemModel({
                 ...mockDefaultProps,