Merge pull request #421 from edx/awais786/ECOM-6240-tabs-design-with-sass

Awais786/ecom 6240 tabs design with sass

bower.json

@@ -16,6 +16,7 @@
     "pikaday": "https://github.com/owenmead/Pikaday.git#1.4.0",
     "clipboard": "1.5.12",
     "jquery-ui": "1.10.3",
-    "js-cookie": "2.1.2"
+    "js-cookie": "2.1.2",
+    "datatables": "1.10.12"
   }
 }

course_discovery/apps/publisher/tests/test_views.py

@@ -895,14 +895,19 @@ class ChangeStateViewTests(TestCase):
         self.assertContains(response, State.NEEDS_REVIEW.title().replace('_', ' '))
 
 
-class CourseRunListViewTests(TestCase):
-    """ Tests for the `CourseRunListView`. """
+class DashboardTests(TestCase):
+    """ Tests for the `Dashboard`. """
 
     def setUp(self):
-        super(CourseRunListViewTests, self).setUp()
+        super(DashboardTests, self).setUp()
         self.user = UserFactory(is_staff=True)
         self.client.login(username=self.user.username, password=USER_PASSWORD)
-        self.page_url = reverse('publisher:publisher_course_runs')
+        self.page_url = reverse('publisher:publisher_dashboard')
+
+        # Create courses with `DRAFT` and `NEEDS_REVIEW` and PUBLISHED state
+        self.course_run_1 = factories.CourseRunFactory(state=factories.StateFactory(name=State.DRAFT))
+        self.course_run_2 = factories.CourseRunFactory(state=factories.StateFactory(name=State.NEEDS_REVIEW))
+        self.course_run_3 = factories.CourseRunFactory(state=factories.StateFactory(name=State.PUBLISHED))
 
     def test_page_without_login(self):
         """ Verify that user can't access course runs list page when not logged in. """
@@ -922,34 +927,42 @@ class CourseRunListViewTests(TestCase):
     def test_page_with_login(self):
         """ Verify that user can access course runs list page when logged in. """
         response = self.client.get(self.page_url)
-
-        self.assertEqual(response.status_code, 200)
-
-    def test_published_and_unpublished_course_runs(self):
-        """ Verify that user can access published and un-published course runs. """
-        # Create two courses with `DRAFT` and `NEEDS_REVIEW` state
-        draft_state = factories.StateFactory(name=State.DRAFT)
-        in_review_state = factories.StateFactory(name=State.NEEDS_REVIEW)
-        factories.CourseRunFactory(state=draft_state)
-        factories.CourseRunFactory(state=in_review_state)
-
-        response = self.client.get(self.page_url)
         self.assertEqual(response.status_code, 200)
 
-        # Verify that we have 2 in progress and 0 published course runs
-        self.assertEqual(len(response.context['object_list']), 2)
-        self.assertEqual(len(response.context['published_courseruns']), 0)
-
-        # create a course with `PUBLISHED` state
-        published_state = factories.StateFactory(name=State.PUBLISHED)
-        factories.CourseRunFactory(state=published_state)
-
+    def test_different_course_runs_counts(self):
+        """ Verify that user can access published and un-published and
+        studio requests course runs. """
+        self.assert_dashboard_reponse(2, 1, 2)
+
+    def test_studio_request_course_runs(self):
+        """ Verify that page loads the list course runs which need studio request. """
+        self.course_run_1.lms_course_id = 'test'
+        self.course_run_1.save()
+        self.assert_dashboard_reponse(2, 1, 1)
+        self.course_run_2.lms_course_id = 'test-2'
+        self.course_run_2.save()
+        self.assert_dashboard_reponse(2, 1, 0)
+
+    def assert_dashboard_reponse(self, unpublished_count, published_count, studio_requests):
         response = self.client.get(self.page_url)
         self.assertEqual(response.status_code, 200)
 
-        # Verify that we have 2 in progress and 1 published course runs
-        self.assertEqual(len(response.context['object_list']), 2)
-        self.assertEqual(len(response.context['published_courseruns']), 1)
+        self.assertEqual(len(response.context['unpublished_courseruns']), unpublished_count)
+        self.assertEqual(len(response.context['published_courseruns']), published_count)
+        self.assertEqual(len(response.context['studio_request_courses']), studio_requests)
+
+        if studio_requests > 0:
+            self.assertContains(response, '<table class="data-table-studio display"')
+        else:
+            self.assertContains(response, 'There are no course-runs require studio instance.')
+
+    def test_without_studio_request_course_runs(self):
+        """ Verify that studio tab indicates a message if no course-run available. """
+        self.course_run_1.lms_course_id = 'test'
+        self.course_run_1.save()
+        self.course_run_2.lms_course_id = 'test-2'
+        self.course_run_2.save()
+        self.assert_dashboard_reponse(2, 1, 0)
 
 
 class ToggleEmailNotificationTests(TestCase):

