Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 56b0b79

Browse files
author
Kerry
authored
Live location share - link to timeline tile from share warning (PSF-1078) (#8752)
* navigate to live location tile from left panel live warning Signed-off-by: Kerry Archibald <kerrya@element.io> * navigate to beacon tile from room live share warning Signed-off-by: Kerry Archibald <kerrya@element.io> * add cursor Signed-off-by: Kerry Archibald <kerrya@element.io>
1 parent f65e8d0 commit 56b0b79

File tree

6 files changed

+67
-11
lines changed

6 files changed

+67
-11
lines changed

‎res/css/components/views/beacon/_RoomLiveShareWarning.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ limitations under the License.
2626

2727
color: $primary-content;
2828
background-color: $system;
29+
cursor: pointer;
2930
}
3031

3132
.mx_RoomLiveShareWarning_icon {

‎src/components/views/beacon/LeftPanelLiveShareWarning.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ limitations under the License.
1616

1717
import classNames from 'classnames';
1818
import React, { useEffect } from 'react';
19-
import { Beacon, BeaconIdentifier, Room } from 'matrix-js-sdk/src/matrix';
19+
import { Beacon, BeaconIdentifier } from 'matrix-js-sdk/src/matrix';
2020

2121
import { useEventEmitterState } from '../../../hooks/useEventEmitter';
2222
import { _t } from '../../../languageHandler';
@@ -33,13 +33,12 @@ interface Props {
3333

3434
/**
3535
* Choose the most relevant beacon
36-
* and get its roomId
3736
*/
38-
const chooseBestBeaconRoomId = (
37+
const chooseBestBeacon = (
3938
liveBeaconIds: BeaconIdentifier[],
4039
updateErrorBeaconIds: BeaconIdentifier[],
4140
locationErrorBeaconIds: BeaconIdentifier[],
42-
): Room['roomId'] | undefined => {
41+
): Beacon | undefined => {
4342
// both lists are ordered by creation timestamp in store
4443
// so select latest beacon
4544
const beaconId = updateErrorBeaconIds?.[0] ?? locationErrorBeaconIds?.[0] ?? liveBeaconIds?.[0];
@@ -48,7 +47,7 @@ const chooseBestBeaconRoomId = (
4847
}
4948
const beacon = OwnBeaconStore.instance.getBeaconById(beaconId);
5049

51-
return beacon?.roomId;
50+
return beacon;
5251
};
5352

5453
const getLabel = (hasStoppingErrors: boolean, hasLocationErrors: boolean): string => {
@@ -116,15 +115,18 @@ const LeftPanelLiveShareWarning: React.FC<Props> = ({ isMinimized }) => {
116115
return null;
117116
}
118117

119-
const relevantBeaconRoomId = chooseBestBeaconRoomId(
118+
const relevantBeacon = chooseBestBeacon(
120119
liveBeaconIds, beaconIdsWithStoppingError, beaconIdsWithLocationPublishError,
121120
);
122121

123-
const onWarningClick = relevantBeaconRoomId ? () => {
122+
const onWarningClick = relevantBeacon ? () => {
124123
dispatcher.dispatch<ViewRoomPayload>({
125124
action: Action.ViewRoom,
126-
room_id: relevantBeaconRoomId,
125+
room_id: relevantBeacon.roomId,
127126
metricsTrigger: undefined,
127+
event_id: relevantBeacon.beaconInfoId,
128+
scroll_into_view: true,
129+
highlighted: true,
128130
});
129131
} : undefined;
130132

‎src/components/views/beacon/RoomLiveShareWarning.tsx‎

Lines changed: 25 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,14 @@ import { _t } from '../../../languageHandler';
2121
import { useEventEmitterState } from '../../../hooks/useEventEmitter';
2222
import { OwnBeaconStore, OwnBeaconStoreEvent } from '../../../stores/OwnBeaconStore';
2323
import { useOwnLiveBeacons } from '../../../utils/beacon';
24-
import AccessibleButton from '../elements/AccessibleButton';
24+
import AccessibleButton, { ButtonEvent } from '../elements/AccessibleButton';
2525
import Spinner from '../elements/Spinner';
2626
import StyledLiveBeaconIcon from './StyledLiveBeaconIcon';
2727
import { Icon as CloseIcon } from '../../../../res/img/image-view/close.svg';
2828
import LiveTimeRemaining from './LiveTimeRemaining';
29+
import dispatcher from '../../../dispatcher/dispatcher';
30+
import { ViewRoomPayload } from '../../../dispatcher/payloads/ViewRoomPayload';
31+
import { Action } from '../../../dispatcher/actions';
2932

3033
const getLabel = (hasLocationPublishError: boolean, hasStopSharingError: boolean): string => {
3134
if (hasLocationPublishError) {
@@ -57,6 +60,13 @@ const RoomLiveShareWarningInner: React.FC<RoomLiveShareWarningInnerProps> = ({ l
5760

5861
const hasError = hasStopSharingError || hasLocationPublishError;
5962

63+
// eat events from buttons so navigate to tile
64+
// is not triggered
65+
const stopPropagationWrapper = (callback: () => void) => (e?: ButtonEvent) => {
66+
e?.stopPropagation();
67+
callback();
68+
};
69+
6070
const onButtonClick = () => {
6171
if (hasLocationPublishError) {
6272
onResetLocationPublishError();
@@ -65,8 +75,20 @@ const RoomLiveShareWarningInner: React.FC<RoomLiveShareWarningInnerProps> = ({ l
6575
}
6676
};
6777

78+
const onClick = () => {
79+
dispatcher.dispatch<ViewRoomPayload>({
80+
action: Action.ViewRoom,
81+
room_id: beacon.roomId,
82+
metricsTrigger: undefined,
83+
event_id: beacon.beaconInfoId,
84+
scroll_into_view: true,
85+
highlighted: true,
86+
});
87+
};
88+
6889
return <div
6990
className='mx_RoomLiveShareWarning'
91+
onClick={onClick}
7092
>
7193
<StyledLiveBeaconIcon className="mx_RoomLiveShareWarning_icon" withError={hasError} />
7294

@@ -82,7 +104,7 @@ const RoomLiveShareWarningInner: React.FC<RoomLiveShareWarningInnerProps> = ({ l
82104
<AccessibleButton
83105
className='mx_RoomLiveShareWarning_stopButton'
84106
data-test-id='room-live-share-primary-button'
85-
onClick={onButtonClick}
107+
onClick={stopPropagationWrapper(onButtonClick)}
86108
kind='danger'
87109
element='button'
88110
disabled={stoppingInProgress}
@@ -94,7 +116,7 @@ const RoomLiveShareWarningInner: React.FC<RoomLiveShareWarningInnerProps> = ({ l
94116
title={_t('Stop sharing and close')}
95117
element='button'
96118
className='mx_RoomLiveShareWarning_closeButton'
97-
onClick={onStopSharing}
119+
onClick={stopPropagationWrapper(onStopSharing)}
98120
>
99121
<CloseIcon className='mx_RoomLiveShareWarning_closeButtonIcon' />
100122
</AccessibleButton> }

‎test/components/views/beacon/LeftPanelLiveShareWarning-test.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,9 @@ describe('<LeftPanelLiveShareWarning />', () => {
126126
metricsTrigger: undefined,
127127
// latest beacon's room
128128
room_id: roomId2,
129+
event_id: beacon2.beaconInfoId,
130+
highlighted: true,
131+
scroll_into_view: true,
129132
});
130133
});
131134

@@ -158,6 +161,9 @@ describe('<LeftPanelLiveShareWarning />', () => {
158161
metricsTrigger: undefined,
159162
// error beacon's room
160163
room_id: roomId1,
164+
event_id: beacon1.beaconInfoId,
165+
highlighted: true,
166+
scroll_into_view: true,
161167
});
162168
});
163169

@@ -264,6 +270,9 @@ describe('<LeftPanelLiveShareWarning />', () => {
264270
metricsTrigger: undefined,
265271
// stopping error beacon's room
266272
room_id: beacon2.roomId,
273+
event_id: beacon2.beaconInfoId,
274+
highlighted: true,
275+
scroll_into_view: true,
267276
});
268277
});
269278
});

‎test/components/views/beacon/RoomLiveShareWarning-test.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,8 @@ import {
3232
resetAsyncStoreWithClient,
3333
setupAsyncStoreWithClient,
3434
} from '../../../test-utils';
35+
import defaultDispatcher from '../../../../src/dispatcher/dispatcher';
36+
import { Action } from '../../../../src/dispatcher/actions';
3537

3638
jest.useFakeTimers();
3739
describe('<RoomLiveShareWarning />', () => {
@@ -117,6 +119,7 @@ describe('<RoomLiveShareWarning />', () => {
117119
afterAll(() => {
118120
jest.spyOn(global.Date, 'now').mockRestore();
119121
localStorageSpy.mockRestore();
122+
jest.spyOn(defaultDispatcher, 'dispatch').mockRestore();
120123
});
121124

122125
const getExpiryText = wrapper => findByTestId(wrapper, 'room-live-share-expiry').text();
@@ -263,6 +266,24 @@ describe('<RoomLiveShareWarning />', () => {
263266
expect(clearIntervalSpy).toHaveBeenCalled();
264267
});
265268

269+
it('navigates to beacon tile on click', () => {
270+
const dispatcherSpy = jest.spyOn(defaultDispatcher, 'dispatch');
271+
const component = getComponent({ roomId: room1Id });
272+
273+
act(() => {
274+
component.simulate('click');
275+
});
276+
277+
expect(dispatcherSpy).toHaveBeenCalledWith({
278+
action: Action.ViewRoom,
279+
event_id: room1Beacon1.getId(),
280+
room_id: room1Id,
281+
highlighted: true,
282+
scroll_into_view: true,
283+
metricsTrigger: undefined,
284+
});
285+
});
286+
266287
describe('stopping beacons', () => {
267288
it('stops beacon on stop sharing click', () => {
268289
const component = getComponent({ roomId: room2Id });

‎test/components/views/beacon/__snapshots__/RoomLiveShareWarning-test.tsx.snap‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ exports[`<RoomLiveShareWarning /> when user has live beacons and geolocation is
2020
>
2121
<div
2222
className="mx_RoomLiveShareWarning"
23+
onClick={[Function]}
2324
>
2425
<StyledLiveBeaconIcon
2526
className="mx_RoomLiveShareWarning_icon"

0 commit comments

Comments
 (0)