Upgrade to Bootstrap 5 & realign themes (#3506)

* 117631: upgraded bootstrap, ng-bootstrap and installed popper.js

* 117631: SASS to CSS variables

* 117631: Bootstrap 4 to 5 html/css fixes

* 117631: Theming fixes after bootstrap upgrade

* 117631: More theming fixes: accordions, spacing, search components etc

* 117631: Fixed tests

* 117631: Fixed offset issues

* 117631: Fixed contrast ratio issue

* 117631: Fixed variables, removed unnecessary mapping, fixed tables, upgraded to Bootstrap 5.3.3

* 118113: vertical footer deviders

* 118113: remove button shadow

* 118113: old checkboxes

* 118113: Custom icons font-family

* 118113: accordion color

* 118113: table striped customizable background-color

* 118113: revert vertical deviders in footer bs-secondary change

* 118113: modal close button

* 118113: add w-100 to btn-block elements

* 118113: border radius

* 118113: The date selector on the submission page gets squished to the side of its label fix

* 118113: adding margins to dynamic-form-control-containers

* 118113: adding gaps between sections of item submission form

* 118113: icon font-family removed !important

* 118113: removed !important from #legend_dc_date_issued

* 118113: move --bs-border-radius to $bs-border-radius

* 118113: remove new SCSS variable

* 118113: reduce size for Item type labels

* 118113: date picker border - transparent

* 118113: drag-item-container elements on same line

* 118113: specific border color for ds-number-picker buttons

* Simplify variables & styles

* 118627: html files

* Fix new SCSS compile issues, remove yarn.lock

* 118627: remove footer button shadow

* 118627: custom login button radius

* 118627: success button - white text

* 118627: table alternate colors

* Fix ghostly Bootstrap version, again

* Override (ng-)bootstrap versions for @ng-dynamic-forms

* 118627: Feedback - fix login button radius

* 118627: Feedback - fix footer button shadows

* 118627: Feedback - login border radius use $bs-border-radius-lg + change to rem

* 118627: Tooltip issue

* 118627: Metadata white authority badge

* 118627: Align Back button

* 118627: Bitstreams under Item's Metadata issue fix

* 118627: select on edit collection page "arrow icon"

* 118627: fix alignment issues

* 118627: fix admin sidebar "Managment" label

* 118627: Feedback - login button

* 118627: Line above table heads

* 118627: Remove HMTL accordion expandable arrow

* 118627: bitstream table

* 118627: notification "close button"

* 118627: faint border/shadow around the expand buttons on hierarchical browse pages

* 118627: tooltip margin

* 118627: Bootstrap 5 changed the default gutter size to 24px

* 118627: custom-aligning -> custom-alignment

* 118627: lint-fix

* 118627: lint fix

* 118627: e2e Fix with new "btn-close"

* 118627: e2e Fix heading order for access-control-form-container

* 118627: access-control-form-container mr-4 to me-4

* 118627: update mr to me & ml to ms & pr to ps & pl to ps

* 118627: Access Control "Mode" radiobuttons under Text

* 118627: Item submission Publisher select icon positioning

* 118627: resolved merge conflict with main (and npm install)

* 118627: cherrypicking 3553 commits

* Remove unused angular-idle-preload

(cherry picked from commit fef5dd7)

* 118627: npm install - to fix package-lock.json

* 120594: hamberger menu not showing fix

* 120594: big logo header issue

* 120594: remove faint shadow

* 120594: btn-transparent class

* 120594: badge-* to bg-*

* 120594: add padding-right & -left for rounded-pill

* 120594: update test variables to fit the new bootstrap variables

* 120594: add missing rss conditions

* 120594: fix white badges

* 118627: remove shadow on number-picker

* 120594: revert white badge fix

* 120594: re-add dropdown-button in dynamic-lookup-relation-search-tab

* 120594: remove default radio button styling

* 120594: full width radio buttons

* 120594: edit collection page alignment

* 120594: bg -> bg-primary

* 120594: revert to old info color

* 120594: revert media breakpoints

* 120594: recover PR 3227 rss

* 120594: remove login & logout from PR

* 120594: ds-filter input & label gap

* 120594: ds-filter aligning rows

* 120594: remove navbar.module.ts

* 120594: remove item-edit-bitstream.component.html

* 120594: remove item-edit-bitstream-drag-handle.component.html

* 120594: Fix vocabulary-treeview styling

* 120594: Remove unused browse-by-metadata-page.component.html

* 120594: red invalid input label

* 120594: use old link color for number-picker: #1f7293

* 120594: move $theme-colors to sass override

* 120594: spacing for upload icon

* 120594: decrease media-breakpoint-down

* 120594: PR 3227 rss

* 120594: merge in main bootstrap variable mappings

* 120594: restore all mapped variable that have a value

* 120594: fix unset variable item-edit-bitstream-bundle.component.scss

* 120594: old tooltip color

* 120594: edit bitstream render text inline with the icon

* Revert "120594: merge in main bootstrap variable mappings"

This reverts commit 4e61b5f

* 120594: add non-default mapped variables with references

* 120594: add docs in _bootstrap_variables_mapping.scss

* 120594: use bootstrap variables instead of hardcoded values

---------

Co-authored-by: lotte <[email protected]>
Co-authored-by: Yura Bondarenko <[email protected]>
Co-authored-by: Yury Bondarenko <[email protected]>
Co-authored-by: Tim Donohue <[email protected]>

Author: 4 people

cypress/e2e/submission.cy.ts

@@ -217,7 +217,7 @@ describe('New Submission page', () => {
     });
 
     // Close popup window
-    cy.get('ds-dynamic-lookup-relation-modal button.close').click();
+    cy.get('ds-dynamic-lookup-relation-modal button.btn-close').click();
 
     // Back on the form, click the discard button to remove new submission
     // Clicking it will display a confirmation, which we will confirm with another click

package-lock.json

@@ -73,7 +73,9 @@
       "@angular/forms": "^17.3.11"
     },
     "@ng-dynamic-forms/ui-ng-bootstrap": {
-      "ngx-mask": "14.2.4"
+      "ngx-mask": "14.2.4",
+      "@ng-bootstrap/ng-bootstrap": "^12.0.0",
+      "bootstrap": "^5.3"
     },
     "@ngtools/webpack": {
       "@angular/compiler-cli": "^17.3.11",
@@ -110,7 +112,7 @@
     "@angular/ssr": "^17.3.11",
     "@babel/runtime": "7.26.7",
     "@kolkov/ngx-gallery": "^2.0.1",
-    "@ng-bootstrap/ng-bootstrap": "^11.0.0",
+    "@ng-bootstrap/ng-bootstrap": "^12.0.0",
     "@ng-dynamic-forms/core": "^16.0.0",
     "@ng-dynamic-forms/ui-ng-bootstrap": "^16.0.0",
     "@ngrx/effects": "^17.1.1",
@@ -120,7 +122,7 @@
     "@nicky-lenaers/ngx-scroll-to": "^14.0.0",
     "angulartics2": "^12.2.0",
     "axios": "^1.7.9",
-    "bootstrap": "^4.6.1",
+    "bootstrap": "^5.3",
     "cerialize": "0.1.18",
     "cli-progress": "^3.12.0",
     "colors": "^1.4.0",

package.json

@@ -1,19 +1,13 @@
 <ngb-accordion #acc="ngbAccordion" [activeIds]="'browse'">
   <ngb-panel [id]="'browse'">
-    <ng-template ngbPanelHeader>
-      <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle('browse')"
+    <ng-template ngbPanelTitle>
+      <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" (click)="acc.toggle('browse')"
            data-test="browse">
         <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()"
                 [attr.aria-expanded]="acc.isExpanded('browse')"
                 aria-controls="bulk-access-browse-panel-content">
           {{ 'admin.access-control.bulk-access-browse.header' | translate }}
         </button>
-        <div class="text-right d-flex gap-2">
-          <div class="d-flex my-auto">
-            <span *ngIf="acc.isExpanded('browse')" class="fas fa-chevron-up fa-fw"></span>
-            <span *ngIf="!acc.isExpanded('browse')" class="fas fa-chevron-down fa-fw"></span>
-          </div>
-        </div>
       </div>
     </ng-template>
     <ng-template ngbPanelContent>
@@ -22,7 +16,7 @@
           <li [ngbNavItem]="'search'" role="presentation">
             <a ngbNavLink>{{'admin.access-control.bulk-access-browse.search.header' | translate}}</a>
             <ng-template ngbNavContent>
-              <div class="mx-n3">
+              <div class="bulk-access-search">
                 <ds-search [configuration]="'administrativeBulkAccess'"
                                   [selectable]="true"
                                   [selectionConfig]="{ repeatable: true, listId: listId }"
@@ -42,7 +36,7 @@
                 [showPaginator]="false"
                 (prev)="pagePrev()"
                 (next)="pageNext()">
-                <ul *ngIf="(objectsSelected$|async)?.hasSucceeded" class="list-unstyled ml-4">
+              <ul *ngIf="(objectsSelected$|async)?.hasSucceeded" class="list-unstyled ms-4">
                   <li *ngFor='let object of (objectsSelected$|async)?.payload?.page | paginate: { itemsPerPage: (paginationOptions$ | async).pageSize,
                               currentPage: (paginationOptions$ | async).currentPage, totalItems: (objectsSelected$|async)?.payload?.page.length }; let i = index; let last = last '
                       class="mt-4 mb-4 d-flex"

