diff --git a/frontend/app/components/shared/SessionItem/SessionItem.tsx b/frontend/app/components/shared/SessionItem/SessionItem.tsx index eb228dd4d..fb4c74f0a 100644 --- a/frontend/app/components/shared/SessionItem/SessionItem.tsx +++ b/frontend/app/components/shared/SessionItem/SessionItem.tsx @@ -1,6 +1,6 @@ -import React from 'react'; +import React, { useMemo } from 'react'; import cn from 'classnames'; -import { CountryFlag, Avatar, TextEllipsis, Label, Icon, Tooltip } from 'UI'; +import { CountryFlag, Avatar, TextEllipsis, Label, Icon, Tooltip, ItemMenu } from 'UI'; import { useStore } from 'App/mstore'; import { observer } from 'mobx-react-lite'; import { durationFormatted, formatTimeOrDate } from 'App/date'; @@ -10,9 +10,17 @@ import { withRouter, RouteComponentProps } from 'react-router-dom'; import SessionMetaList from './SessionMetaList'; import PlayLink from './PlayLink'; import ErrorBars from './ErrorBars'; -import { assist as assistRoute, liveSession, sessions as sessionsRoute, isRoute } from 'App/routes'; +import { + assist as assistRoute, + liveSession, + sessions as sessionsRoute, + session as sessionRoute, + isRoute, +} from 'App/routes'; import { capitalize } from 'App/utils'; import { Duration } from 'luxon'; +import copy from 'copy-to-clipboard'; +import { toast } from 'react-toastify'; const ASSIST_ROUTE = assistRoute(); const ASSIST_LIVE_SESSION = liveSession(); @@ -56,6 +64,8 @@ interface Props { isDisabled?: boolean; isAdd?: boolean; ignoreAssist?: boolean; + bookmarked?: boolean; + toggleFavorite?: (sessionId: string) => void; } function SessionItem(props: RouteComponentProps & Props) { @@ -72,6 +82,7 @@ function SessionItem(props: RouteComponentProps & Props) { onClick = null, compact = false, ignoreAssist = false, + bookmarked = false, } = props; const { @@ -114,6 +125,27 @@ function SessionItem(props: RouteComponentProps & Props) { return { label: key, value }; }); + const menuItems = useMemo(() => { + return [ + { + icon: 'link-45deg', + text: 'Copy Session URL', + onClick: () => { + const sessionPath = `${window.location.origin}/${ + window.location.pathname.split('/')[1] + }${sessionRoute(sessionId)}`; + copy(sessionPath); + toast.success('Session URL copied to clipboard'); + }, + }, + { + icon: 'trash', + text: 'Remove', + onClick: () => (props.toggleFavorite ? props.toggleFavorite(sessionId) : null), + }, + ]; + }, []); + return (
- - - + + + - - + + - - + +
{isSessions && ( @@ -220,16 +252,19 @@ function SessionItem(props: RouteComponentProps & Props) {
{live && session.isCallActive && session.agentIds!.length > 0 ? (
) : null} @@ -237,9 +272,9 @@ function SessionItem(props: RouteComponentProps & Props) {
{isLastPlayed && ( )}
@@ -254,13 +289,20 @@ function SessionItem(props: RouteComponentProps & Props) {
) : ( - + <> + + {bookmarked && ( +
+ +
+ )} + )} diff --git a/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx b/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx index c33f187cf..88ab62d24 100644 --- a/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx +++ b/frontend/app/components/shared/SessionListContainer/components/SessionList/SessionList.tsx @@ -14,6 +14,7 @@ import { } from 'Duck/search'; import { numberWithCommas } from 'App/utils'; import { fetchListActive as fetchMetadata } from 'Duck/customField'; +import { toggleFavorite } from 'Duck/sessions'; enum NoContentType { Bookmarked, @@ -41,6 +42,7 @@ interface Props extends RouteComponentProps { activeTab: any; isEnterprise?: boolean; checkForLatestSessions: () => void; + toggleFavorite: (sessionId: string) => Promise; } function SessionList(props: Props) { const [noContentType, setNoContentType] = React.useState(NoContentType.ToDate); @@ -133,6 +135,12 @@ function SessionList(props: Props) { } }; + const toggleFavorite = (sessionId: string) => { + props.toggleFavorite(sessionId).then(() => { + props.fetchSessions(null, true); + }); + }; + return ( ))} @@ -226,5 +236,6 @@ export default connect( fetchSessions, fetchMetadata, checkForLatestSessions, + toggleFavorite, } )(withRouter(SessionList));