Implement read-only option to playground sessions (#2834)

izruff · RichDom2185 · web-flow · commit c7fe3b47c664 · 2024-03-23T15:16:46.000+08:00
* Implemented session editing and viewing IDs

* Added readonly info to the UI

* Slight improvements to UI and added popup message upon joining session

* Added popup message upon joining

* Updated redux action

* Updated tests

* Fixed formatting

* Removed unused function

* Disable editor in read-only sessions

This uses the current version of @sourceacademy/sharedb-ace at NPM, not the one proposed in this PR. Refer to the PR in sharedb-ace for more info.

---------

Co-authored-by: Richard Dominick &lt;34370238+RichDom2185@users.noreply.github.com&gt;
diff --git a/src/commons/application/ApplicationTypes.ts b/src/commons/application/ApplicationTypes.ts
@@ -358,6 +358,7 @@ export const createDefaultWorkspace = (workspaceLocation: WorkspaceLocation): Wo
   programPrependValue: '',
   programPostpendValue: '',
   editorSessionId: '',
+  sessionDetails: null,
   isEditorReadonly: false,
   editorTestcases: [],
   externalLibrary: ExternalLibraryName.NONE,
diff --git a/src/commons/assessmentWorkspace/AssessmentWorkspace.tsx b/src/commons/assessmentWorkspace/AssessmentWorkspace.tsx
@@ -829,6 +829,7 @@ const AssessmentWorkspace: React.FC<AssessmentWorkspaceProps> = props => {
           removeEditorTabByIndex: editorContainerHandlers.removeEditorTabByIndex,
           editorTabs: editorTabs.map(convertEditorTabStateToProps),
           editorSessionId: '',
+          sessionDetails: null,
           sourceChapter: question.library.chapter || Chapter.SOURCE_4,
           sourceVariant: question.library.variant ?? Variant.DEFAULT,
           externalLibraryName: question.library.external.name || 'NONE',
diff --git a/src/commons/collabEditing/CollabEditingActions.ts b/src/commons/collabEditing/CollabEditingActions.ts
@@ -1,7 +1,11 @@
 import { createAction } from '@reduxjs/toolkit';
 
 import { WorkspaceLocation } from '../workspace/WorkspaceTypes';
-import { SET_EDITOR_SESSION_ID, SET_SHAREDB_CONNECTED } from './CollabEditingTypes';
+import {
+  SET_EDITOR_SESSION_ID,
+  SET_SESSION_DETAILS,
+  SET_SHAREDB_CONNECTED
+} from './CollabEditingTypes';
 
 export const setEditorSessionId = createAction(
   SET_EDITOR_SESSION_ID,
@@ -10,6 +14,16 @@ export const setEditorSessionId = createAction(
   })
 );
 
+export const setSessionDetails = createAction(
+  SET_SESSION_DETAILS,
+  (
+    workspaceLocation: WorkspaceLocation,
+    sessionDetails: { docId: string; readOnly: boolean } | null
+  ) => ({
+    payload: { workspaceLocation, sessionDetails }
+  })
+);
+
 /**
  * Sets ShareDB connection status.
  *
diff --git a/src/commons/collabEditing/CollabEditingHelper.ts b/src/commons/collabEditing/CollabEditingHelper.ts
@@ -13,17 +13,25 @@ export function getSessionUrl(sessionId: string, ws?: boolean): string {
   return url.toString();
 }
 
-export async function checkSessionIdExists(sessionId: string): Promise<boolean> {
+export async function getDocInfoFromSessionId(
+  sessionId: string
+): Promise<{ docId: string; readOnly: boolean } | null> {
   const resp = await fetch(getSessionUrl(sessionId));
 
-  return resp && resp.ok;
+  if (resp && resp.ok) {
+    return resp.json();
+  } else {
+    return null;
+  }
 }
 
-export async function createNewSession(initial: string): Promise<string> {
+export async function createNewSession(
+  contents: string
+): Promise<{ docId: string; sessionEditingId: string; sessionViewingId: string }> {
   const resp = await fetch(Constants.sharedbBackendUrl, {
     method: 'POST',
-    body: initial,
-    headers: { 'Content-Type': 'text/plain' }
+    body: JSON.stringify({ contents }),
+    headers: { 'Content-Type': 'application/json' }
   });
 
   if (!resp || !resp.ok) {
@@ -32,5 +40,5 @@ export async function createNewSession(initial: string): Promise<string> {
     );
   }
 
-  return resp.text();
+  return resp.json();
 }
diff --git a/src/commons/collabEditing/CollabEditingTypes.ts b/src/commons/collabEditing/CollabEditingTypes.ts
@@ -1,2 +1,3 @@
 export const SET_EDITOR_SESSION_ID = 'SET_EDITOR_SESSION_ID';
+export const SET_SESSION_DETAILS = 'SET_SESSION_DETAILS';
 export const SET_SHAREDB_CONNECTED = 'SET_SHAREDB_CONNECTED';
diff --git a/src/commons/controlBar/ControlBarSessionButton.tsx b/src/commons/controlBar/ControlBarSessionButton.tsx
@@ -1,17 +1,18 @@
-import { Classes, Colors, Menu } from '@blueprintjs/core';
+import { Classes, Colors, Divider, FormGroup, Menu, Text } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
 import { Popover2, Tooltip2 } from '@blueprintjs/popover2';
 import React from 'react';
 import * as CopyToClipboard from 'react-copy-to-clipboard';
 
-import { checkSessionIdExists, createNewSession } from '../collabEditing/CollabEditingHelper';
+import { createNewSession, getDocInfoFromSessionId } from '../collabEditing/CollabEditingHelper';
 import ControlButton from '../ControlButton';
 import { showWarningMessage } from '../utils/notifications/NotificationsHelper';
 
 type ControlBarSessionButtonsProps = DispatchProps & StateProps;
 
 type DispatchProps = {
   handleSetEditorSessionId?: (editorSessionId: string) => void;
+  handleSetSessionDetails?: (sessionDetails: { docId: string; readOnly: boolean } | null) => void;
 };
 
 type StateProps = {
@@ -24,6 +25,8 @@ type StateProps = {
 
 type State = {
   joinElemValue: string;
+  sessionEditingId: string;
+  sessionViewingId: string;
 };
 
 function handleError(error: any) {
@@ -34,34 +37,77 @@ export class ControlBarSessionButtons extends React.PureComponent<
   ControlBarSessionButtonsProps,
   State
 > {
-  private inviteInputElem: React.RefObject<HTMLInputElement>;
+  private sessionEditingIdInputElem: React.RefObject<HTMLInputElement>;
+  private sessionViewingIdInputElem: React.RefObject<HTMLInputElement>;
 
   constructor(props: ControlBarSessionButtonsProps) {
     super(props);
-    this.state = { joinElemValue: '' };
+    this.state = { joinElemValue: '', sessionEditingId: '', sessionViewingId: '' };
 
     this.handleChange = this.handleChange.bind(this);
-    this.inviteInputElem = React.createRef();
-    this.selectInviteInputText = this.selectInviteInputText.bind(this);
+    this.sessionEditingIdInputElem = React.createRef();
+    this.sessionViewingIdInputElem = React.createRef();
+    this.selectSessionEditingId = this.selectSessionEditingId.bind(this);
+    this.selectSessionViewingId = this.selectSessionViewingId.bind(this);
   }
 
   public render() {
     const handleStartInvite = () => {
       // FIXME this handler should be a Saga action or at least in a controller
       if (this.props.editorSessionId === '') {
-        createNewSession(this.props.getEditorValue()).then(sessionId => {
-          this.props.handleSetEditorSessionId!(sessionId);
+        createNewSession(this.props.getEditorValue()).then(resp => {
+          this.setState({
+            sessionEditingId: resp.sessionEditingId,
+            sessionViewingId: resp.sessionViewingId
+          });
+          this.props.handleSetEditorSessionId!(resp.sessionEditingId);
+          this.props.handleSetSessionDetails!({ docId: resp.docId, readOnly: false });
         }, handleError);
       }
     };
 
     const inviteButtonPopoverContent = (
-      <>
-        <input value={this.props.editorSessionId} readOnly={true} ref={this.inviteInputElem} />
-        <CopyToClipboard text={'' + this.props.editorSessionId}>
-          <ControlButton icon={IconNames.DUPLICATE} onClick={this.selectInviteInputText} />
-        </CopyToClipboard>
-      </>
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        {!this.props.editorSessionId ? (
+          <>
+            <Text>You are not currently in any session.</Text>
+            <Divider />
+            <ControlButton label={'Create'} icon={IconNames.ADD} onClick={handleStartInvite} />
+          </>
+        ) : (
+          <>
+            <Text>
+              You have joined the session as{' '}
+              {this.state.sessionEditingId ? 'an editor' : 'a viewer'}.
+            </Text>
+            <Divider />
+            {this.state.sessionEditingId && (
+              <FormGroup subLabel="Invite as editor">
+                <input
+                  value={this.state.sessionEditingId}
+                  readOnly={true}
+                  ref={this.sessionEditingIdInputElem}
+                />
+                <CopyToClipboard text={'' + this.state.sessionEditingId}>
+                  <ControlButton icon={IconNames.DUPLICATE} onClick={this.selectSessionEditingId} />
+                </CopyToClipboard>
+              </FormGroup>
+            )}
+            {this.state.sessionViewingId && (
+              <FormGroup subLabel="Invite as viewer">
+                <input
+                  value={this.state.sessionViewingId}
+                  readOnly={true}
+                  ref={this.sessionViewingIdInputElem}
+                />
+                <CopyToClipboard text={'' + this.state.sessionViewingId}>
+                  <ControlButton icon={IconNames.DUPLICATE} onClick={this.selectSessionViewingId} />
+                </CopyToClipboard>
+              </FormGroup>
+            )}
+          </>
+        )}
+      </div>
     );
 
     const inviteButton = (
@@ -70,19 +116,32 @@ export class ControlBarSessionButtons extends React.PureComponent<
         inheritDarkTheme={false}
         content={inviteButtonPopoverContent}
       >
-        <ControlButton label="Invite" icon={IconNames.GRAPH} onClick={handleStartInvite} />
+        <ControlButton label="Invite" icon={IconNames.GRAPH} />
       </Popover2>
     );
 
     const handleStartJoining = (event: React.FormEvent<HTMLFormElement>) => {
       event.preventDefault();
       // FIXME this handler should be a Saga action or at least in a controller
-      checkSessionIdExists(this.state.joinElemValue).then(
-        exists => {
-          if (exists) {
+      getDocInfoFromSessionId(this.state.joinElemValue).then(
+        docInfo => {
+          if (docInfo !== null) {
             this.props.handleSetEditorSessionId!(this.state!.joinElemValue);
+            this.props.handleSetSessionDetails!(docInfo);
+            if (docInfo.readOnly) {
+              this.setState({
+                sessionEditingId: '',
+                sessionViewingId: this.state.joinElemValue
+              });
+            } else {
+              this.setState({
+                sessionEditingId: this.state.joinElemValue,
+                sessionViewingId: ''
+              });
+            }
           } else {
             this.props.handleSetEditorSessionId!('');
+            this.props.handleSetSessionDetails!(null);
             showWarningMessage('Could not find a session with that ID.');
           }
         },
@@ -120,7 +179,7 @@ export class ControlBarSessionButtons extends React.PureComponent<
         onClick={() => {
           // FIXME: this handler should be a Saga action or at least in a controller
           this.props.handleSetEditorSessionId!('');
-          this.setState({ joinElemValue: '' });
+          this.setState({ joinElemValue: '', sessionEditingId: '', sessionViewingId: '' });
         }}
       />
     );
@@ -158,10 +217,17 @@ export class ControlBarSessionButtons extends React.PureComponent<
     );
   }
 
-  private selectInviteInputText() {
-    if (this.inviteInputElem.current !== null) {
-      this.inviteInputElem.current.focus();
-      this.inviteInputElem.current.select();
+  private selectSessionEditingId() {
+    if (this.sessionEditingIdInputElem.current !== null) {
+      this.sessionEditingIdInputElem.current.focus();
+      this.sessionEditingIdInputElem.current.select();
+    }
+  }
+
+  private selectSessionViewingId() {
+    if (this.sessionViewingIdInputElem.current !== null) {
+      this.sessionViewingIdInputElem.current.focus();
+      this.sessionViewingIdInputElem.current.select();
     }
   }
 
diff --git a/src/commons/editingWorkspace/EditingWorkspace.tsx b/src/commons/editingWorkspace/EditingWorkspace.tsx
@@ -680,6 +680,7 @@ const EditingWorkspace: React.FC<EditingWorkspaceProps> = props => {
                 };
               }),
             editorSessionId: '',
+            sessionDetails: null,
             handleDeclarationNavigate: handleDeclarationNavigate,
             handleEditorEval: handleEditorEval,
             handleEditorValueChange: handleEditorValueChange,
diff --git a/src/commons/editor/Editor.tsx b/src/commons/editor/Editor.tsx
@@ -48,6 +48,7 @@ type DispatchProps = {
 
 type EditorStateProps = {
   editorSessionId: string;
+  sessionDetails: { docId: string; readOnly: boolean } | null;
   isEditorAutorun: boolean;
   sourceChapter?: Chapter;
   externalLibraryName?: string;
diff --git a/src/commons/editor/UseShareAce.tsx b/src/commons/editor/UseShareAce.tsx
@@ -2,7 +2,8 @@ import * as Sentry from '@sentry/browser';
 import sharedbAce from '@sourceacademy/sharedb-ace';
 import React from 'react';
 
-import { checkSessionIdExists, getSessionUrl } from '../collabEditing/CollabEditingHelper';
+import { getDocInfoFromSessionId, getSessionUrl } from '../collabEditing/CollabEditingHelper';
+import { showSuccessMessage } from '../utils/notifications/NotificationsHelper';
 import { EditorHook } from './Editor';
 
 // EditorHook structure:
@@ -18,22 +19,30 @@ const useShareAce: EditorHook = (inProps, outProps, keyBindings, reactAceRef) =>
   const propsRef = React.useRef(inProps);
   propsRef.current = inProps;
 
-  const { editorSessionId } = inProps;
+  const { editorSessionId, sessionDetails } = inProps;
 
   React.useEffect(() => {
-    if (!editorSessionId) {
+    if (!editorSessionId || !sessionDetails) {
       return;
     }
 
     const editor = reactAceRef.current!.editor;
-    const ShareAce = new sharedbAce(editorSessionId, {
+    const ShareAce = new sharedbAce(sessionDetails.docId, {
       WsUrl: getSessionUrl(editorSessionId, true),
       pluginWsUrl: null,
       namespace: 'sa'
     });
+
     ShareAce.on('ready', () => {
-      ShareAce.add(editor, [], []);
+      ShareAce.add(editor, ['contents'], []);
       propsRef.current.handleSetSharedbConnected!(true);
+
+      // Disables editor in a read-only session
+      editor.setReadOnly(sessionDetails.readOnly);
+
+      showSuccessMessage(
+        'You have joined a session as ' + (sessionDetails.readOnly ? 'a viewer.' : 'an editor.')
+      );
     });
     ShareAce.on('error', (path: string, error: any) => {
       console.error('ShareAce error', error);
@@ -50,8 +59,8 @@ const useShareAce: EditorHook = (inProps, outProps, keyBindings, reactAceRef) =>
         return;
       }
       try {
-        const exists = await checkSessionIdExists(editorSessionId);
-        if (!exists) {
+        const docInfo = await getDocInfoFromSessionId(editorSessionId);
+        if (docInfo === null) {
           clearInterval(interval);
           WS.close();
         }
@@ -75,8 +84,11 @@ const useShareAce: EditorHook = (inProps, outProps, keyBindings, reactAceRef) =>
         connection.unlisten();
       }
       ShareAce.WS.close();
+
+      // Resets editor to normal after leaving the session
+      editor.setReadOnly(false);
     };
-  }, [editorSessionId, reactAceRef]);
+  }, [editorSessionId, sessionDetails, reactAceRef]);
 };
 
 export default useShareAce;
diff --git a/src/commons/editor/__tests__/Editor.tsx b/src/commons/editor/__tests__/Editor.tsx
@@ -8,6 +8,7 @@ test('Editor renders correctly', () => {
     editorTabIndex: 0,
     breakpoints: [],
     editorSessionId: '',
+    sessionDetails: null,
     editorValue: '',
     highlightedLines: [],
     isEditorAutorun: false,
diff --git a/src/commons/editor/__tests__/__snapshots__/Editor.tsx.snap b/src/commons/editor/__tests__/__snapshots__/Editor.tsx.snap
@@ -15,5 +15,6 @@ exports[`Editor renders correctly 1`] = `
   handleUpdateHasUnsavedChanges={[Function]}
   highlightedLines={Array []}
   isEditorAutorun={false}
+  sessionDetails={null}
 />
 `;
diff --git a/src/commons/workspace/WorkspaceReducer.ts b/src/commons/workspace/WorkspaceReducer.ts
diff --git a/src/commons/workspace/WorkspaceTypes.ts b/src/commons/workspace/WorkspaceTypes.ts
diff --git a/src/pages/academy/grading/subcomponents/GradingWorkspace.tsx b/src/pages/academy/grading/subcomponents/GradingWorkspace.tsx
diff --git a/src/pages/playground/Playground.tsx b/src/pages/playground/Playground.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,2 +1,3 @@`
`1`	`1`	`export const SET_EDITOR_SESSION_ID = 'SET_EDITOR_SESSION_ID';`
	`2`	`+export const SET_SESSION_DETAILS = 'SET_SESSION_DETAILS';`
`2`	`3`	`export const SET_SHAREDB_CONNECTED = 'SET_SHAREDB_CONNECTED';`