[BOT]maryia/feat: [Server Bot] - [Improvement] - Summary and Journal …

…panels (#16809)

* feat: [Server Bot] - [Improvement] - Summary and Journal panels

* fix: change some logic

* fix: change approach of showing pop-up dialog on Journal and Transactions tabs

* refactor: solution

* refactor: solution(2)

* chore: remove unused prop

* fix: change the variant of passing function prop to minimize re-renders

packages/bot-web-ui/src/pages/server-side-bot/bot-list/clear-journal-transactions.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import { Dialog, Text } from '@deriv/components';
+import { Localize, localize } from '@deriv/translations';
+import { useDBotStore } from 'Stores/useDBotStore';
+import { observer } from '@deriv/stores';
+
+type TDeleteServerBot = {
+    is_open: boolean;
+    setVisibility: (is_open: boolean) => void;
+};
+
+const ClearJournalTransactions = observer(({ is_open, setVisibility }: TDeleteServerBot) => {
+    const { server_bot } = useDBotStore();
+    const { resetJournal, resetTransactions } = server_bot;
+    const onOkButtonClick = () => {
+        resetJournal();
+        resetTransactions();
+        setVisibility(false);
+    };
+
+    return (
+        <Dialog
+            title={localize('Are you sure?')}
+            is_visible={is_open}
+            confirm_button_text={localize('Ok')}
+            onConfirm={onOkButtonClick}
+            cancel_button_text={localize('Cancel')}
+            onCancel={() => setVisibility(false)}
+            onClose={() => setVisibility(false)}
+            is_mobile_full_width={false}
+            className={'dc-dialog__wrapper--fixed'}
+            portal_element_id='modal_root'
+            has_close_icon
+        >
+            <Text color='prominent' line_height='xl' size='xs'>
+                <Localize i18n_default_text='This will clear all data in the summary and journal panels. All counters will be reset to zero.' />
+            </Text>
+        </Dialog>
+    );
+});
+
+export default ClearJournalTransactions;

packages/bot-web-ui/src/pages/server-side-bot/journal/journal.tsx

@@ -9,17 +9,20 @@ import { useDBotStore } from 'Stores/useDBotStore';
 
 type TJournal = {
     setActiveTabIndex: (index: number) => void;
+    setClearDialogVisibility: (is_clear_dialog_visible: boolean) => void;
 };
 
-const Journal: React.FC<TJournal> = observer(({ setActiveTabIndex }) => {
+const Journal = observer(({ setActiveTabIndex, setClearDialogVisibility }: TJournal) => {
     const {
         client: { currency },
     } = useStore();
     const { server_bot } = useDBotStore();
-    const { journal, resetJournal, downloadJournal } = server_bot;
+    const { active_bot, journal, downloadJournal } = server_bot;
     const has_journal = !!journal.length;
     const font_size = 'xxs';
     const uid = 'journal';
+    const is_bot_running = active_bot?.status !== 'stopped';
+    const should_disable = !has_journal || is_bot_running;
 
     React.useEffect(() => {
         const last_journal = journal?.[journal.length - 1];
@@ -137,10 +140,10 @@ const Journal: React.FC<TJournal> = observer(({ setActiveTabIndex }) => {
                 )}
             </div>
             <div className='ssb-journal__footer'>
-                <Button secondary disabled={!has_journal} onClick={() => resetJournal()}>
+                <Button secondary disabled={should_disable} onClick={() => setClearDialogVisibility(true)}>
                     <Localize i18n_default_text='Reset' />
                 </Button>
-                <Button secondary disabled={!has_journal} onClick={() => downloadJournal()}>
+                <Button secondary disabled={should_disable} onClick={downloadJournal}>
                     <Localize i18n_default_text='Download' />
                 </Button>
             </div>

packages/bot-web-ui/src/pages/server-side-bot/performance-panel/performance-panel.tsx

@@ -3,18 +3,26 @@ import { Tabs } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import Journal from '../journal';
 import Summary from '../summary';
+import ClearJournalTransactions from '../bot-list/clear-journal-transactions';
 
-const PerformancePanel: React.FC = () => {
+const PerformancePanel = () => {
     const [active_index, setActiveTabIndex] = React.useState(0);
+    const [is_clear_dialog_visible, setClearDialogVisibility] = React.useState(false);
     return (
-        <Tabs active_index={active_index} onTabItemClick={setActiveTabIndex} top className='ssb'>
-            <div id='db-run-panel-tab__summary' label={localize('Summary')}>
-                <Summary />
-            </div>
-            <div id='db-run-panel-tab__journal' label={localize('Journal')}>
-                <Journal setActiveTabIndex={setActiveTabIndex} />
-            </div>
-        </Tabs>
+        <>
+            <Tabs active_index={active_index} onTabItemClick={setActiveTabIndex} top className='ssb'>
+                <div id='db-run-panel-tab__summary' label={localize('Summary')}>
+                    <Summary setClearDialogVisibility={setClearDialogVisibility} />
+                </div>
+                <div id='db-run-panel-tab__journal' label={localize('Journal')}>
+                    <Journal
+                        setActiveTabIndex={setActiveTabIndex}
+                        setClearDialogVisibility={setClearDialogVisibility}
+                    />
+                </div>
+            </Tabs>
+            <ClearJournalTransactions is_open={is_clear_dialog_visible} setVisibility={setClearDialogVisibility} />
+        </>
     );
 };
 

packages/bot-web-ui/src/pages/server-side-bot/summary/summary.tsx

@@ -5,6 +5,10 @@ import { observer, useStore } from '@deriv/stores';
 import { Localize } from '@deriv/translations';
 import { useDBotStore } from 'Stores/useDBotStore';
 
+type TSummary = {
+    setClearDialogVisibility: (is_clear_dialog_visible: boolean) => void;
+};
+
 const STATUS = Object.freeze({
     open: {
         text: <Localize i18n_default_text='Running' />,
@@ -29,16 +33,20 @@ const STATUS = Object.freeze({
     },
 });
 
-const Summary: React.FC = observer(() => {
+const Summary = observer(({ setClearDialogVisibility }: TSummary) => {
     const { server_bot } = useDBotStore();
     const { client } = useStore();
     const { currency } = client;
-    const { transactions, active_bot, performance, resetTransactions } = server_bot;
+    const { transactions, active_bot, performance } = server_bot;
     const { bot_id } = active_bot;
     const bot_transactions = bot_id ? transactions[bot_id] : {};
 
     const txns = bot_transactions ? Object.values(bot_transactions) : [];
     const has_summary = !!txns?.length;
+    // when we allow multiple bots to run at the same time, it should be an array
+    // const is_some_bot_running = active_bots.every(item => item.status !== 'stopped');
+    const is_bot_running = active_bot?.status !== 'stopped';
+
     return (
         <div className='ssb-summary'>
             <div className='ssb-summary__content'>
@@ -147,7 +155,11 @@ const Summary: React.FC = observer(() => {
                     </ul>
                 </div>
                 <div className='ssb-summary__footer__actions'>
-                    <Button secondary disabled={!has_summary} onClick={() => resetTransactions()}>
+                    <Button
+                        secondary
+                        disabled={!has_summary || is_bot_running}
+                        onClick={() => setClearDialogVisibility(true)}
+                    >
                         <Localize i18n_default_text='Reset' />
                     </Button>
                 </div>