Changes.

lms/static/js/learner_dashboard/models/course_card_model.js

@@ -148,8 +148,8 @@
                 formatDateString: function(run) {
                     var pacingType = run.pacing_type,
                         dateString,
-                        start = this.get('start_date') || run.start_date,
-                        end = this.get('end_date') || run.end_date,
+                        start = run.start_date || this.get('start_date'),
+                        end = run.end_date || this.get('end_date'),
                         now = new Date(),
                         startDate = new Date(start),
                         endDate = new Date(end);
@@ -226,7 +226,7 @@
                 updateCourseRun: function(courseRunKey) {
                     var selectedCourseRun = _.findWhere(this.get('course_runs'), {key: courseRunKey});
                     if (selectedCourseRun) {
-                        // Set the course run to the enrolled state
+                        // Update the current context to set the course run to the enrolled state
                         _.each(this.context.course_runs, function(run) {
                             if (run.key === selectedCourseRun.key) run.is_enrolled = true; // eslint-disable-line no-param-reassign, max-len
                         });

lms/static/js/learner_dashboard/views/course_entitlement_view.js

@@ -85,16 +85,13 @@ defineFn(['common/js/vendor/bootstrap']);
                  },
 
                  postRender: function() {
-                     // Close popover on click-away
+                     // Close any visible popovers on click-away
                      $(document).on('click', function(e) {
-                         if (!($(e.target).closest('.enroll-btn-initial, .popover').length)) {
+                         if (this.$('.popover:visible').length &&
+                             !($(e.target).closest('.enroll-btn-initial, .popover').length)) {
                              this.hideDialog(this.$('.enroll-btn-initial'));
                          }
                      }.bind(this));
-
-                     this.$('.enroll-btn-initial').click(function(e) {
-                         this.showDialog($(e.target));
-                     }.bind(this));
                  },
 
                  handleEnrollChange: function() {
@@ -291,7 +288,6 @@ defineFn(['common/js/vendor/bootstrap']);
                       */
                      var confirmationMsgTitle,
                          confirmationMsgBody,
-                         popoverDialogHtml,
                          currentSessionId = this.entitlementModel.get('currentSessionId'),
                          newSessionId = this.$('.session-select').find('option:selected').data('session_id');
 
@@ -307,41 +303,35 @@ defineFn(['common/js/vendor/bootstrap']);
                          confirmationMsgBody = gettext('Any course progress or grades from your current session will be lost.'); // eslint-disable-line max-len
                      }
 
-                     // Remove existing popover and re-initialize
-                     this.removeDialog(invokingElement);
-                     popoverDialogHtml = this.verificationTpl({
-                         confirmationMsgTitle: confirmationMsgTitle,
-                         confirmationMsgBody: confirmationMsgBody
-                     });
-
+                     // Re-initialize the popover
                      invokingElement.popover({
                          placement: 'bottom',
                          container: this.$el,
                          html: true,
                          trigger: 'click',
-                         animation: true,
-                         content: popoverDialogHtml.text
+                         content: this.verificationTpl({
+                             confirmationMsgTitle: confirmationMsgTitle,
+                             confirmationMsgBody: confirmationMsgBody
+                         }).text
                      });
                  },
 
                  removeDialog: function(el) {
                      /* Removes the Bootstrap v4 dialog modal from the update session enrollment button. */
                      var $el = el instanceof jQuery ? el : this.$('.enroll-btn-initial');
-                     $el.popover('dispose');
-                 },
-
-                 showDialog: function(invokingElement) {
-                     /* Given an element with an associated dialog modal, shows the modal. */
-                     invokingElement.popover('show');
-                     this.$('.final-confirmation-btn:first').focus();
+                     if (this.$('popover').length) {
+                        $el.popover('dispose');
+                     }
                  },
 
                  hideDialog: function(el, returnFocus) {
-                     /* Hides the  modal without removing it from the DOM. */
+                     /* Hides the modal if it is visible without removing it from the DOM. */
                      var $el = el instanceof jQuery ? el : this.$('.enroll-btn-initial');
-                     $el.popover('hide');
-                     if (returnFocus) {
-                         $el.focus();
+                     if (this.$('.popover:visible').length) {
+                         $el.popover('hide');
+                         if (returnFocus) {
+                             $el.focus();
+                         }
                      }
                  },
 
@@ -399,7 +389,7 @@ defineFn(['common/js/vendor/bootstrap']);
                          formattedSession.enrollment_end = this.formatDate(formattedSession.enrollment_end, dateFormat);
                          formattedSession.session_dates = this.courseCardModel.formatDateString({
                              start_date: session.advertised_start || startDate,
-                             end_date: session.advertised_start ? null : endDate,
+                             end_date: session.advertised_start ? '' : endDate,
                              pacing_type: formattedSession.pacing_type
                          });
                          return formattedSession;
@@ -407,7 +397,7 @@ defineFn(['common/js/vendor/bootstrap']);
                  },
 
                  formatDate: function(date, dateFormat) {
-                     return date ? moment((new Date(date))).format(dateFormat) : null;
+                     return date ? moment((new Date(date))).format(dateFormat) : '';
                  },
 
                  getAvailableSessionWithId: function(sessionId) {

lms/static/sass/base/_build.scss

@@ -7,8 +7,13 @@
 @import 'bootstrap/variables';
 @import 'bootstrap/scss/functions';
 @import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins/box-shadow';
 @import 'bootstrap/scss/mixins/breakpoints';
 @import 'bootstrap/scss/mixins/grid';
+@import 'bootstrap/scss/mixins/reset-text';
+
+// Bootstrap components
+@import 'bootstrap/scss/popover';
 
 // LMS-specific variables
 @import '../variables';

lms/static/sass/multicourse/_dashboard.scss

@@ -1044,8 +1044,8 @@
 
       .related-programs-preface {
         @include float(left);
-        @include margin-right($baseline/2;)
 
+        margin: 0 $baseline/2;
         font-weight: bold;
       }