removed custom modal, to reduce scope of changes

Author: benjiwheeler

src/components/gui/gui.jsx

@@ -30,7 +30,6 @@ import Alerts from '../../containers/alerts.jsx';
 import DragLayer from '../../containers/drag-layer.jsx';
 import ConnectionModal from '../../containers/connection-modal.jsx';
 import TelemetryModal from '../telemetry-modal/telemetry-modal.jsx';
-import Confirm from '../prompt/confirm.jsx';
 
 import layout, {STAGE_SIZE_MODES} from '../../lib/layout-constants';
 import {resolveStageSize} from '../../lib/screen-utils';
@@ -40,9 +39,7 @@ import addExtensionIcon from './icon--extensions.svg';
 import codeIcon from './icon--code.svg';
 import costumesIcon from './icon--costumes.svg';
 import soundsIcon from './icon--sounds.svg';
-import fileUploadIcon from '../../lib/assets/icon--file-upload-blue.svg';
 
-import sharedMessages from '../../lib/shared-messages';
 const messages = defineMessages({
     addExtension: {
         id: 'gui.gui.addExtension',
@@ -81,7 +78,6 @@ const GUIComponent = props => {
         costumeLibraryVisible,
         costumesTabVisible,
         enableCommunity,
-        fileUploadConfirmVisible,
         intl,
         isCreating,
         isFullScreen,
@@ -90,10 +86,8 @@ const GUIComponent = props => {
         isShared,
         loading,
         renderLogin,
-        onCancelFileUpload,
         onClickAccountNav,
         onCloseAccountNav,
-        onConfirmFileUpload,
         onLogOut,
         onOpenRegistration,
         onToggleLoginOpen,
@@ -204,15 +198,6 @@ const GUIComponent = props => {
                         onRequestClose={onRequestCloseBackdropLibrary}
                     />
                 ) : null}
-                {fileUploadConfirmVisible ? (
-                    <Confirm
-                        iconSrc={fileUploadIcon}
-                        label={intl.formatMessage(sharedMessages.replaceProjectWarning)}
-                        title={intl.formatMessage(sharedMessages.loadFromComputerTitle)}
-                        onCancel={onCancelFileUpload}
-                        onOk={onConfirmFileUpload}
-                    />
-                ) : null}
                 <MenuBar
                     accountNavOpen={accountNavOpen}
                     authorId={authorId}
@@ -388,7 +373,6 @@ GUIComponent.propTypes = {
     costumeLibraryVisible: PropTypes.bool,
     costumesTabVisible: PropTypes.bool,
     enableCommunity: PropTypes.bool,
-    fileUploadConfirmVisible: PropTypes.bool,
     intl: intlShape.isRequired,
     isCreating: PropTypes.bool,
     isFullScreen: PropTypes.bool,
@@ -399,11 +383,9 @@ GUIComponent.propTypes = {
     onActivateCostumesTab: PropTypes.func,
     onActivateSoundsTab: PropTypes.func,
     onActivateTab: PropTypes.func,
-    onCancelFileUpload: PropTypes.func.isRequired,
     onClickAccountNav: PropTypes.func,
     onClickLogo: PropTypes.func,
     onCloseAccountNav: PropTypes.func,
-    onConfirmFileUpload: PropTypes.func.isRequired,
     onExtensionButtonClick: PropTypes.func,
     onLogOut: PropTypes.func,
     onOpenRegistration: PropTypes.func,
@@ -443,8 +425,6 @@ GUIComponent.defaultProps = {
     isCreating: false,
     isShared: false,
     loading: false,
-    onCancelFileUpload: () => {},
-    onConfirmFileUpload: () => {},
     onUpdateProjectTitle: () => {},
     showComingSoon: false,
     stageSizeMode: STAGE_SIZE_MODES.large

src/components/prompt/confirm.jsx

@@ -17,17 +17,13 @@
 
 .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%;
@@ -46,13 +42,6 @@
     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;
@@ -65,11 +54,6 @@
     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,11 +1,10 @@
 import classNames from 'classnames';
-import {defineMessages, FormattedMessage, injectIntl, intlShape} from 'react-intl';
+import {defineMessages, FormattedMessage} 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';
 
@@ -41,10 +40,8 @@ const PromptComponent = props => (
         onRequestClose={props.onCancel}
     >
         <Box className={styles.body}>
-            <Box className={styles.labelRow}>
-                <Box className={styles.label}>
-                    {props.label}
-                </Box>
+            <Box className={styles.label}>
+                {props.label}
             </Box>
             <Box>
                 <input
@@ -117,13 +114,21 @@ const PromptComponent = props => (
                     className={styles.cancelButton}
                     onClick={props.onCancel}
                 >
-                    {props.intl.formatMessage(sharedMessages.cancel)}
+                    <FormattedMessage
+                        defaultMessage="Cancel"
+                        description="Button in prompt for cancelling the dialog"
+                        id="gui.prompt.cancel"
+                    />
                 </button>
                 <button
                     className={styles.okButton}
                     onClick={props.onOk}
                 >
-                    {props.intl.formatMessage(sharedMessages.ok)}
+                    <FormattedMessage
+                        defaultMessage="OK"
+                        description="Button in prompt for confirming the dialog"
+                        id="gui.prompt.ok"
+                    />
                 </button>
             </Box>
         </Box>
@@ -135,7 +140,6 @@ 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,
@@ -150,4 +154,4 @@ PromptComponent.propTypes = {
     title: PropTypes.string.isRequired
 };
 
-export default injectIntl(PromptComponent);
+export default PromptComponent;

src/components/prompt/prompt.jsx

@@ -1,8 +1,10 @@
 import bindAll from 'lodash.bindall';
 import React from 'react';
 import PropTypes from 'prop-types';
+import {defineMessages, intlShape, injectIntl} from 'react-intl';
 import {connect} from 'react-redux';
 import log from '../lib/log';
+import sharedMessages from './shared-messages';
 
 import {
     LoadingStates,
@@ -19,13 +21,13 @@ import {
     closeFileMenu
 } from '../reducers/menus';
 
-// const messages = defineMessages({
-//     loadError: {
-//         id: 'gui.projectLoader.loadError',
-//         defaultMessage: 'The project file that was selected failed to load.',
-//         description: 'An error that displays when a local project file fails to load.'
-//     }
-// });
+const messages = defineMessages({
+    loadError: {
+        id: 'gui.projectLoader.loadError',
+        defaultMessage: 'The project file that was selected failed to load.',
+        description: 'An error that displays when a local project file fails to load.'
+    }
+});
 
 /**
  * Higher Order Component to provide behavior for loading local project files into editor.
@@ -45,15 +47,9 @@ const SBFileUploaderHOC = function (WrappedComponent) {
                 'handleStartSelectingFileUpload',
                 'setFileInput',
                 'handleChange',
-                'handleConfirmClickedCancel',
-                'handleConfirmClickedOK',
-                'handleConfirmClose',
                 'onload',
                 'resetFileInput'
             ]);
-            this.state = {
-                showingConfirm: false
-            };
         }
         componentWillMount () {
             this.reader = new FileReader();
@@ -90,6 +86,7 @@ const SBFileUploaderHOC = function (WrappedComponent) {
         // called when user has finished selecting a file to upload
         handleChange (e) {
             const {
+                intl,
                 isShowingWithoutId,
                 loadingState,
                 projectChanged,
@@ -103,25 +100,20 @@ const SBFileUploaderHOC = function (WrappedComponent) {
                 // If user owns the project, or user has changed the project,
                 // we must confirm with the user that they really intend to replace it.
                 // (If they don't own the project and haven't changed it, no need to confirm.)
+                let uploadAllowed = true;
                 if (userOwnsProject || (projectChanged && isShowingWithoutId)) {
-                    this.setState({showingConfirm: true});
-                } else {
+                    uploadAllowed = confirm( // eslint-disable-line no-alert
+                        intl.formatMessage(sharedMessages.replaceProjectWarning)
+                    );
+                }
+                if (uploadAllowed) {
                     this.props.requestProjectUpload(loadingState);
+                } else {
+                    this.resetFileInput();
                 }
+                this.props.closeFileMenu();
             }
         }
-        handleConfirmClickedCancel () {
-            this.resetFileInput();
-            this.handleConfirmClose();
-        }
-        handleConfirmClickedOK () {
-            this.props.requestProjectUpload(this.props.loadingState);
-            this.handleConfirmClose();
-        }
-        handleConfirmClose () {
-            this.setState({showingConfirm: false});
-            this.props.closeFileMenu();
-        }
         // called when file upload raw data is available in the reader
         onload () {
             if (this.reader) {
@@ -140,8 +132,7 @@ const SBFileUploaderHOC = function (WrappedComponent) {
                     })
                     .catch(error => {
                         log.warn(error);
-                        // NOTE: revise this
-                        alert('this.props.intl.formatMessage(messages.loadError)'); // eslint-disable-line no-alert
+                        this.props.intl.formatMessage(messages.loadError); // eslint-disable-line no-alert
                         this.props.onLoadingFinished(this.props.loadingState, false);
                         // Reset the file input after project is loaded
                         // This is necessary in case the user wants to reload a project
@@ -183,9 +174,6 @@ const SBFileUploaderHOC = function (WrappedComponent) {
             return (
                 <React.Fragment>
                     <WrappedComponent
-                        fileUploadConfirmVisible={this.state.showingConfirm}
-                        onCancelFileUpload={this.handleConfirmClickedCancel}
-                        onConfirmFileUpload={this.handleConfirmClickedOK}
                         onStartSelectingFileUpload={this.handleStartSelectingFileUpload}
                         {...componentProps}
                     />
@@ -199,6 +187,7 @@ const SBFileUploaderHOC = function (WrappedComponent) {
         canSave: PropTypes.bool,
         cancelFileUpload: PropTypes.func,
         closeFileMenu: PropTypes.func,
+        intl: intlShape.isRequired,
         isLoadingUpload: PropTypes.bool,
         isShowingWithoutId: PropTypes.bool,
         loadingState: PropTypes.oneOf(LoadingStates),
@@ -240,11 +229,11 @@ const SBFileUploaderHOC = function (WrappedComponent) {
     const mergeProps = (stateProps, dispatchProps, ownProps) => Object.assign(
         {}, stateProps, dispatchProps, ownProps
     );
-    return connect(
+    return injectIntl(connect(
         mapStateToProps,
         mapDispatchToProps,
         mergeProps
-    )(SBFileUploaderComponent);
+    )(SBFileUploaderComponent));
 };
 
 export {