Implement retrieval of playground configuration from backend UUID and reinstate configuration by hash parameters

Author: chownces

src/commons/controlBar/ControlBarShareButton.tsx

@@ -12,22 +12,11 @@ import { externalUrlShortenerRequest } from '../sagas/PlaygroundSaga';
 import { postSharedProgram } from '../sagas/RequestsSaga';
 import Constants, { Links } from '../utils/Constants';
 import { showSuccessMessage, showWarningMessage } from '../utils/notifications/NotificationsHelper';
-import { request } from '../utils/RequestHelper';
-import { RemoveLast } from '../utils/TypeHelper';
 
 type ControlBarShareButtonProps = {
   isSicp?: boolean;
 };
 
-type ShareLinkRequestHelperParams = RemoveLast<Parameters<typeof request>>;
-
-export const requestToShareProgram = async (
-  ...[path, method, opts]: ShareLinkRequestHelperParams
-) => {
-  const resp = await request(path, method, opts);
-  return resp;
-};
-
 /**
  * Generates the share link for programs in the Playground.
  *

src/commons/sagas/RequestsSaga.ts

@@ -1,5 +1,6 @@
 import { call } from 'redux-saga/effects';
 import { backendParamsToProgressStatus } from 'src/features/grading/GradingUtils';
+import { ShareLinkState } from 'src/features/playground/shareLinks/ShareLinkState';
 import { OptionType } from 'src/pages/academy/teamFormation/subcomponents/TeamFormationForm';
 
 import {
@@ -1661,6 +1662,26 @@ export async function deleteDevice(device: Pick<Device, 'id'>, tokens?: Tokens):
   return true;
 }
 
+/**
+ * GET /shared_programs/:uuid
+ */
+export async function getSharedProgram(uuid: string, tokens?: Tokens): Promise<ShareLinkState> {
+  tokens = fillTokens(tokens);
+  const resp = await request(`shared_programs/${uuid}`, 'GET', {
+    ...tokens
+  });
+
+  if (!resp) {
+    throw new Error('Failed to fetch program from shared link!');
+  }
+
+  if (!resp.ok) {
+    throw new Error('Invalid shared link!');
+  }
+
+  return resp.json();
+}
+
 /**
  * POST /shared_programs
  */

src/features/playground/shareLinks/ShareLinkState.ts

@@ -1,13 +1,22 @@
-type ShareLinkState = Partial<{
-  isFolder: string;
-  tabs: string;
-  tabIdx: string;
+import { Chapter, Variant } from 'js-slang/dist/types';
+
+export type ShareLinkState = {
+  isFolder: boolean;
+  files: Record<string, string>;
+  tabs: string[];
+  tabIdx: number | null;
+  chap: Chapter;
+  variant: Variant;
+  exec: number;
+};
+
+export type ParsedIntermediateShareLinkState = {
+  isFolder?: string;
+  files?: string;
+  tabs?: string[];
+  tabIdx?: string;
   chap: string;
   variant: string;
-  ext: string;
   exec: string;
-  files: string;
-  prgrm: string;
-}>;
-
-export default ShareLinkState;
+  prgrm?: string; // for backwards compatibility of old hash parameter shared links
+};

src/features/playground/shareLinks/decoder/Decoder.ts

