From ccaf869ce9b6036044c01f2bf819e1dfbbfad11a Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Thu, 11 Aug 2022 10:50:36 +0200 Subject: [PATCH] change(ui) - session list icons --- .../shared/AnimatedSVG/AnimatedSVG.tsx | 42 ++++++++++++------- .../components/SessionList/SessionList.tsx | 32 ++++++++++++-- frontend/app/svg/ca-no-bookmarked-session.svg | 14 +++++++ frontend/app/svg/ca-no-live-sessions.svg | 15 +++++++ frontend/app/svg/ca-no-sessions-in-vault.svg | 14 +++++++ frontend/app/svg/ca-no-sessions.svg | 13 ++++++ 6 files changed, 111 insertions(+), 19 deletions(-) create mode 100644 frontend/app/svg/ca-no-bookmarked-session.svg create mode 100644 frontend/app/svg/ca-no-live-sessions.svg create mode 100644 frontend/app/svg/ca-no-sessions-in-vault.svg create mode 100644 frontend/app/svg/ca-no-sessions.svg 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 @@ + + + + + + + + + + + + +