Fix user search param name when adding participants (#4676)

Related to https://github.com/grafana/support-escalations/issues/11505

---------

Co-authored-by: Dominik <dominik.broj@grafana.com>

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;
 }

grafana-plugin/src/containers/AddResponders/parts/AddRespondersPopup/AddRespondersPopup.tsx

@@ -57,7 +57,7 @@ export const AddRespondersPopup = observer(
     const [notOnCallUserSearchResults, setNotOnCallUserSearchResults] = useState<
       Array<ApiSchemas['UserIsCurrentlyOnCall']>
     >([]);
-    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<HTMLInputElement>) => {
-        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<ApiSchemas['UserIsCurrentlyOnCall']>);
       setNotOnCallUserSearchResults(notOnCallUserSearchResults as Array<ApiSchemas['UserIsCurrentlyOnCall']>);
-    }, [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(
               <HorizontalGroup justify="space-between">
                 <HorizontalGroup>
                   <Avatar size="small" src={avatar} />
-                  <Text type={disabled ? 'disabled' : undefined}>{name || username}</Text>
+                  <Text type={disabled ? 'disabled' : undefined} className={cx('responder-name')}>
+                    {name || username}
+                  </Text>
                 </HorizontalGroup>
                 {/* TODO: we should add an elippsis and/or tooltip in the event that the user has a ton of teams */}
-                {teams?.length > 0 && <Text type="secondary">{teams.map(({ name }) => name).join(', ')}</Text>}
+                {teams?.length > 0 && (
+                  <Text type="secondary" className={cx('responder-team')}>
+                    {teams.map(({ name }) => name).join(', ')}
+                  </Text>
+                )}
               </HorizontalGroup>
             </div>
           );
@@ -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 && (
             <RadioButtonGroup

grafana-plugin/src/models/user/user.helpers.tsx

@@ -34,7 +34,7 @@ export class UserHelper {
   /**
    * NOTE: if is_currently_oncall=all the backend will not paginate the results, it will send back an array of ALL users
    */
-  static async search(f: any = { searchTerm: '' }, page = 1) {
+  static async search(f: { search: string; is_currently_oncall?: boolean } | string = { search: '' }, page = 1) {
     const filters = typeof f === 'string' ? { search: f } : f; // for GSelect compatibility
     return (await onCallApi().GET('/users/', { params: { query: { ...filters, page } } })).data;
   }

grafana-plugin/src/models/user/user.ts

@@ -3,7 +3,6 @@ import dayjs from 'dayjs';
 import { get } from 'lodash-es';
 import { action, computed, runInAction, makeAutoObservable } from 'mobx';
 
-import { RemoteFiltersType } from 'containers/RemoteFilters/RemoteFilters.types';
 import { ActionKey } from 'models/loader/action-keys';
 import { NotificationPolicyType } from 'models/notification_policy/notification_policy';
 import { makeRequest } from 'network/network';
@@ -38,7 +37,7 @@ export class UserStore {
   }
 
   async fetchItems(
-    f: RemoteFiltersType | string = { searchTerm: '', type: undefined, used: undefined },
+    f: { search: ''; type?: string; used?: boolean; mine?: boolean } | string = { search: '' },
     page = 1,
     invalidateFn?: () => boolean
   ): Promise<any> {

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<UsersProps, UsersState> {
     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<UsersProps, UsersState> {
     );
   }
 
-  handleFiltersChange = (filters: RemoteFiltersType, _isOnMount: boolean) => {
+  handleFiltersChange = (filters: UsersState['filters'], _isOnMount: boolean) => {
     const { filtersStore } = this.props.store;
     const currentTablePage = filtersStore.currentTablePageNum[PAGE.Users];