From d69393a3aa29d9c72f29b6e5a5f7ecbf38414afb Mon Sep 17 00:00:00 2001
From: Kerry <kerrya@element.io>
Date: Mon, 12 Sep 2022 13:06:12 +0200
Subject: [PATCH] Device manager - filter out nulled metadatas in device tile
 properly (PSG-703) (#9251)

* filter out nulled metadatas in device tile properly

* remove log
---
 src/components/views/settings/devices/DeviceTile.tsx   | 10 ++++++----
 .../settings/__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 -
 .../user/__snapshots__/SessionManagerTab-test.tsx.snap |  6 ------
 6 files changed, 6 insertions(+), 27 deletions(-)

diff --git a/src/components/views/settings/devices/DeviceTile.tsx b/src/components/views/settings/devices/DeviceTile.tsx
index 73ee17b2f4..a23e1586db 100644
--- a/src/components/views/settings/devices/DeviceTile.tsx
+++ b/src/components/views/settings/devices/DeviceTile.tsx
@@ -99,10 +99,12 @@ const DeviceTile: React.FC<DeviceTileProps> = ({ device, children, 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 f0c569a82f..2f2f3a7773 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 d65122f82f..e20ce4f48d 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
@@ -283,8 +281,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 a2f568ecd1..913b6333fb 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 7d9bc2532d..de5b76f8b4 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 ad796130e6..87f9aab952 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
@@ -279,8 +275,6 @@ exports[`<SessionManagerTab /> sets device verification status correctly 1`] = `
       >
         Verified
       </span>
-       · 
-       · 
     </div>
   </div>
   <div