chore: update all the jquery draggable modals to react based modal

src/blockly/blockly-worksace.js

@@ -133,37 +133,8 @@ const setElementActions = blockly => {
     addEventHandlers(blockly);
 };
 
-const exportContent = {
-    'summary-panel': () => {
-        globalObserver.emit('summary.export');
-    },
-    logPanel: () => {
-        globalObserver.emit('log.export');
-    },
-};
-
-const addExportButtonToPanel = panelId => {
-    const buttonHtml =
-        '<button class="icon-save" style="position:absolute;top:50%;margin:-10px 0 0 0;right:2em;padding:0.2em"></button>';
-    const $button = $(buttonHtml);
-    const panelSelector = `[aria-describedby="${panelId}"]`;
-    if (!$(`${panelSelector} .icon-save`).length) {
-        $button.insertBefore(`${panelSelector} .icon-close`);
-        $(`${panelSelector} .icon-close`).blur();
-        $($(`${panelSelector} .icon-save`)).click(() => {
-            exportContent[panelId]();
-        });
-    }
-};
-
 export const showSummary = () => {
-    $('#summary-panel').dialog('option', 'minWidth', 770).dialog('open');
-    addExportButtonToPanel('summary-panel');
-};
-
-export const logButton = () => {
-    $('#logPanel').dialog('open');
-    addExportButtonToPanel('logPanel');
+    globalObserver.emit('summary.show');
 };
 
 const addBindings = blockly => {
@@ -271,14 +242,6 @@ const addBindings = blockly => {
         }, 300)
     );
 
