From c45392954498925b1b414ff6b49296817ea02981 Mon Sep 17 00:00:00 2001
From: Tomas Kikutis <t.kikutis@gmail.com>
Date: Thu, 10 Aug 2023 16:04:17 +0200
Subject: [PATCH] Use custom avatars (#1839)

---
 .../AssignmentItem/AssignmentItem_test.tsx    |   4 +-
 .../Assignments/AssignmentItem/index.tsx      |  11 +-
 .../AssignmentPreviewHeader.tsx               |   7 +-
 .../CoverageEditor/CoverageFormHeader.tsx     |  14 +-
 client/components/Coverages/CoverageIcons.tsx |   8 +-
 client/components/Coverages/CoverageItem.tsx  |  27 +---
 .../LockContainer/LockContainerPopup.tsx      |   4 +-
 client/components/LockContainer/index.tsx     |   8 +-
 .../Form/SelectUserInput/SelectUserPopup.tsx  |   6 +-
 .../UI/Form/SelectUserInput/index.tsx         |   4 +-
 client/components/UserAvatar/index.tsx        | 130 +++++++-----------
 client/components/index.ts                    |   1 -
 package-lock.json                             |  18 +--
 package.json                                  |   2 +-
 14 files changed, 90 insertions(+), 154 deletions(-)

diff --git a/client/components/Assignments/AssignmentItem/AssignmentItem_test.tsx b/client/components/Assignments/AssignmentItem/AssignmentItem_test.tsx
index 87994f1ce..d61202109 100644
--- a/client/components/Assignments/AssignmentItem/AssignmentItem_test.tsx
+++ b/client/components/Assignments/AssignmentItem/AssignmentItem_test.tsx
@@ -8,7 +8,7 @@ import {Provider} from 'react-redux';
 import * as helpers from '../../tests/helpers';
 import {cloneDeep} from 'lodash';
 import {AbsoluteDate} from '../../AbsoluteDate';
-import {UserAvatar} from '../../UserAvatar';
+import {UserAvatarWithMargin} from '../../UserAvatar';
 
 describe('assignments', () => {
     describe('components', () => {
@@ -101,7 +101,7 @@ describe('assignments', () => {
                 const wrapper = getMountedWrapper();
 
                 expect(wrapper.find('.icon-time').length).toBe(1);
-                expect(wrapper.find(UserAvatar).length).toBe(1);
+                expect(wrapper.find(UserAvatarWithMargin).length).toBe(1);
                 expect(wrapper.find(AbsoluteDate).length).toBe(1);
             });
 
diff --git a/client/components/Assignments/AssignmentItem/index.tsx b/client/components/Assignments/AssignmentItem/index.tsx
index 7b70d304c..57b1a018d 100644
--- a/client/components/Assignments/AssignmentItem/index.tsx
+++ b/client/components/Assignments/AssignmentItem/index.tsx
@@ -20,7 +20,7 @@ import {ASSIGNMENTS, CLICK_DELAY} from '../../../constants';
 import {getAssignmentTypeInfo} from '../../../utils/assignments';
 
 import {Menu} from 'superdesk-ui-framework/react';
-import {UserAvatar} from '../../';
+import {UserAvatarWithMargin} from '../../../components/UserAvatar';
 import {Item, Border, Column, Row} from '../../UI/List';
 
 import {getComponentForField, getAssignmentsListView} from './fields';
@@ -217,14 +217,7 @@ export class AssignmentItem extends React.Component<IProps, IState> {
 
         return (
             <Column border={false}>
-                <UserAvatar
-                    user={user}
-                    large={false}
-                    withLoggedInfo={isCurrentUser}
-                    isLoggedIn={isCurrentUser}
-                    tooltip={tooltip}
-                    showInactive
-                />
+                <UserAvatarWithMargin user={user} tooltip={tooltip} />
             </Column>
         );
     }
diff --git a/client/components/Assignments/AssignmentPreviewContainer/AssignmentPreviewHeader.tsx b/client/components/Assignments/AssignmentPreviewContainer/AssignmentPreviewHeader.tsx
index 48c863eda..93fc66a50 100644
--- a/client/components/Assignments/AssignmentPreviewContainer/AssignmentPreviewHeader.tsx
+++ b/client/components/Assignments/AssignmentPreviewContainer/AssignmentPreviewHeader.tsx
@@ -9,7 +9,6 @@ import {assignmentUtils, planningUtils, gettext, stringUtils} from '../../../uti
 import {Item, Column, Row} from '../../UI/List';
 import {ContentBlock, ContentBlockInner, Tools} from '../../UI/SidePanel';
 import {
-    UserAvatar,
     AbsoluteDate,
     PriorityLabel,
     StateLabel,
@@ -18,6 +17,7 @@ import {
     ItemActionsMenu,
     Label,
 } from '../../';
+import {UserAvatar} from '../../../components/UserAvatar';
 import {TO_BE_CONFIRMED_FIELD} from '../../../constants';
 
 export const AssignmentPreviewHeader = ({
@@ -77,10 +77,7 @@ export const AssignmentPreviewHeader = ({
                                 <Column border={false}>
                                     <UserAvatar
                                         user={assignedUser}
-                                        large={true}
-                                        noMargin={true}
-                                        initials={false}
-                                        showInactive
+                                        size="large"
                                     />
                                 </Column>
                             )
diff --git a/client/components/Coverages/CoverageEditor/CoverageFormHeader.tsx b/client/components/Coverages/CoverageEditor/CoverageFormHeader.tsx
index dcc41be83..26c534fb3 100644
--- a/client/components/Coverages/CoverageEditor/CoverageFormHeader.tsx
+++ b/client/components/Coverages/CoverageEditor/CoverageFormHeader.tsx
@@ -8,7 +8,7 @@ import {IArticle, IDesk, IUser} from 'superdesk-api';
 import {getCreator, getItemInArrayById, gettext, planningUtils, onEventCapture} from '../../../utils';
 import {Item, Border, Column, Row as ListRow} from '../../UI/List';
 import {Button} from '../../UI';
-import {UserAvatar} from '../../';
+import {UserAvatar} from '../../../components/UserAvatar';
 import {StateLabel} from '../../StateLabel';
 import * as actions from '../../../actions';
 
@@ -85,10 +85,8 @@ export class CoverageFormHeaderComponent extends React.PureComponent<IProps> {
                     <Border />
                     <Column border={false}>
                         <UserAvatar
-                            empty={true}
-                            noMargin={true}
-                            large={true}
-                            initials={false}
+                            user={null}
+                            size="large"
                         />
                     </Column>
                     <Column grow={true} border={false}>
@@ -122,10 +120,8 @@ export class CoverageFormHeaderComponent extends React.PureComponent<IProps> {
                 <Border />
                 <Column border={false}>
                     <UserAvatar
-                        user={userAssigned}
-                        noMargin={true}
-                        large={true}
-                        showInactive
+                        user={userAssigned == null || typeof userAssigned === 'string' ? null : userAssigned}
+                        size="large"
                     />
                 </Column>
                 <Column grow={true} border={false}>
diff --git a/client/components/Coverages/CoverageIcons.tsx b/client/components/Coverages/CoverageIcons.tsx
index 4662d6325..08aa5ce11 100644
--- a/client/components/Coverages/CoverageIcons.tsx
+++ b/client/components/Coverages/CoverageIcons.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import moment from 'moment-timezone';
-import {getUserInitials} from './../../components/UserAvatar';
+import {getCustomAvatarContent, getUserInitials} from './../../components/UserAvatar';
 import * as config from 'appConfig';
 import {IPlanningCoverageItem, IG2ContentType, IContactItem, IPlanningConfig} from '../../interfaces';
 import {IUser, IDesk} from 'superdesk-api';
@@ -17,7 +17,7 @@ import {
 import {IPropsAvatarPlaceholder} from 'superdesk-ui-framework/react/components/avatar/avatar-placeholder';
 import {IPropsAvatar} from 'superdesk-ui-framework/react/components/avatar/avatar';
 import {trimStartExact} from 'superdesk-core/scripts/core/helpers/utils';
-import {getItemWorkflowStateLabel, planningUtils} from '../../utils';
+import {getItemWorkflowStateLabel, gettext, planningUtils} from '../../utils';
 import {getVocabularyItemFieldTranslated} from '../../utils/vocabularies';
 import {getUserInterfaceLanguageFromCV} from '../../utils/users';
 import './coverage-icons.scss';
@@ -67,8 +67,9 @@ export function getAvatarForCoverage(
 
     if (user == null) {
         const placeholder: Omit<IPropsAvatarPlaceholder, 'size'> = {
-            kind: 'plus-button',
+            kind: 'user-icon',
             icon: icon,
+            tooltip: gettext('Unassigned'),
         };
 
         return placeholder;
@@ -78,6 +79,7 @@ export function getAvatarForCoverage(
             imageUrl: user.picture_url,
             displayName: user.display_name,
             icon: icon,
+            customContent: getCustomAvatarContent(user),
         };
 
         return avatar;
diff --git a/client/components/Coverages/CoverageItem.tsx b/client/components/Coverages/CoverageItem.tsx
index dfd12729d..100118b46 100644
--- a/client/components/Coverages/CoverageItem.tsx
+++ b/client/components/Coverages/CoverageItem.tsx
@@ -20,7 +20,6 @@ import {getUserInterfaceLanguageFromCV} from '../../utils/users';
 import {Item, Column, Row, Border, ActionMenu} from '../UI/List';
 import {StateLabel, InternalNoteLabel} from '../../components';
 import {CoverageIcons} from './CoverageIcons';
-import {UserAvatar} from '../UserAvatar';
 
 interface IProps {
     coverage: IPlanningCoverageItem;
@@ -166,20 +165,12 @@ export class CoverageItemComponent extends React.Component<IProps, IState> {
 
         return (
             <Column border={false}>
-                {this.state.userAssigned ? (
-                    <UserAvatar
-                        user={this.state.userAssigned}
-                        small={false}
-                        showInactive
-                    />
-                ) : (
-                    <UserAvatar
-                        empty={true}
-                        noMargin={true}
-                        initials={false}
-                        small={false}
-                    />
-                )}
+                <CoverageIcons
+                    coverages={[this.props.coverage]}
+                    users={this.props.users}
+                    desks={this.props.desks}
+                    contentTypes={this.props.contentTypes}
+                />
             </Column>
         );
     }
@@ -187,12 +178,6 @@ export class CoverageItemComponent extends React.Component<IProps, IState> {
     renderFirstRow() {
         return (
             <Row paddingBottom>
-                <CoverageIcons
-                    coverages={[this.props.coverage]}
-                    users={this.props.users}
-                    desks={this.props.desks}
-                    contentTypes={this.props.contentTypes}
-                />
                 <span className="sd-overflow-ellipsis sd-list-item--element-grow">
                     {this.state.displayContentType}
                 </span>
diff --git a/client/components/LockContainer/LockContainerPopup.tsx b/client/components/LockContainer/LockContainerPopup.tsx
index 7f662b497..cf51db53b 100644
--- a/client/components/LockContainer/LockContainerPopup.tsx
+++ b/client/components/LockContainer/LockContainerPopup.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import {gettext} from '../../utils';
 
-import {UserAvatar} from '../';
+import {UserAvatarWithMargin} from '../../components/UserAvatar';
 import {Popup, Header, Content, Footer} from '../UI/Popup';
 import {Button} from '../UI';
 
@@ -33,7 +33,7 @@ export const LockContainerPopup = ({
                 noBorder={true}
             />
             <Content>
-                <UserAvatar user={user} large={true} />
+                <UserAvatarWithMargin user={user} size="large" />
                 <div>{user.display_name}</div>
             </Content>
             <Footer noBorder={true}>
diff --git a/client/components/LockContainer/index.tsx b/client/components/LockContainer/index.tsx
index aa9a58676..21c96c3a0 100644
--- a/client/components/LockContainer/index.tsx
+++ b/client/components/LockContainer/index.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {get} from 'lodash';
 import classNames from 'classnames';
 
-import {UserAvatar} from '../';
+import {UserAvatarWithMargin} from '../../components/UserAvatar';
 import {LockContainerPopup} from './LockContainerPopup';
 
 import './style.scss';
@@ -49,11 +49,7 @@ export class LockContainer extends React.Component {
                     )}
                 >
                     <a onClick={this.toggleOpenUnlockPopup}>
-                        <UserAvatar
-                            user={user}
-                            withLoggedInfo={withLoggedInfo}
-                            small={small}
-                        />
+                        <UserAvatarWithMargin user={user} />
                     </a>
                 </div>
                 {this.state.openUnlockPopup && (
diff --git a/client/components/UI/Form/SelectUserInput/SelectUserPopup.tsx b/client/components/UI/Form/SelectUserInput/SelectUserPopup.tsx
index ec0acf4f8..97c3a8734 100644
--- a/client/components/UI/Form/SelectUserInput/SelectUserPopup.tsx
+++ b/client/components/UI/Form/SelectUserInput/SelectUserPopup.tsx
@@ -7,7 +7,7 @@ import {KEYCODES} from '../../constants';
 import {gettext, scrollListItemIfNeeded, onEventCapture} from '../../utils';
 
 import {Popup, Content} from '../../Popup';
-import {UserAvatar} from '../../../';
+import {UserAvatarWithMargin} from '../../../../components/UserAvatar';
 
 import './style.scss';
 
@@ -118,7 +118,7 @@ export class SelectUserPopup extends React.Component {
                                         {'user-search__popup-item--active': index === this.state.activeIndex})}
                             >
                                 <button type="button" onClick={this.handleOnChange.bind(null, user)}>
-                                    <UserAvatar user={user} />
+                                    <UserAvatarWithMargin user={user} />
                                     <div className="user-search__popup-item-label">{user.display_name}</div>
                                 </button>
                             </li>
@@ -127,7 +127,7 @@ export class SelectUserPopup extends React.Component {
                         {users.length === 0 && (
                             <li className="user-search__popup-item">
                                 <button disabled>
-                                    <UserAvatar empty={true} initials={false} />
+                                    <UserAvatarWithMargin user={null} />
                                     <div className="user-search__popup-item-label">{gettext('No users found')}</div>
                                 </button>
                             </li>
diff --git a/client/components/UI/Form/SelectUserInput/index.tsx b/client/components/UI/Form/SelectUserInput/index.tsx
index 562fd8ef3..7a6307eae 100644
--- a/client/components/UI/Form/SelectUserInput/index.tsx
+++ b/client/components/UI/Form/SelectUserInput/index.tsx
@@ -7,7 +7,7 @@ import {KEYCODES} from '../../constants';
 import {onEventCapture} from '../../utils';
 
 import {Row, LineInput, Label, Input} from '../';
-import {UserAvatar} from '../../../';
+import {UserAvatarWithMargin} from '../../../../components/UserAvatar';
 import {SelectUserPopup} from './SelectUserPopup';
 
 interface IProps {
@@ -118,7 +118,7 @@ export class SelectUserInput extends React.Component<IProps, IState> {
                                     onClick={this.openPopup}
                                     style={inline ? {margin: 0} : {}}
                                 >
-                                    <UserAvatar user={value} />
+                                    <UserAvatarWithMargin user={value} />
                                     <div className="user-search__popup-item-label">{value.display_name}</div>
                                     {!readOnly && (
                                         <button type="button" onClick={this.onUserChange.bind(null, null)}>
diff --git a/client/components/UserAvatar/index.tsx b/client/components/UserAvatar/index.tsx
index 22aae5dc6..d53f92735 100644
--- a/client/components/UserAvatar/index.tsx
+++ b/client/components/UserAvatar/index.tsx
@@ -1,95 +1,63 @@
-import React, {Fragment} from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-import {OverlayTrigger, Tooltip} from 'react-bootstrap';
+/* eslint-disable react/no-multi-comp */
+import React from 'react';
 import './style.scss';
-import {gettext} from '../../utils';
+import {IUser} from 'superdesk-api';
+import {Avatar, AvatarPlaceholder} from 'superdesk-ui-framework/react';
+import {CC} from 'superdesk-core/scripts/core/ui/configurable-ui-components';
 
 export function getUserInitials(displayName) {
     return displayName.replace(/\W*(\w)\w*/g, '$1').toUpperCase();
 }
+interface IProps {
+    user: IUser | null;
+    tooltip?: string;
+    size?: 'small' | 'large'; // defaults to small
+}
 
-export const UserAvatar = ({
-    user,
-    small,
-    large,
-    withLoggedInfo,
-    isLoggedIn,
-    noMargin,
-    initials,
-    empty,
-    tooltip,
-    showInactive}) => {
-    let inactiveText;
+export function getCustomAvatarContent(user: IUser) {
+    const AvatarContent = CC.UserAvatar;
 
-    if (showInactive && user) {
-        if (user.is_active === false) {
-            inactiveText = gettext('inactive');
-        }
+    return AvatarContent == null
+        ? null
+        : (
+            <AvatarContent user={user} />
+        );
+}
 
-        if (user.is_enabled === false) {
-            inactiveText = gettext('disabled');
+export class UserAvatar extends React.PureComponent<IProps> {
+    render() {
+        const {user} = this.props;
+
+        const size: IProps['size'] = this.props.size ?? 'small';
+
+        if (user == null) {
+            return (
+                <AvatarPlaceholder kind="user-icon" size={size} />
+            );
+        } else {
+            return (
+                <Avatar
+                    imageUrl={user.picture_url}
+                    displayName={user.display_name}
+                    initials={getUserInitials(user.display_name)}
+                    size={size}
+                    customContent={getCustomAvatarContent(user)}
+                    tooltip={this.props.tooltip}
+                />
+            );
         }
     }
-    if ((user && user.display_name) || empty) {
-        const avatar = (
-            <figure
-                className={classNames('avatar',
-                    {
-                        'avatar--large': large,
-                        'avatar--small': small && !large,
-                        'avatar--no-margin': noMargin,
-                        initials: initials,
-                        planning__initials: initials,
-                        'avatar-with-info': withLoggedInfo,
-                        'user-logged': isLoggedIn,
-                        'avatar--empty': empty,
-                    })}
-            >
-                {user && user.display_name && getUserInitials(user.display_name)}
-                { withLoggedInfo && <div className="logged-info" /> }
-            </figure>
-        );
+}
 
+/**
+ * @deprecated use UserAvatar (without margin) instead and handle spacing at the usage level
+ */
+export class UserAvatarWithMargin extends React.PureComponent<IProps> {
+    render() {
         return (
-            <Fragment>{tooltip && (
-                <OverlayTrigger
-                    placement="left"
-                    overlay={<Tooltip id="user_name">{tooltip}</Tooltip>}
-                >
-                    {avatar}
-                </OverlayTrigger>
-            ) || avatar}
-            {inactiveText && (
-                <span
-                    className={
-                        classNames('disabled-label user-inactive', {'user-inactive--small': !large})}
-                >
-                    {inactiveText}
-                </span>
-            )}</Fragment>
+            <div style={{display: 'inline-block', verticalAlign: 'middle', marginInlineEnd: '0.6rem'}}>
+                <UserAvatar {...this.props} />
+            </div>
         );
     }
-
-    return null;
-};
-
-UserAvatar.propTypes = {
-    user: PropTypes.object,
-    small: PropTypes.bool,
-    large: PropTypes.bool,
-    withLoggedInfo: PropTypes.bool,
-    isLoggedIn: PropTypes.bool,
-    noMargin: PropTypes.bool,
-    initials: PropTypes.bool,
-    empty: PropTypes.bool,
-    tooltip: PropTypes.string,
-    showInactive: PropTypes.bool,
-};
-
-UserAvatar.defaultProps = {
-    small: true,
-    noMargin: false,
-    initials: true,
-    empty: false,
-};
+}
diff --git a/client/components/index.ts b/client/components/index.ts
index 93d962250..5211ccfa3 100644
--- a/client/components/index.ts
+++ b/client/components/index.ts
@@ -8,7 +8,6 @@ export {fields};
 export {NotificationModal} from './NotificationModal';
 export {RelatedPlannings} from './RelatedPlannings';
 export {default as Datetime} from './Datetime/index';
-export {UserAvatar} from './UserAvatar/index';
 export {ItemActionsMenu} from './ItemActionsMenu/index';
 export {AbsoluteDate} from './AbsoluteDate';
 export {ItemActionConfirmationModal}
diff --git a/package-lock.json b/package-lock.json
index b4bcc3d58..c82fd8560 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -196,9 +196,9 @@
       },
       "dependencies": {
         "tslib": {
-          "version": "2.6.0",
-          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.0.tgz",
-          "integrity": "sha512-7At1WUettjcSRHXCyYtTselblcHl9PJFFVKiCAy/bY97+BPZXSQ2wbq0P9s8tK2G7dFQfNnlJnPAiArVBVBsfA=="
+          "version": "2.6.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.1.tgz",
+          "integrity": "sha512-t0hLfiEKfMUoqhG+U1oid7Pva4bbDPHYfJNiB7BiIjRkj1pyC++4N3huJfqY6aRH6VTB0rvtzQwjM4K6qpfOig=="
         }
       }
     },
@@ -15918,9 +15918,9 @@
       }
     },
     "superdesk-ui-framework": {
-      "version": "3.0.47",
-      "resolved": "https://registry.npmjs.org/superdesk-ui-framework/-/superdesk-ui-framework-3.0.47.tgz",
-      "integrity": "sha512-r6M7a8jCOdS9UOmf629YbcF8LzpaHUFhhMP66FrOSNfntu9uSJn/L7NWdoM7/tcl19wPlL9EMPx+E/E9b6Ibsg==",
+      "version": "3.0.53",
+      "resolved": "https://registry.npmjs.org/superdesk-ui-framework/-/superdesk-ui-framework-3.0.53.tgz",
+      "integrity": "sha512-A6j/vVP5EzN5tcfHYJCtXsInySiCYGs+L4WmrJplTboLuGPZ3vhHtivzm/LZqx+kk4N/u7JedmGqSMl6z6K5dQ==",
       "requires": {
         "@material-ui/lab": "^4.0.0-alpha.56",
         "@popperjs/core": "^2.4.0",
@@ -15943,9 +15943,9 @@
       },
       "dependencies": {
         "@types/node": {
-          "version": "14.18.53",
-          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.53.tgz",
-          "integrity": "sha512-soGmOpVBUq+gaBMwom1M+krC/NNbWlosh4AtGA03SyWNDiqSKtwp7OulO1M6+mg8YkHMvJ/y0AkCeO8d1hNb7A=="
+          "version": "14.18.54",
+          "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.54.tgz",
+          "integrity": "sha512-uq7O52wvo2Lggsx1x21tKZgqkJpvwCseBBPtX/nKQfpVlEsLOb11zZ1CRsWUKvJF0+lzuA9jwvA7Pr2Wt7i3xw=="
         },
         "enzyme-adapter-react-16": {
           "version": "1.15.7",
diff --git a/package.json b/package.json
index 5625e8cee..2e936c691 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
     "redux-logger": "~3.0.6",
     "reselect": "~3.0.1",
     "rrule": "~2.2.9",
-    "superdesk-ui-framework": "^3.0.47",
+    "superdesk-ui-framework": "^3.0.53",
     "ts-loader": "3.5.0",
     "typescript": "~4.9.5",
     "whatwg-fetch": "~2.0.4"