course menu: add "start all projects"

Author: williamstein

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

@@ -15,7 +15,7 @@ import { Button, ButtonGroup } from "@cocalc/frontend/antd-bootstrap";
 import { plural } from "@cocalc/util/misc";
 import { Icon } from "@cocalc/frontend/components";
 import { CourseActions } from "../actions";
-import { ProjectMap } from "@cocalc/frontend/todo-types";
+import type { ProjectMap } from "@cocalc/frontend/todo-types";
 import { CourseSettingsRecord, CourseStore } from "../store";
 import { DeleteAllStudentProjects } from "./delete-all-student-projects";
 import { DeleteAllStudents } from "./delete-all-students";
@@ -42,7 +42,6 @@ export const ActionsPanel: React.FC<Props> = React.memo(
     reinviting_students,
   }) => {
     const actions = useActions<CourseActions>({ name });
-    const store = useStore<CourseStore>({ name });
 
     /*
      * Grade export
@@ -150,18 +149,6 @@ export const ActionsPanel: React.FC<Props> = React.memo(
       );
     }
 
-    function render_start_all_projects() {
-      const r = store.num_running_projects(project_map);
-      const n = store.num_students();
-      return (
-        <StudentProjectsStartStopPanel
-          name={name}
-          num_running_projects={r}
-          num_students={n}
-        />
-      );
-    }
-
     function render_delete_shared_project() {
       if (settings.get("shared_project_id")) {
         return (
@@ -198,7 +185,7 @@ export const ActionsPanel: React.FC<Props> = React.memo(
       <div className="smc-vfill" style={{ overflowY: "scroll" }}>
         <Row>
           <Col md={12} style={{ padding: "15px 15px 15px 0" }}>
-            {render_start_all_projects()}
+            <StartAllProjects name={name} project_map={project_map} />
             <br />
             {render_terminal_command()}
             <br />
@@ -228,6 +215,19 @@ export const ActionsPanel: React.FC<Props> = React.memo(
   },
 );
 
+export function StartAllProjects({ name, project_map }) {
+  const store = useStore<CourseStore>({ name });
+  const r = store.num_running_projects(project_map);
+  const n = store.num_students();
+  return (
+    <StudentProjectsStartStopPanel
+      name={name}
+      num_running_projects={r}
+      num_students={n}
+    />
+  );
+}
+
 export function ReconfigureAllProjects({
   actions,
   configuring_projects,

src/packages/frontend/course/configuration/start-stop-panel.tsx

@@ -1,5 +1,4 @@
-import { Alert, Card, Row, Col } from "antd";
-import { Button, ButtonGroup } from "../../antd-bootstrap";
+import { Alert, Button, Card, Row, Col, Space, Spin } from "antd";
 import { Icon } from "../../components";
 import { useState, useActions, useRedux } from "../../app-framework";
 import { CourseActions } from "../actions";
@@ -49,8 +48,7 @@ export const StudentProjectsStartStopPanel: React.FC<Props> = ({
         type={type}
         message={
           <div>
-            {capitalize(state_name)} all projects...{" "}
-            <Icon name="cocalc-ring" spin />
+            {capitalize(state_name)} all projects... <Spin />
             <br />
             <Button
               onClick={() =>
@@ -75,20 +73,21 @@ export const StudentProjectsStartStopPanel: React.FC<Props> = ({
             disruptive)?
             <br />
             <br />
-            <ButtonGroup>
+            <Space>
+              <Button onClick={() => set_confirm_stop_all_projects(false)}>
+                Cancel
+              </Button>
               <Button
-                bsStyle="warning"
+                danger
+                type="primary"
                 onClick={() => {
                   set_confirm_stop_all_projects(false);
                   actions.student_projects.action_all_student_projects("stop");
                 }}
               >
                 <Icon name="PoweroffOutlined" /> Stop all
               </Button>
-              <Button onClick={() => set_confirm_stop_all_projects(false)}>
-                Cancel
-              </Button>
-            </ButtonGroup>
+            </Space>
           </div>
         }
       />
@@ -105,20 +104,20 @@ export const StudentProjectsStartStopPanel: React.FC<Props> = ({
             ensure the projects are already running when the students open them.
             <br />
             <br />
-            <ButtonGroup>
+            <Space>
+              <Button onClick={() => set_confirm_start_all_projects(false)}>
+                Cancel
+              </Button>{" "}
               <Button
-                bsStyle="primary"
+                type="primary"
                 onClick={() => {
                   set_confirm_start_all_projects(false);
                   actions.student_projects.action_all_student_projects("start");
                 }}
               >
                 <Icon name="bolt" /> Start all
               </Button>
-              <Button onClick={() => set_confirm_start_all_projects(false)}>
-                Cancel
-              </Button>
-            </ButtonGroup>
+            </Space>
           </div>
         }
       />
@@ -142,7 +141,7 @@ export const StudentProjectsStartStopPanel: React.FC<Props> = ({
       </Row>
       <Row style={{ marginTop: "10px" }}>
         <Col md={24}>
-          <ButtonGroup>
+          <Space>
             <Button
               onClick={() => set_confirm_start_all_projects(true)}
               disabled={
@@ -165,7 +164,7 @@ export const StudentProjectsStartStopPanel: React.FC<Props> = ({
             >
               <Icon name="PoweroffOutlined" /> Stop all...
             </Button>
-          </ButtonGroup>
+          </Space>
         </Col>
       </Row>
       <Row style={{ marginTop: "10px" }}>

src/packages/frontend/course/modals.tsx

@@ -3,7 +3,11 @@ 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";
+import {
+  ReconfigureAllProjects,
+  StartAllProjects,
+} from "@cocalc/frontend/course/configuration/actions-panel";
+import type { ProjectMap } from "@cocalc/frontend/todo-types";
 
 interface Props {
   frameActions;
@@ -12,14 +16,15 @@ interface Props {
   name: string;
   students?: StudentsMap;
   user_map?: UserMap;
+  project_map?: ProjectMap;
   project_id;
   configuring_projects?: boolean;
   reinviting_students?: boolean;
 }
 
 export default function Modals(props: Props) {
-  const { students, user_map, modal } = props;
-  if (students == null || user_map == null || !modal) {
+  const { students, user_map, project_map, modal } = props;
+  if (students == null || user_map == null || project_map == null || !modal) {
     return null;
   }
   const close = () => {
@@ -43,7 +48,12 @@ export default function Modals(props: Props) {
       }
       width={800}
     >
-      <Body {...props} students={students} user_map={user_map} />
+      <Body
+        {...props}
+        students={students}
+        user_map={user_map}
+        project_map={project_map}
+      />
     </Modal>
   );
   return null;
@@ -53,6 +63,10 @@ function getModal(modal: string) {
   switch (modal) {
     case "add-students":
       return { Body: AddStudents, title: "Add Students", icon: "users" };
+    case "start-all-projects":
+      return {
+        Body: StartAllProjects,
+      };
     case "reconfigure-all-projects":
       return {
         Body: ReconfigureAllProjects,

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

@@ -222,6 +222,7 @@ const CoursePanelWrapper: React.FC<FrameProps> = React.memo(
           name={name}
           students={students}
           user_map={user_map}
+          project_map={project_map}
           project_id={project_id}
           configuring_projects={configuring_projects}
           reinviting_students={reinviting_students}

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

@@ -4,7 +4,7 @@
  */
 
 /*
-Spec for editing Jupyter notebooks via a frame tree.
+Spec for editing courses via a frame tree.
 */
 
 import { set } from "@cocalc/util/misc";
@@ -46,7 +46,10 @@ const COURSE_MENUS = {
     label: "Actions",
     pos: 1.2,
     entries: {
-      projects: ["course-reconfigure-all-projects"],
+      projects: [
+        "course-start-all-projects",
+        "course-reconfigure-all-projects",
+      ],
     },
   },
 };
@@ -64,6 +67,18 @@ const COMMANDS = {
       actions.setModal("add-students");
     },
   },
+  "course-start-all-projects": {
+    icon: "bolt",
+    label: "Start all Student Projects",
+    button: "Start All",
+    title:
+      "You can start all projects associated with this course so they are immediately ready for your students to use.",
+    onClick: ({ props }) => {
+      const { id, actions } = props;
+      actions.set_frame_type(id, "course_actions");
+      actions.setModal("start-all-projects");
+    },
+  },
   "course-reconfigure-all-projects": {
     icon: "mail",
     label: "Reconfigure all Projects",