1 // Copyright (C) The Arvados Authors. All rights reserved.
3 // SPDX-License-Identifier: AGPL-3.0
5 import React from 'react';
6 import { Autocomplete } 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 '@material-ui/core';
12 import { noop } from 'lodash/fp';
13 import { GroupClass, GroupResource } from 'models/group';
14 import { 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 {
23 type ParticipantResource = GroupResource | UserResource;
25 interface ParticipantSelectProps {
27 excludedParticipants?: string[];
32 onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
33 onFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
34 onCreate?: (person: Participant) => void;
35 onDelete?: (index: number) => void;
36 onSelect?: (person: Participant) => void;
39 interface ParticipantSelectState {
41 suggestions: ParticipantResource[];
44 const getDisplayName = (item: GroupResource | UserResource) => {
46 case ResourceKind.USER:
47 return getUserDisplayName(item, true, true);
48 case ResourceKind.GROUP:
49 return item.name + `(${`(${(item as Resource).uuid})`})`;
51 return (item as Resource).uuid;
55 export const ParticipantSelect = connect()(
56 class ParticipantSelect extends React.Component<ParticipantSelectProps & DispatchProp, ParticipantSelectState> {
57 state: ParticipantSelectState = {
63 const { label = 'Share' } = this.props;
68 value={this.state.value}
69 items={this.props.items}
70 suggestions={this.state.suggestions}
71 autofocus={this.props.autofocus}
72 onChange={this.handleChange}
73 onCreate={this.handleCreate}
74 onSelect={this.handleSelect}
75 onDelete={this.handleDelete}
76 onFocus={this.props.onFocus}
77 onBlur={this.props.onBlur}
78 renderChipValue={this.renderChipValue}
79 renderSuggestion={this.renderSuggestion} />
83 renderChipValue(chipValue: Participant) {
84 const { name, uuid } = chipValue;
88 renderSuggestion(item: ParticipantResource) {
91 <Typography noWrap>{getDisplayName(item)}</Typography>
96 handleDelete = (_: Participant, index: number) => {
97 const { onDelete = noop } = this.props;
101 handleCreate = () => {
102 const { onCreate } = this.props;
104 this.setState({ value: '', suggestions: [] });
107 uuid: this.state.value,
112 handleSelect = (selection: ParticipantResource) => {
113 const { uuid } = selection;
114 const { onSelect = noop } = this.props;
115 this.setState({ value: '', suggestions: [] });
117 name: getDisplayName(selection),
122 handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
123 this.setState({ value: event.target.value }, this.getSuggestions);
126 getSuggestions = debounce(() => this.props.dispatch<any>(this.requestSuggestions), 500);
128 requestSuggestions = async (_: void, __: void, { userService, groupsService }: ServiceRepository) => {
129 const { value } = this.state;
130 const limit = 5; // FIXME: Does this provide a good UX?
132 const filterUsers = new FilterBuilder()
133 .addILike('any', value)
134 .addNotIn('uuid', this.props.excludedParticipants)
136 const userItems: ListResults<any> = await userService.list({ filters: filterUsers, limit, count: "none" });
138 const filterGroups = new FilterBuilder()
139 .addNotIn('group_class', [GroupClass.PROJECT, GroupClass.FILTER])
140 .addNotIn('uuid', this.props.excludedParticipants)
141 .addILike('name', value)
144 const groupItems: ListResults<any> = await groupsService.list({ filters: filterGroups, limit, count: "none" });
146 suggestions: this.props.onlyPeople
148 : userItems.items.concat(groupItems.items)