Add ownership to GitHub sandboxes (codesandbox#3490)

* Add ownership to GitHub sandboxes

This allows users to change properties of a sandbox if they're the owner.
They can change the title, description, things like env variables. Everything
except the code, in which we'll autofork.

The goal of this is to answer to the multiple feature requests related to using
a git sandbox. While the best solution would be to invent a permission model,
we're not there yet and I'm not sure when we'll get it. So this seems like a good
intermediate solution instead.

* Incorporate permission system inside client

* Fix strictnullcheck errors

* Fix types

* Backwards compatability

* Add live version when joining sandbox

* Remove sandbox owned check

* Only recover files if you have permission

Author: CompuIves

packages/app/src/app/overmind/effects/live/index.ts

@@ -110,7 +110,7 @@ export default new (class Live {
 
   joinChannel(roomId: string): Promise<JoinChannelResponse> {
     return new Promise((resolve, reject) => {
-      channel = this.getSocket().channel(`live:${roomId}`, {});
+      channel = this.getSocket().channel(`live:${roomId}`, { version: 2 });
 
       channel
         .join()

packages/app/src/app/overmind/factories.ts

@@ -1,4 +1,5 @@
-import { Contributor } from '@codesandbox/common/lib/types';
+import { Contributor, PermissionType } from '@codesandbox/common/lib/types';
+import { hasPermission } from '@codesandbox/common/lib/utils/permission';
 import { IDerive, IState, json } from 'overmind';
 
 import { AsyncAction } from '.';
@@ -77,27 +78,29 @@ export const withLoadApp = <T>(
 
 export const withOwnedSandbox = <T>(
   continueAction: AsyncAction<T>,
-  cancelAction: AsyncAction<T> = () => Promise.resolve()
+  cancelAction: AsyncAction<T> = () => Promise.resolve(),
+  requiredPermission?: PermissionType
 ): AsyncAction<T> => async (context, payload) => {
   const { state, actions } = context;
 
-  if (state.editor.currentSandbox) {
-    if (!state.editor.currentSandbox.owned) {
+  const sandbox = state.editor.currentSandbox;
+  if (sandbox) {
+    if (
+      typeof requiredPermission !== 'undefined' &&
+      !hasPermission(sandbox.authorization, requiredPermission)
+    ) {
       if (state.editor.isForkingSandbox) {
         return cancelAction(context, payload);
       }
 
       try {
         await actions.editor.internal.forkSandbox({
-          sandboxId: state.editor.currentSandbox.id,
+          sandboxId: sandbox.id,
         });
       } catch (e) {
         return cancelAction(context, payload);
       }
-    } else if (
-      state.editor.currentSandbox.isFrozen &&
-      state.editor.sessionFrozen
-    ) {
+    } else if (sandbox.isFrozen && state.editor.sessionFrozen) {
       const modalResponse = await actions.modals.forkFrozenModal.open();
 
       if (modalResponse === 'fork') {

packages/app/src/app/overmind/namespaces/editor/actions.ts

@@ -18,6 +18,7 @@ import {
 import { clearCorrectionsFromAction } from 'app/utils/corrections';
 import { json } from 'overmind';
 
+import { hasPermission } from '@codesandbox/common/lib/utils/permission';
 import eventToTransform from '../../utils/event-to-transform';
 import * as internalActions from './internalActions';
 
@@ -118,7 +119,10 @@ export const sandboxChanged: AsyncAction<{ id: string }> = withLoadApp<{
 
   await actions.editor.internal.initializeLiveSandbox(sandbox);
 
-  if (sandbox.owned && !state.live.isLive) {
+  if (
+    hasPermission(sandbox.authorization, 'write_code') &&
+    !state.live.isLive
+  ) {
     actions.files.internal.recoverFiles();
   } else if (state.live.isLive) {
     await effects.live.sendModuleStateSyncRequest();
@@ -156,7 +160,7 @@ export const resizingStopped: Action = ({ state }) => {
 export const codeSaved: AsyncAction<{
   code: string;
   moduleShortid: string;
-  cbID: string;
+  cbID: string | null;
 }> = withOwnedSandbox(
   async ({ actions }, { code, moduleShortid, cbID }) => {
     actions.editor.internal.saveCode({
@@ -166,8 +170,11 @@ export const codeSaved: AsyncAction<{
     });
   },
   async ({ effects }, { cbID }) => {
-    effects.vscode.callCallbackError(cbID);
-  }
+    if (cbID) {
+      effects.vscode.callCallbackError(cbID);
+    }
+  },
+  'write_project'
 );
 
 export const onOperationApplied: Action<{

packages/app/src/app/overmind/namespaces/editor/internalActions.ts

@@ -21,6 +21,7 @@ import { Action, AsyncAction } from 'app/overmind';
 import { sortObjectByKeys } from 'app/overmind/utils/common';
 import { getTemplate as computeTemplate } from 'codesandbox-import-utils/lib/create-sandbox/templates';
 import { mapValues } from 'lodash-es';
+import { hasPermission } from '@codesandbox/common/lib/utils/permission';
 
 export const ensureSandboxId: Action<string, string> = ({ state }, id) => {
   if (state.editor.sandboxes[id]) {
@@ -254,7 +255,7 @@ export const removeNpmDependencyFromPackageJson: AsyncAction<string> = async (
 
   delete packageJson.dependencies[name];
 
-  await actions.editor.internal.saveCode({
+  await actions.editor.codeSaved({
     code: JSON.stringify(packageJson, null, 2),
     moduleShortid: state.editor.currentPackageJSON.shortid,
     cbID: null,
@@ -281,7 +282,7 @@ export const addNpmDependencyToPackageJson: AsyncAction<{
   packageJson[type][name] = version || 'latest';
   packageJson[type] = sortObjectByKeys(packageJson[type]);
 
-  await actions.editor.internal.saveCode({
+  await actions.editor.codeSaved({
     code: JSON.stringify(packageJson, null, 2),
     moduleShortid: state.editor.currentPackageJSON.shortid,
     cbID: null,
@@ -446,14 +447,16 @@ export const updateSandboxPackageJson: AsyncAction = async ({
 
   if (
     !sandbox ||
-    !state.editor.parsedConfigurations ||
-    !state.editor.parsedConfigurations.package ||
-    !state.editor.parsedConfigurations.package.parsed ||
+    !state.editor.parsedConfigurations?.package?.parsed ||
     !state.editor.currentPackageJSON
   ) {
     return;
   }
 
+  if (!hasPermission(sandbox.authorization, 'write_code')) {
+    return;
+  }
+
   const { parsed } = state.editor.parsedConfigurations.package;
 
   parsed.keywords = sandbox.tags;
@@ -463,7 +466,7 @@ export const updateSandboxPackageJson: AsyncAction = async ({
   const code = JSON.stringify(parsed, null, 2);
   const moduleShortid = state.editor.currentPackageJSON.shortid;
 
-  await actions.editor.internal.saveCode({
+  await actions.editor.codeSaved({
     code,
     moduleShortid,
     cbID: null,
@@ -482,7 +485,7 @@ export const updateDevtools: AsyncAction<{
       state.editor.modulesByPath['/.codesandbox/workspace.json'];
 
     if (devtoolsModule) {
-      await actions.editor.internal.saveCode({
+      await actions.editor.codeSaved({
         code,
         moduleShortid: devtoolsModule.shortid,
         cbID: null,

packages/app/src/app/overmind/namespaces/editor/state.ts

@@ -53,6 +53,7 @@ type State = {
   workspaceConfigCode: string;
   statusBar: boolean;
   previewWindowOrientation: WindowOrientation;
+  canWriteCode: Derive<State, boolean>;
   isAllModulesSynced: Derive<State, boolean>;
   currentSandbox: Derive<State, Sandbox | null>;
   currentModule: Derive<State, Module>;
@@ -120,6 +121,8 @@ export const state: State = {
     devToolIndex: 0,
     tabPosition: 0,
   },
+  canWriteCode: ({ currentSandbox }) =>
+    currentSandbox?.authorization === 'write_code',
   currentSandbox: ({ sandboxes, currentId }) => {
     if (currentId && sandboxes[currentId]) {
       return sandboxes[currentId];

packages/app/src/app/overmind/namespaces/files/actions.ts

@@ -79,7 +79,9 @@ export const moduleRenamed: AsyncAction<{
 
       actions.internal.handleError({ message: 'Could not rename file', error });
     }
-  }
+  },
+  async () => {},
+  'write_code'
 );
 
 export const directoryCreated: AsyncAction<{
@@ -151,7 +153,9 @@ export const directoryCreated: AsyncAction<{
         error,
       });
     }
-  }
+  },
+  async () => {},
+  'write_code'
 );
 
 export const moduleMovedToDirectory: AsyncAction<{
@@ -205,7 +209,9 @@ export const moduleMovedToDirectory: AsyncAction<{
         error,
       });
     }
-  }
+  },
+  async () => {},
+  'write_code'
 );
 
 export const directoryMovedToDirectory: AsyncAction<{
@@ -255,7 +261,9 @@ export const directoryMovedToDirectory: AsyncAction<{
         error,
       });
     }
-  }
+  },
+  async () => {},
+  'write_code'
 );
 
 export const directoryDeleted: AsyncAction<{
@@ -327,7 +335,9 @@ export const directoryDeleted: AsyncAction<{
         error,
       });
     }
-  }
+  },
+  async () => {},
+  'write_code'
 );
 
 export const directoryRenamed: AsyncAction<{
@@ -379,7 +389,9 @@ export const directoryRenamed: AsyncAction<{
         error,
       });
     }
-  }
+  },
+  async () => {},
+  'write_code'
 );
 
 export const gotUploadedFiles: AsyncAction<string> = async (
@@ -408,24 +420,28 @@ export const gotUploadedFiles: AsyncAction<string> = async (
 export const addedFileToSandbox: AsyncAction<{
   url: string;
   name: string;
-}> = withOwnedSandbox(async ({ actions, effects, state }, { name, url }) => {
-  if (!state.editor.currentSandbox) {
-    return;
-  }
-  actions.internal.closeModals(false);
-  await actions.files.moduleCreated({
-    title: name,
-    directoryShortid: null,
-    code: url,
-    isBinary: true,
-  });
+}> = withOwnedSandbox(
+  async ({ actions, effects, state }, { name, url }) => {
+    if (!state.editor.currentSandbox) {
+      return;
+    }
+    actions.internal.closeModals(false);
+    await actions.files.moduleCreated({
+      title: name,
+      directoryShortid: null,
+      code: url,
+      isBinary: true,
+    });
 
-  effects.executor.updateFiles(state.editor.currentSandbox);
-});
+    effects.executor.updateFiles(state.editor.currentSandbox);
+  },
+  async () => {},
+  'write_code'
+);
 
 export const deletedUploadedFile: AsyncAction<{
   id: string;
-}> = withOwnedSandbox(async ({ state, actions, effects }, { id }) => {
+}> = async ({ state, actions, effects }, { id }) => {
   if (!state.uploadedFiles) {
     return;
   }
@@ -441,7 +457,7 @@ export const deletedUploadedFile: AsyncAction<{
       error,
     });
   }
-});
+};
 
 export const filesUploaded: AsyncAction<{
   files: { [k: string]: { dataURI: string; type: string } };
@@ -489,7 +505,9 @@ export const filesUploaded: AsyncAction<{
     }
 
     actions.internal.closeModals(false);
-  }
+  },
+  async () => {},
+  'write_code'
 );
 
 export const massCreateModules: AsyncAction<{
@@ -550,7 +568,9 @@ export const massCreateModules: AsyncAction<{
         error,
       });
     }
-  }
+  },
+  async () => {},
+  'write_code'
 );
 
 export const moduleCreated: AsyncAction<{
@@ -650,7 +670,9 @@ export const moduleCreated: AsyncAction<{
         error,
       });
     }
-  }
+  },
+  async () => {},
+  'write_code'
 );
 
 export const moduleDeleted: AsyncAction<{
@@ -691,7 +713,9 @@ export const moduleDeleted: AsyncAction<{
       state.editor.modulesByPath = effects.vscode.sandboxFsSync.create(sandbox);
       actions.internal.handleError({ message: 'Could not delete file', error });
     }
-  }
+  },
+  async () => {},
+  'write_code'
 );
 
 export const createModulesByPath: AsyncAction<{

packages/app/src/app/overmind/namespaces/workspace/actions.ts

@@ -80,7 +80,7 @@ export const tagRemoved: AsyncAction<string> = withOwnedSandbox(
       const code = JSON.stringify(parsed, null, 2);
       const moduleShortid = state.editor.currentPackageJSON.shortid;
 
-      await actions.editor.internal.saveCode({
+      await actions.editor.codeSaved({
         code,
         moduleShortid,
         cbID: null,

packages/app/src/app/overmind/utils/items.ts

@@ -76,6 +76,7 @@ export function getDisabledItems(store: any): INavigationItem[] {
 export default function getItems(store: any): INavigationItem[] {
   if (
     store.live.isLive &&
+    !store.editor.currentSandbox.git &&
     !(
       store.live.isOwner ||
       (store.user &&

packages/common/src/types/index.ts

@@ -13,6 +13,13 @@ export type SSEContainerStatus =
 
 export type SSEManagerStatus = 'connected' | 'disconnected' | 'initializing';
 
+export type PermissionType =
+  | 'write_code'
+  | 'write_project'
+  | 'comment'
+  | 'read'
+  | 'none';
+
 export type ModuleError = {
   message: string;
   line: number;
@@ -313,6 +320,7 @@ export type Sandbox = {
     path: string;
   };
   owned: boolean;
+  authorization: PermissionType;
   npmDependencies: {
     [dep: string]: string;
   };

packages/common/src/utils/permission.test.ts

@@ -0,0 +1,14 @@
+import { hasPermission } from './permission';
+
+describe('permission', () => {
+  it('correctly accepts a lower permission', () => {
+    expect(hasPermission('write_code', 'read')).toBe(true);
+    expect(hasPermission('write_code', 'write_code')).toBe(true);
+    expect(hasPermission('write_project', 'comment')).toBe(true);
+  });
+
+  it('correctly rejects a a permission', () => {
+    expect(hasPermission('read', 'write_code')).toBe(false);
+    expect(hasPermission('read', 'comment')).toBe(false);
+  });
+});