course: better add handouts/assignments alert

Author: williamstein

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

@@ -38,11 +38,20 @@ interface Props {
   assignments: Map<string, AssignmentRecord>;
   students: Map<string, StudentRecord>;
   user_map: object;
+  frameActions;
 }
 
 export function AssignmentsPanel(props: Props) {
-  const { frame_id, name, project_id, redux, assignments, students, user_map } =
-    props;
+  const {
+    frame_id,
+    name,
+    project_id,
+    redux,
+    assignments,
+    students,
+    user_map,
+    frameActions,
+  } = props;
 
   const course_actions = useActions<CourseActions>({ name });
 
@@ -204,30 +213,40 @@ export function AssignmentsPanel(props: Props) {
   }
 
   function render_no_assignments() {
-    const message = (
-      <div>
-        <h3>Add an Assignment to your Course</h3>
-        <p>
-          An assignment is a <i>directory</i> of files somewhere in your CoCalc
-          project. You copy the assignment to your students and they work on it;
-          later, you collect it, grade it, and return the graded version to
-          them.
-        </p>
-        <p>
-          Add assignments to your course by clicking "Add Assignment..." above.
-          You can create and select one or more directories and they will become
-          assignments that you can then customize and distribute to your
-          students.
-        </p>
-      </div>
-    );
-
     return (
       <div>
         <Alert
           type="info"
-          style={{ margin: "auto", fontSize: "12pt", maxWidth: "800px" }}
-          message={message}
+          style={{
+            margin: "15px auto",
+            fontSize: "12pt",
+            maxWidth: "800px",
+          }}
+          message={
+            <b>
+              <a onClick={() => frameActions.setModal("add-assignments")}>
+                Add Assignments to your Course
+              </a>
+            </b>
+          }
+          description={
+            <div>
+              <p>
+                An assignment is a <i>directory</i> of files somewhere in your
+                CoCalc project. You copy the assignment to your students and
+                they work on it; later, you collect it, grade it, and return the
+                graded version to them.
+              </p>
+              <p>
+                <a onClick={() => frameActions.setModal("add-assignments")}>
+                  Add assignments to your course
+                </a>{" "}
+                by clicking "Add Assignment..." above. You can create and select
+                one or more directories and they will become assignments that
+                you can then customize and distribute to your students.
+              </p>
+            </div>
+          }
         />
       </div>
     );

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

@@ -27,6 +27,7 @@ interface HandoutsPanelReactProps {
   handouts: HandoutsMap; // handout_id -> handout
   students: StudentsMap; // student_id -> student
   user_map: UserMap;
+  frameActions;
 }
 
 export function HandoutsPanel({
@@ -37,14 +38,15 @@ export function HandoutsPanel({
   handouts,
   students,
   user_map,
+  frameActions,
 }: HandoutsPanelReactProps) {
   const expanded_handouts: Set<string> | undefined = useRedux(
     name,
     "expanded_handouts",
   );
 
   const [show_deleted, set_show_deleted] = useState<boolean>(false);
-  
+
   const pageFilter = useRedux(name, "pageFilter");
   const filter = pageFilter?.get("handouts") ?? "";
   const setFilter = (filter: string) => {
@@ -158,21 +160,32 @@ export function HandoutsPanel({
       <div>
         <Alert
           type="info"
-          style={{ margin: "auto", fontSize: "12pt", maxWidth: "800px" }}
+          style={{
+            margin: "15px auto",
+            fontSize: "12pt",
+            maxWidth: "800px",
+          }}
           message={
+            <b>
+              <a onClick={() => frameActions.setModal("add-handouts")}>
+                Add Handouts to your Course
+              </a>
+            </b>
+          }
+          description={
             <div>
-              <h3>Add a Handout to your Course</h3>
               <p>
                 A handout is a <i>directory</i> of files somewhere in your
                 CoCalc project, which you copy to all of your students. They can
                 then do anything they want with that handout.
               </p>
-
               <p>
-                Add handouts to your course by clicking "Add Handout..." above.
-                You can create or select one or more directories and they will
-                become handouts that you can then customize and distribute to
-                your students.
+                <a onClick={() => frameActions.setModal("add-handouts")}>
+                  Add handouts to your course
+                </a>{" "}
+                by clicking "Add Handout..." above. You can create or select one
+                or more directories and they will become handouts that you can
+                then customize and distribute to your students.
               </p>
             </div>
           }

src/packages/frontend/course/modals.tsx

@@ -93,7 +93,7 @@ function getModal(modal: string) {
     case "add-assignments":
       return {
         Body: AddAssignments,
-        title: "Add Assignmetns",
+        title: "Add Assignments",
         icon: "share-square",
       };
     case "add-handouts":

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

@@ -340,7 +340,13 @@ export function StudentsPanel({
             fontSize: "12pt",
             maxWidth: "800px",
           }}
-          message={<b>Add Students to your Course</b>}
+          message={
+            <b>
+              <a onClick={() => frameActions.setModal("add-students")}>
+                Add Students to your Course
+              </a>
+            </b>
+          }
           description={
             <div>
               <a onClick={() => frameActions.setModal("add-students")}>