add links to the course search tab

fixes CNVS-25165 fixes CNVS-25176 Add links to the rows, also restructure the dom so it can use flex. Adds the analytics button if it can be added as well. Test Plan Given you are set up with the new Course/People search page And you're on that page When you naviage that to that page And you have the analytics plugin installed And its enabled Then you should see a button for 'Analytics' in the top right corner Given you are set up with the new Course/People search page And you're on that page When you naviage that to that page And you have a list of courses Then the links on those courses should work and take you to the right place Change-Id: I36a4b9a0033a7c441b0e9abae05559dbcdd78d61 Reviewed-on: https://gerrit.instructure.com/68989 Reviewed-by: Clay Diffrient <[email protected]> Product-Review: Sterling Cobb <[email protected]> Tested-by: Jenkins QA-Review: Clare Strong <[email protected]>
ibnIrshad · Dec 21, 2015 · 83ee101 · 83ee101
1 parent 5c6f43e
commit 83ee101
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 62 deletions.
diff --git a/app/controllers/accounts_controller.rb b/app/controllers/accounts_controller.rb
@@ -196,7 +196,8 @@ def course_user_search
       can_read_course_list: can_read_course_list,
       can_read_roster: can_read_roster,
       can_create_courses: @account.grants_right?(@current_user, session, :manage_courses),
-      can_create_users: @account.root_account? && @account.grants_right?(@current_user, session, :manage_user_logins)
+      can_create_users: @account.root_account? && @account.grants_right?(@current_user, session, :manage_user_logins),
+      analytics: @account.service_enabled?(:analytics)
     }
     render template: "accounts/course_user_search"
   end

