From 60720dbb72b856c9ec57e8f424ccd1c011b6266b Mon Sep 17 00:00:00 2001
From: rupato-deriv <rupato@deriv.com>
Date: Mon, 29 Jul 2024 11:36:44 +0800
Subject: [PATCH 01/23] fix: refactored bot functions

---
 .../src/scratch/hooks/workspace.js            |  85 ++++
 .../bot-skeleton/src/scratch/utils/index.js   |   6 +
 .../components/load-modal/local-footer.tsx    |   6 +-
 .../load-modal/recent-workspace.tsx           |   6 +-
 .../bot-web-ui/src/constants/load-modal.ts    |   6 -
 .../bot-web-ui/src/stores/dashboard-store.ts  |   5 +-
 .../bot-web-ui/src/stores/load-modal-store.ts | 478 +++++++++---------
 7 files changed, 353 insertions(+), 239 deletions(-)

diff --git a/packages/bot-skeleton/src/scratch/hooks/workspace.js b/packages/bot-skeleton/src/scratch/hooks/workspace.js
index 9ce860d3a2e1..b9712146ab32 100644
--- a/packages/bot-skeleton/src/scratch/hooks/workspace.js
+++ b/packages/bot-skeleton/src/scratch/hooks/workspace.js
@@ -136,3 +136,88 @@ Blockly.createVirtualWorkspace_ = function (fragment, options, blockDragSurface,
 
     return mainWorkspace;
 };
