Feature dashboard tab && bot preview && joyride configuration

packages/bot-skeleton/src/utils/workspace.js

@@ -31,7 +31,7 @@ export const removeLimitedBlocks = (workspace, block_types) => {
 
     types.forEach(block_type => {
         if (config.single_instance_blocks.includes(block_type)) {
-            workspace.getAllBlocks().forEach(ws_block => {
+            workspace?.getAllBlocks().forEach(ws_block => {
                 if (ws_block.type === block_type) {
                     ws_block.dispose();
                 }

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

@@ -1,3 +1,4 @@
 import BotBuilder from './bot-builder';
+import './workspace.scss';
 
 export default BotBuilder;

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

@@ -0,0 +1,10 @@
+import React from 'react';
+import TradeAnimation from 'Components/trade-animation';
+
+const RunStrategy = () => (
+    <div className='toolbar__section'>
+        <TradeAnimation className='toolbar__animation' should_show_overlay info_direction='left' />
+    </div>
+);
+
+export default RunStrategy;

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

@@ -1,13 +1,132 @@
-import React from 'react';
-import { Icon, Dialog } from '@deriv/components';
+import { Button, Icon, Popover, Dialog } from '@deriv/components';
 import { Localize, localize } from '@deriv/translations';
+import React from 'react';
 import LoadModal from 'Components/load-modal';
 import SaveModal from 'Components/save-modal';
 import { tabs_title } from 'Constants/bot-contents';
+import { popover_zindex } from 'Constants/z-indexes';
 import { connect } from 'Stores/connect';
 import RootStore from 'Stores/index';
-import ToolbarButton from './toolbar-button';
-import WorkspaceGroup from './workspace-group';
+
+type TIconButton = {
+    popover_message: string;
+    icon: string;
+    icon_id: string;
+    iconOnClick: () => void;
+    icon_color?: string;
+};
+
+const IconButton = ({ popover_message, icon, icon_id, icon_color, iconOnClick }: TIconButton) => (
+    <Popover alignment='bottom' message={popover_message} zIndex={popover_zindex.TOOLBAR} should_disable_pointer_events>
+        <Icon
+            icon={icon}
+            id={icon_id}
+            className='toolbar__icon'
+            onClick={iconOnClick}
+            {...(icon_color ? { color: icon_color } : null)}
+        />
+    </Popover>
+);
+
+type TToolbarButton = {
+    popover_message?: string;
+    button_id: string;
+    button_classname: string;
+    buttonOnClick: () => void;
+    icon: React.ReactElement;
+    button_text: string;
+};
+
+const ToolbarButton = ({
+    popover_message,
+    button_id,
+    button_classname,
+    buttonOnClick,
+    icon,
+    button_text,
+}: TToolbarButton) => (
+    <Popover alignment='bottom' message={popover_message} should_disable_pointer_events>
+        <Button id={button_id} className={button_classname} has_effect onClick={buttonOnClick} icon={icon} green>
+            {button_text}
+        </Button>
+    </Popover>
+);
+
+type TWorkspaceGroup = {
+    has_redo_stack: boolean;
+    has_undo_stack: boolean;
+    onResetClick: () => void;
+    onSortClick: () => void;
+    onUndoClick: (param?: boolean) => void;
+    onZoomInOutClick: (param?: boolean) => void;
+    toggleLoadModal: () => void;
+    toggleSaveModal: () => void;
+};
+
+const WorkspaceGroup = ({
+    has_redo_stack,
+    has_undo_stack,
+    onResetClick,
+    onSortClick,
+    onUndoClick,
+    onZoomInOutClick,
+    toggleLoadModal,
+    toggleSaveModal,
+}: TWorkspaceGroup) => (
+    <div className='toolbar__group toolbar__group-btn'>
+        <IconButton
+            popover_message={localize('Reset')}
+            icon='IcReset'
+            icon_id='db-toolbar__reset-button'
+            iconOnClick={onResetClick}
+        />
+        <IconButton
+            popover_message={localize('Import')}
+            icon='IcFolderOpen'
+            icon_id='db-toolbar__import-button'
+            iconOnClick={toggleLoadModal}
+        />
+        <IconButton
+            popover_message={localize('Save')}
+            icon='IcSave'
+            icon_id='db-toolbar__save-button'
+            iconOnClick={toggleSaveModal}
+        />
+        <div className='vertical-divider' />
+        <IconButton
+            popover_message={localize('Undo')}
+            icon='IcUndo'
+            icon_id='db-toolbar__undo-button'
+            icon_color={has_undo_stack ? undefined : 'disabled'}
+            iconOnClick={() => onUndoClick(/* redo */ false)}
+        />
+        <IconButton
+            popover_message={localize('Redo')}
+            icon='IcRedo'
+            icon_id='db-toolbar__redo-button'
+            icon_color={has_redo_stack ? undefined : 'disabled'}
+            iconOnClick={() => onUndoClick(/* redo */ true)}
+        />
+        <IconButton
+            popover_message={localize('Sort')}
+            icon='IcSort'
+            icon_id='db-toolbar__sort-button'
+            iconOnClick={onSortClick}
+        />
+        <IconButton
+            popover_message={localize('Zoom in')}
+            icon='IcZoomIn'
+            icon_id='db-toolbar__zoom-in-button'
+            iconOnClick={() => onZoomInOutClick(/* in */ true)}
+        />
+        <IconButton
+            popover_message={localize('Zoom out')}
+            icon='IcZoomOut'
+            icon_id='db-toolbar__zoom-out'
+            iconOnClick={() => onZoomInOutClick(/* in */ false)}
+        />
+    </div>
+);
 
 type TToolbar = {
     active_tab: string;

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

@@ -1,11 +1,61 @@
 import React from 'react';
 import classNames from 'classnames';
-import { Icon, Text } from '@deriv/components';
+import { Field as FormField, Formik, Form, FieldProps } from 'formik';
+import { Input, Icon, Text } from '@deriv/components';
 import { localize } from '@deriv/translations';
 import { ToolboxItems } from './toolbox-items';
 import { connect } from '../../../../stores/connect';
-import RootStore from 'Stores/index.js';
-import SearchBox from './search-box';
+import RootStore from 'Stores/index';
+
+type TSearchBox = {
+    is_search_loading: boolean;
+    onSearch: () => void;
+    onSearchBlur: () => void;
+    onSearchClear: (
+        param: (field: string, value: number | string, shouldValidate?: boolean | undefined) => void
+    ) => void;
+    onSearchKeyUp: (param: () => void) => void;
+};
+
+type TFormValues = { [key: string]: string };
+
+const SearchBox = ({ is_search_loading, onSearch, onSearchBlur, onSearchClear, onSearchKeyUp }: TSearchBox) => (
+    <div className='db-toolbox__search'>
+        <Formik initialValues={{ search: '' }} onSubmit={onSearch}>
+            {({ submitForm, values: { search }, setFieldValue }) => (
+                <Form>
+                    <FormField name='search'>
+                        {({ field }: FieldProps<string, TFormValues>) => (
+                            <Input
+                                {...field}
+                                className='db-toolbox__search-field'
+                                type='text'
+                                name='search'
+                                placeholder={localize('Search')}
+                                onKeyUp={() => onSearchKeyUp(submitForm)}
+                                onFocus={submitForm}
+                                onBlur={onSearchBlur}
+                                leading_icon={
+                                    (search &&
+                                        (is_search_loading ? (
+                                            <div className='loader' />
+                                        ) : (
+                                            <Icon
+                                                icon='IcCloseCircle'
+                                                onClick={() => onSearchClear(setFieldValue)}
+                                                color='secondary'
+                                            />
+                                        ))) ||
+                                    (!search && <Icon icon='IcSearch' />)
+                                }
+                            />
+                        )}
+                    </FormField>
+                </Form>
+            )}
+        </Formik>
+    </div>
+);
 
 type TToolbox = {
     hasSubCategory: (param: HTMLCollection) => boolean;
@@ -58,20 +108,12 @@ const Toolbox = ({
                 <div className='db-toolbox__header'>
                     <div className='db-toolbox__title' onClick={() => setOpen(!is_open)}>
                         {localize('Blocks menu')}
-                        <span
-                            className={classNames('db-toolbox__title__chevron', {
-                                'db-toolbox__title__chevron--active': is_open,
-                            })}
-                        >
+                        <span className={classNames('chevron', { active: is_open })}>
                             <Icon icon='IcChevronDownBold' />
                         </span>
                     </div>
                 </div>
-                <div
-                    className={classNames('db-toolbox__content-wrapper', {
-                        'db-toolbox__content-wrapper--active': is_open,
-                    })}
-                >
+                <div className={classNames('db-toolbox__content-wrapper', { active: is_open })}>
                     <SearchBox
                         is_search_loading={is_search_loading}
                         onSearch={onSearch}

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

@@ -35,8 +35,8 @@ const WorkspaceWrapper = ({ onMount, onUnmount, is_loading }: TWorkspaceWrapper)
     );
 };
 
-export default connect((store: RootStore) => ({
-    onMount: store.blockly_store.onMount,
-    onUnmount: store.blockly_store.onUnmount,
-    is_loading: store.blockly_store.is_loading,
+export default connect(({ blockly_store }: RootStore) => ({
+    onMount: blockly_store.onMount,
+    onUnmount: blockly_store.onUnmount,
+    is_loading: blockly_store.is_loading,
 }))(WorkspaceWrapper);