add frozen atribute to sandboxes (codesandbox#1107)

* add frozen atribute to sandboxes

* add to contribs

* make swtich small

Author: SaraVieira

.all-contributorsrc

@@ -605,6 +605,15 @@
         "doc"
       ]
     },
+    {
+      "login": "SaraVieira",
+      "name": "Sara Vieira",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/1051509?v=4",
+      "profile": "http://iamsaravieira.com",
+      "contributions": [
+        "code",
+        "ideas"
+    },
     {
       "login": "melanieseltzer",
       "name": "Melanie Seltzer",

README.md

@@ -24,12 +24,12 @@ sandboxes.
 CodeSandbox consists of several separate servers, some of which are open
 sourced.
 
-* Client: the web application
-* Server: the [Phoenix](https://github.com/phoenixframework/phoenix) API server
-* Nginx: Nginx config files
-* [Git Extractor](https://github.com/CompuIves/codesandbox-git-extractor):
+- Client: the web application
+- Server: the [Phoenix](https://github.com/phoenixframework/phoenix) API server
+- Nginx: Nginx config files
+- [Git Extractor](https://github.com/CompuIves/codesandbox-git-extractor):
   responsible for extracting the source from a GitHub repository
-* [CLI](https://github.com/CompuIves/codesandbox-cli): the CLI to upload a
+- [CLI](https://github.com/CompuIves/codesandbox-cli): the CLI to upload a
   CodeSandbox project from your command line
 
 ## Contributors
@@ -50,4 +50,5 @@ Thanks goes to these wonderful people
 | [<img src="https://avatars0.githubusercontent.com/u/1195863?v=4" width="100px;"/><br /><sub><b>Joe Ng'ethe</b></sub>](http://joey.co.ke)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=joeynimu "Code") | [<img src="https://avatars0.githubusercontent.com/u/576935?v=4" width="100px;"/><br /><sub><b>Carles Codony</b></sub>](https://github.com/bitblitter)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=bitblitter "Code") | [<img src="https://avatars2.githubusercontent.com/u/468006?v=4" width="100px;"/><br /><sub><b>Vytenis</b></sub>](https://github.com/FDiskas)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=FDiskas "Code") | [<img src="https://avatars1.githubusercontent.com/u/894149?v=4" width="100px;"/><br /><sub><b>Manuel Dugué</b></sub>](http://manueldugue.de)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Amdugue "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=mdugue "Code") | [<img src="https://avatars2.githubusercontent.com/u/5346497?v=4" width="100px;"/><br /><sub><b>Demian Dekoninck</b></sub>](https://dem.be)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=DemianD "Code") | [<img src="https://avatars2.githubusercontent.com/u/3144549?v=4" width="100px;"/><br /><sub><b>Drake Costa</b></sub>](http://www.saeris.io)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=Saeris "Code") | [<img src="https://avatars2.githubusercontent.com/u/433394?v=4" width="100px;"/><br /><sub><b>Marko Stijak</b></sub>](https://cxjs.io/)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=mstijak "Code") |
 | [<img src="https://avatars2.githubusercontent.com/u/10588170?v=4" width="100px;"/><br /><sub><b>Ilya</b></sub>](https://twitter.com/ilya_komar0ff)<br />[💬](#question-Komar0ff "Answering Questions") [🤔](#ideas-Komar0ff "Ideas, Planning, & Feedback") | [<img src="https://avatars2.githubusercontent.com/u/10627086?v=4" width="100px;"/><br /><sub><b>Emerson Laurentino</b></sub>](https://twitter.com/elaurent_)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=emersonlaurentino "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Aemersonlaurentino "Bug reports") | [<img src="https://avatars3.githubusercontent.com/u/180963?v=4" width="100px;"/><br /><sub><b>Aaron Reisman</b></sub>](https://github.com/lifeiscontent)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Alifeiscontent "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=lifeiscontent "Code") [📦](#platform-lifeiscontent "Packaging/porting to new platform") | [<img src="https://avatars2.githubusercontent.com/u/19484365?v=4" width="100px;"/><br /><sub><b>Colton Colcleasure</b></sub>](https://github.com/colshacol)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=colshacol "Code") [🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3Acolshacol "Bug reports") | [<img src="https://avatars0.githubusercontent.com/u/497242?v=4" width="100px;"/><br /><sub><b>PJ Walker</b></sub>](https://github.com/PJWalker)<br />[🐛](https://github.com/CompuIves/codesandbox-client/issues?q=author%3APJWalker "Bug reports") [💻](https://github.com/CompuIves/codesandbox-client/commits?author=PJWalker "Code") | [<img src="https://avatars2.githubusercontent.com/u/29819102?v=4" width="100px;"/><br /><sub><b>Satya Rohith</b></sub>](https://satya.tech)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=satyarohith "Code") [📖](https://github.com/CompuIves/codesandbox-client/commits?author=satyarohith "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/17421347?v=4" width="100px;"/><br /><sub><b>Melanie Seltzer</b></sub>](https://www.melanieseltzer.io/)<br />[💻](https://github.com/CompuIves/codesandbox-client/commits?author=melanieseltzer "Code") |
 | [<img src="https://avatars1.githubusercontent.com/u/23313266?v=4" width="100px;"/><br /><sub><b>ZYSzys</b></sub>](http://zyszys.top)<br />[📖](https://github.com/CompuIves/codesandbox-client/commits?author=ZYSzys "Documentation") |
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/elements.js

@@ -1,4 +1,5 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
+import Question from 'react-icons/lib/go/question';
 import EditPenIcon from 'react-icons/lib/md/create';
 
 import { Link } from 'react-router-dom';
@@ -34,6 +35,11 @@ export const PrivacyContainer = styled.span`
   margin-bottom: 1rem;
 `;
 
+export const FreezeConatainer = styled.span`
+  display: flex;
+  justify-content: flex-end;
+`;
+
 export const Title = styled.div`
   font-size: 1rem;
   font-weight: 400;
@@ -81,3 +87,10 @@ export const EditPen = styled(EditPenIcon)`
     color: ${props => (props.theme.light ? '#636363' : 'white')};
   }
 `;
+
+const iconStyles = css`
+  opacity: 0.5;
+  margin-left: 0.5em;
+`;
+
+export const Icon = styled(Question)(iconStyles);

packages/app/src/app/pages/Sandbox/Editor/Workspace/Project/index.js

@@ -15,6 +15,7 @@ import PrivacyStatus from 'app/components/PrivacyStatus';
 import GithubBadge from 'app/components/GithubBadge';
 import createEditableTags from 'app/components/EditableTags';
 import Tags from 'app/components/Tags';
+import Switch from 'common/components/Switch';
 import Tooltip from 'common/components/Tooltip';
 
 import getTemplateDefinition from 'common/templates';
@@ -30,6 +31,8 @@ import {
   EditPen,
   PropertyValue,
   PropertyName,
+  Icon,
+  FreezeConatainer,
 } from './elements';
 
 class Project extends React.Component {
@@ -67,6 +70,13 @@ class Project extends React.Component {
     }
   };
 
+  updateFrozenState = () => {
+    const frozen = !this.props.store.editor.currentSandbox.isFrozen;
+    this.props.signals.editor.frozenUpdated({
+      frozen,
+    });
+  };
+
   updateSandboxInfo = () => {
     this.props.signals.workspace.sandboxInfoUpdated();
     this.setState({
@@ -93,7 +103,6 @@ class Project extends React.Component {
     const template = getTemplateDefinition(sandbox.template);
 
     const EditableTags = createEditableTags(template.color);
-
     return (
       <div style={{ marginBottom: '1rem' }}>
         <Item style={{ marginTop: '.5rem' }}>
@@ -257,6 +266,25 @@ class Project extends React.Component {
             </a>
           </PropertyValue>
         </Item>
+        {sandbox.owned ? (
+          <Item flex>
+            <PropertyName>
+              Frozen
+              <Tooltip title="When true this sandbox will fork on edit">
+                <Icon />
+              </Tooltip>
+            </PropertyName>
+            <PropertyValue>
+              <FreezeConatainer>
+                <Switch
+                  small
+                  right={sandbox.isFrozen}
+                  onClick={this.updateFrozenState}
+                />
+              </FreezeConatainer>
+            </PropertyValue>
+          </Item>
+        ) : null}
       </div>
     );
   }

packages/app/src/app/store/modules/editor/actions.js

@@ -118,6 +118,30 @@ export function setCurrentModuleByTab({ state, props }) {
   }
 }
 
+export function updatePrivacy({ api, props, state }) {
+  const id = state.get('editor.currentId');
+
+  return api
+    .patch(`/sandboxes/${id}/privacy`, {
+      sandbox: {
+        privacy: props.privacy,
+      },
+    })
+    .then(() => undefined);
+}
+
+export function updateFrozen({ api, props, state }) {
+  const id = state.get('editor.currentId');
+
+  return api
+    .put(`/sandboxes/${id}`, {
+      sandbox: {
+        is_frozen: props.frozen,
+      },
+    })
+    .then(() => state.set('editor.currentSandbox.isFrozen', props.frozen));
+}
+
 export function forceRender({ state }) {
   state.set('editor.forceRender', state.get('editor.forceRender') + 1);
 }

packages/app/src/app/store/modules/editor/index.js

@@ -84,6 +84,8 @@ export default Module({
     errorsCleared: sequences.clearErrors,
     projectViewToggled: sequences.toggleProjectView,
     previewActionReceived: sequences.handlePreviewAction,
+    privacyUpdated: sequences.updatePrivacy,
+    frozenUpdated: sequences.updateFrozen,
     quickActionsOpened: sequences.openQuickActions,
     quickActionsClosed: sequences.closeQuickActions,
     setPreviewBounds: sequences.setPreviewBounds,

packages/app/src/app/store/modules/editor/model.js

@@ -84,6 +84,7 @@ const Sandbox = types.model({
   originalGit: types.maybeNull(Git),
   originalGitCommitSha: types.maybeNull(types.string),
   owned: types.boolean,
+  isFrozen: types.boolean,
   privacy: types.number,
   sourceId: types.string,
   tags: types.array(types.string),

packages/app/src/app/store/modules/editor/sequences.js

@@ -13,7 +13,7 @@ import {
   unSetReceivingStatus,
 } from '../live/actions';
 import {
-  ensureOwnedSandbox,
+  ensureOwnedEditable,
   forkSandbox,
   fetchGitChanges,
   closeModal,
@@ -78,6 +78,20 @@ export const changeCurrentTab = [set(state`editor.currentTabId`, props`tabId`)];
 
 export const unsetDirtyTab = actions.unsetDirtyTab;
 
+export const updatePrivacy = [
+  actions.ensureValidPrivacy,
+  {
+    valid: [
+      set(state`editor.isUpdatingPrivacy`, true),
+      actions.updatePrivacy,
+      set(state`editor.isUpdatingPrivacy`, false),
+    ],
+    invalid: [],
+  },
+];
+
+export const updateFrozen = actions.updateFrozen;
+
 export const toggleLikeSandbox = [
   when(state`editor.sandboxes.${props`id`}.userLiked`),
   {
@@ -132,7 +146,7 @@ export const changeCode = [
 
 export const saveChangedModules = [
   track('Save Modified Modules', {}),
-  ensureOwnedSandbox,
+  ensureOwnedEditable,
   actions.outputChangedModules,
   actions.saveChangedModules,
   actions.removeChangedModules,
@@ -164,7 +178,7 @@ export const prettifyCode = [
 
 export const saveCode = [
   track('Save Code', {}),
-  ensureOwnedSandbox,
+  ensureOwnedEditable,
   when(state`preferences.settings.prettifyOnSaveEnabled`),
   {
     true: [prettifyCode],
@@ -201,7 +215,7 @@ export const discardModuleChanges = [
 export const addNpmDependency = [
   track('Add NPM Dependency', {}),
   closeModal,
-  ensureOwnedSandbox,
+  ensureOwnedEditable,
   when(props`version`),
   {
     true: [],
@@ -214,7 +228,7 @@ export const addNpmDependency = [
 
 export const removeNpmDependency = [
   track('Remove NPM Dependency', {}),
-  ensureOwnedSandbox,
+  ensureOwnedEditable,
   actions.removeNpmDependencyFromPackage,
   changeCode,
   saveCode,

packages/app/src/app/store/modules/files/sequences.js

@@ -1,6 +1,6 @@
 import { push, set, concat } from 'cerebral/operators';
 import { state, props } from 'cerebral/tags';
-import { ensureOwnedSandbox, closeModal } from '../../sequences';
+import { ensureOwnedEditable, closeModal } from '../../sequences';
 import { setCurrentModule, addNotification } from '../../factories';
 import { closeTabByIndex, setModal } from '../../actions';
 import {
@@ -31,7 +31,7 @@ export const getUploadedFiles = [
 ];
 
 export const removeModule = [
-  ensureOwnedSandbox,
+  ensureOwnedEditable,
   actions.whenModuleIsSelected,
   {
     true: setCurrentModule(state`editor.mainModule.id`),
@@ -46,7 +46,7 @@ export const removeModule = [
 ];
 
 export const massCreateModules = [
-  ensureOwnedSandbox,
+  ensureOwnedEditable,
   actions.massCreateModules,
   {
     success: [
@@ -67,7 +67,7 @@ export const deleteUploadedFile = [
 ];
 
 export const createModule = [
-  ensureOwnedSandbox,
+  ensureOwnedEditable,
   actions.createOptimisticModule,
   push(
     state`editor.sandboxes.${state`editor.currentId`}.modules`,
@@ -112,7 +112,7 @@ export const uploadFiles = [
 ];
 
 export const renameModule = [
-  ensureOwnedSandbox,
+  ensureOwnedEditable,
   actions.renameModule,
   actions.saveNewModuleName,
   {
@@ -125,7 +125,7 @@ export const renameModule = [
 ];
 
 export const renameDirectory = [
-  ensureOwnedSandbox,
+  ensureOwnedEditable,
   actions.renameDirectory,
   actions.saveNewDirectoryName,
   {
@@ -138,7 +138,7 @@ export const renameDirectory = [
 ];
 
 export const createDirectory = [
-  ensureOwnedSandbox,
+  ensureOwnedEditable,
   actions.createOptimisticDirectory,
   push(
     state`editor.sandboxes.${state`editor.currentId`}.directories`,
@@ -164,7 +164,7 @@ export const removeDirectory = [
 ];
 
 export const deleteDirectory = [
-  ensureOwnedSandbox,
+  ensureOwnedEditable,
   removeDirectory,
   actions.deleteDirectory,
   {
@@ -180,7 +180,7 @@ export const deleteDirectory = [
 ];
 
 export const moveDirectoryToDirectory = [
-  ensureOwnedSandbox,
+  ensureOwnedEditable,
   actions.moveDirectoryToDirectory,
   actions.saveNewDirectoryDirectoryShortid,
   {
@@ -196,7 +196,7 @@ export const moveDirectoryToDirectory = [
 ];
 
 export const moveModuleToDirectory = [
-  ensureOwnedSandbox,
+  ensureOwnedEditable,
   actions.moveModuleToDirectory,
   actions.saveNewModuleDirectoryShortid,
   {

packages/app/src/app/store/modules/workspace/sequences.js

@@ -3,7 +3,7 @@ import { state, props } from 'cerebral/tags';
 import getTemplate from 'common/templates';
 import * as actions from './actions';
 import {
-  ensureOwnedSandbox,
+  ensureOwnedEditable,
   loadSandbox,
   closeModal,
   openModal,
@@ -54,7 +54,7 @@ export const changeValue = [
 ];
 
 export const updateSandboxInfo = [
-  ensureOwnedSandbox,
+  ensureOwnedEditable,
   set(
     state`editor.sandboxes.${state`editor.currentId`}.title`,
     state`workspace.project.title`
@@ -68,7 +68,7 @@ export const updateSandboxInfo = [
 ];
 
 export const addExternalResource = [
-  ensureOwnedSandbox,
+  ensureOwnedEditable,
   push(
     state`editor.sandboxes.${state`editor.currentId`}.externalResources`,
     props`resource`
@@ -84,7 +84,7 @@ export const addExternalResource = [
 ];
 
 export const removeExternalResource = [
-  ensureOwnedSandbox,
+  ensureOwnedEditable,
   actions.removeOptimisticExternalResource,
   actions.removeExternalResource,
   {
@@ -102,7 +102,7 @@ export const removeExternalResource = [
 export const updateTag = [set(state`workspace.tags.tagName`, props`tagName`)];
 
 export const addTag = [
-  ensureOwnedSandbox,
+  ensureOwnedEditable,
   push(
     state`editor.sandboxes.${state`editor.currentId`}.tags`,
     state`workspace.tags.tagName`
@@ -119,7 +119,7 @@ export const addTag = [
 ];
 
 export const removeTag = [
-  ensureOwnedSandbox,
+  ensureOwnedEditable,
   actions.removeTagFromState,
   actions.removeTag,
   set(state`editor.sandboxes.${state`editor.currentId`}.tags`, props`tags`),