leave maximised map when beacons expire (#9098)

res/css/components/views/beacon/_DialogSidebar.pcss

@@ -55,3 +55,8 @@ limitations under the License.
         overflow: auto;
     }
 }
+
+.mx_DialogSidebar_noResults {
+    font-size: $font-14px;
+    color: $secondary-content;
+}

src/components/views/beacon/BeaconViewDialog.tsx

@@ -68,7 +68,7 @@ const getBoundsCenter = (bounds: Bounds): string | undefined => {
     });
 };
 
-const useInitialMapPosition = (liveBeacons: Beacon[], { beacon, ts }: FocusedBeaconState): {
+const useMapPosition = (liveBeacons: Beacon[], { beacon, ts }: FocusedBeaconState): {
     bounds?: Bounds; centerGeoUri: string;
 } => {
     const [bounds, setBounds] = useState<Bounds | undefined>(getBeaconBounds(liveBeacons));
@@ -113,7 +113,7 @@ const BeaconViewDialog: React.FC<IProps> = ({
 
     const [isSidebarOpen, setSidebarOpen] = useState(false);
 
-    const { bounds, centerGeoUri } = useInitialMapPosition(liveBeacons, focusedBeaconState);
+    const { bounds, centerGeoUri } = useMapPosition(liveBeacons, focusedBeaconState);
 
     const [mapDisplayError, setMapDisplayError] = useState<Error>();
 
@@ -135,7 +135,7 @@ const BeaconViewDialog: React.FC<IProps> = ({
             fixedWidth={false}
         >
             <MatrixClientContext.Provider value={matrixClient}>
-                { (!!liveBeacons?.length && !mapDisplayError) && <Map
+                { (centerGeoUri && !mapDisplayError) && <Map
                     id='mx_BeaconViewDialog'
                     bounds={bounds}
                     centerGeoUri={centerGeoUri}
@@ -162,7 +162,7 @@ const BeaconViewDialog: React.FC<IProps> = ({
                         isMinimised
                     />
                 }
-                { !liveBeacons?.length && !mapDisplayError &&
+                { !centerGeoUri && !mapDisplayError &&
                     <MapFallback
                         data-test-id='beacon-view-dialog-map-fallback'
                         className='mx_BeaconViewDialog_map'

src/components/views/beacon/DialogOwnBeaconStatus.tsx

@@ -20,7 +20,6 @@ import { LocationAssetType } from 'matrix-js-sdk/src/@types/location';
 
 import { OwnBeaconStore, OwnBeaconStoreEvent } from '../../../stores/OwnBeaconStore';
 import { useEventEmitterState } from '../../../hooks/useEventEmitter';
-import { OwnProfileStore } from '../../../stores/OwnProfileStore';
 import OwnBeaconStatus from './OwnBeaconStatus';
 import { BeaconDisplayStatus } from './displayStatus';
 import MatrixClientContext from '../../../contexts/MatrixClientContext';
@@ -33,7 +32,7 @@ interface Props {
 
 const useOwnBeacon = (roomId: Room['roomId']): Beacon | undefined => {
     const ownBeacon = useEventEmitterState(
-        OwnProfileStore.instance,
+        OwnBeaconStore.instance,
         OwnBeaconStoreEvent.LivenessChange,
         () => {
             const [ownBeaconId] = OwnBeaconStore.instance.getLiveBeaconIds(roomId);

src/components/views/beacon/DialogSidebar.tsx

@@ -46,13 +46,18 @@ const DialogSidebar: React.FC<Props> = ({
                 <CloseIcon className='mx_DialogSidebar_closeButtonIcon' />
             </AccessibleButton>
         </div>
-        <ol className='mx_DialogSidebar_list'>
-            { beacons.map((beacon) => <BeaconListItem
-                key={beacon.identifier}
-                beacon={beacon}
-                onClick={() => onBeaconClick(beacon)}
-            />) }
-        </ol>
+        { beacons?.length
+            ? <ol className='mx_DialogSidebar_list'>
+                { beacons.map((beacon) => <BeaconListItem
+                    key={beacon.identifier}
+                    beacon={beacon}
+                    onClick={() => onBeaconClick(beacon)}
+                />) }
+            </ol>
+            : <div className='mx_DialogSidebar_noResults'>
+                { _t('No live locations') }
+            </div>
+        }
     </div>;
 };
 

test/components/views/beacon/BeaconViewDialog-test.tsx

@@ -25,6 +25,7 @@ import {
     getBeaconInfoIdentifier,
 } from 'matrix-js-sdk/src/matrix';
 import maplibregl from 'maplibre-gl';
+import { mocked } from 'jest-mock';
 
 import BeaconViewDialog from '../../../../src/components/views/beacon/BeaconViewDialog';
 import {
@@ -103,6 +104,7 @@ describe('<BeaconViewDialog />', () => {
 
     beforeEach(() => {
         jest.spyOn(OwnBeaconStore.instance, 'getLiveBeaconIds').mockRestore();
+        jest.spyOn(OwnBeaconStore.instance, 'getBeaconById').mockRestore();
         jest.spyOn(global.Date, 'now').mockReturnValue(now);
         jest.clearAllMocks();
     });
@@ -193,7 +195,24 @@ describe('<BeaconViewDialog />', () => {
         expect(mockMap.fitBounds).toHaveBeenCalledTimes(1);
     });
 
-    it('renders a fallback when no live beacons remain', () => {
+    it('renders a fallback when there are no locations', () => {
+        // this is a cornercase, should not be a reachable state in UI anymore
+        const onFinished = jest.fn();
+        const room = setupRoom([defaultEvent]);
+        room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
+        const component = getComponent({ onFinished });
+
+        // map placeholder
+        expect(findByTestId(component, 'beacon-view-dialog-map-fallback')).toMatchSnapshot();
+
+        act(() => {
+            findByTestId(component, 'beacon-view-dialog-fallback-close').at(0).simulate('click');
+        });
+
+        expect(onFinished).toHaveBeenCalled();
+    });
+
+    it('renders map without markers when no live beacons remain', () => {
         const onFinished = jest.fn();
         const room = setupRoom([defaultEvent]);
         const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
@@ -206,9 +225,14 @@ describe('<BeaconViewDialog />', () => {
         const anotherBeaconEvent = makeBeaconInfoEvent(aliceId,
             roomId,
             { isLive: false },
-            '$bob-room1-1',
+            '$alice-room1-2',
         );
 
+        expect(mockMap.setCenter).toHaveBeenCalledWith({ lat: 51, lon: 41 });
+        // reset call counts
+        mocked(mockMap.setCenter).mockClear();
+        mocked(mockMap.fitBounds).mockClear();
+
         act(() => {
             // emits RoomStateEvent.BeaconLiveness
             room.currentState.setStateEvents([anotherBeaconEvent]);
@@ -216,14 +240,13 @@ describe('<BeaconViewDialog />', () => {
 
         component.setProps({});
 
-        // map placeholder
-        expect(findByTestId(component, 'beacon-view-dialog-map-fallback')).toMatchSnapshot();
-
-        act(() => {
-            findByTestId(component, 'beacon-view-dialog-fallback-close').at(0).simulate('click');
-        });
-
-        expect(onFinished).toHaveBeenCalled();
+        // no more avatars
+        expect(component.find('MemberAvatar').length).toBeFalsy();
+        // map still rendered
+        expect(component.find('Map').length).toBeTruthy();
+        // map location unchanged
+        expect(mockMap.setCenter).not.toHaveBeenCalled();
+        expect(mockMap.fitBounds).not.toHaveBeenCalled();
     });
 
     describe('sidebar', () => {

test/components/views/beacon/__snapshots__/BeaconViewDialog-test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<BeaconViewDialog /> renders a fallback when no live beacons remain 1`] = `
+exports[`<BeaconViewDialog /> renders a fallback when there are no locations 1`] = `
 Array [
   <MapFallback
     className="mx_BeaconViewDialog_map"

test/components/views/beacon/__snapshots__/DialogSidebar-test.tsx.snap

@@ -135,9 +135,11 @@ exports[`<DialogSidebar /> renders sidebar correctly without beacons 1`] = `
         />
       </div>
     </div>
-    <ol
-      class="mx_DialogSidebar_list"
-    />
+    <div
+      class="mx_DialogSidebar_noResults"
+    >
+      No live locations
+    </div>
   </div>
   );
 </div>