add async toggle to the instructor assignments page

Author: sethbern

bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/AssignmentBuilder.module.css

@@ -68,13 +68,34 @@
 }
 
 .typeColumn {
-  width: 120px;
+  width: 160px;
 }
 
 .typeCell {
   display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  gap: 0.5rem;
+}
+
+.asyncPeerGroup {
+  display: flex;
+  flex-direction: column;
   align-items: center;
-  justify-content: flex-start;
+  gap: 0.2rem;
+  padding-bottom: 0.25rem;
+  cursor: pointer;
+  user-select: none;
+}
+
+.asyncPeerText {
+  font-size: 0.7rem;
+  color: var(--surface-500);
+  white-space: nowrap;
+}
+
+.asyncPeerGroup:hover .asyncPeerText {
+  color: var(--surface-700);
 }
 
 .typeTag {

bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/AssignmentBuilder.tsx

@@ -144,6 +144,18 @@ export const AssignmentBuilder = () => {
     }
   };
 
+  const handlePeerAsyncChange = async (assignment: Assignment, peer_async_visible: boolean) => {
+    try {
+      await updateAssignment({
+        ...assignment,
+        peer_async_visible
+      });
+      toast.success(`Async peer ${peer_async_visible ? "enabled" : "disabled"}`);
+    } catch (error) {
+      toast.error("Failed to update async peer setting");
+    }
+  };
+
   const handleWizardComplete = async () => {
     const formValues = getValues();
     const payload: CreateAssignmentPayload = {
@@ -195,6 +207,7 @@ export const AssignmentBuilder = () => {
           onVisibilityChange={handleVisibilityChange}
           onReleasedChange={handleReleasedChange}
           onEnforceDueChange={handleEnforceDueChange}
+          onPeerAsyncChange={handlePeerAsyncChange}
           onRemove={onRemove}
         />
       )}

bases/rsptx/assignment_server_api/assignment_builder/src/components/routes/AssignmentBuilder/components/list/AssignmentList.tsx

@@ -1,5 +1,6 @@
 import { SearchInput } from "@components/ui/SearchInput";
 import { Button } from "primereact/button";
+import { Checkbox } from "primereact/checkbox";
 import { Column } from "primereact/column";
 import { confirmDialog, ConfirmDialog } from "primereact/confirmdialog";
 import { DataTable } from "primereact/datatable";
@@ -21,6 +22,7 @@ interface AssignmentListProps {
   onVisibilityChange: (assignment: Assignment, visible: boolean) => void;
   onReleasedChange: (assignment: Assignment, released: boolean) => void;
   onEnforceDueChange: (assignment: Assignment, enforce_due: boolean) => void;
+  onPeerAsyncChange: (assignment: Assignment, peer_async_visible: boolean) => void;
   onRemove: (assignment: Assignment) => void;
 }
 
@@ -34,6 +36,7 @@ export const AssignmentList = ({
   onVisibilityChange,
   onReleasedChange,
   onEnforceDueChange,
+  onPeerAsyncChange,
   onRemove
 }: AssignmentListProps) => {
   const visibilityBodyTemplate = (rowData: Assignment) => (
@@ -100,6 +103,17 @@ export const AssignmentList = ({
       >
         {rowData.kind || "Unknown"}
       </span>
+      {rowData.kind === "Peer" && (
+        <label className={styles.asyncPeerGroup}>
+          <Checkbox
+            checked={rowData.peer_async_visible}
+            onChange={(e) => onPeerAsyncChange(rowData, !!e.checked)}
+            tooltip={rowData.peer_async_visible ? "Disable async peer" : "Enable async peer"}
+            tooltipOptions={{ position: "top" }}
+          />
+          <span className={styles.asyncPeerText}>Async Peer</span>
+        </label>
+      )}
     </div>
   );