From 3339a0ddd97896dbd5b3cfcdfc2e4e0fb5fe677b Mon Sep 17 00:00:00 2001
From: Dharan <14145706+dhrn@users.noreply.github.com>
Date: Mon, 17 May 2021 20:20:34 +0530
Subject: [PATCH] [ACA-4421] [Edit Aspects] Apply button should be disabled by
 default (#7035)

---
 .../aspect-list-dialog.component.html            |  1 +
 .../aspect-list-dialog.component.spec.ts         | 16 ++++++++++++++++
 .../aspect-list/aspect-list.component.spec.ts    |  9 +++++++++
 .../src/lib/aspect-list/aspect-list.component.ts | 16 ++++++++++++++--
 4 files changed, 40 insertions(+), 2 deletions(-)

diff --git a/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html b/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html
index 54ec904ea1..402c6d018e 100644
--- a/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html
+++ b/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.html
@@ -32,6 +32,7 @@
         </button>
 
         <button mat-button (click)="onApply()" id="aspect-list-dialog-actions-apply"
+            [disabled]="aspectList.hasEqualAspect"
             data-automation-id="aspect-list-dialog-actions-apply">{{
             'ADF-ASPECT-LIST.DIALOG.APPLY' | translate }}
         </button>
diff --git a/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.spec.ts b/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.spec.ts
index 2728ef4616..74bf145607 100644
--- a/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.spec.ts
+++ b/lib/content-services/src/lib/aspect-list/aspect-list-dialog.component.spec.ts
@@ -303,6 +303,22 @@ describe('AspectListDialogComponent', () => {
             expect(customAspectCheckbox).not.toBeNull();
             expect(customAspectCheckbox.checked).toBeTruthy();
         });
+
+        it('Should apply button be disabled by default', async () => {
+            await fixture.detectChanges();
+            const applyButton = fixture.nativeElement.querySelector('#aspect-list-dialog-actions-apply');
+            expect(applyButton.disabled).toBe(true);
+        });
+
+        it('Should apply button get enabled when the aspect list gets updated', async () => {
+            await fixture.detectChanges();
+            const applyButton = fixture.nativeElement.querySelector('#aspect-list-dialog-actions-apply');
+
+            fixture.nativeElement.querySelector('#aspect-list-dialog-actions-clear').click();
+            await fixture.detectChanges();
+
+            expect(applyButton.disabled).toBe(false);
+        });
     });
 
 });
diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.spec.ts b/lib/content-services/src/lib/aspect-list/aspect-list.component.spec.ts
index af1c8d90ae..255650a036 100644
--- a/lib/content-services/src/lib/aspect-list/aspect-list.component.spec.ts
+++ b/lib/content-services/src/lib/aspect-list/aspect-list.component.spec.ts
@@ -156,6 +156,15 @@ describe('AspectListComponent', () => {
             fixture.destroy();
         });
 
+        it('should return true when same aspect list selected', () => {
+            expect(component.hasEqualAspect).toBe(true);
+        });
+
+        it('should return false when different aspect list selected', () => {
+            component.clear();
+            expect(component.hasEqualAspect).toBe(false);
+        });
+
         it('should show all the aspects', () => {
             const firstElement = fixture.nativeElement.querySelector('#aspect-list-FirstAspect');
             const secondElement = fixture.nativeElement.querySelector('#aspect-list-SecondAspect');
diff --git a/lib/content-services/src/lib/aspect-list/aspect-list.component.ts b/lib/content-services/src/lib/aspect-list/aspect-list.component.ts
index ab8536f343..50d7dfb02b 100644
--- a/lib/content-services/src/lib/aspect-list/aspect-list.component.ts
+++ b/lib/content-services/src/lib/aspect-list/aspect-list.component.ts
@@ -42,7 +42,8 @@ export class AspectListComponent implements OnInit, OnDestroy {
     propertyColumns: string[] = ['name', 'title', 'dataType'];
     aspects$: Observable<AspectEntry[]> = null;
     nodeAspects: string[] = [];
-    nodeAspectStatus: string[] = null;
+    nodeAspectStatus: string[] = [];
+    hasEqualAspect: boolean = true;
 
     private onDestroy$ = new Subject<boolean>();
 
@@ -64,7 +65,7 @@ export class AspectListComponent implements OnInit, OnDestroy {
             this.aspects$ = zip(node$, customAspect$).pipe(
                 tap(([node, customAspects]) => {
                     this.nodeAspects = node.aspectNames.filter((aspect) => this.aspectListService.getVisibleAspects().includes(aspect) || customAspects.includes(aspect));
-                    this.nodeAspectStatus = Array.from(node.aspectNames);
+                    this.nodeAspectStatus = [ ...this.nodeAspects ];
                     this.valueChanged.emit(this.nodeAspects);
                 }),
                 concatMap(() => this.aspectListService.getAspects()),
@@ -85,12 +86,14 @@ export class AspectListComponent implements OnInit, OnDestroy {
         } else {
             this.nodeAspects.splice(this.nodeAspects.indexOf(prefixedName), 1);
         }
+        this.updateEqualityOfAspectList();
         this.valueChanged.emit(this.nodeAspects);
     }
 
     reset() {
         if (this.nodeAspectStatus && this.nodeAspectStatus.length > 0) {
             this.nodeAspects.splice(0, this.nodeAspects.length, ...this.nodeAspectStatus);
+            this.hasEqualAspect = true;
             this.valueChanged.emit(this.nodeAspects);
         } else {
             this.clear();
@@ -99,6 +102,7 @@ export class AspectListComponent implements OnInit, OnDestroy {
 
     clear() {
         this.nodeAspects = [];
+        this.updateEqualityOfAspectList();
         this.valueChanged.emit(this.nodeAspects);
     }
 
@@ -109,4 +113,12 @@ export class AspectListComponent implements OnInit, OnDestroy {
     getTitle(aspect: any): string {
         return aspect?.entry?.title ? aspect?.entry?.title : aspect?.entry?.id;
     }
+
+    private updateEqualityOfAspectList() {
+        if (this.nodeAspectStatus.length !== this.nodeAspects.length) {
+            this.hasEqualAspect =  false;
+        } else {
+            this.hasEqualAspect = this.nodeAspects.every((aspect) => this.nodeAspectStatus.includes(aspect));
+        }
+    }
 }