feat(explorer): improve discard changes functionality (codesandbox#3040)

arthurdenner · CompuIves · commit 23951d3928b9 · 2019-11-30T15:50:35.000+01:00
* style(button): add overflow behavior to shared Button component

* feat(explorer): add option to discard changes on unsynced files

* refactor(explorer): confirm before discarding changes and simplify modal management

* fix(recover): adapt message to number of recovered files
diff --git a/packages/app/src/app/overmind/namespaces/files/internalActions.ts b/packages/app/src/app/overmind/namespaces/files/internalActions.ts
@@ -42,16 +42,17 @@ export const recoverFiles: Action = ({ effects, actions, state }) => {
       return false;
     })
     .filter(Boolean);
+  const numRecoveredFiles = recoveredList.length;
 
-  if (recoveredList.length > 0) {
+  if (numRecoveredFiles > 0) {
     effects.analytics.track('Files Recovered', {
-      fileCount: recoveredList.length,
+      fileCount: numRecoveredFiles,
     });
 
     effects.notificationToast.add({
-      message: `We recovered ${
-        recoveredList.length
-      } unsaved files from a previous session`,
+      message: `We recovered ${numRecoveredFiles} unsaved ${
+        numRecoveredFiles > 1 ? 'files' : 'file'
+      } from a previous session`,
       status: NotificationStatus.NOTICE,
     });
   }
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/DirectoryEntryModal/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/DirectoryEntryModal/index.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Alert } from 'app/components/Alert';
+import Modal from 'app/components/Modal';
+
+interface DirectoryEntryModalProps {
+  body: React.ReactNode;
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+}
+
+const DirectoryEntryModal = ({
+  body,
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+}: DirectoryEntryModalProps) => (
+  <Modal isOpen={isOpen} onClose={onClose} width={400}>
+    <Alert
+      css={`
+        background-color: ${props =>
+          props.theme['sideBar.background'] || 'auto'};
+        color: ${props =>
+          props.theme.light ? 'rgba(0,0,0,0.9)' : 'rgba(255,255,255,0.9)'};
+      `}
+      title={title}
+      body={body}
+      onCancel={onClose}
+      onConfirm={onConfirm}
+    />
+  </Modal>
+);
+
+export default DirectoryEntryModal;
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EditIcons/index.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EditIcons/index.js
@@ -6,6 +6,7 @@ import AddFileIcon from 'react-icons/lib/md/insert-drive-file';
 import AddDirectoryIcon from 'react-icons/lib/md/create-new-folder';
 import UploadFileIcon from 'react-icons/lib/md/file-upload';
 import DownloadIcon from 'react-icons/lib/md/file-download';
+import UndoIcon from 'react-icons/lib/md/undo';
 
 import Tooltip from '@codesandbox/common/lib/components/Tooltip';
 
