Alert frozen (codesandbox#1716)

* Added alert when saving frozen sandbox (codesandbox#1232)

* Fix minor spelling error

* Added alert when attempting to save frozen sandbox

* add to contribs

* add johnn as a contrib

* add alert on frozen sandbox

* fix readme

* flip statemnet

Author: SaraVieira

.all-contributorsrc

@@ -654,6 +654,18 @@
         "design"
       ]
     },
+        {
+          "login": "JonShort",
+      "name": "Jon Short",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/21317379?v=4",
+      "profile": "https://jonshort.me/",
+      "contributions": [
+        "code"
+        ]
+    },
+    
+    
+
     {
       "login": "dv297",
       "name": "Daniel Vu",

README.md

@@ -35,7 +35,7 @@ export const PrivacyContainer = styled.span`
   margin-bottom: 1rem;
 `;
 
-export const FreezeConatainer = styled.span`
+export const FreezeContainer = styled.span`
   display: flex;
   justify-content: flex-end;
 `;

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

@@ -32,7 +32,7 @@ import {
   PropertyValue,
   PropertyName,
   Icon,
-  FreezeConatainer,
+  FreezeContainer,
 } from './elements';
 
 class Project extends React.Component {
@@ -278,15 +278,15 @@ class Project extends React.Component {
               </Tooltip>
             </PropertyName>
             <PropertyValue>
-              <FreezeConatainer>
+              <FreezeContainer>
                 <Switch
                   small
                   right={sandbox.isFrozen}
                   onClick={this.updateFrozenState}
                   offMode
                   secondary
                 />
-              </FreezeConatainer>
+              </FreezeContainer>
             </PropertyValue>
           </Item>
         ) : null}

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

@@ -6,3 +6,10 @@ export class AuthenticationError extends CerebralError {
     this.name = 'AuthenticationError';
   }
 }
+
+export class CancelError extends CerebralError {
+  constructor(message) {
+    super(message);
+    this.name = 'CancelError';
+  }
+}

packages/app/src/app/store/errors.js

@@ -104,7 +104,10 @@ export default Module({
     refetchSandboxInfo: sequences.refetchSandboxInfo,
     track: sequences.track,
   },
-  catch: [[errors.AuthenticationError, sequences.showAuthenticationError]],
+  catch: [
+    [errors.CancelError, []],
+    [errors.AuthenticationError, sequences.showAuthenticationError],
+  ],
   modules: {
     dashboard,
     patron,

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

@@ -349,6 +349,14 @@ export function confirmForkingOwnSandbox({ browser, path }) {
     : path.cancelled();
 }
 
+export function alertForkingFrozenSandbox({ browser, path }) {
+  return browser.confirm(
+    'This sandbox is frozen, and will be forked. Do you want to continue?'
+  )
+    ? path.confirmed()
+    : path.cancelled();
+}
+
 export function unlikeSandbox({ api, props }) {
   return api.request({
     method: 'DELETE',

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

@@ -25,6 +25,9 @@ export default Provider({
   setTitle(title) {
     document.title = title;
   },
+  alert(message) {
+    return alert(message); // eslint-disable-line no-alert
+  },
   confirm(message) {
     return confirm(message); // eslint-disable-line no-alert
   },

packages/app/src/app/store/providers/Browser.js

@@ -7,6 +7,7 @@ import getTemplateDefinition from '@codesandbox/common/lib/templates';
 import * as actions from './actions';
 import * as factories from './factories';
 import { connectToChannel as setupNotifications } from './modules/user-notifications/actions';
+import { CancelError } from './errors';
 
 import {
   saveNewModule,
@@ -18,6 +19,7 @@ import {
 } from './modules/files/actions';
 
 import { disconnect, clearUserSelections } from './modules/live/actions';
+import { alertForkingFrozenSandbox } from './modules/editor/actions';
 import { initializeLive } from './modules/live/common-sequences';
 
 export const unloadApp = actions.stopListeningToConnectionChange;
@@ -32,6 +34,10 @@ const whenPackageJSONExists = when(props`sandbox.modules`, modules =>
   modules.find(m => m.directoryShortid == null && m.title === 'package.json')
 );
 
+function stopFrozenSandboxFromEdit() {
+  throw new CancelError("You can't save a frozen sandbox", {});
+}
+
 export const ensurePackageJSON = [
   when(props`sandbox.owned`),
   {
@@ -172,18 +178,38 @@ export const forkSandbox = sequence('forkSandbox', [
   },
 ]);
 
-export const ensureOwnedEditable = sequence('ensureOwnedEditable', [
-  when(
-    state`editor.currentSandbox.owned`,
-    state`editor.currentSandbox.isFrozen`,
-    (owned, frozen) => !owned || frozen
-  ),
+export const forkFrozenSandbox = sequence('forkFrozenSandbox', [
+  when(state`editor.currentSandbox.isFrozen`),
   {
-    true: forkSandbox,
+    true: [
+      alertForkingFrozenSandbox,
+      {
+        confirmed: forkSandbox,
+        cancelled: [
+          set(props`message`, "Can't save a frozen sandbox"),
+          actions.callVSCodeCallbackError,
+          stopFrozenSandboxFromEdit,
+        ],
+      },
+    ],
     false: [],
   },
 ]);
 
+export const ensureOwnedEditable = sequence('ensureOwnedEditable', [
+  when(state`editor.currentSandbox.owned`, owned => owned),
+  {
+    true: [
+      when(state`editor.currentSandbox.isFrozen`, isFrozen => isFrozen),
+      {
+        true: forkFrozenSandbox,
+        false: [],
+      },
+    ],
+    false: forkSandbox,
+  },
+]);
+
 export const fetchGitChanges = [
   set(state`git.isFetching`, true),
   actions.getGitChanges,