[ACS-5288]Changes to improve user experience by changing navigation (#3219)

* Implemented changes as per requirement

* changes for view profile component

* added unit test cases

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

@@ -432,7 +432,7 @@
             "COLLAPSE_NAVIGATION": "Collapse navigation menu",
             "OPTIONS_SETTINGS": "Options and settings",
             "MY_PROFILE": "My profile",
-            "EXPAND_NAVIGATION": "Expand navigation"
+            "EXPAND_NAVIGATION": "Expand navigation menu"
           }
     },
     "NODE_SELECTOR": {

projects/aca-content/src/lib/components/sidenav/components/expand-menu.component.html

@@ -18,7 +18,7 @@
 
 <ng-container *ngIf="item.children && item.children.length">
   <mat-expansion-panel
-    [expanded]="acaExpansionPanel.hasActiveLinks()"
+    [expanded]="true"
     [acaExpansionPanel]="item"
     #acaExpansionPanel="acaExpansionPanel"
     [@.disabled]="true"

projects/aca-content/src/lib/components/sidenav/user-menu/user-menu.component.html

@@ -1,4 +1,5 @@
-<button mat-button class="aca-user-menu-button" [matMenuTriggerFor]="menu">
+<button mat-button class="aca-user-menu-button" [matMenuTriggerFor]="menu"
+title="{{'APP.TOOLTIPS.OPTIONS_SETTINGS' | translate}}">
   <div>{{ (displayName$ | async)?.initials }}</div>
 </button>
 

projects/aca-content/src/lib/components/view-profile/view-profile.component.html

@@ -1,10 +1,13 @@
 <div class="app-profile-container">
   <div class="app-profile-row">
     <div class="app-profile-title">
+      <button *ngIf="(appNavNarMode$ | async) === 'collapsed'" mat-icon-button (click)="toggleClick()"
+        title="{{'APP.TOOLTIPS.EXPAND_NAVIGATION' | translate}}">
+        <mat-icon>menu</mat-icon>
+      </button>
       <mat-icon class="app-profile-icon" (click)="navigateToPersonalFiles()" id="backButton">arrow_back</mat-icon>
       <h3 class="app-profile">{{'APP.EDIT_PROFILE.MY_PROFILE' | translate}}</h3>
     </div>
-    <mat-divider class="app-mat-divider"></mat-divider>
   </div>
   <div class="app-profile-general-row" [formGroup]="profileForm">
     <div class="app-profile-general">

projects/aca-content/src/lib/components/view-profile/view-profile.component.scss

@@ -1,25 +1,30 @@
 app-view-profile {
-  letter-spacing: .5px;
+  letter-spacing: 0.5px;
 
   .app-profile-container {
-    margin-top: 1rem;
     overflow: scroll;
-    height:100%;
+    height: 100%;
     width: 100%;
   }
 
   .app-profile-row {
     width: 100%;
-    margin: 2rem 0 0;
+    height: 32px;
+    padding: 32px 0;
+    border-bottom: 1px solid var(--theme-header-border-color);
   }
 
   .app-profile-title {
     display: flex;
-    margin-left: 2rem;
+    flex-direction: row;
+    align-items: center;
+    height: 32px;
+    padding: 0 24px;
   }
 
   .app-profile {
     cursor: pointer;
+    margin-top: 1rem;
   }
 
   .app-profile-general-row {
@@ -31,7 +36,6 @@ app-view-profile {
 
   .app-profile-icon {
     margin-right: 1rem;
-    margin-top: 1rem;
     cursor: pointer;
   }
 
@@ -40,7 +44,7 @@ app-view-profile {
   }
 
   .app-profile-text {
-    letter-spacing: .5px;
+    letter-spacing: 0.5px;
   }
 
   .app-profile-general {
@@ -49,7 +53,7 @@ app-view-profile {
   }
 
   .app-profile-general-bottom-radius {
-    border-bottom-left-radius:0;
+    border-bottom-left-radius: 0;
     border-bottom-right-radius: 0;
   }
 
@@ -63,11 +67,11 @@ app-view-profile {
   .app-general-title {
     margin-left: 0.6rem;
     margin-top: 4px;
-    letter-spacing: .5px;
+    letter-spacing: 0.5px;
   }
 
   .app-general-edit-btn {
-    width:60%;
+    width: 60%;
     text-align: end;
   }
 
@@ -81,7 +85,7 @@ app-view-profile {
   .app-selected:focus {
     border: 2px solid var(--theme-blue-button-color) !important;
     border-radius: 6px;
-    outline : none !important;
+    outline: none !important;
     box-shadow: 0 0 2px (--theme-blue-button-color);
   }
 
@@ -98,16 +102,16 @@ app-view-profile {
   .app-general-cancel-btn {
     height: 30px;
     margin: 1rem;
-    margin-left: .5rem;
+    margin-left: 0.5rem;
     background-color: var(--theme-grey-text-background-color);
-    padding-top: .25px;
+    padding-top: 0.25px;
   }
 
   .app-general-save-btn {
     width: 75px;
     height: 30px;
     margin: 1rem;
-    margin-left: .5rem;
+    margin-left: 0.5rem;
     color: white;
     background-color: var(--theme-blue-button-color);
   }
@@ -128,12 +132,12 @@ app-view-profile {
     color: var(--theme-heading-color);
     width: 20%;
     font-weight: 400;
-    letter-spacing: .5px;
+    letter-spacing: 0.5px;
   }
 
   .app-profile-general-dropdown-details {
     margin-top: 1.3rem;
-    letter-spacing: .5px;
+    letter-spacing: 0.5px;
   }
 
   .app-profile-general-dropdown-input-details {
@@ -161,7 +165,7 @@ app-view-profile {
     height: 25px;
     border: none;
     margin-top: 1.3rem;
-    background-color: var(--theme-dropdown-color) ;
+    background-color: var(--theme-dropdown-color);
   }
 
   .app-profile-login-dropdown-heading-forgot {
@@ -183,6 +187,6 @@ app-view-profile {
 
   .app-error-message {
     padding-top: 2rem;
-    padding-left: .5rem;
+    padding-left: 0.5rem;
   }
-}
+}

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

@@ -30,16 +30,28 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 import { MatDividerModule } from '@angular/material/divider';
+import { BehaviorSubject, Subject } from 'rxjs';
+import { AppService } from '@alfresco/aca-shared';
 
 describe('ViewProfileComponent', () => {
   let fixture: ComponentFixture<ViewProfileComponent>;
   let component: ViewProfileComponent;
   let router: Router;
+  const appServiceMock = {
+    toggleAppNavBar$: new Subject(),
+    appNavNarMode$: new BehaviorSubject<'collapsed' | 'expanded'>('expanded')
+  };
 
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [AppTestingModule, AppConfigModule, FormsModule, ReactiveFormsModule, MatDividerModule],
-      declarations: [ViewProfileComponent]
+      declarations: [ViewProfileComponent],
+      providers: [
+        {
+          provide: AppService,
+          useValue: appServiceMock
+        }
+      ]
     });
 
     fixture = TestBed.createComponent(ViewProfileComponent);
@@ -53,6 +65,12 @@ describe('ViewProfileComponent', () => {
     expect(component.contactSectionDropdown).toBe(false);
   });
 
+  it('should toggle the appService toggleAppNavBar$ Subject', () => {
+    spyOn(appServiceMock.toggleAppNavBar$, 'next');
+    component.toggleClick();
+    expect(appServiceMock.toggleAppNavBar$.next).toHaveBeenCalled();
+  });
+
   it('should save button is disabled if form has invalid mobile number', () => {
     component.ngOnInit();
     const profileFormGroup = component.profileForm;

projects/aca-content/src/lib/components/view-profile/view-profile.component.ts

@@ -24,10 +24,12 @@
 
 import { AlfrescoApiService } from '@alfresco/adf-core';
 import { PeopleApi, Person } from '@alfresco/js-api';
-import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core';
 import { FormControl, FormGroup, Validators } from '@angular/forms';
 import { Router } from '@angular/router';
-import { throwError } from 'rxjs';
+import { Observable, Subject, throwError } from 'rxjs';
+import { AppService } from '@alfresco/aca-shared';
+import { takeUntil } from 'rxjs/operators';
 
 @Component({
   selector: 'app-view-profile',
@@ -35,7 +37,7 @@ import { throwError } from 'rxjs';
   styleUrls: ['./view-profile.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
-export class ViewProfileComponent implements OnInit {
+export class ViewProfileComponent implements OnInit, OnDestroy {
   peopleApi: PeopleApi;
 
   profileForm: FormGroup;
@@ -50,9 +52,12 @@ export class ViewProfileComponent implements OnInit {
 
   contactSectionDropdown = false;
   contactSectionButtonsToggle = true;
+  appNavNarMode$: Observable<'collapsed' | 'expanded'>;
+  private onDestroy$ = new Subject<boolean>();
 
-  constructor(private router: Router, apiService: AlfrescoApiService) {
+  constructor(private router: Router, apiService: AlfrescoApiService, private appService: AppService) {
     this.peopleApi = new PeopleApi(apiService.getInstance());
+    this.appNavNarMode$ = appService.appNavNarMode$.pipe(takeUntil(this.onDestroy$));
   }
 
   ngOnInit() {
@@ -68,6 +73,10 @@ export class ViewProfileComponent implements OnInit {
       });
   }
 
+  toggleClick() {
+    this.appService.toggleAppNavBar$.next();
+  }
+
   populateForm(userInfo: Person) {
     this.profileForm = new FormGroup({
       jobTitle: new FormControl(userInfo?.jobTitle || ''),
@@ -188,4 +197,9 @@ export class ViewProfileComponent implements OnInit {
   isSaveButtonDisabled(): boolean {
     return this.profileForm.invalid;
   }
+
+  ngOnDestroy() {
+    this.onDestroy$.next(true);
+    this.onDestroy$.complete();
+  }
 }

projects/aca-shared/src/lib/services/app.service.ts

@@ -63,7 +63,7 @@ export class AppService implements OnDestroy {
   toggleAppNavBar$ = new Subject();
 
   hideSidenavConditions = ['/preview/'];
-  minimizeSidenavConditions = ['search', 'about', 'profile'];
+  minimizeSidenavConditions = ['search'];
 
   onDestroy$ = new Subject<boolean>();