upload in current project id, rather than creating new project id

Author: benjiwheeler

src/components/action-menu/icon--file-upload.svg

@@ -393,19 +393,18 @@ class MenuBar extends React.Component {
                                     </MenuSection>
                                 )}
                                 <MenuSection>
-                                    <SBFileUploader onUpdateProjectTitle={this.props.onUpdateProjectTitle}>
+                                    <SBFileUploader
+                                        canSave={this.props.canSave}
+                                        userOwnsProject={this.props.authorUsername &&
+                                            (this.props.authorUsername === this.props.username)}
+                                        onUpdateProjectTitle={this.props.onUpdateProjectTitle}
+                                    >
                                         {(className, renderFileInput, loadProject) => (
                                             <MenuItem
                                                 className={className}
                                                 onClick={loadProject}
                                             >
-                                                <FormattedMessage
-                                                    defaultMessage="Load from your computer"
-                                                    description={
-                                                        'Menu bar item for uploading a project from your computer'
-                                                    }
-                                                    id="gui.menuBar.uploadFromComputer"
-                                                />
+                                                {this.props.intl.formatMessage(sharedMessages.loadFromComputerTitle)}
                                                 {renderFileInput()}
                                             </MenuItem>
                                         )}

src/components/menu-bar/menu-bar.jsx

@@ -0,0 +1,57 @@
+import classNames from 'classnames';
+import {injectIntl, intlShape} from 'react-intl';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+import Box from '../box/box.jsx';
+import Modal from '../../containers/modal.jsx';
+import sharedMessages from '../../lib/shared-messages';
+
+import styles from './prompt.css';
+
+const ConfirmComponent = props => (
+    <Modal
+        className={styles.modalContent}
+        contentLabel={props.title}
+        onRequestClose={props.onCancel}
+    >
+        <Box className={styles.body}>
+            <Box className={styles.labelRow}>
+                {props.iconSrc && (
+                    <img
+                        className={styles.icon}
+                        src={props.iconSrc}
+                    />
+                )}
+                <Box className={styles.label}>
+                    {props.label}
+                </Box>
+            </Box>
+            <Box className={classNames(styles.buttonRow, styles.center)}>
+                <button
+                    className={styles.cancelButton}
+                    onClick={props.onCancel}
+                >
+                    {props.intl.formatMessage(sharedMessages.cancel)}
+                </button>
+                <button
+                    className={styles.okButton}
+                    onClick={props.onOk}
+                >
+                    {props.intl.formatMessage(sharedMessages.ok)}
+                </button>
+            </Box>
+        </Box>
+    </Modal>
+);
+
+ConfirmComponent.propTypes = {
+    iconSrc: PropTypes.string,
+    intl: intlShape.isRequired,
+    label: PropTypes.string.isRequired,
+    onCancel: PropTypes.func.isRequired,
+    onOk: PropTypes.func.isRequired,
+    title: PropTypes.string.isRequired
+};
+
+export default injectIntl(ConfirmComponent);

src/components/prompt/confirm.jsx

@@ -17,13 +17,17 @@
 
 .label {
     font-weight: 500;
-    margin: 0 0 0.75rem;
 }
 
 .disabled-label {
     opacity: 0.5;
 }
 
+.icon {
+    margin: .5rem 1rem .5rem .75rem;
+    width: 4.125rem;
+}
+
 .variable-name-text-input {
     margin-bottom: 1.5rem;
     width: 100%;
@@ -42,6 +46,13 @@
     text-align: center;
 }
 
+.label-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 0 0.75rem;
+}
+
 .options-row {
     display: flex;
     font-weight: normal;
@@ -54,6 +65,11 @@
     text-align: right;
 }
 
+.button-row.center {
+    text-align: center;
+    margin: 0 auto;
+}
+
 .button-row button {
     padding: 0.75rem 1rem;
     border-radius: 0.25rem;

src/components/prompt/prompt.css

@@ -1,10 +1,11 @@
 import classNames from 'classnames';
-import {defineMessages, FormattedMessage} from 'react-intl';
+import {defineMessages, FormattedMessage, injectIntl, intlShape} from 'react-intl';
 import PropTypes from 'prop-types';
 import React from 'react';
 
 import Box from '../box/box.jsx';
 import Modal from '../../containers/modal.jsx';
+import sharedMessages from '../../lib/shared-messages';
 
 import styles from './prompt.css';
 
@@ -40,8 +41,10 @@ const PromptComponent = props => (
         onRequestClose={props.onCancel}
     >
         <Box className={styles.body}>
-            <Box className={styles.label}>
-                {props.label}
+            <Box className={styles.labelRow}>
+                <Box className={styles.label}>
+                    {props.label}
+                </Box>
             </Box>
             <Box>
                 <input
@@ -114,21 +117,13 @@ const PromptComponent = props => (
                     className={styles.cancelButton}
                     onClick={props.onCancel}
                 >
-                    <FormattedMessage
-                        defaultMessage="Cancel"
-                        description="Button in prompt for cancelling the dialog"
-                        id="gui.prompt.cancel"
-                    />
+                    {props.intl.formatMessage(sharedMessages.cancel)}
                 </button>
                 <button
                     className={styles.okButton}
                     onClick={props.onOk}
                 >
-                    <FormattedMessage
-                        defaultMessage="OK"
-                        description="Button in prompt for confirming the dialog"
-                        id="gui.prompt.ok"
-                    />
+                    {props.intl.formatMessage(sharedMessages.ok)}
                 </button>
             </Box>
         </Box>
@@ -140,6 +135,7 @@ PromptComponent.propTypes = {
     cloudSelected: PropTypes.bool.isRequired,
     defaultValue: PropTypes.string,
     globalSelected: PropTypes.bool.isRequired,
+    intl: intlShape.isRequired,
     isStage: PropTypes.bool.isRequired,
     label: PropTypes.string.isRequired,
     onCancel: PropTypes.func.isRequired,
@@ -154,4 +150,4 @@ PromptComponent.propTypes = {
     title: PropTypes.string.isRequired
 };
 
-export default PromptComponent;
+export default injectIntl(PromptComponent);

src/components/prompt/prompt.jsx

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import bindAll from 'lodash.bindall';
+import ConfirmComponent from '../components/prompt/confirm.jsx';
+
+class Confirm extends React.Component {
+    constructor (props) {
+        super(props);
+        bindAll(this, [
+            'handleOk',
+            'handleCancel'
+        ]);
+    }
+    handleOk () {
+        this.props.onOk();
+    }
+    handleCancel () {
+        this.props.onCancel();
+    }
+    render () {
+        return (
+            <ConfirmComponent
+                iconSrc={this.props.iconSrc}
+                label={this.props.label}
+                title={this.props.title}
+                onCancel={this.handleCancel}
+                onOk={this.handleOk}
+            />
+        );
+    }
+}
+
+Confirm.propTypes = {
+    iconSrc: PropTypes.string,
+    label: PropTypes.string.isRequired,
+    onCancel: PropTypes.func.isRequired,
+    onOk: PropTypes.func.isRequired,
+    title: PropTypes.string.isRequired
+};
+
+export default Confirm;