Skip to content

Commit

Permalink
chore: show snackbar if strategy changed while running bot
Browse files Browse the repository at this point in the history
  • Loading branch information
shafin-deriv committed Sep 29, 2023
1 parent a028efc commit ff1ee1e
Show file tree
Hide file tree
Showing 5 changed files with 132 additions and 2 deletions.
1 change: 1 addition & 0 deletions packages/bot-web-ui/src/app/app.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,5 @@
--zindex-drawer: 5;
--zindex-modal: 6;
--zindex-draggable-modal: 7;
--zindex-snackbar: 8;
}
36 changes: 36 additions & 0 deletions packages/bot-web-ui/src/components/bot-snackbar/bot-snackbar.scss
Original file line number Diff line number Diff line change
@@ -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;
}
}
50 changes: 50 additions & 0 deletions packages/bot-web-ui/src/components/bot-snackbar/bot-snackbar.tsx
Original file line number Diff line number Diff line change
@@ -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;
4 changes: 4 additions & 0 deletions packages/bot-web-ui/src/components/bot-snackbar/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
import BotSnackbar from './bot-snackbar';
import './bot-snackbar.scss';

export default BotSnackbar;
Original file line number Diff line number Diff line change
@@ -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);
Expand All @@ -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,
Expand Down

0 comments on commit ff1ee1e

Please sign in to comment.