Merge pull request #12135 from edx/schen/ECOM-3195

ECOM-3195 Edit the navigation header on dashboard to expose program listing page

common/djangoapps/student/views.py

@@ -127,6 +127,7 @@ from openedx.core.djangoapps.credentials.utils import get_user_program_credentia
 from openedx.core.djangoapps.credit.email_utils import get_credit_provider_display_names, make_providers_strings
 from openedx.core.djangoapps.user_api.preferences import api as preferences_api
 from openedx.core.djangoapps.programs.utils import get_programs_for_dashboard
+from openedx.core.djangoapps.programs.models import ProgramsApiConfig
 
 
 log = logging.getLogger("edx.student")
@@ -741,6 +742,7 @@ def dashboard(request):
         'course_programs': course_programs,
         'disable_courseware_js': True,
         'xseries_credentials': xseries_credentials,
+        'show_program_listing': ProgramsApiConfig.current().show_program_listing,
     }
 
     ecommerce_service = EcommerceService()

lms/djangoapps/learner_dashboard/README.rst

@@ -18,6 +18,11 @@ Implementation
 ^^^^^^^^^^^^^^^^^^^^^
 The ``views`` module contains the Django views used to serve the Program listing page. The corresponding Backbone app is in the ``edx-platform/static/js/learner_dashboard``.
 
+Configuration
+^^^^^^^^^^^^^^^^^^^^^
+In order to turn on the Programs tab, you need to update the ``Programs API Config`` object in the lms Django admin. Make sure you set the values ``Enabled``, ``Do we want to show program listing page`` and ``Do we want to show xseries program advertising`` to be true
+
 Profile
 ---------------
 A page allowing learners to see what they have accomplished and view credits or certificates they have earned on the edX platform.
+

lms/djangoapps/learner_dashboard/tests/test_programs.py

