chore: show snackbar if strategy changed while running bot

packages/bot-web-ui/src/app/app.scss

@@ -15,4 +15,5 @@
     --zindex-drawer: 5;
     --zindex-modal: 6;
     --zindex-draggable-modal: 7;
+    --zindex-snackbar: 8;
 }

packages/bot-web-ui/src/components/bot-snackbar/bot-snackbar.scss

@@ -0,0 +1,36 @@
+.bot-snackbar {
+    position: fixed;
+    z-index: var(--zindex-snackbar);
+    right: 38rem;
+    top: 12rem;
+
+    .dc-toast {
+        width: 100%;
+        &__message {
+            background: var(--text-prominent);
+            color: var(--general-main-1);
+            padding: 1rem 1.6rem;
+        }
+        &__message-content {
+            display: flex;
+
+            @include mobile {
+                align-items: center;
+            }
+        }
+    }
+
+    @include mobile {
+        top: unset;
+        left: 0;
+        right: 0;
+        bottom: 10.5rem;
+    }
+
+    .notification-close {
+        cursor: pointer;
+        filter: invert(1);
+        margin-left: 1rem;
+        margin-top: 0.1rem;
+    }
+}

packages/bot-web-ui/src/components/bot-snackbar/bot-snackbar.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from 'react';
+import { Icon, Toast } from '@deriv/components';
+import { Localize } from '@deriv/translations';
+
+type TBotSnackbar = {
+    className?: string;
+    is_open?: boolean;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+    handleClose: () => void;
+    type?: 'error' | 'info' | 'notification';
+    timeout?: number;
+    msg_localize_components?: JSX.Element[];
+    message: string;
+};
+
+const BotSnackbar = ({
+    message = '',
+    msg_localize_components = [],
+    timeout = 6000,
+    is_open = false,
+    onClick,
+    handleClose,
+    type,
+    className,
+}: TBotSnackbar) => {
+    const [notification_timer, setNotificationTimer] = useState(timeout);
+
+    return (
+        <div
+            onMouseOver={() => {
+                setNotificationTimer(20000);
+            }}
+            onMouseLeave={() => {
+                setNotificationTimer(timeout);
+            }}
+            className={className ?? 'bot-snackbar'}
+        >
+            <Toast is_open={is_open} type={type} timeout={notification_timer} onClick={onClick} onClose={handleClose}>
+                <div>{message && <Localize i18n_default_text={message} components={msg_localize_components} />}</div>
+                <Icon
+                    icon='IcCross'
+                    className={'bot-snackbar-notification-close'}
+                    data_testid={'bot-snackbar-notification-close'}
+                    onClick={handleClose}
+                />
+            </Toast>
+        </div>
+    );
+};
+export default BotSnackbar;

packages/bot-web-ui/src/components/bot-snackbar/index.tsx

@@ -0,0 +1,4 @@
+import BotSnackbar from './bot-snackbar';
+import './bot-snackbar.scss';
+
+export default BotSnackbar;

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

@@ -1,16 +1,20 @@
-import React from 'react';
+import React, { useRef, useState } from 'react';
 import classNames from 'classnames';
 import { observer } from '@deriv/stores';
 import { useDBotStore } from '../../../stores/useDBotStore';
+import BotSnackbar from '../../bot-snackbar';
 import LoadModal from '../../load-modal';
 import SaveModal from '../dashboard-component/load-bot-preview/save-modal';
 import BotBuilderTourHandler from '../dbot-tours/bot-builder-tour';
 import QuickStrategy from '../quick-strategy';
 import WorkspaceWrapper from './workspace-wrapper';
 
 const BotBuilder = observer(() => {
-    const { dashboard, app } = useDBotStore();
+    const { dashboard, app, run_panel } = useDBotStore();
     const { active_tab, active_tour, is_preview_on_popup } = dashboard;
+    const { is_running } = run_panel;
+    const is_blockly_listener_registered = useRef(false);
+    const [show_snackbar, setShowSnackbar] = useState(false);
 
     const { onMount, onUnmount } = app;
     const el_ref = React.useRef<HTMLInputElement | null>(null);
@@ -20,8 +24,43 @@ const BotBuilder = observer(() => {
         return () => onUnmount();
     }, []);
 
+    const handleBlockChangeOnBotRun = (e: Event) => {
+        if (e.type !== 'ui') {
+            setShowSnackbar(true);
+            removeBlockChangeListener();
+        }
+    };
+
+    const removeBlockChangeListener = () => {
+        is_blockly_listener_registered.current = false;
+        window.Blockly?.derivWorkspace?.removeChangeListener(handleBlockChangeOnBotRun);
+    };
+
+    React.useEffect(() => {
+        const workspace = window.Blockly?.derivWorkspace;
+        if (workspace && is_running && !is_blockly_listener_registered.current) {
+            is_blockly_listener_registered.current = true;
+            workspace.addChangeListener(handleBlockChangeOnBotRun);
+        } else {
+            setShowSnackbar(false);
+            removeBlockChangeListener();
+        }
+
+        return () => {
+            if (workspace && is_blockly_listener_registered.current) {
+                removeBlockChangeListener();
+            }
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [is_running]);
+
     return (
         <>
+            <BotSnackbar
+                is_open={show_snackbar}
+                message='Changes you make will not affect your running bot.'
+                handleClose={() => setShowSnackbar(false)}
+            />
             <div
                 className={classNames('bot-builder', {
                     'bot-builder--active': active_tab === 1 && !is_preview_on_popup,