From 8e6b4ef04b5481ba2bd094e1444b3eb94a30f9f2 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Tue, 6 Sep 2022 15:21:23 +0200
Subject: [PATCH 1/2] filter out nulled metadatas in device tile properly

---
 src/components/views/settings/devices/DeviceTile.tsx | 12 ++++++++----
 .../__snapshots__/DevicesPanel-test.tsx.snap         |  6 ------
 .../__snapshots__/CurrentDeviceSection-test.tsx.snap |  4 ----
 .../devices/__snapshots__/DeviceTile-test.tsx.snap   |  6 ------
 .../__snapshots__/SelectableDeviceTile-test.tsx.snap |  1 -
 .../__snapshots__/SessionManagerTab-test.tsx.snap    |  6 ------
 6 files changed, 8 insertions(+), 27 deletions(-)

diff --git a/src/components/views/settings/devices/DeviceTile.tsx b/src/components/views/settings/devices/DeviceTile.tsx
index 73ee17b2f4a..c9efcaa0c63 100644
--- a/src/components/views/settings/devices/DeviceTile.tsx
+++ b/src/components/views/settings/devices/DeviceTile.tsx
@@ -93,16 +93,20 @@ const DeviceTile: React.FC<DeviceTileProps> = ({ device, children, onClick }) =>
             { id: 'lastSeenIp', value: device.last_seen_ip },
         ];
 
+    console.log(metadata);
+
     return <div className="mx_DeviceTile" data-testid={`device-tile-${device.device_id}`}>
         <DeviceType isVerified={device.isVerified} />
         <div className="mx_DeviceTile_info" onClick={onClick}>
             <DeviceTileName device={device} />
             <div className="mx_DeviceTile_metadata">
                 { metadata.map(({ id, value }, index) =>
-                    <Fragment key={id}>
-                        { !!index && ' · ' }
-                        <DeviceMetadata id={id} value={value} />
-                    </Fragment>,
+                    !!value
+                        ? <Fragment key={id}>
+                            { !!index && ' · ' }
+                            <DeviceMetadata id={id} value={value} />
+                        </Fragment>
+                        : null,
                 ) }
             </div>
         </div>
diff --git a/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap b/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap
index f0c569a82f1..2f2f3a7773e 100644
--- a/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap
+++ b/test/components/views/settings/__snapshots__/DevicesPanel-test.tsx.snap
@@ -141,8 +141,6 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
             >
               Unverified
             </span>
-             · 
-             · 
           </div>
         </div>
         <div
@@ -259,8 +257,6 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
               >
                 Unverified
               </span>
-               · 
-               · 
             </div>
           </div>
           <div
@@ -336,8 +332,6 @@ exports[`<DevicesPanel /> renders device panel with devices 1`] = `
               >
                 Unverified
               </span>
-               · 
-               · 
             </div>
           </div>
           <div
diff --git a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
index 043fadc0162..95bfe7f4598 100644
--- a/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/CurrentDeviceSection-test.tsx.snap
@@ -171,8 +171,6 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
             >
               Unverified
             </span>
-             · 
-             · 
           </div>
         </div>
         <div
@@ -271,8 +269,6 @@ exports[`<CurrentDeviceSection /> renders device and correct security card when
             >
               Unverified
             </span>
-             · 
-             · 
           </div>
         </div>
         <div
diff --git a/test/components/views/settings/devices/__snapshots__/DeviceTile-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/DeviceTile-test.tsx.snap
index a2f568ecd1a..913b6333fb7 100644
--- a/test/components/views/settings/devices/__snapshots__/DeviceTile-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/DeviceTile-test.tsx.snap
@@ -36,8 +36,6 @@ exports[`<DeviceTile /> renders a device with no metadata 1`] = `
         >
           Unverified
         </span>
-         · 
-         · 
       </div>
     </div>
     <div
@@ -83,8 +81,6 @@ exports[`<DeviceTile /> renders a verified device with no metadata 1`] = `
         >
           Unverified
         </span>
-         · 
-         · 
       </div>
     </div>
     <div
@@ -134,8 +130,6 @@ exports[`<DeviceTile /> renders display name with a tooltip 1`] = `
         >
           Unverified
         </span>
-         · 
-         · 
       </div>
     </div>
     <div
diff --git a/test/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap b/test/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
index 7d9bc2532d5..de5b76f8b4c 100644
--- a/test/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
+++ b/test/components/views/settings/devices/__snapshots__/SelectableDeviceTile-test.tsx.snap
@@ -71,7 +71,6 @@ exports[`<SelectableDeviceTile /> renders unselected device tile with checkbox 1
             Unverified
           </span>
            · 
-           · 
           <span
             data-testid="device-metadata-lastSeenIp"
           >
diff --git a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
index 468556195fc..4fab1d48d34 100644
--- a/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
+++ b/test/components/views/settings/tabs/user/__snapshots__/SessionManagerTab-test.tsx.snap
@@ -83,8 +83,6 @@ exports[`<SessionManagerTab /> renders current session section with a verified s
           >
             Verified
           </span>
-           · 
-           · 
         </div>
       </div>
       <div
@@ -181,8 +179,6 @@ exports[`<SessionManagerTab /> renders current session section with an unverifie
           >
             Unverified
           </span>
-           · 
-           · 
         </div>
       </div>
       <div
@@ -267,8 +263,6 @@ exports[`<SessionManagerTab /> sets device verification status correctly 1`] = `
       >
         Verified
       </span>
-       · 
-       · 
     </div>
   </div>
   <div

From 0cadf19cb37a09ca6051d36b41c9ff6d0a5675d5 Mon Sep 17 00:00:00 2001
From: Kerry Archibald <kerrya@element.io>
Date: Tue, 6 Sep 2022 15:22:47 +0200
Subject: [PATCH 2/2] remove log

---
 src/components/views/settings/devices/DeviceTile.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/views/settings/devices/DeviceTile.tsx b/src/components/views/settings/devices/DeviceTile.tsx
index c9efcaa0c63..a23e1586db4 100644
--- a/src/components/views/settings/devices/DeviceTile.tsx
+++ b/src/components/views/settings/devices/DeviceTile.tsx
@@ -93,8 +93,6 @@ const DeviceTile: React.FC<DeviceTileProps> = ({ device, children, onClick }) =>
             { id: 'lastSeenIp', value: device.last_seen_ip },
         ];
 
-    console.log(metadata);
-
     return <div className="mx_DeviceTile" data-testid={`device-tile-${device.device_id}`}>
         <DeviceType isVerified={device.isVerified} />
         <div className="mx_DeviceTile_info" onClick={onClick}>