[ACS-5645]code modification

e2e/core/pages/metadata-view.page.ts

@@ -33,7 +33,7 @@ export class MetadataViewPage {
     author = $(`[data-automation-id='card-textitem-value-properties.cm:author']`);
     titleProperty = $(`span[data-automation-id='card-textitem-value-properties.cm:title'] span`);
     editIcon = $(`button[data-automation-id='meta-data-card-toggle-edit']`);
-    editIconGeneral = $(`button[data-automation-id='meta-data-generalInfo-edit']`);
+    editIconGeneral = $(`button[data-automation-id='meta-data-general-info-edit']`);
     informationButton = $(`button[data-automation-id='meta-data-card-toggle-expand']`);
     informationSpan = $(`span[data-automation-id='meta-data-card-toggle-expand-label']`);
     informationIcon = $(`span[data-automation-id='meta-data-card-toggle-expand-label'] ~ mat-icon`);
@@ -119,7 +119,7 @@ export class MetadataViewPage {
     }
 
     async editIconGeneralClick(): Promise<void> {
-        await BrowserActions.clickExecuteScript('button[data-automation-id="meta-data-generalInfo-edit"]');
+        await BrowserActions.click(this.editIconGeneral);
     }
 
     async informationButtonIsDisplayed(): Promise<void> {

lib/content-services/src/lib/category/categories-management/categories-management.component.spec.ts

@@ -220,7 +220,7 @@ describe('CategoriesManagementComponent', () => {
                 component.categoryNameControlVisible = true;
                 fixture.detectChanges();
             });
-            it('should be hidden initially', () => {
+            it('should not hide category name control when categoryNameControlVisible is false', () => {
                 component.categoryNameControlVisible = false;
                 fixture.detectChanges();
                 const categoryControl: HTMLDivElement = fixture.debugElement.query(By.css('.adf-category-name-field')).nativeElement;
@@ -308,7 +308,7 @@ describe('CategoriesManagementComponent', () => {
         it('should have no required validator set for category control', () => {
             expect(component.categoryNameControl.hasValidator(Validators.required)).toBeFalse();
         });
-        
+       
         it('should display validation error when searching for empty category', fakeAsync(() => {
             typeCategory('   ');
 

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.html

@@ -21,19 +21,19 @@
                         (click)="toggleGeneralEdit($event)"
                         [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
                         [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate"
-                        data-automation-id="meta-data-generalInfo-edit"
+                        data-automation-id="meta-data-general-info-edit"
                         class="adf-edit-icon-buttons">
                     <mat-icon>mode_edit</mat-icon>
                 </button>
                 <div *ngIf="editable"
                     class="adf-metadata-action-buttons">
                     <button mat-icon-button 
-                            (click)="cancelGeneralInfoChanges($event)"
+                            (click)="cancelEditChanges('generalInfo', $event)"
                             data-automation-id="reset-metadata">
                         <mat-icon>clear</mat-icon>
                     </button>
                     <button mat-icon-button
-                            (click)="saveGeneralInfoChanges($event)"
+                            (click)="saveEditChanges('generalInfo', $event)"
                             color="primary"
                             data-automation-id="save-generalInfo-metadata"
                             [disabled]="!hasMetadataChanged">
@@ -54,8 +54,8 @@
         </mat-expansion-panel>
         <ng-container *ngIf="displayTags">
             <mat-expansion-panel 
-                            (opened)="handleTagPanelOpen()"
+                            (opened)="handleTagsPanelState(true)"
-                            (closed)="handleTagPanelClose()"
+                            (closed)="handleTagsPanelState(false)"
                             hideToggle
                             [expanded]="tagsPanelState">
                 <mat-expansion-panel-header>
@@ -80,12 +80,12 @@
                     </div>
                     <div *ngIf="editableTags" class="adf-metadata-action-buttons">
                         <button mat-icon-button
-                                (click)="CancelTagsChanges($event)"
+                                (click)="cancelEditChanges('tags', $event)"
-                                data-automation-id="reset-metadata">
+                                data-automation-id="reset-tags-metadata">
                             <mat-icon>clear</mat-icon>
                         </button>
                         <button mat-icon-button
-                                (click)="saveTagsChanges($event)"
+                                (click)="saveEditChanges('tags', $event)"
                                 color="primary"
                                 data-automation-id="save-tags-metadata"
                                 [disabled]="!hasMetadataChanged">
@@ -115,8 +115,8 @@
         </ng-container>
         <ng-container *ngIf="displayCategories">
             <mat-expansion-panel
-                            (opened)="handleCategoryPanelOpen()"
+                            (opened)="handleCategoriesPanelState(true)"
-                            (closed)="handleCategoryPanelClose()"
+                            (closed)="handleCategoriesPanelState(false)"
                             hideToggle
                             [expanded]="categoriesPanelState">
                 <mat-expansion-panel-header>
@@ -140,12 +140,12 @@
                     </div>
                     <div *ngIf="editableCategories" class="adf-metadata-action-buttons">
                         <button mat-icon-button
-                                (click)="cancelCategoriesChanges($event)"
+                                (click)="cancelEditChanges('categories', $event)"
                                 data-automation-id="reset-metadata">
                             <mat-icon>clear</mat-icon>
                         </button>
                         <button mat-icon-button
-                                (click)="saveCategoriesChanges($event)"
+                                (click)="saveEditChanges('categories', $event)"
                                 color="primary"
                                 data-automation-id="save-categories-metadata"
                                 [disabled]="!hasMetadataChanged">
@@ -185,8 +185,8 @@
                     <mat-expansion-panel
                                     [attr.data-automation-id]="'adf-metadata-group-' + group.title"
                                     [expanded]="canExpandTheCard(group) || !displayDefaultProperties && first || group.expanded"
-                                    (opened)="group.expanded= true"
+                                    (opened)="group.expanded = true"
-                                    (closed)="group.expanded= false"
+                                    (closed)="group.expanded = false"
                                     hideToggle>
                         <mat-expansion-panel-header>
                             <div class="adf-metadata-properties-panel-content">
@@ -207,12 +207,12 @@
                             </button>
                             <div class="adf-metadata-action-buttons" *ngIf="group.editable">
                                 <button mat-icon-button
-                                        (click)="cancelGroupChanges(group, $event)"
+                                        (click)="cancelEditChanges('group', $event, group)"
                                         data-automation-id="reset-metadata">
                                     <mat-icon>clear</mat-icon>
                                 </button>
                                 <button mat-icon-button
-                                        (click)="saveGroupChanges(group, $event)" 
+                                        (click)="saveEditChanges('group', $event, group)"
                                         color="primary"
                                         data-automation-id="save-metadata"
                                         [disabled]="!hasMetadataChanged">

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss

@@ -123,14 +123,12 @@
 
 .acs-details-container {
     .mat-tab-body-content {
-        .adf-content-metadata-card {
+        .adf-metadata-properties {
-            .adf-metadata-properties {
+            .mat-expansion-panel {
-                .mat-expansion-panel {
+                width: 755px;
-                    width: 755px;
+                border: 1px solid var(--adf-metadata-property-panel-border-color);
-                    border: 1px solid var(--adf-metadata-property-panel-border-color);
+                margin: 24px;
-                    margin: 24px;
+                border-radius: 12px !important;
-                    border-radius: 12px !important;
-                }
             }
         }
     }

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.spec.ts

@@ -76,6 +76,7 @@ describe('ContentMetadataComponent', () => {
     const findTagElements = (): DebugElement[] => fixture.debugElement.queryAll(By.css('.adf-metadata-properties .adf-metadata-properties-tag'));
 
     const findCancelButton = (): HTMLButtonElement => fixture.debugElement.query(By.css('[data-automation-id=reset-metadata]')).nativeElement;
+    const findCancelTagsButton = (): HTMLButtonElement => fixture.debugElement.query(By.css('[data-automation-id=reset-tags-metadata]')).nativeElement;
 
     const clickOnCancel = () => {
         findCancelButton().click();
@@ -302,7 +303,7 @@ describe('ContentMetadataComponent', () => {
             fixture.detectChanges();
             findTagsCreator().tagsChange.emit([tagName1, tagName2]);
             const mockEvent = new Event('click');
-            component.saveTagsChanges(mockEvent);
+            component.saveChanges(mockEvent);
 
             const tag1 = new TagBody();
             tag1.tag = tagName1;
@@ -312,7 +313,7 @@ describe('ContentMetadataComponent', () => {
             expect(tagService.assignTagsToNode).toHaveBeenCalledWith(node.id, [tag1, tag2]);
         }));
 
-        it('should call getTagsByNodeId on TagService on save click', async() => {
+        it('should call getTagsByNodeId on TagService on save click', () => {
             component.editableTags = true;
             component.displayTags = true;
             const property = { key: 'properties.property-key', value: 'original-value' } as CardViewBaseItemModel;
@@ -330,7 +331,7 @@ describe('ContentMetadataComponent', () => {
             findTagsCreator().tagsChange.emit([tagPaging.list.entries[0].entry.tag, 'New tag 3']);
             getTagsByNodeIdSpy.calls.reset();
             const mockEvent = new Event('click');
-            component.saveTagsChanges(mockEvent);
+            component.saveChanges(mockEvent);
 
             expect(tagService.getTagsByNodeId).toHaveBeenCalledWith(node.id);
         });
@@ -432,81 +433,106 @@ describe('ContentMetadataComponent', () => {
         }));
     });
 
-    describe('saveChanges', () => {
+    describe('saveEditChanges', () => {
-        it('should save general info changes and toggle editable', () => {
+        it('should save general info changes and toggle editable flag', () => {
             const event = new Event('click');
-            spyOn(component, 'saveChanges');
+            const buttonType = 'generalInfo';
             component.editable = true;
-            component.saveGeneralInfoChanges(event);
+    
+            spyOn(component, 'saveChanges');
+            component.saveEditChanges(buttonType, event);
+    
             expect(component.saveChanges).toHaveBeenCalledWith(event);
             expect(component.editable).toBe(false);
         });
-
+    
-        it('should save tags changes and toggle editableTags', () => {
+        it('should save tags changes and toggle editableTags flag', () => {
             const event = new Event('click');
-            spyOn(component, 'saveChanges');
+            const buttonType = 'tags';
             component.editableTags = true;
-            component.saveTagsChanges(event);
+    
+            spyOn(component, 'saveChanges');
+            component.saveEditChanges(buttonType, event);
+    
             expect(component.saveChanges).toHaveBeenCalledWith(event);
             expect(component.editableTags).toBe(false);
         });
 
-          it('should save categories changes and toggle editableCategories', () => {
+        it('should save categories changes and toggle editableCategories flag', () => {
             const event = new Event('click');
-            spyOn(component, 'saveChanges');
+            const buttonType = 'categories';
             component.editableCategories = true;
-            component.saveCategoriesChanges(event);
+    
+            spyOn(component, 'saveChanges');
+            component.saveEditChanges(buttonType, event);
+    
             expect(component.saveChanges).toHaveBeenCalledWith(event);
-            expect(component.editableTags).toBe(false);
+            expect(component.editableCategories).toBe(false);
-          });
+        });
-        
+    
-          it('should save group changes and toggle group.editable', () => {
+        it('should save group changes and toggle editable flag', () => {
             const group = { editable: true };
             const event = new Event('click');
+            const buttonType = 'group';
+    
             spyOn(component, 'saveChanges');
-            component.saveGroupChanges(group, event);
+            component.saveEditChanges(buttonType, event, group);
+    
             expect(component.saveChanges).toHaveBeenCalledWith(event);
             expect(group.editable).toBe(false);
-          });
+        });
-    })
+    });
-
+    
     describe('cancelChanges', () => {
         it('should cancel group changes and set group editable to false', () => {
             const group = { editable: true };
             const event = new Event('click');
+            const buttonType = 'group';
+    
             spyOn(component, 'cancelChanges');
-            component.cancelGroupChanges(group, event);
+            component.cancelEditChanges(buttonType, event, group);
+    
             expect(component.cancelChanges).toHaveBeenCalledWith(event);
             expect(group.editable).toBe(false);
         });
-
+    
-        it('should cancel general info changes and toggle editable', () => {
+        it('should cancel general info changes and toggle editable flag', () => {
             const event = new Event('click');
+            const buttonType = 'generalInfo';
+            component.editable = true;
+    
             spyOn(component, 'cancelChanges');
-            component.editable= true;
+            component.cancelEditChanges(buttonType, event);
-            component.cancelGeneralInfoChanges(event);
+    
             expect(component.cancelChanges).toHaveBeenCalledWith(event);
             expect(component.editable).toBe(false);
         });
-
+    
-        it('should cancel tags changes and toggle editableTags', () => {
+        it('should cancel tags changes and toggle editableTags flag', () => {
             const event = new Event('click');
-            spyOn(component, 'cancelChanges');
+            const buttonType = 'tags';
             component.editableTags = true;
-            component.CancelTagsChanges(event);
+    
+            spyOn(component, 'cancelChanges');
+            component.cancelEditChanges(buttonType, event);
+    
             expect(component.cancelChanges).toHaveBeenCalledWith(event);
             expect(component.editableTags).toBe(false);
         });
-
+    
-        it('should cancel categories changes and toggle editableCategories', () => {
+        it('should cancel categories changes and toggle editableCategories flag', () => {
             const event = new Event('click');
-            spyOn(component, 'cancelChanges');
+            const buttonType = 'categories';
             component.editableCategories = true;
-            component.cancelCategoriesChanges(event);
+    
+            spyOn(component, 'cancelChanges');
+            component.cancelEditChanges(buttonType, event);
+    
             expect(component.cancelChanges).toHaveBeenCalledWith(event);
             expect(component.editableCategories).toBe(false);
         });
-    })
+    });
+    
 
     describe('editing', () => {
         it('should toggle categories edit and set categoriesPanelState accordingly', () => {
@@ -729,7 +755,7 @@ describe('ContentMetadataComponent', () => {
 
         it('should display card views group when there is at least one property that is not empty', async () => {
             component.expanded = true;
-            spyOn(contentMetadataService, 'getGroupedProperties');
+            spyOn(contentMetadataService, 'getGroupedProperties').and.stub();
 
             component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) });
 
@@ -1118,7 +1144,6 @@ describe('ContentMetadataComponent', () => {
         it('should render tags after loading tags in ngOnInit', () => {
             spyOn(tagService, 'getTagsByNodeId').and.returnValue(of(tagPaging));
             component.ngOnInit();
-            fixture.whenStable();
             fixture.detectChanges();
             const tagElements = findTagElements();
             expect(tagElements).toHaveSize(2);
@@ -1195,9 +1220,7 @@ describe('ContentMetadataComponent', () => {
             tick(500);
             fixture.detectChanges();
             spyOn(tagService, 'getTagsByNodeId').and.returnValue(of(tagPaging));
-
+            findCancelTagsButton().click();
-            const mockEvent = new Event('click');
-            component.CancelTagsChanges(mockEvent);
             component.editableTags = false;
             fixture.detectChanges();
             const tagElements = findTagElements();
@@ -1249,7 +1272,7 @@ describe('ContentMetadataComponent', () => {
         it('should enable cancel button after emitting tagsChange event', () => {
             tagsCreator.tagsChange.emit(['New tag 1', 'New tag 2', 'New tag 3']);
             fixture.detectChanges();
-            expect(findCancelButton().disabled).toBeFalse();
+            expect(findCancelTagsButton().disabled).toBeFalse();
         });
 
         it('should enable save button after emitting tagsChange event', () => {
@@ -1270,7 +1293,7 @@ describe('ContentMetadataComponent', () => {
             expect(tagsCreator.disabledTagsRemoving).toBeTrue();
         });
 
-        it('should have assigned false to disabledTagsRemoving if forkJoin fails', fakeAsync(() => {
+        it('should have assigned false to disabledTagsRemoving if forkJoin fails', () => {
             const property = { key: 'properties.property-key', value: 'original-value' } as CardViewBaseItemModel;
             const expectedNode = { ...node, name: 'some-modified-value' };
             spyOn(nodesApiService, 'updateNode').and.returnValue(of(expectedNode));
@@ -1289,7 +1312,7 @@ describe('ContentMetadataComponent', () => {
             clickOnTagsSave();
 
             expect(tagsCreator.disabledTagsRemoving).toBeFalse();
-        }));
+        });
 
         it('should have assigned false to tagNameControlVisible after clicking on update button', () => {
             tagsCreator.tagNameControlVisibleChange.emit(true);

lib/content-services/src/lib/content-metadata/components/content-metadata/content-metadata.component.ts

@@ -273,24 +273,28 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
         }
     }
 
-    saveGeneralInfoChanges(event:Event) {
+    saveEditChanges(buttonType: string, event: Event, group?: any) {
         this.saveChanges(event);
-        this.editable = !this.editable;
+        
-    }
+        switch (buttonType) {
-
+            case 'generalInfo':
-    saveTagsChanges(event: Event) {
+                this.editable = !this.editable;
-        this.saveChanges(event);
+                break;
-        this.editableTags = !this.editableTags;
+            case 'tags':
-    }
+                this.editableTags = !this.editableTags;
-    
+                break;
-    saveCategoriesChanges(event: Event) {
+            case 'categories':
-        this.saveChanges(event);
+                this.editableCategories = !this.editableCategories;
-        this.editableCategories = !this.editableCategories;
+                break;
-    }
+            case 'group':
-
+                if (group) {
-    saveGroupChanges(group: any, event:Event) {
+                    group.editable = !group.editable;
-        this.saveChanges(event);
+                }
-        group.editable = !group.editable;
+                break;
+            
+            default:
+                break;
+        }
     }
 
     /**
@@ -328,24 +332,28 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
         this.loadProperties(this.node);
     }
 
-    cancelGroupChanges(group: any, event: Event) {
+    cancelEditChanges(buttonType: string, event: Event, group?: any) {
         this.cancelChanges(event);
-        group.editable = !group.editable;
+        
-    }
+        switch (buttonType) {
-
+            case 'generalInfo':
-    CancelTagsChanges(event: Event) {
+                this.editable = !this.editable;
-        this.cancelChanges(event);
+                break;
-        this.editableTags = !this.editableTags;
+            case 'tags':
-    }
+                this.editableTags = !this.editableTags;
-
+                break;
-    cancelCategoriesChanges(event: Event) {
+            case 'categories':
-        this.cancelChanges(event);
+                this.editableCategories = !this.editableCategories;
-        this.editableCategories = !this.editableCategories;
+                break;
-    }
+            case 'group':
-
+                if (group) {
-    cancelGeneralInfoChanges(event: Event) {
+                    group.editable = !group.editable;
-        this.cancelChanges(event);
+                }
-        this.editable = !this.editable;
+                break;
+            
+            default:
+                break;
+        }
     }
 
     toggleGeneralEdit(event: Event): void {
@@ -386,28 +394,18 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
         }
     }
 
-    handleTagPanelOpen() {
-        this.tagsPanelState = true;
-        this.cdr.detectChanges();
-    }
-    
-    handleTagPanelClose() {
-        this.tagsPanelState = false;
-        this.cdr.detectChanges();
-    }
-
     generalTogglePanelState() {
         this.generalInfoPanelState = !this.generalInfoPanelState;
         this.cdr.detectChanges();
     }
 
-    handleCategoryPanelOpen() {
+    handleTagsPanelState(tagPanelState: boolean) {
-        this.categoriesPanelState = true;
+        this.tagsPanelState = tagPanelState;
         this.cdr.detectChanges();
     }
-    
+
-    handleCategoryPanelClose() {
+    handleCategoriesPanelState(categoriesPanelState: boolean) {
-        this.categoriesPanelState = false;
+        this.categoriesPanelState= categoriesPanelState;
         this.cdr.detectChanges();
     }
     

lib/content-services/src/lib/tag/tags-creator/tags-creator.component.spec.ts

@@ -386,13 +386,6 @@ describe('TagsCreatorComponent', () => {
                 expect(getFirstError()).toBe('TAG.TAGS_CREATOR.ERRORS.ALREADY_ADDED_TAG');
             }));
 
-            it('should not show error for required if tags are changed', fakeAsync(() => {
-                typeTag('');
-                component.tags = ['new tag 1', 'new tag 2'];
-                fixture.detectChanges();
-                expect(getFirstError()).toBeUndefined();
-            }));
-
             it('should show error when duplicated already existing tag', fakeAsync(() => {
                 const tag = 'Some tag';