PADV-1971: Remove Course selection on CoursesPage

src/features/Courses/ClassesPage/index.jsx

@@ -77,6 +77,7 @@ const ClassesPage = () => {
             columns={columns}
             handleChangeSelectedCourses={handleChangeSelectedCourses}
             isLoading={classesTable.status === RequestStatus.LOADING}
+            isSelectable
           />
 
           <TableFooter

src/features/Courses/CoursesPage/index.jsx

@@ -2,15 +2,13 @@ import { useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import { Button, Container } from '@edx/paragon';
 import { useHistory, useParams } from 'react-router-dom';
-import DOMPurify from 'dompurify';
 
 import { extractLastPathSegment } from 'helpers';
 import { fetchCoursesData } from 'features/Courses/data';
 import { RequestStatus } from 'features/constants';
 import TableFilters from 'features/Courses/TableFilters';
 import TableLayout from 'features/Courses/TableLayout';
 import { columns } from 'features/Courses/CoursesPage/columns';
-import useManageTableSelection from 'features/Courses/hooks/useManageTableSelection';
 import useFilterSearch from 'features/Courses/hooks/useFilterSearch';
 import TableFooter from 'features/Courses/TableFooter';
 
@@ -25,15 +23,6 @@ const CoursesPage = () => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const {
-    htmlResponse,
-    handleChangeSelectedCourses,
-    handleSubmitSelectedCourses,
-    hasSelectedCourses,
-  } = useManageTableSelection({
-    launchId, tableData: table, fetchData: fetchCoursesData,
-  });
-
   const {
     handleSetKeyword,
     handleResetSearch,
@@ -59,40 +48,31 @@ const CoursesPage = () => {
   };
 
   return (
-    <>
-      {/* eslint-disable react/no-danger */}
-      <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(htmlResponse) }} />
-
-      <Container size="xl" className="px-4 pt-3">
-        <h2 className="title-page mt-3 mb-3">Courses</h2>
-        <div className="page-content-container p-4 d-flex flex-column">
-          <TableFilters
-            keyword={searchParams.keyword}
-            handleSetKeyword={handleSetKeyword}
-            handleResetSearch={handleResetSearch}
-            handleSubmitSearch={handleSubmitSearch}
-          />
-
-          <TableLayout
-            data={table.data}
-            columns={columns}
-            handleChangeSelectedCourses={handleChangeSelectedCourses}
-            isLoading={table.status === RequestStatus.LOADING}
-            actionButton={actionButton}
-          />
+    <Container size="xl" className="px-4 pt-3">
+      <h2 className="title-page mt-3 mb-3">Courses</h2>
+      <div className="page-content-container p-4 d-flex flex-column">
+        <TableFilters
+          keyword={searchParams.keyword}
+          handleSetKeyword={handleSetKeyword}
+          handleResetSearch={handleResetSearch}
+          handleSubmitSearch={handleSubmitSearch}
+        />
 
-          <TableFooter
-            numPages={table.numPages}
-            currentPage={searchParams.page}
-            handleFetchDataFromPage={handleFetchDataFromPage}
-          />
+        <TableLayout
+          data={table.data}
+          columns={columns}
+          isLoading={table.status === RequestStatus.LOADING}
+          actionButton={actionButton}
+          isSelectable={false}
+        />
 
-          <Button className="align-self-end mt-4" onClick={handleSubmitSelectedCourses} disabled={!hasSelectedCourses}>
-            Submit
-          </Button>
-        </div>
-      </Container>
-    </>
+        <TableFooter
+          numPages={table.numPages}
+          currentPage={searchParams.page}
+          handleFetchDataFromPage={handleFetchDataFromPage}
+        />
+      </div>
+    </Container>
   );
 };
 

src/features/Courses/TableLayout/index.jsx

@@ -9,16 +9,14 @@ const TableLayout = ({
   data,
   columns,
   handleChangeSelectedCourses,
-  isLoading,
   actionButton,
+  ...props
 }) => (
   <Row className="justify-content-center my-4">
     <Col>
       <DataTable
-        isSelectable
         itemCount={data.length}
         onSelectedRowsChanged={handleChangeSelectedCourses}
-        isLoading={isLoading}
         columns={columns}
         data={data}
         additionalColumns={actionButton ? [
@@ -28,6 +26,7 @@ const TableLayout = ({
             Cell: ({ row }) => actionButton(row.original.url),
           },
         ] : []}
+        {...props}
       >
         <DataTable.Table />
         <DataTable.EmptyTable content="No courses found." />
@@ -39,15 +38,14 @@ const TableLayout = ({
 TableLayout.propTypes = {
   data: PropTypes.arrayOf(PropTypes.shape([])),
   columns: PropTypes.arrayOf(PropTypes.shape([])).isRequired,
-  handleChangeSelectedCourses: PropTypes.func.isRequired,
-  isLoading: PropTypes.bool,
+  handleChangeSelectedCourses: PropTypes.func,
   actionButton: PropTypes.func,
 };
 
 TableLayout.defaultProps = {
   data: [],
-  isLoading: true,
   actionButton: null,
+  handleChangeSelectedCourses: null,
 };
 
 export default TableLayout;