Merge pull request #508 from smalruby/feature/mesh-v2-configurable-domain

feat: make meshV2 domain configurable from GUI

Author: takaokouji

package-lock.json

@@ -30,6 +30,7 @@ import DragLayer from '../../containers/drag-layer.jsx';
 import ConnectionModal from '../../containers/connection-modal.jsx';
 import TelemetryModal from '../telemetry-modal/telemetry-modal.jsx';
 import BlockDisplayModal from '../../containers/block-display-modal.jsx';
+import MeshDomainModal from '../../containers/mesh-domain-modal.jsx';
 import URLLoaderModal from '../url-loader-modal/url-loader-modal.jsx';
 import KoshienTestModal from '../koshien-test-modal/koshien-test-modal.jsx';
 
@@ -98,6 +99,7 @@ const GUIComponent = props => {
         isTotallyNormal,
         loading,
         logo,
+        meshDomainModalVisible,
         renderLogin,
         onClickAbout,
         onClickAccountNav,
@@ -140,6 +142,8 @@ const GUIComponent = props => {
         // Exclude Redux-related props from being passed to DOM
         setSelectedBlocks: _setSelectedBlocks,
         openUrlLoaderModal: _openUrlLoaderModal,
+        openKoshienTestModal: _openKoshienTestModal,
+        openMeshDomainModal: _openMeshDomainModal,
         ...componentProps
     } = omit(props, 'dispatch');
     if (children) {
@@ -198,6 +202,9 @@ const GUIComponent = props => {
                         onLoadUrl={onUrlLoaderSubmit}
                     />
                 ) : null}
+                {meshDomainModalVisible ? (
+                    <MeshDomainModal />
+                ) : null}
                 {koshienTestModalVisible ? (
                     <KoshienTestModal
                         onRequestClose={closeKoshienTestModal}
@@ -458,6 +465,7 @@ GUIComponent.propTypes = {
     isTotallyNormal: PropTypes.bool,
     loading: PropTypes.bool,
     logo: PropTypes.string,
+    meshDomainModalVisible: PropTypes.bool,
     onActivateCostumesTab: PropTypes.func,
     onActivateRubyTab: PropTypes.func,
     onActivateSoundsTab: PropTypes.func,

src/components/gui/gui.jsx

@@ -257,3 +257,12 @@
 .save-status-spinner {
     flex-shrink: 0;
 }
+
+.mesh-v2-domain {
+    display: inline-block;
+    vertical-align: bottom;
+    max-width: 120px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}

src/components/menu-bar/menu-bar.css

@@ -34,7 +34,15 @@ import GoogleDriveSaverHOC from '../../containers/google-drive-saver-hoc.jsx';
 import GoogleDriveSaveDialog from '../google-drive-save-dialog/google-drive-save-dialog.jsx';
 import SettingsMenu from './settings-menu.jsx';
 
-import {openDebugModal, openKoshienTestModal, openConnectionModal} from '../../reducers/modals';
+import {
+    openDebugModal,
+    openKoshienTestModal,
+    openMeshDomainModal,
+    openConnectionModal
+} from '../../reducers/modals';
+import {
+    setDomain as setMeshV2Domain
+} from '../../reducers/mesh-v2';
 import {setConnectionModalExtensionId} from '../../reducers/connection-modal';
 import {openBlockDisplayModal} from '../../reducers/block-display';
 import {setPlayer} from '../../reducers/mode';
@@ -226,6 +234,7 @@ class MenuBar extends React.Component {
             'handleExtensionAdded',
             'handleClickKoshienEntryForm',
             'handleMeshV2MenuClick',
+            'handleMeshDomainClick',
             'handleClickLearn'
         ]);
     }
@@ -239,6 +248,13 @@ class MenuBar extends React.Component {
             this.props.vm.runtime.on('PERIPHERAL_DISCONNECTED', this.handleExtensionAdded);
             this.props.vm.runtime.on('PERIPHERAL_REQUEST_ERROR', this.handleExtensionAdded);
         }
+
+        this.syncMeshV2Domain();
+    }
+    componentDidUpdate (prevProps) {
+        if (this.props.extensionLoadCounter !== prevProps.extensionLoadCounter) {
+            this.syncMeshV2Domain();
+        }
     }
     componentWillUnmount () {
         document.removeEventListener('keydown', this.handleKeyPress);
@@ -251,6 +267,16 @@ class MenuBar extends React.Component {
             this.props.vm.runtime.off('PERIPHERAL_REQUEST_ERROR', this.handleExtensionAdded);
         }
     }
+    syncMeshV2Domain () {
+        const extension = this.props.vm && this.props.vm.runtime &&
+            this.props.vm.runtime.peripheralExtensions &&
+            this.props.vm.runtime.peripheralExtensions.meshV2;
+        if (extension && extension.domain !== this.props.meshV2Domain) {
+            if (this.props.onSetMeshV2Domain) {
+                this.props.onSetMeshV2Domain(extension.domain);
+            }
+        }
+    }
     handleExtensionAdded () {
         // Dispatch Redux action to trigger re-render
         if (this.props.onExtensionLoaded) {
@@ -259,7 +285,7 @@ class MenuBar extends React.Component {
     }
     getMeshV2Status () {
         const vm = this.props.vm;
-        
+
         if (!vm) return {loaded: false};
 
         // In Smalruby 3 / Scratch 3, extensionManager is directly on the vm instance
@@ -269,7 +295,7 @@ class MenuBar extends React.Component {
         }
 
         const isLoaded = extensionManager.isExtensionLoaded('meshV2');
-        
+
         if (!isLoaded) {
             return {loaded: false};
         }
@@ -303,6 +329,22 @@ class MenuBar extends React.Component {
         // Open connection modal
         this.props.onOpenConnectionModal('meshV2');
     }
+    handleMeshDomainClick () {
+        // Close the Mesh V2 menu
+        this.props.onRequestCloseMeshV2();
+
+        const extension = this.props.vm && this.props.vm.runtime &&
+            this.props.vm.runtime.peripheralExtensions &&
+            this.props.vm.runtime.peripheralExtensions.meshV2;
+        if (extension && (extension.connectionState === 'connected' || extension.connectionState === 'connecting')) {
+            alert(this.props.intl.formatMessage({ // eslint-disable-line no-alert
+                id: 'mesh.domainConnectedAlert',
+                default: 'Mesh V2 is connected. To change the domain, please disconnect first.'
+            }));
+            return;
+        }
+        this.props.onOpenMeshDomainModal();
+    }
     handleClickNew () {
         // if the project is dirty, and user owns the project, we will autosave.
         // but if they are not logged in and can't save, user should consider
@@ -959,9 +1001,28 @@ class MenuBar extends React.Component {
                                         place={this.props.isRtl ? 'left' : 'right'}
                                         onRequestClose={this.props.onRequestCloseMeshV2}
                                     >
-                                        <MenuItem onClick={this.handleMeshV2MenuClick}>
-                                            {meshV2Status.message}
+                                        <MenuItem onClick={this.handleMeshDomainClick}>
+                                            <FormattedMessage
+                                                defaultMessage="Domain: {domain}"
+                                                description="Label for Mesh V2 domain"
+                                                id="mesh.domain"
+                                                values={{
+                                                    domain: (
+                                                        <span className={styles.meshV2Domain}>
+                                                            {this.props.meshV2Domain || this.props.intl.formatMessage({
+                                                                id: 'mesh.domainNotSet',
+                                                                defaultMessage: 'Not set'
+                                                            })}
+                                                        </span>
+                                                    )
+                                                }}
+                                            />
                                         </MenuItem>
+                                        <MenuSection>
+                                            <MenuItem onClick={this.handleMeshV2MenuClick}>
+                                                {meshV2Status.message}
+                                            </MenuItem>
+                                        </MenuSection>
                                     </MenuBarMenu>
                                 </div>
                             );
@@ -1342,6 +1403,7 @@ MenuBar.propTypes = {
     locale: PropTypes.string.isRequired,
     loginMenuOpen: PropTypes.bool,
     logo: PropTypes.string,
+    meshV2Domain: PropTypes.string,
     meshV2MenuOpen: PropTypes.bool,
     mode1920: PropTypes.bool,
     mode1990: PropTypes.bool,
@@ -1376,6 +1438,7 @@ MenuBar.propTypes = {
     onOpenRegistration: PropTypes.func,
     onOpenBlockDisplayModal: PropTypes.func,
     onOpenConnectionModal: PropTypes.func,
+    onOpenMeshDomainModal: PropTypes.func,
     onOpenDebugModal: PropTypes.func,
     onOpenKoshienTestModal: PropTypes.func,
     onProjectTelemetryEvent: PropTypes.func,
@@ -1399,6 +1462,7 @@ MenuBar.propTypes = {
     onStartSavingToGoogleDrive: PropTypes.func,
     onSaveDirectlyToGoogleDrive: PropTypes.func,
     onSetAiSaveStatus: PropTypes.func,
+    onSetMeshV2Domain: PropTypes.func,
     onClearAiSaveStatus: PropTypes.func,
     onStartSelectingUrlLoad: PropTypes.func,
     projectFilename: PropTypes.string,
@@ -1431,6 +1495,7 @@ const mapStateToProps = (state, ownProps) => {
         fileMenuOpen: fileMenuOpen(state),
         editMenuOpen: editMenuOpen(state),
         koshienMenuOpen: koshienMenuOpen(state),
+        meshV2Domain: state.scratchGui.meshV2 ? state.scratchGui.meshV2.domain : null,
         meshV2MenuOpen: meshV2MenuOpen(state),
         extensionLoadCounter: state.scratchGui.koshienFile.extensionLoadCounter,
         aiSaveStatus: state.scratchGui.koshienFile.aiSaveStatus,
@@ -1465,6 +1530,7 @@ const mapDispatchToProps = dispatch => ({
         dispatch(setConnectionModalExtensionId(id));
         dispatch(openConnectionModal());
     },
+    onOpenMeshDomainModal: () => dispatch(openMeshDomainModal()),
     onOpenBlockDisplayModal: () => dispatch(openBlockDisplayModal()),
     onOpenKoshienTestModal: () => dispatch(openKoshienTestModal()),
     onClickAccount: () => dispatch(openAccountMenu()),
@@ -1493,6 +1559,7 @@ const mapDispatchToProps = dispatch => ({
     onClickSave: () => dispatch(manualUpdateProject()),
     onClickSaveAsCopy: () => dispatch(saveProjectAsCopy()),
     onExtensionLoaded: () => dispatch(incrementExtensionLoad()),
+    onSetMeshV2Domain: domain => dispatch(setMeshV2Domain(domain)),
     onSetAiSaveStatus: status => dispatch(setAiSaveStatus(status)),
     onClearAiSaveStatus: () => dispatch(clearAiSaveStatus()),
     onSeeCommunity: () => dispatch(setPlayer(true)),

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

@@ -0,0 +1,148 @@
+@import "../../css/colors.css";
+@import "../../css/units.css";
+
+.modal-content {
+    width: 500px;
+    height: auto;
+    line-height: 1.75;
+}
+
+.header {
+    background-color: $motion-primary;
+}
+
+.body {
+    background: $ui-white;
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.input-section {
+    display: flex;
+    flex-direction: column;
+}
+
+.domain-input {
+    width: 100%;
+    padding: 0.75rem;
+    border: 2px solid $ui-black-transparent;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    font-family: inherit;
+    outline: none;
+    box-sizing: border-box;
+}
+
+.domain-input:focus {
+    border-color: $motion-primary;
+    box-shadow: 0 0 0 1px $motion-primary;
+}
+
+.domain-input.input-error {
+    border-color: $error-primary;
+    box-shadow: 0 0 0 1px $error-primary;
+}
+
+.domain-input::placeholder {
+    color: $text-primary-transparent;
+}
+
+.error-message {
+    margin-top: 0.5rem;
+    font-size: 0.75rem;
+    color: $error-primary;
+    line-height: 1.4;
+}
+
+.description-section {
+    display: flex;
+    flex-direction: column;
+}
+
+.description-text {
+    font-size: 0.75rem;
+    color: $text-primary;
+    line-height: 1.5;
+}
+
+.example-section {
+    display: flex;
+    flex-direction: column;
+    margin-top: -0.5rem;
+}
+
+.example-title {
+    font-size: 0.75rem;
+    color: $text-primary;
+    font-weight: bold;
+    margin-bottom: 0.25rem;
+}
+
+.example-text {
+    font-size: 0.75rem;
+    color: $text-primary-transparent;
+    font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
+    padding-left: 1rem;
+    position: relative;
+}
+
+.example-text::before {
+    content: "•";
+    position: absolute;
+    left: 0;
+    color: $text-primary-transparent;
+}
+
+.button-section {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.75rem;
+    margin-top: 0.5rem;
+}
+
+.cancel-button,
+.save-button {
+    padding: 0.5rem 1rem;
+    border: none;
+    border-radius: 0.25rem;
+    font-size: 0.875rem;
+    font-weight: bold;
+    cursor: pointer;
+    transition: background-color 0.1s ease;
+    min-width: 80px;
+}
+
+.cancel-button {
+    background: $ui-white;
+    color: $text-primary;
+    border: 1px solid $ui-black-transparent;
+}
+
+.cancel-button:hover {
+    background: $ui-secondary;
+}
+
+.cancel-button:active {
+    background: $ui-black-transparent;
+}
+
+.save-button {
+    background: $motion-primary;
+    color: $ui-white;
+}
+
+.save-button:hover {
+    background: $motion-tertiary;
+}
+
+.save-button:active {
+    background: $motion-tertiary;
+}
+
+.save-button.disabled {
+    background: $ui-black-transparent;
+    color: $text-primary-transparent;
+    cursor: not-allowed;
+}