Introduce delete file modal (codesandbox#147)

* Introduce delete file modal for confirming the file deletion

* Update cancel button styles

* Make title and body props

* Rename component to Alert and move it to components directory

* Use Alert also for sandbox deletion

* Fix button tests

* Remove async/await

* Prettify using new settings

Author: jseminck

src/app/components/Alert.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import styled from 'styled-components';
+import Button from 'app/components/buttons/Button';
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${props => props.theme.background};
+  color: rgba(255, 255, 255, 0.8);
+  padding: 0.75rem;
+`;
+
+const Title = styled.div`
+  display: flex;
+  justify-content: center;
+  font-weight: 500;
+  font-size: 1.125rem;
+  color: rgba(255, 255, 255, 0.9);
+  margin-top: 0 !important;
+  margin-bottom: 1rem;
+  text-transform: uppercase;
+`;
+
+const Text = styled.div`
+  font-size: 14px;
+  font-weight: 0;
+`;
+
+const Buttons = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 1rem;
+  button {
+    display: flex;
+    justify-content: center;
+    width: 6rem;
+    margin: 0.5rem;
+  }
+`;
+
+type Props = {
+  title: string,
+  body: string | Object,
+  onCancel: Function,
+  onDelete: Function,
+};
+
+const Alert = ({ title, body, onCancel, onDelete }: Props) => (
+  <Container>
+    <Title>{title}</Title>
+
+    <Text>{body}</Text>
+
+    <Buttons>
+      <Button small block secondary onClick={onCancel}>
+        Cancel
+      </Button>
+      <Button small block primary onClick={onDelete}>
+        Delete
+      </Button>
+    </Buttons>
+  </Container>
+);
+
+export default Alert;

src/app/components/buttons/Button.js

@@ -4,18 +4,25 @@ import styled, { css, keyframes } from 'styled-components';
 
 import theme from 'common/theme';
 
-const getBackgroundColor = ({ disabled, red }) => {
+const getBackgroundColor = ({ disabled, red, secondary }) => {
   if (disabled) return `background: ${theme.background2.darken(0.1)()}`;
+  if (secondary) return `background: #3A4B5D`;
   if (red)
     return `background-image: linear-gradient(270deg, #F27777, #400000);`;
   return `background-image: linear-gradient(270deg, #fed29d, #A58B66, #7abae8, #56a0d6);`;
 };
 
-const getColor = ({ disabled }) => {
+const getColor = ({ disabled, secondary }) => {
   if (disabled) return theme.background2.lighten(1.5)();
+  if (secondary) return `#56a0d6`;
   return 'white';
 };
 
+const getBorder = ({ secondary }) => {
+  if (secondary) return `1px solid #56a0d6`;
+  return 'none';
+};
+
 const forward = keyframes`
   0%{background-position:0% 50%}
   100%{background-position:100% 50%}
@@ -37,6 +44,7 @@ const styles = css`
   ${props => getBackgroundColor(props)};
   background-size: 720%;
 
+  border: ${props => getBorder(props)};
   border-radius: 4px;
 
   box-sizing: border-box;

src/app/components/buttons/Button.test.js

@@ -31,4 +31,8 @@ describe('Button', () => {
   it('renders disabled', () => {
     testRender(<Button disabled>Test</Button>);
   });
+
+  it('renders secondary', () => {
+    testRender(<Button secondary>Test</Button>);
+  });
 });

src/app/components/buttons/__snapshots__/Button.test.js.snap

@@ -14,6 +14,7 @@ exports[`Button renders 1`] = `
   outline: none;
   background-image: linear-gradient(270deg,#fed29d,#A58B66,#7abae8,#56a0d6);
   background-size: 720%;
+  border: none;
   border-radius: 4px;
   box-sizing: border-box;
   font-size: 1.125rem;
@@ -76,6 +77,7 @@ exports[`Button renders disabled 1`] = `
   outline: none;
   background: rgb(25,29,31);
   background-size: 720%;
+  border: none;
   border-radius: 4px;
   box-sizing: border-box;
   font-size: 1.125rem;
@@ -113,6 +115,7 @@ exports[`Button renders href 1`] = `
   outline: none;
   background-image: linear-gradient(270deg,#fed29d,#A58B66,#7abae8,#56a0d6);
   background-size: 720%;
+  border: none;
   border-radius: 4px;
   box-sizing: border-box;
   font-size: 1.125rem;
@@ -176,6 +179,7 @@ exports[`Button renders onClick 1`] = `
   outline: none;
   background-image: linear-gradient(270deg,#fed29d,#A58B66,#7abae8,#56a0d6);
   background-size: 720%;
+  border: none;
   border-radius: 4px;
   box-sizing: border-box;
   font-size: 1.125rem;
@@ -239,6 +243,7 @@ exports[`Button renders properties 1`] = `
   outline: none;
   background-image: linear-gradient(270deg,#fed29d,#A58B66,#7abae8,#56a0d6);
   background-size: 720%;
+  border: none;
   border-radius: 4px;
   box-sizing: border-box;
   font-size: 1.125rem;
@@ -288,6 +293,69 @@ exports[`Button renders properties 1`] = `
 </button>
 `;
 
+exports[`Button renders secondary 1`] = `
+.c0 {
+  -webkit-transition: 0.3s ease all;
+  transition: 0.3s ease all;
+  -webkit-animation-name: cUPaoU;
+  animation-name: cUPaoU;
+  -webkit-animation-duration: 300ms;
+  animation-duration: 300ms;
+  -webkit-animation-timing-function: ease;
+  animation-timing-function: ease;
+  border: none;
+  outline: none;
+  background: #3A4B5D;
+  background-size: 720%;
+  border: 1px solid #56a0d6;
+  border-radius: 4px;
+  box-sizing: border-box;
+  font-size: 1.125rem;
+  text-align: center;
+  color: #56a0d6;
+  font-weight: 400;
+  box-shadow: 0 3px 3px rgba(0,0,0,0.5);
+  width: inherit;
+  padding: 0.65rem 2.25rem;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.c0:hover {
+  -webkit-animation-name: eEnBCQ;
+  animation-name: eEnBCQ;
+  -webkit-animation-duration: 300ms;
+  animation-duration: 300ms;
+  -webkit-animation-timing-function: ease;
+  animation-timing-function: ease;
+  -webkit-animation-direction: normal;
+  animation-direction: normal;
+  -webkit-animation-fill-mode: forwards;
+  animation-fill-mode: forwards;
+  box-shadow: 0 7px 10px rgba(0,0,0,0.5);
+  -webkit-transform: translateY(-1px);
+  -ms-transform: translateY(-1px);
+  transform: translateY(-1px);
+}
+
+.c0:active {
+  -webkit-transform: translateY(1px);
+  -ms-transform: translateY(1px);
+  transform: translateY(1px);
+  box-shadow: 0 0 0 rgba(0,0,0,0.5);
+}
+
+<button
+  className="c0"
+>
+  Test
+</button>
+`;
+
 exports[`Button renders to 1`] = `
 .c0 {
   -webkit-transition: 0.3s ease all;
@@ -302,6 +370,7 @@ exports[`Button renders to 1`] = `
   outline: none;
   background-image: linear-gradient(270deg,#fed29d,#A58B66,#7abae8,#56a0d6);
   background-size: 720%;
+  border: none;
   border-radius: 4px;
   box-sizing: border-box;
   font-size: 1.125rem;

src/app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/index.js

@@ -10,6 +10,8 @@ import sandboxActionCreators from 'app/store/entities/sandboxes/actions';
 import { validateTitle } from 'app/store/entities//sandboxes/modules/validator';
 import contextMenuActionCreators from 'app/store/context-menu/actions';
 import { getModuleParents } from 'app/store/entities/sandboxes/modules/selectors';
+import modalActionCreators from 'app/store/modal/actions';
+import Alert from 'app/components/Alert';
 
 import Entry from './Entry';
 import DirectoryChildren from './DirectoryChildren';
@@ -34,6 +36,7 @@ const Opener = styled.div`
 const mapDispatchToProps = dispatch => ({
   sandboxActions: bindActionCreators(sandboxActionCreators, dispatch),
   openMenu: bindActionCreators(contextMenuActionCreators, dispatch).openMenu,
+  modalActions: bindActionCreators(modalActionCreators, dispatch),
 });
 type Props = {
   id: string,
@@ -49,6 +52,7 @@ type Props = {
   depth: ?number,
   openMenu: (e: Event) => void,
   sandboxActions: typeof sandboxActionCreators,
+  modalActions: typeof modalActionCreators,
   currentModuleId: ?string,
   isInProjectView: boolean,
 };
@@ -118,17 +122,28 @@ class DirectoryEntry extends React.PureComponent {
   };
 
   deleteModule = (id: string) => {
-    const { sandboxId, modules, sandboxActions } = this.props;
+    const { sandboxId, modules, sandboxActions, modalActions } = this.props;
     const module = modules.find(m => m.id === id);
 
-    const confirmed = confirm(
-      `Are you sure you want to delete ${module.title}?`
-    );
-
-    if (confirmed) {
-      sandboxActions.deleteModule(sandboxId, id);
-    }
-    return true;
+    modalActions.openModal({
+      Body: (
+        <Alert
+          title="Delete File"
+          body={
+            <span>
+              Are you sure you want to delete <b>{module.title}</b>?
+              <br />
+              The file will be permanently removed.
+            </span>
+          }
+          onCancel={modalActions.closeModal}
+          onDelete={() => {
+            modalActions.closeModal();
+            sandboxActions.deleteModule(sandboxId, id);
+          }}
+        />
+      ),
+    });
   };
 
   onCreateDirectoryClick = () => {

src/app/pages/Sandbox/Editor/Workspace/SandboxActions/index.js

@@ -1,21 +1,17 @@
 import React from 'react';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 import styled from 'styled-components';
 
 import Button from 'app/components/buttons/Button';
 
+import modalActionCreators from 'app/store/modal/actions';
+import Alert from 'app/components/Alert';
+
 import WorkspaceInputContainer from '../WorkspaceInputContainer';
 
 import WorkspaceSubtitle from '../WorkspaceSubtitle';
 
-type Props = {
-  id: string,
-  deleteSandbox: (id: string) => void,
-  newSandboxUrl: () => void,
-  setSandboxPrivacy: (id: string, privacy: number) => void,
-  isPatron: boolean,
-  privacy: 0 | 1 | 2,
-};
-
 const PrivacySelect = styled.select`
   background-color: rgba(0, 0, 0, 0.3);
   color: rgba(255, 255, 255, 0.8);
@@ -28,18 +24,43 @@ const PrivacySelect = styled.select`
   box-sizing: border-box;
 `;
 
-export default class SandboxSettings extends React.PureComponent {
+const mapDispatchToProps = dispatch => ({
+  modalActions: bindActionCreators(modalActionCreators, dispatch),
+});
+
+type Props = {
+  id: string,
+  deleteSandbox: (id: string) => void,
+  newSandboxUrl: () => void,
+  setSandboxPrivacy: (id: string, privacy: number) => void,
+  isPatron: boolean,
+  privacy: 0 | 1 | 2,
+  modalActions: typeof modalActionCreators,
+};
+
+class SandboxSettings extends React.PureComponent {
   props: Props;
   state = {
     loading: false,
   };
 
-  handleDeleteSandbox = async () => {
-    const really = confirm('Are you sure you want to delete this sandbox?'); // TODO: confirm???
-    if (really) {
-      await this.props.deleteSandbox(this.props.id);
-      await this.props.newSandboxUrl();
-    }
+  handleDeleteSandbox = () => {
+    const { modalActions } = this.props;
+
+    modalActions.openModal({
+      Body: (
+        <Alert
+          title="Delete File"
+          body={<span>Are you sure you want to delete this sandbox?</span>}
+          onCancel={modalActions.closeModal}
+          onDelete={() => {
+            this.props.deleteSandbox(this.props.id);
+            this.props.newSandboxUrl();
+            modalActions.closeModal();
+          }}
+        />
+      ),
+    });
   };
 
   updateSandboxPrivacy = async e => {
@@ -95,3 +116,5 @@ export default class SandboxSettings extends React.PureComponent {
     );
   }
 }
+
+export default connect(undefined, mapDispatchToProps)(SandboxSettings);