Convert course list to React.

EDUCATOR-625, AC-620

cms/static/js/features_jsx/.eslintrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  extends: 'eslint-config-edx',
+  root: true,
+  settings: {
+    'import/resolver': 'webpack',
+  },
+};

cms/static/js/features_jsx/studio/index.jsx

@@ -0,0 +1,131 @@
+/* global gettext */
+/* eslint react/no-array-index-key: 0 */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+function CourseOrLibraryListing(props) {
+  const allowReruns = props.allowReruns;
+  const linkClass = props.linkClass;
+  const idBase = props.idBase;
+
+  return (
+    <ul className="list-courses">
+      {
+        props.items.map((item, i) =>
+          (
+            <li key={i} className="course-item" data-course-key={item.course_key}>
+              <a className={linkClass} href={item.url}>
+                <h3 className="course-title" id={`title-${idBase}-${i}`}>{item.display_name}</h3>
+                <div className="course-metadata">
+                  <span className="course-org metadata-item">
+                    <span className="label">{gettext('Organization:')}</span>
+                    <span className="value">{item.org}</span>
+                  </span>
+                  <span className="course-num metadata-item">
+                    <span className="label">{gettext('Course Number:')}</span>
+                    <span className="value">{item.number}</span>
+                  </span>
+                  { item.run &&
+                  <span className="course-run metadata-item">
+                    <span className="label">{gettext('Course Run:')}</span>
+                    <span className="value">{item.run}</span>
+                  </span>
+                  }
+                  { item.can_edit === false &&
+                  <span className="extra-metadata">{gettext('(Read-only)')}</span>
+                  }
+                </div>
+              </a>
+              { item.lms_link && item.rerun_link &&
+              <ul className="item-actions course-actions">
+                { allowReruns &&
+                <li className="action action-rerun">
+                  <a
+                    href={item.rerun_link}
+                    className="button rerun-button"
+                    aria-labelledby={`re-run-${idBase}-${i} title-${idBase}-${i}`}
+                    id={`re-run-${idBase}-${i}`}
+                  >{gettext('Re-run Course')}</a>
+                </li>
+                }
+                <li className="action action-view">
+                  <a
+                    href={item.lms_link}
+                    rel="external"
+                    className="button view-button"
+                    aria-labelledby={`view-live-${idBase}-${i} title-${idBase}-${i}`}
+                    id={`view-live-${idBase}-${i}`}
+                  >{gettext('View Live')}</a>
+                </li>
+              </ul>
+              }
+            </li>
+          ),
+        )
+      }
+    </ul>
+  );
+}
+
+CourseOrLibraryListing.propTypes = {
+  allowReruns: PropTypes.bool.isRequired,
+  idBase: PropTypes.string.isRequired,
+  items: PropTypes.arrayOf(PropTypes.object).isRequired,
+  linkClass: PropTypes.string.isRequired,
+};
+
+export class StudioCourseIndex {
+  constructor(selector, context, allowReruns) {
+    // The HTML element is only conditionally shown, based on number of courses.
+    const element = document.querySelector(selector);
+    if (element) {
+      ReactDOM.render(
+        <CourseOrLibraryListing
+          items={context}
+          linkClass="course-link"
+          idBase="course"
+          allowReruns={allowReruns}
+        />,
+        element,
+      );
+    }
+  }
+}
+
+export class StudioArchivedIndex {
+  constructor(selector, context, allowReruns) {
+    // The HTML element is only conditionally shown, based on number of archived courses.
+    const element = document.querySelector(selector);
+    if (element) {
+      ReactDOM.render(
+        <CourseOrLibraryListing
+          items={context}
+          linkClass="course-link"
+          idBase="archived"
+          allowReruns={allowReruns}
+        />,
+        element,
+      );
+    }
+  }
+}
+
+export class StudioLibraryIndex {
+  constructor(selector, context) {
+    // The HTML element is only conditionally shown, based on number of libraries.
+    const element = document.querySelector(selector);
+    if (element) {
+      ReactDOM.render(
+        <CourseOrLibraryListing
+          items={context}
+          linkClass="library-link"
+          idBase="library"
+          allowReruns={false}
+        />,
+        document.querySelector(selector),
+      );
+    }
+  }
+}