@@ -22,6 +23,7 @@ function EditIcons({
   className = undefined,
   hovering,
   onDelete,
+  onDiscardChanges,
   onEdit,
   onCreateFile,
   onCreateDirectory,
@@ -54,6 +56,13 @@ function EditIcons({
               </Icon>
             </Tooltip>
           )}
+          {onDiscardChanges && (
+            <Tooltip content="Discard Changes">
+              <Icon onClick={handleClick(onDiscardChanges)}>
+                <UndoIcon />
+              </Icon>
+            </Tooltip>
+          )}
           {onEdit && (
             <Tooltip content="Rename">
               <Icon onClick={handleClick(onEdit)}>
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/index.tsx
@@ -7,6 +7,7 @@ import DeleteIcon from 'react-icons/lib/go/trashcan';
 import AddDirectoryIcon from 'react-icons/lib/md/create-new-folder';
 import UploadFileIcon from 'react-icons/lib/md/file-upload';
 import AddFileIcon from 'react-icons/lib/md/insert-drive-file';
+import UndoIcon from 'react-icons/lib/md/undo';
 
 import { EntryContainer } from '../../../elements';
 import EditIcons from './EditIcons';
@@ -25,7 +26,7 @@ interface IEntryProps {
   depth: number;
   type: string;
   active: boolean;
-  discardModuleChanges: (shortid: string) => void;
+  discardModuleChanges: (shortid: string, title: string) => void;
   setCurrentModule: (id: string) => void;
   connectDragSource: (node: JSX.Element) => JSX.Element;
   onCreateDirectoryClick: () => boolean | void;
@@ -95,7 +96,7 @@ const Entry: React.FC<IEntryProps> = ({
     deleteEntry ? deleteEntry(shortid, title) : false;
 
   const discardModuleChangesAction = () =>
-    discardModuleChanges ? discardModuleChanges(shortid) : false;
+    discardModuleChanges ? discardModuleChanges(shortid, title) : false;
 
   const handleRename = (newTitle: string, force: boolean = false) => {
     if (newTitle === title) {
@@ -123,6 +124,7 @@ const Entry: React.FC<IEntryProps> = ({
       isNotSynced && {
         title: 'Discard Changes',
         action: discardModuleChangesAction,
+        icon: UndoIcon,
       },
     ].filter(Boolean),
     [
@@ -205,6 +207,7 @@ const Entry: React.FC<IEntryProps> = ({
                 onCreateFile={onCreateModuleClick}
                 onCreateDirectory={onCreateDirectoryClick}
                 onUploadFile={onUploadFileClick}
+                onDiscardChanges={isNotSynced && discardModuleChangesAction}
                 onDelete={deleteEntry && deleteAction}
                 onEdit={rename && renameAction}
                 active={active}
diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/index.js b/packages/app/src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/index.js
@@ -1,13 +1,12 @@
 import { inject, observer } from 'app/componentConnectors';
-import { Alert } from 'app/components/Alert';
-import Modal from 'app/components/Modal';
 import { reaction } from 'mobx';
 import React from 'react';
 import { DropTarget } from 'react-dnd';
 import { NativeTypes } from 'react-dnd-html5-backend';
 import { getChildren } from '@codesandbox/common/lib/sandbox/modules';
 
 import DirectoryChildren from './DirectoryChildren';
+import DirectoryEntryModal from './DirectoryEntryModal';
 import { EntryContainer, Opener, Overlay } from './elements';
 import Entry from './Entry';
 import validateTitle from './validateTitle';
@@ -46,10 +45,8 @@ class DirectoryEntry extends React.PureComponent {
     this.state = {
       creating: '',
       open: props.root || store.editor.shouldDirectoryBeOpen(id),
-      showDeleteDirectoryModal: false,
-      showDeleteModuleModal: false,
-      moduleToDeleteTitle: null,
-      moduleToDeleteShortid: null,
+      modalConfig: {},
+      isModalOpen: false,
     };
   }
 
@@ -104,11 +101,33 @@ class DirectoryEntry extends React.PureComponent {
     this.props.signals.files.moduleRenamed({ moduleShortid, title });
   };
 
-  deleteModule = (shortid, title) => {
+  confirmDeleteModule = (shortid, moduleName) => {
     this.setState({
-      showDeleteModuleModal: true,
-      moduleToDeleteShortid: shortid,
-      moduleToDeleteTitle: title,
+      isModalOpen: true,
+      modalConfig: {
+        title: 'Delete File',
+        body: (
+          <span>
+            Are you sure you want to delete{' '}
+            <b
+              css={`
+                word-break: break-all;
+              `}
+            >
+              {moduleName}
+            </b>
+            ?
+            <br />
+            The file will be permanently removed.
+          </span>
+        ),
+        onConfirm: () => {
+          this.closeModal();
+          this.props.signals.files.moduleDeleted({
+            moduleShortid: shortid,
+          });
+        },
+      },
     });
   };
 
@@ -149,16 +168,31 @@ class DirectoryEntry extends React.PureComponent {
     this.props.signals.files.directoryRenamed({ title, directoryShortid });
   };
 
-  closeModals = () => {
+  closeModal = () => {
     this.setState({
-      showDeleteDirectoryModal: false,
-      showDeleteModuleModal: false,
+      isModalOpen: false,
     });
   };
 
-  deleteDirectory = () => {
+  confirmDeleteDirectory = (shortid, directoryName) => {
     this.setState({
-      showDeleteDirectoryModal: true,
+      isModalOpen: true,
+      modalConfig: {
+        title: 'Delete Directory',
+        body: (
+          <span>
+            Are you sure you want to delete <b>{directoryName}</b>?
+            <br />
+            The directory will be permanently removed.
+          </span>
+        ),
+        onConfirm: () => {
+          this.closeModal();
+          this.props.signals.files.directoryDeleted({
+            directoryShortid: shortid,
+          });
+        },
+      },
     });
   };
 
@@ -199,10 +233,24 @@ class DirectoryEntry extends React.PureComponent {
     this.props.signals.editor.moduleDoubleClicked();
   };
 
-  discardChanges = moduleShortid => {
-    this.props.signals.editor.discardModuleChanges({ moduleShortid });
-
-    return true;
+  confirmDiscardChanges = (shortid, moduleName) => {
+    this.setState({
+      isModalOpen: true,
+      modalConfig: {
+        title: 'Discard Changes',
+        body: (
+          <span>
+            Are you sure you want to discard changes on <b>{moduleName}</b>?
+          </span>
+        ),
+        onConfirm: () => {
+          this.closeModal();
+          this.props.signals.editor.discardModuleChanges({
+            moduleShortid: shortid,
+          });
+        },
+      },
+    });
   };
 
   render() {
@@ -216,7 +264,7 @@ class DirectoryEntry extends React.PureComponent {
       store,
       getModulePath,
     } = this.props;
-    const { creating, open } = this.state;
+    const { creating, isModalOpen, modalConfig, open } = this.state;
     const { currentSandbox } = store.editor;
 
     const title = root
@@ -238,7 +286,7 @@ class DirectoryEntry extends React.PureComponent {
               isOpen={open}
               onClick={this.toggleOpen}
               renameValidator={this.validateDirectoryTitle}
-              discardModuleChanges={this.discardChanges}
+              discardModuleChanges={this.confirmDiscardChanges}
               rename={!root && this.renameDirectory}
               onCreateModuleClick={this.onCreateModuleClick}
               onCreateDirectoryClick={this.onCreateDirectoryClick}
@@ -247,38 +295,11 @@ class DirectoryEntry extends React.PureComponent {
                 currentSandbox.privacy === 0 &&
                 this.onUploadFileClick
               }
-              deleteEntry={!root && this.deleteDirectory}
+              deleteEntry={!root && this.confirmDeleteDirectory}
               hasChildren={this.getChildren().length > 0}
               closeTree={this.closeTree}
               getModulePath={getModulePath}
             />
-            {this.state.showDeleteDirectoryModal && (
-              <Modal
-                isOpen={this.state.showDeleteDirectoryModal}
-                onClose={this.closeModals}
-                width={400}
-              >
-                <Alert
-                  title="Delete Directory"
-                  body={
-                    <span>
-                      Are you sure you want to delete <b>{title}</b>?
-                      <br />
-                      The directory will be permanently removed.
-                    </span>
-                  }
-                  onCancel={this.closeModals}
-                  onConfirm={() => {
-                    this.setState({
-                      showDeleteDirectoryModal: false,
-                    });
-                    this.props.signals.files.directoryDeleted({
-                      directoryShortid: shortid,
-                    });
-                  }}
-                />
-              </Modal>
-            )}
           </EntryContainer>
         )}
         <Opener open={open}>
@@ -299,55 +320,17 @@ class DirectoryEntry extends React.PureComponent {
             renameModule={this.renameModule}
             parentShortid={shortid}
             renameValidator={this.validateModuleTitle}
-            deleteEntry={this.deleteModule}
+            deleteEntry={this.confirmDeleteModule}
             setCurrentModule={this.setCurrentModule}
             markTabsNotDirty={this.markTabsNotDirty}
-            discardModuleChanges={this.discardChanges}
+            discardModuleChanges={this.confirmDiscardChanges}
             getModulePath={getModulePath}
           />
-          {this.state.showDeleteModuleModal && (
-            <Modal
-              isOpen={this.state.showDeleteModuleModal}
-              onClose={this.closeModals}
-              width={400}
-            >
-              <Alert
-                css={`
-                  background-color: ${props =>
-                    props.theme['sideBar.background'] || 'auto'};
-                  color: ${props =>
-                    props.theme.light
-                      ? 'rgba(0,0,0,0.9)'
-                      : 'rgba(255,255,255,0.9)'};
-                `}
-                title="Delete File"
-                body={
-                  <span>
-                    Are you sure you want to delete{' '}
-                    <b
-                      css={`
-                        word-break: break-all;
-                      `}
-                    >
-                      {this.state.moduleToDeleteTitle}
-                    </b>
-                    ?
-                    <br />
-                    The file will be permanently removed.
-                  </span>
-                }
-                onCancel={this.closeModals}
-                onConfirm={() => {
-                  this.setState({
-                    showDeleteModuleModal: false,
-                  });
-                  this.props.signals.files.moduleDeleted({
-                    moduleShortid: this.state.moduleToDeleteShortid,
-                  });
-                }}
-              />
-            </Modal>
-          )}
+          <DirectoryEntryModal
+            isOpen={isModalOpen}
+            onClose={this.closeModal}
+            {...modalConfig}
+          />
           {creating === 'module' && (
             <Entry
               id=""
diff --git a/packages/app/src/app/store/modules/files/actions.js b/packages/app/src/app/store/modules/files/actions.js
diff --git a/packages/common/src/components/Button/elements.ts b/packages/common/src/components/Button/elements.ts
