Merge branch 'w2p-94390_replace-dso-page-edit-buttons-with-a-menu_7.2' into w2p-94390_replace-dso-page-edit-buttons-with-a-menu

Author: ybnd

src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html

@@ -7,7 +7,7 @@
      [attr.aria-labelledby]="'sidebarName-' + section.id"
      [attr.aria-expanded]="expanded | async"
      [title]="('menu.section.icon.' + section.id) | translate"
-       [class.disabled]="section.model.disabled"
+       [class.disabled]="section.model?.disabled"
      (click)="toggleSection($event)"
      (keyup.space)="toggleSection($event)"
      (keyup.enter)="toggleSection($event)"

src/app/shared/dso-page/dso-edit-menu.resolver.spec.ts

@@ -16,6 +16,8 @@ import { Item } from '../../core/shared/item.model';
 import { createFailedRemoteDataObject$, createSuccessfulRemoteDataObject$ } from '../remote-data.utils';
 import { MenuID } from '../menu/menu-id.model';
 import { MenuItemType } from '../menu/menu-item-type.model';
+import { TextMenuItemModel } from '../menu/menu-item/models/text.model';
+import { LinkMenuItemModel } from '../menu/menu-item/models/link.model';
 
 describe('DSOEditMenuResolver', () => {
 
@@ -165,7 +167,7 @@ describe('DSOEditMenuResolver', () => {
         expect(menuList[0].active).toEqual(false);
         expect(menuList[0].visible).toEqual(true);
         expect(menuList[0].model.type).toEqual(MenuItemType.ONCLICK);
-        expect(menuList[0].model.text).toEqual('message');
+        expect((menuList[0].model as TextMenuItemModel).text).toEqual('message');
         expect(menuList[0].model.disabled).toEqual(false);
         expect(menuList[0].icon).toEqual('code-branch');
         done();
@@ -180,8 +182,8 @@ describe('DSOEditMenuResolver', () => {
         expect(menuList[0].active).toEqual(false);
         expect(menuList[0].visible).toEqual(true);
         expect(menuList[0].model.type).toEqual(MenuItemType.LINK);
-        expect(menuList[0].model.text).toEqual('item.page.edit');
-        expect(menuList[0].model.link).toEqual('test-url/edit/metadata');
+        expect((menuList[0].model as LinkMenuItemModel).text).toEqual('item.page.edit');
+        expect((menuList[0].model as LinkMenuItemModel).link).toEqual('test-url/edit/metadata');
         expect(menuList[0].icon).toEqual('pencil-alt');
         done();
       });

src/app/shared/dso-page/dso-edit-menu.resolver.ts

@@ -1,5 +1,5 @@
 import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
-import { combineLatest, Observable, of as observableOf } from 'rxjs';
+import { combineLatest, Observable, of, of as observableOf } from 'rxjs';
 import { FeatureID } from '../../core/data/feature-authorization/feature-id';
 import { MenuService } from '../menu/menu.service';
 import { AuthorizationDataService } from '../../core/data/feature-authorization/authorization-data.service';
@@ -17,6 +17,7 @@ import { hasValue } from '../empty.util';
 import { MenuID } from '../menu/menu-id.model';
 import { MenuItemType } from '../menu/menu-item-type.model';
 import { MenuSection } from '../menu/menu-section.model';
+import { TextMenuItemModel } from '../menu/menu-item/models/text.model';
 
 /**
  * Creates the menus for the dspace object pages
@@ -66,7 +67,7 @@ export class DSOEditMenuResolver implements Resolve<{ [key: string]: MenuSection
   /**
    * Return all the menus for a dso based on the route and state
    */
-  getDsoMenus(dso, route, state) {
+  getDsoMenus(dso, route, state): Observable<MenuSection[]>[] {
     return [
       this.getItemMenu(dso),
       this.getCommonMenu(dso, state)
@@ -76,7 +77,7 @@ export class DSOEditMenuResolver implements Resolve<{ [key: string]: MenuSection
   /**
    * Get the common menus between all dspace objects
    */
-  protected getCommonMenu(dso, state): Observable<any[]> {
+  protected getCommonMenu(dso, state): Observable<MenuSection[]> {
     return combineLatest([
       this.authorizationService.isAuthorized(FeatureID.CanEditMetadata, dso.self),
     ]).pipe(
@@ -95,15 +96,14 @@ export class DSOEditMenuResolver implements Resolve<{ [key: string]: MenuSection
             index: 1
           },
         ];
-
       })
     );
   }
 
   /**
    * Get item sepcific menus
    */
-  protected getItemMenu(dso): Observable<any[]> {
+  protected getItemMenu(dso): Observable<MenuSection[]> {
     if (dso instanceof Item) {
       return combineLatest([
         this.authorizationService.isAuthorized(FeatureID.CanCreateVersion, dso.self),

src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.html

@@ -1,14 +1,19 @@
-<div class="dso-button-menu mb-1" ngbDropdown placement="bottom-right">
+<div class="dso-button-menu mb-1" ngbDropdown container="body" placement="bottom-right">
     <div class="d-flex flex-row flex-nowrap"
          [ngbTooltip]="itemModel.text | translate">
-        <button class="btn btn-dark btn-sm" ngbDropdownToggle [disabled]="section.model.disabled">
+        <button class="btn btn-dark btn-sm" ngbDropdownToggle [disabled]="section.model?.disabled">
             <i class="fas fa-{{section.icon}} fa-fw"></i>
         </button>
-        <ul ngbDropdownMenu>
-            <ng-container *ngFor="let subSection of (subSections$ | async)">
+        <ul ngbDropdownMenu class="dso-edit-menu-dropdown">
+            <li class="nav-item nav-link d-flex flex-row" *ngFor="let subSection of (subSections$ | async)">
+                <div *ngIf="renderIcons$ | async" class="mr-2">
+                    <i *ngIf="subSection.icon; else spacer" class="fas fa-{{subSection.icon}} fa-fw"></i>
+                    <ng-template #spacer><i class="fas fa-fw"></i></ng-template>
+                </div>
                 <ng-container
-                        *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;"></ng-container>
-            </ng-container>
+                        *ngComponentOutlet="(sectionMap$ | async).get(subSection.id).component; injector: (sectionMap$ | async).get(subSection.id).injector;">
+                </ng-container>
+            </li>
         </ul>
     </div>
 </div>

src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.scss

@@ -24,3 +24,7 @@ ul.dropdown-menu {
         color: var(--bs-btn-link-disabled-color);
     }
 }
+
+.dso-edit-menu-dropdown {
+  max-width: calc(min(600px, 75vw));
+}

src/app/shared/dso-page/dso-edit-menu/dso-edit-expandable-menu-section/dso-edit-menu-expandable-section.component.ts

@@ -5,6 +5,9 @@ import { MenuService } from '../../../menu/menu.service';
 import { Router } from '@angular/router';
 import { MenuID } from 'src/app/shared/menu/menu-id.model';
 import { MenuSection } from 'src/app/shared/menu/menu-section.model';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { hasValue } from '../../../empty.util';
 
 /**
  * Represents an expandable section in the dso edit menus
@@ -21,6 +24,8 @@ export class DsoEditMenuExpandableSectionComponent extends MenuSectionComponent
   menuID: MenuID = MenuID.DSO_EDIT;
   itemModel;
 
+  renderIcons$: Observable<boolean>;
+
   constructor(
     @Inject('sectionDataProvider') menuSection: MenuSection,
     protected menuService: MenuService,
@@ -34,6 +39,11 @@ export class DsoEditMenuExpandableSectionComponent extends MenuSectionComponent
   ngOnInit(): void {
     this.menuService.activateSection(this.menuID, this.section.id);
     super.ngOnInit();
-  }
 
+    this.renderIcons$ = this.subSections$.pipe(
+      map((sections: MenuSection[]) => {
+        return sections.some(section => hasValue(section.icon));
+      }),
+    );
+  }
 }

src/styles/_global-styles.scss

@@ -186,3 +186,9 @@ ds-dynamic-form-control-container.d-none {
     padding: 0.5rem;
   }
 }
+
+ul.dso-edit-menu-dropdown > li .nav-item.nav-link {
+  // ensure that links in DSO edit menu dropdowns are unstyled (li elements are styled instead to support icons)
+  padding: 0;
+  display: inline;
+}