[ACS-8158] Fixed spacing of tags in ACA (#9808)

* [ACS-8158] Fixed spacing of tags in ACA

* [ACS-8158] Fixed unit tests

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

@@ -100,7 +100,9 @@
                 </adf-content-metadata-header>
             </mat-expansion-panel-header>
             <div *ngIf="currentPanel.panelTitle === DefaultPanels.TAGS && !editing" class="adf-metadata-properties-tags">
-                <span *ngFor="let tag of tags" class="adf-metadata-properties-tag">{{ tag }}</span>
+                <mat-chip-set>
+                    <mat-chip *ngFor="let tag of tags" [disableRipple]="true" data-automation-id="metadata-properties-tag-chip">{{ tag }}</mat-chip>
+                </mat-chip-set>
             </div>
             <div *ngIf="showEmptyTagMessage" class="adf-metadata-no-item-added">
                 {{ 'METADATA.BASIC.NO_TAGS_ADDED' | translate }}

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

@@ -64,17 +64,9 @@ $panel-properties-height: 56px !default;
             color: var(--adf-theme-foreground-text-color-054);
         }
 
-        .adf-metadata-properties-tag {
+        #{$mat-chip} {
-            min-height: 32px;
-            display: inline-flex;
-            align-items: center;
-            border-radius: 16px;
-            width: fit-content;
             background: var(--adf-metadata-buttons-background-color);
-            padding: 6px 12px;
+            padding: 6px;
-            justify-content: center;
-            margin-left: 8px;
-            overflow-wrap: anywhere;
         }
 
         .adf-metadata-no-item-added {

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

@@ -16,12 +16,22 @@
  */
 
 import { ComponentFixture, discardPeriodicTasks, fakeAsync, flush, TestBed, tick } from '@angular/core/testing';
-import { DebugElement, SimpleChange } from '@angular/core';
+import { SimpleChange } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { Category, CategoryPaging, ClassesApi, Node, Tag, TagBody, TagEntry, TagPaging, TagPagingList } from '@alfresco/js-api';
 import { ContentMetadataComponent } from './content-metadata.component';
 import { ContentMetadataService } from '../../services/content-metadata.service';
-import { AppConfigService, AuthModule, CardViewBaseItemModel, CardViewComponent, NotificationService, PipeModule, TranslationMock, TranslationService, UpdateNotification } from '@alfresco/adf-core';
+import {
+    AppConfigService,
+    AuthModule,
+    CardViewBaseItemModel,
+    CardViewComponent,
+    NotificationService,
+    PipeModule,
+    TranslationMock,
+    TranslationService,
+    UpdateNotification
+} from '@alfresco/adf-core';
 import { NodesApiService } from '../../../common/services/nodes-api.service';
 import { EMPTY, of, throwError } from 'rxjs';
 import { TranslateModule } from '@ngx-translate/core';
@@ -43,6 +53,8 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
+import { MatChipHarness } from '@angular/material/chips/testing';
 
 describe('ContentMetadataComponent', () => {
     let component: ContentMetadataComponent;
@@ -79,7 +91,16 @@ describe('ContentMetadataComponent', () => {
     const category2 = new Category({ id: 'test2', name: 'testCat2' });
     const categoryPagingResponse: CategoryPaging = { list: { pagination: {}, entries: [{ entry: category1 }, { entry: category2 }] } };
 
-    const findTagElements = (): DebugElement[] => fixture.debugElement.queryAll(By.css('.adf-metadata-properties .adf-metadata-properties-tag'));
+    const findTagElements = async (): Promise<string[]> => {
+        const matChipHarnessList = await TestbedHarnessEnvironment.loader(fixture).getAllHarnesses(
+            MatChipHarness.with({ selector: '[data-automation-id="metadata-properties-tag-chip"]' })
+        );
+        const tags = [];
+        for (const matChip of matChipHarnessList) {
+            tags.push(await matChip.getText());
+        }
+        return tags;
+    };
 
     const findCancelButton = (): HTMLButtonElement => fixture.debugElement.query(By.css('[data-automation-id=reset-metadata]')).nativeElement;
     const findCancelTagsButton = (): HTMLButtonElement =>
@@ -165,7 +186,8 @@ describe('ContentMetadataComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [TranslateModule.forRoot(),
+            imports: [
+                TranslateModule.forRoot(),
                 NoopAnimationsModule,
                 AuthModule.forRoot({ useHash: true }),
                 HttpClientModule,
@@ -173,7 +195,8 @@ describe('ContentMetadataComponent', () => {
                 MatSnackBarModule,
                 MatProgressBarModule,
                 MatTooltipModule,
-                      PipeModule],
+                PipeModule
+            ],
             providers: [
                 { provide: TranslationService, useClass: TranslationMock },
                 {
@@ -286,11 +309,15 @@ describe('ContentMetadataComponent', () => {
         }));
 
         it('should save changedProperties on save click', fakeAsync(() => {
-            getGroupedPropertiesSpy.and.returnValue(of([{
+            getGroupedPropertiesSpy.and.returnValue(
+                of([
+                    {
                         editable: true,
                         title: 'test',
                         properties: []
-            }]));
+                    }
+                ])
+            );
             updateService.itemUpdated$.next({
                 changed: {}
             } as UpdateNotification);
@@ -375,7 +402,6 @@ describe('ContentMetadataComponent', () => {
                 sub.unsubscribe();
             });
 
-
             fixture.detectChanges();
             toggleEditModeForGeneralInfo();
             fixture.whenStable().then(() => clickOnGeneralInfoSave());
@@ -471,11 +497,15 @@ describe('ContentMetadataComponent', () => {
 
         beforeEach(() => {
             showErrorSpy = spyOn(notificationService, 'showError').and.stub();
-            getGroupedPropertiesSpy.and.returnValue(of([{
+            getGroupedPropertiesSpy.and.returnValue(
+                of([
+                    {
                         editable: true,
                         title: 'test',
                         properties: []
-            }]));
+                    }
+                ])
+            );
             component.displayCategories = true;
             component.displayTags = true;
             component.ngOnInit();
@@ -623,11 +653,15 @@ describe('ContentMetadataComponent', () => {
         });
 
         it('should reset group edit ability on reset click', () => {
-            getGroupedPropertiesSpy.and.returnValue(of([{
+            getGroupedPropertiesSpy.and.returnValue(
+                of([
+                    {
                         editable: true,
                         title: 'test',
                         properties: []
-            }]));
+                    }
+                ])
+            );
             component.ngOnInit();
             component.readOnly = false;
             fixture.detectChanges();
@@ -786,11 +820,15 @@ describe('ContentMetadataComponent', () => {
         });
 
         it('should reload properties for group panel on cancel', () => {
-            getGroupedPropertiesSpy.and.returnValue(of([{
+            getGroupedPropertiesSpy.and.returnValue(
+                of([
+                    {
                         editable: true,
                         title: 'test',
                         properties: []
-            }]));
+                    }
+                ])
+            );
             component.ngOnChanges({ node: new SimpleChange(node, expectedNode, false) });
             component.readOnly = false;
             fixture.detectChanges();
@@ -1204,32 +1242,32 @@ describe('ContentMetadataComponent', () => {
             component.displayTags = true;
         });
 
-        it('should render tags after loading tags in ngOnInit', () => {
+        it('should render tags after loading tags in ngOnInit', async () => {
             spyOn(tagService, 'getTagsByNodeId').and.returnValue(of(tagPaging));
             component.ngOnInit();
             fixture.detectChanges();
 
             expandTagsPanel();
-            const tagElements = findTagElements();
+            const tagElements = await findTagElements();
             expect(tagElements).toHaveSize(2);
-            expect(tagElements[0].nativeElement.textContent).toBe(tagPaging.list.entries[0].entry.tag);
+            expect(tagElements[0]).toBe(tagPaging.list.entries[0].entry.tag);
-            expect(tagElements[1].nativeElement.textContent).toBe(tagPaging.list.entries[1].entry.tag);
+            expect(tagElements[1]).toBe(tagPaging.list.entries[1].entry.tag);
             expect(tagService.getTagsByNodeId).toHaveBeenCalledWith(node.id);
         });
 
-        it('should not render tags after loading tags in ngOnInit if displayTags is false', () => {
+        it('should not render tags after loading tags in ngOnInit if displayTags is false', async () => {
             component.displayTags = false;
             spyOn(tagService, 'getTagsByNodeId').and.returnValue(of(tagPaging));
             component.ngOnInit();
             fixture.detectChanges();
 
             expandTagsPanel();
-            const tagElements = findTagElements();
+            const tagElements = await findTagElements();
             expect(tagElements).toHaveSize(0);
             expect(tagService.getTagsByNodeId).not.toHaveBeenCalled();
         });
 
-        it('should render tags after loading tags in ngOnChanges', () => {
+        it('should render tags after loading tags in ngOnChanges', async () => {
             spyOn(tagService, 'getTagsByNodeId').and.returnValue(of(tagPaging));
 
             component.ngOnChanges({
@@ -1238,14 +1276,14 @@ describe('ContentMetadataComponent', () => {
             fixture.detectChanges();
 
             expandTagsPanel();
-            const tagElements = findTagElements();
+            const tagElements = await findTagElements();
             expect(tagElements).toHaveSize(2);
-            expect(tagElements[0].nativeElement.textContent).toBe(tagPaging.list.entries[0].entry.tag);
+            expect(tagElements[0]).toBe(tagPaging.list.entries[0].entry.tag);
-            expect(tagElements[1].nativeElement.textContent).toBe(tagPaging.list.entries[1].entry.tag);
+            expect(tagElements[1]).toBe(tagPaging.list.entries[1].entry.tag);
             expect(tagService.getTagsByNodeId).toHaveBeenCalledWith(node.id);
         });
 
-        it('should not render tags after loading tags in ngOnChanges if displayTags is false', () => {
+        it('should not render tags after loading tags in ngOnChanges if displayTags is false', async () => {
             component.displayTags = false;
             spyOn(tagService, 'getTagsByNodeId').and.returnValue(of(tagPaging));
             component.ngOnChanges({
@@ -1254,23 +1292,23 @@ describe('ContentMetadataComponent', () => {
 
             expandTagsPanel();
             fixture.detectChanges();
-            const tagElements = findTagElements();
+            const tagElements = await findTagElements();
             expect(tagElements).toHaveSize(0);
             expect(tagService.getTagsByNodeId).not.toHaveBeenCalled();
         });
 
-        it('should not render tags after loading tags in ngOnChanges if node is not changed', () => {
+        it('should not render tags after loading tags in ngOnChanges if node is not changed', async () => {
             spyOn(tagService, 'getTagsByNodeId').and.returnValue(of(tagPaging));
             component.ngOnChanges({});
 
             expandTagsPanel();
             fixture.detectChanges();
-            const tagElements = findTagElements();
+            const tagElements = await findTagElements();
             expect(tagElements).toHaveSize(0);
             expect(tagService.getTagsByNodeId).not.toHaveBeenCalled();
         });
 
-        it('should not render tags after loading tags in ngOnChanges if node is changed first time', () => {
+        it('should not render tags after loading tags in ngOnChanges if node is changed first time', async () => {
             spyOn(tagService, 'getTagsByNodeId').and.returnValue(of(tagPaging));
             component.ngOnChanges({
                 node: new SimpleChange(undefined, node, true)
@@ -1278,12 +1316,12 @@ describe('ContentMetadataComponent', () => {
 
             expandTagsPanel();
             fixture.detectChanges();
-            const tagElements = findTagElements();
+            const tagElements = await findTagElements();
             expect(tagElements).toHaveSize(0);
             expect(tagService.getTagsByNodeId).not.toHaveBeenCalled();
         });
 
-        it('should render tags after loading tags after clicking on Cancel button', fakeAsync(() => {
+        it('should render tags after loading tags after clicking on Cancel button', fakeAsync(async () => {
             component.readOnly = false;
             fixture.detectChanges();
             toggleEditModeForTags();
@@ -1297,14 +1335,14 @@ describe('ContentMetadataComponent', () => {
             fixture.detectChanges();
 
             expandTagsPanel();
-            const tagElements = findTagElements();
+            const tagElements = await findTagElements();
             expect(tagElements).toHaveSize(2);
-            expect(tagElements[0].nativeElement.textContent).toBe(tagPaging.list.entries[0].entry.tag);
+            expect(tagElements[0]).toBe(tagPaging.list.entries[0].entry.tag);
-            expect(tagElements[1].nativeElement.textContent).toBe(tagPaging.list.entries[1].entry.tag);
+            expect(tagElements[1]).toBe(tagPaging.list.entries[1].entry.tag);
             expect(tagService.getTagsByNodeId).toHaveBeenCalledOnceWith(node.id);
         }));
 
-        it('should be hidden when editable is true', () => {
+        it('should be hidden when editable is true', async () => {
             spyOn(tagService, 'getTagsByNodeId').and.returnValue(of(tagPaging));
             component.ngOnInit();
             component.readOnly = false;
@@ -1312,7 +1350,7 @@ describe('ContentMetadataComponent', () => {
 
             toggleEditModeForTags();
             fixture.detectChanges();
-            expect(findTagElements()).toHaveSize(0);
+            expect(await findTagElements()).toHaveSize(0);
         });
     });
 

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

@@ -34,6 +34,8 @@ import { MatListModule } from '@angular/material/list';
 import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatProgressSpinnerHarness } from '@angular/material/progress-spinner/testing';
+import { MatChipOptionHarness } from '@angular/material/chips/testing';
+import { MatChipsModule } from '@angular/material/chips';
 
 describe('TagsCreatorComponent', () => {
     let fixture: ComponentFixture<TagsCreatorComponent>;
@@ -53,6 +55,7 @@ describe('TagsCreatorComponent', () => {
                 MatInputModule,
                 MatProgressSpinnerModule,
                 MatListModule,
+                MatChipsModule,
                 NoopAnimationsModule,
                 ReactiveFormsModule,
                 TranslateModule.forRoot()
@@ -121,9 +124,13 @@ describe('TagsCreatorComponent', () => {
      *
      * @returns list of tags
      */
-    function getAddedTags(): string[] {
+    async function getAddedTags(): Promise<string[]> {
-        const tagElements = fixture.debugElement.queryAll(By.css(`.adf-tags-creation .adf-tags-chip`));
+        const matChipHarness = await loader.getAllHarnesses(MatChipOptionHarness.with({ selector: '.adf-tags-chip' }));
-        return tagElements.map((el) => el.nativeElement.firstChild.nodeValue.trim());
+        const tagElements = [];
+        for (const matChip of matChipHarness) {
+            tagElements.push(await matChip.getText());
+        }
+        return tagElements;
     }
 
     /**
@@ -179,52 +186,52 @@ describe('TagsCreatorComponent', () => {
             expect(message).toBe('TAG.TAGS_CREATOR.NO_TAGS_CREATED');
         });
 
-        it('should display all tags which have been typed in input and accepted using enter', fakeAsync(() => {
+        it('should display all tags which have been typed in input and accepted using enter', fakeAsync(async () => {
             const tag1 = 'Tag 1';
             const tag2 = 'Tag 2';
 
             addTagToAddedList(tag1, true);
             addTagToAddedList(tag2, true);
 
-            const tagElements = getAddedTags();
+            const tagElements = await getAddedTags();
             expect(tagElements.length).toBe(2);
             expect(tagElements[0]).toBe(tag1);
             expect(tagElements[1]).toBe(tag2);
         }));
 
-        it('should display all tags which have been typed in input and accepted by clicking at create label', fakeAsync(() => {
+        it('should display all tags which have been typed in input and accepted by clicking at create label', fakeAsync(async () => {
             const tag1 = 'Tag 1';
             const tag2 = 'Tag 2';
 
             addTagToAddedList(tag1);
             addTagToAddedList(tag2);
 
-            const tagElements = getAddedTags();
+            const tagElements = await getAddedTags();
             expect(tagElements).toEqual([tag1, tag2]);
         }));
 
-        it('should not add tag if contains only spaces', fakeAsync(() => {
+        it('should not add tag if contains only spaces', fakeAsync(async () => {
             addTagToAddedList('  ', true);
 
-            expect(getAddedTags().length).toBe(0);
+            expect((await getAddedTags()).length).toBe(0);
         }));
 
-        it('should not add tag if field is empty', fakeAsync(() => {
+        it('should not add tag if field is empty', fakeAsync(async () => {
             addTagToAddedList('', true);
 
-            expect(getAddedTags().length).toBe(0);
+            expect((await getAddedTags()).length).toBe(0);
         }));
 
-        it('should not duplicate already added tag', fakeAsync(() => {
+        it('should not duplicate already added tag', fakeAsync(async () => {
             const tag = 'Some tag';
 
             addTagToAddedList(tag, true);
             addTagToAddedList(tag, true);
 
-            expect(getAddedTags().length).toBe(1);
+            expect((await getAddedTags()).length).toBe(1);
         }));
 
-        it('should not duplicate already existing tag', fakeAsync(() => {
+        it('should not duplicate already existing tag', fakeAsync(async () => {
             const tag = 'Tag';
 
             spyOn(tagService, 'findTagByName').and.returnValue(
@@ -237,15 +244,15 @@ describe('TagsCreatorComponent', () => {
             );
             addTagToAddedList(tag, true);
 
-            expect(getAddedTags().length).toBe(0);
+            expect((await getAddedTags()).length).toBe(0);
         }));
 
-        it('should not add tag if hit enter during tags loading', fakeAsync(() => {
+        it('should not add tag if hit enter during tags loading', fakeAsync(async () => {
             addTagToAddedList('Tag', true, 0);
-            expect(getAddedTags().length).toBe(0);
+            expect((await getAddedTags()).length).toBe(0);
         }));
 
-        it('should remove specific tag after clicking at remove icon', fakeAsync(() => {
+        it('should remove specific tag after clicking at remove icon', fakeAsync(async () => {
             const tag1 = 'Tag 1';
             const tag2 = 'Tag 2';
 
@@ -257,7 +264,7 @@ describe('TagsCreatorComponent', () => {
             tick();
             fixture.detectChanges();
 
-            const tagElements = getAddedTags();
+            const tagElements = await getAddedTags();
             expect(tagElements).toEqual([tag2]);
         }));
 
@@ -281,10 +288,10 @@ describe('TagsCreatorComponent', () => {
             expect(getRemoveTagButtons()[0].hasAttribute('hidden')).toBeFalse();
         }));
 
-        it('should display tags passed by tags input', () => {
+        it('should display tags passed by tags input', async () => {
             component.tags = ['Passed tag 1', 'Passed tag 2'];
             fixture.detectChanges();
-            expect(getAddedTags()).toEqual(component.tags);
+            expect(await getAddedTags()).toEqual(component.tags);
         });
     });
 
@@ -710,7 +717,7 @@ describe('TagsCreatorComponent', () => {
                 expect(component.isOnlyCreateMode()).toBeFalse();
             }));
 
-            it('should select existing tag when selectionChange event emits', fakeAsync(() => {
+            it('should select existing tag when selectionChange event emits', fakeAsync(async () => {
                 const selectedTag = { entry: { tag: 'tag1' } as any };
                 const leftTag = 'tag2';
                 component.mode = TagsCreatorMode.CREATE_AND_ASSIGN;
@@ -728,7 +735,7 @@ describe('TagsCreatorComponent', () => {
                 component.addExistingTagToTagsToAssign(selectedTag);
                 fixture.detectChanges();
 
-                expect(getAddedTags()).toEqual([selectedTag.entry.tag]);
+                expect(await getAddedTags()).toEqual([selectedTag.entry.tag]);
                 expect(getExistingTags()).toEqual([leftTag]);
             }));
         });