From 44d594f096fbdfdb1764a509ca399361098c2a9d Mon Sep 17 00:00:00 2001
From: pkundu <priyanka.kundu@hyland.com>
Date: Sat, 9 Sep 2023 12:43:04 +0530
Subject: [PATCH] [ACS-5551]added null checks

---
 projects/aca-content/assets/i18n/en.json      |  1 +
 .../components/details/details.component.html |  2 +-
 .../components/details/details.component.scss |  4 +-
 .../details/details.component.spec.ts         |  6 +--
 .../components/details/details.component.ts   |  4 +-
 .../lib/services/node-actions.service.spec.ts | 12 +++---
 .../src/lib/services/node-actions.service.ts  | 27 ++++++++-----
 .../aca-content/src/lib/ui/application.scss   |  6 +--
 .../ui/overrides/adf-style-fixes.theme.scss   | 19 +++++++++
 .../src/lib/ui/variables/variables.scss       | 18 ++++-----
 .../info-drawer/info-drawer.component.html    |  2 +-
 .../info-drawer/info-drawer.component.spec.ts | 40 +++++++++++++++++++
 .../info-drawer/info-drawer.component.ts      | 12 +++++-
 .../page-layout/page-layout.component.scss    |  2 +-
 14 files changed, 116 insertions(+), 39 deletions(-)

diff --git a/projects/aca-content/assets/i18n/en.json b/projects/aca-content/assets/i18n/en.json
index bab98e67e3..17e036f2e0 100644
--- a/projects/aca-content/assets/i18n/en.json
+++ b/projects/aca-content/assets/i18n/en.json
@@ -396,6 +396,7 @@
             "TITLE": "Details",
             "CLOSE": "Close",
             "DATA_LOADING": "Data is loading",
+            "ICON": "Node Icon",
             "TABS": {
                 "PROPERTIES": "Properties",
                 "LIBRARY_PROPERTIES": "About",
diff --git a/projects/aca-content/src/lib/components/details/details.component.html b/projects/aca-content/src/lib/components/details/details.component.html
index e881ca337c..0a00dd4ee0 100644
--- a/projects/aca-content/src/lib/components/details/details.component.html
+++ b/projects/aca-content/src/lib/components/details/details.component.html
@@ -9,7 +9,7 @@
       <div class="acs-details-title">
         <div class="acs-details-breadcrumb" role="heading" aria-level="2" *ngIf="node">
           <span class="acs-details-breadcrumb-library">
-            <img class="acs-details-breadcrumb-icon" alt="Info Drawer icon" src="{{ getInfoDrawerIcon(node) }}">       
+            <img class="acs-details-breadcrumb-icon" alt="{{ 'APP.INFO_DRAWER.ICON' | translate }}" src="{{ getNodeIcon(node) }}">       
             {{ node.name }} </span>
         </div>
         <button class="aca-close-details-button" mat-icon-button data-automation-id="close-library" title="{{ 'APP.INFO_DRAWER.CLOSE' | translate }}" (click)="goBack()">
diff --git a/projects/aca-content/src/lib/components/details/details.component.scss b/projects/aca-content/src/lib/components/details/details.component.scss
index 398816a44a..84001a0a77 100644
--- a/projects/aca-content/src/lib/components/details/details.component.scss
+++ b/projects/aca-content/src/lib/components/details/details.component.scss
@@ -35,7 +35,9 @@ app-details-manager {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  color: var(--adf-metadata-property-panel-title-color);
+  color: var(--theme-metadata-property-panel-title-color);
+  text-overflow: ellipsis;
+  white-space: normal;
 }
 
 .acs-details-breadcrumb {
diff --git a/projects/aca-content/src/lib/components/details/details.component.spec.ts b/projects/aca-content/src/lib/components/details/details.component.spec.ts
index 7539875135..ae614e6666 100644
--- a/projects/aca-content/src/lib/components/details/details.component.spec.ts
+++ b/projects/aca-content/src/lib/components/details/details.component.spec.ts
@@ -161,11 +161,11 @@ describe('DetailsComponent', () => {
     expect(store.dispatch).toHaveBeenCalledWith(new SetSelectedNodesAction([node]));
   });
 
-  it('should return the icon when getInfoDrawerIcon is called', () => {
+  it('should return the icon when getNodeIcon is called', () => {
     const expectedIcon = 'assets/images/ft_ic_folder';
-    spyOn(component['nodeActionsService'], 'getInfoDrawerIcon').and.returnValue(expectedIcon);
+    spyOn(component['nodeActionsService'], 'getNodeIcon').and.returnValue(expectedIcon);
     fixture.detectChanges();
-    const result = component.getInfoDrawerIcon(mockNode);
+    const result = component.getNodeIcon(mockNode);
     expect(result).toContain(expectedIcon);
   });
 });
diff --git a/projects/aca-content/src/lib/components/details/details.component.ts b/projects/aca-content/src/lib/components/details/details.component.ts
index 6e4bfa828c..f5751c4e5d 100644
--- a/projects/aca-content/src/lib/components/details/details.component.ts
+++ b/projects/aca-content/src/lib/components/details/details.component.ts
@@ -89,8 +89,8 @@ export class DetailsComponent extends PageComponent implements OnInit, OnDestroy
     });
   }
 
