Merge pull request #866 from CruGlobal/upgrade-webpack-5-karma

[no-Jira] Upgrade to webpack v5 and karma v6
CruGlobal · Nov 12, 2024 · 9423b66 · 9423b66
2 parents ccb25f0 + ee8d4e5
commit 9423b66
Show file tree

Hide file tree

Showing 25 changed files with 2,614 additions and 5,485 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -17,9 +17,9 @@ jobs:
     name: tests
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16.10.0
+          node-version-file: .node-version
       - name: 📦 Install Dependencies
         run: yarn install --immutable --immutable-cache
       - name: 🧪 Run Tests
@@ -34,9 +34,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16.10.0
+          node-version-file: .node-version
       - name: 📦 Install Dependencies
         run: yarn install --immutable --immutable-cache
       - name: 💨 ESLint
@@ -45,9 +45,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16.10.0
+          node-version-file: .node-version
       - name: 📦 Install Dependencies
         run: yarn install --immutable --immutable-cache
       - name: ✅ TypeScript lint
@@ -56,9 +56,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16.10.0
+          node-version-file: .node-version
       - name: 📦 Install Dependencies
         run: yarn install --immutable --immutable-cache
       - name: 💅 Prettier Check
@@ -67,9 +67,9 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16.10.0
+          node-version-file: .node-version
       - name: 📦 Install Dependencies
         run: yarn install --immutable --immutable-cache --check-cache
   deploy:
@@ -80,9 +80,9 @@ jobs:
     if: github.event_name == 'push'
     steps:
       - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v4
         with:
-          node-version: 16.10.0
+          node-version-file: .node-version
       - name: 📦 Install Dependencies
         run: yarn install --immutable --immutable-cache
       - name: 🔨 Build

diff --git a/.node-version b/.node-version
@@ -0,0 +1 @@
+18.20.4
diff --git a/.tool-versions b/.tool-versions
@@ -1,2 +1 @@
-nodejs 16.10.0
 yarn 1.22.17
