LIBDRUM-872. Back-port DSpace 8.0 fix for admin sidebar text cutoff

The following is an adaption of the DSpace 8.0 fix in the following
pull requests for use in DSpace 7.6.2:

* DSpace#2976
* DSpace#3004

The basic change is the same (detecting the browser and applying a
particular CSS change for Firefox), but the files that are modified
are different, due to changes in DSpace 8.0.

https://umd-dit.atlassian.net/browse/LIBDRUM-872

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

@@ -12,7 +12,13 @@
     <div class="sidebar-fixed-element-wrapper" data-test="sidebar-section-icon" aria-hidden="true">
       <i class="fas fa-{{section.icon}} fa-fw"></i>
     </div>
-    <div class="sidebar-collapsible-element-outer-wrapper">
+    <!-- UMD Customization -->
+    <!--
+        Adaption of DSpace 8.0 fix from https://github.com/DSpace/dspace-angular/pull/2976
+        This customization should be removed when upgrading to DSpace 8.0 or later
+    -->
+    <div class="sidebar-collapsible-element-outer-wrapper" [ngClass]="browserOsClasses.asObservable() | async">
+    <!-- End UMD Customization -->
       <div class="sidebar-collapsible-element-inner-wrapper sidebar-item">
         <span [id]="adminMenuSectionTitleId(section.id)">{{itemModel.text | translate}}</span>
       </div>

src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts

@@ -1,3 +1,10 @@
+// UMD Customization
+// Adaption of DSpace 8.0 fix from https://github.com/DSpace/dspace-angular/pull/2976
+// This customization should be removed when upgrading to DSpace 8.0 or later
+import { NgClass } from '@angular/common';
+import { BehaviorSubject } from 'rxjs';
+import { NativeWindowRef, NativeWindowService } from '../../../core/services/window.service';
+// End UMD Customization
 import { Component, Inject, Injector, OnInit } from '@angular/core';
 import { MenuSectionComponent } from '../../../shared/menu/menu-section/menu-section.component';
 import { MenuService } from '../../../shared/menu/menu.service';
@@ -31,11 +38,22 @@ export class AdminSidebarSectionComponent extends MenuSectionComponent implement
    */
   isDisabled: boolean;
 
+  // UMD Customization
+  // Adaption of DSpace 8.0 fix from https://github.com/DSpace/dspace-angular/pull/2976
+  // This customization should be removed when upgrading to DSpace 8.0 or later
+  browserOsClasses = new BehaviorSubject<string[]>([]);
+  // End UMD Customization
+
   constructor(
     @Inject('sectionDataProvider') menuSection: MenuSection,
     protected menuService: MenuService,
     protected injector: Injector,
     protected router: Router,
+    //  UMD Customization
+    // Adaption of DSpace 8.0 fix from https://github.com/DSpace/dspace-angular/pull/2976
+    // This customization should be removed when upgrading to DSpace 8.0 or later
+    @Inject(NativeWindowService) private _window: NativeWindowRef,
+    // End UMD Customization
   ) {
     super(menuSection, menuService, injector);
     this.itemModel = menuSection.model as LinkMenuItemModel;
@@ -44,6 +62,20 @@ export class AdminSidebarSectionComponent extends MenuSectionComponent implement
   ngOnInit(): void {
     this.isDisabled = this.itemModel?.disabled || isEmpty(this.itemModel?.link);
     super.ngOnInit();
+    //  UMD Customization
+    // Adaption of DSpace 8.0 fix from https://github.com/DSpace/dspace-angular/pull/2976
+    // This customization should be removed when upgrading to DSpace 8.0 or later
+    const browserName = this.getBrowserName();
+    if (browserName) {
+      const browserOsClasses = new Array<string>();
+      browserOsClasses.push(`browser-${browserName}`);
+      const osName = this.getOSName();
+      if (osName) {
+        browserOsClasses.push(`browser-${browserName}-${osName}`);
+      }
+      this.browserOsClasses.next(browserOsClasses);
+    }
+    // End UMD Customization
   }
 
   navigate(event: any): void {
@@ -60,4 +92,27 @@ export class AdminSidebarSectionComponent extends MenuSectionComponent implement
   adminMenuSectionTitleId(sectionId: string) {
     return `admin-menu-section-${sectionId}-title`;
   }
+
+  //  UMD Customization
+  // Adaption of DSpace 8.0 fix from https://github.com/DSpace/dspace-angular/pull/2976
+  // and https://github.com/DSpace/dspace-angular/pull/3004
+  // This customization should be removed when upgrading to DSpace 8.0 or later
+  getBrowserName(): string {
+    const userAgent = this._window.nativeWindow.navigator?.userAgent;
+    if (/Firefox/.test(userAgent)) {
+      return 'firefox';
+    }
+    if (/Safari/.test(userAgent)) {
+      return 'safari';
+    }
+    return undefined;
+  }
+  getOSName(): string {
+    const userAgent = this._window.nativeWindow.navigator?.userAgent;
+    if (/Windows/.test(userAgent)) {
+      return 'windows';
+    }
+    return undefined;
+  }
+  // End UMD Customization
 }

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

@@ -17,7 +17,13 @@
       <div class="sidebar-fixed-element-wrapper">
         <img id="admin-sidebar-logo" src="assets/images/dspace-logo-mini.svg" [alt]="('menu.header.image.logo') | translate" aria-hidden="true">
       </div>
-      <div class="sidebar-collapsible-element-outer-wrapper">
+      <!-- UMD Customization -->
+      <!--
+          Adaption of DSpace 8.0 fix from https://github.com/DSpace/dspace-angular/pull/2976
+          This customization should be removed when upgrading to DSpace 8.0 or later
+      -->
+      <div class="sidebar-collapsible-element-outer-wrapper" [ngClass]="browserOsClasses.asObservable() | async">
+      <!-- End UMD Customization -->
         <div class="sidebar-collapsible-element-inner-wrapper sidebar-item">
           <h4 class="my-1">{{ 'menu.header.admin' | translate }}</h4>
         </div>

src/app/admin/admin-sidebar/admin-sidebar.component.scss

@@ -137,4 +137,19 @@
       }
     }
   }
