1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import React from 'react';
6 import { Autocomplete, AutocompleteCat } from 'components/autocomplete/autocomplete';
7 import { connect, DispatchProp } from 'react-redux';
8 import { ServiceRepository } from 'services/services';
9 import { FilterBuilder } from '../../services/api/filter-builder';
10 import { debounce } from 'debounce';
11 import { ListItemText, Typography } from '@mui/material';
12 import { noop } from 'lodash/fp';
13 import { GroupClass, GroupResource } from 'models/group';
14 import { getUserDetailsString, getUserDisplayName, UserResource } from 'models/user';
15 import { Resource, ResourceKind } from 'models/resource';
16 import { ListResults } from 'services/common-service/common-service';
18 export interface Participant {
24 type ParticipantResource = GroupResource | UserResource;
26 interface ParticipantSelectProps {
28 excludedParticipants?: string[];
34 category?: AutocompleteCat;
36 onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
37 onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
38 onCreate?: (person: Participant) => void;
39 onDelete?: (index: number) => void;
40 onSelect?: (person: Participant) => void;
43 interface ParticipantSelectState {
46 suggestions: ParticipantResource[];
47 cachedSuggestions: ParticipantResource[];
50 const getDisplayName = (item: GroupResource | UserResource, detailed: boolean) => {
52 case ResourceKind.USER:
53 return getUserDisplayName(item, detailed, detailed);
54 case ResourceKind.GROUP:
55 return item.name + `(${`(${(item as Resource).uuid})`})`;
57 return (item as Resource).uuid;
61 const getDisplayTooltip = (item: GroupResource | UserResource) => {
63 case ResourceKind.USER:
64 return getUserDetailsString(item);
65 case ResourceKind.GROUP:
66 return item.name + `(${`(${(item as Resource).uuid})`})`;
68 return (item as Resource).uuid;
72 export const ParticipantSelect = connect()(
73 class ParticipantSelect extends React.Component<ParticipantSelectProps & DispatchProp, ParticipantSelectState> {
74 state: ParticipantSelectState = {
78 cachedSuggestions: [],
81 componentDidUpdate(prevProps: ParticipantSelectProps & DispatchProp, prevState: ParticipantSelectState) {
82 if (prevState.suggestions.length === 0 && this.state.suggestions.length > 0 && this.state.value.length === 0) {
83 this.setState({ cachedSuggestions: this.state.suggestions });
88 const { label = 'Add people and groups' } = this.props;
93 value={this.state.value}
94 items={this.props.items}
95 suggestions={this.state.suggestions}
96 autofocus={this.props.autofocus}
97 onChange={this.handleChange}
98 onCreate={this.handleCreate}
99 onSelect={this.handleSelect}
100 onDelete={this.props.onDelete && !this.props.disabled ? this.handleDelete : undefined}
101 onFocus={this.props.onFocus || this.onFocus}
103 renderChipValue={this.renderChipValue}
104 renderChipTooltip={this.renderChipTooltip}
105 renderSuggestion={this.renderSuggestion}
106 category={this.props.category}
107 isWorking={this.state.isWorking}
108 maxLength={this.props.category === AutocompleteCat.SHARING ? 10 : undefined}
109 disabled={this.props.disabled} />
114 this.setState({ isWorking: true });
115 this.getSuggestions();
119 if (this.props.onBlur) {
120 this.props.onBlur(e);
122 setTimeout(() => this.setState({ value: '', suggestions: [] }), 200);
125 renderChipValue(chipValue: Participant) {
126 const { name, uuid } = chipValue;
130 renderChipTooltip(item: Participant) {
134 renderSuggestion(item: ParticipantResource) {
137 <Typography noWrap>{getDisplayName(item, true)}</Typography>
142 handleDelete = (_: Participant, index: number) => {
143 const { onDelete = noop } = this.props;
147 handleCreate = () => {
148 const { onCreate } = this.props;
150 this.setState({ value: '', suggestions: [] });
154 uuid: this.state.value,
159 handleSelect = (selection: ParticipantResource) => {
160 if (!selection) return;
161 const { uuid } = selection;
162 const { onSelect = noop } = this.props;
163 this.setState({ value: '', suggestions: this.state.cachedSuggestions });
165 name: getDisplayName(selection, false),
166 tooltip: getDisplayTooltip(selection),
171 handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
172 this.setState({ value: event.target.value }, this.getSuggestions);
175 getSuggestions = debounce(() => this.props.dispatch<any>(this.requestSuggestions), 500);
177 requestSuggestions = async (_: void, __: void, { userService, groupsService }: ServiceRepository) => {
178 this.setState({ isWorking: true });
179 const { value } = this.state;
180 // +1 to see if there are more than 10 results
183 const filterUsers = new FilterBuilder()
184 .addILike('any', value)
185 .addEqual('is_active', this.props.onlyActive || undefined)
186 .addNotIn('uuid', this.props.excludedParticipants)
188 const userItems: ListResults<any> = await userService.list({ filters: filterUsers, limit, count: "none" });
190 const filterGroups = new FilterBuilder()
191 .addNotIn('group_class', [GroupClass.PROJECT, GroupClass.FILTER])
192 .addNotIn('uuid', this.props.excludedParticipants)
193 .addILike('name', value)
196 const groupItems: ListResults<any> = await groupsService.list({ filters: filterGroups, limit, count: "none" });
198 suggestions: this.props.onlyPeople
200 : userItems.items.concat(groupItems.items),