Rupato/bot 1987 update blockly to the latest version

package.json

@@ -123,6 +123,7 @@
         "postcss": "^8.4.38",
         "prettier": "^3.1.0",
         "raw-loader": "^4.0.2",
+        "rimraf": "^6.0.1",
         "sass": "^1.77.6",
         "sass-loader": "^14.2.1",
         "sass-resources-loader": "^2.2.5",
@@ -140,4 +141,4 @@
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^5.0.4"
     }
-}
+}

src/components/blockly-loading/blockly-loading.scss

@@ -4,6 +4,8 @@
         z-index: 99999;
         top: 0;
         bottom: 0;
+        left: 0;
+        right: 0;
         background-color: var(--overlay-outside-dialog);
         pointer-events: none;
     }

src/components/layout/header/Notifications/index.tsx

@@ -1,14 +1,14 @@
 import { useState } from 'react';
-import clsx from 'clsx';
 import { LegacyNotificationIcon } from '@deriv/quill-icons';
 import { useTranslations } from '@deriv-com/translations';
-import { Notifications as UINotifications, Tooltip, useDevice } from '@deriv-com/ui';
+import { Tooltip } from '@deriv-com/ui';
 import './notifications.scss';
 
 export const Notifications = () => {
     const [isOpen, setIsOpen] = useState(false);
     const { localize } = useTranslations();
-    const { isMobile } = useDevice();
+    // TODO: need to add this back after fixing notifications component
+    // const { isMobile } = useDevice();
     return (
         <div className='notifications__wrapper'>
             <Tooltip
@@ -19,7 +19,7 @@ export const Notifications = () => {
             >
                 <LegacyNotificationIcon iconSize='sm' />
             </Tooltip>
-            <UINotifications
+            {/* <UINotifications
                 className={clsx('', {
                     'notifications__wrapper--mobile': isMobile,
                     'notifications__wrapper--desktop': !isMobile,
@@ -34,7 +34,7 @@ export const Notifications = () => {
                 isOpen={isOpen}
                 notifications={[]}
                 setIsOpen={setIsOpen}
-            />
+            /> */}
         </div>
     );
 };

src/external/bot-skeleton/scratch/backward-compatibility.js

@@ -284,11 +284,9 @@ export default class BlockConversion {
 
     // eslint-disable-next-line class-methods-use-this
     createWorkspace() {
-        const options = new window.window.window.Blockly.Options({
-            media: `${window.__webpack_public_path__}assets/media/`,
-        });
+        const options = new Blockly.Options({ media: `assets/images` });
         const el_injection_div = new DocumentFragment();
-        const workspace = window.window.window.Blockly.createVirtualWorkspace_(el_injection_div, options, false, false);
+        const workspace = Blockly.createVirtualWorkspace_(el_injection_div, options, false, false);
 
         return workspace;
     }
@@ -358,8 +356,8 @@ export default class BlockConversion {
         // For old "market" blocks, move everything in "Trade options" except "DURATION"
         // to "Run once at start". Legacy "market" blocks had no such thing as "Run once at start"
         // not moving everything would kill Martingale strategies as they'd be reinitialised each run.
-        const trade_definition_block = this.workspace.getTradeDefinitionBlock();
-        const has_initialization_block = trade_definition_block.getBlocksInStatement('INITIALIZATION').length > 0;
+        const trade_definition_block = this.workspace?.getTradeDefinitionBlock();
+        const has_initialization_block = trade_definition_block?.getBlocksInStatement('INITIALIZATION').length > 0;
         if (trade_definition_block) {
             trade_definition_block.getBlocksInStatement('SUBMARKET').forEach(block => {
                 if (
@@ -384,27 +382,22 @@ export default class BlockConversion {
             current_name = variable_name + counter;
         }
 
-        const ws_variable = window.window.window.Blockly.Variables.getOrCreateVariablePackage(
-            this.workspace,
-            '',
-            current_name,
-            ''
-        );
+        const ws_variable = Blockly.Variables.getOrCreateVariablePackage(this.workspace, '', current_name, '');
         this.workspace_variables[ws_variable.id_] = current_name; // eslint-disable-line
 
         return ws_variable;
     }
 
     convertStrategy(strategy_node, showIncompatibleStrategyDialog) {
         // Disable events (globally) to suppress block onchange listeners from firing.
-        window.window.window.Blockly.Events.disable();
+        Blockly.Events.disable();
 
         // We only want to update renamed fields for modern strategies.
         const xml = this.updateRenamedFields(strategy_node);
 
         // Don't convert already compatible strategies.
         if (strategy_node.hasAttribute('is_dbot') && strategy_node.getAttribute('is_dbot') === 'true') {
-            window.window.window.Blockly.Events.enable();
+            Blockly.Events.enable();
             return xml;
         }
 
@@ -418,8 +411,8 @@ export default class BlockConversion {
             if (showIncompatibleStrategyDialog) {
                 showIncompatibleStrategyDialog();
             }
-            window.window.window.Blockly.Events.enable();
-            return window.window.window.Blockly.utils.xml.textToDom('<xml />');
+            Blockly.Events.enable();
+            return Blockly.utils.xml.textToDom('<xml />');
         }
 
         const variable_nodes = [];
@@ -449,7 +442,7 @@ export default class BlockConversion {
                 const variable_name = el_variable.textContent;
 
                 if (!this.workspace_variables[variable_id]) {
-                    const variable = window.window.window.Blockly.Variables.getOrCreateVariablePackage(
+                    const variable = Blockly.Variables.getOrCreateVariablePackage(
                         this.workspace,
                         variable_id,
                         variable_name,
@@ -512,12 +505,12 @@ export default class BlockConversion {
 
         this.workspace.getAllBlocks(true).forEach(block => {
             block.initSvg();
-            // block.render();
+            block.renderEfficiently();
         });
 
         this.workspace.cleanUp();
 
-        const converted_xml = window.window.window.Blockly.Xml.workspaceToDom(this.workspace);
+        const converted_xml = Blockly.Xml.workspaceToDom(this.workspace);
 
         if (strategy_node.hasAttribute('collection') && strategy_node.getAttribute('collection') === 'true') {
             converted_xml.setAttribute('collection', 'true');
@@ -527,7 +520,7 @@ export default class BlockConversion {
 
         this.workspace = null;
 
-        window.window.window.Blockly.Events.enable();
+        Blockly.Events.enable();
 
         return converted_xml;
     }
@@ -580,7 +573,7 @@ export default class BlockConversion {
                 });
             }
         } else {
-            const is_legal_block = Object.keys(window.window.window.Blockly.Blocks).includes(block_type);
+            const is_legal_block = Object.keys(Blockly.Blocks).includes(block_type);
 
             if (is_legal_block) {
                 block = this.workspace.newBlock(block_type);
@@ -621,10 +614,10 @@ export default class BlockConversion {
                     const field = block.getField(field_name);
 
                     if (field) {
-                        if (field instanceof window.window.window.Blockly.FieldVariable) {
+                        if (field instanceof Blockly.FieldVariable) {
                             const variable_id = el_block_child.getAttribute('id');
                             const variable_name = el_block_child.innerText.trim();
-                            const variable = window.window.window.Blockly.Variables.getOrCreateVariablePackage(
+                            const variable = Blockly.Variables.getOrCreateVariablePackage(
                                 this.workspace,
                                 variable_id,
                                 variable_name,
@@ -661,20 +654,6 @@ export default class BlockConversion {
                     }
                     break;
                 }
-                case 'comment': {
-                    const is_minimised = el_block_child.getAttribute('pinned') !== 'true';
-                    const comment_text = el_block_child.innerText;
-
-                    block.comment = new window.window.window.Blockly.WorkspaceComment(
-                        this.workspace,
-                        comment_text,
-                        0,
-                        0,
-                        is_minimised
-                    );
-                    block.comment.iconXY_ = { x: 0, y: 0 };
-                    break;
-                }
                 default:
                     break;
             }

src/external/bot-skeleton/scratch/blockly.js

@@ -1,24 +1,47 @@
 import * as BlocklyJavaScript from 'blockly/javascript';
-import goog from '@/utils/tmp/goog-helper';
-import { setColors } from './hooks/colours';
+import { localize } from '@/utils/tmp/dummy';
+import { setColors } from './hooks/colours.js';
+import goog from './goog.js';
 
 window.goog = goog;
 
+const modifyBlocklyWorkSpaceContextMenu = () => {
+    const exclude_item = ['blockInline'];
+    exclude_item.forEach(item_id => {
+        const option = Blockly.ContextMenuRegistry.registry.getItem(item_id);
+        option.preconditionFn = () => 'hidden';
+    });
+
+    const items_to_localize = {
+        undoWorkspace: localize('Undo'),
+        redoWorkspace: localize('Redo'),
+        cleanWorkspace: localize('Clean up Blocks'),
+        collapseWorkspace: localize('Collapse Blocks'),
+        expandWorkspace: localize('Expand Blocks'),
+    };
+
+    Object.keys(items_to_localize).forEach(item_id => {
+        const option = Blockly.ContextMenuRegistry.registry.getItem(item_id);
+        option.displayText = localize(items_to_localize[item_id]);
+    });
+};
+
 export const loadBlockly = async isDarkMode => {
     const BlocklyModule = await import('blockly');
     window.Blockly = BlocklyModule.default;
     window.Blockly.Colours = {};
-    const BlocklyGenerator = new window.Blockly.Generator('code');
+    const BlocklyGenerator = new Blockly.Generator('code');
     const BlocklyJavaScriptGenerator = {
         ...BlocklyJavaScript,
         ...BlocklyGenerator,
     };
     window.Blockly.JavaScript = BlocklyJavaScriptGenerator;
-    window.Blockly.Themes.zelos_renderer = window.Blockly.Theme.defineTheme('zelos_renderer', {
-        base: window.Blockly.Themes.Zelos,
+    window.Blockly.Themes.zelos_renderer = Blockly.Theme.defineTheme('zelos_renderer', {
+        base: Blockly.Themes.Zelos,
         componentStyles: {},
     });
+    modifyBlocklyWorkSpaceContextMenu();
     setColors(isDarkMode);
+    await import('./hooks/index.js');
     await import('./blocks');
-    await import('./hooks');
 };