@@ -1,4 +1,11 @@
-import ShareLinkState from '../ShareLinkState';
+import { Chapter, Variant } from 'js-slang/dist/types';
+import { decompressFromEncodedURIComponent } from 'lz-string';
+import { getDefaultFilePath } from 'src/commons/application/ApplicationTypes';
+import { convertParamToBoolean, convertParamToInt } from 'src/commons/utils/ParamParseHelper';
+import { parseQuery } from 'src/commons/utils/QueryHelper';
+import { WorkspaceLocation } from 'src/commons/workspace/WorkspaceTypes';
+
+import { ShareLinkState } from '../ShareLinkState';
 import DecoderDelegate from './delegates/DecoderDelegate';
 
 /**
@@ -11,8 +18,34 @@ class ShareLinkStateDecoder {
     this.encodedString = encodedString;
   }
 
-  decodeWith(decoderDelegate: DecoderDelegate): ShareLinkState {
-    return decoderDelegate.decode(this.encodedString);
+  decodeWith(
+    decoderDelegate: DecoderDelegate,
+    workspaceLocation: WorkspaceLocation
+  ): ShareLinkState {
+    const parsedObject = decoderDelegate.decode(this.encodedString);
+
+    // For backward compatibility with old share links - 'prgrm' is no longer used.
+    const program =
+      parsedObject.prgrm === undefined ? '' : decompressFromEncodedURIComponent(parsedObject.prgrm);
+
+    // By default, create just the default file.
+    const defaultFilePath = getDefaultFilePath(workspaceLocation);
+    const filesObject: Record<string, string> =
+      parsedObject.files === undefined
+        ? {
+            [defaultFilePath]: program
+          }
+        : parseQuery(decompressFromEncodedURIComponent(parsedObject.files));
+
+    return {
+      chap: convertParamToInt(parsedObject.chap) ?? Chapter.SOURCE_1,
+      exec: Math.max(convertParamToInt(parsedObject.exec) || 1000, 1000),
+      files: filesObject,
+      isFolder: convertParamToBoolean(parsedObject.isFolder) ?? false,
+      tabIdx: convertParamToInt(parsedObject.tabIdx) ?? 0, // By default, use the first editor tab.
+      tabs: parsedObject.tabs?.map(decompressFromEncodedURIComponent) ?? [defaultFilePath], // By default, open a single editor tab containing the default playground file.
+      variant: parsedObject.variant as Variant
+    };
   }
 }
 

src/features/playground/shareLinks/decoder/delegates/DecoderDelegate.ts

@@ -1,7 +1,7 @@
-import ShareLinkState from '../../ShareLinkState';
+import { ParsedIntermediateShareLinkState } from '../../ShareLinkState';
 
 interface DecoderDelegate {
-  decode(str: string): ShareLinkState;
+  decode(str: string): ParsedIntermediateShareLinkState;
 }
 
 export default DecoderDelegate;

src/features/playground/shareLinks/decoder/delegates/JsonDecoderDelegate.ts

@@ -1,10 +1,9 @@
-import ShareLinkState from '../../ShareLinkState';
+import { ParsedIntermediateShareLinkState } from '../../ShareLinkState';
 import DecoderDelegate from './DecoderDelegate';
 
 class JsonDecoderDelegate implements DecoderDelegate {
-  decode(str: string): ShareLinkState {
-    const jsonObject = JSON.parse(str);
-    return jsonObject.data;
+  decode(str: string): ParsedIntermediateShareLinkState {
+    return JSON.parse(str);
   }
 }
 

src/features/playground/shareLinks/decoder/delegates/UrlParamsDecoderDelegate.ts

@@ -1,21 +1,21 @@
-import { IParsedQuery, parseQuery } from 'src/commons/utils/QueryHelper';
+import { parseQuery } from 'src/commons/utils/QueryHelper';
 
-import ShareLinkState from '../../ShareLinkState';
+import { ParsedIntermediateShareLinkState } from '../../ShareLinkState';
 import DecoderDelegate from './DecoderDelegate';
 
 class UrlParamsDecoderDelegate implements DecoderDelegate {
-  decode(str: string): ShareLinkState {
-    const qs: Partial<IParsedQuery> = parseQuery(str);
+  decode(str: string): ParsedIntermediateShareLinkState {
+    const qs = parseQuery(str);
+
     return {
       chap: qs.chap,
       exec: qs.exec,
       files: qs.files,
       isFolder: qs.isFolder,
       tabIdx: qs.tabIdx,
-      tabs: qs.tabs,
+      tabs: qs.tabs?.split(','),
       variant: qs.variant,
-      prgrm: qs.prgrm,
-      ext: qs.ext
+      prgrm: qs.prgrm
     };
   }
 }

src/features/playground/shareLinks/encoder/Encoder.ts

@@ -1,4 +1,7 @@
-import ShareLinkState from '../ShareLinkState';
+import { compressToEncodedURIComponent } from 'lz-string';
+import qs from 'query-string';
+
+import { ParsedIntermediateShareLinkState, ShareLinkState } from '../ShareLinkState';
 import EncoderDelegate from './delegates/EncoderDelegate';
 
 class ShareLinkStateEncoder {
@@ -9,7 +12,16 @@ class ShareLinkStateEncoder {
   }
 
   encodeWith(encoderDelegate: EncoderDelegate): string {
-    return encoderDelegate.encode(this.state);
+    const processedState: ParsedIntermediateShareLinkState = {
+      isFolder: this.state.isFolder.toString(),
+      tabIdx: this.state.tabIdx?.toString() ?? '',
+      chap: this.state.chap.toString(),
+      variant: this.state.variant,
+      exec: this.state.exec.toString(),
+      tabs: this.state.tabs.map(compressToEncodedURIComponent),
+      files: compressToEncodedURIComponent(qs.stringify(this.state.files))
+    };
+    return encoderDelegate.encode(processedState);
   }
 }
 

src/features/playground/shareLinks/encoder/EncoderHooks.ts

@@ -1,19 +1,16 @@
 import { FSModule } from 'browserfs/dist/node/core/FS';
-import { compressToEncodedURIComponent } from 'lz-string';
-import qs from 'query-string';
 import { useState } from 'react';
 import { retrieveFilesInWorkspaceAsRecord } from 'src/commons/fileSystem/utils';
 import { useTypedSelector } from 'src/commons/utils/Hooks';
 import { EditorTabState } from 'src/commons/workspace/WorkspaceTypes';
 
-import ShareLinkState from '../ShareLinkState';
+import { ShareLinkState } from '../ShareLinkState';
 import ShareLinkStateEncoder from './Encoder';
 
 export const usePlaygroundConfigurationEncoder = (): ShareLinkStateEncoder => {
   const isFolderModeEnabled = useTypedSelector(
     state => state.workspaces.playground.isFolderModeEnabled
   );
-
   const editorTabs = useTypedSelector(state => state.workspaces.playground.editorTabs);
   const editorTabFilePaths = editorTabs
     .map((editorTab: EditorTabState) => editorTab.filePath)
@@ -27,14 +24,13 @@ export const usePlaygroundConfigurationEncoder = (): ShareLinkStateEncoder => {
   const files = useGetFile();
 
   const result: ShareLinkState = {
-    isFolder: isFolderModeEnabled.toString(),
-    files: files.toString(),
-    tabs: editorTabFilePaths.map(compressToEncodedURIComponent)[0],
-    tabIdx: activeEditorTabIndex?.toString(),
-    chap: chapter.toString(),
+    isFolder: isFolderModeEnabled,
+    files: files,
+    tabs: editorTabFilePaths,
+    tabIdx: activeEditorTabIndex,
+    chap: chapter,
     variant,
-    ext: 'NONE',
-    exec: execTime.toString()
+    exec: execTime
   };
 
   return new ShareLinkStateEncoder(result);
@@ -46,5 +42,5 @@ const useGetFile = () => {
   retrieveFilesInWorkspaceAsRecord('playground', fileSystem as FSModule).then(result => {
     setFiles(result);
   });
-  return compressToEncodedURIComponent(qs.stringify(files));
+  return files;
 };

src/features/playground/shareLinks/encoder/delegates/EncoderDelegate.ts

@@ -1,7 +1,7 @@
-import ShareLinkState from '../../ShareLinkState';
+import { ParsedIntermediateShareLinkState } from '../../ShareLinkState';
 
 interface EncoderDelegate {
-  encode(state: ShareLinkState): string;
+  encode(state: ParsedIntermediateShareLinkState): string;
 }
 
 export default EncoderDelegate;