diff --git a/lms/djangoapps/learner_dashboard/config/__init__.py b/lms/djangoapps/learner_dashboard/config/__init__.py
new file mode 100644
index 0000000000000000000000000000000000000000..e69de29bb2d1d6434b8b29ae775ad8c2e48c5391
diff --git a/lms/djangoapps/learner_dashboard/config/waffle.py b/lms/djangoapps/learner_dashboard/config/waffle.py
new file mode 100644
index 0000000000000000000000000000000000000000..0809383a4896071a293e9d525394abe14b22b6cd
--- /dev/null
+++ b/lms/djangoapps/learner_dashboard/config/waffle.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__,
+)
diff --git a/lms/djangoapps/learner_dashboard/programs.py b/lms/djangoapps/learner_dashboard/programs.py
index e8736f48a1bfcb6256173c3ef9ad7cb5bd28faf6..4d9e46f54b04e2686cadbdf02ed78a7d00e88ec0 100644
--- a/lms/djangoapps/learner_dashboard/programs.py
+++ b/lms/djangoapps/learner_dashboard/programs.py
@@ -12,7 +12,7 @@ from django.utils.translation import ugettext_lazy as _ # lint-amnesty, pylint:
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 @@ class ProgramDetailsFragmentView(EdxFragmentView):
'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)
diff --git a/lms/djangoapps/learner_dashboard/utils.py b/lms/djangoapps/learner_dashboard/utils.py
index 6dfa1e066056d2fb8fe15a7157bc8b405678f543..2b0385a9c6cdd7e130d00800aae26cae37e0aff3 100644
--- a/lms/djangoapps/learner_dashboard/utils.py
+++ b/lms/djangoapps/learner_dashboard/utils.py
@@ -5,6 +5,8 @@ The utility methods and functions to help the djangoapp logic
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()
diff --git a/lms/static/js/learner_dashboard/views/program_details_view.js b/lms/static/js/learner_dashboard/views/program_details_view.js
index c22779f8a36b915cb191712dad54c3d676540cfa..5ff5d7456a413285dd9ae04c9847542df6be5f00 100644
--- a/lms/static/js/learner_dashboard/views/program_details_view.js
+++ b/lms/static/js/learner_dashboard/views/program_details_view.js
@@ -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));
diff --git a/lms/static/sass/views/_program-details.scss b/lms/static/sass/views/_program-details.scss
index 6d786588f135f3804e150af6edcdc1ecafc5083b..43d4929515448b5dc22588eea3e1beee73422f6c 100644
--- a/lms/static/sass/views/_program-details.scss
+++ b/lms/static/sass/views/_program-details.scss
@@ -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");
+ }
+ }
+ }
+ }
+}
diff --git a/lms/templates/learner_dashboard/program_details_fragment.html b/lms/templates/learner_dashboard/program_details_fragment.html
index f686c4f94366c60ebc4fc57a20cc7f1c9b7e7b0a..015f01c9a7a81b4264485a97bcc9aa365404949e 100644
--- a/lms/templates/learner_dashboard/program_details_fragment.html
+++ b/lms/templates/learner_dashboard/program_details_fragment.html
@@ -20,6 +20,7 @@ ProgramDetailsFactory({
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>
diff --git a/lms/templates/learner_dashboard/program_details_view.underscore b/lms/templates/learner_dashboard/program_details_view.underscore
index a0523e3cad25bfc2383cc791feff15cf778dbfbd..304565b684921e3e7f80d6857245f22e252c2b74 100644
--- a/lms/templates/learner_dashboard/program_details_view.underscore
+++ b/lms/templates/learner_dashboard/program_details_view.underscore
@@ -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) { %>