From 725cafa2a4920b9f2c29f59ec574cf21e4774f11 Mon Sep 17 00:00:00 2001
From: Ian McGinnis <ian.mcginnis@noaa.gov>
Date: Tue, 31 Aug 2021 13:27:40 -0600
Subject: [PATCH 1/4] Initial attempt at migrating from bootstrap 4 to 5

This results in a broken MATS UI. I've:
- upgraded the "versionsFrom" to use the packages from meteor 2.3.5 instead of 1.4.1.1 (1.4.11?)
- moved the daterangepicker from an atmosphere to npm dependency
- moved bootstrap from an atmosphere to npm dependency
---
 meteor_packages/mats-common/package.js                | 11 +++++++----
 .../mats-common/templates/common/date_range.js        |  1 +
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/meteor_packages/mats-common/package.js b/meteor_packages/mats-common/package.js
index 784b03def..f78b186b5 100644
--- a/meteor_packages/mats-common/package.js
+++ b/meteor_packages/mats-common/package.js
@@ -15,7 +15,7 @@ Package.describe({
 });
 
 Package.onUse(function (api) {
-    api.versionsFrom('1.4.1.1');
+    api.versionsFrom('2.3.5');
     Npm.depends({
         'fs-extra': '7.0.0',
         "@babel/runtime": "7.10.4",
@@ -24,7 +24,10 @@ Package.onUse(function (api) {
         "jquery-ui": "1.12.1",
         "csv-stringify": "4.3.1",
         "node-file-cache" : "1.0.2",
-        "python-shell": "1.0.8"
+        "python-shell": "1.0.8",
+        "daterangepicker": "3.1.0",
+        "@popperjs/core": "2.9.3",
+        "bootstrap": "5.0.0"
     });
     api.mainModule("server/main.js", "server");
     api.mainModule("client/main.js", "client");
@@ -40,11 +43,11 @@ Package.onUse(function (api) {
     api.use("accounts-ui", 'client');
     api.use("service-configuration", 'server');
     api.use("yasinuslu:json-view", "client");
-    api.use("dangrossman:bootstrap-daterangepicker");
+    // api.use("dangrossman:bootstrap-daterangepicker"); // This needs to be an npm dependency
     api.use("mdg:validated-method");
     api.use('session');
     api.imply('session');
-    api.use("twbs:bootstrap");
+    // api.use("twbs:bootstrap");
     api.use("fortawesome:fontawesome");
     api.use("msavin:mongol");
     api.use("differential:event-hooks");
diff --git a/meteor_packages/mats-common/templates/common/date_range.js b/meteor_packages/mats-common/templates/common/date_range.js
index c334fb0c4..65e36aad2 100644
--- a/meteor_packages/mats-common/templates/common/date_range.js
+++ b/meteor_packages/mats-common/templates/common/date_range.js
@@ -3,6 +3,7 @@
  */
 
 import {matsCollections, matsCurveUtils, matsParamUtils, matsTypes} from 'meteor/randyp:mats-common';
+import {daterangepicker} from 'daterangepicker';
 
 Template.dateRange.onRendered(function () {
     //NOTE: Date fields are special in that they are qualified by plotType.

From 049b6152b018a81226386519c967f004aaca0862 Mon Sep 17 00:00:00 2001
From: Molly Smith <molly.b.smith@noaa.gov>
Date: Thu, 30 Sep 2021 17:43:06 -0600
Subject: [PATCH 2/4] Some improvement in moving to bootstrap 5.

---
 meteor_packages/mats-common/client/main.js | 7 +++++++
 meteor_packages/mats-common/package.js     | 5 +++--
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/meteor_packages/mats-common/client/main.js b/meteor_packages/mats-common/client/main.js
index 35d6245d9..2828ead93 100644
--- a/meteor_packages/mats-common/client/main.js
+++ b/meteor_packages/mats-common/client/main.js
@@ -8,3 +8,10 @@
 
 import '../imports/startup/client';
 import '../imports/startup/both';
+import '@popperjs/core';
+import 'bootstrap';
+import 'bootstrap/dist/css/bootstrap.css';
+import 'bootstrap/dist/css/bootstrap-grid.css';
+import 'bootstrap/dist/css/bootstrap-reboot.css';
+import 'bootstrap/dist/css/bootstrap-utilities.css';
+import 'jquery';
\ No newline at end of file
diff --git a/meteor_packages/mats-common/package.js b/meteor_packages/mats-common/package.js
index f78b186b5..b2f7af337 100644
--- a/meteor_packages/mats-common/package.js
+++ b/meteor_packages/mats-common/package.js
@@ -18,7 +18,6 @@ Package.onUse(function (api) {
     api.versionsFrom('2.3.5');
     Npm.depends({
         'fs-extra': '7.0.0',
-        "@babel/runtime": "7.10.4",
         "meteor-node-stubs": "0.4.1",
         "url": "0.11.0",
         "jquery-ui": "1.12.1",
@@ -27,7 +26,8 @@ Package.onUse(function (api) {
         "python-shell": "1.0.8",
         "daterangepicker": "3.1.0",
         "@popperjs/core": "2.9.3",
-        "bootstrap": "5.0.0"
+        "bootstrap": "5.1.0",
+        "jquery": "3.6.0"
     });
     api.mainModule("server/main.js", "server");
     api.mainModule("client/main.js", "client");
@@ -82,6 +82,7 @@ Package.onUse(function (api) {
     api.export("regression", ['client', 'server']);
     api.export("matsCache", ['server']);
 
+
     // add imports
     //both
     api.addFiles('imports/startup/both/index.js');

From bc81bf6933ad7ce9ddcf1b9d5ab1bc2d4cc815fa Mon Sep 17 00:00:00 2001
From: Molly Smith <molly.b.smith@noaa.gov>
Date: Thu, 30 Sep 2021 17:45:06 -0600
Subject: [PATCH 3/4] Moved daterangepicker import

---
 meteor_packages/mats-common/client/main.js                 | 3 ++-
 meteor_packages/mats-common/templates/common/date_range.js | 1 -
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/meteor_packages/mats-common/client/main.js b/meteor_packages/mats-common/client/main.js
index 2828ead93..e95de796a 100644
--- a/meteor_packages/mats-common/client/main.js
+++ b/meteor_packages/mats-common/client/main.js
@@ -14,4 +14,5 @@ import 'bootstrap/dist/css/bootstrap.css';
 import 'bootstrap/dist/css/bootstrap-grid.css';
 import 'bootstrap/dist/css/bootstrap-reboot.css';
 import 'bootstrap/dist/css/bootstrap-utilities.css';
-import 'jquery';
\ No newline at end of file
+import 'jquery';
+import 'daterangepicker';
\ No newline at end of file
diff --git a/meteor_packages/mats-common/templates/common/date_range.js b/meteor_packages/mats-common/templates/common/date_range.js
index 65e36aad2..c334fb0c4 100644
--- a/meteor_packages/mats-common/templates/common/date_range.js
+++ b/meteor_packages/mats-common/templates/common/date_range.js
@@ -3,7 +3,6 @@
  */
 
 import {matsCollections, matsCurveUtils, matsParamUtils, matsTypes} from 'meteor/randyp:mats-common';
-import {daterangepicker} from 'daterangepicker';
 
 Template.dateRange.onRendered(function () {
     //NOTE: Date fields are special in that they are qualified by plotType.

From 0b4a2222acc07e0420e90a5abf2a62b8f93a9c57 Mon Sep 17 00:00:00 2001
From: Ian McGinnis <ian.mcginnis@noaa.gov>
Date: Fri, 1 Oct 2021 16:27:41 -0600
Subject: [PATCH 4/4] Switch the header & footer to bootstrap 5

    This could be improved but here's what I've tried
    - Move to bootstrap's namespaced data-bs-toggle and data-bs-target
    - Switch to bootstrap 5-style navbars
    - Move the footer to use CSS grids
---
 .../mats-common/templates/footer.html         | 64 +++++++++++--------
 .../mats-common/templates/topnav/top_nav.html | 57 +++++++++--------
 2 files changed, 68 insertions(+), 53 deletions(-)

diff --git a/meteor_packages/mats-common/templates/footer.html b/meteor_packages/mats-common/templates/footer.html
index 04960126f..fa606fef6 100644
--- a/meteor_packages/mats-common/templates/footer.html
+++ b/meteor_packages/mats-common/templates/footer.html
@@ -1,29 +1,39 @@
 <template name="footer" xmlns="http://www.w3.org/1999/html">
-<nav id="footnav" class="navbar navbar-default" style="display: block;">
-    <div class="container-fluid" style="background-color: #dddddd;height:100%;margin-bottom:0;margin-top:0;padding-bottom:1em;padding-top:0;">
-        <div class="navbar-header">
-            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-3" aria-expanded="false">
-                <span class="sr-only">Toggle navigation</span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-                <span class="icon-bar"></span>
-            </button>
-        </div>
-        <!-- Collect the nav links, forms, and other content for toggling -->
-        <div class="row" style="background-color: #dddddd;height:100%;margin-bottom:0;margin-top:0;padding-bottom:1em;padding-top:0;">
-            <span class="col-md-2">{{>version}}</span>
-            <span><a href="http://www.noaa.gov/privacy.html" class="navbar-link">NOAA Privacy Statement</a> - </span>
-            <span><a href="http://esrl.noaa.gov/gsd/accessibility.html" class="navbar-link">Web Accessibility Statement</a> - </span>
-            <span><a href="http://www.noaa.gov/disclaimer.html" class="navbar-link">Disclaimer for External Links</a> - </span>
-            <span><a href="http://www.noaa.gov/" class="navbar-link">NOAA</a> - </span>
-            {{#if isMetexpress}}
-                <span><a href="http://www.commerce.gov/" class="navbar-link">U.S. Department of Commerce</a></span>
-            {{else}}
-                <span><a href="http://www.commerce.gov/" class="navbar-link">U.S. Department of Commerce</a> - </span>
-                <span><a href="http://research.noaa.gov/" class="navbar-link">NOAA Research</a></span>
-            {{/if}}
-        </div><!-- /.navbar-collapse -->
-    </div><!-- /.container-fluid -->
-</nav>
+    <nav id="footnav" class="navbar navbar-expand-xl " style="display: block;">
+        <div class="container-fluid"
+            style="background-color: #dddddd;height:100%;margin-bottom:0;margin-top:0;padding-bottom:1em;padding-top:0;">
+            <div class="navbar-header">
+                <button type="button" class="navbar-toggle collapsed" data-bs-toggle="collapse"
+                    data-bs-target="#navbar-collapse-3" aria-expanded="false">
+                    <span class="sr-only">Toggle navigation</span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                    <span class="icon-bar"></span>
+                </button>
+            </div>
+            <!-- Collect the nav links, forms, and other content for toggling -->
+            <div class="row"
+                style="background-color: #dddddd;height:100%;margin-bottom:0;margin-top:0;padding-bottom:1em;padding-top:0;">
+                <span class="col-md-2">{{>version}}</span>
+                <span class="col"><a href="http://www.noaa.gov/privacy.html" class="navbar-link">NOAA Privacy
+                        Statement</a> -
+                </span>
+                <span class="col"><a href="http://esrl.noaa.gov/gsd/accessibility.html" class="navbar-link">Web
+                        Accessibility
+                        Statement</a> - </span>
+                <span class="col"><a href="http://www.noaa.gov/disclaimer.html" class="navbar-link">Disclaimer for
+                        External
+                        Links</a> - </span>
+                <span class="col"><a href="http://www.noaa.gov/" class="navbar-link">NOAA</a> - </span>
+                {{#if isMetexpress}}
+                <span class="col"><a href="http://www.commerce.gov/" class="navbar-link">U.S. Department of Commerce</a>
+                </span>
+                {{else}}
+                <span class="col"><a href="http://www.commerce.gov/" class="navbar-link">U.S. Department of Commerce</a>
+                    - </span>
+                <span class="col"><a href="http://research.noaa.gov/" class="navbar-link">NOAA Research</a></span>
+                {{/if}}
+            </div><!-- /.navbar-collapse -->
+        </div><!-- /.container-fluid -->
+    </nav>
 </template>
-
diff --git a/meteor_packages/mats-common/templates/topnav/top_nav.html b/meteor_packages/mats-common/templates/topnav/top_nav.html
index 0e95747db..88e43ebb7 100644
--- a/meteor_packages/mats-common/templates/topnav/top_nav.html
+++ b/meteor_packages/mats-common/templates/topnav/top_nav.html
@@ -1,28 +1,30 @@
 <template name="topNav">
 
     <div id="navbar" style="display:block;height:100%;margin-bottom:0;margin-top:0;padding-top:0;padding-bottom:0;">
-        <nav id="topnav" class="navbar navbar-default"
-             style="color:white; background: #006699;height:100%;margin-bottom:0;margin-top:0;padding-top:0;padding-bottom:0;">
+        <nav id="topnav" class="navbar navbar-expand-sm "
+            style="color:white; background: #006699;height:100%;margin-bottom:0;margin-top:0;padding-top:0;padding-bottom:0;">
             <div class="container-fluid">
                 <div class="navbar-header">
-                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
-                            data-target="#navbar-collapse-1" aria-expanded="false">
+                    <button type="button" class="navbar-toggle collapsed" data-bs-toggle="collapse"
+                        data-bs-target="#navbar-collapse-1" aria-expanded="false">
                         <span class="sr-only">Toggle navigation</span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                     </button>
-                    <a href="{{productLink}}"> <i style="color:cyan" class="fa fa-home fa-3x" aria-hidden="true"></i></a>
+                    <a href="{{productLink}}"> <i style="color:cyan" class="fa fa-home fa-3x"
+                            aria-hidden="true"></i></a>
                 </div>
                 <!-- Collect the nav links, forms, and other content for toggling -->
                 <div class="collapse navbar-collapse" id="navbar-collapse-1">
                     <ul class="nav navbar-nav">
-                        <li><a href="http://www.doc.gov/"><span
-                                style="color:white">U.S. Department of Commerce</span></a></li>
-                        <li><a href="http://www.noaa.gov/"><span style="color:white">National Oceanic and Atmospheric Administration</span></a>
+                        <li class="nav-item"><a href="http://www.doc.gov/"><span style="color:white">U.S. Department of
+                                    Commerce</span></a></li>
+                        <li class="nav-item"><a href="http://www.noaa.gov/"><span style="color:white">National Oceanic and Atmospheric
+                                    Administration</span></a>
                         </li>
                         {{#unless isMetexpress}}
-                        <li><a href="http://www.research.noaa.gov/"><span style="color:white">NOAA Research</span></a>
+                        <li class="nav-item"><a href="http://www.research.noaa.gov/"><span style="color:white">NOAA Research</span></a>
                         </li>
                         {{/unless}}
                     </ul>
@@ -31,50 +33,53 @@
                 </div><!-- /.navbar-collapse -->
             </div><!-- /.container-fluid -->
         </nav>
-        <nav id="topnav1" class="navbar navbar-default"
-             style="color:white; background: #000066;height:100%;margin-bottom:0;margin-top:0;padding-top:0;padding-bottom:1.5%;">
+        <nav id="topnav1" class="navbar navbar-expand-sm "
+            style="color:white; background: #000066;height:100%;margin-bottom:0;margin-top:0;padding-top:0;padding-bottom:1.5%;">
             <div class="container-fluid">
                 <!-- Brand and toggle get grouped for better mobile display -->
                 <div class="navbar-header">
-                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
-                            data-target="#navbar-collapse-2" aria-expanded="false">
+                    <button type="button" class="navbar-toggle collapsed" data-bs-toggle="collapse"
+                        data-bs-target="#navbar-collapse-2" aria-expanded="false">
                         <span class="sr-only">Toggle navigation</span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                         <span class="icon-bar"></span>
                     </button>
-                    <a style="margin-bottom:0;margin-top:0;padding: 0;" class="navbar-brand" href="https://www.noaa.gov"><img
+                    <a style="margin-bottom:0;margin-top:0;padding: 0;" class="navbar-brand"
+                        href="https://www.noaa.gov"><img
                             style="height:100%;margin-bottom:0;margin-top:0;padding-left:1em;padding-right:1em;padding-bottom:0;padding-top:0;"
-                            src = "{{transparentGif}}" alt="NOAA"></a>
+                            src="{{transparentGif}}" alt="NOAA"></a>
                 </div>
 
                 <!-- Collect the nav links, forms, and other content for toggling -->
                 <div class="collapse navbar-collapse" id="navbar-collapse-2">
                     <ul class="nav navbar-nav">
-                        <li>
+                        <li class="nav-item">
                             <div>
-                                <a href="{{agencyLink}}"><span style="color:white;font-size: small;">{{agencyText}}</span></a><br>
-                                <a href="{{productLink}}"><span style="color:white;font-size: x-large;">{{productText}}</span></a><br>
+                                <a href="{{agencyLink}}"><span
+                                        style="color:white;font-size: small;">{{agencyText}}</span></a><br>
+                                <a href="{{productLink}}"><span
+                                        style="color:white;font-size: x-large;">{{productText}}</span></a><br>
                             </div>
                         </li>
                     </ul>
                     <ul class="nav navbar-nav navbar-right">
-                        <li><a href="{{bugsLink}}" target="_blank"><span
-                                style="color:white;font-size: medium;">{{bugsText}}</span></a></li>
-                        <li><a href="{{productLink}}"> <span style="color:white;font-size: medium;">Home</span></a></li>
-                        <li><a href="" class="about"><span style="color:white;font-size: medium;">About</span></a></li>
-                        <li><a style="font-size: medium" href="mailto:mats.gsl@noaa.gov?Subject=Feedback from {{emailText}}"><span
-                                style="color:white">Contact Us</span></a></li>
+                        <li class="nav-item"><a href="{{bugsLink}}" target="_blank"><span
+                                    style="color:white;font-size: medium;">{{bugsText}}</span></a></li>
+                        <li class="nav-item"><a href="{{productLink}}"> <span style="color:white;font-size: medium;">Home</span></a></li>
+                        <li class="nav-item"><a href="" class="about"><span style="color:white;font-size: medium;">About</span></a></li>
+                        <li class="nav-item"><a style="font-size: medium"
+                                href="mailto:mats.gsl@noaa.gov?Subject=Feedback from {{emailText}}"><span
+                                    style="color:white">Contact Us</span></a></li>
                     </ul>
                 </div><!-- /.navbar-collapse -->
             </div><!-- /.container-fluid -->
         </nav>
         {{#unless isMetexpress}}
         <div style="background-color: #dddddd;height:100%;margin-bottom:0;margin-top:0;padding-left:1em;padding-right: 0"
-             class="container-fluid">
+            class="container-fluid">
             <a style="font-size:large;font-weight: bold" href="http://esrl.noaa.gov/gsd/mdb">GSL Modeling</a>
         </div>
         {{/unless}}
     </div>
 </template>
-