diff --git a/app/jsx/account_course_user_search/CoursesList.jsx b/app/jsx/account_course_user_search/CoursesList.jsx
@@ -11,36 +11,39 @@ define([
     propTypes: {
       courses: arrayOf(shape(CoursesListRow.propTypes)).isRequired
     },
-
     render() {
       var { courses } = this.props;
 
       return (
-        <div className="pad-box no-sides">
-          <table className="ic-Table courses-list">
-            <thead>
-              <tr>
-                <th />
-                <th>
-                  {I18n.t("Course ID")}
-                </th>
-                <th>
-                  {I18n.t("SIS ID")}
-                </th>
-                <th>
-                  {I18n.t("Teacher")}
-                </th>
-                <th>
-                  {I18n.t("Enrollments")}
-                </th>
-                <th />
-              </tr>
-            </thead>
 
-            <tbody>
-              {courses.map((course) => <CoursesListRow key={course.id} {...course} />)}
-            </tbody>
-          </table>
+        <div className="content-box" role='grid'>
+          <div role='row' className="grid-row border border-b pad-box-mini">
+            <div className="col-md-3">
+              <div className="grid-row">
+                <div className="col-xs-2">
+                </div>
+                <div className="col-xs-10" role='columnheader'>
+                  <strong><small>{I18n.t("Course")}</small></strong>
+                </div>
+              </div>
+            </div>
+            <div role='columnheader' className="col-xs-1">
+              <strong><small>{I18n.t("SIS ID")}</small></strong>
+            </div>
+            <div role='columnheader' className="col-md-3">
+              <strong><small>{I18n.t("Teacher")}</small></strong>
+            </div>
+            <div role='columnheader' className="col-md-3">
+              <strong><small>{I18n.t("Enrollments")}</small></strong>
+            </div>
+            <div role='columnheader' className="col-md-2">
+              <span className='screenreader-only'>{I18n.t("Course option links")}</span>
+            </div>
+          </div>
+
+          <div className='courses-list' role='rowgroup'>
+            {courses.map((course) => <CoursesListRow key={course.id} {...course} />)}
+          </div>
         </div>
       );
     }

diff --git a/app/jsx/account_course_user_search/CoursesListRow.jsx b/app/jsx/account_course_user_search/CoursesListRow.jsx
@@ -1,9 +1,11 @@
 define([
+  'jquery',
   "react",
   "i18n!account_course_user_search",
   "underscore",
   "./UserLink",
-], function(React, I18n, _, UserLink) {
+  "compiled/views/courses/roster/CreateUsersView"
+], function($, React, I18n, _, UserLink, CreateUsersView) {
 
   var { number, string, func, shape, arrayOf } = React.PropTypes;
 
@@ -15,37 +17,47 @@ define([
       total_students: number.isRequired,
       teachers: arrayOf(shape(UserLink.propTypes)).isRequired
     },
-
+    addUserToCourse () {
+      let createUsersBackboneView = new CreateUsersView({title: I18n.t('Add People'), height: 520});
+      createUsersBackboneView.open();
+      createUsersBackboneView.on('close', () => {
+        createUsersBackboneView.remove()
+      });
+    },
     render() {
-      var { id, name, workflow_state, sis_course_id, total_students, teachers } = this.props;
-      var url = `/courses/${id}`;
-      var isPublished = workflow_state !== "unpublished";
+      let { id, name, workflow_state, sis_course_id, total_students, teachers } = this.props;
+      let url = `/courses/${id}`;
+      let isPublished = workflow_state !== "unpublished";
 
       return (
-        <tr>
-          <td style={{width: 16}}>
-            {isPublished && (<i className="icon-publish courses-list__published-icon" />)}
-          </td>
-          <td>
-            <a href={url}>{name}</a>
-          </td>
-          <td>
-            {sis_course_id}
-          </td>
-          <td>
-            {teachers &&
-            <div style={{margin: "-6px 0 -9px 0"}}>
-              {teachers.map((teacher) => <UserLink key={teacher.id} {...teacher} />)}
+        <div role='row' className="grid-row pad-box-mini border border-b">
+          <div className="col-md-3">
+            <div role='gridcell' className="grid-row">
+              <div className="col-xs-2">{isPublished && (<i className="icon-publish courses-list__published-icon" />)}</div>
+              <div className="col-xs-10"><a href={url}>{name}</a></div>
             </div>
-            }
-          </td>
-          <td>
+          </div>
+
+          <div className="col-xs-1" role='gridcell'>
+            {sis_course_id}
+            1
+          </div>
+
+          <div className="col-md-3" role='gridcell'>
+            {teachers && teachers.map((teacher) => <UserLink key={teacher.id} {...teacher} />)}
+          </div>
+
+          <div className="col-md-3" role='gridcell'>
             {total_students}
-          </td>
-          <td>
-            {/* TODO actions */}
-          </td>
-        </tr>
+          </div>
+          <div className="col-md-2" role='gridcell'>
+            <div className="grid-row" style={{justifyContent: "flex-end"}}>
+              <a className="al-trigger-gray icon-plus" href="#" onClick={this.addUserToCourse}></a>
+              <a className="al-trigger-gray icon-stats" href={`/courses/${this.props.id}/statistics`}></a>
+              <a className="al-trigger-gray icon-settings" href={`/courses/${this.props.id}/settings`}></a>
+            </div>
+          </div>
+        </div>
       );
     }
   });

diff --git a/app/jsx/account_course_user_search/CoursesPane.jsx b/app/jsx/account_course_user_search/CoursesPane.jsx
@@ -91,7 +91,7 @@ define([
           />
 
           {courses && courses.data &&
-            <CoursesList courses={courses.data} />
+            <CoursesList accountId={this.props.accountId} courses={courses.data} />
           }
 
           {renderSearchMessage(courses, this.fetchMoreCourses, I18n.t("No courses found"))}

diff --git a/app/jsx/account_course_user_search/UserLink.jsx b/app/jsx/account_course_user_search/UserLink.jsx
@@ -16,7 +16,7 @@ define([
       return (
         <div>
           {!!avatar_image_url &&
-          <span className="ic-avatar" style={{width: 30, height: 30, margin: "-1px 10px 1px 0"}}>
+          <span className="ic-avatar" style={{width: 25, height: 25, margin: "-1px 10px 1px 0"}}>
               <img src={avatar_image_url} />
             </span>
           }

diff --git a/app/jsx/account_course_user_search/index.jsx b/app/jsx/account_course_user_search/index.jsx
@@ -20,7 +20,8 @@ define([
     propTypes: {
       accountId: string.isRequired,
       permissions: shape({
-        theme_editor: bool.isRequired
+        theme_editor: bool.isRequired,
+        analytics: bool.isRequired
       }).isRequired
     },
 
@@ -68,10 +69,10 @@ define([
             </div>
             <div className="col-xs-4 padding-none align-right">
               <div>
-                {/* TODO: figure out a way for plugins to inject stuff like
-                  <a href="" className="btn button-group">{I18n.t("Analytics")}</a>
-                  w/o defining them here
-                  */}
+                {
+                  permissions.analytics &&
+                  <a href={`/accounts/${accountId}/analytics`} className="btn button-group">{I18n.t("Analytics")}</a>
+                }
                 {
                   permissions.theme_editor &&
                   <a href={`/accounts/${accountId}/theme_editor`} className="btn button-group">{I18n.t("Theme Editor")}</a>

diff --git a/app/stylesheets/bundles/account_course_user_search.scss b/app/stylesheets/bundles/account_course_user_search.scss
@@ -1,5 +1,14 @@
 @import "base/environment";
 
+.grid-row .icon-stats {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+
+.grid-row {
+  padding-right: 10px;
+}
+
 .padding-none {
   padding: 0;
 }

diff --git a/spec/selenium/admin/new_course_search_spec.rb b/spec/selenium/admin/new_course_search_spec.rb
@@ -14,7 +14,7 @@
   end
 
   def get_rows
-    ff('.courses-list > tbody > tr')
+    ff('.courses-list [role=row]')
   end
 
   it "should not show the courses tab without permission" do
@@ -106,4 +106,4 @@ def get_rows
     expect(user_link).to include_text(@user.name)
     expect(user_link['href']).to eq user_url(@user)
   end
-end
+end