+
+  // UMD Customization
+  // Adaption of DSpace 8.0 fix from https://github.com/DSpace/dspace-angular/pull/2976
+  // This customization should be removed when upgrading to DSpace 8.0 or later
+  ::ng-deep {
+    // The "browser-firefox" setting was not included in the DSpace 8.0 pull
+    // request, but appears to be necessary for MacOS.
+    .browser-firefox {
+      --ds-dark-scrollbar-width: 20px;
+    }
+    .browser-firefox-windows {
+      --ds-dark-scrollbar-width: 20px;
+    }
+  }
+  // End UMD Customization
 }

src/app/admin/admin-sidebar/admin-sidebar.component.ts

@@ -1,3 +1,10 @@
+// UMD Customization
+// Adaption of DSpace 8.0 fix from https://github.com/DSpace/dspace-angular/pull/2976
+// This customization should be removed when upgrading to DSpace 8.0 or later
+import { NgClass } from '@angular/common';
+import { Inject } from'@angular/core';
+import { NativeWindowRef, NativeWindowService } from '../../core/services/window.service';
+// End UMD Customization
 import { Component, HostListener, Injector, Input, OnInit } from '@angular/core';
 import { BehaviorSubject, combineLatest, Observable } from 'rxjs';
 import { debounceTime, distinctUntilChanged, first, map, withLatestFrom } from 'rxjs/operators';
@@ -62,14 +69,25 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
 
   inFocus$: BehaviorSubject<boolean>;
 
