From 55d7830154a57f8e4c57b6a3ddecb3c03920e0a7 Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Tue, 12 Jul 2022 17:40:24 +0200 Subject: [PATCH] fix random issues (tooltip, assist, button) (#596) * fix(ui) - live player loader * change(ui) - removed unused * change(ui) - button changes * fix(ui) - tooltip changes --- .../AssistActions/AssistActions.tsx | 261 +++++++++--------- .../EventsToggleButton.module.css | 7 - .../EventsToggleButton/EventsToggleButton.tsx | 35 --- .../Session/EventsToggleButton/index.js | 1 - .../app/components/Session/LiveSession.js | 18 +- .../Player/Overlay/ElementsMarker/Marker.tsx | 8 +- .../LiveSessionList/LiveSessionList.tsx | 112 ++++---- frontend/app/components/ui/Button/Button.tsx | 115 ++++---- .../components/ui/Pagination/Pagination.tsx | 13 +- frontend/app/components/ui/Popup/Popup.tsx | 15 +- 10 files changed, 287 insertions(+), 298 deletions(-) delete mode 100644 frontend/app/components/Session/EventsToggleButton/EventsToggleButton.module.css delete mode 100644 frontend/app/components/Session/EventsToggleButton/EventsToggleButton.tsx delete mode 100644 frontend/app/components/Session/EventsToggleButton/index.js diff --git a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx index de843e969..ba1a7cf0b 100644 --- a/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx +++ b/frontend/app/components/Assist/components/AssistActions/AssistActions.tsx @@ -1,153 +1,166 @@ -import React, { useState, useEffect } from 'react' -import { Popup, Icon, IconButton } from 'UI' -import { connect } from 'react-redux' -import cn from 'classnames' +import React, { useState, useEffect } from 'react'; +import { Popup, Icon, Button, IconButton } from 'UI'; +import { connect } from 'react-redux'; +import cn from 'classnames'; import { toggleChatWindow } from 'Duck/sessions'; import { connectPlayer } from 'Player/store'; import ChatWindow from '../../ChatWindow'; -import { callPeer, requestReleaseRemoteControl, toggleAnnotation } from 'Player' +import { callPeer, requestReleaseRemoteControl, toggleAnnotation } from 'Player'; import { CallingState, ConnectionStatus, RemoteControlStatus } from 'Player/MessageDistributor/managers/AssistManager'; import RequestLocalStream from 'Player/MessageDistributor/managers/LocalStream'; import type { LocalStream } from 'Player/MessageDistributor/managers/LocalStream'; import { toast } from 'react-toastify'; import { confirm } from 'UI'; -import stl from './AassistActions.module.css' +import stl from './AassistActions.module.css'; function onClose(stream) { - stream.getTracks().forEach(t=>t.stop()); + stream.getTracks().forEach((t) => t.stop()); } function onReject() { - toast.info(`Call was rejected.`); + toast.info(`Call was rejected.`); } function onError(e) { - toast.error(typeof e === 'string' ? e : e.message); + toast.error(typeof e === 'string' ? e : e.message); } - interface Props { - userId: String, - toggleChatWindow: (state) => void, - calling: CallingState, - annotating: boolean, - peerConnectionStatus: ConnectionStatus, - remoteControlStatus: RemoteControlStatus, - hasPermission: boolean, - isEnterprise: boolean, + userId: String; + toggleChatWindow: (state) => void; + calling: CallingState; + annotating: boolean; + peerConnectionStatus: ConnectionStatus; + remoteControlStatus: RemoteControlStatus; + hasPermission: boolean; + isEnterprise: boolean; } -function AssistActions({ toggleChatWindow, userId, calling, annotating, peerConnectionStatus, remoteControlStatus, hasPermission, isEnterprise }: Props) { - const [ incomeStream, setIncomeStream ] = useState(null); - const [ localStream, setLocalStream ] = useState(null); - const [ callObject, setCallObject ] = useState<{ end: ()=>void } | null >(null); +function AssistActions({ + toggleChatWindow, + userId, + calling, + annotating, + peerConnectionStatus, + remoteControlStatus, + hasPermission, + isEnterprise, +}: Props) { + const [incomeStream, setIncomeStream] = useState(null); + const [localStream, setLocalStream] = useState(null); + const [callObject, setCallObject] = useState<{ end: () => void } | null>(null); - useEffect(() => { - return callObject?.end() - }, []) + useEffect(() => { + return callObject?.end(); + }, []); - useEffect(() => { - if (peerConnectionStatus == ConnectionStatus.Disconnected) { - toast.info(`Live session was closed.`); - } - }, [peerConnectionStatus]) - - function call() { - RequestLocalStream().then(lStream => { - setLocalStream(lStream); - setCallObject(callPeer( - lStream, - setIncomeStream, - lStream.stop.bind(lStream), - onReject, - onError - )); - }).catch(onError) - } - - const confirmCall = async () => { - if (await confirm({ - header: 'Start Call', - confirmButton: 'Call', - confirmation: `Are you sure you want to call ${userId ? userId : 'User'}?` - })) { - call() - } - } - - const onCall = calling === CallingState.OnCall || calling === CallingState.Reconnecting - const cannotCall = (peerConnectionStatus !== ConnectionStatus.Connected) || (isEnterprise && !hasPermission) - const remoteActive = remoteControlStatus === RemoteControlStatus.Enabled - - return ( -
- {(onCall || remoteActive) && ( - <> -
toggleAnnotation(!annotating) } - role="button" - > - -
-
- - )} -
{ + if (peerConnectionStatus == ConnectionStatus.Disconnected) { + toast.info(`Live session was closed.`); } - onClick={ requestReleaseRemoteControl } - role="button" - > - -
-
- - -
- -
- + }, [peerConnectionStatus]); -
- { onCall && callObject && } -
-
- ) + function call() { + RequestLocalStream() + .then((lStream) => { + setLocalStream(lStream); + setCallObject(callPeer(lStream, setIncomeStream, lStream.stop.bind(lStream), onReject, onError)); + }) + .catch(onError); + } + + const confirmCall = async () => { + if ( + await confirm({ + header: 'Start Call', + confirmButton: 'Call', + confirmation: `Are you sure you want to call ${userId ? userId : 'User'}?`, + }) + ) { + call(); + } + }; + + const onCall = calling === CallingState.OnCall || calling === CallingState.Reconnecting; + const cannotCall = peerConnectionStatus !== ConnectionStatus.Connected || (isEnterprise && !hasPermission); + const remoteActive = remoteControlStatus === RemoteControlStatus.Enabled; + + return ( +
+ {(onCall || remoteActive) && ( + <> +
toggleAnnotation(!annotating)} + role="button" + > + + {/* */} +
+
+ + )} +
+ + {/* */} +
+
+ + +
+ + {/* */} +
+ + +
+ {onCall && callObject && ( + + )} +
+
+ ); } -const con = connect(state => { - const permissions = state.getIn([ 'user', 'account', 'permissions' ]) || [] - return { - hasPermission: permissions.includes('ASSIST_CALL'), - isEnterprise: state.getIn([ 'user', 'account', 'edition' ]) === 'ee', - } -}, { toggleChatWindow }) +const con = connect( + (state) => { + const permissions = state.getIn(['user', 'account', 'permissions']) || []; + return { + hasPermission: permissions.includes('ASSIST_CALL'), + isEnterprise: state.getIn(['user', 'account', 'edition']) === 'ee', + }; + }, + { toggleChatWindow } +); -export default con(connectPlayer(state => ({ - calling: state.calling, - annotating: state.annotating, - remoteControlStatus: state.remoteControl, - peerConnectionStatus: state.peerConnectionStatus, -}))(AssistActions)) +export default con( + connectPlayer((state) => ({ + calling: state.calling, + annotating: state.annotating, + remoteControlStatus: state.remoteControl, + peerConnectionStatus: state.peerConnectionStatus, + }))(AssistActions) +); diff --git a/frontend/app/components/Session/EventsToggleButton/EventsToggleButton.module.css b/frontend/app/components/Session/EventsToggleButton/EventsToggleButton.module.css deleted file mode 100644 index 19eda2568..000000000 --- a/frontend/app/components/Session/EventsToggleButton/EventsToggleButton.module.css +++ /dev/null @@ -1,7 +0,0 @@ -.wrapper { - background-color: rgba(255, 255, 255, 1); - border-top-left-radius: 20px; - border-bottom-left-radius: 20px; - padding: 5px; - box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.5); -} \ No newline at end of file diff --git a/frontend/app/components/Session/EventsToggleButton/EventsToggleButton.tsx b/frontend/app/components/Session/EventsToggleButton/EventsToggleButton.tsx deleted file mode 100644 index 4d4b70895..000000000 --- a/frontend/app/components/Session/EventsToggleButton/EventsToggleButton.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import React from 'react' -import { Icon, Popup } from 'UI' -import { connectPlayer, toggleEvents, scale } from 'Player'; -import cn from 'classnames' -import stl from './EventsToggleButton.module.css' - -function EventsToggleButton({ showEvents, toggleEvents }: any) { - const toggle = () => { - toggleEvents() - scale() - } - return ( - - - - ) -} - -export default connectPlayer(state => ({ - showEvents: !state.showEvents -}), { toggleEvents })(EventsToggleButton) - diff --git a/frontend/app/components/Session/EventsToggleButton/index.js b/frontend/app/components/Session/EventsToggleButton/index.js deleted file mode 100644 index b391f169d..000000000 --- a/frontend/app/components/Session/EventsToggleButton/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './EventsToggleButton' \ No newline at end of file diff --git a/frontend/app/components/Session/LiveSession.js b/frontend/app/components/Session/LiveSession.js index 673e0c701..8ab1adf03 100644 --- a/frontend/app/components/Session/LiveSession.js +++ b/frontend/app/components/Session/LiveSession.js @@ -4,17 +4,17 @@ import { connect } from 'react-redux'; import usePageTitle from 'App/hooks/usePageTitle'; import { fetch as fetchSession } from 'Duck/sessions'; import { fetchList as fetchSlackList } from 'Duck/integrations/slack'; -import { Link, NoContent, Loader } from 'UI'; -import { sessions as sessionsRoute } from 'App/routes'; +// import { Link, NoContent, Loader } from 'UI'; +// import { sessions as sessionsRoute } from 'App/routes'; import withPermissions from 'HOCs/withPermissions' import LivePlayer from './LivePlayer'; -const SESSIONS_ROUTE = sessionsRoute(); +// const SESSIONS_ROUTE = sessionsRoute(); function LiveSession({ sessionId, - loading, - hasErrors, + // loading, + // hasErrors, session, fetchSession, fetchSlackList, @@ -38,9 +38,9 @@ function LiveSession({ },[ sessionId, hasSessionsPath ]); return ( - + // - + // ); } @@ -50,8 +50,8 @@ export default withPermissions(['ASSIST_LIVE'], '', true)(connect((state, props) const hasSessiosPath = state.getIn([ 'sessions', 'sessionPath' ]).pathname.includes('/sessions'); return { sessionId, - loading: state.getIn([ 'sessions', 'loading' ]), - hasErrors: !!state.getIn([ 'sessions', 'errors' ]), + // loading: state.getIn([ 'sessions', 'loading' ]), + // hasErrors: !!state.getIn([ 'sessions', 'errors' ]), session: state.getIn([ 'sessions', 'current' ]), hasSessionsPath: hasSessiosPath && !isAssist, }; diff --git a/frontend/app/components/Session_/Player/Overlay/ElementsMarker/Marker.tsx b/frontend/app/components/Session_/Player/Overlay/ElementsMarker/Marker.tsx index f91f1d963..d5afa65a2 100644 --- a/frontend/app/components/Session_/Player/Overlay/ElementsMarker/Marker.tsx +++ b/frontend/app/components/Session_/Player/Overlay/ElementsMarker/Marker.tsx @@ -4,7 +4,7 @@ import type { MarkedTarget } from 'Player/MessageDistributor/StatedScreen/Stated import cn from 'classnames'; import stl from './Marker.module.css'; import { activeTarget } from 'Player'; -import { Popup } from 'UI'; +import { Tooltip } from 'react-tippy'; interface Props { target: MarkedTarget; @@ -21,17 +21,17 @@ export default function Marker({ target, active }: Props) { return (
activeTarget(target.index)}>
{target.index + 1}
- {target.count} Clicks
)} >
- +
) } \ No newline at end of file diff --git a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx index 75a09eb80..4adcc8365 100644 --- a/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx +++ b/frontend/app/components/shared/LiveSessionList/LiveSessionList.tsx @@ -116,67 +116,67 @@ function LiveSessionList(props: Props) {
Sort By - 0} - > -
- i.value === filter.sort) || sortOptions[0]} + /> +
+ props.applyFilter({ order: state })} sortOrder={filter.order} /> +
- - - See how to setup the{' '} - - {'Assist'} - {' '} - plugin, if you haven’t done that already. - - } - image={} - show={!loading && list.size === 0} - > -
- {list.map((session) => ( - <> - -
- - ))} - -
- props.updateCurrentPage(page)} - limit={PER_PAGE} - /> +
+ + + See how to setup the{' '} + + {'Assist'} + {' '} + plugin, if you haven’t done that already. + + } + image={} + show={!loading && list.size === 0} + > +
+ {list.map((session) => ( + <> + +
+ + ))}
-
- - + + + +
+ props.updateCurrentPage(page)} + limit={PER_PAGE} + debounceRequest={500} + /> +
+
); } diff --git a/frontend/app/components/ui/Button/Button.tsx b/frontend/app/components/ui/Button/Button.tsx index ec57b2231..d324d4f4a 100644 --- a/frontend/app/components/ui/Button/Button.tsx +++ b/frontend/app/components/ui/Button/Button.tsx @@ -3,67 +3,74 @@ import cn from 'classnames'; import { CircularLoader, Icon } from 'UI'; interface Props { - className?: string; - children: React.ReactNode; - onClick?: () => void; - disabled?: boolean; - type?: 'button' | 'submit' | 'reset'; - loading?: boolean; - icon?: string; - [x: string]: any + className?: string; + children: React.ReactNode; + onClick?: () => void; + disabled?: boolean; + type?: 'button' | 'submit' | 'reset'; + loading?: boolean; + icon?: string; + [x: string]: any; } export default (props: Props) => { - const { - icon = '', - className = '', - variant = "default", - type = "button", - size = '', - disabled = false, - children, - loading = false, - ...rest - } = props; + const { + icon = '', + className = '', + variant = 'default', + type = 'button', + size = '', + disabled = false, + children, + loading = false, + ...rest + } = props; - const classes = ['relative flex items-center h-10 px-3 rounded tracking-wide whitespace-nowrap']; - if (variant === 'default') { - classes.push('bg-white hover:bg-gray-lightest border border-gray-light') - } + const classes = ['relative flex items-center h-10 px-3 rounded tracking-wide whitespace-nowrap']; + if (variant === 'default') { + classes.push('bg-white hover:bg-gray-lightest border border-gray-light'); + } - if (variant === 'primary') { - classes.push('bg-teal color-white hover:bg-teal-dark') - } + if (variant === 'primary') { + classes.push('bg-teal color-white hover:bg-teal-dark'); + } - if (variant === 'text') { - classes.push('bg-transparent color-gray-dark hover:bg-gray-lightest hover:color-gray-dark') - } + if (variant === 'text') { + classes.push('bg-transparent color-gray-dark hover:bg-gray-lightest hover:color-gray-dark'); + } - if (variant === 'text-primary') { - classes.push('bg-transparent color-teal hover:bg-teal-light hover:color-teal-dark') - } + if (variant === 'text-primary') { + classes.push('bg-transparent color-teal hover:bg-teal-light hover:color-teal-dark'); + } - if (variant === 'outline') { - classes.push('bg-white color-teal border border-teal hover:bg-teal-light') - } + if (variant === 'text-red') { + classes.push('bg-transparent color-red hover:bg-teal-light'); + } - if (disabled) { - classes.push('opacity-40 pointer-events-none') - } + if (variant === 'outline') { + classes.push('bg-white color-teal border border-teal hover:bg-teal-light'); + } - const iconColor = variant === 'text' || variant === 'default' ? 'gray-dark' : 'teal'; - // console.log('children', children) + if (disabled) { + classes.push('opacity-40 pointer-events-none'); + } - return ( - - ); -} + let iconColor = variant === 'text' || variant === 'default' ? 'gray-dark' : 'teal'; + if (variant === 'primary') { + iconColor = 'white'; + } + if (variant === 'text-red') { + iconColor = 'red'; + } + + return ( + + ); +}; diff --git a/frontend/app/components/ui/Pagination/Pagination.tsx b/frontend/app/components/ui/Pagination/Pagination.tsx index ff1f8fde5..b36d2b397 100644 --- a/frontend/app/components/ui/Pagination/Pagination.tsx +++ b/frontend/app/components/ui/Pagination/Pagination.tsx @@ -33,9 +33,10 @@ export default function Pagination(props: Props) { return (