src/app/access-control/bulk-access/browse/bulk-access-browse.component.html

@@ -0,0 +1,4 @@
+.bulk-access-search {
+    margin-right: calc(var(--bs-gutter-x, 1.5rem) / -2);
+    margin-left: calc(var(--bs-gutter-x, 1.5rem) / -2);
+}

src/app/access-control/bulk-access/browse/bulk-access-browse.component.scss

@@ -7,7 +7,7 @@ <h1>{{ 'admin.access-control.bulk-access.title' | translate }}</h1>
   <hr>
 
   <div class="d-flex justify-content-end">
-    <button class="btn btn-outline-primary mr-3" (click)="reset()">
+    <button class="btn btn-outline-primary me-3" (click)="reset()">
       {{ 'access-control-cancel' | translate }}
     </button>
     <button class="btn btn-primary" [dsBtnDisabled]="!canExport()" (click)="submit()">

src/app/access-control/bulk-access/bulk-access.component.html

@@ -1,17 +1,11 @@
 <ngb-accordion #acc="ngbAccordion" [activeIds]="'settings'">
   <ngb-panel [id]="'settings'">
-    <ng-template ngbPanelHeader>
+    <ng-template ngbPanelTitle>
       <div class="w-100 d-flex gap-3 justify-content-between collapse-toggle" ngbPanelToggle (click)="acc.toggle('settings')" data-test="settings">
         <button type="button" class="btn btn-link p-0" (click)="$event.preventDefault()" [attr.aria-expanded]="acc.isExpanded('settings')"
                 aria-controls="bulk-access-settings-panel-content">
           {{ 'admin.access-control.bulk-access-settings.header' | translate }}
         </button>