+  // UMD Customization
+  // Adaption of DSpace 8.0 fix from https://github.com/DSpace/dspace-angular/pull/2976
+  // This customization should be removed when upgrading to DSpace 8.0 or later
+  browserOsClasses = new BehaviorSubject<string[]>([]);
+  // End UMD Customization
+
   constructor(
     protected menuService: MenuService,
     protected injector: Injector,
     private variableService: CSSVariableService,
     private authService: AuthService,
     public authorizationService: AuthorizationDataService,
     public route: ActivatedRoute,
-    protected themeService: ThemeService
+    protected themeService: ThemeService,
+    //  UMD Customization
+    // Adaption of DSpace 8.0 fix from https://github.com/DSpace/dspace-angular/pull/2976
+    // This customization should be removed when upgrading to DSpace 8.0 or later
+    @Inject(NativeWindowService) private _window: NativeWindowRef,
+    // End UMD Customization
   ) {
     super(menuService, injector, authorizationService, route, themeService);
     this.inFocus$ = new BehaviorSubject(false);
@@ -80,6 +98,21 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
    */
   ngOnInit(): void {
     super.ngOnInit();
+    //  UMD Customization
+    // Adaption of DSpace 8.0 fix from https://github.com/DSpace/dspace-angular/pull/2976
+    // This customization should be removed when upgrading to DSpace 8.0 or later
+    const browserName = this.getBrowserName();
+    if (browserName) {
+      const browserOsClasses = new Array<string>();
+      browserOsClasses.push(`browser-${browserName}`);
+      const osName = this.getOSName();
+      if (osName) {
+        browserOsClasses.push(`browser-${browserName}-${osName}`);
+      }
+      this.browserOsClasses.next(browserOsClasses);
+    }
+    // End UMD Customization
+
     this.authService.isAuthenticated()
       .subscribe((loggedIn: boolean) => {
         if (loggedIn) {
@@ -164,4 +197,27 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
       this.sidebarOpen = true;
     }
   }
+
+    //  UMD Customization
+    // Adaption of DSpace 8.0 fix from https://github.com/DSpace/dspace-angular/pull/2976
+    // and https://github.com/DSpace/dspace-angular/pull/3004
+    // This customization should be removed when upgrading to DSpace 8.0 or later
+    getBrowserName(): string {
+      const userAgent = this._window.nativeWindow.navigator?.userAgent;
+      if (/Firefox/.test(userAgent)) {
+        return 'firefox';
+      }
+      if (/Safari/.test(userAgent)) {
+        return 'safari';
+      }
+      return undefined;
+    }
+    getOSName(): string {
+      const userAgent = this._window.nativeWindow.navigator?.userAgent;
+      if (/Windows/.test(userAgent)) {
+        return 'windows';
+      }
+      return undefined;
+    }
+    // End UMD Customization
 }

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

@@ -17,7 +17,13 @@
     <div class="sidebar-fixed-element-wrapper" data-test="sidebar-section-icon" aria-hidden="true">
       <i class="fas fa-{{section.icon}} fa-fw"></i>
     </div>
-    <div class="sidebar-collapsible-element-outer-wrapper">
+    <!-- UMD Customization -->
+    <!--
+        Incorporating DSpace 8.0 fix from https://github.com/DSpace/dspace-angular/pull/2976
+        This customization should be removed when upgrading to DSpace 8.0 or later
+    -->
+    <div class="sidebar-collapsible-element-outer-wrapper" [ngClass]="browserOsClasses.asObservable() | async">
+    <!-- End Customization -->
       <div class="sidebar-collapsible-element-inner-wrapper sidebar-item toggler-wrapper">
         <span [id]="adminMenuSectionTitleId(section.id)">
           <ng-container
@@ -31,7 +37,13 @@
   </a>
   <div class="sidebar-section-wrapper subsection" @slide *ngIf="(isExpanded$ | async)">
     <div class="sidebar-fixed-element-wrapper"></div>
-    <div class="sidebar-collapsible-element-outer-wrapper">
+    <!-- UMD Customization -->
+    <!--
+        Incorporating DSpace 8.0 fix from https://github.com/DSpace/dspace-angular/pull/2976
+        This customization should be removed when upgrading to DSpace 8.0 or later
+    -->
+    <div class="sidebar-collapsible-element-outer-wrapper" [ngClass]="browserOsClasses.asObservable() | async">
+    <!-- End Customization -->
       <div class="sidebar-collapsible-element-inner-wrapper">
         <div class="sidebar-sub-level-item-list" role="menu" [id]="adminMenuSectionId(section.id)" [attr.aria-label]="('menu.section.' + section.id) | translate">
           <div class="sidebar-item" *ngFor="let subSection of (subSections$ | async)">

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

@@ -1,3 +1,8 @@
+// UMD Customization
+// Adaption of DSpace 8.0 fix from https://github.com/DSpace/dspace-angular/pull/2976
+// This customization should be removed when upgrading to DSpace 8.0 or later
+import { NativeWindowRef, NativeWindowService } from '../../../core/services/window.service';
+// End UMD Customization
 import { Component, Inject, Injector, OnInit } from '@angular/core';
 import { rotate } from '../../../shared/animations/rotate';
 import { AdminSidebarSectionComponent } from '../admin-sidebar-section/admin-sidebar-section.component';
@@ -55,8 +60,17 @@ export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionC
     private variableService: CSSVariableService,
     protected injector: Injector,
     protected router: Router,
+    //  UMD Customization
+    // Adaption of DSpace 8.0 fix from https://github.com/DSpace/dspace-angular/pull/2976
+    // This customization should be removed when upgrading to DSpace 8.0 or later
+    @Inject(NativeWindowService) _window: NativeWindowRef,
+    // End UMD Customization
   ) {
-    super(menuSection, menuService, injector, router);
+    //  UMD Customization
+    // Adaption of DSpace 8.0 fix from https://github.com/DSpace/dspace-angular/pull/2976
+    // This customization should be removed when upgrading to DSpace 8.0 or later
+    super(menuSection, menuService, injector, router, _window);
+    // End UMD Customization
   }
 
   /**