Update to bootstrap styling from peer review and testing

src/frontend/components/button/_button.scss

@@ -181,7 +181,7 @@
     @extend %icon-font;
 
     content: "\E80a";
-    margin-right: 0.75rem;
+    margin-right: 0.25rem;
     color: $brand-secundary;
     background: $transparent;
     transition: all 0.2s ease;
@@ -196,6 +196,10 @@
     text-decoration: none;
     background: $transparent;
   }
+
+  & span {
+    font-weight: $btn-font-weight !important; // Have to use important here otherwise the card title will override this style.
+  }
 }
 
 .btn-round {

src/frontend/components/data-table/_data-table.scss

@@ -18,6 +18,7 @@
             text-transform: uppercase;
             vertical-align: top;
             box-shadow: none;
+            vertical-align: middle;
 
             &[class*="sorting_asc"],
             &[class*="sorting_desc"] {
@@ -35,6 +36,7 @@
         td {
             padding: 1rem;
             color: $gray-extra-dark;
+            vertical-align: middle;
         }
     }
 
@@ -269,6 +271,7 @@ table.dataTable thead .sorting_disabled {
     display: flex;
     position: relative;
     align-items: flex-start;
+    text-align: start;
 }
 
 // Pagination
@@ -425,39 +428,22 @@ button.btn-add {
     @extend .m-0;
 }
 
-.dt-layout-row {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    margin-bottom: $padding-base-vertical;
+.dt-layout-start:has(.dt-search) {
+    flex-grow: 1;
 
-    &.dt-layout-row--no-padding {
-        padding: 0;
+    label {
+        display: none;
     }
 
-    .dt-start {
-        flex-grow: 1;
-
-        label {
-            display: none;
-        }
+    .dt-search {
+        @extend .pe-2;
+        width: 100%;
 
-        .dt-search {
-            @extend .pe-2;
+        input[type="search"] {
             width: 100%;
-
-            input[type="search"] {
-                width: 100%;
-                @extend .m-0;
-            }
+            @extend .m-0;
         }
     }
-
-    &:has(.dt-start:empty + .dt-end:empty) {
-        display: none;
-    }
 }
 
 .dt-layout-cell:has(table.data-table) {
@@ -467,10 +453,6 @@ button.btn-add {
 .dt-orderable-asc,
 .dt-orderable-desc {
     .data-table__header-wrapper {
-        text-align: center;
-        align-items: center;
-        justify-content: center;
-
         .dt-column-title {
             white-space: nowrap;
         }
@@ -617,3 +599,16 @@ th {
     background-color: rgba(var(--dt-row-hover), 0.075);
     box-shadow: none;
 }
+
+table.dataTable {
+    &.table-search {
+        &>tbody>tr>td {
+            padding-left: 2rem;
+        }
+    }
+
+    // Override default alignment to left for all columns
+    td[class*="dt-type-"] {
+        text-align: left;
+    }
+}

src/frontend/components/data-table/lib/component.js

@@ -55,6 +55,7 @@ class DataTableComponent extends Component {
         }
 
         const conf = this.getConf();
+
         const { columns } = conf;
         this.columns = columns;
         this.el.DataTable(conf);
@@ -90,6 +91,15 @@ class DataTableComponent extends Component {
                 });
             }
         });
+
+        if(conf.responsive) {
+            // Render the child component when the responsive row is shown
+            this.el.on('responsive-display.dt', (e, datatable, row, showHide) => {
+                if(!showHide) return;
+                const child = row.child()?.[0];
+                initializeRegisteredComponents(child);
+            });
+        }
     }
 
     /**
@@ -200,8 +210,8 @@ class DataTableComponent extends Component {
     getCheckboxElement(id, label) {
         return (
             '<div class=\'checkbox\'>' +
-                `<input id='dt_checkbox_${id}' type='checkbox' />` +
-                `<label for='dt_checkbox_${id}'><span>${label}</span></label>` +
+            `<input id='dt_checkbox_${id}' type='checkbox' />` +
+            `<label for='dt_checkbox_${id}'><span>${label}</span></label>` +
             '</div>'
         );
     }
@@ -565,7 +575,7 @@ class DataTableComponent extends Component {
                         thisHTML += `<p>${this.encodeHTMLEntities(detail.definition)}: ${strDecodedValue}</p>`;
                     }
                 });
-                thisHTML +=  '</div>';
+                thisHTML += '</div>';
                 strHTML += (
                     `<div class="popover-container">
                         <div class="popover-content" id="${data.id || data.column_id}-popover">
@@ -799,7 +809,7 @@ class DataTableComponent extends Component {
                     const $header = $(column.header());
 
                     $header.on('click', (ev) => {
-                        if(ev.stopPropagation) {
+                        if (ev.stopPropagation) {
                             ev.stopPropagation();
                             ev.preventDefault();
                         } else {
@@ -808,7 +818,7 @@ class DataTableComponent extends Component {
                     });
 
                     const headerContent = $header.html();
-                    if(!headerContent.includes('data-table__header-wrapper')){
+                    if (!headerContent.includes('data-table__header-wrapper')) {
                         $header.html(`<div class='data-table__header-wrapper position-relative ${column.search() ? 'filter' : ''}' data-ddl='ddl_${index}'>${headerContent}</div>`);
 
                         // Add sort button to column header
@@ -844,7 +854,7 @@ class DataTableComponent extends Component {
             }
         };
 
-        conf['footerCallback'] = function() {
+        conf['footerCallback'] = function () {
             const api = this.api();
             // Add aggregate values to table if configured
             const agg = api.ajax?.json()?.aggregate;

src/frontend/css/stylesheets/definitions/_bootstrap_base.scss

@@ -76,6 +76,8 @@ $table-caption-color: $primary;
 $table-bg: $white;
 $table-color: $secondary;
 $table-striped-color: $secondary;
+$pagination-bg: $white;
+$pagination-disabled-bg: $white;
 
 // Dropdowns
 $dropdown-bg: $white;

src/frontend/css/stylesheets/external.scss

@@ -1,8 +1,11 @@
 // Bootstrap datepicker
 @import '~bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css';
 
-// Datatables styling for bootstrap 4
-@import '~datatables.net-bs5/css/dataTables.bootstrap5.css';
+// Datatables styling for bootstrap 5
+@import '~datatables.net-bs5/css/dataTables.bootstrap5.css',
+        "~datatables.net-bs5/css/dataTables.bootstrap5.min.css",
+        "~datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css",
+        "~datatables.net-rowreorder-bs5/css/rowReorder.bootstrap5.min.css";
 
 // QueryBuilder
 @import 'jQuery-QueryBuilder/dist/css/query-builder.default.css';

src/frontend/css/stylesheets/general.scss

@@ -2,11 +2,8 @@
 
 @import "definitions/bootstrap_base";
 
-// Bootstrap 4.6
-@import "~bootstrap/scss/bootstrap",
-        "~datatables.net-bs5/css/dataTables.bootstrap5.min.css",
-        "~datatables.net-responsive-bs5/css/responsive.bootstrap5.min.css",
-        "~datatables.net-rowreorder-bs5/css/rowReorder.bootstrap5.min.css";
+// Bootstrap 5
+@import "~bootstrap/scss/bootstrap";
 
 @import "definitions/fonts", "definitions/mixins";
 

src/frontend/js/lib/util/gadsStorage/lib/GadsStorage.test.ts

@@ -86,12 +86,12 @@ describe('GadsStorage', () => {
 
     it('Should do multiple read/writes to the same value without erroring', async () => {
         await setupNoMockCrypto();
-        expect.assertions(10);
+        expect.assertions(20);
         const myValues = [{ id: 1, value: 'value1', array: [1] }];
         for (let i = 0; i < 10; i++) {
             const storage = new GadsStorage();
             const values = JSON.stringify(myValues);
-            await storage.setItem('myValues', values);
+            await expect(storage.setItem('myValues', values)).resolves.not.toThrow();
             await expect(storage.getItem('myValues')).resolves.toEqual(values);
         }
         killNoMockCrypto();