[ACS-5645]Implemented the changes as per the review comments

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

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewEncapsulation } from '@angular/core';
+import { Component, Input, OnChanges, SimpleChanges, ViewEncapsulation } from '@angular/core';
 import { Node } from '@alfresco/js-api';
 import { NodeAspectService } from '../../../aspect-list/services/node-aspect.service';
 import { ContentMetadataCustomPanel, PresetConfig } from '../../interfaces/content-metadata.interfaces';
@@ -84,10 +84,6 @@ export class ContentMetadataCardComponent implements OnChanges {
     @Input()
     customPanels: ContentMetadataCustomPanel[];
 
-    /** Emitted when content's editable state is changed. */
-    @Output()
-    editableChange = new EventEmitter<boolean>();
-
     private _displayDefaultProperties: boolean = true;
 
     /**

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

@@ -18,7 +18,7 @@
                 </div>
                 <button *ngIf="!editable && !readOnly && hasAllowableOperations"
                         mat-icon-button
-                        (click)="toggleGeneralEdit($event)"
+                        (click)="toggleEdit($event, group, buttonType.GeneralInfo)"
                         [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
                         [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate"
                         data-automation-id="meta-data-general-info-edit"
@@ -70,7 +70,7 @@
                     <div class="adf-tags-buttons">
                         <button *ngIf="!editableTags && !readOnly && hasAllowableOperations"
                                 mat-icon-button
-                                (click)="toggleTagsEdit($event)"
+                                (click)="toggleEdit($event, group, buttonType.Tags)"
                                 [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
                                 [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate"
                                 data-automation-id="showing-tag-input-button"
@@ -130,7 +130,7 @@
                     <div class="adf-metadata-categories-title">
                         <button *ngIf="!editableCategories && !readOnly && hasAllowableOperations"
                                 mat-icon-button
-                                (click)="toggleCategoriesEdit($event)"
+                                (click)="toggleEdit($event, group, buttonType.Categories)"
                                 [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
                                 [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate"
                                 data-automation-id="meta-data-card-toggle-categories-edit"
@@ -203,7 +203,7 @@
                                     [attr.aria-label]="'CORE.METADATA.ACCESSIBILITY.EDIT' | translate"
                                     data-automation-id="meta-data-card-toggle-edit"
                                     class="adf-edit-icon-buttons"
-                                    (click)="toggleEdit($event, group)">
+                                    (click)="toggleEdit($event, group, buttonType.Group)">
                                 <mat-icon>mode_edit</mat-icon>
                             </button>
                             <div class="adf-metadata-action-buttons" *ngIf="group.editable">

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

@@ -115,3 +115,8 @@
         box-shadow: none;
     }
 }
+
+.adf-snackbar-message {
+    background-color: var(--adf-snackbar-message-background-color);
+    color: var(--adf-snackbar-message-color);
+}

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

@@ -432,53 +432,59 @@ describe('ContentMetadataComponent', () => {
         }));
     });
 
-    describe('editable', () => {
+    describe('toggleEdit', () => {
-        it('should toggle general editable', () => {
+        let mockEvent: MouseEvent;
-            const eventMock = new MouseEvent('click');
+        let mockGroup: CardViewGroup = {
+            editable: false, expanded: false,
+            title: '',
+            properties: []
+        };
+        beforeEach(() => {
+            mockEvent = new MouseEvent('click');
+            component.editableGroup = mockGroup;
+        });
+    
+        it('should toggle General Info editing mode', () => {
             component.editable = false;
-            component.toggleGeneralEdit(eventMock);
+            component.toggleEdit(mockEvent, mockGroup, ButtonType.GeneralInfo);
-            expect(component.editable).toBe(true);
             expect(component.editableTags).toBe(false);
             expect(component.editableCategories).toBe(false);
+            expect(component.editableGroup.editable).toBe(false);
         });
 
-        it('should toggle tags editable', () => {
+        it('should toggle Tags editing mode', () => {
-            const eventMock = new MouseEvent('click');
             component.editableTags = false;
-            component.toggleTagsEdit(eventMock);
+            component.toggleEdit(mockEvent, mockGroup, ButtonType.Tags);
-            expect(component.editableTags).toBe(true);
+            expect(component.tagsPanelState).toBe(component.editableTags);
             expect(component.tagNameControlVisible).toBe(true);
-            expect(component.tagsPanelState).toBe(true);
-            expect(component.editable).toBe(false);
             expect(component.editableCategories).toBe(false);
+            expect(component.editableGroup.editable).toBe(false);
         });
 
-        it('should toggle categories editable', () => {
+        it('should toggle Categories editing mode', () => {
-            const eventMock = new MouseEvent('click');
             component.editableCategories = false;
-            component.toggleCategoriesEdit(eventMock);
+            component.toggleEdit(mockEvent, mockGroup, ButtonType.Categories);
-            expect(component.editableCategories).toBe(true);
+            expect(component.categoriesPanelState).toBe(component.editableCategories);
             expect(component.categoryControlVisible).toBe(true);
-            expect(component.categoriesPanelState).toBe(true);
-            expect(component.editable).toBe(false);
             expect(component.editableTags).toBe(false);
+            expect(component.editableGroup.editable).toBe(false);
         });
 
-        it('should toggle group editable', () => {
+        it('should toggle Group editing mode', () => {
-            const eventMock = new MouseEvent('click');
+            component.toggleEdit(mockEvent, mockGroup, ButtonType.Group);
-            const group: CardViewGroup = {
-                editable: false, expanded: false,
-                title: '',
-                properties: []
-            };
-            component.editableGroup = null;
-            component.toggleEdit(eventMock, group);
-            expect(group.editable).toBe(true);
-            expect(group.expanded).toBe(true);
-            expect(component.editableGroup).toBe(group);
             expect(component.editable).toBe(false);
-            expect(component.editableTags).toBe(false);
+            expect(component.editableGroup).toBe(mockGroup.editable ? mockGroup : null);
-            expect(component.editableCategories).toBe(false);
+            if (mockGroup.editable) {
+                expect(mockGroup.expanded).toBe(true);
+            }
+        });
+    
+        it('should show Snackbar when Editing Panel is Active', () => {
+            spyOn(component, 'isEditingPanel').and.returnValue(true);
+            spyOn(component, 'showSnackbar');
+            component.toggleEdit(mockEvent, mockGroup, ButtonType.GeneralInfo);
+            expect(component.isEditingPanel).toHaveBeenCalled();
+            expect(component.showSnackbar).toHaveBeenCalledWith('METADATA.BASIC.SNACKBAR_MESSAGE');
         });
     });
 

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

@@ -47,6 +47,7 @@ import { CategoriesManagementMode } from '../../../category/categories-managemen
 import { MatExpansionPanel } from '@angular/material/expansion';
 import { AllowableOperationsEnum, ContentService } from '../../../common';
 import { ButtonType } from './button-type.enum';
+import { MatSnackBar } from '@angular/material/snack-bar';
 
 const DEFAULT_SEPARATOR = ', ';
 
@@ -176,7 +177,8 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
         private tagService: TagService,
         private categoryService: CategoryService,
         private cdr: ChangeDetectorRef,
-        private contentService: ContentService
+        private contentService: ContentService,
+        private snackBar: MatSnackBar
     ) {
         this.copyToClipboardAction = this.appConfig.get<boolean>('content-metadata.copy-to-clipboard-action');
         this.multiValueSeparator = this.appConfig.get<string>('content-metadata.multi-value-pipe-separator') || DEFAULT_SEPARATOR;
@@ -343,59 +345,79 @@ export class ContentMetadataComponent implements OnChanges, OnInit, OnDestroy {
         this.loadProperties(this.node);
     }
 
-    cancelEditChanges() {
+    isEditingPanel(): boolean {
-        this.revertChanges();
+        return (
-        this.loadProperties(this.node);
+            (this.editable && this.hasMetadataChanged) ||
+            (this.editableTags  && this.hasMetadataChanged ) ||
+            (this.editableCategories  && this.hasMetadataChanged) ||
+            ((this.editableGroup && this.editableGroup.editable)  && this.hasMetadataChanged)
+        );
     }
 
-    toggleGeneralEdit(event: MouseEvent): void {
+    showSnackbar(message: string): void {
-        event.stopPropagation();
+        this.snackBar.open(message, '', {
-        this.editable = !this.editable;
+            duration: 3000,
-        this.editableChange.emit(this.editable);
+            verticalPosition: 'bottom',
-        this.cancelEditChanges();
+            panelClass: ['adf-snackbar-message']
-        if (this.editable) {
+        });
-            this.panel.open();
+    }
-            this.editableTags = false;
+
-            this.editableCategories = false;
+    toggleEdit(event: MouseEvent, group: CardViewGroup, buttonType: ButtonType): void {
+        if (this.isEditingPanel()) {
+            this.showSnackbar('METADATA.BASIC.SNACKBAR_MESSAGE');
+            return;
         }
-    }
     
-    toggleTagsEdit(event: MouseEvent): void {
         event.stopPropagation();
-        this.editableTags = !this.editableTags;
+    
-        this.tagsPanelState = this.editableTags;
+        switch (buttonType) {
-        this.cancelEditChanges();
+            case ButtonType.GeneralInfo:
-        this.tagNameControlVisible = true;
+                this.editable = !this.editable;
-        if (this.editableTags) {
+                this.panel.open();
-            this.editable = false;
+                this.editableTags = false;
-            this.editableCategories = false;
+                this.editableCategories = false;
+                this.editableGroup.editable = false;
+                break;
+    
+            case ButtonType.Tags:
+                this.editableTags = !this.editableTags;
+                this.tagsPanelState = this.editableTags;
+                this.tagNameControlVisible = true;
+                this.editableGroup.editable = false;
+                break;
+    
+            case ButtonType.Categories:
+                this.editableCategories = !this.editableCategories;
+                this.categoriesPanelState = this.editableCategories;
+                this.categoryControlVisible = true;
+                this.editableGroup.editable = false;
+                break;
+    
+            case ButtonType.Group:
+                if (this.editableGroup && this.editableGroup !== group) {
+                    this.editableGroup.editable = false;
+                }
+                group.editable = !group.editable;
+                this.editableChange.emit(this.editable);
+                this.editableGroup = group.editable ? group : null;
+                if (group.editable) {
+                    group.expanded = true;
+                }
+                break;
+    
+            default:
+                break;
         }
-    }
     
-    toggleCategoriesEdit(event: MouseEvent): void {
+        if (buttonType !== ButtonType.GeneralInfo) {
-        event.stopPropagation();
-        this.cancelEditChanges();
-        this.editableCategories = !this.editableCategories;
-        this.categoriesPanelState = this.editableCategories;
-        this.categoryControlVisible = true;
-        if (this.editableCategories) {
             this.editable = false;
+        }
+    
+        if (buttonType !== ButtonType.Tags) {
             this.editableTags = false;
         }
-    }
     
-    toggleEdit(event: MouseEvent, group: CardViewGroup): void {
+        if (buttonType !== ButtonType.Categories) {
-        event.stopPropagation();
-        if (this.editableGroup && this.editableGroup !== group) {
-            this.editableGroup.editable = false;
-        }
-        group.editable = !group.editable;
-        this.editableChange.emit(this.editable);
-        this.editableGroup = group.editable ? group : null;
-        if (group.editable) {
-            group.expanded = true;
-            this.editable = false;
-            this.editableTags = false;
             this.editableCategories = false;
         }
     }

lib/content-services/src/lib/i18n/en.json

@@ -489,7 +489,8 @@
       "ADD_TAG_TOOLTIP": "Add tag",
       "HEADER_TITLE": "General info",
       "NO_TAGS_ADDED": "There are currently no tags added",
-      "NO_ITEMS_MESSAGE": "There are currently no {{ groupTitle }} added"
+      "NO_ITEMS_MESSAGE": "There are currently no {{ groupTitle }} added",
+      "SNACKBAR_MESSAGE": "Save or discard changes to continue"
     },
     "CONTENT_TYPE": {
       "DIALOG" :{

lib/core/src/lib/styles/_components-variables.scss

@@ -46,7 +46,9 @@
         --adf-identity-user-info-font-size: var(--theme-adf-picture-1-font-size),
         --adf-user-info-container-margin-right: $adf-ref-margin-right,
         --adf-metadata-property-panel-border-color: $adf-metadata-property-panel-border-color,
-        --adf-metadata-buttons-background-color: $adf-metadata-buttons-background-color
+        --adf-metadata-buttons-background-color: $adf-metadata-buttons-background-color,
+        --adf-snackbar-message-background-color: $adf-snackbar-message-background-color,
+        --adf-snackbar-message-color: $adf-snackbar-message-color
     );
 
     // propagates SCSS variables into the CSS variables scope

lib/core/src/lib/styles/_reference-variables.scss

@@ -29,3 +29,5 @@ $adf-ref-line-height: 40px;
 $adf-ref-margin-right: 8px;
 $adf-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12);
 $adf-metadata-buttons-background-color: rgba(33, 33, 33, 0.05);
+$adf-snackbar-message-background-color: #ba1b1b;
+$adf-snackbar-message-color: #f8f8f8