Merge pull request #5 from edx/leangseu-edx/add-breadcrumb

add live view breadcrumb

src/containers/ListView/ListView.scss

@@ -1,3 +0,0 @@
-#ora-esg-list-view {
-  padding: 20px;
-}

src/containers/ListView/ListViewBreadcrumb.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import { ArrowBack } from '@edx/paragon/icons';
+import { Hyperlink } from '@edx/paragon'
+
+import { locationId } from '../../data/constants/app';
+import selectors from 'data/selectors';
+
+/**
+ * <ListViewBreadcrumb />
+ */
+export const ListViewBreadcrumb = ({ courseId, oraName }) => {
+  const openResponseUrl = `${process.env.LMS_BASE_URL}/courses/${courseId}/instructor#view-open_response_assessment`;
+  const oraUrl = `${process.env.LMS_BASE_URL}/courses/${courseId}/jump_to/${locationId}`;
+  return (
+    <>
+      <Hyperlink className="py-4" destination={openResponseUrl}>
+        <ArrowBack className="mr-3" />
+        Back to all open responses
+      </Hyperlink>
+      <p className="h3 py-4">{oraName}<Hyperlink
+        destination={oraUrl}
+        target="_blank"
+      /></p>
+    </>
+  );
+};
+ListViewBreadcrumb.defaultProps = {
+  courseId: '',
+};
+ListViewBreadcrumb.propTypes = {
+  courseId: PropTypes.string,
+};
+
+export const mapStateToProps = (state) => ({
+  courseId: selectors.app.courseId(state),
+  oraName: selectors.app.oraName(state),
+});
+
+export const mapDispatchToProps = {
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ListViewBreadcrumb);

src/containers/ListView/index.jsx

@@ -6,6 +6,7 @@ import {
   DataTable,
   TextFilter,
   MultiSelectDropdownFilter,
+  Container,
 } from '@edx/paragon';
 
 import {
@@ -17,6 +18,7 @@ import thunkActions from 'data/thunkActions';
 
 import StatusBadge from 'components/StatusBadge';
 import ReviewModal from 'containers/ReviewModal';
+import ListViewBreadcrumb from './ListViewBreadcrumb';
 import './ListView.scss';
 
 const gradeStatusOptions = Object.keys(gradingStatusDisplay).map(key => ({
@@ -58,7 +60,8 @@ export class ListView extends React.Component {
     }
 
     return (
-      <div id="ora-esg-list-view">
+      <Container className="py-4">
+        <ListViewBreadcrumb />
         <DataTable
           isFilterable
           numBreakoutFilters={2}
@@ -116,7 +119,7 @@ export class ListView extends React.Component {
           <DataTable.TableFooter />
         </DataTable>
         <ReviewModal />
-      </div>
+      </Container>
     );
   }
 }

src/data/constants/app.js

@@ -2,3 +2,4 @@ import { getConfig } from '@edx/frontend-platform';
 
 // eslint-disable-next-line import/prefer-default-export
 export const routePath = `${getConfig().PUBLIC_PATH}:courseId`;
+export const locationId = window.location.pathname.slice(1)

src/data/reducers/app.js

@@ -13,6 +13,7 @@ const initialState = {
     name: '',
     number: '',
     org: '',
+    courseId: '',
   },
   showReview: false,
   showRubric: false,

src/data/selectors/app.js

@@ -9,6 +9,7 @@ export const simpleSelectors = {
   showRubric: state => state.app.showRubric,
   grading: state => state.app.grading,
   courseMetadata: state => state.app.courseMetadata,
+  courseId: state => state.app.courseMetadata.courseId,
   oraName: state => state.app.oraMetadata.name,
   oraPrompt: state => state.app.oraMetadata.prompt,
   oraTypes: state => state.app.oraMetadata.type,

src/data/services/lms/api.js

@@ -23,7 +23,7 @@ const mockFailure = (returnValFn) => (...args) => (
  * get('/api/initialize', { ora_location, course_id? })
  * @return {
  *   oraMetadata: { name, prompt, type ('individual' vs 'team')  },
- *   courseMetadata: { courseOrg, courseName, courseNumber },
+ *   courseMetadata: { courseOrg, courseName, courseNumber, courseId },
  *   submissions: {
  *     [submissionId]: {
  *       id: <submissionId>, (not currently used)

src/data/services/lms/fakeData/course.js

@@ -1,5 +1,6 @@
 export const org = 'AuroraU';
 export const number = '101';
 export const title = 'Time Travel 101';
+export const courseId = 'course-v1:Foo+TT101+R0';
 
-export default { org, number, title };
+export default { org, number, title, courseId  };

src/data/thunkActions/app.js

@@ -2,8 +2,7 @@ import { StrictDict } from 'utils';
 
 import actions from 'data/actions';
 import api from 'data/services/lms/api';
-
-const locationId = window.location.pathname.slice(1);
+import { locationId } from '../constants/app';
 
 /**
  * initialize the app, loading ora and course metadata from the api, and loading the initial