TASK: Convert <UserImage/> container to typescript

packages/neos-ui/src/Containers/Drawer/UserDropDown/UserImage.tsx

@@ -0,0 +1,23 @@
+/*
+ * This file is part of the Neos.Neos.Ui package.
+ *
+ * (c) Contributors of the Neos Project - www.neos.io
+ *
+ * This package is Open Source Software. For the full copyright and license
+ * information, please view the LICENSE file which was distributed with this
+ * source code.
+ */
+import React from 'react';
+
+import style from './style.module.css';
+
+export const UserImage: React.FC<{
+    userFirstName: string;
+    userLastName: string;
+}> = (props) => {
+    const userInitials = props.userFirstName?.charAt(0) + props.userLastName?.charAt(0);
+
+    return (
+        <div className={style.user__image}>{userInitials}</div>
+    );
+}

packages/neos-ui/src/Containers/Drawer/UserDropDown/index.js

@@ -4,20 +4,24 @@ import {connect} from 'react-redux';
 
 import {neos} from '@neos-project/neos-ui-decorators';
 import {Icon, DropDown} from '@neos-project/react-ui-components';
-import UserImage from './UserImage';
+import {UserImage} from './UserImage';
 import RestoreButtonItem from './RestoreButtonItem';
 
 import I18n from '@neos-project/neos-ui-i18n';
 
 import style from './style.module.css';
 @connect(state => ({
     userName: state?.user?.name?.fullName,
+    userFirstName: state?.user?.name?.firstName,
+    userLastName: state?.user?.name?.lastName,
     impersonateStatus: state?.user?.impersonate?.status
 }))
 @neos()
 export default class UserDropDown extends PureComponent {
     static propTypes = {
         userName: PropTypes.string.isRequired,
+        userFirstName: PropTypes.string.isRequired,
+        userLastName: PropTypes.string.isRequired,
         impersonateStatus: PropTypes.bool.isRequired
     };
 
@@ -29,7 +33,10 @@ export default class UserDropDown extends PureComponent {
             <div className={style.wrapper}>
                 <DropDown className={style.dropDown}>
                     <DropDown.Header className={style.dropDown__btn}>
-                        <UserImage />
+                        <UserImage
+                            userFirstName={this.props.userFirstName}
+                            userLastName={this.props.userLastName}
+                            />
                         <span className={style.dropDown__userName}>{this.props.userName}</span>
                     </DropDown.Header>
                     <DropDown.Contents className={style.dropDown__contents}>