fix: refactored dark mode

packages/bot-skeleton/src/scratch/dbot.js

@@ -70,12 +70,15 @@ class DBot {
                 // Push main.xml to workspace and reset the undo stack.
                 this.workspace.current_strategy_id = Blockly.utils.genUid();
                 Blockly.derivWorkspace.strategy_to_load = main_xml;
+                Blockly.mainWorkspace.strategy_to_load = main_xml;
                 let file_name = config.default_file_name;
                 if (recent_files && recent_files.length) {
                     const latest_file = recent_files[0];
                     Blockly.derivWorkspace.strategy_to_load = latest_file.xml;
+                    Blockly.mainWorkspace.strategy_to_load = latest_file.xml;
                     file_name = latest_file.name;
                     Blockly.derivWorkspace.current_strategy_id = latest_file.id;
+                    Blockly.mainWorkspace.current_strategy_id = latest_file.id;
                 }
 
                 const event_group = `dbot-load${Date.now()}`;

packages/bot-web-ui/src/app/app-content.jsx

@@ -32,6 +32,7 @@ const AppContent = observer(() => {
     // TODO: Remove this when connect is removed completely
     const combinedStore = { ...DBotStores, core: { ...RootStore } };
 
+    //Do not remove this is for the bot-skeleton package to load blockly with the theme
     React.useEffect(() => {
         setColors(is_dark_mode_on);
     }, [is_dark_mode_on]);

packages/bot-web-ui/src/components/dashboard/bot-builder/bot-builder.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
 import { DesktopWrapper, MobileWrapper } from '@deriv/components';
-import { setColors, blocksCoordinate } from '@deriv/bot-skeleton';
 import LoadModal from 'Components/load-modal';
 import SaveModal from 'Components/save-modal';
 import ReactJoyrideWrapper from '../react-joyride-wrapper';
@@ -32,34 +31,16 @@ const BotBuilder = ({
     has_started_onboarding_tour,
     has_started_bot_builder_tour,
     is_preview_on_popup,
-    is_dark_mode_on,
-    selected_strategy_id,
-    loadFileFromRecent,
-    previewRecentStrategy,
 }: TBotBuilder) => {
     const [is_tour_running] = React.useState<boolean>(true);
     const { onMount, onUnmount } = app;
     const el_ref = React.useRef<HTMLInputElement | null>(null);
 
-    //removed used effect here because dark mode is an observable and the component will rerender
-    setColors(is_dark_mode_on);
-    previewRecentStrategy(selected_strategy_id);
-
-    React.useEffect(() => {
-        if (active_tab === 1) {
-            loadFileFromRecent();
-        }
-    }, [is_dark_mode_on]);
-
     React.useEffect(() => {
         onMount();
         return () => onUnmount();
     }, []);
 
-    React.useEffect(() => {
-        if (active_tab === 1) blocksCoordinate();
-    }, [active_tab]);
-
     return (
         <>
             <div
@@ -112,15 +93,11 @@ const BotBuilder = ({
     );
 };
 
-export default connect(({ app, dashboard, load_modal, ui }: RootStore) => ({
+export default connect(({ app, dashboard }: RootStore) => ({
     app,
     active_tab: dashboard.active_tab,
     has_started_onboarding_tour: dashboard.has_started_onboarding_tour,
     has_started_bot_builder_tour: dashboard.has_started_bot_builder_tour,
     is_preview_on_popup: dashboard.is_preview_on_popup,
-    is_dark_mode_on: ui.is_dark_mode_on,
-    loadFileFromRecent: load_modal.loadFileFromRecent,
     setOnBoardTourRunState: dashboard.setOnBoardTourRunState,
-    previewRecentStrategy: load_modal.previewRecentStrategy,
-    selected_strategy_id: load_modal.selected_strategy_id,
 }))(BotBuilder);

packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/recent-workspace.tsx

@@ -17,6 +17,7 @@ type TRecentWorkspace = {
     getRecentFileIcon: (string: string) => void;
     getSaveType: (type: string) => string;
     index: number;
+    getSelectedStrategyID: (current_workspace_id: string) => void;
     loadFileFromRecent: () => void;
     onToggleDeleteDialog: (is_delete_modal_open: boolean) => void;
     previewRecentStrategy: (workspaceId: string) => void;
@@ -37,6 +38,7 @@ const RecentWorkspace = ({
     onToggleDeleteDialog,
     previewRecentStrategy,
     selected_strategy_id,
+    getSelectedStrategyID,
     setActiveTab,
     setPreviewOnDialog,
     toggleSaveModal,
@@ -109,6 +111,7 @@ const RecentWorkspace = ({
                 e.stopPropagation(); //stop event bubbling for child element
                 if (is_dropdown_visible) setDropdownVisibility(false);
                 viewRecentStrategy(STRATEGY.PREVIEW);
+                getSelectedStrategyID(workspace.id);
             }}
         >
             <div className='load-strategy__recent-item-text'>
@@ -193,6 +196,7 @@ export default connect(({ load_modal, dashboard, save_modal }: RootStore) => ({
     dashboard_strategies: load_modal.dashboard_strategies,
     getRecentFileIcon: load_modal.getRecentFileIcon,
     getSaveType: load_modal.getSaveType,
+    getSelectedStrategyID: load_modal.getSelectedStrategyID,
     loadFileFromRecent: load_modal.loadFileFromRecent,
     onToggleDeleteDialog: load_modal.onToggleDeleteDialog,
     previewRecentStrategy: load_modal.previewRecentStrategy,

packages/bot-web-ui/src/components/dashboard/dashboard-component/load-bot-preview/recent.tsx

@@ -28,17 +28,13 @@ const RecentComponent = ({
     strategy_save_type,
 }: TRecentComponent) => {
     React.useEffect(() => {
-        setTimeout(() => {
-            getSavedWorkspaces().then(recent_strategies => setDashboardStrategies(recent_strategies));
-        }, 2000);
         setStrategySaveType('');
         //this dependency is used when we use the save modal popup
     }, [strategy_save_type]);
 
     const is_mobile = isMobile();
 
     if (!dashboard_strategies?.length) return null;
-
     return (
         <div className='load-strategy__container load-strategy__container--has-footer'>
             <div className='load-strategy__recent'>

packages/bot-web-ui/src/stores/dashboard-store.ts

@@ -1,8 +1,9 @@
-import { observable, action, reaction, makeObservable } from 'mobx';
+import { observable, action, computed, reaction, makeObservable } from 'mobx';
 import { tour_type, setTourSettings, TTourType } from '../components/dashboard/joyride-config';
 import RootStore from './root-store';
 import { clearInjectionDiv } from 'Constants/load-modal';
 import { isMobile } from '@deriv/shared';
+import { setColors, blocksCoordinate } from '@deriv/bot-skeleton';
 
 export interface IDashboardStore {
     active_tab: number;
@@ -61,6 +62,7 @@ export default class DashboardStore implements IDashboardStore {
             is_info_panel_visible: observable,
             is_preview_on_popup: observable,
             is_tour_dialog_visible: observable,
+            is_dark_mode: computed,
             onCloseDialog: action.bound,
             onCloseTour: action.bound,
             onTourEnd: action.bound,
@@ -88,6 +90,30 @@ export default class DashboardStore implements IDashboardStore {
             setStrategySaveType: action.bound,
         });
         this.root_store = root_store;
+        const {
+            load_modal: { previewRecentStrategy, current_workspace_id },
+        } = this.root_store;
+
+        const refreshBotBuilderTheme = () => {
+            Blockly.derivWorkspace.asyncClear();
+            Blockly.Xml.domToWorkspace(
+                Blockly.Xml.textToDom(Blockly.derivWorkspace.strategy_to_load),
+                Blockly.derivWorkspace
+            );
+        };
+
+        reaction(
+            () => this.is_dark_mode,
+            () => {
+                setColors(this.is_dark_mode);
+                if (this.active_tab === 1) {
+                    refreshBotBuilderTheme();
+                } else {
+                    refreshBotBuilderTheme();
+                    previewRecentStrategy(current_workspace_id);
+                }
+            }
+        );
         reaction(
             () => this.is_preview_on_popup,
             async is_preview_on_popup => {
@@ -122,6 +148,17 @@ export default class DashboardStore implements IDashboardStore {
     strategy_save_type = 'unsaved';
     toast_message = '';
 
+    get is_dark_mode() {
+        const {
+            app: {
+                core: {
+                    ui: { is_dark_mode_on },
+                },
+            },
+        } = this.root_store;
+        return is_dark_mode_on;
+    }
+
     setOpenSettings = (toast_message: string, show_toast = true) => {
         this.toast_message = toast_message;
         this.show_toast = show_toast;
@@ -194,16 +231,13 @@ export default class DashboardStore implements IDashboardStore {
 
     setActiveTab = (active_tab: number): void => {
         this.active_tab = active_tab;
-        if (active_tab === 1) {
-            const {
-                load_modal: { previewRecentStrategy, selected_strategy_id },
-            } = this.root_store;
-            previewRecentStrategy(selected_strategy_id);
-        }
         if (this.has_started_bot_builder_tour) {
             this.setTourActive(false);
             this.setBotBuilderTourState(false);
         }
+        if (this.active_tab === 1) {
+            blocksCoordinate();
+        }
     };
 
     setActiveTabTutorial = (active_tab_tutorials: number): void => {

packages/bot-web-ui/src/stores/load-modal-store.ts

@@ -1,8 +1,16 @@
-import { config, getSavedWorkspaces, load, removeExistingWorkspace, save_types, setColors } from '@deriv/bot-skeleton';
+import {
+    config,
+    getSavedWorkspaces,
+    load,
+    removeExistingWorkspace,
+    save_types,
+    setColors,
+    observer as globalObserver,
+} from '@deriv/bot-skeleton';
 import { isMobile } from '@deriv/shared';
 import { localize } from '@deriv/translations';
 import { tabs_title, clearInjectionDiv } from 'Constants/load-modal';
-import { action, computed, makeObservable, observable, reaction } from 'mobx';
+import { action, computed, makeObservable, observable, reaction, autorun } from 'mobx';
 import React from 'react';
 import RootStore from './root-store';
 
@@ -26,6 +34,8 @@ interface ILoadModalStore {
     selected_strategy_id: string[] | string | undefined;
     is_strategy_removed: boolean;
     is_delete_modal_open: boolean;
+    current_workspace_id: string;
+    getSelectedStrategyID: (current_workspace_id: string) => void;
     refreshStrategies: () => void;
     refreshStrategiesTheme: () => void;
     preview_workspace: () => void;
@@ -71,9 +81,11 @@ export default class LoadModalStore implements ILoadModalStore {
             recent_strategies: observable,
             dashboard_strategies: observable,
             selected_strategy_id: observable,
+            current_workspace_id: observable,
             preview_workspace: computed,
             selected_strategy: computed,
             tab_name: computed,
+            getSelectedStrategyID: action.bound,
             refreshStrategies: action.bound,
             refreshStrategiesTheme: action.bound,
             handleFileChange: action.bound,
@@ -114,6 +126,19 @@ export default class LoadModalStore implements ILoadModalStore {
                 }
             }
         );
+
+        const loadStrategies = async () => {
+            try {
+                const timeout = (ms: number) => {
+                    return new Promise(resolve => setTimeout(resolve, ms));
+                };
+                await timeout(1000);
+                this.setDashboardStrategies((await getSavedWorkspaces()) || []);
+            } catch (error) {
+                globalObserver.emit('Error', error);
+            }
+        };
+        loadStrategies();
     }
 
     recent_workspace;
@@ -131,6 +156,7 @@ export default class LoadModalStore implements ILoadModalStore {
     is_strategy_loaded = false;
     is_delete_modal_open = false;
     is_strategy_removed = false;
+    current_workspace_id = '';
 
     get preview_workspace() {
         if (this.tab_name === tabs_title.TAB_LOCAL) return this.local_workspace;
@@ -155,6 +181,10 @@ export default class LoadModalStore implements ILoadModalStore {
         return '';
     }
 
+    getSelectedStrategyID = (current_workspace_id: string) => {
+        this.current_workspace_id = current_workspace_id;
+    };
+
     setDashboardStrategies(strategies: Array<TWorkspace>) {
         this.dashboard_strategies = strategies;
         if (!strategies.length) {
@@ -220,6 +250,13 @@ export default class LoadModalStore implements ILoadModalStore {
             file_name: this.selected_strategy.name,
             workspace: Blockly.derivWorkspace,
         });
+        const recent_files = await getSavedWorkspaces();
+        recent_files.map(stratagy => {
+            const { xml, id } = stratagy;
+            if (this.selected_strategy.id === id) {
+                Blockly.derivWorkspace.strategy_to_load = xml;
+            }
+        });
         this.is_open_button_loading = false;
     };
 
@@ -312,6 +349,7 @@ export default class LoadModalStore implements ILoadModalStore {
 
     previewRecentStrategy = (workspace_id: string): void => {
         this.setSelectedStrategyId(workspace_id);
+        if (!workspace_id) this.setSelectedStrategyId(this.current_workspace_id);
         if (!this.selected_strategy) {
             return;
         }

packages/bot-web-ui/src/stores/toolbar-store.ts

@@ -70,6 +70,7 @@ export default class ToolbarStore implements IToolbarStore {
                     file_name: config.default_file_name,
                     workspace,
                 });
+                Blockly.derivWorkspace.strategy_to_load = workspace.cached_xml.main;
             },
             'reset'
         );

packages/components/stories/icon/icons.js

@@ -376,6 +376,7 @@ export const icons =
         'IcEmailOutlineNew',
         'IcEmailOutline',
         'IcEmailSentDashboard',
+        'IcEmailSentExpired',
         'IcEmailSentP2p',
         'IcEmailSent',
         'IcEmailSpam',