[ACS-5551] Property Panel Design Update

projects/aca-content/assets/app.extensions.json

@@ -1240,6 +1240,18 @@
             "visible": "showInfoSelectionButton"
           }
         },
+        {
+          "id": "app.toolbar.aspects",
+          "order": 160,
+          "title": "APP.ACTIONS.ADD_ASPECTS",
+          "icon": "playlist_add",
+          "actions": {
+            "click": "ASPECT_LIST"
+          },
+          "rules": {
+            "visible": "canEditAspects"
+          }
+        },
         {
           "id": "app.sidebar.expand",
           "order": 200,
@@ -1249,7 +1261,7 @@
             "click": "EXPAND_INFO_DRAWER"
           },
           "rules": {
-            "visible": "app.navigation.isNotLibraries"
+            "visible": "canShowExpand"
           }
         }
       ],

projects/aca-content/assets/i18n/en.json

@@ -259,7 +259,8 @@
             "LEAVE": "Leave Library",
             "EDIT_OFFLINE": "Edit Offline",
             "EDIT_OFFLINE_CANCEL": "Cancel Editing",
-            "CHANGE_ASPECT": "Edit Aspects"
+            "CHANGE_ASPECT": "Edit Aspects",
+            "ADD_ASPECTS": "Add Aspects"
         },
         "DIALOGS": {
             "CONFIRM_PURGE": {
@@ -394,15 +395,16 @@
         },
         "INFO_DRAWER": {
             "TITLE": "Details",
-            "CLOSE": "Close",
+            "REDUCE_PANEL": "Reduce panel",
             "DATA_LOADING": "Data is loading",
+            "ICON": "Node Icon",
             "TABS": {
                 "PROPERTIES": "Properties",
                 "LIBRARY_PROPERTIES": "About",
                 "VERSIONS": "Versions",
                 "COMMENTS": "Comments",
                 "PERMISSIONS": "Permissions",
-                "EXPAND": "Expand"
+                "EXPAND": "Expand panel"
             }
         },
         "TOOLTIPS": {

projects/aca-content/src/lib/aca-content.module.ts

@@ -192,6 +192,7 @@ export class ContentServiceExtensionModule {
       canToggleFavorite: rules.canToggleFavorite,
       isLibraryManager: rules.isLibraryManager,
       canEditAspects: rules.canEditAspects,
+      canShowExpand: rules.canShowExpand,
       canInfoPreview: rules.canInfoPreview,
       showInfoSelectionButton: rules.showInfoSelectionButton,
 

projects/aca-content/src/lib/components/details/details.component.html

@@ -8,18 +8,21 @@
     <div class="acs-details-container">
       <div class="acs-details-title">
         <div class="acs-details-breadcrumb" role="heading" aria-level="2" *ngIf="node">
-          <span class="acs-details-breadcrumb-library"> {{ node.name }} </span>
-          -
-          <span class="acs-details-breadcrumb-item">{{ 'APP.INFO_DRAWER.TITLE' | translate }}</span>
+          <span class="acs-details-breadcrumb-library">
+            <img class="acs-details-breadcrumb-icon" alt="{{ 'APP.INFO_DRAWER.ICON' | translate }}" src="{{ getNodeIcon(node) }}">       
+            {{ node.name }} </span>
+        </div>
+        <div class="acs-details-buttons">
+          <aca-toolbar [items]="aspectActions" info-drawer-buttons></aca-toolbar>
+          <button
+                class="aca-close-details-button"
+                mat-icon-button
+                data-automation-id="close-library"
+                title="{{ 'APP.INFO_DRAWER.REDUCE_PANEL' | translate }}"
+                (click)="goBack()">
+                <mat-icon>fullscreen_exit</mat-icon>
+          </button>
         </div>
-        <button
-          class="aca-close-details-button"
-          mat-icon-button
-          data-automation-id="close-library"
-          title="{{ 'APP.INFO_DRAWER.CLOSE' | translate }}"
-          (click)="goBack()">
-          <mat-icon>fullscreen_exit</mat-icon>
-        </button>
       </div>
 
       <mat-tab-group [selectedIndex]="activeTab" class="aca-details-tabs" animationDuration="0">

projects/aca-content/src/lib/components/details/details.component.scss

@@ -1,19 +1,29 @@
 app-details-manager {
-  .aca-close-details-button {
-    margin-right: 15px;
-    margin-top: 2px;
-    outline: none;
-    border-radius: 4px;
-
-    &:focus {
-      background-color: var(--theme-selected-background-color);
-      outline: 2px solid var(--theme-blue-button-color);
-      border-radius: 4px;
-    }
+  .acs-details-buttons {
+    display: flex;
 
-    &:focus-visible {
-      outline: 2px solid var(--theme-blue-button-color);
+    .aca-close-details-button {
+      margin-right: 15px;
+      margin-top: 12px;
+      outline: none;
       border-radius: 4px;
+
+      &:focus {
+        background-color: var(--theme-selected-background-color);
+        outline: 2px solid var(--theme-blue-button-color);
+        border-radius: 4px;
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--theme-blue-button-color);
+        border-radius: 4px;
+        margin-top: 12px;
+
+        &:focus-visible {
+          outline: 2px solid var(--theme-blue-button-color);
+          border-radius: 4px;
+        }
+      }
     }
   }
 }
@@ -24,34 +34,33 @@ app-details-manager {
 }
 
 .aca-details-tabs {
-  margin-top: 40px;
   height: calc(100% - 80px);
 
   .mat-tab-body-wrapper {
     height: 100%;
   }
-
-  .mat-tab-labels {
-    text-transform: uppercase;
-  }
 }
 
 .acs-details-title {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
+  color: var(--theme-metadata-property-panel-title-color);
+  text-overflow: ellipsis;
+  white-space: normal;
 }
 
 .acs-details-breadcrumb {
-  font-size: 18px;
+  font-size: 20px;
   margin-left: 20px;
 
   .acs-details-breadcrumb-library {
-    font-weight: 900;
+    font-weight: 400;
   }
 
-  .acs-details-breadcrumb-item {
-    font-weight: 100;
+  .acs-details-breadcrumb-icon {
+    display: inline-block;
+    vertical-align: text-bottom;
   }
 }

projects/aca-content/src/lib/components/details/details.component.spec.ts

@@ -26,7 +26,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { AppTestingModule } from '../../testing/app-testing.module';
 import { DetailsComponent } from './details.component';
 import { ActivatedRoute } from '@angular/router';
-import { of, Subject } from 'rxjs';
+import { BehaviorSubject, of, Subject } from 'rxjs';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { ContentApiService } from '@alfresco/aca-shared';
@@ -49,6 +49,47 @@ describe('DetailsComponent', () => {
     select: () => mockStream
   };
 
+  const extensionsServiceMock = {
+    getAllowedSidebarActions: jasmine.createSpy('getAllowedSidebarActions')
+  };
+
+  const mockAspectActions = [];
+
+  const mockObservable = new BehaviorSubject(mockAspectActions);
+  extensionsServiceMock.getAllowedSidebarActions.and.returnValue(mockObservable);
+
+  const mockNode = {
+    isFile: false,
+    createdByUser: { id: 'admin', displayName: 'Administrator' },
+    modifiedAt: new Date('2017-05-24T15:08:55.640Z'),
+    nodeType: 'cm:content',
+    content: {
+      mimeType: 'application/rtf',
+      mimeTypeName: 'Rich Text Format',
+      sizeInBytes: 14530,
+      encoding: 'UTF-8'
+    },
+    parentId: 'd124de26-6ba0-4f40-8d98-4907da2d337a',
+    createdAt: new Date('2017-05-24T15:08:55.640Z'),
+    path: {
+      name: '/Company Home/Guest Home',
+      isComplete: true,
+      elements: [
+        {
+          id: '94acfc73-7014-4475-9bd9-93a2162f0f8c',
+          name: 'Company Home'
+        },
+        { id: 'd124de26-6ba0-4f40-8d98-4907da2d337a', name: 'Guest Home' }
+      ]
+    },
+    isFolder: true,
+    modifiedByUser: { id: 'admin', displayName: 'Administrator' },
+    name: 'b_txt_file.rtf',
+    id: '70e1cc6a-6918-468a-b84a-1048093b06fd',
+    properties: { 'cm:versionLabel': '1.0', 'cm:versionType': 'MAJOR' },
+    allowableOperations: ['delete', 'update']
+  };
+
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [AppTestingModule, DetailsComponent],
@@ -128,4 +169,20 @@ describe('DetailsComponent', () => {
     fixture.detectChanges();
     expect(store.dispatch).toHaveBeenCalledWith(new SetSelectedNodesAction([node]));
   });
+
+  it('should set aspectActions from extensions', () => {
+    extensionsServiceMock.getAllowedSidebarActions.and.returnValue(of(mockAspectActions));
+    fixture.detectChanges();
+    fixture.whenStable().then(() => {
+      expect(component.aspectActions).toEqual(mockAspectActions);
+    });
+  });
+
+  it('should return the icon when getNodeIcon is called', () => {
+    const expectedIcon = 'assets/images/ft_ic_folder';
+    spyOn(component['nodeActionsService'], 'getNodeIcon').and.returnValue(expectedIcon);
+    fixture.detectChanges();
+    const result = component.getNodeIcon(mockNode);
+    expect(result).toContain(expectedIcon);
+  });
 });

projects/aca-content/src/lib/components/details/details.component.ts

@@ -36,6 +36,10 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatButtonModule } from '@angular/material/button';
 import { MetadataTabComponent } from '../info-drawer/metadata-tab/metadata-tab.component';
 import { CommentsTabComponent } from '../info-drawer/comments-tab/comments-tab.component';
+import { takeUntil } from 'rxjs/operators';
+import { ContentActionRef } from '@alfresco/adf-extensions';
+import { NodeActionsService } from '../../services/node-actions.service';
+import { Node } from '@alfresco/js-api';
 
 @Component({
   standalone: true,
@@ -63,8 +67,9 @@ export class DetailsComponent extends PageComponent implements OnInit, OnDestroy
   isLoading: boolean;
   onDestroy$ = new Subject<boolean>();
   activeTab = 1;
+  aspectActions: Array<ContentActionRef> = [];
 
-  constructor(private route: ActivatedRoute, private contentApi: ContentApiService) {
+  constructor(private route: ActivatedRoute, private contentApi: ContentApiService, private nodeActionsService: NodeActionsService) {
     super();
   }
 
@@ -85,6 +90,16 @@ export class DetailsComponent extends PageComponent implements OnInit, OnDestroy
         this.store.dispatch(new SetSelectedNodesAction([{ entry: this.node }]));
       });
     });
+    this.extensions
+      .getAllowedSidebarActions()
+      .pipe(takeUntil(this.onDestroy$))
+      .subscribe((aspectActions) => {
+        this.aspectActions = aspectActions;
+      });
+  }
+
+  getNodeIcon(node: Node): string {
+    return this.nodeActionsService.getNodeIcon(node);
   }
 
   setActiveTab(tabName: string) {

projects/aca-content/src/lib/components/info-drawer/metadata-tab/metadata-tab.component.spec.ts

@@ -256,7 +256,7 @@ describe('MetadataTabComponent', () => {
     });
 
     it('show pass empty when store is in initial state', () => {
-      const initialState = fixture.debugElement.query(By.css('adf-content-metadata-card'));
+      const initialState = fixture.debugElement.query(By.css('adf-content-metadata'));
       expect(initialState.componentInstance.displayAspect).toBeFalsy();
     });
 
@@ -266,7 +266,7 @@ describe('MetadataTabComponent', () => {
         expect(aspect).toBe('EXIF');
       });
       fixture.detectChanges();
-      const initialState = fixture.debugElement.query(By.css('adf-content-metadata-card'));
+      const initialState = fixture.debugElement.query(By.css('adf-content-metadata'));
       expect(initialState.componentInstance.displayAspect).toBe('EXIF');
     });
   });