-    $('[aria-describedby="summary-panel"]').on('click', '#summaryRunButton', () => {
-        $('#runButton').trigger('click');
-    });
-
-    $('[aria-describedby="summary-panel"]').on('click', '#summaryStopButton', () => {
-        $('#stopButton').trigger('click');
-    });
-
     globalObserver.register('ui.switch_account', () => {
         stopBlockly(blockly);
         GTM.setVisitorId();

src/blockly/bot/tools.js

@@ -182,8 +182,15 @@ export const createDetails = (contract, pip_size) => {
 
 export const getUUID = () => `${new Date().getTime() * Math.random()}`;
 
-export const showDialog = options =>
-    new Promise((resolve, reject) => {
+export const showDialog = options => {
+    const draggableModals = document.getElementsByClassName('draggable');
+    if (draggableModals.length) {
+        Array.from(draggableModals).forEach(dialog => {
+            dialog.style.zIndex = 100;
+        });
+    }
+
+    return new Promise((resolve, reject) => {
         const $dialog = $('<div/>', { class: `draggable-dialog ${options.className}`, title: options.title });
         options.text.forEach(text => $dialog.append(`<p style="margin: 0.7em;">${text}</p>`));
         const defaultButtons = [
@@ -223,3 +230,4 @@ export const showDialog = options =>
         $dialog.dialog(dialogOptions);
         $dialog.dialog('open');
     });
+};

src/botPage/view/TradeInfoPanel/RunButton.js

@@ -3,12 +3,22 @@ import { translate } from '@i18n';
 
 const RunButton = () => (
     <React.Fragment>
-        <button title='Run the bot' id='summaryRunButton' className='toolbox-button icon-run' />
+        <button
+            title='Run the bot'
+            id='summaryRunButton'
+            className='toolbox-button icon-run'
+            onClick={() => {
+                $('#runButton').trigger('click');
+            }}
+        />
         <button
             title={translate('Stop the bot')}
             id='summaryStopButton'
             className='toolbox-button icon-stop'
             style={{ display: 'none' }}
+            onClick={() => {
+                $('#stopButton').trigger('click');
+            }}
         />
     </React.Fragment>
 );

src/botPage/view/TradeInfoPanel/index.js

@@ -1,15 +1,17 @@
 import React from 'react';
 import { translate } from '@i18n';
 import { observer as globalObserver } from '@utilities/observer';
+import PropTypes from 'prop-types';
 import AnimateTrade from './AnimateTrade';
 import Summary from './Summary';
 import TradeTable from './TradeTable';
 import RunButton from './RunButton';
 import ClearButton from './ClearButton';
 import useIsMounted from '../../../common/hooks/isMounted';
 import './summary-panel.scss';
+import { DraggableResizeWrapper } from '../../../components/Draggable';
 
-const TradeInfoPanel = () => {
+const TradeInfoPanelContent = () => {
     const [account_id, setAccountId] = React.useState('');
     const [account_id_list, setAccountIdList] = React.useState([]);
 
@@ -30,7 +32,7 @@ const TradeInfoPanel = () => {
     }, []);
 
     return (
-        <span id='summary-panel' className='draggable-dialog' title={translate('Summary')}>
+        <span id='summary-panel'>
             <div>
                 <div className='content'>
                     <div className='content-row'>
@@ -65,4 +67,44 @@ const TradeInfoPanel = () => {
     );
 };
 
+const TradeInfoPanel = ({ setShowSummary, show_summary }) => (
+    <div
+        style={{
+            visibility: show_summary ? 'visible' : 'hidden',
+            opacity: show_summary ? 1 : 0,
+        }}
+    >
+        <DraggableResizeWrapper
+            boundary={show_summary ? 'body' : '.main'}
+            minWidth={770}
+            minHeight={710}
+            modalHeight={710}
+            modalWidth={770}
+            header={
+                <div className='log-table__header-container'>
+                    <span>{translate('Summary')}</span>
+                    <span>
+                        <button
+                            className='icon-save'
+                            onClick={() => {
+                                globalObserver.emit('summary.export');
+                            }}
+                        />
+                    </span>
+                </div>
+            }
+            onClose={() => {
+                setShowSummary(is_shown => !is_shown);
+            }}
+        >
+            <TradeInfoPanelContent />
+        </DraggableResizeWrapper>
+    </div>
+);
+
+TradeInfoPanel.propTypes = {
+    setShowSummary: PropTypes.func.isRequired,
+    show_summary: PropTypes.bool.isRequired,
+};
+
 export default TradeInfoPanel;

src/botPage/view/TradeInfoPanel/summary-panel.scss

@@ -8,6 +8,21 @@
 
     .content-row {
         margin-bottom: 1em;
+
+        &-table {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+
+    table {
+        td {
+            text-align: center !important;
+            padding: 3px !important;
+            height: 2em;
+            font-size: 11px;
+        }
     }
 
     p {

src/botPage/view/LogTable.js → src/botPage/view/log-table.js

@@ -6,8 +6,10 @@ import { Table, Column, CellMeasurerCache } from 'react-virtualized';
 import { translate } from '@i18n';
 import { saveAs, appendRow } from '@utils';
 import { observer as globalObserver } from '@utilities/observer';
+import { DraggableResizeWrapper } from '../../components/Draggable';
+import './log-table.scss';
 
-const Logtable = () => {
+const LogTableContent = () => {
     const [id, setId] = React.useState(0);
     const [rows, setRows] = React.useState([]);
     const [widths, setWidths] = React.useState({
@@ -108,8 +110,8 @@ const Logtable = () => {
     );
 
     return (
-        <span id='logPanel' className='draggable-dialog' title={translate('Log')}>
-            <div id='logTable' className='logTable-scroll'>
+        <span id='logPanel' className='logpanel'>
+            <div id='logtable' className='logTable-scroll logtable'>
                 <div className='content-row'>
                     <div>
                         <div className='content-row-table'>
@@ -147,8 +149,44 @@ const Logtable = () => {
     );
 };
 
-Logtable.propTypes = {
-    rows: PropTypes.array,
+const LogTable = ({ setShowLogTable, show_log_table }) => (
+    <div
+        style={{
+            visibility: show_log_table ? 'visible' : 'hidden',
+            opacity: show_log_table ? 1 : 0,
+        }}
+    >
+        <DraggableResizeWrapper
+            boundary={show_log_table ? 'body' : '.main'}
+            minWidth={770}
+            minHeight={600}
+            modalHeight={600}
+            modalWidth={770}
+            header={
+                <div className='log-table__header-container'>
+                    <span>{translate('Log')}</span>
+                    <span>
+                        <button
+                            className='icon-save'
+                            onClick={() => {
+                                globalObserver.emit('log.export');
+                            }}
+                        />
+                    </span>
+                </div>
+            }
+            onClose={() => {
+                setShowLogTable(is_shown => !is_shown);
+            }}
+        >
+            <LogTableContent />
+        </DraggableResizeWrapper>
+    </div>
+);
+
+LogTable.propTypes = {
+    setShowLogTable: PropTypes.func.isRequired,
+    show_log_table: PropTypes.bool.isRequired,
 };
 
-export default Logtable;
+export default LogTable;

src/botPage/view/log-table.scss

@@ -0,0 +1,24 @@
+.logpanel {
+    .logtable {
+        position: relative;
+        top: -12px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
+
+.log-table {
+    &__header-container {
+        display: flex;
+        width: 100%;
+        align-items: center;
+        flex-direction: row;
+        justify-content: space-between;
+
+        .icon-save {
+            padding: 0.2em;
+            margin-right: 8px;
+        }
+    }
+}

src/components/Draggable/Draggable.jsx

@@ -215,8 +215,12 @@ const Draggable = ({
             style={{ position: 'absolute', top: position.y, left: position.x, zIndex }}
         >
             <div ref={draggableRef} className='draggable-content' style={{ width: size.width, height: size.height }}>
-                <div className='draggable-content__header' onMouseDown={e => handleMouseDown(e, MOVE)}>
-                    <div>{header}</div>
+                <div
+                    id='draggable-content__header'
+                    className='draggable-content__header'
+                    onMouseDown={e => handleMouseDown(e, MOVE)}
+                >
+                    <div className='draggable-content__header-title'>{header}</div>
                     <div>
                         <button
                             type='button'

src/components/Draggable/draggable.scss

@@ -18,13 +18,17 @@
             color: #fff;
             border: 1px solid var(--color-blue);
             border-radius: 3px;
+            width: 100%;
             &__title {
                 font-size: 16px;
                 font-weight: 700;
             }
             &__close {
                 cursor: pointer;
             }
+            &-title {
+                width: 100%;
+            }
         }
         &__body {
             padding: 2px;

src/components/Main/main.jsx

@@ -15,26 +15,38 @@ import { observer as globalObserver } from '@utilities/observer';
 import logHandler from '@utilities/logger';
 import { loginAndSetTokens } from '../../common/appId';
 import Blockly from '../../blockly';
-import LogTable from '../../botPage/view/LogTable';
 import TradeInfoPanel from '../../botPage/view/TradeInfoPanel';
 import initialize, { applyToolboxPermissions } from '../../blockly/blockly-worksace';
 import BotUnavailableMessage from '../Error/bot-unavailable-message-page';
 import MoveToDbotBanner from '../Banner/move-to-dbot-banner';
 import Chart from '../Dialogs/Chart';
 import GoogleDriveModal from '../Dialogs/IntegrationsDialog';
 import TradingView from '../Dialogs/TradingView';
+import LogTable from '../../botPage/view/log-table';
 
 const Main = () => {
     const [blockly, setBlockly] = React.useState(null);
     const [is_workspace_rendered, setIsWorkspaceRendered] = React.useState(false);
     const [show_chart, setShowChart] = React.useState(false);
     const [show_google_drive, setShowGoogleDrive] = React.useState(false);
     const [show_trading_view, setShowTradingView] = React.useState(false);
+    const [show_log_table, setShowLogTable] = React.useState(false);
+    const [show_summary, setShowSummary] = React.useState(false);
     const dispatch = useDispatch();
     const navigate = useNavigate();
     const { should_reload_workspace } = useSelector(state => state.ui);
     const query_object = useQuery();
 
+    const showSummary = () => setShowSummary(true);
+
+    React.useEffect(() => {
+        globalObserver.register('summary.show', showSummary);
+        return () => {
+            globalObserver.unregister('summary.show', showSummary);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
     React.useEffect(() => {
         logHandler();
     }, [logHandler]);
@@ -153,19 +165,21 @@ const Main = () => {
                             setShowChart={setShowChart}
                             setShowGoogleDrive={setShowGoogleDrive}
                             setShowTradingView={setShowTradingView}
+                            setShowLogTable={setShowLogTable}
+                            setShowSummary={setShowSummary}
                         />
                         {show_chart && <Chart setShowChart={setShowChart} />}
                         {show_google_drive && <GoogleDriveModal setShowGoogleDrive={setShowGoogleDrive} />}
                         {show_trading_view && <TradingView setShowTradingView={setShowTradingView} />}
+                        {<LogTable setShowLogTable={setShowLogTable} show_log_table={show_log_table} />}
+                        {<TradeInfoPanel setShowSummary={setShowSummary} show_summary={show_summary} />}
                     </>
                 )}
                 {/* Blockly workspace will be injected here */}
                 <div id='blocklyArea'>
                     <div id='blocklyDiv' style={{ position: 'absolute' }}></div>
                     <SidebarToggle />
                 </div>
-                {blockly && <LogTable />}
-                {blockly && <TradeInfoPanel />}
             </div>
         </div>
     );