update code to handle column headers without text (#27419)

Co-authored-by: Mattermost Build <build@mattermost.com>

webapp/channels/src/components/admin_console/system_user_detail/team_list/__snapshots__/abstract_list.test.tsx.snap

@@ -88,6 +88,15 @@ exports[`admin_console/system_user_detail/team_list/AbstractList should match sn
         id="admin.systemUserDetail.teamList.header.role"
       />
     </div>
+    <div
+      className="AbstractList__header-label"
+      key="3"
+      style={
+        Object {
+          "width": "150px",
+        }
+      }
+    />
   </div>
   <div
     className="AbstractList__body"
@@ -322,6 +331,15 @@ exports[`admin_console/system_user_detail/team_list/AbstractList should match sn
         id="admin.systemUserDetail.teamList.header.role"
       />
     </div>
+    <div
+      className="AbstractList__header-label"
+      key="3"
+      style={
+        Object {
+          "width": "150px",
+        }
+      }
+    />
   </div>
   <div
     className="AbstractList__body"
@@ -556,6 +574,15 @@ exports[`admin_console/system_user_detail/team_list/AbstractList should match sn
         id="admin.systemUserDetail.teamList.header.role"
       />
     </div>
+    <div
+      className="AbstractList__header-label"
+      key="3"
+      style={
+        Object {
+          "width": "150px",
+        }
+      }
+    />
   </div>
   <div
     className="AbstractList__body"

webapp/channels/src/components/admin_console/system_user_detail/team_list/abstract_list.test.tsx

@@ -65,6 +65,11 @@ describe('admin_console/system_user_detail/team_list/AbstractList', () => {
                 width: '150px',
             },
         },
+        {
+            style: {
+                width: '150px',
+            },
+        },
     ];
 
     const defaultProps = {

webapp/channels/src/components/admin_console/system_user_detail/team_list/abstract_list.tsx

@@ -104,15 +104,19 @@ export default class AbstractList extends React.PureComponent<Props, State> {
         if (this.props.data.length > 0) {
             return (
                 <div className='AbstractList__header'>
-                    {this.props.headerLabels.map((headerLabel, id) => (
-                        <div
-                            key={id}
-                            className='AbstractList__header-label'
-                            style={headerLabel.style}
-                        >
-                            <FormattedMessage {...headerLabel.label}/>
-                        </div>
-                    ))}
+                    {this.props.headerLabels.map((headerLabel, id) => {
+                        const key = id;
+                        const message = headerLabel.label ? <FormattedMessage {...headerLabel.label}/> : '';
+                        return (
+                            <div
+                                key={key}
+                                className='AbstractList__header-label'
+                                style={headerLabel.style}
+                            >
+                                {message}
+                            </div>
+                        );
+                    })}
                 </div>
             );
         }