projects/aca-content/src/lib/components/info-drawer/metadata-tab/metadata-tab.component.ts

@@ -39,27 +39,36 @@ import { Actions, ofType } from '@ngrx/effects';
   imports: [CommonModule, ContentMetadataModule],
   selector: 'app-metadata-tab',
   template: `
-    <adf-content-metadata-card
+    <adf-content-metadata
       [readOnly]="!canUpdateNode"
       [preset]="'custom'"
       [node]="node"
       [displayAspect]="displayAspect$ | async"
+      [displayTags]="true"
+      [displayCategories]="true"
       [(editable)]="editable"
+      [(editableTags)]="editableTags"
+      [(editableCategories)]="editableCategories"
+      [(group)]="group"
     >
-    </adf-content-metadata-card>
+    </adf-content-metadata>
   `,
   encapsulation: ViewEncapsulation.None,
   host: { class: 'app-metadata-tab' }
 })
 export class MetadataTabComponent implements OnInit, OnDestroy {
   protected onDestroy$ = new Subject<boolean>();
-
   @Input()
   node: Node;
 
   displayAspect$: Observable<string>;
   canUpdateNode = false;
   editable = false;
+  editableTags = false;
+  editableCategories = false;
+  group: any = {
+    editable: false
+  };
 
   constructor(
     private permission: NodePermissionService,
@@ -91,6 +100,9 @@ export class MetadataTabComponent implements OnInit, OnDestroy {
         this.checkIfNodeIsUpdatable(updatedNode?.payload.entry);
         if (!this.canUpdateNode) {
           this.editable = false;
+          this.editableTags = false;
+          this.editableCategories = false;
+          this.group.editable = false;
         }
       });
   }