Scoping bootstrap styling for legacy pages.

This adds a bootstrap for legacy partial file that allows developers
to add bootstrap components to legacy pages, using a scoping class
bootstrap to ensure compatibility with legacy classes.

common/djangoapps/student/tests/test_views.py

@@ -369,7 +369,7 @@ class StudentDashboardTests(SharedModuleStoreTestCase, MilestonesTestCaseMixin):
         response = self.client.get(self.path)
         self.assertIn('class="enter-course hidden"', response.content)
         self.assertIn('You must select a session to access the course.', response.content)
-        self.assertIn('<div class="course-entitlement-selection-container ">', response.content)
+        self.assertIn('<div class="course-entitlement-selection-container bootstrap">', response.content)
         self.assertIn('Related Programs:', response.content)
 
     @patch('student.views.get_course_runs_for_course')
@@ -393,7 +393,7 @@ class StudentDashboardTests(SharedModuleStoreTestCase, MilestonesTestCaseMixin):
         response = self.client.get(self.path)
         self.assertIn('class="enter-course hidden"', response.content)
         self.assertIn('You can no longer select a session', response.content)
-        self.assertNotIn('<div class="course-entitlement-selection-container ">', response.content)
+        self.assertNotIn('course-entitlement-selection-container', response.content)
 
     @patch('student.views.get_course_runs_for_course')
     @patch.object(CourseOverview, 'get_from_id')

lms/static/sass/base/_bootstrap_for_legacy.scss

+// This file ensures that bootstrap styles and components can be used on legacy pages (v1 and pattern library).
+// The styles on these legacy pages are scoped to a bootstrap parent class that must be added to use the class
+// values.
+//
+// To add new components, simply add their SASS partial references to the scoped block below.
+//
+// Make sure that when you add the bootstrap component wrapper class to the DOM, that any children DOM elements' styling
+// does not conflict with the Bootstrap classes.
+
+// Core Bootstrap functions, variables and mixins
+@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 - scoped due to conflicts with legacy styling
+.bootstrap {
+  @import 'bootstrap/scss/popover';
+}

lms/static/sass/base/_build.scss

@@ -3,17 +3,8 @@
 // Theme-specific variables
 @import 'lms/theme/variables';
 
-// Core Bootstrap functions, variables and mixins
-@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';
+// Bootstrap-specific mixins/functions/components
+@import 'bootstrap_for_legacy';
 
 // LMS-specific variables
 @import '../variables';

lms/templates/dashboard/_dashboard_course_listing.html

@@ -304,7 +304,7 @@ from util.course import get_link_for_about_page, get_encoded_course_sharing_utm_
     <div class="messages-list">
 
       % if entitlement and not entitlement_expired_at:
-        <div class="course-entitlement-selection-container ${'' if is_unfulfilled_entitlement else 'hidden'}"></div>
+        <div class="course-entitlement-selection-container${' ' if is_unfulfilled_entitlement else ' hidden '}bootstrap"></div>
         <%static:require_module module_name="js/learner_dashboard/course_entitlement_factory" class_name="EntitlementFactory">
           EntitlementFactory({
               el: '${ '#course-card-' + str(course_card_index) + ' .course-entitlement-selection-container' | n, js_escaped_string }',