course: work in progress implementing configuration copying

Author: williamstein

src/packages/frontend/course/configuration/mirror.tsx renamed to src/packages/frontend/course/configuration/configuration-copying.tsx

@@ -1,24 +1,37 @@
+/*
+Configuration copying.
+
+- List one or more other course files (TODO: also support other projects that you have access to).
+- Select which configuration to share (and parameters)
+- Click a button to copy the configuration from this course 
+  to the target courses.
+*/
+
 import { Alert, Button, Card, Checkbox, Input, Space, Spin } from "antd";
 import { Icon } from "@cocalc/frontend/components";
 import { useEffect, useState } from "react";
 import { pathExists } from "@cocalc/frontend/project/directory-selector";
 import { redux, useTypedRedux } from "@cocalc/frontend/app-framework";
 interface Props {
-  checked?: boolean;
-  setChecked: (checked: boolean) => void;
-  path?: string;
-  setPath: (path: string) => void;
-  project_id: string;
+  settings;
+  project_id;
+  actions;
 }
 
-export default function Mirror({
-  checked,
-  setChecked,
-  path,
-  setPath,
+export default function ConfigurationCopying({
+  settings,
   project_id,
+  actions,
 }: Props) {
-  const [path0, setPath0] = useState<string>(path ?? "");
+  const checked = !!settings.get("mirror_config");
+  const setChecked = (mirror_config: boolean) => {
+    actions.set({ mirror_config, table: "settings" });
+  };
+  const path = settings.get("mirror_config_path") ?? "";
+  const [path0, setPath0] = useState<string>(path);
+  const setPath = (mirror_config_path) => {
+    actions.set({ mirror_config_path, table: "settings" });
+  };
   const [exists, setExists] = useState<boolean | null>(null);
   const [loading, setLoading] = useState<boolean>(false);
   const directoryListings = useTypedRedux(
@@ -56,7 +69,7 @@ export default function Mirror({
     <Card
       title={
         <>
-          <Icon name="envelope" /> Configuration Mirroring
+          <Icon name="envelope" /> Configuration Copying
         </>
       }
     >
@@ -65,7 +78,7 @@ export default function Mirror({
           checked={checked}
           onChange={(e) => setChecked((e.target as any).checked)}
         >
-          Mirror Configuration From Another Course
+          Copying Configuration to Other Courses
         </Checkbox>
       </div>
       {checked && (
@@ -137,7 +150,7 @@ export default function Mirror({
           <span style={{ color: "#666" }}>
             If this box is checked and you fill in the filename of another
             course (in this project), then when you make configuration changes
-            to <i>that course</i>, those changes can be easily copied to this
+            to <i>this course</i>, they can be easily copied to this other
             course. The configuration parameters that are mirrored are:
             <ul>
               <li>Payment and licensing configuration</li>

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

@@ -31,7 +31,7 @@ import { DatastoreConfig } from "./datastore-config";
 import { KUCALC_ON_PREMISES } from "@cocalc/util/db-schema/site-defaults";
 import { EnvironmentVariablesConfig } from "./envvars-config";
 import StudentPay from "./student-pay";
-//import Mirror from "./mirror";
+import ConfigurationCopying from "./configuration-copying";
 import ShowError from "@cocalc/frontend/components/error";
 
 interface Props {
@@ -103,18 +103,12 @@ export function ConfigurationPanel({
             settings={settings}
             project_id={project_id}
           />
-          {/*<br />
-            <Mirror
-              checked={!!settings.get("mirror_config")}
-              setChecked={(mirror_config: boolean) => {
-                actions.set({ mirror_config, table: "settings" });
-              }}
-              path={settings.get("mirror_config_path")}
-              setPath={(mirror_config_path) => {
-                actions.set({ mirror_config_path, table: "settings" });
-              }}
-              project_id={project_id}
-            />*/}
+          <br />
+          <ConfigurationCopying
+            actions={actions}
+            settings={settings}
+            project_id={project_id}
+          />
         </Col>
       </Row>
     </div>

src/packages/frontend/course/modals.tsx

@@ -27,6 +27,7 @@ import {
   UpgradeConfiguration,
   ConfigureSoftwareEnvironment,
 } from "@cocalc/frontend/course/configuration/configuration-panel";
+import ConfigurationCopying from "@cocalc/frontend/course/configuration/configuration-copying";
 import { Parallel } from "@cocalc/frontend/course/configuration/parallel";
 import { Nbgrader } from "@cocalc/frontend/course/configuration/nbgrader";
 import { AddAssignments } from "@cocalc/frontend/course/assignments/assignments-panel";
@@ -157,6 +158,8 @@ function getModal(modal: string) {
       return { Body: UpgradeConfiguration };
     case "software-environment":
       return { Body: ConfigureSoftwareEnvironment };
+    case "configuration-copying":
+      return { Body: ConfigurationCopying };
 
     default:
       return {

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

@@ -61,6 +61,7 @@ const COURSE_MENUS = {
         "course-network-file-systems",
         "course-env-variables",
       ],
+      courseSharing: ["course-configuration-copying"],
     },
   },
   action: {
@@ -216,6 +217,16 @@ const COMMANDS = {
       actions.setModal("env-variables");
     },
   },
+  "course-configuration-copying": {
+    icon: "clone",
+    label: "Copy Course Configuration",
+    button: "Copy Conf",
+    title: "Easily copy configuration from this course to other courses.",
+    onClick: ({ props }) => {
+      const { actions } = props;
+      actions.setModal("configuration-copying");
+    },
+  },
   "course-upgrades": {
     icon: "gears",
     label: "Configure Upgrades (Student or Instructor Pay)",