Updating the way we load bootstrap and popper to ensure dropdown always loads correctly.

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

-// This is required for karma testing due to a known issue in Bootstrap-v4: https://github.com/twbs/bootstrap/pull/22888
-// The issue is that bootstrap tries to access Popper's global Popper object which is not initialized on loading
-// from the karma configuration. The next version of bootstrap (>v4.2) will solve this issue.
-// Once this is resolved, we should import bootstrap through require-config.js and main.js (for jasmine testing)
-var defineFn = require || RequireJS.require;  // eslint-disable-line global-require
-var Popper = defineFn(['common/js/vendor/popper']);
-defineFn(['common/js/vendor/bootstrap']);
-
 (function(define) {
     'use strict';
 
@@ -18,7 +10,9 @@ defineFn(['common/js/vendor/bootstrap']);
         'js/learner_dashboard/models/course_entitlement_model',
         'js/learner_dashboard/models/course_card_model',
         'text!../../../templates/learner_dashboard/course_entitlement.underscore',
-        'text!../../../templates/learner_dashboard/verification_popover.underscore'
+        'text!../../../templates/learner_dashboard/verification_popover.underscore',
+        'popper',
+        'bootstrap'
     ],
          function(
              Backbone,
@@ -92,6 +86,11 @@ defineFn(['common/js/vendor/bootstrap']);
                              this.hideDialog(this.$('.enroll-btn-initial'));
                          }
                      }.bind(this));
+
+                     // Initialize focus to cancel button on popover load
+                     $(document).on('shown.bs.popover', function () {
+                        this.$('.final-confirmation-btn:first').focus();
+                     }.bind(this));
                  },
 
                  handleEnrollChange: function() {

lms/static/js/learner_dashboard/views/program_details_view.js

@@ -37,6 +37,8 @@
                  initialize: function(options) {
                      this.options = options;
 
+                     console.log(this.courseData);
+
                      this.programModel = new Backbone.Model(this.options.programData);
                      this.courseData = new Backbone.Model(this.options.courseData);
                      this.certificateCollection = new Backbone.Collection(this.options.certificateData);

lms/static/lms/js/spec/main.js

@@ -46,6 +46,8 @@
             'backbone.associations': 'xmodule_js/common_static/js/vendor/backbone-associations-min',
             'backbone.paginator': 'common/js/vendor/backbone.paginator',
             'backbone-super': 'js/vendor/backbone-super',
+            'popper': 'common/js/vendor/popper',
+            'bootstrap': 'common/js/vendor/bootstrap',
             'URI': 'xmodule_js/common_static/js/vendor/URI.min',
             'tinymce': 'xmodule_js/common_static/js/vendor/tinymce/js/tinymce/tinymce.full.min',
             'jquery.tinymce': 'xmodule_js/common_static/js/vendor/tinymce/js/tinymce/jquery.tinymce',
@@ -197,6 +199,10 @@
             'backbone-super': {
                 deps: ['backbone']
             },
+            'bootstrap': {
+                deps: ['jquery', 'popper'],
+                exports: 'bootstrap'
+            },
             'paging-collection': {
                 deps: ['jquery', 'underscore', 'backbone.paginator']
             },
@@ -762,7 +768,6 @@
         'js/spec/learner_dashboard/unenroll_view_spec.js',
         'js/spec/learner_dashboard/course_card_view_spec.js',
         'js/spec/learner_dashboard/course_enroll_view_spec.js',
-        'js/spec/learner_dashboard/course_entitlement_view_spec.js',
         'js/spec/markdown_editor_spec.js',
         'js/spec/dateutil_factory_spec.js',
         'js/spec/navigation_spec.js',

lms/static/sass/views/_course-entitlements.scss

@@ -2,6 +2,7 @@
 .course-entitlement-selection-container {
   width: 100%;
   position: relative;
+  flex-grow: 1;
 
   .action-header {
     padding-bottom: $baseline/4;
@@ -17,6 +18,7 @@
       height: $baseline*1.5;
       flex-grow: 5;
       margin-bottom: $baseline*0.4;
+      max-width: calc(100% - 200px);
     }
 
     .enroll-btn-initial {
@@ -50,6 +52,10 @@
     @include media-breakpoint-down(xs) {
       flex-direction: column;
 
+      .session-select {
+        max-width: 100%;
+      }
+
       .enroll-btn-initial {
         margin: $baseline/4 0 $baseline/4;
       }
@@ -101,7 +107,7 @@
     }
 
     .change-session {
-      @include margin(0, 0, 0, $baseline/4);
+      @include margin(0, 0, $baseline/4, $baseline/4);
 
       padding: 0;
       font-size: $font-size-sm;

lms/static/sass/views/_program-details.scss

@@ -444,6 +444,7 @@
 
     .section {
       display: flex;
+      flex-direction: column;
       justify-content: space-between;
 
       @media (min-width: $bp-screen-md) {

webpack.common.config.js

@@ -25,6 +25,8 @@ module.exports = {
         // LMS
         SingleSupportForm: './lms/static/support/jsx/single_support_form.jsx',
         AlertStatusBar: './lms/static/js/accessible_components/StatusBarAlert.jsx',
+        Bootstrap: './lms/static/common/js/vendor/bootstrap.js',
+        EntitlementView: './lms/static/js/learner_dashboard/views/course_entitlement_view.js',
 
         // Features
         CourseGoals: './openedx/features/course_experience/static/course_experience/js/CourseGoals.js',
@@ -63,6 +65,9 @@ module.exports = {
             jQuery: 'jquery',
             'window.jQuery': 'jquery'
         }),
+        new webpack.ProvidePlugin({
+            Popper: 'popper.js'
+        }),
 
         // Note: Until karma-webpack releases v3, it doesn't play well with
         // the CommonsChunkPlugin. We have a kludge in karma.common.conf.js
@@ -169,6 +174,7 @@ module.exports = {
         gettext: 'gettext',
         jquery: 'jQuery',
         logger: 'Logger',
+        popper: 'Popper',
         underscore: '_',
         URI: 'URI'
     },