course: add "reconfigure all projects" as a menu item too

Author: williamstein

src/packages/frontend/course/configuration/actions-panel.tsx

@@ -100,34 +100,6 @@ export const ActionsPanel: React.FC<Props> = React.memo(
       );
     }
 
-    function render_configure_all_projects(): Rendered {
-      return (
-        <Card
-          title={
-            <>
-              <Icon name="envelope" /> Reconfigure all Projects
-            </>
-          }
-        >
-          Ensure all projects have the correct students and TA's, titles and
-          descriptions set, etc. This will also resend any outstanding email
-          invitations.
-          <hr />
-          <Button
-            disabled={configuring_projects}
-            onClick={() => {
-              actions.configuration.configure_all_projects();
-            }}
-          >
-            {configuring_projects ? (
-              <Icon name="cocalc-ring" spin />
-            ) : undefined}{" "}
-            Reconfigure all Projects
-          </Button>
-        </Card>
-      );
-    }
-
     function render_resend_outstanding_email_invites(): Rendered {
       return (
         <Card
@@ -233,7 +205,10 @@ export const ActionsPanel: React.FC<Props> = React.memo(
             {render_export_grades()}
           </Col>
           <Col md={12} style={{ padding: "15px" }}>
-            {render_configure_all_projects()}
+            <ReconfigureAllProjects
+              configuring_projects={configuring_projects}
+              actions={actions}
+            />
             <br />
             {render_resend_outstanding_email_invites()}
             <br />
@@ -252,3 +227,35 @@ export const ActionsPanel: React.FC<Props> = React.memo(
     );
   },
 );
+
+export function ReconfigureAllProjects({
+  actions,
+  configuring_projects,
+}: {
+  actions;
+  configuring_projects?: boolean;
+}) {
+  return (
+    <Card
+      title={
+        <>
+          <Icon name="envelope" /> Reconfigure all Projects
+        </>
+      }
+    >
+      Ensure all projects have the correct students and TA's, titles and
+      descriptions set, etc. This will also resend any outstanding email
+      invitations.
+      <hr />
+      <Button
+        disabled={configuring_projects}
+        onClick={() => {
+          actions.configuration.configure_all_projects();
+        }}
+      >
+        {configuring_projects ? <Icon name="cocalc-ring" spin /> : undefined}{" "}
+        Reconfigure all Projects
+      </Button>
+    </Card>
+  );
+}

src/packages/frontend/course/modals.tsx

@@ -3,14 +3,18 @@ import type { StudentsMap } from "./store";
 import type { UserMap } from "@cocalc/frontend/todo-types";
 import AddStudents from "@cocalc/frontend/course/students/add-students";
 import { Icon } from "@cocalc/frontend/components/icon";
+import { ReconfigureAllProjects } from "@cocalc/frontend/course/configuration/actions-panel";
 
 interface Props {
+  frameActions;
   actions;
   modal?: string;
   name: string;
   students?: StudentsMap;
   user_map?: UserMap;
   project_id;
+  configuring_projects?: boolean;
+  reinviting_students?: boolean;
 }
 
 export default function Modals(props: Props) {
@@ -19,30 +23,47 @@ export default function Modals(props: Props) {
     return null;
   }
   const close = () => {
-    props.actions.setState({ modal: "" });
+    props.frameActions.setState({ modal: "" });
   };
-  if (modal == "add-students") {
-    return (
-      <Modal
-        onCancel={close}
-        onOk={close}
-        cancelButtonProps={{ style: { display: "none" } }}
-        okText="Close"
-        open
-        title={
+  const { title, Body, icon } = getModal(modal);
+
+  return (
+    <Modal
+      onCancel={close}
+      onOk={close}
+      cancelButtonProps={{ style: { display: "none" } }}
+      okText="Close"
+      open
+      title={
+        title ? (
           <>
-            <Icon name="users" /> Add Students
+            {icon && <Icon name={icon} />} {title}
           </>
-        }
-        width={800}
-      >
-        <AddStudents {...props} students={students} user_map={user_map} />
-      </Modal>
-    );
-  } else {
-    return (
-      <Alert type="warning" message={<>BUG -- Unknown modal: {modal}</>} />
-    );
-  }
+        ) : undefined
+      }
+      width={800}
+    >
+      <Body {...props} students={students} user_map={user_map} />
+    </Modal>
+  );
   return null;
 }
+
+function getModal(modal: string) {
+  switch (modal) {
+    case "add-students":
+      return { Body: AddStudents, title: "Add Students", icon: "users" };
+    case "reconfigure-all-projects":
+      return {
+        Body: ReconfigureAllProjects,
+      };
+    default:
+      return {
+        Body: () => (
+          <Alert type="warning" message={<>BUG -- Unknown modal: {modal}</>} />
+        ),
+        title: "Error",
+        icon: "bug",
+      };
+  }
+}

src/packages/frontend/frame-editors/course-editor/course-panel-wrapper.tsx

@@ -216,12 +216,15 @@ const CoursePanelWrapper: React.FC<FrameProps> = React.memo(
         className="smc-vfill"
       >
         <Modals
-          actions={actions}
+          frameActions={actions}
+          actions={redux.getActions(name)}
           modal={modal}
           name={name}
           students={students}
           user_map={user_map}
           project_id={project_id}
+          configuring_projects={configuring_projects}
+          reinviting_students={reinviting_students}
         />
         {render_panel()}
       </div>

src/packages/frontend/frame-editors/course-editor/editor.ts

@@ -42,6 +42,13 @@ const COURSE_MENUS = {
       students: ["course-add-student"],
     },
   },
+  action: {
+    label: "Actions",
+    pos: 1.2,
+    entries: {
+      projects: ["course-reconfigure-all-projects"],
+    },
+  },
 };
 
 const COMMANDS = {
@@ -57,6 +64,17 @@ const COMMANDS = {
       actions.setModal("add-students");
     },
   },
+  "course-reconfigure-all-projects": {
+    icon: "mail",
+    label: "Reconfigure all Projects",
+    button: "Reconfigure",
+    title: "Update all projects with correct students, descriptions, etc.",
+    onClick: ({ props }) => {
+      const { id, actions } = props;
+      actions.set_frame_type(id, "course_actions");
+      actions.setModal("reconfigure-all-projects");
+    },
+  },
 };
 
 function initMenus() {