improving fronend UI handling for readonly files (esp jupyter) in misc ways

Author: williamstein

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

@@ -90,11 +90,11 @@ export class JupyterEditorActions extends BaseActions<JupyterEditorState> {
       this.setState({ has_unsaved_changes });
     });
 
-    this.watch_for_introspect();
-    this.watch_for_connection_file_change();
+    this.watchFrameEditorStore();
+    this.watchJupyterStore();
   }
 
-  private watch_for_introspect(): void {
+  private watchFrameEditorStore = (): void => {
     const store = this.store;
     let introspect = store.get("introspect");
     store.on("change", () => {
@@ -108,14 +108,22 @@ export class JupyterEditorActions extends BaseActions<JupyterEditorState> {
         introspect = i;
       }
     });
-  }
+  };
 
-  private watch_for_connection_file_change(): void {
+  private watchJupyterStore = (): void => {
     const store = this.jupyter_actions.store;
     let connection_file = store.get("connection_file");
-    this.jupyter_actions.store.on("change", () => {
+    store.on("change", () => {
+      // sync read only state -- source of true is jupyter_actions.store.get('read_only')
+      const read_only = store.get("read_only");
+      if (read_only != this.store.get("read_only")) {
+        this.setState({ read_only });
+      }
+      // sync connection file
       const c = store.get("connection_file");
-      if (c == connection_file) return;
+      if (c == connection_file) {
+        return;
+      }
       connection_file = c;
       const id = this._get_most_recent_shell_id("jupyter");
       if (id == null) {
@@ -125,7 +133,7 @@ export class JupyterEditorActions extends BaseActions<JupyterEditorState> {
       // This will update the connection file
       this.shell(id, true);
     });
-  }
+  };
 
   public focus(id?: string): void {
     const actions = this.get_frame_actions(id);

src/packages/frontend/frame-editors/jupyter-editor/cell-notebook/actions.ts

@@ -356,6 +356,9 @@ export class NotebookFrameActions {
    ***/
 
   set_mode(mode: "escape" | "edit"): void {
+    if (this.jupyter_actions.store.get("read_only") && mode == "edit") {
+      return;
+    }
     if (mode == "edit") {
       // If we're changing to edit mode and current cell is a markdown
       // cell, switch it to the codemirror editor view.

src/packages/frontend/frame-editors/time-travel-editor/revert-file.tsx

@@ -22,7 +22,10 @@ export class RevertFile extends Component<Props> {
           if (this.props.version != null)
             this.props.actions.revert(this.props.version);
         }}
-        disabled={this.props.version == null}
+        disabled={
+          this.props.version == null ||
+          this.props.actions.syncdoc?.is_read_only()
+        }
       >
         <Icon name="undo" /> Revert
       </Button>

src/packages/frontend/jupyter/cell-input.tsx

@@ -112,12 +112,16 @@ export const CellInput: React.FC<CellInputProps> = React.memo(
             actions={props.actions}
             id={props.id}
             dragHandle={props.dragHandle}
+            read_only={props.is_readonly}
           />
         </HiddenXS>
       );
     }
 
     function handle_md_double_click(): void {
+      if (props.is_readonly) {
+        return;
+      }
       frameActions.current?.switch_md_cell_to_edit(props.cell.get("id"));
     }
 
@@ -186,7 +190,8 @@ export const CellInput: React.FC<CellInputProps> = React.memo(
     function render_markdown_edit_button(): Rendered {
       if (
         props.actions == null ||
-        props.cell.getIn(["metadata", "editable"]) === false
+        props.cell.getIn(["metadata", "editable"]) === false ||
+        props.is_readonly
       ) {
         return;
       }
@@ -238,6 +243,9 @@ export const CellInput: React.FC<CellInputProps> = React.memo(
           <MostlyStaticMarkdown
             value={value}
             onChange={(value) => {
+              if (props.is_readonly) {
+                return;
+              }
               // user checked a checkbox.
               props.actions?.set_cell_input(props.id, value, true);
             }}

src/packages/frontend/jupyter/cell-list.tsx

@@ -97,6 +97,7 @@ interface CellListProps {
   use_windowed_list?: boolean;
   llmTools?: LLMTools;
   computeServerId?: number;
+  read_only?: boolean;
 }
 
 export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
@@ -126,6 +127,7 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
     use_windowed_list,
     llmTools,
     computeServerId,
+    read_only,
   } = props;
 
   const cell_list_node = useRef<HTMLElement | null>(null);
@@ -478,6 +480,7 @@ export const CellList: React.FC<CellListProps> = (props: CellListProps) => {
           isFirst={isFirst}
           isLast={isLast}
           dragHandle={dragHandle}
+          read_only={read_only}
         />
       </div>
     );

src/packages/frontend/jupyter/cell.tsx

@@ -59,6 +59,7 @@ interface Props {
   isFirst?: boolean;
   isLast?: boolean;
   dragHandle?: JSX.Element;
+  read_only?: boolean;
 }
 
 function areEqual(props: Props, nextProps: Props): boolean {
@@ -86,7 +87,8 @@ function areEqual(props: Props, nextProps: Props): boolean {
     (nextProps.llmTools?.model ?? "") !== (props.llmTools?.model ?? "") ||
     (nextProps.complete !== props.complete && // only worry about complete when editing this cell
       (nextProps.is_current || props.is_current)) ||
-    nextProps.dragHandle !== props.dragHandle
+    nextProps.dragHandle !== props.dragHandle ||
+    nextProps.read_only !== props.read_only
   );
 }
 
@@ -101,7 +103,10 @@ export const Cell: React.FC<Props> = React.memo((props: Props) => {
   }
 
   function is_editable(): boolean {
-    return props.cell.getIn(["metadata", "editable"], true) as any;
+    return (
+      !props.read_only &&
+      (props.cell.getIn(["metadata", "editable"], true) as any)
+    );
   }
 
   function is_deletable(): boolean {
@@ -175,6 +180,9 @@ export const Cell: React.FC<Props> = React.memo((props: Props) => {
   }
 
   function double_click(event: any): void {
+    if (props.read_only) {
+      return;
+    }
     if (props.cell.getIn(["metadata", "editable"]) === false) {
       return;
     }
@@ -378,7 +386,7 @@ export const Cell: React.FC<Props> = React.memo((props: Props) => {
   // Note that the cell id is used for scroll functionality, so *is* important.
   return (
     <>
-      {render_insert_cell("above")}
+      {!props.read_only && render_insert_cell("above")}
       <div
         style={getCellStyle()}
         onMouseUp={props.is_current ? undefined : click_on_cell}
@@ -390,7 +398,7 @@ export const Cell: React.FC<Props> = React.memo((props: Props) => {
         {render_cell_input(props.cell)}
         {render_cell_output(props.cell)}
       </div>
-      {render_insert_cell("below")}
+      {!props.read_only && render_insert_cell("below")}
     </>
   );
 }, areEqual);

src/packages/frontend/jupyter/main.tsx

@@ -144,6 +144,7 @@ export const JupyterEditor: React.FC<Props> = React.memo((props: Props) => {
   const directory: undefined | string = useRedux([name, "directory"]);
   // const version: undefined | any = useRedux([name, "version"]);
   const about: undefined | boolean = useRedux([name, "about"]);
+  const read_only = useRedux([name, "read_only"]);
   const backend_kernel_info: undefined | immutable.Map<any, any> = useRedux([
     name,
     "backend_kernel_info",
@@ -281,6 +282,7 @@ export const JupyterEditor: React.FC<Props> = React.memo((props: Props) => {
     return (
       <CellList
         actions={actions}
+        read_only={read_only}
         cell_list={cell_list}
         cell_toolbar={cell_toolbar}
         cells={cells}

src/packages/frontend/jupyter/prompt/base.ts

@@ -26,6 +26,7 @@ export interface InputPromptProps {
   id?: string;
   style?: CSSProperties;
   dragHandle?: JSX.Element;
+  read_only?: boolean;
 }
 
 export const OUTPUT_STYLE: React.CSSProperties = {

src/packages/frontend/jupyter/prompt/input.tsx

@@ -92,7 +92,7 @@ export const InputPrompt: React.FC<InputPromptProps> = (props) => {
     );
   }
 
-  if (props.dragHandle != null) {
+  if (!props.read_only && props.dragHandle != null) {
     return (
       <div>
         <div style={{ float: "left" }}>{props.dragHandle}</div>