[ACS-5645] Implemented the review comments

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

@@ -30,7 +30,7 @@
             </button>
         </span>
     </div>
-    <p *ngIf="!hasCategory" class="adf-no-categories-message">
+    <p *ngIf="isCategoryEmpty" class="adf-no-categories-message">
         {{ noCategoriesMsg | translate }}
     </p>
 </div>

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

@@ -53,7 +53,6 @@
     }
 
     .adf-no-categories-message {
-        margin-left: 9px;
         margin-top: 28.5px;
         margin-bottom: 0;
         height: 30px;

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

@@ -240,17 +240,12 @@ describe('CategoriesManagementComponent', () => {
             });
         });
 
-        describe('hasCategory', () => {
+        describe('isCategoryEmpty', () => {
-            it('should return true when has categories', () => {
+            it('should return true when categories empty', () => {
-                component.categories = [category3, category4];
-                const result = component.hasCategory;
-                expect(result).toBeTrue();
-            });
-
-            it('should return false when does not have categories', () => {
                 component.categories = [];
-                const result = component.hasCategory;
+                component.categoryNameControlVisible = false;
-                expect(result).toBeFalse();
+                const result = component.isCategoryEmpty;
+                expect(result).toBeTrue();
             });
         });
 

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

@@ -189,10 +189,10 @@ export class CategoriesManagementComponent implements OnInit, OnDestroy {
     }
 
     /*
-     * Returns `true` if has categories, otherwise `false`
+     * Returns `true` if categories empty, otherwise `false`
     */
-    get hasCategory(): boolean {
+    get isCategoryEmpty(): boolean {
-        return this.categories?.length > 0;
+        return this.categories?.length === 0 && !this.categoryNameControlVisible;
     }
 
     get existingCategories(): Category[] {

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

@@ -202,8 +202,10 @@
                                 <mat-icon>
                                     {{ group.expanded ? 'expand_more' : 'chevron_right'}}
                                 </mat-icon>
-                                <mat-panel-title class="adf-metadata-properties-title">
+                                <mat-panel-title class="adf-metadata-properties-title" matTooltip="{{ group.title | translate }}">
-                                    {{ group.title | translate }}
+                                    <p class="adf-metadata-properties-group-title">
+                                        {{ group.title | translate }}
+                                    </p>
                                 </mat-panel-title>
                             </div>
                             <button *ngIf="hasGroupToggleEdit(group)"

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

@@ -1,14 +1,22 @@
 .adf {
     &-metadata-properties {
         mat-expansion-panel-header {
-            height: 56px;
+                height: 56px;
-
+                padding: 0 12px;
-            .adf-metadata-properties-title {
+        
-                font-weight: 700;
+                .adf-metadata-properties-title {
-                font-size: 15px;
+                    font-weight: 700;
-                padding-left: 12px;
+                    font-size: 15px;
+                    padding-left: 12px;
+                }
+        
+                .adf-metadata-properties-group-title {
+                    white-space: nowrap;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    width: 80px;
+                }
             }
-        }
 
         .mat-expansion-panel:not([class*='mat-elevation-z']) {
             box-shadow: none;
@@ -47,7 +55,7 @@
             align-items: center;
             justify-content: center;
             font-size: 15px;
-            padding: 24px;
+            padding-top: 16px;
         }
 
         &-tags {
@@ -118,3 +126,15 @@
         box-shadow: none;
     }
 }
+
+.adf-metadata-grouped-properties-container .mat-content.mat-content-hide-toggle {
+    align-items: center;
+}
+
+.adf-metadata-grouped-properties-container {
+    .mat-expansion-panel {
+        .mat-expansion-panel-body {
+            padding: 0 24px 0px;
+        }
+    }
+}

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

@@ -21,7 +21,7 @@ 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, CardViewBaseItemModel, CardViewComponent, LogService, UpdateNotification } from '@alfresco/adf-core';
+import { AppConfigService, CardViewBaseItemModel, CardViewComponent, LogService, NotificationService, UpdateNotification } from '@alfresco/adf-core';
 import { NodesApiService } from '../../../common/services/nodes-api.service';
 import { EMPTY, of, throwError } from 'rxjs';
 import { ContentTestingModule } from '../../../testing/content.testing.module';
@@ -52,6 +52,7 @@ describe('ContentMetadataComponent', () => {
     let tagService: TagService;
     let categoryService: CategoryService;
     let getClassSpy: jasmine.Spy;
+    let notificationService: NotificationService;
 
     const preset = 'custom-preset';
 
@@ -192,6 +193,7 @@ describe('ContentMetadataComponent', () => {
         nodesApiService = TestBed.inject(NodesApiService);
         tagService = TestBed.inject(TagService);
         categoryService = TestBed.inject(CategoryService);
+        notificationService = TestBed.inject(NotificationService);
         const propertyDescriptorsService = TestBed.inject(PropertyDescriptorsService);
         const classesApi = propertyDescriptorsService['classesApi'];
 
@@ -441,6 +443,7 @@ describe('ContentMetadataComponent', () => {
 
     describe('toggleEdit', () => {
         let mockEvent: MouseEvent;
+        let showErrorSpy: jasmine.Spy;
         const mockGroup: CardViewGroup = {
             editable: false,
             expanded: false,
@@ -450,6 +453,7 @@ describe('ContentMetadataComponent', () => {
         beforeEach(() => {
             mockEvent = new MouseEvent('click');
             component.editableGroup = mockGroup;
+            showErrorSpy = spyOn(notificationService, 'showError').and.stub();
         });
 
         it('should toggle General Info editing mode', () => {
@@ -489,10 +493,10 @@ describe('ContentMetadataComponent', () => {
 
         it('should show Snackbar when Editing Panel is Active', () => {
             spyOn(component, 'isEditingPanel').and.returnValue(true);
-            spyOn(component, 'showSnackbarError');
             component.toggleEdit(mockEvent, mockGroup, ButtonType.GeneralInfo);
             expect(component.isEditingPanel).toHaveBeenCalled();
-            expect(component.showSnackbarError).toHaveBeenCalledWith('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES');
+            expect(showErrorSpy).toHaveBeenCalledWith('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES');
+            
         });
     });
 

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

@@ -374,14 +374,10 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
         );
     }
 
-    showSnackbarError(message: string): void {
-        this.notificationService.showError(message);
-    }
-
     toggleEdit(event: MouseEvent, group: CardViewGroup, buttonType: ButtonType): void {
         event.stopPropagation();
         if (this.isEditingPanel()) {
-            this.showSnackbarError('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES');
+            this.notificationService.showError('METADATA.BASIC.SAVE_OR_DISCARD_CHANGES');
             return;
         }
 
@@ -397,21 +393,18 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
                 this.editableTags = false;
                 this.editableCategories = false;
                 break;
-
             case ButtonType.Tags:
                 this.editableTags = !this.editableTags;
                 this.editableTagsChange.emit(this.editableTags);
                 this.isTagPanelVisible = this.editableTags;
                 this.tagNameControlVisible = true;
                 break;
-
             case ButtonType.Categories:
                 this.editableCategories = !this.editableCategories;
                 this.editableCategoriesChange.emit(this.editableCategories);
                 this.isCategoriesPanelVisible = this.editableCategories;
                 this.categoryControlVisible = true;
                 break;
-
             case ButtonType.Group:
                 group.editable = !group.editable;
                 this.groupChange.emit(group);
@@ -420,7 +413,6 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
                     group.expanded = true;
                 }
                 break;
-
             default:
                 break;
         }

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

@@ -14,16 +14,14 @@
     </div>
     <p
        class="adf-no-tags-message"
-       *ngIf="!hasTags">
+       *ngIf="isTagsEmpty">
         {{ 'TAG.TAGS_CREATOR.NO_TAGS_CREATED' | translate }}
     </p>
     <div
         class="adf-tags-list"
         [class.adf-tags-list-fixed]="!tagNameControlVisible"
         #tagsList>
-        <span
+        <span *ngFor="let tag of tags" class="adf-tag adf-label-with-icon-button">
-        *ngFor="let tag of tags"
-        class="adf-tag adf-label-with-icon-button">
             {{ tag }}
             <button
                 data-automation-id="remove-tag-button"

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

@@ -11,7 +11,6 @@ adf-tags-creator {
         border-radius: 16px;
         padding: 6px 0;
         padding-left: 12px;
-        margin-left: 8px;
 
         .adf-remove-tag {
             line-height: 24px;
@@ -21,7 +20,6 @@ adf-tags-creator {
     }
 
     .adf-no-tags-message {
-        margin-left: 9px;
         margin-top: 28.5px;
         margin-bottom: 0;
         height: 30px;
@@ -55,7 +53,6 @@ adf-tags-creator {
         border-radius: 12px;
         align-items: center;
         display: flex;
-        padding: 0 12px;
 
         .mat-form-field-underline {
             display: none;
@@ -70,7 +67,7 @@ adf-tags-creator {
         color: var(--theme-primary-color);
         cursor: pointer;
         margin-top: -1px;
-        padding-left: 27px;
+        padding-left: 12px;
         overflow-wrap: anywhere;
         display: inline-block;
         padding-right: 12px;
@@ -79,10 +76,13 @@ adf-tags-creator {
 
     .adf-tags-list {
         padding-right: 0;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 8px;
     }
 
     .adf-tag {
-        margin-top: 0;
+        margin-top: 8px;
         overflow-wrap: anywhere;
 
         & + .adf-tag {
@@ -104,7 +104,7 @@ adf-tags-creator {
         }
 
         .adf-tags-list {
-            padding-left: 18px;
+            padding-left: 12px;
             margin-top: -2px;
             padding-right: 0;
             display: flex;
@@ -123,7 +123,7 @@ adf-tags-creator {
                 }
 
                 .mat-list-item-content-reverse {
-                    padding: 0 6px;
+                    padding: 0;
 
                     .mat-pseudo-checkbox {
                         display: none;

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

@@ -337,17 +337,12 @@ describe('TagsCreatorComponent', () => {
             });
         });
 
-        describe('hasTags', () => {
+        describe('isTagsEmpty', () => {
-            it('should return true when has tags', () => {
+            it('should return true when tags empty', () => {
-                component.tags = ['new tag 1', 'new tag 2'];
-                const result = component.hasTags;
-                expect(result).toBeTrue();
-            });
-
-            it('should return false when does not have tags', () => {
                 component.tags = [];
-                const result = component.hasTags;
+                component.tagNameControlVisible = false; 
-                expect(result).toBeFalse();
+                const result = component.isTagsEmpty;
+                expect(result).toBeTrue();
             });
         });
 

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

@@ -227,10 +227,10 @@ export class TagsCreatorComponent implements OnInit, OnDestroy {
     }
 
     /*
-     * Returns `true` if has tags, otherwise `false`
+     * Returns `true` if tags empty, otherwise `false`
     */
-    get hasTags(): boolean {
+    get isTagsEmpty(): boolean {
-        return this.tags?.length > 0;
+        return this.tags.length === 0 && !this.tagNameControlVisible;
     }
 
     get existingTags(): TagEntry[] {