fix #7304 -- course: constantly needless changing the software environment of each course project to itself constantly

- also add "Software Environment" menu item

Author: williamstein

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

@@ -85,11 +85,10 @@ export function ConfigurationPanel({
           <br />
           <RestrictStudentProjects settings={settings} actions={actions} />
           <br />
-          <StudentProjectSoftwareEnvironment
-            actions={actions.configuration}
-            software_image={settings.get("custom_image")}
-            course_project_id={project_id}
-            inherit_compute_image={settings.get("inherit_compute_image")}
+          <ConfigureSoftwareEnvironment
+            actions={actions}
+            settings={settings}
+            project_id={project_id}
           />
           <br />
           <Parallel name={name} />
@@ -357,3 +356,25 @@ export function EnvVariables({
     />
   );
 }
+
+export function ConfigureSoftwareEnvironment({
+  actions,
+  settings,
+  project_id,
+  close,
+}: {
+  actions;
+  settings;
+  project_id;
+  close?;
+}) {
+  return (
+    <StudentProjectSoftwareEnvironment
+      actions={actions.configuration}
+      software_image={settings.get("custom_image")}
+      course_project_id={project_id}
+      inherit_compute_image={settings.get("inherit_compute_image")}
+      close={close}
+    />
+  );
+}

src/packages/frontend/course/configuration/student-project-software-environment.tsx

@@ -24,7 +24,7 @@ import {
   KUCALC_COCALC_COM,
   KUCALC_ON_PREMISES,
 } from "@cocalc/util/db-schema/site-defaults";
-import { Alert, Button, Card, Divider, Radio } from "antd";
+import { Alert, Button, Card, Divider, Radio, Space } from "antd";
 import { ConfigurationActions } from "./actions";
 
 const CSI_HELP =
@@ -35,13 +35,15 @@ interface Props {
   course_project_id: string;
   software_image?: string;
   inherit_compute_image?: boolean;
+  close?;
 }
 
 export function StudentProjectSoftwareEnvironment({
   actions,
   course_project_id,
   software_image,
   inherit_compute_image,
+  close,
 }: Props) {
   const customize_kucalc = useTypedRedux("customize", "kucalc");
   const customize_software = useTypedRedux("customize", "software");
@@ -110,27 +112,36 @@ export function StudentProjectSoftwareEnvironment({
       );
     } else {
       return (
-        <>
-          <Button onClick={() => set_changing(false)}>Cancel</Button>
-          <Button
-            disabled={
-              state.image_type === "custom" && state.image_selected == null
-            }
-            type="primary"
-            onClick={async () => {
-              set_changing(false);
-              await actions.set_software_environment(state);
-            }}
-          >
-            Save
-          </Button>
-          <br />
+        <div>
           <SoftwareEnvironment
             onChange={handleChange}
             default_image={software_image}
           />
           {state.image_type === "custom" && csi_warning()}
-        </>
+          <br />
+          <Space>
+            <Button
+              onClick={() => {
+                set_changing(false);
+              }}
+            >
+              Cancel
+            </Button>
+            <Button
+              disabled={
+                state.image_type === "custom" && state.image_selected == null
+              }
+              type="primary"
+              onClick={async () => {
+                set_changing(false);
+                await actions.set_software_environment(state);
+                close?.();
+              }}
+            >
+              Save
+            </Button>
+          </Space>
+        </div>
       );
     }
   }
@@ -139,9 +150,7 @@ export function StudentProjectSoftwareEnvironment({
     if (inherit) return;
     return (
       <>
-        <Divider orientation="left" plain>
-          Configure
-        </Divider>
+        <Divider orientation="left">Configure</Divider>
         {render_controls_body()}
       </>
     );
@@ -226,7 +235,7 @@ export function StudentProjectSoftwareEnvironment({
       }
     >
       <p>
-        Student projects will be using the software environment:{" "}
+        Student projects will use the following software environment:{" "}
         <em>{current_environment}</em>
       </p>
       {render_description()}

src/packages/frontend/course/modals.tsx

@@ -25,6 +25,7 @@ import {
   RestrictStudentProjects,
   TitleAndDescription,
   UpgradeConfiguration,
+  ConfigureSoftwareEnvironment,
 } from "@cocalc/frontend/course/configuration/configuration-panel";
 import { Parallel } from "@cocalc/frontend/course/configuration/parallel";
 import { Nbgrader } from "@cocalc/frontend/course/configuration/nbgrader";
@@ -154,6 +155,8 @@ function getModal(modal: string) {
       return { Body: EnvVariables };
     case "upgrades":
       return { Body: UpgradeConfiguration };
+    case "software-environment":
+      return { Body: ConfigureSoftwareEnvironment };
 
     default:
       return {

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

@@ -57,6 +57,7 @@ const COURSE_MENUS = {
       ],
       nbgraderConfig: ["course-nbgrader"],
       environmentConfig: [
+        "course-software-environment",
         "course-network-file-systems",
         "course-env-variables",
       ],
@@ -182,6 +183,17 @@ const COMMANDS = {
       actions.setModal("nbgrader");
     },
   },
+  "course-software-environment": {
+    icon: "laptop",
+    label: "Software Environment",
+    button: "Software",
+    title:
+      "Configure the software environment that all student projects will use.",
+    onClick: ({ props }) => {
+      const { actions } = props;
+      actions.setModal("software-environment");
+    },
+  },
   "course-network-file-systems": {
     icon: "database",
     label: "Cloud Storage & Remote File Systems",

src/packages/frontend/project_actions.ts

@@ -3297,11 +3297,16 @@ export class ProjectActions extends Actions<ProjectStoreState> {
     this.setState({ internet_warning_closed: true });
   }
 
-  async set_compute_image(compute_image: string): Promise<void> {
+  set_compute_image = async (compute_image: string): Promise<void> => {
     const projects_store = this.redux.getStore("projects");
     const previous: string =
       projects_store.getIn(["project_map", this.project_id, "compute_image"]) ??
       "";
+    if (previous == compute_image) {
+      // it is already set to the goal, so nothing to do.
+      // See https://github.com/sagemathinc/cocalc/issues/7304
+      return;
+    }
 
     await client_query({
       query: {
@@ -3319,7 +3324,7 @@ export class ProjectActions extends Actions<ProjectStoreState> {
       next: compute_image,
     };
     this.log(event);
-  }
+  };
 
   async set_environment(env: object): Promise<void> {
     if (typeof env != "object") {