-        <div class="text-right d-flex gap-2">
-          <div class="d-flex my-auto">
-            <span *ngIf="acc.isExpanded('settings')" class="fas fa-chevron-up fa-fw"></span>
-            <span *ngIf="!acc.isExpanded('settings')" class="fas fa-chevron-down fa-fw"></span>
-          </div>
-        </div>
       </div>
     </ng-template>
     <ng-template ngbPanelContent>

src/app/access-control/bulk-access/settings/bulk-access-settings.component.html

@@ -5,10 +5,10 @@
         <h1 id="header" class="pb-2">{{labelPrefix + 'head' | translate}}</h1>
 
         <div>
-          <button class="mr-auto btn btn-success addEPerson-button"
+          <button class="me-auto btn btn-success addEPerson-button"
                   [routerLink]="'create'">
             <i class="fas fa-plus"></i>
-            <span class="d-none d-sm-inline ml-1">{{labelPrefix + 'button.add' | translate}}</span>
+            <span class="d-none d-sm-inline ms-1">{{labelPrefix + 'button.add' | translate}}</span>
           </button>
         </div>
       </div>
@@ -18,17 +18,17 @@ <h2 id="search" class="border-bottom pb-2">
       </h2>
       <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
         <div>
-          <select name="scope" id="scope" formControlName="scope" class="form-control" aria-label="Search scope">
+            <select name="scope" id="scope" formControlName="scope" class="form-select" aria-label="Search scope">
             <option value="metadata">{{labelPrefix + 'search.scope.metadata' | translate}}</option>
             <option value="email">{{labelPrefix + 'search.scope.email' | translate}}</option>
           </select>
         </div>
-        <div class="flex-grow-1 mr-3 ml-3">
-          <div class="form-group input-group">
+          <div class="flex-grow-1 me-3 ms-3">
+            <div class="mb-3 input-group">
             <input type="text" name="query" id="query" formControlName="query"
                    class="form-control" [attr.aria-label]="labelPrefix + 'search.placeholder' | translate"
                    [placeholder]="(labelPrefix + 'search.placeholder' | translate)">
-            <span class="input-group-append">
+              <span class="input-group-append">
                 <button type="submit" class="search-button btn btn-primary">
                   <i class="fas fa-search"></i> {{ labelPrefix + 'search.button' | translate }}
                 </button>

src/app/access-control/epeople-registry/epeople-registry.component.html

@@ -29,7 +29,7 @@ <h1 class="border-bottom pb-2">{{messagePrefix + '.edit' | translate}}</h1>
             <i class="fa fa-key"></i> {{'admin.access-control.epeople.actions.reset' | translate}}
           </button>
         </div>
-        <div *ngIf="canImpersonate$ | async" between class="btn-group">
+        <div *ngIf="canImpersonate$ | async" between class="btn-group ms-1">
           <button *ngIf="!isImpersonated" class="btn btn-primary" type="button" (click)="impersonate()">
             <i class="fa fa-user-secret"></i> {{'admin.access-control.epeople.actions.impersonate' | translate}}
           </button>

src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html

@@ -75,8 +75,8 @@ <h3 id="search" class="border-bottom pb-2">
   </h3>
 
   <form [formGroup]="searchForm" (ngSubmit)="search(searchForm.value)" class="d-flex justify-content-between">
-    <div class="flex-grow-1 mr-3">
-      <div class="form-group input-group mr-3">
+    <div class="flex-grow-1 me-3">
+      <div class="form-group input-group me-3">
         <input type="text" name="query" id="query" formControlName="query"
                class="form-control" aria-label="Search input">
         <span class="input-group-append">