course: title and description in menu

Author: williamstein

src/packages/frontend/components/text-input.tsx

@@ -3,10 +3,8 @@
  *  License: MS-RSL – see LICENSE.md for details
  */
 
-import { Form, Input } from "antd";
+import { Button, Form, Input } from "antd";
 import React, { useEffect } from "react";
-
-import { Button } from "@cocalc/frontend/antd-bootstrap";
 import { CSS } from "@cocalc/frontend/app-framework";
 import { Icon } from "./icon";
 
@@ -65,9 +63,9 @@ export const TextInput: React.FC<Props> = React.memo(
           <Form.Item>
             <Button
               style={{ marginBottom: "15px" }}
-              bsStyle="success"
+              type="primary"
               onClick={saveChange}
-              bsSize={size === "small" ? "xsmall" : undefined}
+              size={size}
             >
               <Icon name="save" /> Save
             </Button>

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

@@ -4,7 +4,7 @@
  */
 
 import { debounce } from "lodash";
-import { Card, Row, Col } from "antd";
+import { Card, Row, Col, Spin } from "antd";
 import {
   React,
   redux,
@@ -17,7 +17,6 @@ import { contains_url } from "@cocalc/util/misc";
 import {
   Icon,
   LabeledRow,
-  Loading,
   MarkdownInput,
   TextInput,
   ErrorDisplay,
@@ -54,51 +53,6 @@ export const ConfigurationPanel: React.FC<Props> = React.memo(
     const is_commercial = useTypedRedux("customize", "is_commercial");
     const kucalc = useTypedRedux("customize", "kucalc");
 
-    /*
-     * Editing title/description
-     */
-    function render_title_desc_header() {
-      return (
-        <>
-          <Icon name="header" /> Title and Description
-        </>
-      );
-    }
-
-    function render_title_description() {
-      if (settings == null) {
-        return <Loading />;
-      }
-      return (
-        <Card title={render_title_desc_header()}>
-          <LabeledRow label="Title">
-            <TextInput
-              text={settings.get("title") ?? ""}
-              on_change={(title) => actions.configuration.set_title(title)}
-            />
-          </LabeledRow>
-          <LabeledRow label="Description">
-            <MarkdownInput
-              persist_id={name + "course-description"}
-              attach_to={name}
-              rows={6}
-              default_value={settings.get("description")}
-              on_save={(desc) => actions.configuration.set_description(desc)}
-            />
-          </LabeledRow>
-          <hr />
-          <span style={{ color: "#666" }}>
-            Set the course title and description here. When you change the title
-            or description, the corresponding title and description of each
-            student project will be updated. The description is set to this
-            description, and the title is set to the student name followed by
-            this title. Use the description to provide additional information
-            about the course, e.g., a link to the main course website.
-          </span>
-        </Card>
-      );
-    }
-
     /*
      * Custom invitation email body
      */
@@ -247,7 +201,11 @@ export const ConfigurationPanel: React.FC<Props> = React.memo(
             {render_require_institute_pay()}
             {render_onprem_upgrade_projects()}
             <br />
-            {render_title_description()}
+            <TitleAndDescription
+              actions={actions}
+              settings={settings}
+              name={name}
+            />
             <br />
             {render_email_invite_body()}
             <br />
@@ -293,3 +251,43 @@ export const ConfigurationPanel: React.FC<Props> = React.memo(
     );
   },
 );
+
+export function TitleAndDescription({ actions, settings, name }) {
+  if (settings == null) {
+    return <Spin />;
+  }
+  return (
+    <Card
+      title={
+        <>
+          <Icon name="header" /> Course Title and Description
+        </>
+      }
+    >
+      <LabeledRow label="Title">
+        <TextInput
+          text={settings.get("title") ?? ""}
+          on_change={(title) => actions.configuration.set_title(title)}
+        />
+      </LabeledRow>
+      <LabeledRow label="Description">
+        <MarkdownInput
+          persist_id={name + "course-description"}
+          attach_to={name}
+          rows={6}
+          default_value={settings.get("description")}
+          on_save={(desc) => actions.configuration.set_description(desc)}
+        />
+      </LabeledRow>
+      <hr />
+      <span style={{ color: "#666" }}>
+        Set the course title and description here. When you change the title or
+        description, the corresponding title and description of each student
+        project will be updated. The description is set to this description, and
+        the title is set to the student name followed by this title. Use the
+        description to provide additional information about the course, e.g., a
+        link to the main course website.
+      </span>
+    </Card>
+  );
+}

src/packages/frontend/course/modals.tsx

@@ -17,6 +17,7 @@ import { DeleteAllStudentProjects } from "@cocalc/frontend/course/configuration/
 import { DeleteAllStudents } from "@cocalc/frontend/course/configuration//delete-all-students";
 import { DeleteSharedProjectPanel } from "@cocalc/frontend/course/shared-project/delete-shared-project";
 import { SharedProjectPanel } from "@cocalc/frontend/course/shared-project/shared-project-panel";
+import { TitleAndDescription } from "@cocalc/frontend/course/configuration/configuration-panel";
 
 interface Props {
   frameActions;
@@ -113,6 +114,9 @@ function getModal(modal: string) {
     case "create-shared-project":
       return { Body: SharedProjectPanel };
 
+    case "title-and-description":
+      return { Body: TitleAndDescription };
+
     default:
       return {
         Body: () => (

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

@@ -39,6 +39,7 @@ const COURSE_MENUS = {
     label: menu.edit,
     pos: 1,
     entries: {
+      config: ["course-title-and-description"],
       students: ["course-add-student"],
     },
   },
@@ -68,7 +69,6 @@ const COURSE_MENUS = {
 
 const COMMANDS = {
   "course-add-student": {
-    pos: 1,
     icon: "users",
     label: "Add Students",
     button: "+Student",
@@ -80,6 +80,16 @@ const COMMANDS = {
       actions.setModal("add-students");
     },
   },
+  "course-title-and-description": {
+    icon: "header",
+    label: "Course Title and Description...",
+    button: "Title",
+    title: "Set the course title and description.",
+    onClick: ({ props }) => {
+      const { actions } = props;
+      actions.setModal("title-and-description");
+    },
+  },
   "course-start-all-projects": {
     icon: "bolt",
     label: "Start all Student Projects",

src/packages/frontend/markdown/markdown-input/main.tsx

@@ -5,15 +5,13 @@
 
 // 3rd Party Libraries
 import { markdown_to_html } from "../index";
-import { Button, ButtonToolbar, FormControl, FormGroup } from "react-bootstrap";
 import { Tip } from "@cocalc/frontend/components/tip";
 import { Icon } from "@cocalc/frontend/components/icon";
-
+import { Button, Input, Space } from "antd";
 // Internal Libraries
 import {
   Component,
   React,
-  ReactDOM,
   rclass,
   redux,
   rtypes,
@@ -30,11 +28,11 @@ export function init(): void {
   }
   redux.createStore<MarkdownWidgetStoreState, MarkdownWidgetStore>(
     info.name,
-    MarkdownWidgetStore
+    MarkdownWidgetStore,
   );
   redux.createActions<MarkdownWidgetStoreState, MarkdownWidgetActions>(
     info.name,
-    MarkdownWidgetActions
+    MarkdownWidgetActions,
   );
 }
 
@@ -109,7 +107,7 @@ class MarkdownInput0 extends Component<
 
   getActions() {
     return redux.getActions<MarkdownWidgetStoreState, MarkdownWidgetActions>(
-      info.name
+      info.name,
     );
   }
 
@@ -137,7 +135,7 @@ class MarkdownInput0 extends Component<
     if (this.props.persist_id != null) {
       this.getActions().set_value(
         this.props.persist_id,
-        value ?? this.state.value
+        value ?? this.state.value,
       );
     }
   };
@@ -189,8 +187,10 @@ class MarkdownInput0 extends Component<
   keydown = (e) => {
     if (e.keyCode === 27) {
       this.cancel();
-    } else if (e.keyCode === 13 && e.shiftKey) {
-      this.save();
+    } else if (e.keyCode === 13) {
+      if (this.props.rows == 1 || e.shiftKey) {
+        this.save();
+      }
     }
   };
 
@@ -208,24 +208,16 @@ class MarkdownInput0 extends Component<
       const tip = <span>{TIP_TEXT}</span>;
       return (
         <div>
-          <form onSubmit={this.save} style={{ marginBottom: "-20px" }}>
-            <FormGroup>
-              <FormControl
-                autoFocus={this.props.autoFocus ?? true}
-                ref="input"
-                componentClass="textarea"
-                rows={this.props.rows ?? 4}
-                placeholder={this.props.placeholder}
-                value={this.state.value}
-                onChange={() => {
-                  const value = ReactDOM.findDOMNode(this.refs.input)?.value;
-                  if (value == null) return;
-                  this.set_value(value);
-                }}
-                onKeyDown={this.keydown}
-              />
-            </FormGroup>
-          </form>
+          <Input.TextArea
+            autoFocus={this.props.autoFocus ?? true}
+            rows={this.props.rows ?? 4}
+            placeholder={this.props.placeholder}
+            value={this.state.value}
+            onChange={(e) => {
+              this.set_value(e.target.value);
+            }}
+            onKeyDown={this.keydown}
+          />
           <div style={{ paddingTop: "8px", color: "#666" }}>
             <Tip title="Use Markdown" tip={tip}>
               Format using{" "}
@@ -234,10 +226,13 @@ class MarkdownInput0 extends Component<
               </a>
             </Tip>
           </div>
-          <ButtonToolbar style={{ paddingBottom: "5px" }}>
+          <Space style={{ paddingBottom: "5px" }}>
+            <Button key="cancel" onClick={this.cancel}>
+              Cancel
+            </Button>
             <Button
               key="save"
-              bsStyle="success"
+              type="primary"
               onClick={this.save}
               disabled={
                 this.props.save_disabled ??
@@ -246,10 +241,7 @@ class MarkdownInput0 extends Component<
             >
               <Icon name="edit" /> Save
             </Button>
-            <Button key="cancel" onClick={this.cancel}>
-              Cancel
-            </Button>
-          </ButtonToolbar>
+          </Space>
         </div>
       );
     } else {