diff --git a/frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx b/frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx
index 45f4d701d..dc70cdb4c 100644
--- a/frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx
+++ b/frontend/app/components/shared/AnimatedSVG/AnimatedSVG.tsx
@@ -6,6 +6,10 @@ import DashboardSvg from '../../../svg/dashboard-icn.svg';
import LoaderSVG from '../../../svg/openreplay-preloader.svg';
import SignalGreenSvg from '../../../svg/signal-green.svg';
import SignalRedSvg from '../../../svg/signal-red.svg';
+import NoBookmarks from '../../../svg/ca-no-bookmarked-session.svg';
+import NoLiveSessions from '../../../svg/ca-no-live-sessions.svg';
+import NoSessions from '../../../svg/ca-no-sessions.svg';
+import NoSessionsInVault from '../../../svg/ca-no-sessions-in-vault.svg';
export enum ICONS {
DASHBOARD_ICON = 'dashboard-icn',
@@ -14,7 +18,11 @@ export enum ICONS {
NO_RESULTS = 'no-results',
LOADER = 'openreplay-preloader',
SIGNAL_GREEN = 'signal-green',
- SIGNAL_RED = 'signal-red'
+ SIGNAL_RED = 'signal-red',
+ NO_BOOKMARKS = 'ca-no-bookmarked-session',
+ NO_LIVE_SESSIONS = 'ca-no-live-sessions',
+ NO_SESSIONS = 'ca-no-sessions',
+ NO_SESSIONS_IN_VAULT = 'ca-no-sessions-in-vault'
}
interface Props {
@@ -26,28 +34,32 @@ function AnimatedSVG(props: Props) {
const renderSvg = () => {
switch (name) {
case ICONS.LOADER:
- return
+ return ;
case ICONS.DASHBOARD_ICON:
- return
+ return ;
case ICONS.EMPTY_STATE:
- return
+ return ;
case ICONS.LOGO_SMALL:
- return
+ return ;
case ICONS.NO_RESULTS:
- return
+ return ;
case ICONS.SIGNAL_GREEN:
- return
+ return ;
case ICONS.SIGNAL_RED:
- return
+ return ;
+ case ICONS.NO_BOOKMARKS:
+ return ;
+ case ICONS.NO_LIVE_SESSIONS:
+ return ;
+ case ICONS.NO_SESSIONS:
+ return ;
+ case ICONS.NO_SESSIONS_IN_VAULT:
+ return ;
default:
return null;
}
- }
- return (
-
- {renderSvg()}
-
- );
+ };
+ return {renderSvg()}
;
}
-export default AnimatedSVG;
\ No newline at end of file
+export default AnimatedSVG;
diff --git a/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx b/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx
index b5a475073..985fbbc9e 100644
--- a/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx
+++ b/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx
@@ -20,17 +20,38 @@ interface Props {
updateCurrentPage: (page: number) => void;
setScrollPosition: (scrollPosition: number) => void;
fetchSessions: () => void;
+ activeTab: any;
+ isEnterprise?: boolean;
}
function SessionList(props: Props) {
- const { loading, list, currentPage, total, filters, lastPlayedSessionId, metaList } = props;
+ const { loading, list, currentPage, total, filters, lastPlayedSessionId, metaList, activeTab, isEnterprise = false } = props;
const _filterKeys = filters.map((i: any) => i.key);
const hasUserFilter = _filterKeys.includes(FilterKey.USERID) || _filterKeys.includes(FilterKey.USERANONYMOUSID);
+ const isBookmark = activeTab.type === 'bookmark';
+ const isVault = isBookmark && isEnterprise;
+ const NO_CONTENT = React.useMemo(() => {
+ if (isBookmark && !isEnterprise) {
+ return {
+ icon: ICONS.NO_BOOKMARKS,
+ message: 'You have no bookmarks',
+ };
+ } else if (isVault) {
+ return {
+ icon: ICONS.NO_SESSIONS_IN_VAULT,
+ message: 'You have no sessions in your vault',
+ };
+ }
+ return {
+ icon: ICONS.NO_SESSIONS,
+ message: activeTab.type === 'all' ? 'You have no sessions' : 'You have no sessions with ' + activeTab.name,
+ };
+ }, [isBookmark, isVault, activeTab]);
useEffect(() => {
const { scrollY } = props;
window.scrollTo(0, scrollY);
if (total === 0) {
- props.fetchSessions()
+ props.fetchSessions();
}
return () => {
@@ -51,9 +72,10 @@ function SessionList(props: Props) {
-
+
-
+ {NO_CONTENT.message}
+ {/* */}
}
subtext={Please try changing your search parameters.
}
@@ -97,6 +119,8 @@ export default connect(
currentPage: state.getIn(['search', 'currentPage']) || 1,
total: state.getIn(['sessions', 'total']) || 0,
scrollY: state.getIn(['search', 'scrollY']),
+ activeTab: state.getIn(['search', 'activeTab']),
+ isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee',
}),
{ updateCurrentPage, addFilterByKeyAndValue, setScrollPosition, fetchSessions }
)(SessionList);
diff --git a/frontend/app/svg/ca-no-bookmarked-session.svg b/frontend/app/svg/ca-no-bookmarked-session.svg
new file mode 100644
index 000000000..f3d84d404
--- /dev/null
+++ b/frontend/app/svg/ca-no-bookmarked-session.svg
@@ -0,0 +1,14 @@
+
diff --git a/frontend/app/svg/ca-no-live-sessions.svg b/frontend/app/svg/ca-no-live-sessions.svg
new file mode 100644
index 000000000..979060448
--- /dev/null
+++ b/frontend/app/svg/ca-no-live-sessions.svg
@@ -0,0 +1,15 @@
+
diff --git a/frontend/app/svg/ca-no-sessions-in-vault.svg b/frontend/app/svg/ca-no-sessions-in-vault.svg
new file mode 100644
index 000000000..ca9bbc9c7
--- /dev/null
+++ b/frontend/app/svg/ca-no-sessions-in-vault.svg
@@ -0,0 +1,14 @@
+
diff --git a/frontend/app/svg/ca-no-sessions.svg b/frontend/app/svg/ca-no-sessions.svg
new file mode 100644
index 000000000..e38cd449a
--- /dev/null
+++ b/frontend/app/svg/ca-no-sessions.svg
@@ -0,0 +1,13 @@
+