add live view breadcrumb

add courseId to courseMetadata

add locationId constant

update to requested course id

add ora url next to the title

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>
     );
   }
 }