@@ -43,7 +43,7 @@ class TestProgramListing(
         super(TestProgramListing, self).setUp()
         ClientFactory(name=ProgramsApiConfig.OAUTH2_CLIENT_NAME, client_type=CONFIDENTIAL)
         self.student = UserFactory()
-        self.create_programs_config(xseries_ad_enabled=True)
+        self.create_programs_config(xseries_ad_enabled=True, program_listing_enabled=True)
 
     def _create_course_and_enroll(self, student, org, course, run):
         """
@@ -120,13 +120,13 @@ class TestProgramListing(
             self.assertIn(program_element, response.content)
 
     def test_get_programs_dashboard_not_enabled(self):
-        self.create_programs_config(enable_student_dashboard=False)
+        self.create_programs_config(program_listing_enabled=False)
         self.client.login(username=self.student.username, password=self.PASSWORD)
         response = self.client.get(reverse("program_listing_view"))
         self.assertEqual(response.status_code, 404)
 
     def test_xseries_advertise_disabled(self):
-        self.create_programs_config(xseries_ad_enabled=False)
+        self.create_programs_config(program_listing_enabled=True, xseries_ad_enabled=False)
         self.client.login(username=self.student.username, password=self.PASSWORD)
         response = self.client.get(reverse("program_listing_view"))
         self.assertEqual(response.status_code, 200)

lms/djangoapps/learner_dashboard/views.py

@@ -16,7 +16,8 @@ from student.views import get_course_enrollments
 @require_GET
 def view_programs(request):
     """View programs in which the user is engaged."""
-    if not ProgramsApiConfig.current().is_student_dashboard_enabled:
+    show_program_listing = ProgramsApiConfig.current().show_program_listing
+    if not show_program_listing:
         raise Http404
 
     enrollments = list(get_course_enrollments(request.user, None, []))
@@ -32,5 +33,7 @@ def view_programs(request):
 
     return render_to_response('learner_dashboard/programs.html', {
         'programs': programs,
-        'xseries_url': marketing_root if ProgramsApiConfig.current().show_xseries_ad else None
+        'xseries_url': marketing_root if ProgramsApiConfig.current().show_xseries_ad else None,
+        'nav_hidden': True,
+        'show_program_listing': show_program_listing
     })

lms/static/sass/shared/_header.scss

@@ -262,7 +262,23 @@ header.global {
     margin-top: ($baseline/2);
     list-style: none;
     @include float(left);
-
+    .tab-nav-item{
+      display: inline;
+      margin: 0px;
+      .tab-nav-link{
+        font-size: em(16);
+        color: $gray;
+        padding: 26px 15px;
+        display: inline;
+        &:hover,
+        &:focus{
+          border-bottom: 4px solid $courseware-border-bottom-color;
+        }
+      }
+      .active{
+        border-bottom: 4px solid $black-t3 !important;
+      }
+    }
     li,
     div {
       display: inline-block;
@@ -337,7 +353,6 @@ header.global {
   }
 }
 
-
 // edX theme: Global Header
 // ====================
 
@@ -348,7 +363,7 @@ header.global-new {
   @include box-sizing(border-box);
   position: relative;
   width: 100%;
-  border-bottom: 4px solid $courseware-border-bottom-color;
+  border-bottom: 1px solid $gray-l1;
   box-shadow: 0 1px 5px 0 $shadow-l1;
   background: $header-bg;
 
@@ -377,6 +392,23 @@ header.global-new {
 
   .nav-global {
     @include float(left);
+    .tab-nav-item{
+      display: inline;
+      margin: 0px;
+      .tab-nav-link{
+        font-size: em(16);
+        color: $gray;
+        display: inline;
+        padding: 25px 15px;
+        &:hover,
+        &:focus{
+          border-bottom: 4px solid $courseware-border-bottom-color;
+        }
+      }
+      .active{
+        border-bottom: 4px solid $black-t3 !important;
+      }
+    }
   }
 
   .nav-account-management {

lms/templates/navigation.html

@@ -65,11 +65,23 @@ site_status_msg = get_site_status_msg(course_id)
     % if user.is_authenticated():
     <ol class="left nav-global authenticated">
       <%block name="navigation_global_links_authenticated">
-        % if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
+        % if settings.FEATURES.get('COURSES_ARE_BROWSABLE') and not show_program_listing:
           <li class="nav-global-01">
             <a href="${marketing_link('COURSES')}">${_('Find Courses')}</a>
           </li>
         % endif
+        % if show_program_listing:
+          <li class="tab-nav-item">
+            <a class="${'active ' if reverse('dashboard') == request.path else ''}tab-nav-link" href="${reverse('dashboard')}">
+              ${_("Courses")}
+            </a>
+          </li>
+          <li class="tab-nav-item">
+            <a class="${'active ' if reverse('program_listing_view') == request.path else ''}tab-nav-link" href="${reverse('program_listing_view')}">
+              ${_("Programs")}
+            </a>
+          </li>
+        % endif
         %if settings.FEATURES.get('ENABLE_SYSADMIN_DASHBOARD','') and user.is_staff:
           <li>
             ## Translators: This is short for "System administration".

openedx/core/djangoapps/programs/migrations/0007_programsapiconfig_program_listing_enabled.py

@@ -0,0 +1,19 @@
+# -*- coding: utf-8 -*-
+from __future__ import unicode_literals
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ('programs', '0006_programsapiconfig_xseries_ad_enabled'),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name='programsapiconfig',
+            name='program_listing_enabled',
+            field=models.BooleanField(default=False, verbose_name='Do we want to show program listing page'),
+        ),
+    ]

openedx/core/djangoapps/programs/models.py

@@ -79,6 +79,11 @@ class ProgramsApiConfig(ConfigurationModel):
         default=False
     )
 
+    program_listing_enabled = models.BooleanField(
+        verbose_name=_("Do we want to show program listing page"),
+        default=False
+    )
+
     @property
     def internal_api_url(self):
         """
@@ -144,3 +149,10 @@ class ProgramsApiConfig(ConfigurationModel):
         Indicates whether we should show xseries add
         """
         return self.enabled and self.xseries_ad_enabled
+
+    @property
+    def show_program_listing(self):
+        """
+        Indicates whether we want to show program listing page
+        """
+        return self.enabled and self.program_listing_enabled

themes/edx.org/lms/templates/header.html

@@ -53,26 +53,41 @@ site_status_msg = get_site_status_msg(course_id)
     </h2>
     % endif
 
+
     % if user.is_authenticated():
       % if not course or disable_courseware_header:
-        % if not nav_hidden:
-    <nav aria-label="Main" class="nav-main">
-      <ul class="left nav-global authenticated">
-        <%block name="navigation_global_links_authenticated">
-          <li class="nav-global-01">
-            <a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
-          </li>
-          <li class="nav-global-02">
-            <a href="${marketing_link('COURSES')}">${_("Find Courses")}</a>
-          </li>
-          <li class="nav-global-03">
-            <a href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a>
-          </li>
-        </%block>
-      </ul>
-    </nav>
-        % endif
+        % if not nav_hidden or show_program_listing:
+          <nav aria-label="Main" class="nav-main">
+            <ul class="left nav-global authenticated">
+              % if not nav_hidden:
+                <%block name="navigation_global_links_authenticated">
+                  <li class="nav-global-01">
+                    <a href="${marketing_link('HOW_IT_WORKS')}">${_("How it Works")}</a>
+                  </li>
+                  <li class="nav-global-02">
+                    <a href="${marketing_link('COURSES')}">${_("Find Courses")}</a>
+                  </li>
+                  <li class="nav-global-03">
+                    <a href="${marketing_link('SCHOOLS')}">${_("Schools & Partners")}</a>
+                  </li>
+                </%block>
+              % endif
+              % if show_program_listing:
+                <li class="tab-nav-item">
+                  <a class="${'active ' if reverse('dashboard') == request.path else ''}tab-nav-link" href="${reverse('dashboard')}">
+                    ${_("Courses")}
+                  </a>
+                </li>
+                <li class="tab-nav-item">
+                  <a class="${'active ' if reverse('program_listing_view') == request.path else ''}tab-nav-link" href="${reverse('program_listing_view')}">
+                    ${_("Programs")}
+                  </a>
+                </li>
+              % endif
+            </ul>
+          </nav>
       % endif
+    % endif
 
     <ul class="user">
       <li class="primary">

themes/red-theme/lms/templates/header.html

@@ -63,7 +63,7 @@ site_status_msg = get_site_status_msg(course_id)
     % if user.is_authenticated():
     <ol class="left nav-global authenticated">
       <%block name="navigation_global_links_authenticated">
-        % if settings.FEATURES.get('COURSES_ARE_BROWSABLE'):
+        % if settings.FEATURES.get('COURSES_ARE_BROWSABLE') and not show_program_listing:
           <li class="nav-global-01">
             <a href="${marketing_link('COURSES')}">${_('Find Courses')}</a>
           </li>
@@ -74,6 +74,18 @@ site_status_msg = get_site_status_msg(course_id)
             <a href="${reverse('sysadmin')}">${_("Sysadmin")}</a>
           </li>
         %endif
+        % if show_program_listing:
+          <li class="tab-nav-item">
+            <a class="${'active ' if reverse('dashboard') == request.path else ''}tab-nav-link" href="${reverse('dashboard')}">
+              ${_("Courses")}
+            </a>
+          </li>
+          <li class="tab-nav-item">
+            <a class="${'active ' if reverse('program_listing_view') == request.path else ''}tab-nav-link" href="${reverse('program_listing_view')}">
+              ${_("Programs")}
+            </a>
+          </li>
+        % endif
       </%block>
     </ol>
     <ol class="user">