diff --git a/app/scripts/services/httpUrlInterceptor.js b/app/scripts/services/httpUrlInterceptor.js
@@ -3,7 +3,11 @@ angular
   .factory('httpUrlInterceptor', function (envService) {
     return {
       request: function (config) {
-        var passthroughRegexs = [/https?:\/\/.*/, /^views\/.*/, /template\/.*/];
+        var passthroughRegexs = [
+          /https?:\/\/.*/,
+          /^\/views\/.*/,
+          /template\/.*/,
+        ];
 
         var match = function (regexp) {
           return regexp.test(config.url);

diff --git a/app/styles/common.scss b/app/styles/common.scss
@@ -1,11 +1,15 @@
+@use '~bootstrap-sass/assets/stylesheets/bootstrap';
+@use 'variables';
+@use 'typography';
+
 /***** GLOBALS *****/
 * {
   @extend .sans-serif;
 }
 
 /*** Buttons ***/
 .btn-primary {
-  background: $blue;
+  background: variables.$blue;
   border-color: #2f84cd;
 }
 .btn-primary:hover,
@@ -18,7 +22,7 @@
   border-color: #2969a0;
 }
 .btn-info {
-  background-color: $lightblue;
+  background-color: variables.$lightblue;
   border-color: #318fc2;
 }
 .btn-info:hover,
@@ -76,16 +80,16 @@ a.disabled {
 .warning-popover {
   cursor: pointer;
   margin-left: 8px;
-  color: $brand-warning;
+  color: bootstrap.$brand-warning;
   &:hover {
-    color: $brand-warning;
+    color: bootstrap.$brand-warning;
   }
 }
 
 .error-popover {
   cursor: pointer;
   margin-left: 8px;
-  color: $red;
+  color: variables.$red;
 }
 
 /*** Text Styles ***/
@@ -122,22 +126,22 @@ h2.page-title {
 
 /*** Dividers ***/
 .divider-left-col-sm {
-  @media (min-width: $screen-sm-min) {
+  @media (min-width: bootstrap.$screen-sm-min) {
     border-left: 2px solid #cccccc;
   }
 }
 .divider-right-col-sm {
-  @media (min-width: $screen-sm-min) {
+  @media (min-width: bootstrap.$screen-sm-min) {
     border-right: 2px solid #cccccc;
   }
 }
 .divider-left-col-md {
-  @media (min-width: $screen-md-min) {
+  @media (min-width: bootstrap.$screen-md-min) {
     border-left: 2px solid #cccccc;
   }
 }
 .divider-right-col-md {
-  @media (min-width: $screen-md-min) {
+  @media (min-width: bootstrap.$screen-md-min) {
     border-right: 2px solid #cccccc;
   }
 }
@@ -162,31 +166,31 @@ h2.page-title {
   margin-bottom: 1.5em;
 }
 .stacked-spacing-col-sm {
-  @media (max-width: $screen-xs-max) {
+  @media (max-width: bootstrap.$screen-xs-max) {
     margin-bottom: 1em;
     &.spacing-xs {
       margin-bottom: 0.5em;
     }
   }
 }
 .stacked-spacing-above-col-sm {
-  @media (max-width: $screen-xs-max) {
+  @media (max-width: bootstrap.$screen-xs-max) {
     margin-top: 1em;
     &.spacing-xs {
       margin-top: 0.5em;
     }
   }
 }
 .stacked-spacing-col-md {
-  @media (max-width: $screen-sm-max) {
+  @media (max-width: bootstrap.$screen-sm-max) {
     margin-bottom: 1em;
     &.spacing-xs {
       margin-bottom: 0.5em;
     }
   }
 }
 .stacked-spacing-above-col-md {
-  @media (max-width: $screen-sm-max) {
+  @media (max-width: bootstrap.$screen-sm-max) {
     margin-top: 1em;
     &.spacing-xs {
       margin-top: 0.5em;

diff --git a/app/styles/components.scss b/app/styles/components.scss
@@ -1,3 +1,5 @@
+@use 'variables';
+
 /***** COMPONENTS *****/
 
 [ng\:cloak],
@@ -56,9 +58,9 @@ pick-a-time {
   z-index: 10000;
   td {
     a.btn {
-      background: $lightgray;
+      background: variables.$lightgray;
       &:hover {
-        background: $lightgrayaccent;
+        background: variables.$lightgrayaccent;
       }
     }
     span:hover {
@@ -72,13 +74,13 @@ pick-a-time {
 /* Default Overrides */
 .label-success,
 .btn-success {
-  background: $green;
+  background: variables.$green;
 }
 .label-primary {
-  background: $blue;
+  background: variables.$blue;
 }
 .nav-pills .active a {
-  background: $darkerblue;
+  background: variables.$darkerblue;
 }
 
 /* Additional Features */

diff --git a/app/styles/event-admin.scss b/app/styles/event-admin.scss
@@ -1,16 +1,20 @@
+@use '~bootstrap-sass/assets/stylesheets/bootstrap';
+@use 'variables';
+@use 'typography';
+
 /***** BACK END (Event Administration) *****/
 
 /*** Template Styles ***/
 #masthead {
-  background: $blue;
-  border-bottom: 7px solid $darkblue;
+  background: variables.$blue;
+  border-bottom: 7px solid variables.$darkblue;
   padding-top: 26px;
   a.logo,
   a.logo:hover {
     color: white;
     font-size: 36px;
     text-decoration: none;
-    @media (max-width: $screen-xs-max) {
+    @media (max-width: bootstrap.$screen-xs-max) {
       font-size: 22px;
     }
   }
@@ -24,13 +28,17 @@
       }
     }
     .btn-primary.dropdown-toggle {
-      background-image: linear-gradient(to bottom, $blue 0px, $darkblue 100%);
+      background-image: linear-gradient(
+        to bottom,
+        variables.$blue 0px,
+        variables.$darkblue 100%
+      );
     }
   }
 }
 
 section#pagetitle {
-  background: $creme;
+  background: variables.$creme;
   padding-top: 25px;
   padding-bottom: 5px;
   border-bottom: 1px solid #ece8d8;
@@ -73,8 +81,8 @@ main {
 }
 
 #pagefooter {
-  background: $paleblue;
-  box-shadow: 0px 500px 0px 500px $paleblue;
+  background: variables.$paleblue;
+  box-shadow: 0px 500px 0px 500px variables.$paleblue;
   border-top: 1px solid #c7ecff;
   padding: 22px 0 0;
   min-height: 75px;
@@ -99,7 +107,7 @@ main.dashboard {
       font-weight: 600;
       text-shadow: 2px 2px #000011;
     }
-    @media (max-width: $screen-xs-max) {
+    @media (max-width: bootstrap.$screen-xs-max) {
       padding: 30px 0px;
     }
     .search-toolbar {
@@ -134,7 +142,7 @@ main.dashboard {
 }
 main.event-dashboard {
   aside.welcome {
-    color: $sixgray;
+    color: variables.$sixgray;
     h3 {
       font-size: 20px;
       text-transform: uppercase;
@@ -165,7 +173,7 @@ main.event-dashboard {
       width: 130px;
     }
     .btn.btn-reg-count {
-      background: $white;
+      background: variables.$white;
       @extend .mediumgray;
     }
     li {
@@ -222,7 +230,7 @@ main.event-overview {
 }
 main.event-registrations {
   .rowdetails .well {
-    background: $verylightgray;
+    background: variables.$verylightgray;
     border-radius: 0;
     .details-heading {
       text-align: right;
@@ -306,7 +314,7 @@ main.event-questions {
   }
   .dropNewTarget {
     text-align: center;
-    color: $mediumlightgray;
+    color: variables.$mediumlightgray;
     .fa {
       font-size: 800%;
     }
@@ -317,7 +325,7 @@ main.event-questions {
   .panel {
     .list-group-item:hover,
     .list-group-item:focus {
-      background-color: $hover-highlight;
+      background-color: variables.$hover-highlight;
     }
   }
 
@@ -326,16 +334,16 @@ main.event-questions {
     > li.active > a,
     > li.active > a:hover,
     > li.active > a:focus {
-      background-color: $tab-bkgd-color;
+      background-color: variables.$tab-bkgd-color;
     }
   }
   .tab-content {
-    border-left: 1px solid $tab-border-color;
-    border-right: 1px solid $tab-border-color;
-    border-bottom: 1px solid $tab-border-color;
+    border-left: 1px solid variables.$tab-border-color;
+    border-right: 1px solid variables.$tab-border-color;
+    border-bottom: 1px solid variables.$tab-border-color;
     border-radius: 0 0 4px 4px;
     padding: 10px;
-    background-color: $tab-bkgd-color;
+    background-color: variables.$tab-bkgd-color;
     .form-group {
       margin-right: 0;
       margin-left: 0;
@@ -349,7 +357,7 @@ main.journal-upload {
   }
   .table-aligned {
     table-layout: fixed;
-    @media (max-width: $screen-xs-max) {
+    @media (max-width: bootstrap.$screen-xs-max) {
       table-layout: auto;
     }
   }

diff --git a/app/styles/style.scss b/app/styles/style.scss
@@ -1,10 +1,9 @@
-$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';
-@import '~bootstrap-sass/assets/stylesheets/bootstrap';
+@forward '~bootstrap-sass/assets/stylesheets/bootstrap' with (
+  $icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/'
+);
 
-@import 'variables.scss';
-@import 'typography.scss';
-@import 'common.scss';
-@import 'user-registration.scss';
-@import 'event-admin.scss';
-@import 'components.scss';
-@import '~ui-cropper/source/scss/ui-cropper.scss';
+@use 'common.scss';
+@use 'user-registration.scss';
+@use 'event-admin.scss';
+@use 'components.scss';
+@use '~ui-cropper/source/scss/ui-cropper.scss';