Add filters to course activity section

lms/static/scripts/frontend_apps/components/dashboard/CourseActivity.tsx

@@ -1,12 +1,15 @@
 import { Link } from '@hypothesis/frontend-shared';
 import { useMemo } from 'preact/hooks';
-import { Link as RouterLink, useParams } from 'wouter-preact';
+import { Link as RouterLink, useLocation, useParams } from 'wouter-preact';
 
 import type { AssignmentsResponse, Course } from '../../api-types';
 import { useConfig } from '../../config';
-import { urlPath, useAPIFetch } from '../../utils/api';
+import { useAPIFetch } from '../../utils/api';
+import { useDashboardFilters } from '../../utils/dashboard/hooks';
+import { assignmentURL, courseURL } from '../../utils/dashboard/navigation';
 import { useDocumentTitle } from '../../utils/hooks';
-import { replaceURLParams } from '../../utils/url';
+import { recordToQueryString, replaceURLParams } from '../../utils/url';
+import DashboardActivityFilters from './DashboardActivityFilters';
 import DashboardBreadcrumbs from './DashboardBreadcrumbs';
 import FormattedDate from './FormattedDate';
 import OrderableActivityTable from './OrderableActivityTable';
@@ -19,13 +22,12 @@ type AssignmentsTableRow = {
   replies: number;
 };
 
-const assignmentURL = (id: number) => urlPath`/assignments/${String(id)}`;
-
 /**
  * Activity in a list of assignments that are part of a specific course
  */
 export default function CourseActivity() {
   const { courseId } = useParams<{ courseId: string }>();
+  const [, navigate] = useLocation();
   const { dashboard } = useConfig(['dashboard']);
   const { routes } = dashboard;
   const course = useAPIFetch<Course>(
@@ -51,6 +53,9 @@ export default function CourseActivity() {
 
   useDocumentTitle(course.data?.title ?? 'Untitled course');
 
+  const { filters, updateFilters } = useDashboardFilters();
+  const { assignmentIds, studentIds } = filters;
+
   return (
     <div className="flex flex-col gap-y-5">
       <div>
@@ -63,6 +68,23 @@ export default function CourseActivity() {
           {course.data && course.data.title}
         </h2>
       </div>
+      <DashboardActivityFilters
+        selectedCourseIds={[courseId]}
+        onCoursesChange={newCourseIds => {
+          const firstDifferentCourse = newCourseIds.find(c => c !== courseId);
+          if (firstDifferentCourse) {
+            // When a course other than the "active" one (the one represented
+            // in the URL) is selected, navigate to that course and propagate
+            // the rest of the filters.
+            const queryString = recordToQueryString(filters);
+            navigate(`${courseURL(firstDifferentCourse)}${queryString}`);
+          }
+        }}
+        selectedAssignmentIds={assignmentIds}
+        onAssignmentsChange={assignmentIds => updateFilters({ assignmentIds })}
+        selectedStudentIds={studentIds}
+        onStudentsChange={studentIds => updateFilters({ studentIds })}
+      />
       <OrderableActivityTable
         loading={assignments.isLoading}
         title={course.data?.title ?? 'Loading...'}

lms/static/scripts/frontend_apps/components/dashboard/OrganizationActivity.tsx

@@ -6,6 +6,7 @@ import type { CoursesResponse } from '../../api-types';
 import { useConfig } from '../../config';
 import { urlPath, useAPIFetch } from '../../utils/api';
 import { useDashboardFilters } from '../../utils/dashboard/hooks';
+import { courseURL } from '../../utils/dashboard/navigation';
 import { useDocumentTitle } from '../../utils/hooks';
 import { replaceURLParams } from '../../utils/url';
 import DashboardActivityFilters from './DashboardActivityFilters';
@@ -19,8 +20,6 @@ type CoursesTableRow = {
   last_launched: string | null;
 };
 
-const courseURL = (id: number) => urlPath`/courses/${String(id)}`;
-
 /**
  * List of courses that belong to a specific organization
  */

lms/static/scripts/frontend_apps/utils/dashboard/navigation.ts

@@ -0,0 +1,9 @@
+import { urlPath } from '../api';
+
+export function assignmentURL(id: number) {
+  return urlPath`/assignments/${String(id)}`;
+}
+
+export function courseURL(id: number | string) {
+  return urlPath`/courses/${String(id)}`;
+}