Merge pull request binary-com#5 from sandeep-deriv/sandeep/73382/dbot…

…-add-charts

Sandeep/73382/dbot add charts

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

@@ -1,10 +1,11 @@
 import React from 'react';
-import { connect } from 'Stores/connect';
 import RootStore from 'Stores/index';
+import AppStore from 'Stores/app-store';
+import { connect } from 'Stores/connect';
 import WorkspaceWrapper from './workspace-wrapper';
 
 interface BotBuilderProps {
-    app: any;
+    app: AppStore;
 }
 
 const BotBuilder = ({ app }: BotBuilderProps) => {

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

@@ -54,4 +54,6 @@
         left: 232px;
         background-color: var(--general-main-1);
     }
+    &__run-stretegy-wrapper {
+    }
 }

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

@@ -1,35 +1,40 @@
 import React from 'react';
-import { Tabs, Icon } from '@deriv/components';
+import { Tabs, Icon, Tab } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import Chart from 'Components/chart';
 import DashboardComponents from './dashboard-components';
 import SideBar from './dashboard-components/Sidebar';
-import RunPanel from '../run-panel';
 import ReactJoyride from 'react-joyride';
 import JoyrideConfig from './joyrideConfig';
 import BotBuilder from './bot-builder';
+import classNames from 'classnames';
+import RunPanel from './run-panel';
+import RunStretegy from '../toolbar/runStrategy';
+import { connect } from 'Stores/connect';
+import RootStore from 'Stores/index';
 
-interface SideBarProps {
-    checkIfSidebarOpen: boolean;
-    children: React.ReactElement;
+interface DashboardProps {
+    active_tab: number;
+    setActiveTab: (active_tab: number) => void;
 }
 
-const Dashboard = (props: SideBarProps) => {
-    const [active_index, setActiveTabIndex] = React.useState<number>(0);
+const Dashboard = ({ active_tab, setActiveTab }: DashboardProps) => {
     const [showSideBar, setshowSideBar] = React.useState<boolean>(true);
-    const dashBoradClass = 'dashboard__container ';
-    const sidebarClasstoggle = showSideBar === false ? 'w-100' : '';
     const { DashBorardSteps } = JoyrideConfig;
     const [tourRun, setTourRun] = React.useState<boolean>(true);
-    const handleClick = (e: React.MouseEvent) => {
+    const handleClick = (e: any) => {
         e.preventDefault();
         setTourRun(true);
     };
+
     return (
         <div className='main_dashboard_container'>
-            <div className={dashBoradClass + sidebarClasstoggle}>
+            <div className={classNames('dashboard__container', { 'w-100': !showSideBar })}>
+                <div className='dashboard__run-stretegy-wrapper'>
+                    <RunStretegy />
+                </div>
                 <ReactJoyride steps={DashBorardSteps} run={tourRun} continuous={true} showProgress={true} />
-                <Tabs active_index={active_index} onTabItemClick={setActiveTabIndex} top>
+                <Tabs active_index={active_tab} onTabItemClick={setActiveTab} top>
                     {/* [Todo] needs to update tabs comIcDashBoardComponentsTabponent children instead of using label property */}
                     <div icon='IcDashboardComponentTab' label={localize('Dashboard')}>
                         <DashboardComponents />
@@ -59,4 +64,7 @@ const Dashboard = (props: SideBarProps) => {
     );
 };
 
-export default Dashboard;
+export default connect((store: RootStore) => ({
+    active_tab: store.dashbaord.active_tab,
+    setActiveTab: store.dashbaord.setActiveTab,
+}))(Dashboard);

packages/bot-web-ui/src/components/dashboard/run-panel/index.ts

@@ -0,0 +1,3 @@
+import RunPanel from './run-panel';
+
+export default RunPanel;

packages/bot-web-ui/src/components/dashboard/run-panel/run-panel.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+const RunPanel = () => {
+    return <div className='dashboard__run-panel'>Run Panel</div>;
+};
+
+export default RunPanel;

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

@@ -0,0 +1,18 @@
+import { makeObservable, observable, action } from 'mobx';
+
+export default class DashboardStore {
+    constructor(root_store) {
+        makeObservable(this, {
+            active_tab: observable,
+            setActiveTab: action.bound,
+        });
+
+        this.root_store = root_store;
+    }
+
+    active_tab = 0;
+
+    setActiveTab(active_tab) {
+        this.active_tab = active_tab;
+    }
+}

packages/bot-web-ui/src/stores/index.js

@@ -19,6 +19,7 @@ import BlocklyStore from './blockly-store';
 import SelfExclusionStore from './self-exclusion-store';
 import ToolboxStore from './toolbox-store';
 import AppStore from './app-store';
+import DashboardStore from './dashboard-store';
 
 export default class RootStore {
     constructor(core, ws, dbot) {
@@ -47,6 +48,7 @@ export default class RootStore {
         this.quick_strategy = new QuickStrategyStore(this);
         this.route_prompt_dialog = new RoutePromptDialogStore(this);
         this.self_exclusion = new SelfExclusionStore(this);
+        this.dashbaord = new DashboardStore(this);
 
         // need to be at last for dependency
         this.chart_store = new ChartStore(this);