diff --git a/grafana-plugin/src/containers/AddResponders/parts/AddRespondersPopup/AddRespondersPopup.module.scss b/grafana-plugin/src/containers/AddResponders/parts/AddRespondersPopup/AddRespondersPopup.module.scss index 4b462b4f..f430e22c 100644 --- a/grafana-plugin/src/containers/AddResponders/parts/AddRespondersPopup/AddRespondersPopup.module.scss +++ b/grafana-plugin/src/containers/AddResponders/parts/AddRespondersPopup/AddRespondersPopup.module.scss @@ -24,6 +24,14 @@ overflow: hidden; } +.responder-name { + word-break: normal; +} + +.responder-team { + text-align: right; +} + .responders-filters { margin: 8px; } diff --git a/grafana-plugin/src/containers/AddResponders/parts/AddRespondersPopup/AddRespondersPopup.tsx b/grafana-plugin/src/containers/AddResponders/parts/AddRespondersPopup/AddRespondersPopup.tsx index cf98d5a2..8f998bc9 100644 --- a/grafana-plugin/src/containers/AddResponders/parts/AddRespondersPopup/AddRespondersPopup.tsx +++ b/grafana-plugin/src/containers/AddResponders/parts/AddRespondersPopup/AddRespondersPopup.tsx @@ -57,7 +57,7 @@ export const AddRespondersPopup = observer( const [notOnCallUserSearchResults, setNotOnCallUserSearchResults] = useState< Array >([]); - const [searchTerm, setSearchTerm] = useState(''); + const [search, setSearch] = useState(''); const ref = useRef(); @@ -65,11 +65,11 @@ export const AddRespondersPopup = observer( setVisible(false); }); - const handleSetSearchTerm = useCallback( + const handleSetSearch = useCallback( (e: React.ChangeEvent) => { - setSearchTerm(e.target.value); + setSearch(e.target.value); }, - [setSearchTerm] + [setSearch] ); const onClickUser = useCallback( @@ -102,7 +102,7 @@ export const AddRespondersPopup = observer( const searchForUsers = useCallback(async () => { const _search = async (is_currently_oncall: boolean) => { const response = await UserHelper.search({ - searchTerm, + search, is_currently_oncall, }); return response.results; @@ -112,14 +112,14 @@ export const AddRespondersPopup = observer( setOnCallUserSearchResults(onCallUserSearchResults as Array); setNotOnCallUserSearchResults(notOnCallUserSearchResults as Array); - }, [searchTerm]); + }, [search]); const searchForTeams = useCallback(async () => { - await grafanaTeamStore.updateItems(searchTerm, false, true, false); + await grafanaTeamStore.updateItems(search, false, true, false); setTeamSearchResults(grafanaTeamStore.getSearchResult()); - }, [searchTerm]); + }, [search]); - const handleSearchTermChange = useDebouncedCallback(async () => { + const handleSearchChange = useDebouncedCallback(async () => { setSearchLoading(true); if (isCreateMode && activeOption === TabOptions.Teams) { @@ -137,7 +137,7 @@ export const AddRespondersPopup = observer( * there's no need to trigger a new search request when the user changes tabs if they don't have a * search term */ - if (searchTerm) { + if (search) { setSearchLoading(true); if (activeOption === TabOptions.Teams) { @@ -151,10 +151,10 @@ export const AddRespondersPopup = observer( setActiveOption(tab); }, - [searchTerm] + [search] ); - useEffect(handleSearchTermChange, [searchTerm]); + useEffect(handleSearchChange, [search]); /** * in the context where some user(s) have already been paged (ex. on a direct paging generated @@ -236,10 +236,16 @@ export const AddRespondersPopup = observer( - {name || username} + + {name || username} + {/* TODO: we should add an elippsis and/or tooltip in the event that the user has a ton of teams */} - {teams?.length > 0 && {teams.map(({ name }) => name).join(', ')}} + {teams?.length > 0 && ( + + {teams.map(({ name }) => name).join(', ')} + + )} ); @@ -281,11 +287,11 @@ export const AddRespondersPopup = observer( key="search" className={cx('responders-filters')} data-testid="add-responders-search-input" - value={searchTerm} + value={search} placeholder="Search" // @ts-ignore width={'unset'} - onChange={handleSetSearchTerm} + onChange={handleSetSearch} /> {isCreateMode && ( boolean ): Promise { diff --git a/grafana-plugin/src/pages/users/Users.tsx b/grafana-plugin/src/pages/users/Users.tsx index cf18d789..c65105b9 100644 --- a/grafana-plugin/src/pages/users/Users.tsx +++ b/grafana-plugin/src/pages/users/Users.tsx @@ -19,7 +19,6 @@ import { PluginLink } from 'components/PluginLink/PluginLink'; import { Text } from 'components/Text/Text'; import { TooltipBadge } from 'components/TooltipBadge/TooltipBadge'; import { RemoteFilters } from 'containers/RemoteFilters/RemoteFilters'; -import { RemoteFiltersType } from 'containers/RemoteFilters/RemoteFilters.types'; import { UserSettings } from 'containers/UserSettings/UserSettings'; import { WithPermissionControlTooltip } from 'containers/WithPermissionControl/WithPermissionControlTooltip'; import { UserHelper } from 'models/user/user.helpers'; @@ -46,7 +45,7 @@ interface UsersState extends PageBaseState { isWrongTeam: boolean; userPkToEdit?: ApiSchemas['User']['pk'] | 'new'; - filters: RemoteFiltersType; + filters: { search: ''; type: undefined; used: undefined; mine: undefined }; } @observer @@ -62,7 +61,7 @@ class Users extends React.Component { this.state = { isWrongTeam: false, userPkToEdit: undefined, - filters: { searchTerm: '', type: undefined, used: undefined, mine: undefined }, + filters: { search: '', type: undefined, used: undefined, mine: undefined }, errorData: initErrorDataState(), }; @@ -246,7 +245,7 @@ class Users extends React.Component { ); } - handleFiltersChange = (filters: RemoteFiltersType, _isOnMount: boolean) => { + handleFiltersChange = (filters: UsersState['filters'], _isOnMount: boolean) => { const { filtersStore } = this.props.store; const currentTablePage = filtersStore.currentTablePageNum[PAGE.Users];