source.dussan.org Git - sonarqube.git/blob

   1 /*
   2  * SonarQube
   3  * Copyright (C) 2009-2023 SonarSource SA
   4  * mailto:info AT sonarsource DOT com
   5  *
   6  * This program is free software; you can redistribute it and/or
   7  * modify it under the terms of the GNU Lesser General Public
   8  * License as published by the Free Software Foundation; either
   9  * version 3 of the License, or (at your option) any later version.
  10  *
  11  * This program is distributed in the hope that it will be useful,
  12  * but WITHOUT ANY WARRANTY; without even the implied warranty of
  13  * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
  14  * Lesser General Public License for more details.
  15  *
  16  * You should have received a copy of the GNU Lesser General Public License
  17  * along with this program; if not, write to the Free Software Foundation,
  18  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  19  */
  20 import classNames from 'classnames';
  21 import * as React from 'react';
  22 import { DropdownOverlay } from '../../../../components/controls/Dropdown';
  23 import SearchBox from '../../../../components/controls/SearchBox';
  24 import Avatar from '../../../../components/ui/Avatar';
  25 import DeferredSpinner from '../../../../components/ui/DeferredSpinner';
  26 import { PopupPlacement } from '../../../../components/ui/popups';
  27 import { translate } from '../../../../helpers/l10n';
  28 import { UserActive } from '../../../../types/users';
  29 import './AssigneeSelection.css';
  30
  31 export interface HotspotAssigneeSelectRendererProps {
  32   highlighted?: UserActive;
  33   loading: boolean;
  34   onKeyDown: (event: React.KeyboardEvent) => void;
  35   onSearch: (query: string) => void;
  36   onSelect: (user?: UserActive) => void;
  37   query?: string;
  38   suggestedUsers?: UserActive[];
  39 }
  40
  41 export default function AssigneeSelectionRenderer(props: HotspotAssigneeSelectRendererProps) {
  42   const { highlighted, loading, query, suggestedUsers } = props;
  43
  44   return (
  45     <div className="dropdown">
  46       <div className="display-flex-center">
  47         <SearchBox
  48           autoFocus={true}
  49           onChange={props.onSearch}
  50           onKeyDown={props.onKeyDown}
  51           placeholder={translate('hotspots.assignee.select_user')}
  52           value={query}
  53         />
  54         {loading && <DeferredSpinner className="spacer-left" />}
  55       </div>
  56
  57       {!loading && (
  58         <DropdownOverlay noPadding={true} placement={PopupPlacement.BottomLeft}>
  59           <ul className="hotspot-assignee-search-results">
  60             {suggestedUsers &&
  61               suggestedUsers.map((suggestion) => (
  62                 <li
  63                   className={classNames('padded', {
  64                     active: highlighted && highlighted.login === suggestion.login,
  65                   })}
  66                   key={suggestion.login}
  67                   onClick={() => props.onSelect(suggestion)}
  68                 >
  69                   {suggestion.login && (
  70                     <Avatar
  71                       className="spacer-right"
  72                       hash={suggestion.avatar}
  73                       name={suggestion.name}
  74                       size={16}
  75                     />
  76                   )}
  77                   {suggestion.name}
  78                 </li>
  79               ))}
  80           </ul>
  81         </DropdownOverlay>
  82       )}
  83     </div>
  84   );
  85 }