course: finish all actions and configurations menu items

williamstein · williamstein · commit f390836bd86a · 2024-09-19T20:32:35.000Z
diff --git a/src/packages/frontend/course/configuration/configuration-panel.tsx b/src/packages/frontend/course/configuration/configuration-panel.tsx
@@ -45,64 +45,17 @@ interface Props {
 export const ConfigurationPanel: React.FC<Props> = React.memo(
   ({ name, project_id, settings, configuring_projects }) => {
     const actions = useActions<CourseActions>({ name });
-    const is_commercial = useTypedRedux("customize", "is_commercial");
-    const kucalc = useTypedRedux("customize", "kucalc");
-
-    function render_require_institute_pay() {
-      if (!is_commercial) return;
-      return (
-        <>
-          <StudentProjectUpgrades
-            name={name}
-            is_onprem={false}
-            is_commercial={is_commercial}
-            upgrade_goal={settings?.get("upgrade_goal")}
-            institute_pay={settings?.get("institute_pay")}
-            student_pay={settings?.get("student_pay")}
-            site_license_id={settings?.get("site_license_id")}
-            site_license_strategy={settings?.get("site_license_strategy")}
-            shared_project_id={settings?.get("shared_project_id")}
-            disabled={configuring_projects}
-            settings={settings}
-            actions={actions.configuration}
-          />
-          <br />
-        </>
-      );
-    }
-
-    /**
-     * OnPrem instances support licenses to be distributed to all student projects.
-     */
-    function render_onprem_upgrade_projects(): React.ReactNode {
-      if (is_commercial || kucalc !== KUCALC_ON_PREMISES) return;
-      return (
-        <>
-          <StudentProjectUpgrades
-            name={name}
-            is_onprem={true}
-            is_commercial={false}
-            site_license_id={settings?.get("site_license_id")}
-            site_license_strategy={settings?.get("site_license_strategy")}
-            shared_project_id={settings?.get("shared_project_id")}
-            disabled={configuring_projects}
-            settings={settings}
-            actions={actions.configuration}
-          />
-          <br />
-        </>
-      );
-    }
 
     return (
       <div className="smc-vfill" style={{ overflowY: "scroll" }}>
         <Row>
           <Col md={12} style={{ padding: "15px 15px 15px 0" }}>
-            {is_commercial && (
-              <StudentPay actions={actions} settings={settings} />
-            )}
-            {render_require_institute_pay()}
-            {render_onprem_upgrade_projects()}
+            <UpgradeConfiguration
+              name={name}
+              settings={settings}
+              configuring_projects={configuring_projects}
+              actions={actions}
+            />
             <br />
             <TitleAndDescription
               actions={actions}
@@ -162,6 +115,76 @@ export const ConfigurationPanel: React.FC<Props> = React.memo(
   },
 );
 
+export function UpgradeConfiguration({
+  name,
+  settings,
+  configuring_projects,
+  actions,
+}) {
+  const is_commercial = useTypedRedux("customize", "is_commercial");
+  const kucalc = useTypedRedux("customize", "kucalc");
+
+  function render_require_institute_pay() {
+    if (!is_commercial) return;
+    return (
+      <>
+        <StudentProjectUpgrades
+          name={name}
+          is_onprem={false}
+          is_commercial={is_commercial}
+          upgrade_goal={settings?.get("upgrade_goal")}
+          institute_pay={settings?.get("institute_pay")}
+          student_pay={settings?.get("student_pay")}
+          site_license_id={settings?.get("site_license_id")}
+          site_license_strategy={settings?.get("site_license_strategy")}
+          shared_project_id={settings?.get("shared_project_id")}
+          disabled={configuring_projects}
+          settings={settings}
+          actions={actions.configuration}
+        />
+        <br />
+      </>
+    );
+  }
+
+  /**
+   * OnPrem instances support licenses to be distributed to all student projects.
+   */
+  function render_onprem_upgrade_projects(): React.ReactNode {
+    if (is_commercial || kucalc !== KUCALC_ON_PREMISES) return;
+    return (
+      <>
+        <StudentProjectUpgrades
+          name={name}
+          is_onprem={true}
+          is_commercial={false}
+          site_license_id={settings?.get("site_license_id")}
+          site_license_strategy={settings?.get("site_license_strategy")}
+          shared_project_id={settings?.get("shared_project_id")}
+          disabled={configuring_projects}
+          settings={settings}
+          actions={actions.configuration}
+        />
+        <br />
+      </>
+    );
+  }
+
+  return (
+    <Card
+      title={
+        <>
+          <Icon name="gears" /> Configure Upgrades
+        </>
+      }
+    >
+      {is_commercial && <StudentPay actions={actions} settings={settings} />}
+      {render_require_institute_pay()}
+      {render_onprem_upgrade_projects()}
+    </Card>
+  );
+}
+
 export function TitleAndDescription({ actions, settings, name }) {
   if (settings == null) {
     return <Spin />;
diff --git a/src/packages/frontend/course/modals.tsx b/src/packages/frontend/course/modals.tsx
@@ -24,6 +24,7 @@ import {
   NetworkFilesystem,
   RestrictStudentProjects,
   TitleAndDescription,
+  UpgradeConfiguration,
 } from "@cocalc/frontend/course/configuration/configuration-panel";
 import { Parallel } from "@cocalc/frontend/course/configuration/parallel";
 import { Nbgrader } from "@cocalc/frontend/course/configuration/nbgrader";
@@ -69,6 +70,7 @@ export default function Modals(props: Props) {
       }
       width={800}
     >
+      <br />
       <Body
         {...props}
         students={students}
@@ -140,6 +142,8 @@ function getModal(modal: string) {
       return { Body: NetworkFilesystem };
     case "env-variables":
       return { Body: EnvVariables };
+    case "upgrades":
+      return { Body: UpgradeConfiguration };
 
     default:
       return {
diff --git a/src/packages/frontend/course/pay-banner.tsx b/src/packages/frontend/course/pay-banner.tsx
@@ -11,20 +11,18 @@ This banner only shows up if commerical is set for hub configuration.
 */
 
 import { CSS, React, useTypedRedux } from "../app-framework";
-
 import { Alert } from "antd";
 import { CourseSettingsRecord } from "./store";
-import { Icon, Gap } from "../components";
+import { Icon } from "../components";
 
 interface PayBannerProps {
   settings: CourseSettingsRecord;
   num_students: number;
-  tab: string;
   show_config: () => void;
 }
 
 export const PayBanner: React.FC<PayBannerProps> = React.memo(
-  ({ settings, num_students, tab, show_config }) => {
+  ({ settings, num_students, show_config }) => {
     const is_commercial = useTypedRedux("customize", "is_commercial");
 
     if (!is_commercial) {
@@ -49,52 +47,37 @@ export const PayBanner: React.FC<PayBannerProps> = React.memo(
       return <span />;
     }
 
-    let mesg: JSX.Element, style: CSS;
+    let style: CSS;
     if ((num_students != null ? num_students : 0) >= 20) {
       // Show a harsh error.
       style = {
         background: "red",
         color: "white",
         fontSize: "16pt",
         fontWeight: "bold",
-        margin: "5px 15px",
+        margin: "15px",
       };
     } else {
       style = {
         fontSize: "12pt",
         color: "#666",
-        margin: "5px 15px",
+        margin: "15px",
       };
     }
 
-    if (tab === "configuration") {
-      mesg = (
-        <span>
-          Please select either the student pay or institute pay option below.
-        </span>
-      );
-    } else {
-      mesg = (
-        <span>
-          Please open the <a onClick={show_config}>Configuration page</a> for
-          this course and select a pay option.
-        </span>
-      );
-    }
-
     return (
       <Alert
         type="warning"
         style={style}
         message={
-          <div>
-            <Icon
-              name="exclamation-triangle"
-              style={{ float: "right", marginTop: "3px" }}
-            />
+          <div style={{ display: "flex" }}>
+            <Icon name="exclamation-triangle" />
+            <div style={{ flex: 1, textAlign: "center" }}>
+              <a onClick={show_config}>
+                Configure either the student or institute pay option...
+              </a>
+            </div>
             <Icon name="exclamation-triangle" />
-            <Gap />
-            {mesg}
           </div>
         }
       />
diff --git a/src/packages/frontend/frame-editors/course-editor/course-panel-wrapper.tsx b/src/packages/frontend/frame-editors/course-editor/course-panel-wrapper.tsx
@@ -168,11 +168,10 @@ const CoursePanelWrapper: React.FC<FrameProps> = React.memo(
       return (
         <PayBanner
           show_config={() => {
-            actions.set_frame_type(id, "course_configuration");
+            actions.setModal("upgrades");
           }}
           settings={settings}
           num_students={students.size}
-          tab={desc.get("type", "").slice("course_".length)}
         />
       );
     }
diff --git a/src/packages/frontend/frame-editors/course-editor/editor.ts b/src/packages/frontend/frame-editors/course-editor/editor.ts
@@ -41,6 +41,7 @@ const COURSE_MENUS = {
     pos: 1,
     entries: {
       editStudents: ["course-add-student"],
+      courseUpgrades: ["course-upgrades"],
       configCourse: [
         "course-title-and-description",
         "course-email-invitation",
@@ -51,7 +52,10 @@ const COURSE_MENUS = {
         "course-restrict-student-projects",
       ],
       nbgraderConfig: ["course-nbgrader"],
-      environmentConfig: ["course-network-file-systems", "course-env-variables"],
+      environmentConfig: [
+        "course-network-file-systems",
+        "course-env-variables",
+      ],
     },
   },
   action: {
@@ -73,7 +77,10 @@ const COURSE_MENUS = {
         "course-delete-student-projects",
         "course-delete-students",
       ],
-      sharedProject: ["course-create-shared-project", "course-delete-shared-project"],
+      sharedProject: [
+        "course-create-shared-project",
+        "course-delete-shared-project",
+      ],
     },
   },
 };
@@ -175,6 +182,18 @@ const COMMANDS = {
       actions.setModal("env-variables");
     },
   },
+  "course-upgrades": {
+    icon: "gears",
+    label: "Configure Upgrades (Student or Instructor Pay)",
+    button: "Upgrades",
+    title:
+      "Use a license to upgrade all projects, or require your students to purchase a specific license.",
+    onClick: ({ props }) => {
+      const { actions } = props;
+      actions.setModal("upgrades");
+    },
+  },
+
   "course-start-all-projects": {
     icon: "bolt",
     label: "Start all Student Projects",
