-
- {is_mobile &&
- {has_dashboard_strategies && !is_mobile && (
-
diff --git a/src/pages/dashboard/load-bot-preview/dashboard-bot-list.tsx b/src/pages/dashboard/load-bot-preview/dashboard-bot-list.tsx
new file mode 100644
index 00000000..4b9b3bc3
--- /dev/null
+++ b/src/pages/dashboard/load-bot-preview/dashboard-bot-list.tsx
@@ -0,0 +1,100 @@
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+
+import MobileWrapper from '@/components/shared_ui/mobile-wrapper';
+import Text from '@/components/shared_ui/text';
+import { getSavedWorkspaces } from '@/external/bot-skeleton';
+import { useStore } from '@/hooks/useStore';
+import { Localize, localize } from '@/utils/tmp/dummy';
+
+import DeleteDialog from './delete-dialog';
+import RecentWorkspace from './recent-workspace';
+import SaveModal from './save-modal';
+
+import './index.scss';
+
+type THeader = {
+ label: string;
+ className: string;
+};
+
+const HEADERS: THeader[] = [
+ {
+ label: localize('Bot name'),
+ className: 'bot-list__header__label',
+ },
+ {
+ label: localize('Last modified'),
+ className: 'bot-list__header__time-stamp',
+ },
+ {
+ label: localize('Status'),
+ className: 'bot-list__header__load-type',
+ },
+];
+
+const DashboardBotList = observer(() => {
+ const { load_modal, dashboard } = useStore();
+ const { setDashboardStrategies, dashboard_strategies } = load_modal;
+ const { setStrategySaveType, strategy_save_type } = dashboard;
+ const { ui } = useStore();
+ const { is_mobile } = ui;
+ const get_first_strategy_info = React.useRef(false);
+ const get_instacee = React.useRef(false);
+
+ React.useEffect(() => {
+ setStrategySaveType('');
+ const getStrategies = async () => {
+ const recent_strategies = await getSavedWorkspaces();
+ setDashboardStrategies(recent_strategies);
+ if (!get_instacee.current) {
+ get_instacee.current = true;
+ }
+ };
+ getStrategies();
+ //this dependency is used when we use the save modal popup
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [strategy_save_type]);
+
+ React.useEffect(() => {
+ if (!dashboard_strategies?.length && !get_first_strategy_info.current) {
+ get_first_strategy_info.current = true;
+ }
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, []);
+
+ if (!dashboard_strategies?.length) return null;
+ return (
+
-
- )}
+
+
+
+
+ );
+});
+
+export default DashboardBotList;
diff --git a/src/pages/dashboard/load-bot-preview/index.scss b/src/pages/dashboard/load-bot-preview/index.scss
index 0a0329c5..07608e0f 100644
--- a/src/pages/dashboard/load-bot-preview/index.scss
+++ b/src/pages/dashboard/load-bot-preview/index.scss
@@ -1,6 +1,7 @@
-@import './google-drive.scss';
-@import './delete-dialog.scss';
-@import './save-modal.scss';
+@import '../../../styles/mixins';
+@import './google-drive';
+@import './delete-dialog';
+@import './save-modal';
.load-strategy {
&__wrapper {
@@ -17,6 +18,7 @@
&__body {
height: 100%;
}
+
.google-drive-label {
width: 100%;
}
@@ -69,18 +71,6 @@
}
}
- &__title {
- font-size: var(--text-size-s);
- font-weight: 700;
- margin: 1.6rem 0;
- margin-inline-end: 1.6rem;
- color: var(--text-general);
-
- &--listed {
- margin: 0 !important;
- }
- }
-
&__button-group {
display: flex;
justify-content: flex-end;
@@ -155,6 +145,7 @@
&-area {
@include flex-center;
+
flex-direction: column;
border: dashed 0.2rem var(--border-normal);
border-radius: $BORDER_RADIUS;
@@ -218,6 +209,7 @@
&__google-drive {
@include flex-center;
+
flex-direction: column;
@include mobile {
@@ -304,6 +296,7 @@
}
@include flex-center;
+
height: 4rem;
box-shadow: inset 0 -0.1rem 0 $color-grey-2;
}
@@ -337,7 +330,7 @@
}
&__button-group {
- box-shadow: inset 0 0.2rem 0rem $color-grey-2;
+ box-shadow: inset 0 0.2rem 0 $color-grey-2;
margin: 0;
padding: 1.6rem;
}
@@ -358,59 +351,100 @@
}
}
-.flex-align-center {
+%flex-align-center {
display: flex;
align-items: center;
}
.bot-list {
+ &__container {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+
+ @include mobile {
+ display: unset;
+ }
+ }
+
&__wrapper {
- height: calc(100vh - 54.8rem);
+ width: 623px;
+
+ @include mobile {
+ width: unset;
+ }
+ }
+
+ &__table {
+ height: calc(100vh - 57rem);
overflow: auto;
}
+
+ &__title {
+ font-size: var(--text-size-s);
+ font-weight: 700;
+ margin-block-end: 0.8rem;
+ color: var(--text-general);
+
+ &--listed {
+ margin: 0 !important;
+ }
+ }
+
&__header {
- @extend .flex-align-center;
- padding: 0 0.8rem;
+ @extend %flex-align-center;
+
border-bottom: 1px solid var(--border-divider);
@include mobile {
- padding: 0;
+ padding: 0.8rem 0;
}
&__label {
- padding: 0.8rem;
+ padding: 0.8rem 1.6rem;
width: 35%;
+
@include mobile {
width: 40%;
- padding-inline-start: 0;
+ padding: 0;
}
}
+
&__time-stamp {
width: 20%;
- padding: 0.8rem;
+ padding: 0.8rem 1.6rem;
+
@include mobile {
width: 25%;
- padding-inline-end: 0;
+ padding: 0;
}
}
+
&__load-type {
width: 25%;
- padding: 0.8rem;
+ padding: 0.8rem 1.6rem;
+
+ @include mobile {
+ padding: 0;
+ }
}
}
+
&__item {
- @extend .flex-align-center;
- padding: 0 0.8rem;
+ @extend %flex-align-center;
+
border-bottom: 1px solid var(--border-divider);
user-select: none;
position: relative;
+
&:hover {
cursor: pointer;
}
&__label {
- padding: 0.8rem;
+ padding: 0.8rem 1.6rem;
width: 35%;
+
.text-wrapper {
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
@@ -429,16 +463,23 @@
&__time-stamp {
width: 20%;
- padding: 0.8rem;
+ padding: 0.8rem 1.6rem;
+
@include mobile {
width: 25%;
+ padding: 0;
}
}
&__load-type {
- @extend .flex-align-center;
+ @extend %flex-align-center;
+
width: 25%;
- padding: 0.8rem;
+ padding: 0.8rem 1.6rem;
+
+ @include mobile {
+ padding: 0;
+ }
.dc-icon {
margin-inline-end: 0.8rem;
@@ -446,12 +487,14 @@
}
&__actions {
- @include flex-center(flex-end);
+ @include flex-center(center);
+
width: 20%;
- padding: 0.8rem;
- justify-content: flex-end;
+ padding: 0.8rem 1.6rem;
+
&__action-item {
margin-inline-end: 1.6rem;
+
&:last-child {
margin-inline: 0;
}
@@ -459,6 +502,7 @@
@include mobile {
width: 10%;
+ padding: 0;
}
button {
@@ -472,14 +516,15 @@
&__responsive {
background: var(--general-main-1);
box-shadow:
- 0 0 2rem rgba(0, 0, 0, 0.05),
- 0 1.6rem 2rem rgba(0, 0, 0, 0.05);
+ 0 0 2rem rgb(0 0 0 / 5%),
+ 0 1.6rem 2rem rgb(0 0 0 / 5%);
display: none;
min-width: 15rem;
position: absolute;
inset-inline-end: 3rem;
top: 4rem;
z-index: 100;
+
&--active {
display: block;
}
@@ -489,19 +534,17 @@
display: flex;
height: 4rem;
padding: 0.8rem 1.1rem;
+
.dc-icon {
margin-inline-end: 0.8rem;
}
-
- &:last-child {
- box-shadow: inset 0 0.1rem 0 var(--border-divider);
- }
}
}
&:nth-last-child(-n + 4) {
.bot-list__item__responsive {
top: -15rem;
+
&--min {
top: 1rem;
inset-inline-end: 6rem;
diff --git a/src/pages/dashboard/load-bot-preview/recent-footer.tsx b/src/pages/dashboard/load-bot-preview/recent-footer.tsx
deleted file mode 100644
index fb796496..00000000
--- a/src/pages/dashboard/load-bot-preview/recent-footer.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { observer } from 'mobx-react-lite';
-
-import { Button } from '@deriv-com/ui';
-
-import { useStore } from '@/hooks/useStore';
-import { localize } from '@/utils/tmp/dummy';
-
-import './index.scss';
-
-const RecentFooter = observer(() => {
- const { load_modal } = useStore();
- const { is_open_button_loading, loadFileFromRecent } = load_modal;
- return (
-
- );
-});
-
-export default RecentFooter;
diff --git a/src/pages/dashboard/user-guide.tsx b/src/pages/dashboard/user-guide.tsx
index 2e5fd77f..f28f07a8 100644
--- a/src/pages/dashboard/user-guide.tsx
+++ b/src/pages/dashboard/user-guide.tsx
@@ -22,7 +22,7 @@ const UserGuide: React.FC
+
+
+
+
+
+
+ {HEADERS.map(({ label, className }) => {
+ return (
+
+
+
+ {label}
+
+
+ );
+ })}
+
+ {dashboard_strategies.map((workspace, index) => {
+ return
+ {icon}
;
+type TIconComponent = {
+ icon: string;
+ className?: string;
+ onClick?: () => void;
};
+const IconComponent: React.FC
+ 
+
+ );
+};
+
+export const Icon = memo(IconComponent);
+
export const IconTradeTypes = ({ children }) => {
// Simulate scrollbars
return
+ {children}
;