savedIssueSearches.tsx 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408
  1. import {Fragment, useState} from 'react';
  2. import {css, useTheme} from '@emotion/react';
  3. import styled from '@emotion/styled';
  4. import orderBy from 'lodash/orderBy';
  5. import {openModal} from 'sentry/actionCreators/modal';
  6. import {Button, ButtonLabel} from 'sentry/components/button';
  7. import {openConfirmModal} from 'sentry/components/confirm';
  8. import type {MenuItemProps} from 'sentry/components/dropdownMenu';
  9. import {DropdownMenu} from 'sentry/components/dropdownMenu';
  10. import LoadingError from 'sentry/components/loadingError';
  11. import LoadingIndicator from 'sentry/components/loadingIndicator';
  12. import {CreateSavedSearchModal} from 'sentry/components/modals/savedSearchModal/createSavedSearchModal';
  13. import {EditSavedSearchModal} from 'sentry/components/modals/savedSearchModal/editSavedSearchModal';
  14. import {IconClose, IconEllipsis} from 'sentry/icons';
  15. import {t} from 'sentry/locale';
  16. import {space} from 'sentry/styles/space';
  17. import type {Organization, SavedSearch} from 'sentry/types';
  18. import {SavedSearchVisibility} from 'sentry/types';
  19. import {trackAnalytics} from 'sentry/utils/analytics';
  20. import useMedia from 'sentry/utils/useMedia';
  21. import {useSyncedLocalStorageState} from 'sentry/utils/useSyncedLocalStorageState';
  22. import {useDeleteSavedSearchOptimistic} from 'sentry/views/issueList/mutations/useDeleteSavedSearch';
  23. import {useFetchSavedSearchesForOrg} from 'sentry/views/issueList/queries/useFetchSavedSearchesForOrg';
  24. import {SAVED_SEARCHES_SIDEBAR_OPEN_LOCALSTORAGE_KEY} from 'sentry/views/issueList/utils';
  25. interface SavedIssueSearchesProps {
  26. onSavedSearchSelect: (savedSearch: SavedSearch) => void;
  27. organization: Organization;
  28. query: string;
  29. sort: string;
  30. }
  31. interface SavedSearchItemProps
  32. extends Pick<SavedIssueSearchesProps, 'organization' | 'onSavedSearchSelect'> {
  33. savedSearch: SavedSearch;
  34. }
  35. type CreateNewSavedSearchButtonProps = Pick<
  36. SavedIssueSearchesProps,
  37. 'query' | 'sort' | 'organization'
  38. >;
  39. const MAX_SHOWN_SEARCHES = 4;
  40. function SavedSearchItemDescription({
  41. savedSearch,
  42. }: Pick<SavedSearchItemProps, 'savedSearch'>) {
  43. if (savedSearch.isGlobal) {
  44. return <SavedSearchItemQuery>{savedSearch.query}</SavedSearchItemQuery>;
  45. }
  46. return (
  47. <SavedSearchItemVisbility>
  48. {savedSearch.visibility === SavedSearchVisibility.ORGANIZATION
  49. ? t('Anyone in organization can see but not edit')
  50. : t('Only you can see and edit')}
  51. </SavedSearchItemVisbility>
  52. );
  53. }
  54. function SavedSearchItem({
  55. organization,
  56. onSavedSearchSelect,
  57. savedSearch,
  58. }: SavedSearchItemProps) {
  59. const {mutate: deleteSavedSearch} = useDeleteSavedSearchOptimistic();
  60. const hasOrgWriteAccess = organization.access?.includes('org:write');
  61. const canEdit =
  62. savedSearch.visibility === SavedSearchVisibility.OWNER || hasOrgWriteAccess;
  63. const actions: MenuItemProps[] = [
  64. {
  65. key: 'edit',
  66. label: 'Edit',
  67. disabled: !canEdit,
  68. details: !canEdit
  69. ? t('You do not have permission to edit this search.')
  70. : undefined,
  71. onAction: () => {
  72. openModal(deps => (
  73. <EditSavedSearchModal {...deps} {...{organization, savedSearch}} />
  74. ));
  75. },
  76. },
  77. {
  78. disabled: !canEdit,
  79. details: !canEdit
  80. ? t('You do not have permission to delete this search.')
  81. : undefined,
  82. key: 'delete',
  83. label: t('Delete'),
  84. onAction: () => {
  85. openConfirmModal({
  86. message: t('Are you sure you want to delete this saved search?'),
  87. onConfirm: () =>
  88. deleteSavedSearch({orgSlug: organization.slug, id: savedSearch.id}),
  89. });
  90. },
  91. priority: 'danger',
  92. },
  93. ];
  94. return (
  95. <SearchListItem hasMenu={!savedSearch.isGlobal}>
  96. <StyledItemButton
  97. aria-label={savedSearch.name}
  98. onClick={() => onSavedSearchSelect(savedSearch)}
  99. borderless
  100. >
  101. <TitleDescriptionWrapper>
  102. <SavedSearchItemTitle>{savedSearch.name}</SavedSearchItemTitle>
  103. <SavedSearchItemDescription savedSearch={savedSearch} />
  104. </TitleDescriptionWrapper>
  105. </StyledItemButton>
  106. {!savedSearch.isGlobal && (
  107. <OverflowMenu
  108. position="bottom-end"
  109. items={actions}
  110. size="sm"
  111. minMenuWidth={200}
  112. trigger={props => (
  113. <Button
  114. {...props}
  115. aria-label={t('Saved search options')}
  116. borderless
  117. icon={<IconEllipsis size="sm" />}
  118. size="sm"
  119. />
  120. )}
  121. />
  122. )}
  123. </SearchListItem>
  124. );
  125. }
  126. function CreateNewSavedSearchButton({
  127. organization,
  128. query,
  129. sort,
  130. }: CreateNewSavedSearchButtonProps) {
  131. const onClick = () => {
  132. trackAnalytics('search.saved_search_open_create_modal', {
  133. organization,
  134. });
  135. openModal(deps => (
  136. <CreateSavedSearchModal {...deps} {...{organization, query, sort}} />
  137. ));
  138. };
  139. return (
  140. <Button onClick={onClick} priority="link" size="sm">
  141. {t('Add saved search')}
  142. </Button>
  143. );
  144. }
  145. function SavedIssueSearches({
  146. organization,
  147. onSavedSearchSelect,
  148. query,
  149. sort,
  150. }: SavedIssueSearchesProps) {
  151. const theme = useTheme();
  152. const [isOpen, setIsOpen] = useSyncedLocalStorageState(
  153. SAVED_SEARCHES_SIDEBAR_OPEN_LOCALSTORAGE_KEY,
  154. false
  155. );
  156. const [showAll, setShowAll] = useState(false);
  157. const {
  158. data: savedSearches,
  159. isLoading,
  160. isError,
  161. refetch,
  162. } = useFetchSavedSearchesForOrg({orgSlug: organization.slug});
  163. const isMobile = useMedia(`(max-width: ${theme.breakpoints.small})`);
  164. if (!isOpen || isMobile) {
  165. return null;
  166. }
  167. if (isLoading) {
  168. return (
  169. <StyledSidebar>
  170. <LoadingIndicator />
  171. </StyledSidebar>
  172. );
  173. }
  174. if (isError) {
  175. return (
  176. <StyledSidebar>
  177. <LoadingError onRetry={refetch} />
  178. </StyledSidebar>
  179. );
  180. }
  181. const orgSavedSearches = orderBy(
  182. savedSearches.filter(search => !search.isGlobal && !search.isPinned),
  183. 'dateCreated',
  184. 'desc'
  185. );
  186. const recommendedSavedSearches = savedSearches.filter(search => search.isGlobal);
  187. const shownOrgSavedSearches = showAll
  188. ? orgSavedSearches
  189. : orgSavedSearches.slice(0, MAX_SHOWN_SEARCHES);
  190. return (
  191. <StyledSidebar>
  192. <Fragment>
  193. <HeadingContainer>
  194. <Heading>{t('Saved Searches')}</Heading>
  195. <Button
  196. aria-label={t('Collapse sidebar')}
  197. borderless
  198. onClick={() => setIsOpen(false)}
  199. icon={<IconClose />}
  200. />
  201. </HeadingContainer>
  202. <CreateSavedSearchWrapper>
  203. <CreateNewSavedSearchButton {...{organization, query, sort}} />
  204. </CreateSavedSearchWrapper>
  205. <SearchesContainer>
  206. {shownOrgSavedSearches.map(item => (
  207. <SavedSearchItem
  208. key={item.id}
  209. organization={organization}
  210. onSavedSearchSelect={onSavedSearchSelect}
  211. savedSearch={item}
  212. />
  213. ))}
  214. {shownOrgSavedSearches.length === 0 && (
  215. <NoSavedSearchesText>
  216. {t("You don't have any saved searches")}
  217. </NoSavedSearchesText>
  218. )}
  219. </SearchesContainer>
  220. {orgSavedSearches.length > shownOrgSavedSearches.length && (
  221. <ShowAllButton size="zero" borderless onClick={() => setShowAll(true)}>
  222. {t(
  223. 'Show %s more',
  224. (orgSavedSearches.length - shownOrgSavedSearches.length).toLocaleString()
  225. )}
  226. </ShowAllButton>
  227. )}
  228. </Fragment>
  229. {recommendedSavedSearches.length > 0 && (
  230. <Fragment>
  231. <HeadingContainer>
  232. <Heading>{t('Recommended Searches')}</Heading>
  233. </HeadingContainer>
  234. <SearchesContainer>
  235. {recommendedSavedSearches.map(item => (
  236. <SavedSearchItem
  237. key={item.id}
  238. organization={organization}
  239. onSavedSearchSelect={onSavedSearchSelect}
  240. savedSearch={item}
  241. />
  242. ))}
  243. </SearchesContainer>
  244. </Fragment>
  245. )}
  246. </StyledSidebar>
  247. );
  248. }
  249. const StyledSidebar = styled('aside')`
  250. grid-area: saved-searches;
  251. width: 100%;
  252. padding: ${space(2)};
  253. @media (max-width: ${p => p.theme.breakpoints.small}) {
  254. border-bottom: 1px solid ${p => p.theme.gray200};
  255. padding: ${space(2)} 0;
  256. }
  257. @media (min-width: ${p => p.theme.breakpoints.small}) {
  258. border-left: 1px solid ${p => p.theme.gray200};
  259. max-width: 340px;
  260. }
  261. `;
  262. const HeadingContainer = styled('div')`
  263. display: flex;
  264. justify-content: space-between;
  265. align-items: center;
  266. height: 38px;
  267. padding-left: ${space(2)};
  268. margin-top: ${space(3)};
  269. &:first-of-type {
  270. margin-top: 0;
  271. }
  272. `;
  273. const Heading = styled('h2')`
  274. font-size: ${p => p.theme.fontSizeExtraLarge};
  275. margin: 0;
  276. `;
  277. const CreateSavedSearchWrapper = styled('div')`
  278. padding: 0 ${space(2)};
  279. margin-bottom: ${space(1)};
  280. `;
  281. const SearchesContainer = styled('ul')`
  282. padding: 0;
  283. margin-bottom: ${space(1)};
  284. `;
  285. const StyledItemButton = styled(Button)`
  286. display: block;
  287. width: 100%;
  288. text-align: left;
  289. height: auto;
  290. font-weight: normal;
  291. line-height: ${p => p.theme.text.lineHeightBody};
  292. padding: ${space(1)} ${space(2)};
  293. ${ButtonLabel} {
  294. justify-content: start;
  295. }
  296. `;
  297. const OverflowMenu = styled(DropdownMenu)`
  298. position: absolute;
  299. top: 12px;
  300. right: ${space(1)};
  301. `;
  302. const SearchListItem = styled('li')<{hasMenu?: boolean}>`
  303. position: relative;
  304. list-style: none;
  305. padding: 0;
  306. margin: 0;
  307. ${p =>
  308. p.hasMenu &&
  309. css`
  310. @media (max-width: ${p.theme.breakpoints.small}) {
  311. ${StyledItemButton} {
  312. padding-right: 60px;
  313. }
  314. }
  315. @media (min-width: ${p.theme.breakpoints.small}) {
  316. ${OverflowMenu} {
  317. display: none;
  318. }
  319. &:hover,
  320. &:focus-within {
  321. ${OverflowMenu} {
  322. display: block;
  323. }
  324. ${StyledItemButton} {
  325. padding-right: 60px;
  326. }
  327. }
  328. }
  329. `}
  330. `;
  331. const TitleDescriptionWrapper = styled('div')`
  332. overflow: hidden;
  333. `;
  334. const SavedSearchItemTitle = styled('div')`
  335. font-size: ${p => p.theme.fontSizeLarge};
  336. ${p => p.theme.overflowEllipsis}
  337. `;
  338. const SavedSearchItemVisbility = styled('div')`
  339. color: ${p => p.theme.subText};
  340. font-size: ${p => p.theme.fontSizeSmall};
  341. ${p => p.theme.overflowEllipsis}
  342. `;
  343. const SavedSearchItemQuery = styled('div')`
  344. font-family: ${p => p.theme.text.familyMono};
  345. font-size: ${p => p.theme.fontSizeSmall};
  346. color: ${p => p.theme.subText};
  347. ${p => p.theme.overflowEllipsis}
  348. `;
  349. const ShowAllButton = styled(Button)`
  350. color: ${p => p.theme.linkColor};
  351. font-weight: normal;
  352. padding: ${space(0.5)} ${space(2)};
  353. &:hover {
  354. color: ${p => p.theme.linkHoverColor};
  355. }
  356. `;
  357. const NoSavedSearchesText = styled('p')`
  358. padding: 0 ${space(2)};
  359. margin: ${space(0.5)} 0;
  360. color: ${p => p.theme.subText};
  361. `;
  362. export default SavedIssueSearches;