style changeS

eduhelx_jupyterlab_student/handlers.py

@@ -28,7 +28,7 @@
     merge as git_merge, abort_merge, delete_local_branch,
     is_ancestor_commit, diff_status as git_diff_status
 )
-from eduhelx_utils.api import Api, AuthType
+from eduhelx_utils.api import Api, AuthType, APIException
 from eduhelx_utils.process import execute
 from .student_repo import StudentClassRepo, NotStudentClassRepositoryException
 from ._version import __version__
@@ -88,6 +88,16 @@ def config(self) -> ExtensionConfig:
     def api(self) -> Api:
         return self.context.api
 
+    # Default error handling
+    def write_error(self, status_code, **kwargs):
+        # If exc_info is present, the error is unhandled.
+        if "exc_info" not in kwargs: return
+
+        cls, exc, traceback = kwargs["exc_info"]
+        if isinstance(exc, APIException):
+            self.set_status(status_code)
+            self.finish(exc.response.text)
+
 class WebsocketHandler(WSMixin, WSHandler, BaseHandler):
     clients = []
     queued_messages = []

src/components/assignment-panel/assignment-info/assignment-info.tsx

@@ -1,10 +1,11 @@
-import React, { Fragment, useMemo } from 'react'
+import React, { Fragment, useCallback, useMemo } from 'react'
 import { Tooltip } from 'antd'
+import { FormHelperText, Input } from '@material-ui/core'
+import { ArrowBackSharp } from '@material-ui/icons'
 import moment from 'moment'
 import pluralize from 'pluralize'
-import { ArrowBackSharp } from '@material-ui/icons'
 import { assignmentInfoClass, assignmentInfoSectionClass, assignmentInfoSectionHeaderClass, assignmentInfoSectionWarningClass, assignmentNameClass, tagClass } from './style'
-import { useAssignment } from '../../../contexts'
+import { useAssignment, useCommands, } from '../../../contexts'
 import { DateFormat } from '../../../utils'
 
 const MS_IN_HOURS = 3.6e6