course_discovery/apps/publisher/urls.py

@@ -6,11 +6,11 @@ from django.conf.urls import url
 from course_discovery.apps.publisher import views
 
 urlpatterns = [
+    url(r'^dashboard/$', views.Dashboard.as_view(), name='publisher_dashboard'),
     url(r'^courses/new$', views.CreateCourseView.as_view(), name='publisher_courses_new'),
     url(r'^courses/(?P<pk>\d+)/view/$', views.ReadOnlyView.as_view(), name='publisher_courses_readonly'),
     url(r'^courses/(?P<pk>\d+)/edit/$', views.UpdateCourseView.as_view(), name='publisher_courses_edit'),
     url(r'^course_runs/(?P<pk>\d+)/$', views.CourseRunDetailView.as_view(), name='publisher_course_run_detail'),
-    url(r'^course_runs/$', views.CourseRunListView.as_view(), name='publisher_course_runs'),
     url(r'^course_runs/new$', views.CreateCourseRunView.as_view(), name='publisher_course_runs_new'),
     url(r'^course_runs/(?P<pk>\d+)/edit/$', views.UpdateCourseRunView.as_view(), name='publisher_course_runs_edit'),
     url(

course_discovery/apps/publisher/views.py

@@ -28,9 +28,9 @@ from course_discovery.apps.publisher.wrappers import CourseRunWrapper
 SEATS_HIDDEN_FIELDS = ['price', 'currency', 'upgrade_deadline', 'credit_provider', 'credit_hours']
 
 
-class CourseRunListView(mixins.LoginRequiredMixin, ListView):
+class Dashboard(mixins.LoginRequiredMixin, ListView):
     """ Create Course View."""
-    template_name = 'publisher/course_runs_list.html'
+    template_name = 'publisher/dashboard.html'
 
     def get_queryset(self):
         if self.request.user.is_staff:
@@ -42,14 +42,18 @@ class CourseRunListView(mixins.LoginRequiredMixin, ListView):
         return course_runs
 
     def get_context_data(self, **kwargs):
-        context = super(CourseRunListView, self).get_context_data(**kwargs)
+        context = super(Dashboard, self).get_context_data(**kwargs)
         course_runs = context.get('object_list')
         published_courseruns = course_runs.filter(
             state__name=State.PUBLISHED
-        ).select_related('course').all().order_by('-state__modified')[:5]
+        ).select_related('state').all().order_by('-state__modified')
         unpublished_courseruns = course_runs.exclude(state__name=State.PUBLISHED)
-        context['object_list'] = [CourseRunWrapper(course_run) for course_run in unpublished_courseruns]
+        studio_request_courses = unpublished_courseruns.filter(lms_course_id__isnull=True)
+
+        context['studio_request_courses'] = [CourseRunWrapper(course_run) for course_run in studio_request_courses]
+        context['unpublished_courseruns'] = [CourseRunWrapper(course_run) for course_run in unpublished_courseruns]
         context['published_courseruns'] = [CourseRunWrapper(course_run) for course_run in published_courseruns]
+
         return context
 
 

course_discovery/conf/locale/en/LC_MESSAGES/django.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2016-11-03 17:29-0400\n"
+"POT-Creation-Date: 2016-11-11 10:35+0500\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -580,8 +580,8 @@ msgstr ""
 msgid "modified"
 msgstr ""
 
-#: templates/base.html
-msgid "Course Runs"
+#: templates/base.html templates/publisher/dashboard.html
+msgid "Dashboard"
 msgstr ""
 
 #: templates/base.html
@@ -759,6 +759,7 @@ msgstr ""
 #: templates/publisher/course_run_detail/_drupal.html
 #: templates/publisher/course_run_detail/_salesforce.html
 #: templates/publisher/course_run_detail/_studio.html
+#: templates/publisher/dashboard/studio_requests.html
 msgid "Start Date"
 msgstr ""
 
@@ -786,6 +787,7 @@ msgid ""
 msgstr ""
 
 #: templates/publisher/add_course_form.html
+#: templates/publisher/dashboard/studio_requests.html
 msgid "Course Number"
 msgstr ""
 
@@ -1401,6 +1403,7 @@ msgid "No Seats Available."
 msgstr ""
 
 #: templates/publisher/course_run_detail/_studio.html
+#: templates/publisher/dashboard/studio_requests.html
 msgid "Course Name"
 msgstr ""
 
@@ -1467,6 +1470,48 @@ msgstr ""
 msgid "Looks like you haven't publish a course yet"
 msgstr ""
 
+#: templates/publisher/dashboard.html
+msgid "Course runs"
+msgstr ""
+
+#: templates/publisher/dashboard.html
+msgid "IN PROGRESS"
+msgstr ""
+
+#: templates/publisher/dashboard.html
+msgid "PREVIEW READY"
+msgstr ""
+
+#: templates/publisher/dashboard.html
+msgid "STUDIO REQUEST"
+msgstr ""
+
+#: templates/publisher/dashboard.html
+msgid "In Progress"
+msgstr ""
+
+#: templates/publisher/dashboard/studio_requests.html
+msgid ""
+"The list below are the courses that need a studio instance to start "
+"development."
+msgstr ""
+
+#: templates/publisher/dashboard/studio_requests.html
+msgid "Institution"
+msgstr ""
+
+#: templates/publisher/dashboard/studio_requests.html
+msgid "Studio Course Run Key"
+msgstr ""
+
+#: templates/publisher/dashboard/studio_requests.html
+msgid "Add"
+msgstr ""
+
+#: templates/publisher/dashboard/studio_requests.html
+msgid "There are no course-runs require studio instance."
+msgstr ""
+
 #: templates/publisher/email/change_state.html
 #: templates/publisher/email/change_state.txt
 msgid "Hi,"

course_discovery/conf/locale/en/LC_MESSAGES/djangojs.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2016-11-03 17:29-0400\n"
+"POT-Creation-Date: 2016-11-11 10:35+0500\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"

course_discovery/conf/locale/eo/LC_MESSAGES/django.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2016-11-03 17:29-0400\n"
+"POT-Creation-Date: 2016-11-11 10:35+0500\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -707,9 +707,9 @@ msgstr ""
 msgid "modified"
 msgstr "mödïfïéd Ⱡ'σяєм ιρѕυм ∂#"
 
-#: templates/base.html
-msgid "Course Runs"
-msgstr "Çöürsé Rüns Ⱡ'σяєм ιρѕυм ∂σłσя #"
+#: templates/base.html templates/publisher/dashboard.html
+msgid "Dashboard"
+msgstr "Däshßöärd Ⱡ'σяєм ιρѕυм ∂σł#"
 
 #: templates/base.html
 msgid "Courses"
@@ -901,6 +901,7 @@ msgstr "Prïörïtý çöntént Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αм#
 #: templates/publisher/course_run_detail/_drupal.html
 #: templates/publisher/course_run_detail/_salesforce.html
 #: templates/publisher/course_run_detail/_studio.html
+#: templates/publisher/dashboard/studio_requests.html
 msgid "Start Date"
 msgstr "Stärt Däté Ⱡ'σяєм ιρѕυм ∂σłσ#"
 
@@ -940,6 +941,7 @@ msgstr ""
 "Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, ¢σηѕє¢тєтυя#"
 
 #: templates/publisher/add_course_form.html
+#: templates/publisher/dashboard/studio_requests.html
 msgid "Course Number"
 msgstr "Çöürsé Nümßér Ⱡ'σяєм ιρѕυм ∂σłσя ѕι#"
 
@@ -1645,6 +1647,7 @@ msgid "No Seats Available."
 msgstr "Nö Séäts Àväïläßlé. Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт,#"
 
 #: templates/publisher/course_run_detail/_studio.html
+#: templates/publisher/dashboard/studio_requests.html
 msgid "Course Name"
 msgstr "Çöürsé Nämé Ⱡ'σяєм ιρѕυм ∂σłσя #"
 
@@ -1718,6 +1721,52 @@ msgstr ""
 "Lööks lïké ýöü hävén't püßlïsh ä çöürsé ýét Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, "
 "¢σηѕє¢тєтυя #"
 
+#: templates/publisher/dashboard.html
+msgid "Course runs"
+msgstr "Çöürsé rüns Ⱡ'σяєм ιρѕυм ∂σłσя #"
+
+#: templates/publisher/dashboard.html
+msgid "IN PROGRESS"
+msgstr "ÌN PRÖGRÉSS Ⱡ'σяєм ιρѕυм ∂σłσя #"
+
+#: templates/publisher/dashboard.html
+msgid "PREVIEW READY"
+msgstr "PRÉVÌÉW RÉÀDÝ Ⱡ'σяєм ιρѕυм ∂σłσя ѕι#"
+
+#: templates/publisher/dashboard.html
+msgid "STUDIO REQUEST"
+msgstr "STÛDÌÖ RÉQÛÉST Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт#"
+
+#: templates/publisher/dashboard.html
+msgid "In Progress"
+msgstr "Ìn Prögréss Ⱡ'σяєм ιρѕυм ∂σłσя #"
+
+#: templates/publisher/dashboard/studio_requests.html
+msgid ""
+"The list below are the courses that need a studio instance to start "
+"development."
+msgstr ""
+"Thé lïst ßélöw äré thé çöürsés thät nééd ä stüdïö ïnstänçé tö stärt "
+"dévélöpmént. Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, ¢σηѕє¢тє#"
+
+#: templates/publisher/dashboard/studio_requests.html
+msgid "Institution"
+msgstr "Ìnstïtütïön Ⱡ'σяєм ιρѕυм ∂σłσя #"
+
+#: templates/publisher/dashboard/studio_requests.html
+msgid "Studio Course Run Key"
+msgstr "Stüdïö Çöürsé Rün Kéý Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт αмєт, #"
+
+#: templates/publisher/dashboard/studio_requests.html
+msgid "Add"
+msgstr "Àdd Ⱡ'σяєм#"
+
+#: templates/publisher/dashboard/studio_requests.html
+msgid "There are no course-runs require studio instance."
+msgstr ""
+"Théré äré nö çöürsé-rüns réqüïré stüdïö ïnstänçé. Ⱡ'σяєм ιρѕυм ∂σłσя ѕιт "
+"αмєт, ¢σηѕє¢тєтυя α#"
+
 #: templates/publisher/email/change_state.html
 #: templates/publisher/email/change_state.txt
 msgid "Hi,"

course_discovery/conf/locale/eo/LC_MESSAGES/djangojs.po

@@ -7,7 +7,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2016-11-03 17:29-0400\n"
+"POT-Creation-Date: 2016-11-11 10:35+0500\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"

course_discovery/static/js/publisher/views/dashboard.js

+$(document).ready(function() {
+    $('.data-table-studio').addClass('nowrap').DataTable({
+        "autoWidth": false
+    });
+});

course_discovery/static/js/tabs.js

+$(function() {
+    'use strict';
+
+    var keys = {
+        'left':     37,
+        'right':    39,
+        'down':     40,
+        'up':       38
+    };
+    
+    var Tabs = {
+        
+        init: function() {
+            Tabs.resetTabs();
+
+            var $studioTab = $('#tab-studio'),
+                studioCount = $studioTab.data('studioCount'),
+                startTab = studioCount > 0 ? $studioTab : $('.tabs .tab').first(),
+                startPanel = $(startTab).attr('aria-controls');
+
+            Tabs.activateTab(startTab, startPanel);
+
+            Tabs.keyListener();
+            Tabs.clickListener();
+        },
+        
+        resetTabs: function() {
+            $('.tabs .tab').each(function(i, el) {
+                var tab = $(el);
+                
+                $(tab).removeClass('is-active').attr({
+                    'aria-selected': 'false',
+                    'aria-expanded': 'false',
+                    'tabindex': '-1'
+                });
+            });
+            
+            Tabs.resetTabPanels();
+        },
+        
+        resetTabPanels: function() {
+            $('.tab-panel').each(function(i, el) {
+                var panel = $(el);
+                
+                $(panel)
+                    .removeClass('is-active')
+                    .attr({
+                        'tabindex': '-1',
+                        'aria-hidden': 'true'
+                    });
+            });
+        },
+
+        keyListener: function() {
+            $('.tabs .tab').on('keydown', function(e) {
+                var key = e.which,
+                    focused = $(e.currentTarget),
+                    index = $(e.currentTarget).parent().find('.tab').index(focused),
+                    total = $(e.currentTarget).parent().find('.tab').size() - 1,
+                    panel = $(focused).attr('aria-controls');
+                
+                switch (key) {
+                    case keys.left:
+                    case keys.up:
+                        Tabs.previousTab(focused, index, total, e);
+                        break;
+                        
+                    case keys.right:
+                    case keys.down:
+                        Tabs.nextTab(focused, index, total, e);
+                        break;
+                        
+                    default:
+                        return true;
+                }
+            });
+        },
+        
+        clickListener: function() {
+            $('.tabs .tab').on('click', function(e) {
+                var tab = $(e.currentTarget),
+                    panel = $(tab).attr('aria-controls');
+
+                Tabs.resetTabs();
+                Tabs.activateTab(tab, panel);
+            });
+        },
+        
+        previousTab: function(focused, index, total, event) {            
+            var tab, panel;
+
+            if (event.altKey || event.shiftKey) {
+                return true;
+            }
+
+            if (index === 0) {
+                tab = $(focused).parent().find('.tab').last();
+                panel = $(tab).attr('aria-controls');
+                
+            } else {
+                tab = $(focused).parent().find('.tab:eq(' + index + ')').prev();
+                panel = $(tab).attr('aria-controls');
+            }
+            
+            tab.focus();
+            Tabs.activateTab(tab, panel);
+
+            return false;
+        },
+        
+        nextTab: function(focused, index, total, event) {
+            var tab, panel;
+
+            if (event.altKey || event.shiftKey) {
+                return true;
+            }
+
+            if (index === total) {
+                tab = $(focused).parent().find('.tab').first();
+                panel = $(tab).attr('aria-controls');
+                
+            } else {
+                tab = $(focused).parent().find('.tab:eq(' + index + ')').next();
+                panel = $(tab).attr('aria-controls');
+            }
+            
+            tab.focus();
+            Tabs.activateTab(tab, panel);
+            
+            return false;
+        },
+        
+        activateTab: function(tab, panel) {
+            Tabs.resetTabs();
+            Tabs.activateTabPanel(panel);
+            
+            $(tab)
+                .addClass('is-active')
+                .attr({
+                    'aria-selected': 'true',
+                    'aria-expanded': 'true',
+                    'tabindex': '0'
+                });
+        },
+        
+        activateTabPanel: function(panel) {
+            Tabs.resetTabPanels();
+            $('#' + panel)
+                .addClass('is-active')
+                .attr('aria-hidden', 'false');
+        }
+    };
+    
+    Tabs.init();
+});

course_discovery/static/sass/_build.scss

@@ -24,3 +24,4 @@
 @import "base";
 @import 'publisher/course_form';
 @import 'publisher/course_detail';
+@import 'publisher/dashboard';

course_discovery/static/sass/publisher/dashboard.scss

+.publisher-container {
+  font-family: "Open Sans", Arial, Helvetica, sans-serif;
+
+  .tabs {
+    @include padding(0, 0, 0, 0);
+    @include margin(0, 0, 0, 0);
+    list-style: none;
+    display: block !important;
+
+    .tab {
+      @include padding(12px, 20px, 12px, 20px);
+      @include margin-right(1px);
+      @include float(left);
+      outline: none;
+      background: #f2f2f2;
+      margin-bottom: 0 !important;
+      position: relative;
+      text-align: center;
+      font-weight: 600;
+      font-size: 15px;
+      color: #949494;
+      text-transform: capitalize;
+      text-decoration: none;
+      border: {
+        width: 2px;
+        style: solid;
+        color: #f2f2f2;
+        bottom-width: 0;
+      }
+
+      span {
+        display: block;
+        margin-bottom: 8px;
+        font-size: 22px;
+      }
+
+      &.is-active {
+        cursor: default;
+        background: white;
+        color: #169bd5;
+        border: {
+          width: 2px;
+          style: solid;
+          color: #169bd5;
+          bottom-width: 0;
+        }
+
+        &:after {
+          @include right(0);
+          @include left(0);
+          content: '';
+          height: 2px;
+          background: white;
+          position: absolute;
+          bottom: -2px;
+          z-index: 1;
+        }
+      }
+
+      &:hover {
+        border-color: #eee;
+        background: #eee;
+        color: #757575;
+        cursor: pointer;
+
+        &.is-active {
+          cursor: default;
+          border-color: #169bd5;
+          background: white;
+          color: #169bd5;
+        }
+      }
+
+      &:focus {
+        box-shadow: none;
+        border:1px solid #169bd5;
+      }
+    }
+
+    &:before,
+    &:after {
+      content: '';
+      display: table;
+      clear: both;
+    }
+  }
+
+  .tab-panel {
+    @include padding(35px, 20px, 35px, 20px);
+    display: none;
+    border: 2px solid #169bd5;
+    background-color: #fff;
+    margin-bottom: 50px;
+    outline: none;
+
+    .title {
+      margin-top: 0;
+    }
+
+    p {
+      margin-top: 0;
+    }
+
+    table {
+
+      thead {
+
+        tr {
+
+          td {
+              @include text-align(left);
+          }
+        }
+      }
+
+      tr {
+
+        td {
+            @include text-align(right);
+        }
+      }
+    }
+
+    .form-group {
+      @include margin(0, 0, 0, 0);
+
+      input {
+        @include padding-left(6px);
+        @include padding-right(6px);
+        height: 25px;
+        border-radius: 0;
+        border: 1px solid #bebebe;
+        width: 50%;
+        box-shadow: inset 0 1px #666;
+      }
+
+      .btn-inline {
+        @include padding(3px, 20px, 3px, 20px);
+        @include margin-left(6px);
+        background: #169bd5;
+        border-radius: 4px;
+        border: none;
+        height: 25px;
+        color: white;
+
+        &:hover {
+          cursor: pointer;
+          background: #0e8dc4;
+        }
+      }
+    }
+
+    .table-view {
+      display: table;
+      width: 100%;
+      border: 0;
+
+      .table-row {
+        @include text-align(center);
+        display: table-row;
+
+        .table-col {
+          @include padding(10px, 5px, 10px, 5px);
+          display: table-cell;
+          vertical-align: middle;
+          color: #333;
+          font-size: 14px;
+          border: {
+            width: 1px 0 0 1px;
+            style: solid;
+            color: #797979;
+          }
+
+          &:first-child {
+            @include text-align(left);
+          }
+        }
+
+        &.table-head {
+
+          .table-col {
+            background: #ccc !important;
+            font-weight: bold;
+
+            &:first-child {
+              @include text-align(center);
+            }
+          }
+        }
+      }
+
+      &.table-striped {
+        .table-row {
+
+          &:nth-child(odd) {
+            .table-col {
+              background: #f2f2f2;
+            }
+          }
+        }
+      }
+    }
+
+    &.is-active {
+      display: block;
+    }
+  }
+}
+

course_discovery/templates/base.html

@@ -15,6 +15,7 @@
     <script src="{% static 'bower_components/underscore/underscore.js' %}"></script>
     <script src="{% static 'bower_components/moment/moment.js' %}"></script>
     <script src="{% static 'bower_components/pikaday/pikaday.js' %}"></script>
+    <script src="{% static 'bower_components/datatables/media/js/jquery.dataTables.js' %}"></script>
     <script src="{% static 'js/publisher/views/navbar.js' %}"></script>
     <script src="{% static 'js/utils.js' %}"></script>
     <script src="{% url 'javascript-catalog' %}"></script>
@@ -33,6 +34,7 @@
             {% endif %}
             <link rel="stylesheet" href="{% static 'bower_components/font-awesome/css/font-awesome.css' %}" type="text/x-scss">
             <link rel="stylesheet" href="{% static 'bower_components/pikaday/css/pikaday.css' %}" type="text/x-scss">
+            <link rel="stylesheet" href="{% static 'bower_components/datatables/media/css/jquery.dataTables.css' %}" type="text/x-scss">
         {% endblock %}
     {% endcompress %}
 </head>
@@ -47,9 +49,9 @@
             </div>
             <ul class="list-divided menu-list">
                 <li class="item">
-                    {% url 'publisher:publisher_course_runs' as course_runs_url %}
-                    <a class="btn {% if request.path == course_runs_url %}active{% endif %}" href="{{ course_runs_url }}">
-                        {% trans "Course Runs" %}
+                    {% url 'publisher:publisher_dashboard' as dashboard_url %}
+                    <a class="btn {% if request.path == dashboard_url %}active{% endif %}" href="{{ dashboard_url }}">
+                        {% trans "Dashboard" %}
                     </a>
                 </li>
                 <li class="item">

course_discovery/templates/header.html

@@ -3,8 +3,7 @@
 <header class="header">
     <div class="layout-1q1h1q layout-flush layout-header">
         <nav class="layout-col layout-col-a">
-            {% url 'publisher:publisher_course_runs' as course_runs_url %}
-            <a href="{{ course_runs_url }}">
+            <a href="{% url 'publisher:publisher_dashboard' %}">
                 <img src="{% static 'images/logo.png' %}">
             </a>
         </nav>

course_discovery/templates/publisher/dashboard.html

+{% extends 'base.html' %}
+{% load i18n %}
+{% load staticfiles %}
+
+{% block title %}
+{% trans "Dashboard" %}
+{% endblock title %}
+
+{% block content %}
+    {% with studio_count=studio_request_courses|length %}
+    <div class="publisher-container">
+        <h2 class="hd-2 emphasized">{% trans "Course runs" %}</h2>
+        <ul role="tablist" class="tabs">
+            <li role="tab" id="tab-progress" class="tab" aria-selected="true" aria-expanded="false" aria-controls="progress" tabindex="0"><span>0</span>{% trans "IN PROGRESS" %}</li>
+            <li role="tab" id="tab-preview" class="tab" aria-selected="false" aria-expanded="false" aria-controls="preview" tabindex="-1"><span>0</span>{% trans "PREVIEW READY" %}</li>
+            <li role="tab" id="tab-studio" class="tab" aria-selected="false" aria-expanded="true" aria-controls="studio" tabindex="-1" data-studio-count="{{ studio_count }}"><span>{{ studio_count }}</span>{% trans "STUDIO REQUEST" %}</li>
+        </ul>
+
+        <div role="tabpanel" id="progress" class="tab-panel" aria-labelledby="tab-progress" aria-hidden="false" tabindex="-1">
+            <h2>{% trans "In Progress" %}</h2>
+            <p></p>
+        </div>
+
+        <div role="tabpanel" id="preview" class="tab-panel" aria-labelledby="tab-preview" aria-hidden="true" tabindex="-1">
+            <h2>{% trans "PREVIEW READY" %}</h2>
+            <p></p>
+        </div>
+
+        <div role="tabpanel" id="studio" class="tab-panel" aria-labelledby="tab-studio" aria-hidden="false" tabindex="0">
+            {% include "publisher/dashboard/studio_requests.html" %}
+        </div>
+    </div>
+
+    {% endwith %}
+{% endblock %}
+{% block extra_js %}
+    <script src="{% static 'js/tabs.js' %}"></script>
+    <script src="{% static 'js/publisher/views/dashboard.js' %}"></script>
+{% endblock %}

course_discovery/templates/publisher/dashboard/studio_requests.html

+{% load i18n %}
+
+{% if studio_count > 0 %}
+    <p>{% trans "The list below are the courses that need a studio instance to start development." %}</p>
+    <div class="table-view">
+        <table class="data-table-studio display" cellspacing="0" width="100%">
+            <thead>
+                <tr>
+                    <th role="button">
+                        {% trans "Course Name" %}
+                    </th>
+                    <th role="button">
+                        {% trans "Institution" %}
+                    </th>
+                    <th role="button">
+                        {% trans "Start Date" %}
+                    </th>
+                    <th role="button">
+                        {% trans "Course Number" %}
+                    </th>
+                    <th id="column-title" role="button">
+                        {% trans "Studio Course Run Key" %}
+                    </th>
+                </tr>
+            </thead>
+            <tbody>
+                {% for course_run in studio_request_courses %}
+                    <tr>
+                        <td id="course-title-{{ course_run.title }}">
+                            <a href="{% url 'publisher:publisher_course_run_detail' course_run.id %}">{{ course_run.title }}</a>
+                        </td>
+                        <td>{% if course_run.course.group_institution %}{{ course_run.course.group_institution }}{% endif %}</td>
+                        <td>
+                             {{ course_run.start|date:"Y-m-d" }}
+                        </td>
+                        <td>
+                            {{ course_run.number }}
+                        </td>
+                        <td>
+                            <div class="form-group">
+                                <input type="text" class="field-input input-text small" aria-labelledby="course-title-{{ course_run.title }} column-title" />
+                                <button class="btn-inline">{% trans "Add" %}</button>
+                            </div>
+                        </td>
+                    </tr>
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
+
+{% else %}
+    <div class="depth depth-0">
+        <p class="empty-courserun-text">{% trans "There are no course-runs require studio instance." %}</p>
+    </div>
+{% endif %}