[ACS-4128] Undo functionality added for input in Perform Actions after selecting an action and it works after destnation folder change in Create/Edit a rule in Manage Rules (#8402)

* undo functionality added for input after selecting destination folder for Create and Edit a rule

* review comments addressed and added 3 more test cases

* used built in type KeyboardEvent instead of interface and combining 2 if conditions - shorten the code

* removed duplicate line of code

* removed duplicate code from test cases

* redundant code removed for render chips for multivalue properties test cases using resuable function

* code smell reduction

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

@@ -18,7 +18,8 @@
                     matTooltipShowDelay="1000"
                     [matTooltip]="'CORE.METADATA.ACTIONS.COPY_TO_CLIPBOARD' | translate"
                     [matTooltipDisabled]="isEditable"
-                    [attr.data-automation-id]="'card-textitem-value-' + property.key">
+                    [attr.data-automation-id]="'card-textitem-value-' + property.key"
+                    (keydown)="undoText($event)">
                 <textarea matInput
                     *ngIf="property.multiline"
                     title="{{property.label | translate }}"

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

@@ -58,6 +58,37 @@ describe('CardViewTextItemComponent', () => {
         return textItemInputError.nativeElement.innerText;
     };
 
+    const checkCtrlZActions = (ctrlKeyValue: boolean, codeValue: string, metaKeyValue: boolean, mockTestValue: string, flag: boolean) => {
+        component.textInput.setValue(mockTestValue);
+        const event = new KeyboardEvent('keydown', {
+            ctrlKey: ctrlKeyValue,
+            code: codeValue,
+            metaKey: metaKeyValue
+        } as KeyboardEventInit );
+        component.undoText(event);
+        if (flag) {
+            expect(component.textInput.value).toBe('');
+        } else {
+            expect(component.textInput.value).not.toBe('');
+        }
+    };
+
+    const renderChipsForMultiValuedProperties = async (cardViewTextItemObject, flag: boolean, length: number,
+        param1: string, param2: string, param3: string) => {
+        component.property = new CardViewTextItemModel(cardViewTextItemObject);
+        component.useChipsForMultiValueProperty = flag;
+        component.ngOnChanges({ property: new SimpleChange(null, null, true) });
+
+        fixture.detectChanges();
+        await fixture.whenStable();
+        const valueChips = fixture.debugElement.queryAll(By.css(`mat-chip`));
+        expect(valueChips).not.toBeNull();
+        expect(valueChips.length).toBe(length);
+        expect(valueChips[0].nativeElement.innerText.trim()).toBe(param1);
+        expect(valueChips[1].nativeElement.innerText.trim()).toBe(param2);
+        expect(valueChips[2].nativeElement.innerText.trim()).toBe(param3);
+    };
+
     setupTestBed({
         imports: [
             TranslateModule.forRoot(),
@@ -186,67 +217,40 @@ describe('CardViewTextItemComponent', () => {
         });
 
         it('should render chips for multivalue properties when chips are enabled', async () => {
-            component.property = new CardViewTextItemModel({
+            const cardViewTextItemObject = {
-                label: 'Text label',
+                label: 'Text label 1',
                 value: ['item1', 'item2', 'item3'],
                 key: 'textkey',
                 default: ['FAKE-DEFAULT-KEY'],
                 editable: true,
                 multivalued: true
-            });
+            };
-            component.useChipsForMultiValueProperty = true;
+            renderChipsForMultiValuedProperties(cardViewTextItemObject, true, 3, 'item1', 'item2', 'item3');
-            component.ngOnChanges({ property: new SimpleChange(null, null, true) });
 
-            fixture.detectChanges();
-            await fixture.whenStable();
-            const valueChips = fixture.debugElement.queryAll(By.css(`mat-chip`));
-            expect(valueChips).not.toBeNull();
-            expect(valueChips.length).toBe(3);
-            expect(valueChips[0].nativeElement.innerText.trim()).toBe('item1');
-            expect(valueChips[1].nativeElement.innerText.trim()).toBe('item2');
-            expect(valueChips[2].nativeElement.innerText.trim()).toBe('item3');
         });
 
         it('should render chips for multivalue integers when chips are enabled', async () => {
-            component.property = new CardViewIntItemModel({
+            const cardViewTextItemObject = {
-                label: 'Text label',
+                label: 'Text label 2',
                 value: [1, 2, 3],
                 key: 'textkey',
                 editable: true,
                 multivalued: true
-            });
+            };
-            component.useChipsForMultiValueProperty = true;
+            renderChipsForMultiValuedProperties(cardViewTextItemObject, true, 3, '1', '2', '3');
-            component.ngOnChanges({ property: new SimpleChange(null, null, true) });
 
-            fixture.detectChanges();
-            await fixture.whenStable();
-            const valueChips = fixture.debugElement.queryAll(By.css(`mat-chip`));
-            expect(valueChips).not.toBeNull();
-            expect(valueChips.length).toBe(3);
-            expect(valueChips[0].nativeElement.innerText.trim()).toBe('1');
-            expect(valueChips[1].nativeElement.innerText.trim()).toBe('2');
-            expect(valueChips[2].nativeElement.innerText.trim()).toBe('3');
         });
 
         it('should render chips for multivalue decimal numbers when chips are enabled', async () => {
-            component.property = new CardViewFloatItemModel({
+            const cardViewTextItemObject = {
-                label: 'Text label',
+                label: 'Text label 3',
                 value: [1.1, 2.2, 3.3],
                 key: 'textkey',
                 editable: true,
                 multivalued: true
-            });
+            };
-            component.useChipsForMultiValueProperty = true;
+            renderChipsForMultiValuedProperties(cardViewTextItemObject, true, 3, '1.1', '2.2', '3.3');
-            component.ngOnChanges({ property: new SimpleChange(null, null, true) });
 
-            fixture.detectChanges();
-            await fixture.whenStable();
-            const valueChips = fixture.debugElement.queryAll(By.css(`mat-chip`));
-            expect(valueChips).not.toBeNull();
-            expect(valueChips.length).toBe(3);
-            expect(valueChips[0].nativeElement.innerText.trim()).toBe('1.1');
-            expect(valueChips[1].nativeElement.innerText.trim()).toBe('2.2');
-            expect(valueChips[2].nativeElement.innerText.trim()).toBe('3.3');
         });
 
         it('should render string for multivalue properties when chips are disabled', async () => {
@@ -818,4 +822,28 @@ describe('CardViewTextItemComponent', () => {
             expect(component.property.value).toBe(expectedNumber.toString());
         });
     });
+
+    describe('events', () => {
+
+        it('should perform undo action by clearing the text that we enter in the text field using undo keyboard shortcut', async () => {
+            checkCtrlZActions(true, 'KeyZ', false, 'UNDO TEST', true);
+
+        });
+
+
+        it('should not perform undo action when we hit any other shortcut instead of using undo keyboard shortcut', async () => {
+            checkCtrlZActions(true, 'KeyH', false, 'DO NOT DO UNDO', false);
+
+        });
+
+        it('should not perform undo action when control key is not pressed even if the keycode is correct', async () => {
+            checkCtrlZActions(false, 'KeyZ', false, 'DO NOT DO UNDO', false);
+
+        });
+
+        it('should perform undo action in MacOS by clearing the text that we enter in the text field using undo keyboard shortcut', async () => {
+            checkCtrlZActions(false, 'KeyZ', true, 'UNDO TEST FOR MACOS', true);
+
+        });
+    });
 });

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.ts

@@ -192,6 +192,12 @@ export class CardViewTextItemComponent extends BaseCardView<CardViewTextItemMode
         }
     }
 
+    undoText(event: KeyboardEvent) {
+        if ((event.ctrlKey || event.metaKey) && event.code === 'KeyZ' && this.textInput.value) {
+                this.textInput.setValue('');
+        }
+    }
+
     ngOnDestroy() {
         this.onDestroy$.next(true);
         this.onDestroy$.complete();