feat: add program discussion for learner dashboard

Author: SaadYousaf

lms/djangoapps/learner_dashboard/config/__init__.py

@@ -0,0 +1,20 @@
+"""
+This module contains various configuration settings via
+waffle switches for the learner_dashboard app.
+"""
+
+from edx_toggles.toggles import WaffleFlag
+
+# .. toggle_name: learner_dashboard.enable_program_discussions
+# .. toggle_implementation: WaffleFlag
+# .. toggle_default: False
+# .. toggle_description: Waffle flag to enable new Program discussion experience for course.
+# .. toggle_use_cases: temporary, open_edx
+# .. toggle_creation_date: 2021-08-25
+# .. toggle_target_removal_date: 2021-12-31
+# .. toggle_warnings: When the flag is ON, the new experience for Program discussions will be enabled.
+# .. toggle_tickets: TNL-8434
+ENABLE_PROGRAM_DISCUSSIONS = WaffleFlag(
+    'learner_dashboard.enable_program_discussions',
+    __name__,
+)

lms/djangoapps/learner_dashboard/config/waffle.py

@@ -12,7 +12,7 @@
 from web_fragments.fragment import Fragment
 
 from lms.djangoapps.commerce.utils import EcommerceService
-from lms.djangoapps.learner_dashboard.utils import FAKE_COURSE_KEY, strip_course_id
+from lms.djangoapps.learner_dashboard.utils import FAKE_COURSE_KEY, strip_course_id, program_discussions_is_enabled
 from openedx.core.djangoapps.catalog.constants import PathwayType
 from openedx.core.djangoapps.catalog.utils import get_pathways
 from openedx.core.djangoapps.credentials.utils import get_credentials_records_url
@@ -136,6 +136,7 @@ def render_to_fragment(self, request, program_uuid, **kwargs):  # lint-amnesty,
             'certificate_data': certificate_data,
             'industry_pathways': industry_pathways,
             'credit_pathways': credit_pathways,
+            'program_discussions_enabled': program_discussions_is_enabled()
         }
 
         html = render_to_string('learner_dashboard/program_details_fragment.html', context)

lms/djangoapps/learner_dashboard/programs.py

@@ -5,6 +5,8 @@
 
 from opaque_keys.edx.keys import CourseKey
 
+from lms.djangoapps.learner_dashboard.config.waffle import ENABLE_PROGRAM_DISCUSSIONS
+
 FAKE_COURSE_KEY = CourseKey.from_string('course-v1:fake+course+run')
 
 
@@ -15,3 +17,10 @@ def strip_course_id(path):
     """
     course_id = str(FAKE_COURSE_KEY)
     return path.split(course_id)[0]
+
+
+def program_discussions_is_enabled():
+    """
+    check if program discussion is enabled.
+    """
+    return ENABLE_PROGRAM_DISCUSSIONS.is_enabled()

lms/djangoapps/learner_dashboard/utils.py

@@ -74,6 +74,7 @@ class ProgramDetailsView extends Backbone.View {
       remainingCount,
       completedCount,
       completeProgramURL: buyButtonUrl,
+      programDiscussionEnabled: this.options.programDiscussionEnabled,
     };
     data = $.extend(data, this.programModel.toJSON());
     HtmlUtils.setHtml(this.$el, this.tpl(data));

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

@@ -837,3 +837,44 @@ $btn-color-primary: $primary-dark;
     }
   }
 }
+
+.program-detail-nav {
+  @extend .content;
+
+  display: block;
+  width: 100%;
+  padding: 40px;
+
+  .program-detail-nav-list {
+    @extend %ui-no-list;
+
+    border-bottom: 1px solid $gray-base;
+
+    .nav-item {
+      @extend %t-copy-base;
+
+      font-weight: 500;
+      font-size: 1.125rem;
+      display: inline-block;
+
+      .btn-link {
+        display: inline-block;
+        padding: ($baseline/2);
+        border: 0;
+        box-shadow: none;
+        text-shadow: none;
+        color: theme-color("primary");
+        cursor: pointer;
+
+        &:hover,
+        &:focus {
+          border-bottom: 3px solid theme-color("primary");
+        }
+
+        &.active {
+          border-bottom: 3px solid theme-color("primary");
+        }
+      }
+    }
+  }
+}

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

@@ -20,6 +20,7 @@
     userPreferences: ${user_preferences | n, dump_js_escaped_json},
     industryPathways: ${industry_pathways | n, dump_js_escaped_json},
     creditPathways: ${credit_pathways | n, dump_js_escaped_json},
+    programDiscussionEnabled: ${program_discussions_enabled | n, dump_js_escaped_json},
 });
 </%static:webpack>
 </%block>

lms/templates/learner_dashboard/program_details_fragment.html

@@ -1,5 +1,31 @@
 <header class="js-program-header program-header full-width-banner"></header>
 <!-- TODO: consider if article is the most appropriate element here -->
+
+<% if (programDiscussionEnabled) { %>
+<div class="program-detail-nav">
+    <ul class="nav nav-tabs program-detail-nav-list" id="programTabs" role="tablist">
+      <li class="nav-item" role="presentation">
+        <button class="nav-link btn-link active" id="home-tab" data-toggle="tab" data-target="#journey" type="button" role="tab" aria-controls="journey" aria-selected="true">Journey</button>
+      </li>
+      <li class="nav-item" role="presentation">
+        <button class="nav-link btn-link" id="profile-tab" data-toggle="tab" data-target="#community" type="button" role="tab" aria-controls="community" aria-selected="false">Community</button>
+      </li>
+      <li class="nav-item" role="presentation">
+        <button class="nav-link btn-link" id="contact-tab" data-toggle="tab" data-target="#live" type="button" role="tab" aria-controls="live" aria-selected="false">Live</button>
+      </li>
+      <li class="nav-item" role="presentation">
+        <button class="nav-link btn-link" id="contact-tab" data-toggle="tab" data-target="#pathways" type="button" role="tab" aria-controls="pathways" aria-selected="false">Pathways</button>
+      </li>
+    </ul>
+</div>
+<div class="tab-content" id="ProgramTabContent">
+  <div class="tab-pane fade show active" id="journey" role="tabpanel" aria-labelledby="journey-tab">Journey tab content</div>
+  <div class="tab-pane fade" id="community" role="tabpanel" aria-labelledby="community-tab">Community tab content</div>
+  <div class="tab-pane fade" id="live" role="tabpanel" aria-labelledby="live-tab">Live tab content</div>
+  <div class="tab-pane fade" id="pathways" role="tabpanel" aria-labelledby="pathaways-tab">Pathways tab content</div>
+</div>
+<% } %>
+
 <article class="program-details-content">
     <div class="program-heading">
             <% if (completedCount === totalCount) { %>