Migrate from NgbTabset to NgbNav (from ng-bootstrap)

[Bill Erickson]

Evergreen post-3.8

ng-bootstrap has deprecated its Tabset component. It will be removed entirely as of version 8.0:

https://ng-bootstrap.github.io/#/components/tabset/examples

We still use this component in a handful of Angular components. Until we replace them, we cannot upgrade ng-bootstrap past version 7. (Current version is 10.0. Version 11.0 introduces Bootstrap 5.0 support).

The tabset component can be replaced pretty easily with the Nav component:

https://ng-bootstrap.github.io/#/components/nav/overview

Here's an example of migrating in EG component from Tabset to Nav:

https://git.evergreen-ils.org/?p=Evergreen.git;a=commitdiff;h=af7974253329eb12fc337ef277070076a1e6b4bf

In the current EG master code I count 15 instances of Tabset use that will need replacing.

Note that ng-bootstrap version 7 is still compatible with Angular 12 (see bug #1948035).

[Galen Charlton (gmc)]

As of the moment, interfaces that use ngbTab are:

- Acquisitions admin => providers
- Local admin => surveys
- Server admin => org units
- Server admin => permission group tree
- Server admin => print templates
- Booking reservation creation and management
- Booking return
- Authority management
- Staff MARC import/export (display attributes, match sets, queud records)
- Staff catalog record page
- Staff catalog search form

[Jane Sandberg (sandbergja)]

Unassigning myself from this one, but I wanted to note:

When I started on this bug, I was really pining for some regression tests to make sure that I didn't break any functionality in the UI. So, I added some in bug 1989195 specifically for some of these UIs -- merging that one first (or using it as the base for a branch) might make for a more comfortable dev experience on this ticket. The screens tested there are:

- Acquisitions admin => providers
- Authority management
- Staff MARC import/export display attributes
- Server admin => org units

[Andrea Neiman (aneiman)]

Equinox has been contracted by King County Library System to work on this bug.

[Stephanie Leary (stephanieleary)]

I've created a collab branch with my first pass at changing all the navs:
https://git.evergreen-ils.org/?p=working/Evergreen.git;a=shortlog;h=refs/heads/collab/sleary/lp1948693-ngbTabset-to-ngbNav

See the commit message there for a list of screens that need testing.

[Stephanie Leary (stephanieleary)]

After some internal discussion, we've decided it's best not to trust that ng-bootstrap will sort out their ARIA issues anytime soon. I've updated the branch above to remove the automatic [roles] directive, which is currently assigning the wrong roles. Role attributes are now manually set on every tab item:

<ul ngbNav role="tablist">
  <li ngbNavItem role="presentation">
    <a ngbNavLink role="tab"></a>
  </li>
</ul>

We need to change these <a> tags to <button> to be completely correct, but right now the ngbNavLink selector allows only <a>.

[Blake GH (bmagic)]

I've got a test machine with this patch installed:

https://bugsquash.mobiusconsortium.org/eg2/en-US/staff/splash

admin/demo123

Test away! Our checking hasn't revealed any adverse effects.

[Scott Angel (scottangel1)]

So far this is all I've been able to find in Galen's list.
Booking => Manage Reservations Tab has some css margin & padding issues.

[Stephanie Leary (stephanieleary)]

There are a lot more tabs than there used to be, thanks to Acquisitions.

The tab/dropdown combination I mentioned in yesterday's dev meeting is on Circulation => Retrieve Last Patron. This will require some thought on how to present the "Other" options without embedding a dropdown in the tab name. (There's no good way to make this combination keyboard accessible, since pressing Enter on that focused tab can't switch the tab content panel and also trigger the dropdown open.)

Those Manage Reservations inputs do look funky and could use some attention, but they're not affected by this patch as far as I know.

[Blake GH (bmagic)]

I think there is a bug in Server -> Org Units. The sub tabbing under Address, causes all* of the addresses to spill out onto the modal. It appears that this patch is introducing that issue. I'm not seeing it on 3.10.0

[Stephanie Leary (stephanieleary)]

I finally found the bug in the Address tabs under Server > Org Units. I've rebased and squashed my branch.

[Bill Erickson (berick)]

Review and further testing look good. Merged to EG master for 3.11. Thanks Stephanie!