[ACS-5226] Make Categories & Tags View Details Edit consistent (#8826)

* [ACS-5226] hide & clear tags input

* [ACS-5226] added unit test for reseting properties

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

@@ -187,7 +187,8 @@ describe('CategoriesManagementComponent', () => {
                 expect(categoryControlLabel.textContent.trim()).toBe('CATEGORIES_MANAGEMENT.NAME');
             });
 
-            it('should hide category control and existing categories panel on clicking hide button', () => {
+            it('should hide and clear category control and existing categories panel on clicking hide button', fakeAsync(() => {
+                typeCategory('test');
                 const categoryControlHideBtn: HTMLButtonElement = fixture.debugElement.query(By.css('.adf-category-name-field button')).nativeElement;
                 const controlVisibilityChangeSpy = spyOn(component.categoryNameControlVisibleChange, 'emit').and.callThrough();
                 categoryControlHideBtn.click();
@@ -198,7 +199,12 @@ describe('CategoriesManagementComponent', () => {
                 expect(component.categoryNameControlVisible).toBeFalse();
                 expect(component.existingCategoriesPanelVisible).toBeFalse();
                 expect(controlVisibilityChangeSpy).toHaveBeenCalledOnceWith(false);
-            });
+
+                component.categoryNameControlVisible = true;
+                fixture.detectChanges();
+                tick(100);
+                expect(getCategoryControlInput().value).toBe('');
+            }));
         });
 
         describe('Spinner', () => {

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

@@ -89,6 +89,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
              this._existingCategoriesPanelVisible = true;
          } else {
             this._existingCategoriesPanelVisible = false;
+            this.clearCategoryNameInput();
          }
      }
 
@@ -211,6 +212,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
         this.categoryNameControlVisible = false;
         this.categoryNameControlVisibleChange.emit(false);
         this._existingCategoriesPanelVisible = false;
+        this.clearCategoryNameInput();
     }
 
     /**
@@ -222,8 +224,7 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
             const newCat = new Category({ id: newCatName, name: newCatName });
             this.categories.push(newCat);
             this.hideNameInput();
-            this.categoryNameControl.setValue('');
+            this.clearCategoryNameInput();
-            this.categoryNameControl.markAsUntouched();
             this._existingCategories = null;
             this.categoriesChange.emit(this.categories);
         }
@@ -336,4 +337,9 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
     private sortCategoriesList(categoriesList: Category[]) {
         categoriesList.sort((category1, category2) => category1.name.localeCompare(category2.name));
     }
+
+    private clearCategoryNameInput() {
+        this.categoryNameControl.setValue('');
+        this.categoryNameControl.markAsUntouched();
+    }
 }

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

@@ -388,9 +388,11 @@ describe('ContentMetadataComponent', () => {
     });
 
     describe('Reseting', () => {
-        it('should reset changedProperties on reset click', async () => {
+        it('should reset properties on reset click', async () => {
             component.changedProperties = { properties: { 'property-key': 'updated-value' } };
             component.hasMetadataChanged = true;
+            component.tagNameControlVisible = true;
+            component.categoryControlVisible = true;
             component.editable = true;
             const expectedNode = Object.assign({}, node, { name: 'some-modified-value' });
             spyOn(nodesApiService, 'updateNode').and.returnValue(of(expectedNode));
@@ -403,6 +405,9 @@ describe('ContentMetadataComponent', () => {
             fixture.detectChanges();
             expect(component.changedProperties).toEqual({});
             expect(nodesApiService.updateNode).not.toHaveBeenCalled();
+            expect(component.hasMetadataChanged).toBeFalse();
+            expect(component.tagNameControlVisible).toBeFalse();
+            expect(component.categoryControlVisible).toBeFalse();
         });
     });
 

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

@@ -267,6 +267,8 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
     revertChanges() {
         this.changedProperties = {};
         this.hasMetadataChanged = false;
+        this.tagNameControlVisible = false;
+        this.categoryControlVisible = false;
     }
 
     cancelChanges() {

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

@@ -211,7 +211,6 @@ describe('TagsCreatorComponent', () => {
             expect(getAddedTags().length).toBe(0);
         }));
 
-
         it('should remove specific tag after clicking at remove icon', fakeAsync(() => {
             const tag1 = 'Tag 1';
             const tag2 = 'Tag 2';
@@ -266,8 +265,9 @@ describe('TagsCreatorComponent', () => {
             expect(tagNameField.query(By.directive(MatFormField))).toBeTruthy();
         });
 
-        it('should be hidden after clicking button for hiding input', fakeAsync(() => {
+        it('should be hidden and cleared after clicking button for hiding input', fakeAsync(() => {
             component.tagNameControlVisible = true;
+            typeTag('test');
             fixture.detectChanges();
             tick(100);
 
@@ -275,6 +275,12 @@ describe('TagsCreatorComponent', () => {
 
             const tagNameField = fixture.debugElement.query(By.css(tagNameFieldSelector));
             expect(tagNameField).toBeFalsy();
+
+            component.tagNameControlVisible = true;
+            fixture.detectChanges();
+            tick(100);
+
+            expect(getNameInput().value).toBe('');
         }));
 
         it('should input be autofocused', fakeAsync(() => {
@@ -297,6 +303,25 @@ describe('TagsCreatorComponent', () => {
             expect(getNameInput()).toBe(document.activeElement as HTMLInputElement);
         }));
 
+        it('should be hidden and cleared on discard changes', fakeAsync(() => {
+            component.tagNameControlVisible = true;
+            component.tags = ['Passed tag 1', 'Passed tag 2'];
+            typeTag('test');
+            fixture.detectChanges();
+            tick(100);
+            expect(getNameInput().value).toBe('test');
+
+            component.tagNameControlVisible = false;
+            fixture.detectChanges();
+            tick(100);
+            expect(getNameInput()).toBeFalsy();
+
+            component.tagNameControlVisible = true;
+            fixture.detectChanges();
+            tick(100);
+            expect(getNameInput().value).toBe('');
+        }));
+
         describe('Errors', () => {
             function getFirstError(): string {
                 const error = fixture.debugElement.query(By.directive(MatError));

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

@@ -108,6 +108,7 @@ export class TagsCreatorComponent implements OnInit, OnDestroy {
             });
         } else {
             this._existingTagsPanelVisible = false;
+            this.clearTagNameInput();
         }
         this.existingTagsPanelVisibilityChange.emit(this.existingTagsPanelVisible);
     }
@@ -250,6 +251,7 @@ export class TagsCreatorComponent implements OnInit, OnDestroy {
         this._existingTagsPanelVisible = false;
         this.existingTagsPanelVisibilityChange.emit(this.existingTagsPanelVisible);
         this.tagNameControlVisibleChange.emit(this.tagNameControlVisible);
+        this.clearTagNameInput();
     }
 
     /**
@@ -260,9 +262,8 @@ export class TagsCreatorComponent implements OnInit, OnDestroy {
         if (!this._typing && !this.tagNameControl.invalid) {
             this.tags.push(this.tagNameControl.value.trim());
             this.hideNameInput();
-            this.tagNameControl.setValue('');
+            this.clearTagNameInput();
             this.checkScrollbarVisibility();
-            this.tagNameControl.markAsUntouched();
             this.tagsChange.emit(this.tags);
         }
     }
@@ -425,4 +426,9 @@ export class TagsCreatorComponent implements OnInit, OnDestroy {
     private excludeAlreadyAddedTags(tags: TagEntry[]) {
         this._existingTags = tags.filter((tag) => !this.tags.includes(tag.entry.tag));
     }
+
+    private clearTagNameInput() {
+        this.tagNameControl.setValue('');
+        this.tagNameControl.markAsUntouched();
+    }
 }