From 0dd4623523ea4ef39db068c65578a75c1ecddb1a Mon Sep 17 00:00:00 2001
From: Karishma Chadha <kchadha@scratch.mit.edu>
Date: Tue, 3 Jul 2018 23:03:09 -0400
Subject: [PATCH] Allow specifying variables as local vs. global. Pass var
 names from VM to scratch-blocks for checking for conflicts in all sprites
 when attempting to create a global var.

---
 src/components/prompt/prompt.css | 20 +++++--
 src/components/prompt/prompt.jsx | 89 +++++++++++++++++++++++++-------
 src/containers/blocks.jsx        |  9 +++-
 src/containers/prompt.jsx        | 12 ++++-
 4 files changed, 103 insertions(+), 27 deletions(-)

diff --git a/src/components/prompt/prompt.css b/src/components/prompt/prompt.css
index 34a8f5a21..78e3ecb27 100644
--- a/src/components/prompt/prompt.css
+++ b/src/components/prompt/prompt.css
@@ -15,7 +15,7 @@
     margin: 0 0 0.75rem;
 }
 
-.input {
+.variable-name-text-input {
     margin-bottom: 1.5rem;
     width: 100%;
     border: 1px solid $ui-black-transparent;
@@ -26,6 +26,20 @@
     font-size: .875rem;
 }
 
+.info-message {
+    font-weight: normal;
+    font-size: .875rem;
+    margin-bottom: 1.5rem;
+    text-align: center;
+}
+
+.options-row {
+    display: flex;
+    font-weight: normal;
+    justify-content: space-between;
+    margin-bottom: 1.5rem;
+}
+
 .button-row {
     font-weight: bolder;
     text-align: right;
@@ -58,10 +72,6 @@
     margin: 0 0 1rem;
 }
 
-.hide-more-options {
-    display: none;
-}
-
 .more-options-accordion {
     width: 60%;
     margin: 0 auto;
diff --git a/src/components/prompt/prompt.jsx b/src/components/prompt/prompt.jsx
index 4feffeb0c..20e6af85e 100644
--- a/src/components/prompt/prompt.jsx
+++ b/src/components/prompt/prompt.jsx
@@ -11,10 +11,26 @@ import styles from './prompt.css';
 import dropdownIcon from './icon--dropdown-caret.svg';
 
 const messages = defineMessages({
+    forAllSpritesMessage: {
+        defaultMessage: 'For all sprites',
+        description: 'Option message when creating a variable for making it available to all sprites',
+        id: 'gui.gui.variableScopeOptionAllSprites'
+    },
+    forThisSpriteMessage: {
+        defaultMessage: 'For this sprite only',
+        description: 'Option message when creating a varaible for making it only available to the current sprite',
+        id: 'gui.gui.variableScopeOptionSpriteOnly'
+    },
     moreOptionsMessage: {
         defaultMessage: 'More Options',
         description: 'Dropdown message for variable/list options',
         id: 'gui.gui.variablePrompt'
+    },
+    availableToAllSpritesMessage: {
+        defaultMessage: 'This variable will be available to all sprites.',
+        description: 'A message that displays in a variable modal when the stage is selected indicating ' +
+            'that the variable being created will available to all sprites.',
+        id: 'gui.gui.variablePromptAllSpritesMessage'
     }
 });
 
@@ -31,29 +47,64 @@ const PromptComponent = props => (
             <Box>
                 <input
                     autoFocus
-                    className={styles.input}
+                    className={styles.variableNameTextInput}
                     placeholder={props.placeholder}
                     onChange={props.onChange}
                     onKeyPress={props.onKeyPress}
                 />
             </Box>
-            <Box className={props.showMoreOptions ? styles.moreOptions : styles.hideMoreOptions}>
-                <ComingSoonTooltip
-                    className={styles.moreOptionsAccordion}
-                    place="right"
-                    tooltipId="variable-options-accordion"
-                >
-                    <div className={styles.moreOptionsText}>
-                        <FormattedMessage
-                            {...messages.moreOptionsMessage}
-                        />
-                        <img
-                            className={styles.moreOptionsIcon}
-                            src={dropdownIcon}
-                        />
-                    </div>
-                </ComingSoonTooltip>
-            </Box>
+            {props.showMoreOptions ?
+                <div>
+                    {props.isStage ?
+                        <div className={styles.infoMessage}>
+                            <FormattedMessage
+                                {...messages.availableToAllSpritesMessage}
+                            />
+                        </div> :
+                        <Box className={styles.optionsRow}>
+                            <label>
+                                <input
+                                    checked
+                                    name="variableScopeOption"
+                                    type="radio"
+                                    value="global"
+                                    onChange={props.onOptionSelection}
+                                />
+                                <FormattedMessage
+                                    {...messages.forAllSpritesMessage}
+                                />
+                            </label>
+                            <label>
+                                <input
+                                    name="variableScopeOption"
+                                    type="radio"
+                                    value="local"
+                                    onChange={props.onOptionSelection}
+                                />
+                                <FormattedMessage
+                                    {...messages.forThisSpriteMessage}
+                                />
+                            </label>
+                        </Box>}
+                    <Box className={styles.moreOptions}>
+                        <ComingSoonTooltip
+                            className={styles.moreOptionsAccordion}
+                            place="right"
+                            tooltipId="variable-options-accordion"
+                        >
+                            <div className={styles.moreOptionsText}>
+                                <FormattedMessage
+                                    {...messages.moreOptionsMessage}
+                                />
+                                <img
+                                    className={styles.moreOptionsIcon}
+                                    src={dropdownIcon}
+                                />
+                            </div>
+                        </ComingSoonTooltip>
+                    </Box>
+                </div> : null}
+
             <Box className={styles.buttonRow}>
                 <button
                     className={styles.cancelButton}
@@ -81,11 +132,13 @@ const PromptComponent = props => (
 );
 
 PromptComponent.propTypes = {
+    isStage: PropTypes.bool.isRequired,
     label: PropTypes.string.isRequired,
     onCancel: PropTypes.func.isRequired,
     onChange: PropTypes.func.isRequired,
     onKeyPress: PropTypes.func.isRequired,
     onOk: PropTypes.func.isRequired,
+    onOptionSelection: PropTypes.func.isRequired,
     placeholder: PropTypes.string,
     showMoreOptions: PropTypes.bool.isRequired,
     title: PropTypes.string.isRequired
diff --git a/src/containers/blocks.jsx b/src/containers/blocks.jsx
index 1b411d633..f9db7468b 100644
--- a/src/containers/blocks.jsx
+++ b/src/containers/blocks.jsx
@@ -322,12 +322,16 @@ class Blocks extends React.Component {
         const p = {prompt: {callback, message, defaultValue}};
         p.prompt.title = optTitle ? optTitle :
             this.ScratchBlocks.VARIABLE_MODAL_TITLE;
+        p.prompt.varType = typeof optVarType === 'string' ?
+            optVarType : this.ScratchBlocks.SCALAR_VARIABLE_TYPE;
         p.prompt.showMoreOptions =
             optVarType !== this.ScratchBlocks.BROADCAST_MESSAGE_VARIABLE_TYPE;
         this.setState(p);
     }
-    handlePromptCallback (data) {
-        this.state.prompt.callback(data);
+    handlePromptCallback (input, optionSelection) {
+        this.state.prompt.callback(input, optionSelection,
+            (optionSelection === 'local') ? [] :
+                this.props.vm.runtime.getAllVarNamesOfType(this.state.prompt.varType));
         this.handlePromptClose();
     }
     handlePromptClose () {
@@ -366,6 +370,7 @@ class Blocks extends React.Component {
                 />
                 {this.state.prompt ? (
                     <Prompt
+                        isStage={vm.runtime.getEditingTarget().isStage}
                         label={this.state.prompt.message}
                         placeholder={this.state.prompt.defaultValue}
                         showMoreOptions={this.state.prompt.showMoreOptions}
diff --git a/src/containers/prompt.jsx b/src/containers/prompt.jsx
index a798b02ed..72c8ad8a3 100644
--- a/src/containers/prompt.jsx
+++ b/src/containers/prompt.jsx
@@ -8,19 +8,21 @@ class Prompt extends React.Component {
         super(props);
         bindAll(this, [
             'handleOk',
+            'handleOptionSelection',
             'handleCancel',
             'handleChange',
             'handleKeyPress'
         ]);
         this.state = {
-            inputValue: ''
+            inputValue: '',
+            optionSelection: null
         };
     }
     handleKeyPress (event) {
         if (event.key === 'Enter') this.handleOk();
     }
     handleOk () {
-        this.props.onOk(this.state.inputValue);
+        this.props.onOk(this.state.inputValue, this.state.optionSelection);
     }
     handleCancel () {
         this.props.onCancel();
@@ -28,9 +30,13 @@ class Prompt extends React.Component {
     handleChange (e) {
         this.setState({inputValue: e.target.value});
     }
+    handleOptionSelection (e) {
+        this.setState({optionSelection: e.target.value});
+    }
     render () {
         return (
             <PromptComponent
+                isStage={this.props.isStage}
                 label={this.props.label}
                 placeholder={this.props.placeholder}
                 showMoreOptions={this.props.showMoreOptions}
@@ -39,12 +45,14 @@ class Prompt extends React.Component {
                 onChange={this.handleChange}
                 onKeyPress={this.handleKeyPress}
                 onOk={this.handleOk}
+                onOptionSelection={this.handleOptionSelection}
             />
         );
     }
 }
 
 Prompt.propTypes = {
+    isStage: PropTypes.bool.isRequired,
     label: PropTypes.string.isRequired,
     onCancel: PropTypes.func.isRequired,
     onOk: PropTypes.func.isRequired,