GH-1907 - Updating person popover (#1959)

* Updating assginee popover

* Updating css

* Removing console log

* Updating border property

* Updating avatar

* Updating tests

webapp/src/components/properties/user/__snapshots__/user.test.tsx.snap

@@ -20,7 +20,11 @@ exports[`components/properties/user not readonly 1`] = `
         <div
           class="react-select__single-value css-ciz25-singleValue"
         >
-          username-1
+          <div
+            class="UserProperty-item"
+          >
+            username-1
+          </div>
         </div>
         <div
           class="css-1shkodo-Input"
@@ -208,7 +212,11 @@ exports[`components/properties/user user dropdown open 1`] = `
         <div
           class="react-select__single-value css-ciz25-singleValue"
         >
-          username-1
+          <div
+            class="UserProperty-item"
+          >
+            username-1
+          </div>
         </div>
         <div
           class="css-1shkodo-Input"
@@ -288,7 +296,11 @@ exports[`components/properties/user user dropdown open 1`] = `
           id="react-select-4-option-0"
           tabindex="-1"
         >
-          username-1
+          <div
+            class="UserProperty-item"
+          >
+            username-1
+          </div>
         </div>
       </div>
     </div>

webapp/src/components/properties/user/user.scss

@@ -9,4 +9,62 @@
         text-overflow: ellipsis;
         min-width: unset;
     }
+
+    .UserProperty-item {
+        display: flex;
+        align-items: center;
+
+        img {
+            border-radius: 50px;
+            width: 24px;
+            height: 24px;
+            margin-right: 6px;
+        }
+    }
+
+    .react-select__menu {
+        background: rgba(var(--center-channel-bg-rgb), 1);
+        box-shadow: var(--elevation-4);
+        border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
+        border-radius: 4px;
+    }
+
+    .react-select__single-value {
+        margin: 0;
+        position: relative;
+        top: 12px;
+        max-width: 100%;
+    }
+
+    .react-select__option {
+        display: flex;
+        align-items: center;
+        height: 40px;
+        padding: 0 40px 0 20px;
+
+        &:hover {
+            background: rgba(var(--center-channel-color-rgb), 0.08);
+        }
+
+        &:active {
+            background: rgba(var(--button-bg-rgb), 0.08);
+        }
+
+        &.react-select__option--is-selected {
+            background: rgba(var(--button-bg-rgb), 0.08);
+            color: rgba(var(--center-channel-color-rgb), 1);
+        }
+
+        .UserProperty-item {
+            img {
+                margin-right: 12px;
+            }
+        }
+    }
+
+    .react-select__menu-list {
+        border: 0;
+    }
 }
+
+

webapp/src/components/properties/user/user.tsx

@@ -12,6 +12,8 @@ import {useAppSelector} from '../../../store/hooks'
 import './user.scss'
 import {getSelectBaseStyle} from '../../../theme'
 
+const imageURLForUser = (window as any).Components?.imageURLForUser
+
 type Props = {
     value: string,
     readonly: boolean,
@@ -26,6 +28,25 @@ const selectStyles = {
     }),
 }
 
+const formatOptionLabel = (user: any) => {
+    let profileImg
+    if (imageURLForUser) {
+        profileImg = imageURLForUser(user.id)
+    }
+
+    return (
+        <div className='UserProperty-item'>
+            {profileImg && (
+                <img
+                    alt='UserProperty-avatar'
+                    src={profileImg}
+                />
+            )}
+            {user.username}
+        </div>
+    )
+}
+
 const UserProperty = (props: Props): JSX.Element => {
     const workspaceUsers = useAppSelector<IUser[]>(getWorkspaceUsersList)
     const workspaceUsersById = useAppSelector<{[key:string]: IUser}>(getWorkspaceUsers)
@@ -42,6 +63,7 @@ const UserProperty = (props: Props): JSX.Element => {
             backspaceRemovesValue={true}
             className={'UserProperty octo-propertyvalue'}
             classNamePrefix={'react-select'}
+            formatOptionLabel={formatOptionLabel}
             styles={selectStyles}
             placeholder={'Empty'}
             getOptionLabel={(o: IUser) => o.username}