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

@@ -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}>
+                    !!value
-                        { !!index && ' · ' }
+                        ? <Fragment key={id}>
-                        <DeviceMetadata id={id} value={value} />
+                            { !!index && ' · ' }
-                    </Fragment>,
+                            <DeviceMetadata id={id} value={value} />
+                        </Fragment>
+                        : null,
                 ) }
             </div>
         </div>

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

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

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

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"
           >

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