Live location sharing: maximised view sidebar container (#8360)

* add h4

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add mixin to clear list style

Signed-off-by: Kerry Archibald <kerrya@element.io>

* add basic sidebar container

Signed-off-by: Kerry Archibald <kerrya@element.io>

* open list view button on beaconviewdialog

Signed-off-by: Kerry Archibald <kerrya@element.io>

* update tests for new utils

Signed-off-by: Kerry Archibald <kerrya@element.io>

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

@@ -151,4 +151,43 @@ describe('<BeaconViewDialog />', () => {
 
         expect(onFinished).toHaveBeenCalled();
     });
+
+    describe('sidebar', () => {
+        it('opens sidebar on view list button click', () => {
+            const room = setupRoom([defaultEvent]);
+            const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
+            beacon.addLocations([location1]);
+            const component = getComponent();
+
+            act(() => {
+                findByTestId(component, 'beacon-view-dialog-open-sidebar').at(0).simulate('click');
+                component.setProps({});
+            });
+
+            expect(component.find('DialogSidebar').length).toBeTruthy();
+        });
+
+        it('closes sidebar on close button click', () => {
+            const room = setupRoom([defaultEvent]);
+            const beacon = room.currentState.beacons.get(getBeaconInfoIdentifier(defaultEvent));
+            beacon.addLocations([location1]);
+            const component = getComponent();
+
+            // open the sidebar
+            act(() => {
+                findByTestId(component, 'beacon-view-dialog-open-sidebar').at(0).simulate('click');
+                component.setProps({});
+            });
+
+            expect(component.find('DialogSidebar').length).toBeTruthy();
+
+            // now close it
+            act(() => {
+                findByTestId(component, 'dialog-sidebar-close').at(0).simulate('click');
+                component.setProps({});
+            });
+
+            expect(component.find('DialogSidebar').length).toBeFalsy();
+        });
+    });
 });

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

@@ -0,0 +1,47 @@
+/*
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from 'react';
+import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+
+import DialogSidebar from '../../../../src/components/views/beacon/DialogSidebar';
+import { findByTestId } from '../../../test-utils';
+
+describe('<DialogSidebar />', () => {
+    const defaultProps = {
+        beacons: [],
+        requestClose: jest.fn(),
+    };
+    const getComponent = (props = {}) =>
+        mount(<DialogSidebar {...defaultProps} {...props} />);
+
+    it('renders sidebar correctly', () => {
+        const component = getComponent();
+        expect(component).toMatchSnapshot();
+    });
+
+    it('closes on close button click', () => {
+        const requestClose = jest.fn();
+        const component = getComponent({ requestClose });
+
+        act(() => {
+            findByTestId(component, 'dialog-sidebar-close').at(0).simulate('click');
+        });
+
+        expect(requestClose).toHaveBeenCalled();
+    });
+});

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

@@ -0,0 +1,53 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<DialogSidebar /> renders sidebar correctly 1`] = `
+<DialogSidebar
+  beacons={Array []}
+  requestClose={[MockFunction]}
+>
+  <div
+    className="mx_DialogSidebar"
+  >
+    <div
+      className="mx_DialogSidebar_header"
+    >
+      <Heading
+        size="h4"
+      >
+        <h4
+          className="mx_Heading_h4"
+        >
+          View List
+        </h4>
+      </Heading>
+      <AccessibleButton
+        className="mx_DialogSidebar_closeButton"
+        data-test-id="dialog-sidebar-close"
+        element="div"
+        onClick={[MockFunction]}
+        role="button"
+        tabIndex={0}
+        title="Close sidebar"
+      >
+        <div
+          className="mx_AccessibleButton mx_DialogSidebar_closeButton"
+          data-test-id="dialog-sidebar-close"
+          onClick={[MockFunction]}
+          onKeyDown={[Function]}
+          onKeyUp={[Function]}
+          role="button"
+          tabIndex={0}
+          title="Close sidebar"
+        >
+          <div
+            className="mx_DialogSidebar_closeButtonIcon"
+          />
+        </div>
+      </AccessibleButton>
+    </div>
+    <ol
+      className="mx_DialogSidebar_list"
+    />
+  </div>
+</DialogSidebar>
+`;

test/components/views/typography/Heading-test.tsx

@@ -25,4 +25,8 @@ describe('<Heading />', () => {
     it('renders h3 with correct attributes', () => {
         expect(getComponent({ size: 'h3' })).toMatchSnapshot();
     });
+
+    it('renders h4 with correct attributes', () => {
+        expect(getComponent({ size: 'h4' })).toMatchSnapshot();
+    });
 });

test/components/views/typography/__snapshots__/Heading-test.tsx.snap

@@ -32,3 +32,14 @@ exports[`<Heading /> renders h3 with correct attributes 1`] = `
   </div>
 </h3>
 `;
+
+exports[`<Heading /> renders h4 with correct attributes 1`] = `
+<h4
+  class="mx_Heading_h4 test"
+  data-test-id="test"
+>
+  <div>
+    test
+  </div>
+</h4>
+`;