+
+// Blockly.Xml.domToWorkspace = function (xml, workspace) {
+//     if (xml instanceof Blockly.Workspace) {
+//         var swap = xml;
+//         xml = workspace;
+//         workspace = swap;
+//         console.warn('Deprecated call to Blockly.Xml.domToWorkspace, ' +
+//             'swap the arguments.');
+//     }
+//     var width;  // Not used in LTR.
+//     if (workspace.RTL) {
+//         width = workspace.getWidth();
+//     }
+//     var newBlockIds = [];  // A list of block IDs added by this call.
+//     //Blockly.Field.startCache();
+//     // Safari 7.1.3 is known to provide node lists with extra references to
+//     // children beyond the lists' length.  Trust the length, do not use the
+//     // looping pattern of checking the index for an object.
+//     var childCount = xml.childNodes.length;
+//     var existingGroup = Blockly.Events.getGroup();
+//     if (!existingGroup) {
+//         Blockly.Events.setGroup(true);
+//     }
+
+//     // Disable workspace resizes as an optimization.
+//     if (workspace.setResizesEnabled) {
+//         workspace.setResizesEnabled(false);
+//     }
+//     var variablesFirst = true;
+//     try {
+//         for (var i = 0; i < childCount; i++) {
+//             var xmlChild = xml.childNodes[i];
+//             var name = xmlChild.nodeName.toLowerCase();
+//             if (name == 'block' ||
+//                 (name == 'shadow' && !Blockly.Events.recordUndo)) {
+//                 // Allow top-level shadow blocks if recordUndo is disabled since
+//                 // that means an undo is in progress.  Such a block is expected
+//                 // to be moved to a nested destination in the next operation.
+//                 var block = Blockly.Xml.domToBlock(xmlChild, workspace);
+//                 newBlockIds.push(block.id);
+//                 var blockX = xmlChild.hasAttribute('x') ?
+//                     parseInt(xmlChild.getAttribute('x'), 10) : 10;
+//                 var blockY = xmlChild.hasAttribute('y') ?
+//                     parseInt(xmlChild.getAttribute('y'), 10) : 10;
+//                 if (!isNaN(blockX) && !isNaN(blockY)) {
+//                     block.moveBy(workspace.RTL ? width - blockX : blockX, blockY);
+//                     if (block.comment && typeof block.comment === 'object') {
+//                         var commentXY = block.comment.getXY();
+//                         var commentWidth = block.comment.getBubbleSize().width;
+//                         block.comment.moveTo(block.workspace.RTL ? width - commentXY.x - commentWidth : commentXY.x, commentXY.y);
+//                     }
+//                 }
+//                 variablesFirst = false;
+//             } else if (name == 'shadow') {
+//                 goog.asserts.fail('Shadow block cannot be a top-level block.');
+//                 variablesFirst = false;
+//             } else if (name == 'comment') {
+//                 if (workspace.rendered) {
+//                     Blockly.WorkspaceCommentSvg.fromXml(xmlChild, workspace, width);
+//                 } else {
+//                     Blockly.WorkspaceComment.fromXml(xmlChild, workspace);
+//                 }
+//             } else if (name == 'variables') {
+//                 if (variablesFirst) {
+//                     Blockly.Xml.domToVariables(xmlChild, workspace);
+//                 } else {
+//                     throw Error('\'variables\' tag must exist once before block and ' +
+//                         'shadow tag elements in the workspace XML, but it was found in ' +
+//                         'another location.');
+//                 }
+//                 variablesFirst = false;
+//             }
+//         }
+//     } finally {
+//         if (!existingGroup) {
+//             Blockly.Events.setGroup(false);
+//         }
+//        // Blockly.Field.stopCache();
+//     }
+//     // Re-enable workspace resizing.
+//     if (workspace.setResizesEnabled) {
+//         //workspace.setResizesEnabled(true);
+//     }
+//     return newBlockIds;
+// };
diff --git a/packages/bot-skeleton/src/scratch/utils/index.js b/packages/bot-skeleton/src/scratch/utils/index.js
index 01e2e7710064..12634c77d27e 100644
--- a/packages/bot-skeleton/src/scratch/utils/index.js
+++ b/packages/bot-skeleton/src/scratch/utils/index.js
@@ -179,6 +179,12 @@ export const load = async ({
             workspace,
             Array.from(blockly_xml).map(xml_block => xml_block.getAttribute('type'))
         );
+        window.Blockly.readFileXml = {
+            file_name,
+            strategy_id,
+            from,
+            xml: window.Blockly.Xml.domToText(xml),
+        };
 
         if (is_collection) {
             loadBlocks(xml, drop_event, event_group, workspace);
diff --git a/packages/bot-web-ui/src/components/load-modal/local-footer.tsx b/packages/bot-web-ui/src/components/load-modal/local-footer.tsx
index f022fd2ddf6e..b596ad181690 100644
--- a/packages/bot-web-ui/src/components/load-modal/local-footer.tsx
+++ b/packages/bot-web-ui/src/components/load-modal/local-footer.tsx
@@ -8,7 +8,8 @@ import { useDBotStore } from 'Stores/useDBotStore';
 const LocalFooter = observer(() => {
     const { ui } = useStore();
     const { load_modal, dashboard } = useDBotStore();
-    const { is_open_button_loading, loadFileFromLocal, setLoadedLocalFile, toggleLoadModal } = load_modal;
+    const { is_open_button_loading, loadStrategyOnBotBuilder, loadFileFromLocal, setLoadedLocalFile, toggleLoadModal } =
+        load_modal;
     const { setOpenSettings, setPreviewOnPopup } = dashboard;
 
     const { is_desktop } = ui;
@@ -22,7 +23,8 @@ const LocalFooter = observer(() => {
             <Button
                 text={localize('Open')}
                 onClick={() => {
-                    loadFileFromLocal();
+                    loadStrategyOnBotBuilder();
+                    //loadFileFromLocal();
                     toggleLoadModal();
                     setPreviewOnPopup(false);
                     setOpenSettings(NOTIFICATION_TYPE.BOT_IMPORT);
diff --git a/packages/bot-web-ui/src/components/load-modal/recent-workspace.tsx b/packages/bot-web-ui/src/components/load-modal/recent-workspace.tsx
index 1289199f443c..faa5d03dcc27 100644
--- a/packages/bot-web-ui/src/components/load-modal/recent-workspace.tsx
+++ b/packages/bot-web-ui/src/components/load-modal/recent-workspace.tsx
@@ -12,7 +12,7 @@ type TRecentWorkspaceProps = {
 
 const RecentWorkspace = observer(({ workspace }: TRecentWorkspaceProps) => {
     const { load_modal } = useDBotStore();
-    const { getRecentFileIcon, getSaveType, previewRecentStrategy, selected_strategy_id } = load_modal;
+    const { getRecentFileIcon, getSaveType, loadStrategyModalRecentPreview, selected_strategy_id } = load_modal;
 
     return (
         <div
@@ -20,7 +20,9 @@ const RecentWorkspace = observer(({ workspace }: TRecentWorkspaceProps) => {
                 'load-strategy__recent-item--selected': selected_strategy_id === workspace.id,
             })}
             key={workspace.id}
-            onClick={selected_strategy_id === workspace.id ? undefined : () => previewRecentStrategy(workspace.id)}
+            onClick={
+                selected_strategy_id === workspace.id ? undefined : () => loadStrategyModalRecentPreview(workspace.id)
+            }
             data-testid='dt_recent_workspace_item'
         >
             <div className='load-strategy__recent-item-text'>
diff --git a/packages/bot-web-ui/src/constants/load-modal.ts b/packages/bot-web-ui/src/constants/load-modal.ts
index f0ca5ca37efd..2df51945123b 100644
--- a/packages/bot-web-ui/src/constants/load-modal.ts
+++ b/packages/bot-web-ui/src/constants/load-modal.ts
@@ -3,9 +3,3 @@ export const tabs_title = Object.freeze({
     TAB_GOOGLE: 'google_tab',
     TAB_RECENT: 'recent_tab',
 });
-
-export const clearInjectionDiv = (el_ref?: HTMLElement) => {
-    if (el_ref && el_ref.getElementsByClassName('injectionDiv').length > 1) {
-        el_ref.removeChild(el_ref.getElementsByClassName('injectionDiv')[0]);
-    }
-};
diff --git a/packages/bot-web-ui/src/stores/dashboard-store.ts b/packages/bot-web-ui/src/stores/dashboard-store.ts
index c0c65c21ffa5..62fcd0279530 100644
--- a/packages/bot-web-ui/src/stores/dashboard-store.ts
+++ b/packages/bot-web-ui/src/stores/dashboard-store.ts
@@ -4,7 +4,6 @@ import { setColors } from '@deriv/bot-skeleton';
 import { TStores } from '@deriv/stores/types';
 import { botNotification } from 'Components/bot-notification/bot-notification';
 import { notification_message, NOTIFICATION_TYPE } from 'Components/bot-notification/bot-notification-utils';
-import { clearInjectionDiv } from 'Constants/load-modal';
 import * as strategy_description from '../constants/quick-strategies';
 import { TDescriptionItem } from '../pages/bot-builder/quick-strategy/types';
 import {
@@ -195,7 +194,7 @@ export default class DashboardStore implements IDashboardStore {
                     refreshBotBuilderTheme();
                 } else {
                     refreshBotBuilderTheme();
-                    previewRecentStrategy(current_workspace_id);
+                    //previewRecentStrategy(current_workspace_id);
                 }
             }
         );
@@ -360,9 +359,7 @@ export default class DashboardStore implements IDashboardStore {
         if (!el_ref) {
             // eslint-disable-next-line no-console
             console.warn('Could not find preview workspace element.');
-            return;
         }
-        clearInjectionDiv(el_ref);
     };
 
     onCloseDialog = (): void => {
diff --git a/packages/bot-web-ui/src/stores/load-modal-store.ts b/packages/bot-web-ui/src/stores/load-modal-store.ts
index 1bea96110b4d..a69704f608a8 100644
--- a/packages/bot-web-ui/src/stores/load-modal-store.ts
+++ b/packages/bot-web-ui/src/stores/load-modal-store.ts
@@ -1,11 +1,19 @@
 import React from 'react';
 import { action, computed, makeObservable, observable, reaction } from 'mobx';
 import { v4 as uuidv4 } from 'uuid';
-import { config, getSavedWorkspaces, load, removeExistingWorkspace, save_types, setColors } from '@deriv/bot-skeleton';
+import {
+    config,
+    getSavedWorkspaces,
+    load,
+    removeExistingWorkspace,
+    save_types,
+    saveWorkspaceToRecent,
+    setColors,
+} from '@deriv/bot-skeleton';
 import { isDbotRTL } from '@deriv/bot-skeleton/src/utils/workspace';
 import { TStores } from '@deriv/stores/types';
 import { localize } from '@deriv/translations';
-import { clearInjectionDiv, tabs_title } from 'Constants/load-modal';
+import { tabs_title } from 'Constants/load-modal';
 import { TStrategy } from 'Types';
 import { rudderStackSendSwitchLoadStrategyTabEvent } from '../analytics/rudderstack-bot-builder';
 import {
@@ -15,6 +23,7 @@ import {
 } from '../analytics/rudderstack-common-events';
 import { getStrategyType, LOAD_MODAL_TABS } from '../analytics/utils';
 import RootStore from './root-store';
+import DBotStore from '@deriv/bot-skeleton/src/scratch/dbot-store';
 
 interface ILoadModalStore {
     active_index: number;
@@ -104,7 +113,6 @@ export default class LoadModalStore implements ILoadModalStore {
             onEntered: action.bound,
             onLoadModalClose: action.bound,
             onZoomInOutClick: action.bound,
-            previewRecentStrategy: action.bound,
             setActiveTabIndex: action.bound,
             setLoadedLocalFile: action.bound,
             setRecentStrategies: action.bound,
@@ -117,6 +125,8 @@ export default class LoadModalStore implements ILoadModalStore {
             setDashboardStrategies: action.bound,
             updateListStrategies: action.bound,
             onToggleDeleteDialog: action,
+            loadStrategyModalRecentPreview: action,
+            loadStrategyOnBotBuilder: action,
         });
 
         this.root_store = root_store;
@@ -130,7 +140,11 @@ export default class LoadModalStore implements ILoadModalStore {
             () => this.is_load_modal_open,
             async is_load_modal_open => {
                 if (is_load_modal_open) {
-                    this.setRecentStrategies((await getSavedWorkspaces()) || []);
+                    const saved_workspaces = await getSavedWorkspaces();
+                    this.setRecentStrategies(saved_workspaces || []);
+                    if (!this.selected_strategy_id) {
+                        this.setSelectedStrategyId(saved_workspaces[0]?.id);
+                    }
                 } else {
                     this.onLoadModalClose();
                 }
@@ -200,35 +214,134 @@ export default class LoadModalStore implements ILoadModalStore {
         this.dashboard_strategies = recent_strategies;
     };
 
-    handleFileChange = (
-        event: React.MouseEvent | React.FormEvent<HTMLFormElement> | DragEvent,
-        is_body = true
-    ): boolean => {
-        this.imported_strategy_type = 'pending';
-        this.upload_id = uuidv4();
-        let files;
-        if (event.type === 'drop') {
-            event.stopPropagation();
-            event.preventDefault();
+    onDriveConnect = (): void => {
+        const { google_drive } = this.root_store;
 
-            ({ files } = event.dataTransfer);
+        if (google_drive.is_authorised) {
+            google_drive.signOut();
         } else {
-            ({ files } = event.target);
+            google_drive.signIn();
         }
+    };
 
-        const [file] = files;
+    onDriveOpen = async () => {
+        const { google_drive } = this.root_store;
+        if (google_drive) {
+            google_drive.upload_id = uuidv4();
+        }
+        rudderStackSendUploadStrategyStartEvent({ upload_provider: 'google_drive', upload_id: google_drive.upload_id });
+        const { loadFile } = this.root_store.google_drive;
+        const { xml_doc, file_name } = await loadFile();
+        await load({
+            block_string: xml_doc,
+            file_name,
+            workspace: window.Blockly.derivWorkspace,
+            from: save_types.GOOGLE_DRIVE,
+            drop_event: null,
+            strategy_id: null,
+            showIncompatibleStrategyDialog: null,
+        });
 
-        if (!is_body) {
-            if (file.name.includes('xml')) {
-                this.setLoadedLocalFile(file);
-                this.getDashboardStrategies();
-            } else {
-                return false;
-            }
+        const { active_tab } = this.root_store.dashboard;
+        if (active_tab === 1) this.toggleLoadModal();
+
+        this.root_store.dashboard.is_dialog_open = false;
+    };
+
+    onEntered = (): void => {
+        this.loadStrategyModalRecentPreview(this.selected_strategy_id);
+    };
+
+    onLoadModalClose = (): void => {
+        if (this.local_workspace) {
+            this.local_workspace = null;
         }
-        this.readFile(!is_body, event, file);
-        event.target.value = '';
-        return true;
+        this.setActiveTabIndex(0, true); // Reset to first tab.
+        this.setLoadedLocalFile(null);
+    };
+
+    onZoomInOutClick = (is_zoom_in: string): void => {
+        if (this.preview_workspace) {
+            this.preview_workspace.zoomCenter(is_zoom_in ? 1 : -1);
+        }
+    };
+
+    setActiveTabIndex = (index: number, is_default: boolean): void => {
+        this.active_index = index;
+        if (!is_default) {
+            const { ui } = this.core;
+            const { is_mobile } = ui;
+            rudderStackSendSwitchLoadStrategyTabEvent({
+                load_strategy_tab: LOAD_MODAL_TABS[index + (is_mobile ? 1 : 0)],
+            });
+        }
+    };
+
+    setLoadedLocalFile = (loaded_local_file: File | null): void => {
+        this.loaded_local_file = loaded_local_file;
+    };
+
+    setRecentStrategies = (recent_strategies: TStrategy[]): void => {
+        this.recent_strategies = recent_strategies;
+    };
+
+    refreshStrategies = (): void => {
+        this.setRecentStrategies(this.recent_strategies);
+    };
+
+    setSelectedStrategyId = (selected_strategy_id: string): void => {
+        this.selected_strategy_id = selected_strategy_id;
+    };
+
+    toggleExplanationExpand = (): void => {
+        this.is_explanation_expand = !this.is_explanation_expand;
+    };
+
+    toggleLoadModal = (): void => {
+        this.is_load_modal_open = !this.is_load_modal_open;
+        this.recent_workspace?.dispose();
+        this.recent_workspace = null;
+        this.setLoadedLocalFile(null);
+    };
+
+    toggleTourLoadModal = (toggle = !this.is_load_modal_open) => {
+        this.is_load_modal_open = toggle;
+    };
+
+    updateListStrategies = (workspaces: Array<TStrategy>): void => {
+        if (workspaces) {
+            (this.dashboard_strategies as Array<TStrategy>) = workspaces;
+        }
+    };
+
+    getRecentFileIcon = (save_type: { [key: string]: string } | string): string => {
+        switch (save_type) {
+            case save_types.UNSAVED:
+                return 'IcReports';
+            case save_types.LOCAL:
+                return 'IcMyComputer';
+            case save_types.GOOGLE_DRIVE:
+                return 'IcGoogleDrive';
+            default:
+                return 'IcReports';
+        }
+    };
+
+    getSaveType = (save_type: { [key: string]: string } | string): string => {
+        switch (save_type) {
+            case save_types.UNSAVED:
+                return localize('Unsaved');
+            case save_types.LOCAL:
+                return localize('Local');
+            case save_types.GOOGLE_DRIVE:
+                return localize('Google Drive');
+            default:
+                return localize('Unsaved');
+        }
+    };
+
+    onToggleDeleteDialog = (is_delete_modal_open: boolean): void => {
+        this.is_delete_modal_open = is_delete_modal_open;
     };
 
     resetBotBuilderStrategy = () => {
@@ -311,7 +424,7 @@ export default class LoadModalStore implements ILoadModalStore {
 
     onActiveIndexChange = (): void => {
         if (this.tab_name === tabs_title.TAB_RECENT) {
-            this.previewRecentStrategy(this.selected_strategy_id);
+            this.loadStrategyModalRecentPreview(this.selected_strategy_id);
         } else if (this.recent_workspace) {
             setTimeout(() => {
                 // Dispose of recent workspace when switching away from Recent tab.
@@ -346,192 +459,42 @@ export default class LoadModalStore implements ILoadModalStore {
         }
     };
 
-    onDriveConnect = (): void => {
-        const { google_drive } = this.root_store;
-
-        if (google_drive.is_authorised) {
-            google_drive.signOut();
+    handleFileChange = (
+        event: React.MouseEvent | React.FormEvent<HTMLFormElement> | DragEvent,
+        is_body = true
+    ): boolean => {
+        this.imported_strategy_type = 'pending';
+        this.upload_id = uuidv4();
+        let files;
+        if (event.type === 'drop') {
+            event.stopPropagation();
+            event.preventDefault();
+            ({ files } = event.dataTransfer as DragEvent);
         } else {
-            google_drive.signIn();
-        }
-    };
-
-    onDriveOpen = async () => {
-        const { google_drive } = this.root_store;
-        if (google_drive) {
-            google_drive.upload_id = uuidv4();
-        }
-        rudderStackSendUploadStrategyStartEvent({ upload_provider: 'google_drive', upload_id: google_drive.upload_id });
-        const { loadFile } = this.root_store.google_drive;
-        const { xml_doc, file_name } = await loadFile();
-        await load({
-            block_string: xml_doc,
-            file_name,
-            workspace: window.Blockly.derivWorkspace,
-            from: save_types.GOOGLE_DRIVE,
-            drop_event: null,
-            strategy_id: null,
-            showIncompatibleStrategyDialog: null,
-        });
-
-        const { active_tab } = this.root_store.dashboard;
-        if (active_tab === 1) this.toggleLoadModal();
-
-        this.root_store.dashboard.is_dialog_open = false;
-    };
-
-    onEntered = (): void => {
-        this.previewRecentStrategy(this.selected_strategy_id);
-    };
-
-    onLoadModalClose = (): void => {
-        if (this.recent_workspace) {
-            this.recent_workspace = null;
-        }
-        if (this.local_workspace) {
-            this.local_workspace = null;
-        }
-
-        this.setActiveTabIndex(0, true); // Reset to first tab.
-        this.setLoadedLocalFile(null);
-    };
-
-    onZoomInOutClick = (is_zoom_in: string): void => {
-        if (this.preview_workspace) {
-            this.preview_workspace.zoomCenter(is_zoom_in ? 1 : -1);
-        }
-    };
-
-    previewRecentStrategy = (workspace_id: string): void => {
-        if (!workspace_id) this.setSelectedStrategyId(this.current_workspace_id);
-        else this.setSelectedStrategyId(workspace_id);
-        if (!this.selected_strategy) {
-            return;
-        }
-        const {
-            dashboard: { active_tab },
-        } = this.root_store;
-        //removed the dispose here so on switch of tab it does not
-        //throw xml error
-        if (active_tab === 1 && !this.is_load_modal_open) {
-            this.recent_workspace = null;
-            this.setLoadedLocalFile(null);
-        }
-
-        const dark_mode = document.body.classList.contains('theme--dark');
-        setColors(dark_mode);
-
-        //to load the bot on first load
-        const ref = document.getElementById('load-strategy__blockly-container');
-        if (!ref) {
-            // eslint-disable-next-line no-console
-            console.warn('Could not find preview workspace element.');
-            return;
-        }
-        if (this.tab_name !== tabs_title.TAB_LOCAL && this.recent_workspace) {
-            clearInjectionDiv(ref);
-            this.recent_workspace.dispose();
-            this.recent_workspace = null;
-        }
-        if (!this.recent_workspace?.rendered) {
-            this.recent_workspace = window.Blockly.inject(ref, {
-                media: `${__webpack_public_path__}media/`,
-                zoom: {
-                    wheel: true,
-                    startScale: config.workspaces.previewWorkspaceStartScale,
-                },
-                readOnly: true,
-                scrollbars: true,
-                renderer: 'zelos',
-                theme: window?.Blockly?.Themes?.zelos_renderer,
-            });
-        }
-        this.refreshStrategiesTheme();
-    };
-
-    setActiveTabIndex = (index: number, is_default: boolean): void => {
-        this.active_index = index;
-        if (!is_default) {
-            const { ui } = this.core;
-            const { is_mobile } = ui;
-            rudderStackSendSwitchLoadStrategyTabEvent({
-                load_strategy_tab: LOAD_MODAL_TABS[index + (is_mobile ? 1 : 0)],
-            });
-        }
-    };
-
-    setLoadedLocalFile = (loaded_local_file: File | null): void => {
-        this.loaded_local_file = loaded_local_file;
-    };
-
-    setRecentStrategies = (recent_strategies: TStrategy[]): void => {
-        this.recent_strategies = recent_strategies;
-    };
-
-    refreshStrategies = (): void => {
-        this.setRecentStrategies(this.recent_strategies);
-    };
-
-    setSelectedStrategyId = (selected_strategy_id: string): void => {
-        this.selected_strategy_id = selected_strategy_id;
-    };
-
-    toggleExplanationExpand = (): void => {
-        this.is_explanation_expand = !this.is_explanation_expand;
-    };
-
-    toggleLoadModal = (): void => {
-        this.is_load_modal_open = !this.is_load_modal_open;
-        if (this.selected_strategy_id) this.previewRecentStrategy(this.selected_strategy_id);
-        this.setLoadedLocalFile(null);
-    };
-
-    toggleTourLoadModal = (toggle = !this.is_load_modal_open) => {
-        this.is_load_modal_open = toggle;
-    };
-
-    updateListStrategies = (workspaces: Array<TStrategy>): void => {
-        if (workspaces) {
-            (this.dashboard_strategies as Array<TStrategy>) = workspaces;
+            ({ files } = event.target);
         }
-    };
 
-    getRecentFileIcon = (save_type: { [key: string]: string } | string): string => {
-        switch (save_type) {
-            case save_types.UNSAVED:
-                return 'IcReports';
-            case save_types.LOCAL:
-                return 'IcMyComputer';
-            case save_types.GOOGLE_DRIVE:
-                return 'IcGoogleDrive';
-            default:
-                return 'IcReports';
-        }
-    };
+        const [file] = files;
 
-    getSaveType = (save_type: { [key: string]: string } | string): string => {
-        switch (save_type) {
-            case save_types.UNSAVED:
-                return localize('Unsaved');
-            case save_types.LOCAL:
-                return localize('Local');
-            case save_types.GOOGLE_DRIVE:
-                return localize('Google Drive');
-            default:
-                return localize('Unsaved');
+        if (!is_body) {
+            if (file.name.includes('xml')) {
+                this.setLoadedLocalFile(file);
+                this.getDashboardStrategies();
+            } else {
+                return false;
+            }
         }
-    };
-
-    onToggleDeleteDialog = (is_delete_modal_open: boolean): void => {
-        this.is_delete_modal_open = is_delete_modal_open;
+        this.readFile(!is_body, event as DragEvent, file);
+        (event.target as HTMLInputElement).value = '';
+        return true;
     };
 
     readFile = (is_preview: boolean, drop_event: DragEvent, file: File): void => {
         if (this.upload_id && is_preview) {
             rudderStackSendUploadStrategyStartEvent({ upload_provider: 'my_computer', upload_id: this.upload_id });
         }
-        const file_name = file?.name.replace(/\.[^/.]+$/, '');
         const reader = new FileReader();
+        const file_name = file?.name.replace(/\.[^/.]+$/, '');
 
         reader.onload = action(async e => {
             const load_options = {
@@ -539,35 +502,14 @@ export default class LoadModalStore implements ILoadModalStore {
                 drop_event,
                 from: save_types.LOCAL,
                 workspace: null as Blockly.WorkspaceSvg | null,
-                file_name: '',
+                file_name,
                 strategy_id: '',
                 showIncompatibleStrategyDialog: false,
             };
-            const ref = document?.getElementById('load-strategy__blockly-container');
             const upload_type = getStrategyType(load_options?.block_string ?? '');
-            if (is_preview && ref) {
-                this.local_workspace = Blockly.inject(ref, {
-                    media: `${__webpack_public_path__}media/`, // eslint-disable-line
-                    zoom: {
-                        wheel: false,
-                        startScale: config.workspaces.previewWorkspaceStartScale,
-                    },
-                    readOnly: true,
-                    scrollbars: true,
-                    renderer: 'zelos',
-                    theme: window?.Blockly?.Themes?.zelos_renderer,
-                });
-                load_options.workspace = this.local_workspace;
-                if (load_options.workspace) {
-                    (load_options.workspace as any).RTL = isDbotRTL();
-                }
-                this.imported_strategy_type = upload_type;
-            } else {
-                load_options.workspace = window.Blockly.derivWorkspace;
-                load_options.file_name = file_name;
-            }
 
             const result = await load(load_options);
+            this.loadStrategyModalLocalPreview(load_options);
             if (!is_preview && !result?.error) {
                 rudderStackSendUploadStrategyCompletedEvent({
                     upload_provider: 'my_computer',
@@ -587,4 +529,90 @@ export default class LoadModalStore implements ILoadModalStore {
 
         reader.readAsText(file);
     };
+
+    injectWorkspace = {
+        media: `${__webpack_public_path__}media/`,
+        zoom: {
+            wheel: true,
+            startScale: config.workspaces.previewWorkspaceStartScale,
+        },
+        readOnly: true,
+        scrollbars: true,
+        renderer: 'zelos',
+    };
+
+    workspaceOptions = {
+        block_string: this.selected_strategy?.xml,
+        drop_event: {},
+        workspace: this.recent_workspace,
+        file_name: this.selected_strategy?.name,
+        strategy_id: this.selected_strategy?.id,
+        from: this.selected_strategy?.save_type,
+        showIncompatibleStrategyDialog: false,
+    };
+
+    loadStrategyOnModalWorkspace = async () => {
+        const { blockly_store } = this.root_store;
+        const { setLoading } = blockly_store;
+        const convertedDom = window.Blockly.utils.xml.textToDom(this.selected_strategy?.xml);
+        const mainWorkspace = window.Blockly.getMainWorkspace();
+
+        window.Blockly.Xml.clearWorkspaceAndLoadFromXml(convertedDom, mainWorkspace);
+        setLoading(false);
+    };
+
+    loadStrategyOnBotBuilder = async () => {
+        const { strategy_id, xml, file_name, from } = window.Blockly.readFileXml;
+
+        const convertedDom = window.Blockly.utils.xml.textToDom(xml);
+        const derivWorkspace = window.Blockly.derivWorkspace;
+
+        window.Blockly.Xml.clearWorkspaceAndLoadFromXml(convertedDom, derivWorkspace);
+        derivWorkspace.cleanUp();
+        derivWorkspace.clearUndo();
+        derivWorkspace.current_strategy_id = strategy_id || Blockly.utils.idGenerator.genUid();
+
+        DBotStore?.instance?.save_modal?.updateBotName(file_name);
+
+        const xml_dom = window.Blockly.utils.xml.textToDom(xml);
+        await saveWorkspaceToRecent(xml_dom, from);
+
+        const recent_files = await getSavedWorkspaces();
+        if (recent_files?.length > 0) this.setSelectedStrategyId(recent_files[0]?.id);
+    };
+
+    loadStrategyModalRecentPreview = async workspace_id => {
+        const { blockly_store } = this.root_store;
+        const { setLoading } = blockly_store;
+        setLoading(true);
+        const injectWorkspace = { ...this.injectWorkspace, theme: window?.Blockly?.Themes?.zelos_renderer };
+        this.setLoadedLocalFile(null);
+        this.setSelectedStrategyId(workspace_id);
+        let ref_preview;
+        while (!ref_preview) {
+            ref_preview = document.getElementById('load-strategy__blockly-container');
+            // eslint-disable-next-line no-await-in-loop
+            await new Promise(resolve => setImmediate(resolve));
+        }
+        if (!ref_preview) {
+            // eslint-disable-next-line no-console
+            console.warn('Could not find preview workspace element.');
+            return;
+        }
+        if (!this.recent_workspace) this.recent_workspace = window.Blockly.inject(ref_preview, injectWorkspace);
+        (this.recent_workspace as any).RTL = isDbotRTL();
+        await load(this.workspaceOptions);
+        this.loadStrategyOnModalWorkspace();
+    };
+
+    loadStrategyModalLocalPreview = async load_options => {
+        const injectWorkspace = { ...this.injectWorkspace, theme: window?.Blockly?.Themes?.zelos_renderer };
+        const ref = document?.getElementById('load-strategy__blockly-container');
+        this.local_workspace = window.Blockly.inject(ref, injectWorkspace);
+        load_options.workspace = this.local_workspace;
+        if (load_options.workspace) {
+            (load_options.workspace as any).RTL = isDbotRTL();
+        }
+        await load(load_options);
+    };
 }

From 187fd49c9b2aecaf2814370bf3757f07bdaa8879 Mon Sep 17 00:00:00 2001
From: rupato-deriv <rupato@deriv.com>
Date: Mon, 29 Jul 2024 11:41:16 +0800
Subject: [PATCH 02/23] fix: removed commented code

---
 .../src/scratch/hooks/workspace.js            | 85 -------------------
 .../bot-skeleton/src/scratch/utils/index.js   |  6 --
 .../components/load-modal/local-footer.tsx    |  1 -
 .../bot-web-ui/src/stores/dashboard-store.ts  |  1 -
 4 files changed, 93 deletions(-)

diff --git a/packages/bot-skeleton/src/scratch/hooks/workspace.js b/packages/bot-skeleton/src/scratch/hooks/workspace.js
index b9712146ab32..9ce860d3a2e1 100644
--- a/packages/bot-skeleton/src/scratch/hooks/workspace.js
+++ b/packages/bot-skeleton/src/scratch/hooks/workspace.js
@@ -136,88 +136,3 @@ Blockly.createVirtualWorkspace_ = function (fragment, options, blockDragSurface,
 
     return mainWorkspace;
 };
-
-// Blockly.Xml.domToWorkspace = function (xml, workspace) {
-//     if (xml instanceof Blockly.Workspace) {
-//         var swap = xml;
-//         xml = workspace;
-//         workspace = swap;
-//         console.warn('Deprecated call to Blockly.Xml.domToWorkspace, ' +
-//             'swap the arguments.');
-//     }
-//     var width;  // Not used in LTR.
-//     if (workspace.RTL) {
-//         width = workspace.getWidth();
-//     }
-//     var newBlockIds = [];  // A list of block IDs added by this call.
-//     //Blockly.Field.startCache();
-//     // Safari 7.1.3 is known to provide node lists with extra references to
-//     // children beyond the lists' length.  Trust the length, do not use the
-//     // looping pattern of checking the index for an object.
-//     var childCount = xml.childNodes.length;
-//     var existingGroup = Blockly.Events.getGroup();
-//     if (!existingGroup) {
-//         Blockly.Events.setGroup(true);
-//     }
-
-//     // Disable workspace resizes as an optimization.
-//     if (workspace.setResizesEnabled) {
-//         workspace.setResizesEnabled(false);
-//     }
-//     var variablesFirst = true;
-//     try {
-//         for (var i = 0; i < childCount; i++) {
-//             var xmlChild = xml.childNodes[i];
-//             var name = xmlChild.nodeName.toLowerCase();
-//             if (name == 'block' ||
-//                 (name == 'shadow' && !Blockly.Events.recordUndo)) {
-//                 // Allow top-level shadow blocks if recordUndo is disabled since
-//                 // that means an undo is in progress.  Such a block is expected
-//                 // to be moved to a nested destination in the next operation.
-//                 var block = Blockly.Xml.domToBlock(xmlChild, workspace);
-//                 newBlockIds.push(block.id);
-//                 var blockX = xmlChild.hasAttribute('x') ?
-//                     parseInt(xmlChild.getAttribute('x'), 10) : 10;
-//                 var blockY = xmlChild.hasAttribute('y') ?
-//                     parseInt(xmlChild.getAttribute('y'), 10) : 10;
-//                 if (!isNaN(blockX) && !isNaN(blockY)) {
-//                     block.moveBy(workspace.RTL ? width - blockX : blockX, blockY);
-//                     if (block.comment && typeof block.comment === 'object') {
-//                         var commentXY = block.comment.getXY();
-//                         var commentWidth = block.comment.getBubbleSize().width;
-//                         block.comment.moveTo(block.workspace.RTL ? width - commentXY.x - commentWidth : commentXY.x, commentXY.y);
-//                     }
-//                 }
-//                 variablesFirst = false;
-//             } else if (name == 'shadow') {
-//                 goog.asserts.fail('Shadow block cannot be a top-level block.');
-//                 variablesFirst = false;
-//             } else if (name == 'comment') {
-//                 if (workspace.rendered) {
-//                     Blockly.WorkspaceCommentSvg.fromXml(xmlChild, workspace, width);
-//                 } else {
-//                     Blockly.WorkspaceComment.fromXml(xmlChild, workspace);
-//                 }
-//             } else if (name == 'variables') {
-//                 if (variablesFirst) {
-//                     Blockly.Xml.domToVariables(xmlChild, workspace);
-//                 } else {
-//                     throw Error('\'variables\' tag must exist once before block and ' +
-//                         'shadow tag elements in the workspace XML, but it was found in ' +
-//                         'another location.');
-//                 }
-//                 variablesFirst = false;
-//             }
-//         }
-//     } finally {
-//         if (!existingGroup) {
-//             Blockly.Events.setGroup(false);
-//         }
-//        // Blockly.Field.stopCache();
-//     }
-//     // Re-enable workspace resizing.
-//     if (workspace.setResizesEnabled) {
-//         //workspace.setResizesEnabled(true);
-//     }
-//     return newBlockIds;
-// };
diff --git a/packages/bot-skeleton/src/scratch/utils/index.js b/packages/bot-skeleton/src/scratch/utils/index.js
index 12634c77d27e..01e2e7710064 100644
--- a/packages/bot-skeleton/src/scratch/utils/index.js
+++ b/packages/bot-skeleton/src/scratch/utils/index.js
@@ -179,12 +179,6 @@ export const load = async ({
             workspace,
             Array.from(blockly_xml).map(xml_block => xml_block.getAttribute('type'))
         );
-        window.Blockly.readFileXml = {
-            file_name,
-            strategy_id,
-            from,
-            xml: window.Blockly.Xml.domToText(xml),
-        };
 
         if (is_collection) {
             loadBlocks(xml, drop_event, event_group, workspace);
diff --git a/packages/bot-web-ui/src/components/load-modal/local-footer.tsx b/packages/bot-web-ui/src/components/load-modal/local-footer.tsx
index b596ad181690..07a79f536e25 100644
--- a/packages/bot-web-ui/src/components/load-modal/local-footer.tsx
+++ b/packages/bot-web-ui/src/components/load-modal/local-footer.tsx
@@ -24,7 +24,6 @@ const LocalFooter = observer(() => {
                 text={localize('Open')}
                 onClick={() => {
                     loadStrategyOnBotBuilder();
-                    //loadFileFromLocal();
                     toggleLoadModal();
                     setPreviewOnPopup(false);
                     setOpenSettings(NOTIFICATION_TYPE.BOT_IMPORT);
diff --git a/packages/bot-web-ui/src/stores/dashboard-store.ts b/packages/bot-web-ui/src/stores/dashboard-store.ts
index 62fcd0279530..1daeb014a43f 100644
--- a/packages/bot-web-ui/src/stores/dashboard-store.ts
+++ b/packages/bot-web-ui/src/stores/dashboard-store.ts
@@ -194,7 +194,6 @@ export default class DashboardStore implements IDashboardStore {
                     refreshBotBuilderTheme();
                 } else {
                     refreshBotBuilderTheme();
-                    //previewRecentStrategy(current_workspace_id);
                 }
             }
         );

From 8ddc084d7bf9afa65563a70041e56b9134efc348 Mon Sep 17 00:00:00 2001
From: rupato-deriv <rupato@deriv.com>
Date: Mon, 29 Jul 2024 11:43:24 +0800
Subject: [PATCH 03/23] fix: reverted code

---
 packages/bot-skeleton/src/scratch/utils/index.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/packages/bot-skeleton/src/scratch/utils/index.js b/packages/bot-skeleton/src/scratch/utils/index.js
index 01e2e7710064..12634c77d27e 100644
--- a/packages/bot-skeleton/src/scratch/utils/index.js
+++ b/packages/bot-skeleton/src/scratch/utils/index.js
@@ -179,6 +179,12 @@ export const load = async ({
             workspace,
             Array.from(blockly_xml).map(xml_block => xml_block.getAttribute('type'))
         );
+        window.Blockly.readFileXml = {
+            file_name,
+            strategy_id,
+            from,
+            xml: window.Blockly.Xml.domToText(xml),
+        };
 
         if (is_collection) {
             loadBlocks(xml, drop_event, event_group, workspace);

From 5f43b2dafe90e2d6acada2dc6ea79b21125092dd Mon Sep 17 00:00:00 2001
From: rupato-deriv <rupato@deriv.com>
Date: Mon, 29 Jul 2024 11:44:09 +0800
Subject: [PATCH 04/23] fix: reverted code


From 53719b3b298542a23fc7c6ff321544eb60cafd92 Mon Sep 17 00:00:00 2001
From: rupato-deriv <rupato@deriv.com>
Date: Mon, 29 Jul 2024 11:45:03 +0800
Subject: [PATCH 05/23] fix: reverted code


From 9148ee31a3b93311f9827340cd24ced31f12ebd2 Mon Sep 17 00:00:00 2001
From: rupato-deriv <rupato@deriv.com>
Date: Mon, 29 Jul 2024 15:00:52 +0800
Subject: [PATCH 06/23] fix: dark mode refresh theme sonar cloud

---
 packages/bot-web-ui/src/stores/dashboard-store.ts | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/bot-web-ui/src/stores/dashboard-store.ts b/packages/bot-web-ui/src/stores/dashboard-store.ts
index 1daeb014a43f..d98aac0772ba 100644
--- a/packages/bot-web-ui/src/stores/dashboard-store.ts
+++ b/packages/bot-web-ui/src/stores/dashboard-store.ts
@@ -190,11 +190,7 @@ export default class DashboardStore implements IDashboardStore {
             () => {
                 if (Blockly) setCurrentXML();
                 setColors(this.is_dark_mode);
-                if (this.active_tab === 1) {
-                    refreshBotBuilderTheme();
-                } else {
-                    refreshBotBuilderTheme();
-                }
+                refreshBotBuilderTheme();
             }
         );
         reaction(

From a1ce86eb6d1e4f3dad3c7d796047dd8047f3cf3f Mon Sep 17 00:00:00 2001
From: rupato-deriv <rupato@deriv.com>
Date: Mon, 29 Jul 2024 16:18:08 +0800
Subject: [PATCH 07/23] fix: for test case

---
 .../src/components/load-modal/__tests__/local-footer.spec.tsx | 4 ++--
 packages/bot-web-ui/src/stores/load-modal-store.ts            | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/bot-web-ui/src/components/load-modal/__tests__/local-footer.spec.tsx b/packages/bot-web-ui/src/components/load-modal/__tests__/local-footer.spec.tsx
index 7bfc727aa085..66d7d62b87d5 100644
--- a/packages/bot-web-ui/src/components/load-modal/__tests__/local-footer.spec.tsx
+++ b/packages/bot-web-ui/src/components/load-modal/__tests__/local-footer.spec.tsx
@@ -33,9 +33,9 @@ describe('LocalFooter', () => {
             } as DashboardStore,
             load_modal: {
                 ...mock_DBot_store.load_modal,
-                loadFileFromLocal: jest.fn(),
                 toggleLoadModal: jest.fn(),
                 setLoadedLocalFile: jest.fn(),
+                loadStrategyOnBotBuilder: jest.fn(),
                 preview_workspace: jest.fn() as unknown,
                 selected_strategy: jest.fn() as unknown,
                 tab_name: 'google_tab',
@@ -78,7 +78,7 @@ describe('LocalFooter', () => {
 
         userEvent.click(open_button);
 
-        expect(mock_DBot_store?.load_modal.loadFileFromLocal).toHaveBeenCalled();
+        expect(mock_DBot_store?.load_modal.loadStrategyOnBotBuilder).toHaveBeenCalled();
         expect(mock_DBot_store?.load_modal.toggleLoadModal).toHaveBeenCalled();
         expect(mock_DBot_store?.dashboard.setPreviewOnPopup).toHaveBeenCalledWith(false);
         expect(mock_DBot_store?.dashboard.setOpenSettings).toHaveBeenCalledWith(NOTIFICATION_TYPE.BOT_IMPORT);
diff --git a/packages/bot-web-ui/src/stores/load-modal-store.ts b/packages/bot-web-ui/src/stores/load-modal-store.ts
index a69704f608a8..1d16e6681be4 100644
--- a/packages/bot-web-ui/src/stores/load-modal-store.ts
+++ b/packages/bot-web-ui/src/stores/load-modal-store.ts
@@ -590,7 +590,7 @@ export default class LoadModalStore implements ILoadModalStore {
         this.setSelectedStrategyId(workspace_id);
         let ref_preview;
         while (!ref_preview) {
-            ref_preview = document.getElementById('load-strategy__blockly-container');
+            ref_preview = document?.getElementById('load-strategy__blockly-container');
             // eslint-disable-next-line no-await-in-loop
             await new Promise(resolve => setImmediate(resolve));
         }

From 0a1c1135e441b2c84df1ca9c9da01e45f5d7b2e1 Mon Sep 17 00:00:00 2001
From: rupato-deriv <rupato@deriv.com>
Date: Mon, 29 Jul 2024 17:43:39 +0800
Subject: [PATCH 08/23] fix: renamed functions

---
 .../src/components/load-modal/recent-workspace.tsx   |  4 ++--
 packages/bot-web-ui/src/stores/load-modal-store.ts   | 12 ++++++------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/bot-web-ui/src/components/load-modal/recent-workspace.tsx b/packages/bot-web-ui/src/components/load-modal/recent-workspace.tsx
index faa5d03dcc27..3c371cab9c20 100644
--- a/packages/bot-web-ui/src/components/load-modal/recent-workspace.tsx
+++ b/packages/bot-web-ui/src/components/load-modal/recent-workspace.tsx
@@ -12,7 +12,7 @@ type TRecentWorkspaceProps = {
 
 const RecentWorkspace = observer(({ workspace }: TRecentWorkspaceProps) => {
     const { load_modal } = useDBotStore();
-    const { getRecentFileIcon, getSaveType, loadStrategyModalRecentPreview, selected_strategy_id } = load_modal;
+    const { getRecentFileIcon, getSaveType, loadStrategyOnModalRecentPreview, selected_strategy_id } = load_modal;
 
     return (
         <div
@@ -21,7 +21,7 @@ const RecentWorkspace = observer(({ workspace }: TRecentWorkspaceProps) => {
             })}
             key={workspace.id}
             onClick={
-                selected_strategy_id === workspace.id ? undefined : () => loadStrategyModalRecentPreview(workspace.id)
+                selected_strategy_id === workspace.id ? undefined : () => loadStrategyOnModalRecentPreview(workspace.id)
             }
             data-testid='dt_recent_workspace_item'
         >
diff --git a/packages/bot-web-ui/src/stores/load-modal-store.ts b/packages/bot-web-ui/src/stores/load-modal-store.ts
index 1d16e6681be4..2267737953d9 100644
--- a/packages/bot-web-ui/src/stores/load-modal-store.ts
+++ b/packages/bot-web-ui/src/stores/load-modal-store.ts
@@ -125,7 +125,7 @@ export default class LoadModalStore implements ILoadModalStore {
             setDashboardStrategies: action.bound,
             updateListStrategies: action.bound,
             onToggleDeleteDialog: action,
-            loadStrategyModalRecentPreview: action,
+            loadStrategyOnModalRecentPreview: action,
             loadStrategyOnBotBuilder: action,
         });
 
@@ -249,7 +249,7 @@ export default class LoadModalStore implements ILoadModalStore {
     };
 
     onEntered = (): void => {
-        this.loadStrategyModalRecentPreview(this.selected_strategy_id);
+        this.loadStrategyOnModalRecentPreview(this.selected_strategy_id);
     };
 
     onLoadModalClose = (): void => {
@@ -424,7 +424,7 @@ export default class LoadModalStore implements ILoadModalStore {
 
     onActiveIndexChange = (): void => {
         if (this.tab_name === tabs_title.TAB_RECENT) {
-            this.loadStrategyModalRecentPreview(this.selected_strategy_id);
+            this.loadStrategyOnModalRecentPreview(this.selected_strategy_id);
         } else if (this.recent_workspace) {
             setTimeout(() => {
                 // Dispose of recent workspace when switching away from Recent tab.
@@ -509,7 +509,7 @@ export default class LoadModalStore implements ILoadModalStore {
             const upload_type = getStrategyType(load_options?.block_string ?? '');
 
             const result = await load(load_options);
-            this.loadStrategyModalLocalPreview(load_options);
+            this.loadStrategyOnModalLocalPreview(load_options);
             if (!is_preview && !result?.error) {
                 rudderStackSendUploadStrategyCompletedEvent({
                     upload_provider: 'my_computer',
@@ -581,7 +581,7 @@ export default class LoadModalStore implements ILoadModalStore {
         if (recent_files?.length > 0) this.setSelectedStrategyId(recent_files[0]?.id);
     };
 
-    loadStrategyModalRecentPreview = async workspace_id => {
+    loadStrategyOnModalRecentPreview = async workspace_id => {
         const { blockly_store } = this.root_store;
         const { setLoading } = blockly_store;
         setLoading(true);
@@ -605,7 +605,7 @@ export default class LoadModalStore implements ILoadModalStore {
         this.loadStrategyOnModalWorkspace();
     };
 
-    loadStrategyModalLocalPreview = async load_options => {
+    loadStrategyOnModalLocalPreview = async load_options => {
         const injectWorkspace = { ...this.injectWorkspace, theme: window?.Blockly?.Themes?.zelos_renderer };
         const ref = document?.getElementById('load-strategy__blockly-container');
         this.local_workspace = window.Blockly.inject(ref, injectWorkspace);

From f26732e353717833c886e900ab7a186cb68437f9 Mon Sep 17 00:00:00 2001
From: rupato-deriv <rupato@deriv.com>
Date: Mon, 5 Aug 2024 13:36:12 +0800
Subject: [PATCH 09/23] fix: added setLoading false on catch

---
 .../bot-web-ui/src/stores/load-modal-store.ts | 24 ++++++++-----------
 1 file changed, 10 insertions(+), 14 deletions(-)

diff --git a/packages/bot-web-ui/src/stores/load-modal-store.ts b/packages/bot-web-ui/src/stores/load-modal-store.ts
index 510d44787e55..9f86e6704a84 100644
--- a/packages/bot-web-ui/src/stores/load-modal-store.ts
+++ b/packages/bot-web-ui/src/stores/load-modal-store.ts
@@ -8,7 +8,6 @@ import {
     removeExistingWorkspace,
     save_types,
     saveWorkspaceToRecent,
-    setColors,
 } from '@deriv/bot-skeleton';
 import { isDbotRTL } from '@deriv/bot-skeleton/src/utils/workspace';
 import { TStores } from '@deriv/stores/types';
@@ -23,7 +22,6 @@ import {
 } from '../analytics/rudderstack-common-events';
 import { getStrategyType, LOAD_MODAL_TABS } from '../analytics/utils';
 import RootStore from './root-store';
-import DBotStore from '@deriv/bot-skeleton/src/scratch/dbot-store';
 
 interface ILoadModalStore {
     active_index: number;
@@ -563,18 +561,10 @@ export default class LoadModalStore implements ILoadModalStore {
         showIncompatibleStrategyDialog: false,
     };
 
-    loadStrategyOnModalWorkspace = async () => {
-        const { blockly_store } = this.root_store;
-        const { setLoading } = blockly_store;
-        const convertedDom = window.Blockly.utils.xml.textToDom(this.selected_strategy?.xml);
-        const mainWorkspace = window.Blockly.getMainWorkspace();
-
-        window.Blockly.Xml.clearWorkspaceAndLoadFromXml(convertedDom, mainWorkspace);
-        setLoading(false);
-    };
-
     loadStrategyOnBotBuilder = async () => {
         const { strategy_id, xml, file_name, from } = window.Blockly.readFileXml;
+        const { save_modal } = this.root_store;
+        const { updateBotName } = save_modal;
 
         const convertedDom = window.Blockly.utils.xml.textToDom(xml);
         const derivWorkspace = window.Blockly.derivWorkspace;
@@ -584,7 +574,7 @@ export default class LoadModalStore implements ILoadModalStore {
         derivWorkspace.clearUndo();
         derivWorkspace.current_strategy_id = strategy_id || Blockly.utils.idGenerator.genUid();
 
-        DBotStore?.instance?.save_modal?.updateBotName(file_name);
+        updateBotName(file_name);
 
         const xml_dom = window.Blockly.utils.xml.textToDom(xml);
         await saveWorkspaceToRecent(xml_dom, from);
@@ -609,12 +599,18 @@ export default class LoadModalStore implements ILoadModalStore {
         if (!ref_preview) {
             // eslint-disable-next-line no-console
             console.warn('Could not find preview workspace element.');
+            setLoading(false);
             return;
         }
         if (!this.recent_workspace) this.recent_workspace = window.Blockly.inject(ref_preview, injectWorkspace);
         (this.recent_workspace as any).RTL = isDbotRTL();
         await load(this.workspaceOptions);
-        this.loadStrategyOnModalWorkspace();
+
+        const convertedDom = window.Blockly?.utils?.xml?.textToDom(this.selected_strategy?.xml);
+        const mainWorkspace = window.Blockly?.getMainWorkspace();
+
+        window.Blockly?.Xml?.clearWorkspaceAndLoadFromXml(convertedDom, mainWorkspace);
+        setLoading(false);
     };
 
     loadStrategyOnModalLocalPreview = async load_options => {

From e1f55444683599f3453f6f7e1a6d12fd7b10ff45 Mon Sep 17 00:00:00 2001
From: rupato-deriv <rupato@deriv.com>
Date: Mon, 5 Aug 2024 16:17:52 +0800
Subject: [PATCH 10/23] fix: when strategies are empty

---
 packages/bot-web-ui/src/stores/load-modal-store.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/bot-web-ui/src/stores/load-modal-store.ts b/packages/bot-web-ui/src/stores/load-modal-store.ts
index 9f86e6704a84..c5a6c3f17ed2 100644
--- a/packages/bot-web-ui/src/stores/load-modal-store.ts
+++ b/packages/bot-web-ui/src/stores/load-modal-store.ts
@@ -584,6 +584,7 @@ export default class LoadModalStore implements ILoadModalStore {
     };
 
     loadStrategyOnModalRecentPreview = async workspace_id => {
+        if (this.recent_strategies.length === 0) return;
         const { blockly_store } = this.root_store;
         const { setLoading } = blockly_store;
         setLoading(true);

From 128fd58a8d89c2ffc3ffef9bbfd2f5b15197cb57 Mon Sep 17 00:00:00 2001
From: rupato-deriv <rupato@deriv.com>
Date: Mon, 5 Aug 2024 17:23:27 +0800
Subject: [PATCH 11/23] fix: loader when no strategies

---
 packages/bot-web-ui/src/stores/load-modal-store.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/bot-web-ui/src/stores/load-modal-store.ts b/packages/bot-web-ui/src/stores/load-modal-store.ts
index c5a6c3f17ed2..d7376b04c10e 100644
--- a/packages/bot-web-ui/src/stores/load-modal-store.ts
+++ b/packages/bot-web-ui/src/stores/load-modal-store.ts
@@ -584,7 +584,7 @@ export default class LoadModalStore implements ILoadModalStore {
     };
 
     loadStrategyOnModalRecentPreview = async workspace_id => {
-        if (this.recent_strategies.length === 0) return;
+        if (this.recent_strategies.length === 0 || this.tab_name !== tabs_title.TAB_RECENT) return;
         const { blockly_store } = this.root_store;
         const { setLoading } = blockly_store;
         setLoading(true);

From b1448efa2fd318b2f78e5728360d597d472a4e43 Mon Sep 17 00:00:00 2001
From: rupato-deriv <rupato@deriv.com>
Date: Tue, 6 Aug 2024 13:46:32 +0800
Subject: [PATCH 12/23] fix: local file loaded to null on file upload

---
 packages/bot-web-ui/src/stores/load-modal-store.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/bot-web-ui/src/stores/load-modal-store.ts b/packages/bot-web-ui/src/stores/load-modal-store.ts
index d7376b04c10e..42be268749c9 100644
--- a/packages/bot-web-ui/src/stores/load-modal-store.ts
+++ b/packages/bot-web-ui/src/stores/load-modal-store.ts
@@ -581,6 +581,7 @@ export default class LoadModalStore implements ILoadModalStore {
 
         const recent_files = await getSavedWorkspaces();
         if (recent_files?.length > 0) this.setSelectedStrategyId(recent_files[0]?.id);
+        this.setLoadedLocalFile(null);
     };
 
     loadStrategyOnModalRecentPreview = async workspace_id => {

From 147037fe46adfc6fb0387b50b1d5ec642889b8c1 Mon Sep 17 00:00:00 2001
From: rupato-deriv <rupato@deriv.com>
Date: Fri, 9 Aug 2024 11:52:51 +0800
Subject: [PATCH 13/23] fix: test case

---
 .../load-modal/__tests__/recent-workspace.spec.tsx         | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/bot-web-ui/src/components/load-modal/__tests__/recent-workspace.spec.tsx b/packages/bot-web-ui/src/components/load-modal/__tests__/recent-workspace.spec.tsx
index cc567b13685c..29fa6023537f 100644
--- a/packages/bot-web-ui/src/components/load-modal/__tests__/recent-workspace.spec.tsx
+++ b/packages/bot-web-ui/src/components/load-modal/__tests__/recent-workspace.spec.tsx
@@ -47,11 +47,4 @@ describe('RecentWorkspace', () => {
         render(<RecentWorkspace workspace={mock_workspace} />, { wrapper });
         expect(screen.getByText('18 Oct 2023')).toBeInTheDocument();
     });
-
-    it('should update selected strategy ID on clicking the strategy', () => {
-        render(<RecentWorkspace workspace={mock_workspace} />, { wrapper });
-        const recent_workspace_item = screen.getByTestId('dt_recent_workspace_item');
-        userEvent.click(recent_workspace_item);
-        expect(mock_DBot_store?.load_modal?.selected_strategy_id).toBe(mock_workspace.id);
-    });
 });

From 3dc8c036203bf9f0fa953a3f8b6d919a4dcbe893 Mon Sep 17 00:00:00 2001
From: rupato-deriv <rupato@deriv.com>
Date: Thu, 15 Aug 2024 14:45:27 +0800
Subject: [PATCH 14/23] fix: for open on recent strategies

---
 .../src/scratch/hooks/constant.js             |  2 +
 .../bot-skeleton/src/scratch/utils/index.js   |  4 +-
 .../components/load-modal/recent-footer.tsx   |  4 +-
 .../bot-web-ui/src/stores/load-modal-store.ts | 37 ++++++++++++-------
 4 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/packages/bot-skeleton/src/scratch/hooks/constant.js b/packages/bot-skeleton/src/scratch/hooks/constant.js
index d0029328aed5..bd24b53fc20e 100644
--- a/packages/bot-skeleton/src/scratch/hooks/constant.js
+++ b/packages/bot-skeleton/src/scratch/hooks/constant.js
@@ -66,3 +66,5 @@ Blockly.Xml.NODE_BUTTON = 'BUTTON';
 Blockly.Xml.NODE_LABEL = 'LABEL';
 Blockly.Xml.NODE_SHADOW = 'SHADOW';
 Blockly.Xml.NODE_INPUT = 'INPUT';
+
+window.Blockly.xmlValues = {};
diff --git a/packages/bot-skeleton/src/scratch/utils/index.js b/packages/bot-skeleton/src/scratch/utils/index.js
index bbc0a4aa3c51..0e2c33422617 100644
--- a/packages/bot-skeleton/src/scratch/utils/index.js
+++ b/packages/bot-skeleton/src/scratch/utils/index.js
@@ -179,11 +179,11 @@ export const load = async ({
             workspace,
             Array.from(blockly_xml).map(xml_block => xml_block.getAttribute('type'))
         );
-        window.Blockly.readFileXml = {
+        window.Blockly.xmlValues = {
             file_name,
             strategy_id,
             from,
-            xml: window.Blockly.Xml.domToText(xml),
+            xml,
         };
 
         if (is_collection) {
diff --git a/packages/bot-web-ui/src/components/load-modal/recent-footer.tsx b/packages/bot-web-ui/src/components/load-modal/recent-footer.tsx
index 232f38b523ab..01bee6b0458a 100644
--- a/packages/bot-web-ui/src/components/load-modal/recent-footer.tsx
+++ b/packages/bot-web-ui/src/components/load-modal/recent-footer.tsx
@@ -7,14 +7,14 @@ import { useDBotStore } from 'Stores/useDBotStore';
 
 const RecentFooter = observer(() => {
     const { load_modal, dashboard } = useDBotStore();
-    const { is_open_button_loading, loadFileFromRecent, toggleLoadModal } = load_modal;
+    const { is_open_button_loading, loadStrategyOnBotBuilder, toggleLoadModal } = load_modal;
     const { setOpenSettings } = dashboard;
 
     return (
         <Button
             text={localize('Open')}
             onClick={() => {
-                loadFileFromRecent();
+                loadStrategyOnBotBuilder();
                 toggleLoadModal();
                 setOpenSettings(NOTIFICATION_TYPE.BOT_IMPORT);
             }}
diff --git a/packages/bot-web-ui/src/stores/load-modal-store.ts b/packages/bot-web-ui/src/stores/load-modal-store.ts
index 9d583f22c16e..17189f395871 100644
--- a/packages/bot-web-ui/src/stores/load-modal-store.ts
+++ b/packages/bot-web-ui/src/stores/load-modal-store.ts
@@ -20,6 +20,7 @@ import {
     rudderStackSendUploadStrategyStartEvent,
 } from '../analytics/rudderstack-common-events';
 import { getStrategyType } from '../analytics/utils';
+
 import RootStore from './root-store';
 
 interface ILoadModalStore {
@@ -265,7 +266,7 @@ export default class LoadModalStore implements ILoadModalStore {
         if (this.local_workspace) {
             this.local_workspace = null;
         }
-        this.setActiveTabIndex(0, true); // Reset to first tab.
+        this.setActiveTabIndex(0); // Reset to first tab.
         this.setLoadedLocalFile(null);
     };
 
@@ -275,15 +276,8 @@ export default class LoadModalStore implements ILoadModalStore {
         }
     };
 
-    setActiveTabIndex = (index: number, is_default: boolean): void => {
+    setActiveTabIndex = (index: number): void => {
         this.active_index = index;
-        if (!is_default) {
-            const { ui } = this.core;
-            const { is_mobile } = ui;
-            rudderStackSendSwitchLoadStrategyTabEvent({
-                load_strategy_tab: LOAD_MODAL_TABS[index + (is_mobile ? 1 : 0)],
-            });
-        }
     };
 
     setLoadedLocalFile = (loaded_local_file: File | null): void => {
@@ -561,22 +555,20 @@ export default class LoadModalStore implements ILoadModalStore {
     };
 
     loadStrategyOnBotBuilder = async () => {
-        const { strategy_id, xml, file_name, from } = window.Blockly.readFileXml;
+        const { strategy_id, xml, file_name, from } = window.Blockly.xmlValues;
         const { save_modal } = this.root_store;
         const { updateBotName } = save_modal;
 
-        const convertedDom = window.Blockly.utils.xml.textToDom(xml);
         const derivWorkspace = window.Blockly.derivWorkspace;
 
-        window.Blockly.Xml.clearWorkspaceAndLoadFromXml(convertedDom, derivWorkspace);
+        window.Blockly.Xml.clearWorkspaceAndLoadFromXml(xml, derivWorkspace);
         derivWorkspace.cleanUp();
         derivWorkspace.clearUndo();
         derivWorkspace.current_strategy_id = strategy_id || Blockly.utils.idGenerator.genUid();
 
         updateBotName(file_name);
 
-        const xml_dom = window.Blockly.utils.xml.textToDom(xml);
-        await saveWorkspaceToRecent(xml_dom, from);
+        await saveWorkspaceToRecent(xml, from);
 
         const recent_files = await getSavedWorkspaces();
         if (recent_files?.length > 0) this.setSelectedStrategyId(recent_files[0]?.id);
@@ -585,12 +577,15 @@ export default class LoadModalStore implements ILoadModalStore {
 
     loadStrategyOnModalRecentPreview = async workspace_id => {
         if (this.recent_strategies.length === 0 || this.tab_name !== tabs_title.TAB_RECENT) return;
+
         const { blockly_store } = this.root_store;
         const { setLoading } = blockly_store;
         setLoading(true);
+
         const injectWorkspace = { ...this.injectWorkspace, theme: window?.Blockly?.Themes?.zelos_renderer };
         this.setLoadedLocalFile(null);
         this.setSelectedStrategyId(workspace_id);
+
         let ref_preview;
         while (!ref_preview) {
             ref_preview = document?.getElementById('load-strategy__blockly-container');
@@ -611,17 +606,31 @@ export default class LoadModalStore implements ILoadModalStore {
         const mainWorkspace = window.Blockly?.getMainWorkspace();
 
         window.Blockly?.Xml?.clearWorkspaceAndLoadFromXml(convertedDom, mainWorkspace);
+
+        if (window.Blockly && window.Blockly.xmlValues) {
+            window.Blockly.xmlValues = {
+                ...window.Blockly.xmlValues,
+                strategy_id: this.selected_strategy_id,
+                xml: convertedDom,
+                file_name: this.selected_strategy?.name,
+                from: this.selected_strategy?.save_type,
+            };
+        }
+
         setLoading(false);
     };
 
     loadStrategyOnModalLocalPreview = async load_options => {
         const injectWorkspace = { ...this.injectWorkspace, theme: window?.Blockly?.Themes?.zelos_renderer };
         const ref = document?.getElementById('load-strategy__blockly-container');
+
         this.local_workspace = window.Blockly.inject(ref, injectWorkspace);
         load_options.workspace = this.local_workspace;
+
         if (load_options.workspace) {
             (load_options.workspace as any).RTL = isDbotRTL();
         }
+
         await load(load_options);
     };
 }

From 0e4b562fef371dc383aef8bd3c67e522c4ed7491 Mon Sep 17 00:00:00 2001
From: rupato-deriv <rupato@deriv.com>
Date: Thu, 15 Aug 2024 16:59:45 +0800
Subject: [PATCH 15/23] fix: for recent stratagies

---
 .../src/scratch/hooks/constant.js             |  2 -
 .../bot-skeleton/src/scratch/utils/index.js   | 30 +++++++---
 .../bot-web-ui/src/stores/load-modal-store.ts | 60 ++++++-------------
 3 files changed, 42 insertions(+), 50 deletions(-)

diff --git a/packages/bot-skeleton/src/scratch/hooks/constant.js b/packages/bot-skeleton/src/scratch/hooks/constant.js
index bd24b53fc20e..d0029328aed5 100644
--- a/packages/bot-skeleton/src/scratch/hooks/constant.js
+++ b/packages/bot-skeleton/src/scratch/hooks/constant.js
@@ -66,5 +66,3 @@ Blockly.Xml.NODE_BUTTON = 'BUTTON';
 Blockly.Xml.NODE_LABEL = 'LABEL';
 Blockly.Xml.NODE_SHADOW = 'SHADOW';
 Blockly.Xml.NODE_INPUT = 'INPUT';
-
-window.Blockly.xmlValues = {};
diff --git a/packages/bot-skeleton/src/scratch/utils/index.js b/packages/bot-skeleton/src/scratch/utils/index.js
index 0e2c33422617..d55304fdde6e 100644
--- a/packages/bot-skeleton/src/scratch/utils/index.js
+++ b/packages/bot-skeleton/src/scratch/utils/index.js
@@ -9,6 +9,28 @@ import DBotStore from '../dbot-store';
 import { LogTypes } from '../../constants/messages';
 import { error_message_map } from '../../utils/error-config';
 
+export const inject_workspace_options = {
+    media: `${__webpack_public_path__}media/`,
+    zoom: {
+        wheel: true,
+        startScale: config.workspaces.previewWorkspaceStartScale,
+    },
+    readOnly: true,
+    scrollbars: true,
+    renderer: 'zelos',
+};
+
+export const updateXmlValues = blockly_options => {
+    const { strategy_id, convertedDom, file_name, from } = blockly_options;
+    window.Blockly.xmlValues = {
+        ...window?.Blockly?.xmlValues,
+        strategy_id,
+        convertedDom,
+        file_name,
+        from,
+    };
+};
+
 export const getSelectedTradeType = (workspace = Blockly.derivWorkspace) => {
     const trade_type_block = workspace.getAllBlocks(true).find(block => block.type === 'trade_definition_tradetype');
     const selected_trade_type = trade_type_block?.getFieldValue('TRADETYPE_LIST');
@@ -179,13 +201,7 @@ export const load = async ({
             workspace,
             Array.from(blockly_xml).map(xml_block => xml_block.getAttribute('type'))
         );
-        window.Blockly.xmlValues = {
-            file_name,
-            strategy_id,
-            from,
-            xml,
-        };
-
+        updateXmlValues({ strategy_id, convertedDom: xml, file_name, from });
         if (is_collection) {
             loadBlocks(xml, drop_event, event_group, workspace);
         } else {
diff --git a/packages/bot-web-ui/src/stores/load-modal-store.ts b/packages/bot-web-ui/src/stores/load-modal-store.ts
index 17189f395871..f338994f551c 100644
--- a/packages/bot-web-ui/src/stores/load-modal-store.ts
+++ b/packages/bot-web-ui/src/stores/load-modal-store.ts
@@ -2,7 +2,6 @@ import React from 'react';
 import { action, computed, makeObservable, observable, reaction } from 'mobx';
 import { v4 as uuidv4 } from 'uuid';
 import {
-    config,
     getSavedWorkspaces,
     load,
     removeExistingWorkspace,
@@ -22,6 +21,8 @@ import {
 import { getStrategyType } from '../analytics/utils';
 
 import RootStore from './root-store';
+import { waitForDomElement } from '../utils/dom-observer';
+import { inject_workspace_options, updateXmlValues } from '@deriv/bot-skeleton/src/scratch/utils';
 
 interface ILoadModalStore {
     active_index: number;
@@ -533,17 +534,6 @@ export default class LoadModalStore implements ILoadModalStore {
         reader.readAsText(file);
     };
 
-    injectWorkspace = {
-        media: `${__webpack_public_path__}media/`,
-        zoom: {
-            wheel: true,
-            startScale: config.workspaces.previewWorkspaceStartScale,
-        },
-        readOnly: true,
-        scrollbars: true,
-        renderer: 'zelos',
-    };
-
     workspaceOptions = {
         block_string: this.selected_strategy?.xml,
         drop_event: {},
@@ -555,20 +545,20 @@ export default class LoadModalStore implements ILoadModalStore {
     };
 
     loadStrategyOnBotBuilder = async () => {
-        const { strategy_id, xml, file_name, from } = window.Blockly.xmlValues;
+        const { strategy_id, convertedDom, file_name, from = save_types.UNSAVED } = window.Blockly.xmlValues;
         const { save_modal } = this.root_store;
         const { updateBotName } = save_modal;
 
         const derivWorkspace = window.Blockly.derivWorkspace;
 
-        window.Blockly.Xml.clearWorkspaceAndLoadFromXml(xml, derivWorkspace);
+        window.Blockly.Xml.clearWorkspaceAndLoadFromXml(convertedDom, derivWorkspace);
         derivWorkspace.cleanUp();
         derivWorkspace.clearUndo();
-        derivWorkspace.current_strategy_id = strategy_id || Blockly.utils.idGenerator.genUid();
+        derivWorkspace.current_strategy_id = strategy_id || window.Blockly.utils.idGenerator.genUid();
 
         updateBotName(file_name);
 
-        await saveWorkspaceToRecent(xml, from);
+        await saveWorkspaceToRecent(convertedDom, from);
 
         const recent_files = await getSavedWorkspaces();
         if (recent_files?.length > 0) this.setSelectedStrategyId(recent_files[0]?.id);
@@ -582,23 +572,15 @@ export default class LoadModalStore implements ILoadModalStore {
         const { setLoading } = blockly_store;
         setLoading(true);
 
-        const injectWorkspace = { ...this.injectWorkspace, theme: window?.Blockly?.Themes?.zelos_renderer };
+        const inject_options = { ...inject_workspace_options, theme: window?.Blockly?.Themes?.zelos_renderer };
+
         this.setLoadedLocalFile(null);
         this.setSelectedStrategyId(workspace_id);
 
-        let ref_preview;
-        while (!ref_preview) {
-            ref_preview = document?.getElementById('load-strategy__blockly-container');
-            // eslint-disable-next-line no-await-in-loop
-            await new Promise(resolve => setImmediate(resolve));
-        }
-        if (!ref_preview) {
-            // eslint-disable-next-line no-console
-            console.warn('Could not find preview workspace element.');
-            setLoading(false);
-            return;
-        }
-        if (!this.recent_workspace) this.recent_workspace = window.Blockly.inject(ref_preview, injectWorkspace);
+        await waitForDomElement('#load-strategy__blockly-container');
+        const ref_preview = document?.getElementById('load-strategy__blockly-container');
+
+        if (!this.recent_workspace) this.recent_workspace = window.Blockly.inject(ref_preview, inject_options);
         (this.recent_workspace as any).RTL = isDbotRTL();
         await load(this.workspaceOptions);
 
@@ -607,21 +589,17 @@ export default class LoadModalStore implements ILoadModalStore {
 
         window.Blockly?.Xml?.clearWorkspaceAndLoadFromXml(convertedDom, mainWorkspace);
 
-        if (window.Blockly && window.Blockly.xmlValues) {
-            window.Blockly.xmlValues = {
-                ...window.Blockly.xmlValues,
-                strategy_id: this.selected_strategy_id,
-                xml: convertedDom,
-                file_name: this.selected_strategy?.name,
-                from: this.selected_strategy?.save_type,
-            };
-        }
-
+        updateXmlValues({
+            strategy_id: this.selected_strategy_id,
+            convertedDom,
+            file_name: this.selected_strategy?.name,
+            from: this.selected_strategy?.save_type || save_types.UNSAVED,
+        });
         setLoading(false);
     };
 
     loadStrategyOnModalLocalPreview = async load_options => {
-        const injectWorkspace = { ...this.injectWorkspace, theme: window?.Blockly?.Themes?.zelos_renderer };
+        const injectWorkspace = { ...inject_workspace_options, theme: window?.Blockly?.Themes?.zelos_renderer };
         const ref = document?.getElementById('load-strategy__blockly-container');
 
         this.local_workspace = window.Blockly.inject(ref, injectWorkspace);

From ba1b69b0e9f0e1db03d557efc13d09cbcb584d71 Mon Sep 17 00:00:00 2001
From: rupato-deriv <rupato@deriv.com>
Date: Fri, 16 Aug 2024 18:47:15 +0800
Subject: [PATCH 16/23] fix: test cases and refactored load modal

---
 .../bot-skeleton/src/scratch/utils/index.js   |  3 +-
 .../__tests__/local-footer.spec.tsx           |  2 +
 .../__tests__/recent-footer.spec.tsx          | 10 ++++-
 .../__tests__/recent-workspace.spec.tsx       |  8 ++++
 .../components/load-modal/local-footer.tsx    | 11 ++++-
 .../load-modal/recent-workspace.tsx           | 19 ++++++--
 .../bot-web-ui/src/stores/load-modal-store.ts | 44 +++++++++++--------
 7 files changed, 71 insertions(+), 26 deletions(-)

diff --git a/packages/bot-skeleton/src/scratch/utils/index.js b/packages/bot-skeleton/src/scratch/utils/index.js
index d55304fdde6e..7bc3488e70c4 100644
--- a/packages/bot-skeleton/src/scratch/utils/index.js
+++ b/packages/bot-skeleton/src/scratch/utils/index.js
@@ -21,9 +21,10 @@ export const inject_workspace_options = {
 };
 
 export const updateXmlValues = blockly_options => {
+    if (!window.Blockly) return;
     const { strategy_id, convertedDom, file_name, from } = blockly_options;
     window.Blockly.xmlValues = {
-        ...window?.Blockly?.xmlValues,
+        ...window.Blockly.xmlValues,
         strategy_id,
         convertedDom,
         file_name,
diff --git a/packages/bot-web-ui/src/components/load-modal/__tests__/local-footer.spec.tsx b/packages/bot-web-ui/src/components/load-modal/__tests__/local-footer.spec.tsx
index 66d7d62b87d5..d1c9203d7e11 100644
--- a/packages/bot-web-ui/src/components/load-modal/__tests__/local-footer.spec.tsx
+++ b/packages/bot-web-ui/src/components/load-modal/__tests__/local-footer.spec.tsx
@@ -36,6 +36,7 @@ describe('LocalFooter', () => {
                 toggleLoadModal: jest.fn(),
                 setLoadedLocalFile: jest.fn(),
                 loadStrategyOnBotBuilder: jest.fn(),
+                saveStrategyToLocalStorage: jest.fn(),
                 preview_workspace: jest.fn() as unknown,
                 selected_strategy: jest.fn() as unknown,
                 tab_name: 'google_tab',
@@ -79,6 +80,7 @@ describe('LocalFooter', () => {
         userEvent.click(open_button);
 
         expect(mock_DBot_store?.load_modal.loadStrategyOnBotBuilder).toHaveBeenCalled();
+        expect(mock_DBot_store?.load_modal.saveStrategyToLocalStorage).toHaveBeenCalled();
         expect(mock_DBot_store?.load_modal.toggleLoadModal).toHaveBeenCalled();
         expect(mock_DBot_store?.dashboard.setPreviewOnPopup).toHaveBeenCalledWith(false);
         expect(mock_DBot_store?.dashboard.setOpenSettings).toHaveBeenCalledWith(NOTIFICATION_TYPE.BOT_IMPORT);
diff --git a/packages/bot-web-ui/src/components/load-modal/__tests__/recent-footer.spec.tsx b/packages/bot-web-ui/src/components/load-modal/__tests__/recent-footer.spec.tsx
index 25e4303eebfd..6b748797387e 100644
--- a/packages/bot-web-ui/src/components/load-modal/__tests__/recent-footer.spec.tsx
+++ b/packages/bot-web-ui/src/components/load-modal/__tests__/recent-footer.spec.tsx
@@ -16,11 +16,17 @@ jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => ({
 jest.mock('@deriv/bot-skeleton/src/scratch/hooks/block_svg', () => jest.fn());
 
 window.Blockly = {
-    derivWorkspace: { asyncClear: () => ({}) },
+    derivWorkspace: { asyncClear: () => ({}), cleanUp: () => ({}), clearUndo: () => ({}) },
     utils: {
         xml: { textToDom: jest.fn() },
     },
-    Xml: { domToWorkspace: () => ({}), textToDom: () => ({}) },
+    Xml: { domToWorkspace: () => ({}), textToDom: () => ({}), clearWorkspaceAndLoadFromXml: () => ({}) },
+    xmlValues: {
+        strategy_id: 'strategy_id',
+        file_name: 'strategy_name',
+        from: 'xml',
+        convertedDom: 'convertedDom',
+    },
 };
 
 describe('RecentFooter', () => {
diff --git a/packages/bot-web-ui/src/components/load-modal/__tests__/recent-workspace.spec.tsx b/packages/bot-web-ui/src/components/load-modal/__tests__/recent-workspace.spec.tsx
index 29fa6023537f..3f80c3dc7fef 100644
--- a/packages/bot-web-ui/src/components/load-modal/__tests__/recent-workspace.spec.tsx
+++ b/packages/bot-web-ui/src/components/load-modal/__tests__/recent-workspace.spec.tsx
@@ -47,4 +47,12 @@ describe('RecentWorkspace', () => {
         render(<RecentWorkspace workspace={mock_workspace} />, { wrapper });
         expect(screen.getByText('18 Oct 2023')).toBeInTheDocument();
     });
+
+    it('should update selected strategy ID on clicking the strategy', () => {
+        mock_DBot_store?.load_modal?.setRecentStrategies(mock_workspace);
+        render(<RecentWorkspace workspace={mock_workspace} />, { wrapper });
+        const recent_workspace_item = screen.getByTestId('dt_recent_workspace_item');
+        userEvent.click(recent_workspace_item);
+        expect(mock_DBot_store?.load_modal?.selected_strategy_id).toBe(mock_workspace.id);
+    });
 });
diff --git a/packages/bot-web-ui/src/components/load-modal/local-footer.tsx b/packages/bot-web-ui/src/components/load-modal/local-footer.tsx
index 07a79f536e25..4e8d7095dacb 100644
--- a/packages/bot-web-ui/src/components/load-modal/local-footer.tsx
+++ b/packages/bot-web-ui/src/components/load-modal/local-footer.tsx
@@ -8,8 +8,13 @@ import { useDBotStore } from 'Stores/useDBotStore';
 const LocalFooter = observer(() => {
     const { ui } = useStore();
     const { load_modal, dashboard } = useDBotStore();
-    const { is_open_button_loading, loadStrategyOnBotBuilder, loadFileFromLocal, setLoadedLocalFile, toggleLoadModal } =
-        load_modal;
+    const {
+        is_open_button_loading,
+        loadStrategyOnBotBuilder,
+        setLoadedLocalFile,
+        saveStrategyToLocalStorage,
+        toggleLoadModal,
+    } = load_modal;
     const { setOpenSettings, setPreviewOnPopup } = dashboard;
 
     const { is_desktop } = ui;
@@ -24,6 +29,8 @@ const LocalFooter = observer(() => {
                 text={localize('Open')}
                 onClick={() => {
                     loadStrategyOnBotBuilder();
+                    saveStrategyToLocalStorage();
+                    setLoadedLocalFile(null);
                     toggleLoadModal();
                     setPreviewOnPopup(false);
                     setOpenSettings(NOTIFICATION_TYPE.BOT_IMPORT);
diff --git a/packages/bot-web-ui/src/components/load-modal/recent-workspace.tsx b/packages/bot-web-ui/src/components/load-modal/recent-workspace.tsx
index 3c371cab9c20..8cc03cd64780 100644
--- a/packages/bot-web-ui/src/components/load-modal/recent-workspace.tsx
+++ b/packages/bot-web-ui/src/components/load-modal/recent-workspace.tsx
@@ -11,8 +11,15 @@ type TRecentWorkspaceProps = {
 };
 
 const RecentWorkspace = observer(({ workspace }: TRecentWorkspaceProps) => {
-    const { load_modal } = useDBotStore();
-    const { getRecentFileIcon, getSaveType, loadStrategyOnModalRecentPreview, selected_strategy_id } = load_modal;
+    const { load_modal, blockly_store } = useDBotStore();
+    const { setLoading } = blockly_store;
+    const {
+        getRecentFileIcon,
+        getSaveType,
+        loadStrategyOnModalRecentPreview,
+        selected_strategy_id,
+        updateXmlValuesForRecentStrategy,
+    } = load_modal;
 
     return (
         <div
@@ -21,7 +28,13 @@ const RecentWorkspace = observer(({ workspace }: TRecentWorkspaceProps) => {
             })}
             key={workspace.id}
             onClick={
-                selected_strategy_id === workspace.id ? undefined : () => loadStrategyOnModalRecentPreview(workspace.id)
+                selected_strategy_id === workspace.id
+                    ? undefined
+                    : () => {
+                          setLoading(true);
+                          loadStrategyOnModalRecentPreview(workspace.id);
+                          updateXmlValuesForRecentStrategy();
+                      }
             }
             data-testid='dt_recent_workspace_item'
         >
diff --git a/packages/bot-web-ui/src/stores/load-modal-store.ts b/packages/bot-web-ui/src/stores/load-modal-store.ts
index f338994f551c..7768229d53db 100644
--- a/packages/bot-web-ui/src/stores/load-modal-store.ts
+++ b/packages/bot-web-ui/src/stores/load-modal-store.ts
@@ -126,6 +126,8 @@ export default class LoadModalStore implements ILoadModalStore {
             onToggleDeleteDialog: action,
             loadStrategyOnModalRecentPreview: action,
             loadStrategyOnBotBuilder: action,
+            saveStrategyToLocalStorage: action,
+            updateXmlValuesForRecentStrategy: action,
         });
 
         this.root_store = root_store;
@@ -260,7 +262,12 @@ export default class LoadModalStore implements ILoadModalStore {
     };
 
     onEntered = (): void => {
+        if (this.recent_strategies.length === 0 || this.tab_name !== tabs_title.TAB_RECENT) return;
+        const { blockly_store } = this.root_store;
+        const { setLoading } = blockly_store;
+        setLoading(true);
         this.loadStrategyOnModalRecentPreview(this.selected_strategy_id);
+        this.updateXmlValuesForRecentStrategy();
     };
 
     onLoadModalClose = (): void => {
@@ -429,6 +436,7 @@ export default class LoadModalStore implements ILoadModalStore {
     onActiveIndexChange = (): void => {
         if (this.tab_name === tabs_title.TAB_RECENT) {
             this.loadStrategyOnModalRecentPreview(this.selected_strategy_id);
+            this.updateXmlValuesForRecentStrategy();
         } else if (this.recent_workspace) {
             setTimeout(() => {
                 // Dispose of recent workspace when switching away from Recent tab.
@@ -544,25 +552,33 @@ export default class LoadModalStore implements ILoadModalStore {
         showIncompatibleStrategyDialog: false,
     };
 
-    loadStrategyOnBotBuilder = async () => {
-        const { strategy_id, convertedDom, file_name, from = save_types.UNSAVED } = window.Blockly.xmlValues;
+    saveStrategyToLocalStorage = async () => {
         const { save_modal } = this.root_store;
         const { updateBotName } = save_modal;
+        const { convertedDom, from, file_name } = window.Blockly.xmlValues;
+        updateBotName(file_name);
+        await saveWorkspaceToRecent(convertedDom, from);
+        const recent_files = await getSavedWorkspaces();
+        if (recent_files?.length > 0) this.setSelectedStrategyId(recent_files[0]?.id);
+    };
 
+    loadStrategyOnBotBuilder = async () => {
+        const { strategy_id = window.Blockly.utils.idGenerator.genUid(), convertedDom } = window.Blockly.xmlValues;
         const derivWorkspace = window.Blockly.derivWorkspace;
 
         window.Blockly.Xml.clearWorkspaceAndLoadFromXml(convertedDom, derivWorkspace);
         derivWorkspace.cleanUp();
         derivWorkspace.clearUndo();
-        derivWorkspace.current_strategy_id = strategy_id || window.Blockly.utils.idGenerator.genUid();
-
-        updateBotName(file_name);
-
-        await saveWorkspaceToRecent(convertedDom, from);
+        derivWorkspace.current_strategy_id = strategy_id;
+    };
 
-        const recent_files = await getSavedWorkspaces();
-        if (recent_files?.length > 0) this.setSelectedStrategyId(recent_files[0]?.id);
-        this.setLoadedLocalFile(null);
+    updateXmlValuesForRecentStrategy = () => {
+        updateXmlValues({
+            strategy_id: this.selected_strategy_id,
+            convertedDom: window?.Blockly?.utils?.xml?.textToDom(this.selected_strategy?.xml),
+            file_name: this.selected_strategy?.name,
+            from: this.selected_strategy?.save_type || save_types.UNSAVED,
+        });
     };
 
     loadStrategyOnModalRecentPreview = async workspace_id => {
@@ -570,7 +586,6 @@ export default class LoadModalStore implements ILoadModalStore {
 
         const { blockly_store } = this.root_store;
         const { setLoading } = blockly_store;
-        setLoading(true);
 
         const inject_options = { ...inject_workspace_options, theme: window?.Blockly?.Themes?.zelos_renderer };
 
@@ -582,19 +597,12 @@ export default class LoadModalStore implements ILoadModalStore {
 
         if (!this.recent_workspace) this.recent_workspace = window.Blockly.inject(ref_preview, inject_options);
         (this.recent_workspace as any).RTL = isDbotRTL();
-        await load(this.workspaceOptions);
 
         const convertedDom = window.Blockly?.utils?.xml?.textToDom(this.selected_strategy?.xml);
         const mainWorkspace = window.Blockly?.getMainWorkspace();
 
         window.Blockly?.Xml?.clearWorkspaceAndLoadFromXml(convertedDom, mainWorkspace);
 
-        updateXmlValues({
-            strategy_id: this.selected_strategy_id,
-            convertedDom,
-            file_name: this.selected_strategy?.name,
-            from: this.selected_strategy?.save_type || save_types.UNSAVED,
-        });
         setLoading(false);
     };
 

From 917c98011598864c4bbbf4e61026514572920fe9 Mon Sep 17 00:00:00 2001
From: rupato-deriv <rupato@deriv.com>
Date: Fri, 16 Aug 2024 18:58:14 +0800
Subject: [PATCH 17/23] fix: when there is no strategy updated

---
 packages/bot-web-ui/src/stores/load-modal-store.ts | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/packages/bot-web-ui/src/stores/load-modal-store.ts b/packages/bot-web-ui/src/stores/load-modal-store.ts
index 7768229d53db..a10c853163f9 100644
--- a/packages/bot-web-ui/src/stores/load-modal-store.ts
+++ b/packages/bot-web-ui/src/stores/load-modal-store.ts
@@ -542,16 +542,6 @@ export default class LoadModalStore implements ILoadModalStore {
         reader.readAsText(file);
     };
 
-    workspaceOptions = {
-        block_string: this.selected_strategy?.xml,
-        drop_event: {},
-        workspace: this.recent_workspace,
-        file_name: this.selected_strategy?.name,
-        strategy_id: this.selected_strategy?.id,
-        from: this.selected_strategy?.save_type,
-        showIncompatibleStrategyDialog: false,
-    };
-
     saveStrategyToLocalStorage = async () => {
         const { save_modal } = this.root_store;
         const { updateBotName } = save_modal;
@@ -573,6 +563,7 @@ export default class LoadModalStore implements ILoadModalStore {
     };
 
     updateXmlValuesForRecentStrategy = () => {
+        if (this.recent_strategies.length === 0) return;
         updateXmlValues({
             strategy_id: this.selected_strategy_id,
             convertedDom: window?.Blockly?.utils?.xml?.textToDom(this.selected_strategy?.xml),

From b3c85dc3ff530edd002eda5554d5c3b8f880b52e Mon Sep 17 00:00:00 2001
From: rupato-deriv <rupato@deriv.com>
Date: Mon, 19 Aug 2024 11:54:01 +0800
Subject: [PATCH 18/23] fix: updated test recent-workspace test case and naming
 for functions

---
 .../__tests__/recent-workspace.spec.tsx       | 20 +++++++++++++++++--
 .../load-modal/recent-workspace.tsx           |  4 ++--
 .../bot-web-ui/src/stores/load-modal-store.ts | 17 ++++++++--------
 3 files changed, 29 insertions(+), 12 deletions(-)

diff --git a/packages/bot-web-ui/src/components/load-modal/__tests__/recent-workspace.spec.tsx b/packages/bot-web-ui/src/components/load-modal/__tests__/recent-workspace.spec.tsx
index 3f80c3dc7fef..cbbd663556bf 100644
--- a/packages/bot-web-ui/src/components/load-modal/__tests__/recent-workspace.spec.tsx
+++ b/packages/bot-web-ui/src/components/load-modal/__tests__/recent-workspace.spec.tsx
@@ -6,6 +6,7 @@ import { mock_ws } from 'Utils/mock';
 import RootStore from 'Stores/root-store';
 import { DBotStoreProvider, mockDBotStore } from 'Stores/useDBotStore';
 import RecentWorkspace from '../recent-workspace';
+import { TStrategy } from 'Types';
 
 jest.mock('@deriv/bot-skeleton/src/scratch/blockly', () => jest.fn());
 jest.mock('@deriv/bot-skeleton/src/scratch/dbot', () => ({
@@ -22,6 +23,21 @@ const mock_workspace = {
     xml: '<xml>Sample</xml>',
 };
 
+type TMockStrategy = Array<TStrategy>;
+
+const strategy = {
+    name: '',
+    xml: '',
+    save_type: '',
+    timestamp: 1,
+};
+
+const mock_strategy: TMockStrategy = [
+    { ...strategy, name: 'martingale', id: 'test-id-1' },
+    { ...strategy, name: 'd_alembert', id: 'test-id-1' },
+    { ...strategy, name: 'oscar_grind', id: 'test-id-1' },
+];
+
 describe('RecentWorkspace', () => {
     let wrapper: ({ children }: { children: JSX.Element }) => JSX.Element, mock_DBot_store: RootStore | undefined;
 
@@ -49,10 +65,10 @@ describe('RecentWorkspace', () => {
     });
 
     it('should update selected strategy ID on clicking the strategy', () => {
-        mock_DBot_store?.load_modal?.setRecentStrategies(mock_workspace);
+        mock_DBot_store?.load_modal?.setRecentStrategies(mock_strategy);
         render(<RecentWorkspace workspace={mock_workspace} />, { wrapper });
         const recent_workspace_item = screen.getByTestId('dt_recent_workspace_item');
         userEvent.click(recent_workspace_item);
-        expect(mock_DBot_store?.load_modal?.selected_strategy_id).toBe(mock_workspace.id);
+        expect(mock_DBot_store?.load_modal?.selected_strategy_id).toBe(mock_strategy[0].id);
     });
 });
diff --git a/packages/bot-web-ui/src/components/load-modal/recent-workspace.tsx b/packages/bot-web-ui/src/components/load-modal/recent-workspace.tsx
index 8cc03cd64780..5aa096c2f6e5 100644
--- a/packages/bot-web-ui/src/components/load-modal/recent-workspace.tsx
+++ b/packages/bot-web-ui/src/components/load-modal/recent-workspace.tsx
@@ -18,7 +18,7 @@ const RecentWorkspace = observer(({ workspace }: TRecentWorkspaceProps) => {
         getSaveType,
         loadStrategyOnModalRecentPreview,
         selected_strategy_id,
-        updateXmlValuesForRecentStrategy,
+        updateXmlValuesOnStrategySelection,
     } = load_modal;
 
     return (
@@ -33,7 +33,7 @@ const RecentWorkspace = observer(({ workspace }: TRecentWorkspaceProps) => {
                     : () => {
                           setLoading(true);
                           loadStrategyOnModalRecentPreview(workspace.id);
-                          updateXmlValuesForRecentStrategy();
+                          updateXmlValuesOnStrategySelection();
                       }
             }
             data-testid='dt_recent_workspace_item'
diff --git a/packages/bot-web-ui/src/stores/load-modal-store.ts b/packages/bot-web-ui/src/stores/load-modal-store.ts
index a10c853163f9..0e2515380f74 100644
--- a/packages/bot-web-ui/src/stores/load-modal-store.ts
+++ b/packages/bot-web-ui/src/stores/load-modal-store.ts
@@ -127,7 +127,7 @@ export default class LoadModalStore implements ILoadModalStore {
             loadStrategyOnModalRecentPreview: action,
             loadStrategyOnBotBuilder: action,
             saveStrategyToLocalStorage: action,
-            updateXmlValuesForRecentStrategy: action,
+            updateXmlValuesOnStrategySelection: action,
         });
 
         this.root_store = root_store;
@@ -142,9 +142,10 @@ export default class LoadModalStore implements ILoadModalStore {
             async is_load_modal_open => {
                 if (is_load_modal_open) {
                     const saved_workspaces = await getSavedWorkspaces();
-                    this.setRecentStrategies(saved_workspaces || []);
-                    if (!this.selected_strategy_id) {
-                        this.setSelectedStrategyId(saved_workspaces[0]?.id);
+                    if (!saved_workspaces) return;
+                    this.setRecentStrategies(saved_workspaces);
+                    if (saved_workspaces.length > 0 && !this.selected_strategy_id) {
+                        this.setSelectedStrategyId(saved_workspaces[0].id);
                     }
                 } else {
                     this.onLoadModalClose();
@@ -267,7 +268,7 @@ export default class LoadModalStore implements ILoadModalStore {
         const { setLoading } = blockly_store;
         setLoading(true);
         this.loadStrategyOnModalRecentPreview(this.selected_strategy_id);
-        this.updateXmlValuesForRecentStrategy();
+        this.updateXmlValuesOnStrategySelection();
     };
 
     onLoadModalClose = (): void => {
@@ -436,7 +437,7 @@ export default class LoadModalStore implements ILoadModalStore {
     onActiveIndexChange = (): void => {
         if (this.tab_name === tabs_title.TAB_RECENT) {
             this.loadStrategyOnModalRecentPreview(this.selected_strategy_id);
-            this.updateXmlValuesForRecentStrategy();
+            this.updateXmlValuesOnStrategySelection();
         } else if (this.recent_workspace) {
             setTimeout(() => {
                 // Dispose of recent workspace when switching away from Recent tab.
@@ -506,7 +507,7 @@ export default class LoadModalStore implements ILoadModalStore {
             rudderStackSendUploadStrategyStartEvent({ upload_provider: 'my_computer', upload_id: this.upload_id });
         }
         const reader = new FileReader();
-        const file_name = file?.name.replace(/\.[^/.]+$/, '');
+        const file_name = file?.name.replace(/\.[^/.]+$/, '') || '';
 
         reader.onload = action(async e => {
             const load_options = {
@@ -562,7 +563,7 @@ export default class LoadModalStore implements ILoadModalStore {
         derivWorkspace.current_strategy_id = strategy_id;
     };
 
-    updateXmlValuesForRecentStrategy = () => {
+    updateXmlValuesOnStrategySelection = () => {
         if (this.recent_strategies.length === 0) return;
         updateXmlValues({
             strategy_id: this.selected_strategy_id,

From 548d9869a05e40701ec44a2a1ee655639c949d8f Mon Sep 17 00:00:00 2001
From: rupato-deriv <rupato@deriv.com>
Date: Mon, 19 Aug 2024 21:12:34 +0800
Subject: [PATCH 19/23] fix: for cypress added disabled state for open

---
 .../src/components/load-modal/local-footer.tsx    |  2 ++
 .../src/components/load-modal/recent-footer.tsx   |  3 ++-
 .../bot-web-ui/src/stores/load-modal-store.ts     | 15 ++++++++++++++-
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/packages/bot-web-ui/src/components/load-modal/local-footer.tsx b/packages/bot-web-ui/src/components/load-modal/local-footer.tsx
index 4e8d7095dacb..eba03ffae0e5 100644
--- a/packages/bot-web-ui/src/components/load-modal/local-footer.tsx
+++ b/packages/bot-web-ui/src/components/load-modal/local-footer.tsx
@@ -10,6 +10,7 @@ const LocalFooter = observer(() => {
     const { load_modal, dashboard } = useDBotStore();
     const {
         is_open_button_loading,
+        is_open_button_disabled,
         loadStrategyOnBotBuilder,
         setLoadedLocalFile,
         saveStrategyToLocalStorage,
@@ -39,6 +40,7 @@ const LocalFooter = observer(() => {
                 has_effect
                 primary
                 large
+                disabled={is_open_button_disabled}
             />
         </Wrapper>
     );
diff --git a/packages/bot-web-ui/src/components/load-modal/recent-footer.tsx b/packages/bot-web-ui/src/components/load-modal/recent-footer.tsx
index 01bee6b0458a..b5653eaac833 100644
--- a/packages/bot-web-ui/src/components/load-modal/recent-footer.tsx
+++ b/packages/bot-web-ui/src/components/load-modal/recent-footer.tsx
@@ -7,7 +7,7 @@ import { useDBotStore } from 'Stores/useDBotStore';
 
 const RecentFooter = observer(() => {
     const { load_modal, dashboard } = useDBotStore();
-    const { is_open_button_loading, loadStrategyOnBotBuilder, toggleLoadModal } = load_modal;
+    const { is_open_button_loading, is_open_button_disabled, loadStrategyOnBotBuilder, toggleLoadModal } = load_modal;
     const { setOpenSettings } = dashboard;
 
     return (
@@ -22,6 +22,7 @@ const RecentFooter = observer(() => {
             has_effect
             primary
             large
+            disabled={is_open_button_disabled}
         />
     );
 });
diff --git a/packages/bot-web-ui/src/stores/load-modal-store.ts b/packages/bot-web-ui/src/stores/load-modal-store.ts
index 0e2515380f74..196c37f492ee 100644
--- a/packages/bot-web-ui/src/stores/load-modal-store.ts
+++ b/packages/bot-web-ui/src/stores/load-modal-store.ts
@@ -36,6 +36,7 @@ interface ILoadModalStore {
     selected_strategy_id: string | undefined;
     is_strategy_removed: boolean;
     is_delete_modal_open: boolean;
+    is_open_button_disabled: boolean;
     current_workspace_id: string;
     preview_workspace: Blockly.WorkspaceSvg | null;
     selected_strategy: TStrategy;
@@ -50,6 +51,7 @@ interface ILoadModalStore {
         is_body: boolean
     ) => boolean;
     loadFileFromLocal: () => void;
+    loadStrategyOnBotBuilder: () => void;
     onActiveIndexChange: () => void;
     onDriveConnect: () => void;
     onDriveOpen: () => void;
@@ -70,6 +72,7 @@ interface ILoadModalStore {
     updateListStrategies: (workspaces: Array<TStrategy>) => void;
     getRecentFileIcon: (save_type: { [key: string]: string } | string) => string;
     getSaveType: (save_type: { [key: string]: string } | string) => string;
+    setOpenButtonDisabled: (is_open_button_disabled: boolean) => void;
 }
 
 export default class LoadModalStore implements ILoadModalStore {
@@ -84,7 +87,6 @@ export default class LoadModalStore implements ILoadModalStore {
             previewed_strategy_id: observable,
             is_load_modal_open: observable,
             is_explanation_expand: observable,
-            is_open_button_loading: observable,
             is_strategy_loaded: observable,
             is_delete_modal_open: observable,
             is_strategy_removed: observable,
@@ -97,6 +99,8 @@ export default class LoadModalStore implements ILoadModalStore {
             preview_workspace: computed,
             selected_strategy: computed,
             tab_name: computed,
+            is_open_button_disabled: observable,
+            setOpenButtonDisabled: action.bound,
             setPreviewedStrategyId: action.bound,
             getSelectedStrategyID: action.bound,
             refreshStrategies: action.bound,
@@ -162,6 +166,7 @@ export default class LoadModalStore implements ILoadModalStore {
     is_load_modal_open = false;
     is_explanation_expand = false;
     is_open_button_loading = false;
+    is_open_button_disabled = false;
     loaded_local_file: File | null = null;
     recent_strategies: Array<TStrategy> = [];
     dashboard_strategies: Array<TStrategy> | [] = [];
@@ -196,6 +201,10 @@ export default class LoadModalStore implements ILoadModalStore {
         return '';
     }
 
+    setOpenButtonDisabled = (is_open_button_disabled: boolean) => {
+        this.is_open_button_disabled = is_open_button_disabled;
+    };
+
     setPreviewedStrategyId = (clicked_id: string) => {
         this.previewed_strategy_id = clicked_id;
     };
@@ -574,6 +583,7 @@ export default class LoadModalStore implements ILoadModalStore {
     };
 
     loadStrategyOnModalRecentPreview = async workspace_id => {
+        this.setOpenButtonDisabled(true);
         if (this.recent_strategies.length === 0 || this.tab_name !== tabs_title.TAB_RECENT) return;
 
         const { blockly_store } = this.root_store;
@@ -596,9 +606,11 @@ export default class LoadModalStore implements ILoadModalStore {
         window.Blockly?.Xml?.clearWorkspaceAndLoadFromXml(convertedDom, mainWorkspace);
 
         setLoading(false);
+        this.setOpenButtonDisabled(false);
     };
 
     loadStrategyOnModalLocalPreview = async load_options => {
+        this.setOpenButtonDisabled(true);
         const injectWorkspace = { ...inject_workspace_options, theme: window?.Blockly?.Themes?.zelos_renderer };
         const ref = document?.getElementById('load-strategy__blockly-container');
 
@@ -610,5 +622,6 @@ export default class LoadModalStore implements ILoadModalStore {
         }
 
         await load(load_options);
+        this.setOpenButtonDisabled(false);
     };
 }

From c7d0d6b16e376f23cb1da47135d6ca531f7b98b8 Mon Sep 17 00:00:00 2001
From: rupato-deriv <rupato@deriv.com>
Date: Mon, 19 Aug 2024 21:24:58 +0800
Subject: [PATCH 20/23] fix: for setting disabled button on active tab change

---
 packages/bot-web-ui/src/stores/load-modal-store.ts | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/bot-web-ui/src/stores/load-modal-store.ts b/packages/bot-web-ui/src/stores/load-modal-store.ts
index 196c37f492ee..ba92d7449ae1 100644
--- a/packages/bot-web-ui/src/stores/load-modal-store.ts
+++ b/packages/bot-web-ui/src/stores/load-modal-store.ts
@@ -273,11 +273,13 @@ export default class LoadModalStore implements ILoadModalStore {
 
     onEntered = (): void => {
         if (this.recent_strategies.length === 0 || this.tab_name !== tabs_title.TAB_RECENT) return;
+        this.setOpenButtonDisabled(true);
         const { blockly_store } = this.root_store;
         const { setLoading } = blockly_store;
         setLoading(true);
         this.loadStrategyOnModalRecentPreview(this.selected_strategy_id);
         this.updateXmlValuesOnStrategySelection();
+        this.setOpenButtonDisabled(false);
     };
 
     onLoadModalClose = (): void => {
@@ -444,6 +446,7 @@ export default class LoadModalStore implements ILoadModalStore {
     };
 
     onActiveIndexChange = (): void => {
+        this.setOpenButtonDisabled(true);
         if (this.tab_name === tabs_title.TAB_RECENT) {
             this.loadStrategyOnModalRecentPreview(this.selected_strategy_id);
             this.updateXmlValuesOnStrategySelection();
@@ -479,6 +482,7 @@ export default class LoadModalStore implements ILoadModalStore {
         if (this.tab_name !== tabs_title.TAB_LOCAL && this.drop_zone) {
             this.drop_zone.removeEventListener('drop', event => this.handleFileChange(event, false));
         }
+        this.setOpenButtonDisabled(false);
     };
 
     handleFileChange = (

From e7f7cb15bd715bdd3f82fdce967c534399e42c76 Mon Sep 17 00:00:00 2001
From: rupato-deriv <rupato@deriv.com>
Date: Wed, 21 Aug 2024 11:52:06 +0800
Subject: [PATCH 21/23] fix: for cypress loading strategy

---
 packages/bot-skeleton/src/scratch/utils/index.js   | 4 +++-
 packages/bot-web-ui/src/stores/load-modal-store.ts | 1 -
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/bot-skeleton/src/scratch/utils/index.js b/packages/bot-skeleton/src/scratch/utils/index.js
index 7bc3488e70c4..e3736165bdfb 100644
--- a/packages/bot-skeleton/src/scratch/utils/index.js
+++ b/packages/bot-skeleton/src/scratch/utils/index.js
@@ -143,7 +143,8 @@ export const load = async ({
     showIncompatibleStrategyDialog,
 }) => {
     if (!DBotStore?.instance || !workspace) return;
-    const { setLoading } = DBotStore.instance;
+    const { setLoading, load_modal } = DBotStore.instance;
+    const { setOpenButtonDisabled } = load_modal;
     setLoading(true);
     // Delay execution to allow fully previewing previous strategy if users quickly switch between strategies.
     await delayExecution(100);
@@ -235,6 +236,7 @@ export const load = async ({
         return showInvalidStrategyError();
     } finally {
         setLoading(false);
+        setOpenButtonDisabled(false);
     }
 };
 
diff --git a/packages/bot-web-ui/src/stores/load-modal-store.ts b/packages/bot-web-ui/src/stores/load-modal-store.ts
index ba92d7449ae1..5166af785e15 100644
--- a/packages/bot-web-ui/src/stores/load-modal-store.ts
+++ b/packages/bot-web-ui/src/stores/load-modal-store.ts
@@ -626,6 +626,5 @@ export default class LoadModalStore implements ILoadModalStore {
         }
 
         await load(load_options);
-        this.setOpenButtonDisabled(false);
     };
 }

From dd9d7396c992b944c9ab78bd0fb692395879b476 Mon Sep 17 00:00:00 2001
From: rupato-deriv <rupato@deriv.com>
Date: Mon, 26 Aug 2024 12:55:57 +0800
Subject: [PATCH 22/23] fix: refactored onrecentworkspace click

---
 .../components/load-modal/recent-workspace.tsx  | 17 ++++++++---------
 1 file changed, 8 insertions(+), 9 deletions(-)

diff --git a/packages/bot-web-ui/src/components/load-modal/recent-workspace.tsx b/packages/bot-web-ui/src/components/load-modal/recent-workspace.tsx
index 5aa096c2f6e5..f455b5f94fe7 100644
--- a/packages/bot-web-ui/src/components/load-modal/recent-workspace.tsx
+++ b/packages/bot-web-ui/src/components/load-modal/recent-workspace.tsx
@@ -21,21 +21,20 @@ const RecentWorkspace = observer(({ workspace }: TRecentWorkspaceProps) => {
         updateXmlValuesOnStrategySelection,
     } = load_modal;
 
+    const onRecentWorkspaceClick = () => {
+        if (selected_strategy_id === workspace.id) return;
+        setLoading(true);
+        loadStrategyOnModalRecentPreview(workspace.id);
+        updateXmlValuesOnStrategySelection();
+    };
+
     return (
         <div
             className={classnames('load-strategy__recent-item', {
                 'load-strategy__recent-item--selected': selected_strategy_id === workspace.id,
             })}
             key={workspace.id}
-            onClick={
-                selected_strategy_id === workspace.id
-                    ? undefined
-                    : () => {
-                          setLoading(true);
-                          loadStrategyOnModalRecentPreview(workspace.id);
-                          updateXmlValuesOnStrategySelection();
-                      }
-            }
+            onClick={onRecentWorkspaceClick}
             data-testid='dt_recent_workspace_item'
         >
             <div className='load-strategy__recent-item-text'>

From cb7aff8f33ca55dec3a2f45f64ad4f8d914c62cd Mon Sep 17 00:00:00 2001
From: rupato-deriv <rupato@deriv.com>
Date: Mon, 26 Aug 2024 16:25:58 +0800
Subject: [PATCH 23/23] fix: removed unused values

---
 packages/bot-web-ui/src/stores/dashboard-store.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/bot-web-ui/src/stores/dashboard-store.ts b/packages/bot-web-ui/src/stores/dashboard-store.ts
index d98aac0772ba..176609c7aea0 100644
--- a/packages/bot-web-ui/src/stores/dashboard-store.ts
+++ b/packages/bot-web-ui/src/stores/dashboard-store.ts
@@ -167,10 +167,6 @@ export default class DashboardStore implements IDashboardStore {
             ...getQuickStrategyContent,
         ];
 
-        const {
-            load_modal: { previewRecentStrategy, current_workspace_id },
-        } = this.root_store;
-
         const refreshBotBuilderTheme = () => {
             Blockly.derivWorkspace.asyncClear();
             Blockly.Xml.domToWorkspace(