course: make it so all lists are virtualized. This should fix #6698 among other things

Author: williamstein

src/packages/frontend/course/assignments/assignment-student-list.tsx

@@ -130,6 +130,7 @@ export function StudentListForAssignment({
   function render_students() {
     return (
       <ScrollableList
+        virtualize
         rowCount={student_list.length}
         rowRenderer={({ key }) => render_student_info(key)}
         rowKey={(index) => student_list[index]}

src/packages/frontend/course/assignments/assignment.tsx

@@ -340,7 +340,7 @@ export function Assignment({
             <DebounceInput
               debounceTimeout={500}
               element={Input as any}
-              placeholder={"Find students..."}
+              placeholder={"Filter students..."}
               value={student_search}
               onChange={(e) => set_student_search(e.target.value)}
             />

src/packages/frontend/course/assignments/assignments-panel.tsx

@@ -72,7 +72,12 @@ export function AssignmentsPanel(props: Props) {
   );
 
   // search query to restrict which assignments are shown.
-  const [search, set_search] = useState<string>("");
+  const pageFilter = useRedux(name, "pageFilter");
+  const filter = pageFilter?.get("assignments") ?? "";
+  const setFilter = (filter: string) => {
+    course_actions.setPageFilter("assignments", filter);
+  };
+
   // whether or not to show deleted assignments on the bottom
   const [show_deleted, set_show_deleted] = useState<boolean>(false);
 
@@ -95,7 +100,7 @@ export function AssignmentsPanel(props: Props) {
     ({ list, num_omitted } = util.compute_match_list({
       list,
       search_key: "path",
-      search: search.trim(),
+      search: filter.trim(),
     }));
 
     if (active_assignment_sort.get("column_name") === "due_date") {
@@ -122,7 +127,7 @@ export function AssignmentsPanel(props: Props) {
       num_omitted,
       num_deleted,
     };
-  }, [assignments, active_assignment_sort, show_deleted, search]);
+  }, [assignments, active_assignment_sort, show_deleted, filter]);
 
   function render_sort_link(column_name: string, display_name: string) {
     return (
@@ -189,6 +194,7 @@ export function AssignmentsPanel(props: Props) {
     }
     return (
       <ScrollableList
+        virtualize
         rowCount={assignments.length}
         rowRenderer={({ key, index }) => render_assignment(key, index)}
         rowKey={(index) => assignments[index]?.assignment_id ?? ""}
@@ -249,7 +255,7 @@ export function AssignmentsPanel(props: Props) {
           style={styles.show_hide_deleted({ needs_margin: num_shown > 0 })}
           onClick={() => {
             set_show_deleted(true);
-            set_search("");
+            setFilter("");
           }}
         >
           <Tip
@@ -268,8 +274,8 @@ export function AssignmentsPanel(props: Props) {
     return (
       <div style={{ marginBottom: "15px" }}>
         <FoldersToolbar
-          search={search}
-          search_change={(value) => set_search(value)}
+          search={filter}
+          search_change={setFilter}
           num_omitted={num_omitted}
           project_id={project_id}
           items={assignments}

src/packages/frontend/course/common/folders-tool-bar.tsx

@@ -3,21 +3,9 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-// BUG:
-//
-//  - this code is buggy since the SearchInput component below is NOT controlled,
-//    but some of the code assumes it is, which makes no sense.
-//    E.g., there is a clear_search prop that is passed in, which is
-//    nonsense, because the state of the search is local to the
-//    SearchInput. That's why the calls to clear
-//    the search in all the code below are all broken.
-//
-
 import { useCallback, useMemo } from "react";
-import { SearchInput } from "@cocalc/frontend/components";
-import { Space } from "antd";
-import * as immutable from "immutable";
-import { COLORS } from "@cocalc/util/theme";
+import { Input, Space } from "antd";
+import type { Map as iMap } from "immutable";
 import { SEARCH_STYLE } from "./consts";
 import { MultipleAddSearch } from "./multiple-add-search";
 
@@ -26,7 +14,7 @@ interface FoldersToolbarProps {
   search_change: (search_value: string) => void; // search_change(current_search_value)
   num_omitted?: number;
   project_id: string;
-  items: immutable.Map<string, any>;
+  items: iMap<string, any>;
   add_folders: (folders: string[]) => void; // add_folders (Iterable<T>)
   item_name: string;
   plural_item_name: string;
@@ -43,17 +31,17 @@ export function FoldersToolbar({
 }: FoldersToolbarProps) {
   return (
     <Space>
-      <SearchInput
-        placeholder={`Find ${plural_item_name}...`}
-        default_value={propsSearch}
-        on_change={search_change}
+      <Input.Search
+        allowClear
+        placeholder={`Filter ${plural_item_name}...`}
+        value={propsSearch}
+        onChange={(e) => search_change(e.target.value)}
         style={SEARCH_STYLE}
       />
       {num_omitted ? (
         <h5
           style={{
             textAlign: "center",
-            color: COLORS.GRAY_L,
             marginTop: "5px",
           }}
         >

src/packages/frontend/course/common/student-assignment-info.tsx

@@ -375,7 +375,7 @@ export function StudentAssignmentInfo({
           </div>,
         );
       }
-      return v;
+      return <Space>{v}</Space>;
     } else {
       return (
         <Button

src/packages/frontend/course/handouts/handout-student-list.tsx

@@ -61,6 +61,7 @@ export function StudentListForHandout({
   function render_students() {
     return (
       <ScrollableList
+        virtualize
         rowCount={student_list.length}
         rowRenderer={({ key }) => render_student_info(key)}
         rowKey={(index) => student_list[index]}

src/packages/frontend/course/handouts/handouts-panel.tsx

@@ -44,7 +44,12 @@ export function HandoutsPanel({
   );
 
   const [show_deleted, set_show_deleted] = useState<boolean>(false);
-  const [search, set_search] = useState<string>("");
+  
+  const pageFilter = useRedux(name, "pageFilter");
+  const filter = pageFilter?.get("handouts") ?? "";
+  const setFilter = (filter: string) => {
+    actions.setPageFilter("handouts", filter);
+  };
 
   function get_handout(id: string): HandoutRecord {
     const handout = handouts.get(id);
@@ -61,7 +66,7 @@ export function HandoutsPanel({
     ({ list, num_omitted } = util.compute_match_list({
       list,
       search_key: "path",
-      search: search.trim(),
+      search: filter.trim(),
     }));
 
     ({ list, num_deleted } = util.order_list({
@@ -101,7 +106,7 @@ export function HandoutsPanel({
           style={styles.show_hide_deleted({ needs_margin: num_shown > 0 })}
           onClick={() => {
             set_show_deleted(true);
-            set_search("");
+            setFilter("");
           }}
         >
           <Tip
@@ -139,6 +144,7 @@ export function HandoutsPanel({
     }
     return (
       <ScrollableList
+        virtualize
         rowCount={handouts.length}
         rowRenderer={({ key, index }) => render_handout(key, index)}
         rowKey={(index) => handouts[index]?.handout_id ?? ""}
@@ -180,8 +186,8 @@ export function HandoutsPanel({
 
   const header = (
     <FoldersToolbar
-      search={search}
-      search_change={(value) => set_search(value)}
+      search={filter}
+      search_change={setFilter}
       num_omitted={num_omitted}
       project_id={project_id}
       items={handouts}