course: move help box to menus

Author: williamstein

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

@@ -30,7 +30,6 @@ import {
 import * as styles from "../styles";
 import * as util from "../util";
 import { Assignment } from "./assignment";
-import { HelpBox } from "../configuration/help-box";
 
 interface Props {
   frame_id?: string;
@@ -229,15 +228,6 @@ export const AssignmentsPanel: React.FC<Props> = React.memo((props: Props) => {
 
     return (
       <div>
-        <div
-          style={{
-            margin: "30px auto",
-            fontSize: "12pt",
-            maxWidth: "800px",
-          }}
-        >
-          <HelpBox />
-        </div>
         <Alert
           type="info"
           style={{ margin: "auto", fontSize: "12pt", maxWidth: "800px" }}

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

@@ -5,7 +5,6 @@
 
 import { debounce } from "lodash";
 import { Card, Row, Col } from "antd";
-// React libraries and Components
 import {
   React,
   redux,
@@ -26,7 +25,6 @@ import {
 import { StudentProjectUpgrades } from "./upgrades";
 import { CourseActions } from "../actions";
 import { CourseSettingsRecord, CourseStore } from "../store";
-import { HelpBox } from "./help-box";
 import { Nbgrader } from "./nbgrader";
 import { Parallel } from "./parallel";
 import { DisableStudentCollaboratorsPanel } from "./disable-collaborators";
@@ -261,8 +259,6 @@ export const ConfigurationPanel: React.FC<Props> = React.memo(
             {render_nbgrader()}
           </Col>
           <Col md={12} style={{ padding: "15px" }}>
-            <HelpBox />
-            <br />
             {render_disable_students()}
             <br />
             {render_student_project_functionality()}

src/packages/frontend/course/configuration/help-box.tsx

@@ -25,7 +25,6 @@ import * as styles from "../styles";
 // CoCalc and course components
 import * as util from "../util";
 import { Handout } from "./handout";
-import { HelpBox } from "../configuration/help-box";
 
 interface HandoutsPanelReactProps {
   frame_id?: string;
@@ -184,15 +183,6 @@ export const HandoutsPanel: React.FC<HandoutsPanelReactProps> = React.memo(
     function render_no_handouts(): Rendered {
       return (
         <div>
-          <div
-            style={{
-              margin: "30px auto",
-              fontSize: "12pt",
-              maxWidth: "800px",
-            }}
-          >
-            <HelpBox />
-          </div>
           <Alert
             type="info"
             style={{ margin: "auto", fontSize: "12pt", maxWidth: "800px" }}

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

@@ -40,7 +40,6 @@ import {
 } from "../store";
 import * as util from "../util";
 import { Student, StudentNameDescription } from "./students-panel-student";
-import { HelpBox } from "../configuration/help-box";
 
 interface StudentsPanelReactProps {
   frame_id?: string; // used for state caching
@@ -424,7 +423,10 @@ export const StudentsPanel: React.FC<StudentsPanelReactProps> = React.memo(
           x.account_id != null
             ? x.first_name + " " + x.last_name
             : x.email_address;
-        const email = !include_name_search && (x.account_id != null) && x.email_address ? " (" + x.email_address + ")": "";
+        const email =
+          !include_name_search && x.account_id != null && x.email_address
+            ? " (" + x.email_address + ")"
+            : "";
         v.push(
           <option key={key} value={key} label={student_name + email}>
             {student_name + email}
@@ -772,15 +774,6 @@ export const StudentsPanel: React.FC<StudentsPanelReactProps> = React.memo(
     function render_no_students(): Rendered {
       return (
         <div>
-          <div
-            style={{
-              margin: "30px auto",
-              fontSize: "12pt",
-              maxWidth: "800px",
-            }}
-          >
-            <HelpBox />
-          </div>
           <Alert
             type="info"
             style={{

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

@@ -9,6 +9,7 @@ Course Frame Editor Actions
 
 import { FrameTree } from "../frame-tree/types";
 import { Actions, CodeEditorState } from "../code-editor/actions";
+import { open_new_tab } from "@cocalc/frontend/misc";
 
 interface CourseEditorState extends CodeEditorState {}
 
@@ -42,7 +43,7 @@ export class CourseEditorActions extends Actions<CourseEditorState> {
   private init_changes_state(): void {
     const syncdb = this.course_actions.syncdb;
     syncdb.on("has-uncommitted-changes", (has_uncommitted_changes) =>
-      this.setState({ has_uncommitted_changes })
+      this.setState({ has_uncommitted_changes }),
     );
     syncdb.on("has-unsaved-changes", (has_unsaved_changes) => {
       this.setState({ has_unsaved_changes });
@@ -105,6 +106,10 @@ export class CourseEditorActions extends Actions<CourseEditorState> {
     this.course_actions.syncdb.redo();
     this.course_actions.syncdb.commit();
   }
+
+  help = (): void => {
+    open_new_tab("https://doc.cocalc.com/teaching-instructors.html");
+  };
 }
 
 export { CourseEditorActions as Actions };

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

@@ -27,9 +27,9 @@ const commands = set([
   //"increase_font_size",
   "save",
   "time_travel",
+  "help",
 ]);
 
-//const buttons = set(["decrease_font_size", "increase_font_size"]);
 const buttons = undefined;
 
 const course_students: EditorDescription = {

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

@@ -986,9 +986,9 @@ addCommands({
   support: {
     alwaysShow: true,
     pos: 6,
-    group: "help-link",
+    group: "usergroup-add",
     icon: "medkit",
-    label: "Support Ticket",
+    label: "Contact Us!",
     button: labels.support,
     title:
       "Create a support ticket.  Ask the people at CoCalc a question, report a bug, etc.",
@@ -1001,13 +1001,11 @@ addCommands({
     pos: 10,
     group: "help-link",
     icon: "youtube",
-    label: "Videos",
+    label: "YouTube Videos",
     button: "Videos",
     title: "Browse videos about CoCalc.",
     onClick: () => {
-      openNewTab(
-        "https://www.youtube.com/playlist?list=PLOEk1mo1p5tJmEuAlou4JIWZFH7IVE2PZ",
-      );
+      openNewTab("https://www.youtube.com/@cocalc-cloud");
     },
   },
   [SEARCH_COMMANDS]: {

src/packages/frontend/frame-editors/frame-tree/commands/generic-commands.tsx

@@ -1,6 +1,5 @@
 import { Carousel } from "antd";
 import { useState } from "react";
-
 import { Icon } from "@cocalc/frontend/components/icon";
 import { Paragraph } from "components/misc";
 import A from "components/misc/A";
@@ -70,7 +69,7 @@ function VideoItem({
         ></iframe>
         <A
           style={{ color: "white", float: "right", marginRight: "10px" }}
-          href="https://www.youtube.com/playlist?list=PLOEk1mo1p5tJmEuAlou4JIWZFH7IVE2PZ"
+          href="https://www.youtube.com/@cocalc-cloud"
         >
           <Icon name="youtube" style={{ color: "red" }} /> More Videos
         </A>