@@ -13,7 +14,8 @@ interface AssignmentInfoProps {
 }
 
 export const AssignmentInfo = ({  }: AssignmentInfoProps) => {
-    const { assignment, student, course } = useAssignment()!
+    const { assignment, student, course, studentNotebookExists } = useAssignment()!
+    const commands = useCommands()
     if (!student || !assignment || !course) return null
 
     const hoursUntilDue = useMemo(() => (
@@ -99,6 +101,16 @@ export const AssignmentInfo = ({  }: AssignmentInfoProps) => {
         else return `You are allowed to submit ${ remainingAttempts }${ assignment.currentAttempts > 0 ? ' more' : ''} ${ pluralize("time", remainingAttempts) }`
     }, [assignment])
 
+    const studentNotebookInvalid = useMemo(() => (
+        !studentNotebookExists(assignment)
+    ), [studentNotebookExists, assignment])
+
+    const openStudentNotebook = useCallback(async () => {
+        if (!commands || !assignment) return
+        const fullNotebookPath = assignment.absoluteDirectoryPath + "/" + assignment.studentNotebookPath
+        commands.execute('docmanager:open', { path: fullNotebookPath })
+    }, [commands, assignment])
+
     return (
         <div className={ assignmentInfoClass }>
             <div>
@@ -121,18 +133,18 @@ export const AssignmentInfo = ({  }: AssignmentInfoProps) => {
                     </span>
                 ) }
             </div>
-            <div className={ assignmentInfoSectionClass } style={{ marginTop: 16 }}>
+            {/* <div className={ assignmentInfoSectionClass } style={{ marginTop: 16 }}>
                 <h5 className={ assignmentInfoSectionHeaderClass }>Student</h5>
                 <span>{ student.name }</span>
-            </div>
-            <div className={ assignmentInfoSectionClass }>
+            </div> */}
+            <div className={ assignmentInfoSectionClass } style={{ marginTop: 16 }}>
                 <h5 className={ assignmentInfoSectionHeaderClass }>
                     { pluralize("Instructor", course.instructors.length) }
                 </h5>
                 <span>{ course.instructors.map((ins) => ins.name).join(", ") }</span>
             </div>
             <div className={ assignmentInfoSectionClass }>
-                <h5 className={ assignmentInfoSectionHeaderClass }>Due date</h5>
+                <h5 className={ assignmentInfoSectionHeaderClass }>Due Date</h5>
                 <div>
                     { assignment.isCreated ? (
                         new DateFormat(assignment.adjustedDueDate!).toBasicDatetime()
@@ -167,6 +179,32 @@ export const AssignmentInfo = ({  }: AssignmentInfoProps) => {
                     </div>
                 </div>
             ) }
+            <div className={ assignmentInfoSectionClass } style={{ marginTop: 0, marginBottom: 8 }}>
+                <h5 className={ assignmentInfoSectionHeaderClass }>
+                    Assignment Notebook
+                </h5>
+                <div style={{ width: "100%" }}>
+                    { !studentNotebookInvalid ? (
+                        <Fragment>
+                        <Input
+                            readOnly
+                            value={ assignment.studentNotebookPath }
+                            inputProps={{ style: { height: 32, fontSize: 15 } }}
+                            style={{ width: "100%" }}
+                        />
+                        <FormHelperText style={{ color: "#1976d2" }}>
+                            <a onClick={ openStudentNotebook } style={{ cursor: "pointer" }}>
+                                Open notebook
+                            </a>
+                        </FormHelperText>
+                        </Fragment>
+                    ) : (
+                        <span>
+                            Not published yet
+                        </span>
+                    ) }
+                </div>
+            </div>
         </div>
     )
 }

src/components/assignment-panel/assignment-staged-changes/assignment-staged-changes.tsx

@@ -101,9 +101,9 @@ export const AssignmentStagedChanges = ({ ...props }: AssignmentStagedChangesPro
             {/* <TextDivider innerStyle={{ fontSize: 'var(--jp-ui-font-size2)' }} style={{ marginBottom: 4 }}>Unsubmitted changes</TextDivider> */}
             <div className={ stagedChangesListClass }>
             {
-                stagedChangesSource.slice(0, showMore ? undefined : SHOW_MORE_CUTOFF).map((change) => (
+                stagedChangesSource.slice(0, showMore ? undefined : SHOW_MORE_CUTOFF).map((change, i) => (
                     <div className={ stagedChangeListItemClass }>
-                        <div style={{ display: "flex", alignItems: "center" }}>
+                        <div style={{ display: "flex", alignItems: "center", marginTop: i === 0 ? 4 : 0 }}>
                             { change.type === "directory" ? (
                                 <folderIcon.react
                                     className={ assignmentStagedChangesFolderIconClass }

src/components/assignment-panel/assignment-submit-form/assignment-submit-form.tsx

@@ -123,7 +123,7 @@ export const AssignmentSubmitForm = ({ }: AssignmentSubmitFormProps) => {
                     disabled: disabledStyle
                 }}
                 multiline
-                rows={ 5 }
+                rows={ 3 }
                 rowsMax={ 10 }
                 placeholder="Description (optional)"
                 title="Enter a description for the submission"

src/components/assignment-panel/style.ts

@@ -7,6 +7,7 @@ export const panelWrapperClass = (style as any)({
     color: 'var(--jp-ui-font-color1)',
     fontSize: 'var(--jp-ui-font-size1)',
     background: 'var(--jp-layout-color1) !important',
+    minWidth: 'var(--jp-sidebar-min-width)',
     '&, & *': { boxSizing: 'border-box' } 
 })
 

style/base.css

@@ -3,3 +3,6 @@
 
     https://jupyterlab.readthedocs.io/en/stable/developer/css.html
 */
+:root {
+    --jp-sidebar-min-width: 350px !important;
+}