Live location sharing: beacon list view tiles (#8363)

* add basic sidebar container

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

* optionally show icon in beaconstatus

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

* add avatar and style list item

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

* formatted last update time

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

* test beacon list item

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

* move makeRoomWithState events to test utils

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

* move beacon test helpers into utils

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

* newline

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

* add copyable text to beacon list item

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

* add copyable geo uri to list item

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

* improve spacing

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

* overflow scroll on list

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

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

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<BeaconListItem /> when a beacon is live and has locations renders beacon info 1`] = `"<li class=\\"mx_BeaconListItem\\"><div class=\\"mx_StyledLiveBeaconIcon mx_BeaconListItem_avatarIcon\\"></div><div class=\\"mx_BeaconListItem_info\\"><div class=\\"mx_BeaconStatus mx_BeaconStatus_Active mx_BeaconListItem_status\\"><div class=\\"mx_BeaconStatus_description\\"><span class=\\"mx_BeaconStatus_label\\">Alice's car</span><span class=\\"mx_BeaconStatus_expiryTime\\">Live until 16:04</span></div><div class=\\"mx_CopyableText\\"><div aria-label=\\"Copy\\" role=\\"button\\" tabindex=\\"0\\" class=\\"mx_AccessibleButton mx_CopyableText_copyButton\\"></div></div></div><span class=\\"mx_BeaconListItem_lastUpdated\\">Updated a few seconds ago</span></div></li>"`;

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

@@ -43,6 +43,7 @@ exports[`<BeaconStatus /> active state renders without children 1`] = `
   }
   displayStatus="Active"
   label="test label"
+  withIcon={true}
 >
   <div
     className="mx_BeaconStatus mx_BeaconStatus_Active"
@@ -59,7 +60,11 @@ exports[`<BeaconStatus /> active state renders without children 1`] = `
     <div
       className="mx_BeaconStatus_description"
     >
-      test label
+      <span
+        className="mx_BeaconStatus_label"
+      >
+        test label
+      </span>
       <BeaconExpiryTime
         beacon={
           Beacon {
@@ -114,6 +119,7 @@ exports[`<BeaconStatus /> renders loading state 1`] = `
 <BeaconStatus
   displayStatus="Loading"
   label="test label"
+  withIcon={true}
 >
   <div
     className="mx_BeaconStatus mx_BeaconStatus_Loading"
@@ -142,6 +148,7 @@ exports[`<BeaconStatus /> renders stopped state 1`] = `
 <BeaconStatus
   displayStatus="Stopped"
   label="test label"
+  withIcon={true}
 >
   <div
     className="mx_BeaconStatus mx_BeaconStatus_Stopped"

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

@@ -9,6 +9,7 @@ exports[`<OwnBeaconStatus /> renders without a beacon instance 1`] = `
     displayLiveTimeRemaining={true}
     displayStatus="Loading"
     label="Live location enabled"
+    withIcon={true}
   >
     <div
       className="mx_BeaconStatus mx_BeaconStatus_Loading mx_MBeaconBody_chin"