Improve select user component to show and allow filtering by sign off

package.json

@@ -119,7 +119,7 @@
     "sass-loader": "6.0.6",
     "shortid": "2.2.8",
     "style-loader": "0.20.2",
-    "superdesk-ui-framework": "^3.0.53",
+    "superdesk-ui-framework": "^3.0.54",
     "ts-loader": "3.5.0",
     "tslint": "5.11.0",
     "typescript": "~4.9.5",

scripts/apps/dashboard/user-activity/components/UserActivityWidget.tsx

@@ -346,12 +346,13 @@ export default class UserActivityWidget extends React.Component<IProps, IState>
                     >
                         <form className="search-box__content">
                             <SelectUser
-                                selectedUserId={this.props.user?._id}
+                                selectedUserId={this.props.user?._id ?? null}
                                 autoFocus={false}
                                 onSelect={(user) => {
                                     this.props.onUserChange(user);
                                 }}
                                 horizontalSpacing={true}
+                                clearable={false}
                             />
                         </form>
                     </div>

scripts/core/superdesk-api.d.ts

@@ -1176,6 +1176,8 @@ declare module 'superdesk-api' {
         disabled?: boolean;
         autoFocus?: boolean;
         horizontalSpacing?: boolean;
+        valueTemplate?: React.ComponentType<{option: IUser}>;
+        clearable: boolean;
     }
 
     export interface IDropdownTreeGroup<T> {

scripts/core/ui/components/SelectUser.tsx

@@ -1,15 +1,62 @@
+/* eslint-disable react/no-multi-comp */
 import React from 'react';
 import {IPropsSelectUser, IUser, IRestApiResponse} from 'superdesk-api';
 import {gettext, getUserSearchMongoQuery} from 'core/utils';
 import {UserAvatar} from 'apps/users/components/UserAvatar';
-import {SelectWithTemplate} from 'superdesk-ui-framework/react';
+import {SelectWithTemplate, Spacer} from 'superdesk-ui-framework/react';
 import {httpRequestJsonLocal} from 'core/helpers/network';
 import {SuperdeskReactComponent} from 'core/SuperdeskReactComponent';
 
 interface IState {
     selectedUser: IUser | null | 'loading';
 }
 
+const itemTemplate = (props: {option: IUser}) => {
+    const user: IUser | null = props.option;
+
+    return user == null
+        ? (
+            <div>
+                {gettext('Select a user')}
+            </div>
+        )
+        : (
+            <Spacer h gap="8" noWrap justifyContent="start">
+                <Spacer h gap="8" noWrap justifyContent="start">
+                    <div>
+                        <UserAvatar user={user} displayStatus={true} />
+                    </div>
+
+                    <Spacer v gap="4" noWrap>
+                        <div>{user.display_name}</div>
+                        <div style={{fontSize: '1.2rem'}}>@{user.username}</div>
+                    </Spacer>
+
+                </Spacer>
+
+                <div style={{fontSize: '1.2rem'}}>{user.sign_off}</div>
+            </Spacer>
+        );
+};
+
+const valueTemplateDefault = (props: {option: IUser}) => {
+    const user: IUser | null = props.option;
+
+    return user == null
+        ? (
+            <div>
+                {gettext('Select a user')}
+            </div>
+        )
+        : (
+            <Spacer h gap="8" justifyContent="start" noGrow>
+                <UserAvatar user={user} displayStatus={true} />
+
+                {user.display_name}
+            </Spacer>
+        );
+};
+
 export class SelectUser extends SuperdeskReactComponent<IPropsSelectUser, IState> {
     constructor(props: IPropsSelectUser) {
         super(props);
@@ -37,24 +84,26 @@ export class SelectUser extends SuperdeskReactComponent<IPropsSelectUser, IState
     }
 
     componentDidUpdate(prevProps: IPropsSelectUser) {
-        // state.user needs to be updated if props.selectedUserId changes
-        if (this.props.selectedUserId == null && this.state.selectedUser != null) {
-            // eslint-disable-next-line react/no-did-update-set-state
-            this.setState({selectedUser: null});
-        } else if (
-            this.state.selectedUser === 'loading'
-            || this.state.selectedUser?._id !== this.props.selectedUserId
-        ) {
-            // eslint-disable-next-line react/no-did-update-set-state
-            this.setState({selectedUser: 'loading'});
-
-            this.asyncHelpers.httpRequestJsonLocal<IUser>({
-                method: 'GET',
-                path: `/users/${this.props.selectedUserId}`,
-            }).then((selectedUser) => {
+        if (prevProps.selectedUserId !== this.props.selectedUserId) {
+            // state.user needs to be updated if props.selectedUserId changes
+            if (this.props.selectedUserId == null) {
                 // eslint-disable-next-line react/no-did-update-set-state
-                this.setState({selectedUser});
-            });
+                this.setState({selectedUser: null});
+            } else if (
+                this.state.selectedUser === 'loading'
+                || this.state.selectedUser?._id !== this.props.selectedUserId
+            ) {
+                // eslint-disable-next-line react/no-did-update-set-state
+                this.setState({selectedUser: 'loading'});
+
+                this.asyncHelpers.httpRequestJsonLocal<IUser>({
+                    method: 'GET',
+                    path: `/users/${this.props.selectedUserId}`,
+                }).then((selectedUser) => {
+                    // eslint-disable-next-line react/no-did-update-set-state
+                    this.setState({selectedUser});
+                });
+            }
         }
     }
 
@@ -63,6 +112,8 @@ export class SelectUser extends SuperdeskReactComponent<IPropsSelectUser, IState
             return null;
         }
 
+        const valueTemplate = this.props.valueTemplate != null ? this.props.valueTemplate : valueTemplateDefault;
+
         return (
             <SelectWithTemplate
                 label={gettext('Select a user')}
@@ -108,27 +159,8 @@ export class SelectUser extends SuperdeskReactComponent<IPropsSelectUser, IState
                     this.props.onSelect(user);
                 }}
                 getLabel={(option) => option.display_name}
-                itemTemplate={
-                    (props) => {
-                        const user = props.option;
-
-                        return user == null
-                            ? (
-                                <div>
-                                    {gettext('Select a user')}
-                                </div>
-                            )
-                            : (
-                                <div style={{display: 'flex', alignItems: 'center'}}>
-                                    <UserAvatar user={user} displayStatus={true} />
-                                    <div style={{marginLeft: 14, padding: '4px 0'}}>
-                                        <div>{user.display_name}</div>
-                                        <div style={{fontSize: '1.2rem'}}>@{user.username}</div>
-                                    </div>
-                                </div>
-                            );
-                    }
-                }
+                itemTemplate={itemTemplate}
+                valueTemplate={valueTemplate}
                 areEqual={(a, b) => a._id === b._id}
                 autoFocus={this.props.autoFocus}
                 autoOpen={this.state.selectedUser == null}
@@ -137,7 +169,7 @@ export class SelectUser extends SuperdeskReactComponent<IPropsSelectUser, IState
                 noResultsFoundMessage={gettext('No results found.')}
                 filterPlaceholder={gettext('Search...')}
                 data-test-id="select-user-dropdown"
-                required
+                required={!(this.props.clearable ?? true)}
             />
         );
     }

scripts/core/utils.ts

@@ -187,6 +187,7 @@ export function getUserSearchMongoQuery(searchString: string) {
             {first_name: {$regex: searchString, $options: '-i'}},
             {last_name: {$regex: searchString, $options: '-i'}},
             {email: {$regex: searchString, $options: '-i'}},
+            {sign_off: {$regex: searchString, $options: '-i'}},
         ],
     };
 }

scripts/extensions/markForUser/src/get-mark-for-user-modal.tsx

@@ -78,6 +78,7 @@ export function getMarkForUserModal(options: {
                             onSelect={(selectedUser) => this.setState({selectedUserId: selectedUser._id})}
                             selectedUserId={this.state.selectedUserId}
                             autoFocus={true}
+                            clearable={false}
                         />
                     </ModalBody>
                     <ModalFooter>