[arvados-workbench2] created: 2.5.0-17-gbac1986d
git repository hosting
git at public.arvados.org
Fri Feb 10 16:03:32 UTC 2023
at bac1986d6e2506f35283c5ba1c9f19c39ac5dd79 (commit)
commit bac1986d6e2506f35283c5ba1c9f19c39ac5dd79
Author: Stephen Smith <stephen at curii.com>
Date: Fri Feb 10 11:03:01 2023 -0500
19294: Add tooltip to participant select chip with username/email/uuid
Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen at curii.com>
diff --git a/src/components/autocomplete/autocomplete.tsx b/src/components/autocomplete/autocomplete.tsx
index 0044807b..b2a10ec7 100644
--- a/src/components/autocomplete/autocomplete.tsx
+++ b/src/components/autocomplete/autocomplete.tsx
@@ -8,7 +8,7 @@ import {
Chip as MuiChip,
Popper as MuiPopper,
Paper as MuiPaper,
- FormControl, InputLabel, StyleRulesCallback, withStyles, RootRef, ListItemText, ListItem, List, FormHelperText
+ FormControl, InputLabel, StyleRulesCallback, withStyles, RootRef, ListItemText, ListItem, List, FormHelperText, Tooltip
} from '@material-ui/core';
import { PopperProps } from '@material-ui/core/Popper';
import { WithStyles } from '@material-ui/core/styles';
@@ -30,6 +30,7 @@ export interface AutocompleteProps<Item, Suggestion> {
onDelete?: (item: Item, index: number) => void;
onSelect?: (suggestion: Suggestion) => void;
renderChipValue?: (item: Item) => string;
+ renderChipTooltip?: (item: Item) => string;
renderSuggestion?: (suggestion: Suggestion) => React.ReactNode;
}
@@ -171,11 +172,22 @@ export class Autocomplete<Value, Suggestion> extends React.Component<Autocomplet
}
return items.map(
- (item, index) =>
- <Chip
- label={this.renderChipValue(item)}
- key={index}
- onDelete={onDelete && !this.props.disabled ? (() => onDelete(item, index)) : undefined} />
+ (item, index) => {
+ const tooltip = this.props.renderChipTooltip ? this.props.renderChipTooltip(item) : '';
+ if (tooltip.length) {
+ return <Tooltip title={tooltip}>
+ <Chip
+ label={this.renderChipValue(item)}
+ key={index}
+ onDelete={onDelete && !this.props.disabled ? (() => onDelete(item, index)) : undefined} />
+ </Tooltip>
+ } else {
+ return <Chip
+ label={this.renderChipValue(item)}
+ key={index}
+ onDelete={onDelete && !this.props.disabled ? (() => onDelete(item, index)) : undefined} />
+ }
+ }
);
}
diff --git a/src/models/user.ts b/src/models/user.ts
index 9b3d97d8..6d66d9d3 100644
--- a/src/models/user.ts
+++ b/src/models/user.ts
@@ -44,6 +44,14 @@ export const getUserDisplayName = (user: User, withEmail = false, withUuid = fal
return parts.join(' ');
};
+export const getUserDetailsString = (user: User) => {
+ let parts: string[] = [];
+ user.username.length && parts.push(user.username);
+ user.email.length && parts.push(`<${user.email}>`);
+ user.uuid.length && parts.push(`(${user.uuid})`);
+ return parts.join(' ');
+};
+
export interface UserResource extends Resource, User {
kind: ResourceKind.USER;
defaultOwnerUuid: string;
diff --git a/src/views-components/sharing-dialog/participant-select.tsx b/src/views-components/sharing-dialog/participant-select.tsx
index ac5d6c2d..02cdeaf2 100644
--- a/src/views-components/sharing-dialog/participant-select.tsx
+++ b/src/views-components/sharing-dialog/participant-select.tsx
@@ -11,12 +11,13 @@ import { debounce } from 'debounce';
import { ListItemText, Typography } from '@material-ui/core';
import { noop } from 'lodash/fp';
import { GroupClass, GroupResource } from 'models/group';
-import { getUserDisplayName, UserResource } from 'models/user';
+import { getUserDetailsString, getUserDisplayName, UserResource } from 'models/user';
import { Resource, ResourceKind } from 'models/resource';
import { ListResults } from 'services/common-service/common-service';
export interface Participant {
name: string;
+ tooltip: string;
uuid: string;
}
@@ -54,6 +55,17 @@ const getDisplayName = (item: GroupResource | UserResource, detailed: boolean) =
}
};
+const getDisplayTooltip = (item: GroupResource | UserResource) => {
+ switch (item.kind) {
+ case ResourceKind.USER:
+ return getUserDetailsString(item);
+ case ResourceKind.GROUP:
+ return item.name + `(${`(${(item as Resource).uuid})`})`;
+ default:
+ return (item as Resource).uuid;
+ }
+};
+
export const ParticipantSelect = connect()(
class ParticipantSelect extends React.Component<ParticipantSelectProps & DispatchProp, ParticipantSelectState> {
state: ParticipantSelectState = {
@@ -78,6 +90,7 @@ export const ParticipantSelect = connect()(
onFocus={this.props.onFocus}
onBlur={this.props.onBlur}
renderChipValue={this.renderChipValue}
+ renderChipTooltip={this.renderChipTooltip}
renderSuggestion={this.renderSuggestion}
disabled={this.props.disabled}/>
);
@@ -88,6 +101,10 @@ export const ParticipantSelect = connect()(
return name || uuid;
}
+ renderChipTooltip(item: Participant) {
+ return item.tooltip;
+ }
+
renderSuggestion(item: ParticipantResource) {
return (
<ListItemText>
@@ -107,6 +124,7 @@ export const ParticipantSelect = connect()(
this.setState({ value: '', suggestions: [] });
onCreate({
name: '',
+ tooltip: '',
uuid: this.state.value,
});
}
@@ -118,6 +136,7 @@ export const ParticipantSelect = connect()(
this.setState({ value: '', suggestions: [] });
onSelect({
name: getDisplayName(selection, false),
+ tooltip: getDisplayTooltip(selection),
uuid,
});
}
commit afbbfe398a0816f9e636e76200e76230d62552ed
Author: Stephen Smith <stephen at curii.com>
Date: Wed Feb 1 09:49:50 2023 -0500
19294: Display first/last on participant select chips
Arvados-DCO-1.1-Signed-off-by: Stephen Smith <stephen at curii.com>
diff --git a/src/views-components/sharing-dialog/participant-select.tsx b/src/views-components/sharing-dialog/participant-select.tsx
index a826fcd5..ac5d6c2d 100644
--- a/src/views-components/sharing-dialog/participant-select.tsx
+++ b/src/views-components/sharing-dialog/participant-select.tsx
@@ -43,10 +43,10 @@ interface ParticipantSelectState {
suggestions: ParticipantResource[];
}
-const getDisplayName = (item: GroupResource | UserResource) => {
+const getDisplayName = (item: GroupResource | UserResource, detailed: boolean) => {
switch (item.kind) {
case ResourceKind.USER:
- return getUserDisplayName(item, true, true);
+ return getUserDisplayName(item, detailed, detailed);
case ResourceKind.GROUP:
return item.name + `(${`(${(item as Resource).uuid})`})`;
default:
@@ -91,7 +91,7 @@ export const ParticipantSelect = connect()(
renderSuggestion(item: ParticipantResource) {
return (
<ListItemText>
- <Typography noWrap>{getDisplayName(item)}</Typography>
+ <Typography noWrap>{getDisplayName(item, true)}</Typography>
</ListItemText>
);
}
@@ -117,7 +117,7 @@ export const ParticipantSelect = connect()(
const { onSelect = noop } = this.props;
this.setState({ value: '', suggestions: [] });
onSelect({
- name: getDisplayName(selection),
+ name: getDisplayName(selection, false),
uuid,
});
}
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list