From 6f31feae0f5345227bcf079b477ded3fcdcb0bc9 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro.celaya@hypothes.is>
Date: Wed, 11 Sep 2024 14:17:10 +0200
Subject: [PATCH] Add button to sync grades

---
 .../dashboard/AssignmentActivity.tsx          | 73 ++++++++++---------
 .../components/dashboard/SyncGradesButton.tsx |  9 +++
 2 files changed, 48 insertions(+), 34 deletions(-)
 create mode 100644 lms/static/scripts/frontend_apps/components/dashboard/SyncGradesButton.tsx

diff --git a/lms/static/scripts/frontend_apps/components/dashboard/AssignmentActivity.tsx b/lms/static/scripts/frontend_apps/components/dashboard/AssignmentActivity.tsx
index 9abaa7ac72..76e77ddac8 100644
--- a/lms/static/scripts/frontend_apps/components/dashboard/AssignmentActivity.tsx
+++ b/lms/static/scripts/frontend_apps/components/dashboard/AssignmentActivity.tsx
@@ -1,3 +1,4 @@
+import { Button } from '@hypothesis/frontend-shared';
 import classnames from 'classnames';
 import { useMemo } from 'preact/hooks';
 import { useLocation, useParams, useSearch } from 'wouter-preact';
@@ -18,6 +19,7 @@ import FormattedDate from './FormattedDate';
 import GradeIndicator from './GradeIndicator';
 import type { OrderableActivityTableColumn } from './OrderableActivityTable';
 import OrderableActivityTable from './OrderableActivityTable';
+import SyncGradesButton from './SyncGradesButton';
 
 type StudentsTableRow = {
   lms_id: string;
@@ -33,7 +35,7 @@ type StudentsTableRow = {
  */
 export default function AssignmentActivity() {
   const { dashboard } = useConfig(['dashboard']);
-  const { routes } = dashboard;
+  const { routes, user } = dashboard;
   const { assignmentId, organizationPublicId } = useParams<{
     assignmentId: string;
     organizationPublicId?: string;
@@ -133,40 +135,43 @@ export default function AssignmentActivity() {
           {assignment.data && title}
         </h2>
       </div>
-      {assignment.data && (
-        <DashboardActivityFilters
-          courses={{
-            activeItem: assignment.data.course,
-            // When the active course is cleared, navigate to home, but keep
-            // active assignment and students
-            onClear: () =>
-              navigate(
-                urlWithFilters(
-                  { studentIds, assignmentIds: [assignmentId] },
-                  { path: '' },
+      <div className="flex justify-between items-end gap-x-4">
+        {assignment.data && (
+          <DashboardActivityFilters
+            courses={{
+              activeItem: assignment.data.course,
+              // When the active course is cleared, navigate to home, but keep
+              // active assignment and students
+              onClear: () =>
+                navigate(
+                  urlWithFilters(
+                    { studentIds, assignmentIds: [assignmentId] },
+                    { path: '' },
+                  ),
                 ),
-              ),
-          }}
-          assignments={{
-            activeItem: assignment.data,
-            // When active assignment is cleared, navigate to its course page,
-            // but keep other query params intact
-            onClear: () => {
-              const query = search.length === 0 ? '' : `?${search}`;
-              navigate(`${courseURL(assignment.data!.course.id)}${query}`);
-            },
-          }}
-          students={{
-            selectedIds: studentIds,
-            onChange: studentIds => updateFilters({ studentIds }),
-          }}
-          onClearSelection={
-            studentIds.length > 0
-              ? () => updateFilters({ studentIds: [] })
-              : undefined
-          }
-        />
-      )}
+            }}
+            assignments={{
+              activeItem: assignment.data,
+              // When active assignment is cleared, navigate to its course page,
+              // but keep other query params intact
+              onClear: () => {
+                const query = search.length === 0 ? '' : `?${search}`;
+                navigate(`${courseURL(assignment.data!.course.id)}${query}`);
+              },
+            }}
+            students={{
+              selectedIds: studentIds,
+              onChange: studentIds => updateFilters({ studentIds }),
+            }}
+            onClearSelection={
+              studentIds.length > 0
+                ? () => updateFilters({ studentIds: [] })
+                : undefined
+            }
+          />
+        )}
+        {autoGradingEnabled && !user.is_staff && <SyncGradesButton />}
+      </div>
       <OrderableActivityTable
         loading={students.isLoading}
         title={assignment.isLoading ? 'Loading...' : title}
diff --git a/lms/static/scripts/frontend_apps/components/dashboard/SyncGradesButton.tsx b/lms/static/scripts/frontend_apps/components/dashboard/SyncGradesButton.tsx
new file mode 100644
index 0000000000..d6bde4975d
--- /dev/null
+++ b/lms/static/scripts/frontend_apps/components/dashboard/SyncGradesButton.tsx
@@ -0,0 +1,9 @@
+import { Button } from '@hypothesis/frontend-shared';
+
+export default function SyncGradesButton() {
+  return (
+    <Button variant="primary" disabled>
+      Grades synced
+    </Button>
+  );
+}