Bootstrap template upgrades

CHANGELOG.md

@@ -55,6 +55,7 @@ If you're upgrading a previous API Umbrella version, you may upgrade the `api-um
 
 - **Route API backend requests directly from Traffic Server:** Routing to API backends has been simplified so it occurs directly from Traffic Server, instead of routing back through an extra nginx hop. This should improve efficiency, simplifies routing, and eliminates DNS-related code. ([#410](https://github.com/NREL/api-umbrella/pull/410))
 - **Admin UI Upgrades:** Upgrade the admin UI project from Ember 2.8 to Ember 3.9 and Bootstrap 3 to Bootstrap 4. This switch also moves all dependencies into NPM instead of Bower, and better uses ES6 syntax throughout the admin UI code. Integration tests have also been switched from PhantomJS to Selenium tests using headless Chrome. ([#429](https://github.com/NREL/api-umbrella/pull/429), [api.data.gov#434](https://github.com/18F/api.data.gov/issues/434))
+- **Bootstrap upgrade:** Bootstrap upgrade for admin UI project from Bootstrap version 4 to 5.3 (02/2026)
 - **Upgrade to GeoIP2 database:** The legacy GeoIP data previously being used has been discontinued, so GeoIP2 is now being used for geo-locating IP addresses. ([8f17dae](https://github.com/NREL/api-umbrella/commit/8f17dae991de7553cb67ee319392bf53c17a5083), [#440](https://github.com/NREL/api-umbrella/issues/440))
 - **Redirect all website content to HTTPS by default:** All website requests now redirect to HTTPS by default. ([b3a8abc](https://github.com/NREL/api-umbrella/commit/b3a8abc81347cbeb274e00f40fcfccea3af1b546), [#407](https://github.com/NREL/api-umbrella/issues/407), [api.data.gov#430](https://github.com/18F/api.data.gov/issues/430))
 - **Improve HTTPS requirements for API requests to error earlier:** When making an insecure API request, return an error about HTTPS being required before the API key requirement error. ([api.data.gov#454](https://github.com/18F/api.data.gov/issues/454))

docs/admin/api.rst

@@ -3,28 +3,28 @@ REST API
 
 .. raw:: html
 
-   <div class="swagger-section">
-     <div id="swagger-ui-container" class="swagger-ui-wrap"></div>
-   </div>
+  <div class="swagger-section">
+    <div id="swagger-ui-container" class="swagger-ui-wrap"></div>
+  </div>
 
-   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/2.1.3/css/screen.min.css" />
-   <script src="https://cdn.rawgit.com/swagger-api/swagger-ui/v2.1.3/dist/lib/jquery-1.8.0.min.js"></script>
-   <script src="https://cdn.rawgit.com/swagger-api/swagger-ui/v2.1.3/dist/lib/jquery.slideto.min.js"></script>
-   <script src="https://cdn.rawgit.com/swagger-api/swagger-ui/v2.1.3/dist/lib/jquery.wiggle.min.js"></script>
-   <script src="https://cdn.rawgit.com/swagger-api/swagger-ui/v2.1.3/dist/lib/jquery.ba-bbq.min.js"></script>
-   <script src="https://cdn.rawgit.com/swagger-api/swagger-ui/v2.1.3/dist/lib/handlebars-2.0.0.js"></script>
-   <script src="https://cdn.rawgit.com/swagger-api/swagger-ui/v2.1.3/dist/lib/underscore-min.js"></script>
-   <script src="https://cdn.rawgit.com/swagger-api/swagger-ui/v2.1.3/dist/lib/backbone-min.js"></script>
-   <script src="https://cdn.rawgit.com/swagger-api/swagger-ui/v2.1.3/dist/swagger-ui.min.js"></script>
-   <script src="https://cdn.rawgit.com/swagger-api/swagger-ui/v2.1.3/dist/lib/highlight.7.3.pack.js"></script>
-   <script src="https://cdn.rawgit.com/swagger-api/swagger-ui/v2.1.3/dist/lib/marked.js"></script>
-   <script src="https://cdn.rawgit.com/swagger-api/swagger-ui/v2.1.3/dist/lib/swagger-oauth.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/2.1.3/css/screen.min.css" />
+  <script src="https://cdn.rawgit.com/swagger-api/swagger-ui/v2.1.3/dist/lib/jquery-1.8.0.min.js"></script>
+  <script src="https://cdn.rawgit.com/swagger-api/swagger-ui/v2.1.3/dist/lib/jquery.slideto.min.js"></script>
+  <script src="https://cdn.rawgit.com/swagger-api/swagger-ui/v2.1.3/dist/lib/jquery.wiggle.min.js"></script>
+  <script src="https://cdn.rawgit.com/swagger-api/swagger-ui/v2.1.3/dist/lib/jquery.ba-bbq.min.js"></script>
+  <script src="https://cdn.rawgit.com/swagger-api/swagger-ui/v2.1.3/dist/lib/handlebars-2.0.0.js"></script>
+  <script src="https://cdn.rawgit.com/swagger-api/swagger-ui/v2.1.3/dist/lib/underscore-min.js"></script>
+  <script src="https://cdn.rawgit.com/swagger-api/swagger-ui/v2.1.3/dist/lib/backbone-min.js"></script>
+  <script src="https://cdn.rawgit.com/swagger-api/swagger-ui/v2.1.3/dist/swagger-ui.min.js"></script>
+  <script src="https://cdn.rawgit.com/swagger-api/swagger-ui/v2.1.3/dist/lib/highlight.7.3.pack.js"></script>
+  <script src="https://cdn.rawgit.com/swagger-api/swagger-ui/v2.1.3/dist/lib/marked.js"></script>
+  <script src="https://cdn.rawgit.com/swagger-api/swagger-ui/v2.1.3/dist/lib/swagger-oauth.js"></script>
 
-   <script type="text/javascript">
-     window.swaggerUi = new SwaggerUi({
-       url: '../../_static/admin-api-swagger.yml',
-       dom_id: 'swagger-ui-container'
-     });
+  <script type="text/javascript">
+    window.swaggerUi = new SwaggerUi({
+      url: '../../_static/admin-api-swagger.yml',
+      dom_id: 'swagger-ui-container'
+    });
 
-     window.swaggerUi.load();
-   </script>
+    window.swaggerUi.load();
+  </script>

src/api-umbrella/admin-ui/app/components/stats/drilldown/results-table.js

@@ -30,13 +30,13 @@ export default class ResultsTable extends Component {
           render: (name, type, data) => {
             if(type === 'display' && name && name !== '-') {
               if(data.terminal) {
-                return '<i class="far fa-file fa-fw mr-1"></i>' + escape(name);
+                return '<i class="far fa-file fa-fw me-1"></i>' + escape(name);
               } else {
                 let params = clone(this.presentQueryParamValues);
                 params.prefix = data.descendent_prefix;
                 let link = '#/stats/drilldown?' + $.param(params);
 
-                return '<a href="' + link + '"><i class="far fa-folder fa-fw mr-1"></i>' + escape(name) + '</a>';
+                return '<a href="' + link + '"><i class="far fa-folder fa-fw me-1"></i>' + escape(name) + '</a>';
               }
             }
 

src/api-umbrella/admin-ui/app/components/stats/logs/results-table.js

@@ -326,7 +326,7 @@ export default class ResultsTable extends Component {
               const tooltipButtonEl = document.createElement('button');
               tooltipButtonEl.className = 'btn btn-link btn-tooltip';
               tooltipButtonEl.type = 'button';
-              tooltipButtonEl.innerHTML = '<i class="fas fa-question-circle"></i><span class="sr-only">Help</span>';
+              tooltipButtonEl.innerHTML = '<i class="fas fa-question-circle"></i><span class="visually-hidden">Help</span>';
 
               tippy(tooltipButtonEl, {
                 trigger: 'click',

src/api-umbrella/admin-ui/app/components/stats/query-form.js

@@ -8,6 +8,7 @@ import { tagName } from '@ember-decorators/component';
 import { observes } from '@ember-decorators/object';
 import Logs from 'api-umbrella-admin-ui/models/stats/logs';
 import { t } from 'api-umbrella-admin-ui/utils/i18n';
+import Popover from 'bootstrap/js/dist/popover'
 import classic from 'ember-classic-decorator';
 import $ from 'jquery';
 import QueryBuilder from 'jQuery-QueryBuilder';
@@ -474,7 +475,30 @@ export default class QueryForm extends Component {
     } else if(this.search) {
       this.send('toggleFilterType', 'advanced');
     }
+
+    const helpTriggerLink = document.querySelector('.lucene-help-link');
+    const helpContent = document.getElementById('query_syntax_help_content');
+
+    if(helpTriggerLink && helpContent) {
+      helpTriggerLink.addEventListener('click', (e) => {
+        e.preventDefault();
+    });
+
+      this.popoverInstance = new Popover(helpTriggerLink, {
+        container: 'body',
+        html: true,
+        content: helpContent.innerHTML,
+        trigger: 'focus',
+    });
   }
+}
+
+willDestroy() {
+  if(this.popoverInstance) {
+    this.popoverInstance.dispose();
+  }
+  super.willDestroy(...arguments);
+}
 
   // eslint-disable-next-line ember/no-observers
   @observes('query')

src/api-umbrella/admin-ui/app/instance-initializers/datatables.js

@@ -1,5 +1,5 @@
 import 'datatables.net';
-import 'datatables.net-bs4';
+import 'datatables.net-bs5';
 
 import $ from 'jquery';
 import merge from 'lodash-es/merge';
@@ -55,7 +55,7 @@ export function initialize(appInstance) {
 
   merge($.fn.DataTable.ext.classes, {
     sFilterInput: 'form-control',
-    sLengthSelect: 'custom-select form-control',
+    sLengthSelect: 'form-select form-control',
   });
 }
 

src/api-umbrella/admin-ui/app/routes/admin-groups/base.js

@@ -5,7 +5,7 @@ export default class BaseRoute extends AuthenticatedRoute {
   setupController(controller, model) {
     controller.set('model', model);
 
-    $('ul.navbar-nav li').removeClass('active');
-    $('ul.navbar-nav li.nav-users').addClass('active');
+    $('ul.navbar-nav a.nav-link').removeClass('active');
+    $('ul.navbar-nav li.nav-users > a.nav-link').addClass('active');
   }
 }

src/api-umbrella/admin-ui/app/routes/admins/base.js

@@ -5,7 +5,9 @@ export default class BaseRoute extends AuthenticatedRoute {
   setupController(controller, model) {
     controller.set('model', model);
 
-    $('ul.navbar-nav li').removeClass('active');
-    $('ul.navbar-nav li.nav-users').addClass('active');
+    $('ul.navbar-nav a.nav-link').removeClass('active');
+    $('ul.navbar-nav li.nav-users > a.nav-link').addClass('active');
   }
 }
+
+

src/api-umbrella/admin-ui/app/routes/api-scopes/base.js

@@ -5,7 +5,7 @@ export default class BaseRoute extends AuthenticatedRoute {
   setupController(controller, model) {
     controller.set('model', model);
 
-    $('ul.navbar-nav li').removeClass('active');
-    $('ul.navbar-nav li.nav-users').addClass('active');
+    $('ul.navbar-nav a.nav-link').removeClass('active');
+    $('ul.navbar-nav li.nav-users > a.nav-link').addClass('active');
   }
 }

src/api-umbrella/admin-ui/app/routes/api-users/base.js

@@ -5,7 +5,7 @@ export default class BaseRoute extends AuthenticatedRoute {
   setupController(controller, model) {
     controller.set('model', model);
 
-    $('ul.navbar-nav li').removeClass('active');
-    $('ul.navbar-nav li.nav-users').addClass('active');
+    $('ul.navbar-nav a.nav-link').removeClass('active');
+    $('ul.navbar-nav li.nav-users > a.nav-link').addClass('active');
   }
 }

src/api-umbrella/admin-ui/app/routes/apis/base.js

@@ -5,7 +5,7 @@ export default class BaseRoute extends AuthenticatedRoute {
   setupController(controller, model) {
     controller.set('model', model);
 
-    $('ul.navbar-nav li').removeClass('active');
-    $('ul.navbar-nav li.nav-config').addClass('active');
+    $('ul.navbar-nav a.nav-link').removeClass('active');
+    $('ul.navbar-nav li.nav-config > a.nav-link').addClass('active');
   }
 }

src/api-umbrella/admin-ui/app/routes/stats/base.js

@@ -16,8 +16,8 @@ export default class BaseRoute extends AuthenticatedRoute {
     controller.set('allQueryParamValues', this.allQueryParamValues || {});
     controller.set('backendQueryParamValues', this.backendQueryParamValues || {});
 
-    $('ul.navbar-nav li').removeClass('active');
-    $('ul.navbar-nav li.nav-analytics').addClass('active');
+    $('ul.navbar-nav a.nav-link').removeClass('active');
+    $('ul.navbar-nav li.nav-analytics > a.nav-link').addClass('active');
   }
 
   beforeModel() {

src/api-umbrella/admin-ui/app/routes/website-backends/base.js

@@ -5,7 +5,7 @@ export default class BaseRoute extends AuthenticatedRoute {
   setupController(controller, model) {
     controller.set('model', model);
 
-    $('ul.navbar-nav li').removeClass('active');
-    $('ul.navbar-nav li.nav-config').addClass('active');
+    $('ul.navbar-nav a.nav-link').removeClass('active');
+    $('ul.navbar-nav li.nav-config > a.nav-link').addClass('active');
   }
 }

src/api-umbrella/admin-ui/app/styles/_base.scss

@@ -155,3 +155,23 @@ a:hover {
 .alert a {
   text-decoration: underline;
 }
+
+.text-decoration-link {
+  text-decoration: none;
+}
+
+.text-decoration-link:hover {
+  text-decoration: underline;
+}
+
+a {
+  text-decoration: none;
+}
+
+a:hover {
+  text-decoration: underline;
+}
+
+.btn-info, .btn:focus-visible {
+  --bs-btn-color: white;
+}

src/api-umbrella/admin-ui/app/styles/_forms.scss

@@ -3,7 +3,6 @@ label {
   margin-bottom: 0.1rem;
 }
 
-.custom-control-label,
 .form-check-label {
   font-weight: normal;
 }
@@ -16,7 +15,8 @@ label {
   padding-top: 0px;
 }
 
-.form-horizontal.condensed .form-group {
+.form-horizontal.condensed .form-group,
+.form-horizontal.condensed .mb-3 {
   margin-bottom: 5px;
 }
 
@@ -28,7 +28,7 @@ fieldset {
 fieldset.collapsible {
   margin-bottom: 12px;
 
-  .collapse.in {
+  .collapse.show {
     margin-bottom: 24px;
   }
 }
@@ -76,6 +76,7 @@ fieldset .table {
   margin-bottom: 4px;
 }
 
+
 .has-error {
   .form-control {
     @extend .is-invalid;
@@ -121,17 +122,17 @@ fieldset .table {
   margin-top: 20px;
 }
 
-.custom-control.custom-control-no-label {
+.form-check.custom-control-no-label {
   display: inline-block;
   padding-left: 1rem;
 
-  .custom-control-label {
+  .form-check-label {
     display: block;
     width: 0px;
   }
 
-  .custom-control-label::before,
-  .custom-control-label::after {
+  .form-check-label::before,
+  .form-check-label::after {
     left: -1rem;
   }
 }
@@ -141,7 +142,7 @@ fieldset .table {
     display: none;
 
     .svg-inline--fa:first-child {
-      @extend .mr-2;
+      @extend .me-2;
     }
   }
 

src/api-umbrella/admin-ui/app/styles/_icons.scss

@@ -1,7 +1,7 @@
 a .svg-inline--fa:first-child {
-  @extend .mr-1;
+  @extend .me-1;
 }
 
-[data-toggle='collapse'].collapsed .fa-caret-down {
+[data-bs-toggle='collapse'].collapsed .fa-caret-down {
   transform: rotate(270deg);
 }

src/api-umbrella/admin-ui/app/styles/_query-builder.scss

@@ -2,7 +2,7 @@
 
 .query-builder {
   .pull-right {
-    float: right !important;
+    @extend .float-end;
   }
 
   .rules-group-container {
@@ -43,9 +43,9 @@
       }
     }
 
-    select.form-control {
-      @extend .custom-select;
-      @extend .custom-select-sm;
+    select.form-select {
+      @extend .form-select;
+      @extend .form-select-sm;
     }
 
     input[type='number'].form-control,

src/api-umbrella/admin-ui/app/styles/_tables.scss

@@ -1,4 +1,4 @@
-@import "node_modules/datatables.net-bs4/css/dataTables.bootstrap4";
+@import "node_modules/datatables.net-bs5/css/dataTables.bootstrap5";
 
 .table-nowrap th,
 .table-nowrap td {
@@ -10,7 +10,7 @@ table.dataTable.table thead .sorting:after,
 table.dataTable.table thead .sorting_asc:before,
 table.dataTable.table thead .sorting_asc:after,
 table.dataTable.table thead .sorting_desc:before,
-table.dataTable.table thead .sorting_desc:after, {
+table.dataTable.table thead .sorting_desc:after {
   display: none;
 }
 
@@ -19,7 +19,7 @@ table.dataTable.table thead .sorting_asc,
 table.dataTable.table thead .sorting_desc {
   .svg-inline--fa.fa-sort,
   .svg-inline--fa.fa-sort-up,
-  .svg-inline--fa.fa-sort-down, {
+  .svg-inline--fa.fa-sort-down {
     color: $gray-500;
     position: absolute;
     right: 0.5rem;
@@ -31,15 +31,15 @@ table.dataTable.table thead .sorting_asc,
 table.dataTable.table thead .sorting_desc {
   .svg-inline--fa.fa-sort,
   .svg-inline--fa.fa-sort-up,
-  .svg-inline--fa.fa-sort-down, {
+  .svg-inline--fa.fa-sort-down {
     color: $link-color;
   }
 }
 
 table.dataTable.table thead .sorting_disabled {
   .svg-inline--fa.fa-sort,
   .svg-inline--fa.fa-sort-up,
-  .svg-inline--fa.fa-sort-down, {
+  .svg-inline--fa.fa-sort-down {
     display: none;
   }
 }

src/api-umbrella/admin-ui/app/templates/admin-groups/index.hbs

@@ -5,7 +5,7 @@
     <LinkTo @route="admin_groups.new" class="btn btn-primary"><FaIcon @icon="plus" /> Add New Admin Group</LinkTo>
   </div>
 {{else}}
-  <div class="alert alert-primary"><a href="{{this.session.data.authenticated.admin_contact_url}}">Contact us</a> to make adminstrator changes.</div>
+  <div class="alert alert-primary" role="alert"><a href="{{this.session.data.authenticated.admin_contact_url}}">Contact us</a> to make adminstrator changes.</div>
 {{/if}}
 
 <AdminGroups::IndexTable />

src/api-umbrella/admin-ui/app/templates/admins/index.hbs

@@ -5,7 +5,7 @@
     <LinkTo @route="admins.new" class="btn btn-primary"><FaIcon @icon="plus" /> Add New Admin</LinkTo>
   </div>
 {{else}}
-  <div class="alert alert-primary"><a href="{{this.session.data.authenticated.admin_contact_url}}">Contact us</a> to make adminstrator changes.</div>
+  <div class="alert alert-primary" role="alert"><a href="{{this.session.data.authenticated.admin_contact_url}}">Contact us</a> to make adminstrator changes.</div>
 {{/if}}
 
 <Admins::IndexTable />