fix(storage-management): fix behavior outside of a sandbox context (#3081)

* fix(storage-management): only remove files that are selected

* fix(storage-management): check for editor.currentSandbox when deleting file

* fix(storage-management): disable add options outside of a sandbox context

* refactor: wrap if statements in withOwnedSandbox factory

Author: arthurdenner

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

@@ -77,28 +77,30 @@ export const withOwnedSandbox = <T>(
 ): AsyncAction<T> => async (context, payload) => {
   const { state, actions } = context;
 
-  if (!state.editor.currentSandbox.owned) {
-    if (state.editor.isForkingSandbox) {
-      return cancelAction(context, payload);
-    }
-
-    await actions.editor.internal.forkSandbox({
-      sandboxId: state.editor.currentId,
-    });
-  } else if (
-    state.editor.currentSandbox.isFrozen &&
-    state.editor.sessionFrozen
-  ) {
-    const modalResponse = await actions.modals.forkFrozenModal.open();
+  if (state.editor.currentSandbox) {
+    if (!state.editor.currentSandbox.owned) {
+      if (state.editor.isForkingSandbox) {
+        return cancelAction(context, payload);
+      }
 
-    if (modalResponse === 'fork') {
       await actions.editor.internal.forkSandbox({
         sandboxId: state.editor.currentId,
       });
-    } else if (modalResponse === 'unfreeze') {
-      state.editor.sessionFrozen = false;
-    } else if (modalResponse === 'cancel') {
-      return cancelAction(context, payload);
+    } else if (
+      state.editor.currentSandbox.isFrozen &&
+      state.editor.sessionFrozen
+    ) {
+      const modalResponse = await actions.modals.forkFrozenModal.open();
+
+      if (modalResponse === 'fork') {
+        await actions.editor.internal.forkSandbox({
+          sandboxId: state.editor.currentId,
+        });
+      } else if (modalResponse === 'unfreeze') {
+        state.editor.sessionFrozen = false;
+      } else if (modalResponse === 'cancel') {
+        return cancelAction(context, payload);
+      }
     }
   }
 

packages/app/src/app/pages/common/Modals/StorageManagementModal/AddFileToSandboxButton/elements.js

@@ -4,7 +4,7 @@ import AddIcon from 'react-icons/lib/md/add';
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
 
 export const AddFileToSandboxButton = styled(props => (
-  <Tooltip content="Add file to sandbox">
+  <Tooltip content="Add file to sandbox" isEnabled={!props.disabled}>
     <button type="button" {...props}>
       <AddIcon />
     </button>

packages/app/src/app/pages/common/Modals/StorageManagementModal/AddFileToSandboxButton/index.js

@@ -8,6 +8,11 @@ export default class AddFileToSandboxButtonContainer extends React.PureComponent
   };
 
   render() {
-    return <AddFileToSandboxButton onClick={this.addFileToSandbox} />;
+    return (
+      <AddFileToSandboxButton
+        disabled={this.props.disabled}
+        onClick={this.addFileToSandbox}
+      />
+    );
   }
 }

packages/app/src/app/pages/common/Modals/StorageManagementModal/FilesList/index.js

@@ -15,8 +15,8 @@ import {
   Table,
 } from './elements';
 
-const someSelected = obj =>
-  Object.keys(obj).filter(key => obj[key] === true).length;
+const getSelectedFiles = obj =>
+  Object.keys(obj).filter(key => obj[key] === true);
 
 class FilesList extends Component {
   state = {};
@@ -44,20 +44,23 @@ class FilesList extends Component {
       deleteFiles,
       addFilesToSandbox,
     } = this.props;
+    const canAddFile = Boolean(addFileToSandbox);
+    const filesToRemove = getSelectedFiles(this.state);
+
     return (
       <div css={{ margin: '0 2rem' }}>
         <Buttons>
           <Button
-            disabled={!someSelected(this.state)}
+            disabled={!filesToRemove.length || !canAddFile}
             small
             onClick={() => addFilesToSandbox(this.getSelection())}
           >
             Add all selected to project
           </Button>
           <Button
-            disabled={!someSelected(this.state)}
+            disabled={!filesToRemove.length}
             small
-            onClick={() => deleteFiles(Object.keys(this.state))}
+            onClick={() => deleteFiles(filesToRemove)}
           >
             Delete all selected
           </Button>
@@ -113,6 +116,7 @@ class FilesList extends Component {
                   `}
                 >
                   <AddFileToSandboxButton
+                    disabled={!canAddFile}
                     url={f.url}
                     name={f.name}
                     onAddFileToSandbox={addFileToSandbox}

packages/app/src/app/pages/common/Modals/StorageManagementModal/index.tsx

@@ -17,7 +17,12 @@ import FilesList from './FilesList';
 
 export const StorageManagementModal: FunctionComponent = () => {
   const {
-    state: { usedStorage, maxStorage, uploadedFiles },
+    state: {
+      editor: { currentSandbox },
+      usedStorage,
+      maxStorage,
+      uploadedFiles,
+    },
     actions: {
       files: { deletedUploadedFile, addedFileToSandbox },
     },
@@ -50,7 +55,7 @@ export const StorageManagementModal: FunctionComponent = () => {
           deleteFile={deletedUploadedFile}
           deleteFiles={files => files.map(id => deletedUploadedFile({ id }))}
           addFilesToSandbox={files => files.map(addedFileToSandbox)}
-          addFileToSandbox={addedFileToSandbox}
+          addFileToSandbox={currentSandbox ? addedFileToSandbox : undefined}
         />
       )}