-  getInfoDrawerIcon(node: Node): string {
-    return this.nodeActionsService.getInfoDrawerIcon(node);
+  getNodeIcon(node: Node): string {
+    return this.nodeActionsService.getNodeIcon(node);
   }
 
   setActiveTab(tabName: string) {
diff --git a/projects/aca-content/src/lib/services/node-actions.service.spec.ts b/projects/aca-content/src/lib/services/node-actions.service.spec.ts
index ad62b7bbaa..17d5822812 100644
--- a/projects/aca-content/src/lib/services/node-actions.service.spec.ts
+++ b/projects/aca-content/src/lib/services/node-actions.service.spec.ts
@@ -1246,7 +1246,7 @@ describe('NodeActionsService', () => {
       thumbnailService = TestBed.inject(ThumbnailService);
     });
 
-    function testInfoDrawerIcon(iconPath: string, isFoldeType: boolean, isFileType: boolean) {
+    function testNodeIcon(iconPath: string, isFoldeType: boolean, isFileType: boolean) {
       spyOn(thumbnailService, 'getMimeTypeIcon').and.returnValue(iconPath);
       mockNode.isFolder = isFoldeType;
       mockNode.isFile = isFileType;
@@ -1255,23 +1255,23 @@ describe('NodeActionsService', () => {
     }
 
     it('should resolve folder icon', () => {
-      testInfoDrawerIcon('assets/images/ft_ic_folder.svg', true, false);
+      testNodeIcon('assets/images/ft_ic_folder.svg', true, false);
     });
 
     it('should resolve smart folder icon', () => {
-      testInfoDrawerIcon('assets/images/ft_ic_smart_folder.svg', true, false);
+      testNodeIcon('assets/images/ft_ic_smart_folder.svg', true, false);
     });
 
     it('should resolve link folder icon', () => {
-      testInfoDrawerIcon('assets/images/ft_ic_folder_shortcut_link.svg', true, false);
+      testNodeIcon('assets/images/ft_ic_folder_shortcut_link.svg', true, false);
     });
 
     it('should resolve rule folder icon', () => {
-      testInfoDrawerIcon('assets/images/ft_ic_folder_rule.svg', true, false);
+      testNodeIcon('assets/images/ft_ic_folder_rule.svg', true, false);
     });
 
     it('should resolve file icon for content type', () => {
-      testInfoDrawerIcon('assets/images/ft_ic_raster_image.svg', false, true);
+      testNodeIcon('assets/images/ft_ic_raster_image.svg', false, true);
     });
 
     it('should resolve fallback file icon for unknown node', () => {
diff --git a/projects/aca-content/src/lib/services/node-actions.service.ts b/projects/aca-content/src/lib/services/node-actions.service.ts
index 98bb02a071..4fc02d1632 100644
--- a/projects/aca-content/src/lib/services/node-actions.service.ts
+++ b/projects/aca-content/src/lib/services/node-actions.service.ts
@@ -563,12 +563,12 @@ export class NodeActionsService {
     return null;
   }
 
-  getInfoDrawerIcon(node: Node): string {
-    if (node.isFolder) {
+  getNodeIcon(node: Node): string {
+    if (node?.isFolder) {
       return this.getFolderIcon(node);
     }
-    if (node.isFile) {
-      return this.thumbnailService.getMimeTypeIcon(node.content.mimeType);
+    if (node?.isFile) {
+      return this.thumbnailService.getMimeTypeIcon(node?.content?.mimeType);
     }
     return this.thumbnailService.getDefaultMimeTypeIcon();
   }
@@ -586,22 +586,27 @@ export class NodeActionsService {
   }
 
   isSmartFolder(node: Node): boolean {
-    const nodeAspects = this.getNodeAspectNames(node);
-    return nodeAspects.includes('smf:customConfigSmartFolder') || nodeAspects.includes('smf:systemConfigSmartFolder');
+    if (node) {
+      const nodeAspects = this.getNodeAspectNames(node);
+      return nodeAspects?.includes('smf:customConfigSmartFolder') || nodeAspects?.includes('smf:systemConfigSmartFolder');
+    }
+    return false;
   }
 
   isRuleFolder(node: Node): boolean {
-    const nodeAspects = this.getNodeAspectNames(node);
-    return nodeAspects.includes('rule:rules');
+    if (node) {
+      const nodeAspects = this.getNodeAspectNames(node);
+      return nodeAspects?.includes('rule:rules');
+    }
+    return false;
   }
 
   isLinkFolder(node: Node): boolean {
-    const nodeType = node.nodeType;
-    return nodeType === 'app:folderlink';
+    return node?.nodeType === 'app:folderlink';
   }
 
   private getNodeAspectNames(node: Node): string[] {
-    return node.aspectNames ? node.aspectNames : [];
+    return node?.aspectNames || [];
   }
 
   public getNewNameFrom(name: string, baseName?: string) {
diff --git a/projects/aca-content/src/lib/ui/application.scss b/projects/aca-content/src/lib/ui/application.scss
index 2be7581910..bfd057e8ed 100644
--- a/projects/aca-content/src/lib/ui/application.scss
+++ b/projects/aca-content/src/lib/ui/application.scss
@@ -50,9 +50,9 @@ ng-component {
 .aca-sidebar {
   display: block;
   height: 100%;
-  overflow-y: scroll;
-  max-width: 350px;
-  width: 350px;
+  max-width: 368px;
+  width: 368px;
+  border-top: 1px solid var(--theme-metadata-property-panel-border-color);
 }
 
 .aca-page-title {
diff --git a/projects/aca-content/src/lib/ui/overrides/adf-style-fixes.theme.scss b/projects/aca-content/src/lib/ui/overrides/adf-style-fixes.theme.scss
index 5a3514d2dd..1039e74c17 100644
--- a/projects/aca-content/src/lib/ui/overrides/adf-style-fixes.theme.scss
+++ b/projects/aca-content/src/lib/ui/overrides/adf-style-fixes.theme.scss
@@ -12,3 +12,22 @@
     }
   }
 }
+
+.adf-info-drawer-layout-content .app-metadata-tab .adf-metadata-properties .mat-expansion-panel {
+  border: 1px solid var(--theme-metadata-property-panel-border-color);
+  border-radius: 12px;
+  margin: 12px;
+}
+
+.acs-details-container {
+  .mat-tab-body-content {
+    .adf-metadata-properties {
+      .mat-expansion-panel {
+        width: 755px;
+        border: 1px solid var(--theme-metadata-property-panel-border-color);
+        margin: 24px;
+        border-radius: 12px;
+      }
+    }
+  }
+}
diff --git a/projects/aca-content/src/lib/ui/variables/variables.scss b/projects/aca-content/src/lib/ui/variables/variables.scss
index aabe4c658f..0ecb555151 100644
--- a/projects/aca-content/src/lib/ui/variables/variables.scss
+++ b/projects/aca-content/src/lib/ui/variables/variables.scss
@@ -35,10 +35,10 @@ $action-button-text-color: rgba(33, 35, 40, 0.7);
 $page-layout-header-background-color: #fff;
 $search-chip-icon-color: #757575;
 $disabled-chip-background-color: #f5f5f5;
-$adf-metadata-property-panel-border-color: rgba(0, 0, 0, 0.12);
-$adf-metadata-buttons-background-color: rgba(33, 33, 33, 0.05);
-$adf-metadata-property-panel-text-color: rgba(33, 35, 40, 0.7);
-$adf-metadata-property-panel-label-color: rgba(33, 33, 33, 0.24);
+$metadata-property-panel-border-color: rgba(0, 0, 0, 0.12);
+$metadata-buttons-background-color: rgba(33, 33, 33, 0.05);
+$metadata-property-panel-text-color: rgba(33, 35, 40, 0.7);
+$metadata-property-panel-label-color: rgba(33, 33, 33, 0.24);
 
 // CSS Variables
 $defaults: (
@@ -79,11 +79,11 @@ $defaults: (
   --theme-page-layout-header-background-color: $page-layout-header-background-color,
   --theme-search-chip-icon-color: $search-chip-icon-color,
   --theme-disabled-chip-background-color: $disabled-chip-background-color,
-  --adf-metadata-property-panel-border-color: $adf-metadata-property-panel-border-color,
-  --adf-metadata-buttons-background-color: $adf-metadata-buttons-background-color,
-  --adf-metadata-property-panel-title-color: $selected-text-color,
-  --adf-metadata-property-panel-text-color: $adf-metadata-property-panel-text-color,
-  --adf-metadata-property-panel-label-color: $adf-metadata-property-panel-label-color
+  --theme-metadata-property-panel-border-color: $metadata-property-panel-border-color,
+  --theme-metadata-buttons-background-color: $metadata-buttons-background-color,
+  --theme-metadata-property-panel-title-color: $selected-text-color,
+  --theme-metadata-property-panel-text-color: $metadata-property-panel-text-color,
+  --theme-metadata-property-panel-label-color: $metadata-property-panel-label-color
 );
 
 // propagates SCSS variables into the CSS variables scope
diff --git a/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.html b/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.html
index 31de24e212..7b1c8f0595 100644
--- a/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.html
+++ b/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.html
@@ -2,7 +2,7 @@
   <mat-progress-bar mode="indeterminate" [attr.aria-label]="'APP.INFO_DRAWER.DATA_LOADING' | translate"></mat-progress-bar>
 </div>
 <ng-container *ngIf="!isLoading && !!displayNode">
-  <adf-info-drawer [drawerIcon]="node.entry"  [title]="node?.entry ? node.entry.name : 'APP.INFO_DRAWER.TITLE'" cdkTrapFocus cdkTrapFocusAutoCapture>
+  <adf-info-drawer [nodeIcon]="getNodeIcon(node?.entry)" [title]="node?.entry?.name || 'APP.INFO_DRAWER.TITLE'" cdkTrapFocus cdkTrapFocusAutoCapture>
     <aca-toolbar [items]="actions" info-drawer-buttons></aca-toolbar>
     
     <adf-info-drawer-tab *ngFor="let tab of tabs" [icon]="tab.icon" [label]="tab.title">
diff --git a/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.spec.ts b/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.spec.ts
index 7d16fadfa8..fe94ae7f7e 100644
--- a/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.spec.ts
+++ b/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.spec.ts
@@ -57,6 +57,38 @@ describe('InfoDrawerComponent', () => {
       ])
   };
 
+  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: [LibTestingModule, InfoDrawerComponent],
@@ -182,4 +214,12 @@ describe('InfoDrawerComponent', () => {
       } as ContentActionRef
     ]);
   });
+
+  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);
+  });
 });
diff --git a/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.ts b/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.ts
index 70c59e0cb4..8d6cd9e927 100644
--- a/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.ts
+++ b/projects/aca-shared/src/lib/components/info-drawer/info-drawer.component.ts
@@ -37,6 +37,7 @@ import { InfoDrawerModule } from '@alfresco/adf-core';
 import { TranslateModule } from '@ngx-translate/core';
 import { A11yModule } from '@angular/cdk/a11y';
 import { ToolbarComponent } from '../toolbar/toolbar.component';
+import { NodeActionsService } from '../../../../../aca-content/src/lib/services/node-actions.service';
 
 @Component({
   standalone: true,
@@ -64,7 +65,12 @@ export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy {
     this.close();
   }
 
-  constructor(private store: Store<any>, private contentApi: ContentApiService, private extensions: AppExtensionService) {}
+  constructor(
+    private store: Store<any>,
+    private contentApi: ContentApiService,
+    private extensions: AppExtensionService,
+    private nodeActionsService: NodeActionsService
+  ) {}
 
   ngOnInit() {
     this.tabs = this.extensions.getSidebarTabs();
@@ -125,4 +131,8 @@ export class InfoDrawerComponent implements OnChanges, OnInit, OnDestroy {
   private setDisplayNode(node: any) {
     this.displayNode = node;
   }
+
+  getNodeIcon(node: Node): string {
+    return this.nodeActionsService.getNodeIcon(node);
+  }
 }
diff --git a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss
index ff881a2cf9..ff8455e474 100644
--- a/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss
+++ b/projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss
@@ -38,7 +38,7 @@
   .aca-page-layout-content {
     @include flex-row;
 
-    border-top: 1px solid var(--adf-metadata-property-panel-border-color);
+    border-top: 1px solid var(--theme-metadata-property-panel-border-color);
   }
 
   .aca-page-layout-error {