feat: Add visual indicator for closed courses (#6066)

WikiEducationFoundation · Dec 18, 2024 · a8b016d · a8b016d
1 parent 1e1e8b2
commit a8b016d
Showing 1 changed file with 52 additions and 30 deletions.
diff --git a/app/assets/javascripts/components/overview/admin_quick_actions.jsx b/app/assets/javascripts/components/overview/admin_quick_actions.jsx
@@ -20,43 +20,65 @@ const DetailsText = ({ flags }) => (
   </p>
 );
 
+const isCourseClosed = flags => !!(flags && flags.closed_date);
+
 const NoDetailsText = () => (
   <p>
     This course has not yet been marked as having been reviewed by a staff member.
     Click below to mark it as reviewed!
   </p>
 );
 
-export const AdminQuickActions = ({ course, current_user, persistCourse, greetStudents }) => (
-  <div className="module admin-quick-actions" style={{ textAlign: 'center' }}>
-    {current_user.isStaff && (
-      <>
-        {course.flags && course.flags.last_reviewed && course.flags.last_reviewed.username ? (
-          <DetailsText flags={course.flags} />
-        ) : (
-          <NoDetailsText />
-        )}
-        <button
-          className="button mark-as-review"
-          onClick={() => {
-            course.last_reviewed = {
-              username: current_user.username,
-              timestamp: getUTCDateString(),
-            };
-            persistCourse(course.slug);
-          }}
-        >
-          Mark as Reviewed
-        </button>
-        <br />
-        <br />
-        <GreetStudentsButton course={course} current_user={current_user} greetStudents={greetStudents} />
-        <br />
-      </>
-    )}
-    {current_user.admin && <div><NotesPanel/><AdminStatusPanel course={course} /></div>}
-  </div>
-);
+export const AdminQuickActions = ({ course, current_user, persistCourse, greetStudents }) => {
+  const closedCourseStyle = isCourseClosed(course.flags)
+    ? {
+      backgroundColor: '#f8d7da',
+      color: '#721c24',
+      padding: '15px',
+      borderRadius: '2px',
+      fontWeight: 'bold',
+    }
+    : {};
+
+  return (
+    <div className="module admin-quick-actions" style={{ textAlign: 'center', ...closedCourseStyle }}>
+      {isCourseClosed(course.flags) && (
+        <div style={{ marginBottom: '15px' }}>
+          <p>
+            <strong>This course was closed on:</strong>&nbsp;
+            {format(toDate(parseISO(course.flags.closed_date)), 'PPPP')}.
+          </p>
+        </div>
+      )}
+      {current_user.isStaff && (
+        <>
+          {course.flags && course.flags.last_reviewed && course.flags.last_reviewed.username ? (
+            <DetailsText flags={course.flags} />
+          ) : (
+            <NoDetailsText />
+          )}
+          <button
+            className="button mark-as-review"
+            onClick={() => {
+              course.last_reviewed = {
+                username: current_user.username,
+                timestamp: getUTCDateString(),
+              };
+              persistCourse(course.slug);
+            }}
+          >
+            Mark as Reviewed
+          </button>
+          <br />
+          <br />
+          <GreetStudentsButton course={course} current_user={current_user} greetStudents={greetStudents} />
+          <br />
+        </>
+      )}
+      {current_user.admin && <div><NotesPanel /><AdminStatusPanel course={course} /></div>}
+    </div>
+  );
+};
 
 AdminQuickActions.propTypes = {
   course: PropTypes.shape({