Add filters to course activity section

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

@@ -1,12 +1,20 @@
 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,
+  useSearch,
+} 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 DashboardActivityFilters from './DashboardActivityFilters';
 import DashboardBreadcrumbs from './DashboardBreadcrumbs';
 import FormattedDate from './FormattedDate';
 import OrderableActivityTable from './OrderableActivityTable';
@@ -19,13 +27,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>(
@@ -52,6 +59,10 @@ export default function CourseActivity() {
   const title = course.data?.title ?? 'Untitled course';
   useDocumentTitle(title);
 
+  const { filters, updateFilters } = useDashboardFilters();
+  const { assignmentIds, studentIds } = filters;
+  const search = useSearch();
+
   return (
     <div className="flex flex-col gap-y-5">
       <div>
@@ -64,6 +75,34 @@ export default function CourseActivity() {
           {course.data && title}
         </h2>
       </div>
+      <DashboardActivityFilters
+        selectedCourseIds={[courseId]}
+        onCoursesChange={newCourseIds => {
+          // When no courses are selected (which happens if either "All courses" is
+          // selected or the active course is deselected), navigate to "All courses"
+          // section and propagate the rest of the filters.
+          if (newCourseIds.length === 0) {
+            navigate(`?${search}`);
+          }
+
+          // 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 firstDifferentCourse = newCourseIds.find(c => c !== courseId);
+          if (firstDifferentCourse) {
+            navigate(`${courseURL(firstDifferentCourse)}?${search}`);
+          }
+        }}
+        selectedAssignmentIds={assignmentIds}
+        onAssignmentsChange={assignmentIds => updateFilters({ assignmentIds })}
+        selectedStudentIds={studentIds}
+        onStudentsChange={studentIds => updateFilters({ studentIds })}
+        onClearSelection={() =>
+          // Clear every filter but courses
+          updateFilters({ studentIds: [], assignmentIds: [] })
+        }
+        hasSelection={assignmentIds.length > 0 || studentIds.length > 0}
+      />
       <OrderableActivityTable
         loading={assignments.isLoading}
         title={course.isLoading ? 'Loading...' : title}

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

@@ -17,6 +17,14 @@ export type DashboardActivityFiltersProps = {
   selectedStudentIds: string[];
   onStudentsChange: (newStudentIds: string[]) => void;
   onClearSelection?: () => void;
+
+  /**
+   * Consumers can use this to indicate that there are filters selected.
+   * If this is not provided, it will be computed based on the presence of
+   * items in either one of `selectedCourseIds`, `selectedAssignmentIds` or
+   * `selectedStudentIds`.
+   */
+  hasSelection?: boolean;
 };
 
 /**
@@ -31,11 +39,13 @@ export default function DashboardActivityFilters({
   selectedStudentIds,
   onStudentsChange,
   onClearSelection,
+  hasSelection,
 }: DashboardActivityFiltersProps) {
-  const hasSelection =
-    selectedStudentIds.length > 0 ||
-    selectedAssignmentIds.length > 0 ||
-    selectedCourseIds.length > 0;
+  const hasFiltersSelected =
+    hasSelection ??
+    (selectedStudentIds.length > 0 ||
+      selectedAssignmentIds.length > 0 ||
+      selectedCourseIds.length > 0);
   const { dashboard } = useConfig(['dashboard']);
   const { routes } = dashboard;
 
@@ -146,7 +156,7 @@ export default function DashboardActivityFilters({
           </MultiSelect.Option>
         ))}
       </MultiSelect>
-      {hasSelection && onClearSelection && (
+      {hasFiltersSelected && onClearSelection && (
         <IconButton
           title="Clear filters"
           icon={CancelIcon}

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 DashboardActivityFilters from './DashboardActivityFilters';
 import FormattedDate from './FormattedDate';
@@ -18,8 +19,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)}`;
+}